evil-blocks-rails 0.3.2 → 0.4.0

data/ChangeLog

@@ -1,3 +1,6 @@
+== 0.4 (X-Ray, 14th April 1948)
+* Add new object style.
+
 == 0.3.2 (Helen of Bikini, 25th July 1946)
 * Fix searching elements inside several blocks (by Andrei Miroshnik).
 

data/README.md

@@ -17,8 +17,8 @@ and [role-rails](https://github.com/kossnocorp/role-rails) by Sasha Koss.
   .gallery-control.is-big
     // Evil Blocks add @data-role alias to Slim
     // .class to bind styles, @data-role to bind JavaScript
-    a.gallery-left@next-photo href="#"
-    a.gallery-right@prev-photo href="#"
+    a.gallery-left@nextPhoto href="#"
+    a.gallery-right@prevPhoto href="#"
     img src="photos/1.jpg"
     img src="photos/2.jpg"
     img src="photos/3.jpg"
@@ -46,32 +46,29 @@ and [role-rails](https://github.com/kossnocorp/role-rails) by Sasha Koss.
 ### CoffeeScript
 
 ```coffee
-# Will execute callback only if .gallery-control is in current page
-evil.block '.gallery-control', ($, b, block) ->
-  current   = 0
-  showPhoto = (num) ->
-    # b-function finds only inside .gallery-control
-    b('img').hide()
-    b("img:eql(#{ num })").show()
-
-  initState: ->
-    showPhoto(current)
-
-  buttons: ->
-    # Shortcuts for data-role="next-photo"
-    b.nextPhoto.click ->
-      showPhoto(current += 1)
-
-  slideShow: ->
+# Will execute init only if .gallery-control is in current page
+evil.block '.gallery-control',
+  current: 0
+
+  showPhoto: (num) ->
+    @('img').hide().
+      filter("eql(#{ num })").show()
+
+  init: ->
+    @showPhoto(@current)
+
+  'click on @nextPhoto', (link, event) ->
+    @showPhoto(current += 1)
+
+  'on start-slideshow', ->
     # You can communicate between blocks by simple events
-    block.on 'slideshow-start', ->
-      setTimeout( -> b.nextPhoto.click() , 5000)
+    setTimeout( => @nextPhoto.click() , 5000)
 
-# Will execute callback only on user page, where .user-page exists
-evil.block '.user-page', ($, b, block) ->
+# Will execute init only on user page, where .user-page exists
+evil.block '.user-page',
 
-  startSlidehow: ->
-    b('.gallery-control').trigger('slideshow-start')
+  init: ->
+    @('.gallery-control').trigger('start-slideshow')
 ```
 
 ## Styles
@@ -96,20 +93,19 @@ evil.block '.user-page', ($, b, block) ->
 * Unobtrusive JavaScript.
 * Write animation and states in CSS. JavaScript just changes CSS classes.
 * Avoid rendering. Send from server HTML, not JSON.
-* Wrap scrips to revive blocks in `evil.block(selector, callback)`.
-  It will execute `callback` only if block `selector` exists in current page.
-  So you can be free to join all JS files in one.
-* `evil.block` will send to `callback` three arguments: `$` is jQuery,
-  `b` is “b-function”, `block` is blocks found by `selector`.
-* B-function is like jQuery function, but find only inside finded block
-  (alias `b('a') = $('a', selector)`).
+* Split JS by widgets. Describe widget class in `evil.block(selector, klass)`.
+  It will create `klass` instance and call `init` method for each selectors,
+  which exist in current page. So you can be free to join all JS files in one.
+* Describe events by `EVENTS on SELECTORS` methods
+  (like `keyup submit on @name, @family`). This methods save this and
+  receive jQuery node in first argument and event in second.
 * Bind JavaScript to `data-role` attribute to be free to change styles
   and classes without dangeros of breaking scripts.
-* You can easy find special`data-role` by b-function. It will has properties
-  for all roles inside block (`@role-name` will be camelized to `b.roleName`).
-* If `callback` return object, `evil-block` will execute all it methods.
-  It’s useful to split your script to several initializer with separated
-  variables scope.
+* Every tag with `data-role` will by as property in object with jQuery node.
+* If you need to find elements inside block, use `@(selector)` function.
+* If you need to communicate between blocks, use custom events and create
+  block events listeners by `on EVENTS` method. It will receive events object
+  as first argument and event parameters as next arguments.
 
 ## Install
 

data/lib/assets/javascripts/evil-blocks.js

@@ -53,68 +53,166 @@
     }
 
     /**
-     * Call `callback` only if `selector` was founded on page.
-     * `callback` will receive 3 arguments:
-     * * `$` - jQuery.
-     * * `b` - like jQuery, but find only inside founded blocks.
-     * * `block` - blocks, founded by `selector`.
+     * Evil blocks list.
+     */
+    var vitalizers = [];
+
+    /**
+     * If onready event is already happend.
+     */
+    var ready = false;
+
+    /**
+     * Execute `callback` on every finded `selector` inside `base`.
+     */
+    var vitalize = function (base, selector, callback) {
+        var blocks = $().add( base.filter(selector) ).
+                         add( base.find(selector) );
+
+        if ( blocks.length == 0 ) {
+            return;
+        }
+
+        for ( var i = 0; i < blocks.length; i++ ) {
+            var block = $(blocks[i]);
+
+            var b = (function (block) {
+                return function (subselector) {
+                    return $(subselector, block);
+                };
+            })(block);
+
+            var actives = { };
+            block.find('[data-role]').each(function (_, el) {
+                var roles = el.attributes['data-role'].value.split(' ');
+                for ( var i = 0; i < roles.length; i++ ) {
+                    var role = roles[i].replace(/-\w/g, function (s) {
+                        return s[1].toUpperCase();
+                    });
+                    if ( !actives[role] ) {
+                        actives[role] = [];
+                    }
+                    actives[role].push(el);
+                }
+            });
+
+            for ( var role in actives ) {
+                b[role] = b(actives[role]);
+            }
+
+            var inits = callback($, b, block);
+            if ( typeof(inits) == 'object' ) {
+                for ( var init in inits ) {
+                    inits[init]($, b, block);
+                }
+            }
+        }
+    };
+
+    /**
+     * Convert block class to callback.
+     */
+    var convert = function (klass) {
+        return function ($, obj, block) {
+            obj.block = block;
+
+            for ( var prop in klass ) {
+                (function (prop) {
+                    if ( prop.indexOf('on ') != -1 ) {
+                        var parts = prop.split(' on ');
+                        if ( parts[1] ) {
+                            block.on(parts[0], parts[1], function () {
+                                var arg = Array.prototype.slice.call(arguments);
+                                var el = $(this);
+                                arg.unshift(el);
+                                klass[prop].apply(obj, arg);
+                            });
+                        } else {
+                            block.on(parts[0], function () {
+                                klass[prop].apply(obj, arguments);
+                            });
+                        }
+                    } else {
+                        obj[prop] = klass[prop];
+                    }
+                })(prop);
+            }
+
+            if ( typeof(obj.init) == 'function' ) {
+                obj.init();
+            }
+        }
+    }
+
+    /**
+     * Create object for every `selector` finded in page and call their
+     * `init` method.
+     *
+     *   evil.block '.user-page .buttons',
+     *     init: ->
+     *       @gallery.fotorama()
+     *     delete: ->
+     *       @deleteForm.submit ->
+     *         $('user-status').trigger('deleted')
+     *     'click on @deleleLink': (link) ->
+     *       link.addClass('is-loading')
+     *       delete()
+     *     'on update': ->
+     *       location.reload()
      *
-     * All elements with `data-role` will be add as property to `b`.
+     * Every `data-role="aName"` in HTML will create in object `aName` property
+     * with jQuery node.
      *
-     * `callback` can return hash of inititalizer functions,
-     * `evil.block` will execute them. It is good way to isolate variables
-     * in separated initializers.
+     * To bind delegate listener just create `on EVENT on SELECTOR` method.
+     * In first argument it will receive jQuery node of `e.currentTarget`,
+     * second will be event object and others will be parameters.
      *
-     *   evil.block '.user-page', ($, b, block) ->
+     * To communicate between blocks, just trigget custom events. To receive
+     * events from another blocks, create `on EVENT` method. Event object will
+     * be on first argument here.
      *
-     *     editUser: ->
-     *       # Click on `data-role="edit"` inside `.user-page`
-     *       b.edit.click ->
-     *         b('.edit-form').show()
+     * Block node will be in `@block` property and you can search only inside
+     * block by `@(selector)` method.
      *
-     *     delUser: ->
-     *       b.del.click -> b('.delete-form').submit()
+     * If your block contrain only `init` method, you can use shortcut:
      *
-     *     initGallery: ->
-     *       b.gallery.fotorama()
+     *   evil.block '.block', ->
+     *     # init method
      */
-    window.evil.block = function (selector, callback) {
-        $(function () {
-            var blocks = $(selector);
-            for ( var i = 0; i < blocks.length; i++ ) {
-                var block = $(blocks[i]);
-
-                var b = (function (block) {
-                    return function (subselector) {
-                        return $(subselector, block);
-                    };
-                })(block);
-                var actives = { };
-                block.find('[data-role]').each(function (_, el) {
-                    var roles = el.attributes['data-role'].value.split(' ');
-                    for ( var i = 0; i < roles.length; i++ ) {
-                        var role = roles[i].replace(/-\w/g, function (s) {
-                            return s[1].toUpperCase();
-                        });
-                        if ( !actives[role] ) {
-                            actives[role] = [];
-                        }
-                        actives[role].push(el);
-                    }
-                });
+    window.evil.block = function (selector, vitalizer) {
+        if ( typeof(vitalizer) != 'function' ) {
+            vitalizer = convert(vitalizer)
+        }
+        vitalizers.push([selector, vitalizer]);
 
-                for ( var role in actives ) {
-                    b[role] = $(actives[role]);
-                }
+        if ( ready ) {
+            vitalize($(document), selector, vitalizer);
+        }
+    };
 
-                var inits = callback($, b, block);
-                if ( typeof(inits) == 'object' ) {
-                    for ( var init in inits ) {
-                        inits[init]($, b, block);
-                    }
-                }
-            }
-        });
+    /**
+     * Vitalize all current blocks inside base. You must call it on every
+     * new content from AJAX.
+     *
+     *   'on click on @load': ->
+     *     $.get '/comments', (comments) =>
+     *       evil.block.vitalize $(comments).applyTo(@comments)
+     */
+    window.evil.block.vitalize = function (base) {
+        base = $(base);
+
+        for ( var i = 0; i < vitalizers.length; i++ ) {
+            var vitalizer = vitalizers[i];
+            vitalize(base, vitalizer[0], vitalizer[1]);
+        }
     };
 
+    /*
+     * Run all blocks on load.
+     */
+    $(document).ready(function () {
+        ready = true;
+        evil.block.vitalize(document);
+    });
+
 })(jQuery);

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: evil-blocks-rails
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.4.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-06-25 00:00:00.000000000 Z
+date: 2013-09-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sprockets