evil-blocks-rails 0.4.2 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 042b8793f4b21ddc3537ffeedb52bf385f5151cb
-  data.tar.gz: 1cdcd05204062ec41c691b866b73bcd99b2b499d
+  metadata.gz: d18be5dfc85ca1bdff5b9748f2a033f09ab24a81
+  data.tar.gz: 58bc3e5399b808b2e8025c91df312e2472d34943
 SHA512:
-  metadata.gz: f2af591d5da0d690ff751c001d82fe037b5ead54fc9fd1bb0139a39b37e185e66a51037d2e01a2edf388876aef0944a9e5c52bc17f6abc829a34b9c39e607492
-  data.tar.gz: f68b5e4e6b15be19ddfe42b3c9d67f0043a71268c5107b873847d85cb783797a9d36e0b7285f018763058164daf4e4350c3d74adcacea90e0eadaccdde8534dc
+  metadata.gz: 7bc25d378340da42e2533f0b1eb7baf366a7f74b76f74a44093ffee067442cad9036e143d30d28779f9259b1468cd4a7f1868ab0f5cbcbbdbdc496857e983d4b
+  data.tar.gz: 4daffdd46ff66ec0f9a133c4c9186e5220858d140848a0153f37e7d7d9ed7a35eabd1f46085e1784229ce0e8239925da4d87e26ea9469a88868f61edfaa933c3

data/ChangeLog.md

@@ -0,0 +1,37 @@
+## 0.5 (RDS-1, 29th August 1949)
+* Current event target was moved from first argument to `event.el`.
+* Inside finder was moved from `@(selector)` to `@$(selector)`.
+* Remove old function style API.
+* Add `@@block` alias.
+* Add debugger extension.
+* Vitalize blocks on next tick after page ready.
+* Don’t vitalize blocks twice.
+* Method `evil.block.vitalize()` calls on `document` by default.
+* Allow to use GitHub master in Bundler.
+* Add Bower support.
+
+## 0.4.2 (Zebra, 14th May 1948)
+* Don’t listen bubbled events as block event.
+* Change license to MIT.
+
+## 0.4.1 (Yoke, 30th April 1948)
+* Allow to listen body and window events from object style.
+
+## 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).
+
+## 0.3.1 (Gilda, 1st July 1946)
+* Fix in multiple block copies on one page (by Andrei Miroshnik).
+
+## 0.3 (Fat Man, 9th August 1945)
+* Add shortcut to Slim to set data-role and class.
+* Run callback on every block copy in page.
+
+## 0.2 (Little Boy, 6th August 1945)
+* Support non-Rails applications in gem.
+
+## 0.1 (The Gadget, 16th July 1945)
+* Initial release.

data/README.md

@@ -1,122 +1,388 @@
 # Evil Blocks
 
-Evil Block is a tiny framework for web pages. It splits your application
-to separated blocks with isolated styles and scripts.
+Evil Block is a tiny JS framework for web pages. It is based on 4 ideas:
 
-Sponsored by [Evil Martians](http://evilmartians.com/).
-Role aliases taken from [role](https://github.com/kossnocorp/role)
-and [role-rails](https://github.com/kossnocorp/role-rails) by Sasha Koss.
+* **Split code to independent blocks.** “Divide and rule” is always good idea.
+* **Blocks communicate by events.** Events is easy and safe method to clean
+  very complicated dependencies between controls.
+* **Separate JS and CSS.** You use classes only for styles and bind JS
+  by selectors with special attributes. So you can update your styles without
+  fear to break your scripts.
+* **Try not to render on client.** 2 way data-binding looks very cool,
+  but it has [big price]. Most of web pages (instead of web applications)
+  can render all HTML on server and use client rendering only in few small
+  places. Without rendering we can incredibly clean code and architecture.
+
+See also [Evil Front], a pack of helpers for Ruby on Rails and Evil Blocks.
+
+Sponsored by [Evil Martians]. Role aliases was taken from [Role.js].
+
+[Role.js]:       https://github.com/kossnocorp/role
+[big price]:     http://staal.io/blog/2014/02/05/2-way-data-binding-under-the-microscope/
+[Evil Front]:    https://github.com/ai/evil-front
+[Evil Martians]: http://evilmartians.com/
 
 ## Quick Example
 
-### Slim Template
+Slim template:
+
+```haml
+.todo-control@@todo
+  ul@tasks
+
+    - @tasks.each do |task|
+      .task@task
+        = task.name
+        form@finishForm action="/tasks/#{ task.id }/finish"
+          input type="submit" value="Finish"
+
+  form@addForm action="/tasks/"
+    input type="text"   name="name"
+    input type="submit" value="Add"
+```
+
+Block’s CoffeeScript:
+
+```coffee
+evil.block '@@todo',
+
+  ajaxSubmit: (e) ->
+    e.preventDefault()
+
+    form = e.el
+    form.addClass('is-loading')
+
+    $.ajax
+      url:      form.attr('action')
+      data:     form.serialize()
+      complete: -> form.addClass('is-loading')
+
+  'submit on @finishForm': (e) ->
+    @ajaxSubmit(e).done ->
+      e.el.closest("@task").addClass("is-finished")
+
+  'submit on @addForm': (e) ->
+    e.preventDefault()
+    @ajaxSubmit(e).done (newTaskHTML) ->
+      @tasks.append(newTaskHTML)
+```
+
+## Attributes
+
+If you use classes selectors in CSS and JS, your scripts will be depend
+on styles. If you will change `.small-button` to `.big-button`, you must
+change all button’s selectors in scripts.
+
+Separated scripts and styles are better, so Evil Blocks prefer to work with
+two HTML attributes to bind your JS: `data-block` (to define blocks)
+and `data-role` (to define elements inside block).
+
+```html
+<div data-block="todo">
+    <ul data-role="tasks">
+    </ul>
+</div>
+```
+
+Evil Blocks extends Slim and jQuery, so you can use shortcuts for this
+attributes: `@@block` and `@role`:
+
+```haml
+@@todo
+  ul@tasks
+```
+
+```js
+$('@tasks')
+```
+
+With this attributes you can easily change interface style
+and be sure in scripts:
 
 ```haml
-.user-page
-  .title User Name
-  .gallery-control.is-big
-    // Evil Blocks add @data-role alias to Slim
-    // .class to bind styles, @data-role to bind JavaScript
-    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"
-```
-
-### Sass Styles
-
-```sass
-// Block
-.user-page
-  // All elements must be inside blocks (like in namespaces)
-  .title
-    font-size: 20px
-
-// Block
-.gallery-control
-  position: relative
-  img, .gallery-left, .gallery-right
-    position: absolute
-  // Modificator
-  &.is-big
-    width: 600px
-```
-
-### CoffeeScript
-
-```coffee
-# Will execute init only if .gallery-control is in current page
-evil.block '.gallery-control',
+.big-button@addButton
+```
+
+Of course, Evil Block doesn’t force you to use only this selectors.
+You can any attributes, that you like.
+
+## Blocks
+
+You should split your interface to independent controls and mark them
+with `data-block`:
+
+```haml
+header@@header
+  a.exit href="#"
+
+.todo-control@@todo
+  ul.tasks
+
+.docs-page@@docs
+```
+
+Then you can vitalize your blocks in scripts by `evil.block` function:
+
+```coffee
+evil.block '@@header',
+
+  init: ->
+    console.log('Vitalize', @block)
+```
+
+When page will be loaded Evil Blocks finds blocks by `@@header` selector
+(this is shortcut for `[data-block=header]`) and call `init` on every
+founded block. So, if your page contains two headers, `init` will be called
+twice with different `@block`.
+
+Property `@block` will contain jQuery-node of current block. You can search
+inside current block by `@$(selector)` method:
+
+```coffee
+evil.block '@@docs',
+
+  init: ->
+    @$('a').attr(target: '_blank') # Open all links inside docs in new tab
+                                   # Same as @block.find('a')
+```
+
+You can add any methods and properties to your block class:
+
+```coffee
+evil.block '@@gallery',
   current: 0
 
   showPhoto: (num) ->
-    @('img').hide().
+    @$('img').hide().
       filter("eql(#{ num })").show()
 
   init: ->
     @showPhoto(@current)
+```
+
+Evil Blocks will automatically create properties with jQuery-nodes
+for every element inside block with `data-role` attribute:
+
+```haml
+.todo-control@@todo
+  ul.tasks@tasks
+```
+
+```coffee
+evil.block '@@todo',
+
+  addTask: (task) ->
+    @tasks.append(task)
+```
+
+If you add new HTML by AJAX, you can vitalize new blocks by
+`evil.block.vitalize()`. This function will vitalize only new blocks in
+document.
+
+```coffee
+@sections.append(html)
+evil.block.vitalize()
+```
+
+## Events
+
+You can bind listeners to events inside block by `"events on selectors"` method:
+
+```coffee
+evil.block '@@todo',
+
+  'submit on @finishForm': ->
+    # Event listener
+```
+
+More difficult example:
+
+```coffee
+evil.block '@@form',
+  ajaxSearch: -> …
 
-  'click on @nextPhoto', (link, event) ->
-    @showPhoto(current += 1)
+  'change, keyup on input, select': (event) ->
+    field = event.el()
+    @ajaxSearch('Changed', field.val())
+```
+
+Listener will receive jQuery Event object as first argument.
+Current element (`this` in jQuery listeners) will be in `event.el` property.
+All listeners are delegated on current block, so `click on @button` will be
+equal to `@block.on 'click', '@button', ->`.
 
-  'on start-slideshow', ->
-    # You can communicate between blocks by simple events
-    setTimeout( => @nextPhoto.click() , 5000)
+You should prevent default event behavior by `event.preventDefault()`,
+`return false` will not do anything in block’s listeners. I recommend
+[evil-front/links] to prevent default behavior in any links with `href="#"`
+to clean your code.
 
-# Will execute init only on user page, where .user-page exists
-evil.block '.user-page',
+You can also bind events on body and window:
+
+```coffee
+evil.blocks '@@docs',
+  recalcMenu: -> …
+  openPage:   -> …
 
   init: ->
-    @('.gallery-control').trigger('start-slideshow')
-```
-
-## Styles
-
-* You split all you tags to “blocks” and “elements”. Elements must belong
-  to block. Blocks can be nested.
-* Blocks classes must have special suffix, that can’t be accidentally used
-  in elements. For example. `-page`, `-layout`, `-control` suffixes
-  (for example, `.user-page`, `.header-layout`, `.gallery-control`).
-* All styles must have block class in condition. For example,
-  `.user-page .title`, `.user-page .edit`. So all you styles is protected
-  from accidentally same classes (it’s important, if you join all your CSS files
-  in one file).
-* If block can be nested in another blocks (like common controls), adds prefix
-  to all its elements (like `.gallery-left`). If block is a root block
-  (like `.user-page` or `.header-layout`) be free to use short classes.
-* Classes to modificate elements or blocks, must be like sentence without a noun
-  (for example, `.is-big`, `.with-header`).
-
-## JavaScript
-
-* Unobtrusive JavaScript.
-* Write animation and states in CSS. JavaScript just changes CSS classes.
-* Avoid rendering. Send from server HTML, not JSON.
-* 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.
-* 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.
+    @recalcMenu()
+
+  'resize on window': ->
+    @recalcMenu()
+
+  'hashchange on window': ->
+    @openPage(location.hash)
+```
+
+[evil-front/links]: https://github.com/ai/evil-front/blob/master/evil-front/lib/assets/javascripts/evil-front/links.js
+
+## Blocks Communications
+
+Blocks should communicates by custom jQuery events. You can bind event listener
+to block node by `"on events"` method:
+
+```coffee
+evil.block '@@slideshow', ->
+  nextSlide: -> …
+
+  'on play': ->
+    @timer = setInterval(=> @nextSlide, 5000)
+
+  'on stop': ->
+    clearInterval(@timer)
+
+evil.block '@@video', ->
+
+  'click on @fullscreenButton': ->
+    $('@@slideshow').trigger('stop')
+```
+
+If you want to use broadcast messages, you can use custom events on body:
+
+```coffee
+evil.block '@@callUs', ->
+
+  'change-city on body': (e, city) ->
+    @phoneNumber.text(city.phone)
+
+evil.block '@@cityChanger', ->
+  getCurrentCity: -> …
+
+  'change on @citySelect': ->
+    $('body').trigger('change-city', @getCurrentCity())
+```
+
+## Rendering
+
+If you will render on client and on server-side, you must repeat helpers, i18n,
+templates. Client rendering requires a lot of libraries and architecture.
+2-way data binding looks cool, but has very [big price] in performance,
+templates, animation and overengeniring.
+
+If you develop web page (not web application with offline support, etc),
+server-side rendering will be more useful. Users will see your interface
+imminently, search engines will index your content and your code will be much
+simple and clear.
+
+In most of cases you can avoid client rendering. If you need to add some block
+by JS, you can render it hidden to page HTML and show in right time:
+
+```coffee
+evil.block '@@comment',
+
+  'click on @addCommentButton': ->
+    @newCommentForm.slideDown()
+```
+
+If user change some data and you need to update view, you anyway need to send
+request to save new data on server. Just ask server to render new view.
+For example, on new comment server can return new comment HTML:
+
+```coffee
+evil.block '@@comment',
+
+  'submit on @addCommentForm': ->
+    $.post '/comments', @addCommentForm.serialize(), (newComment) ->
+      @comments.append(newComment)
+```
+
+But, of course, some cases require client rendering. Evil Blocks only recommend
+to do it server-side, but not force you:
+
+```coffee
+evil.block '@@comment',
+
+  'change, keyup on @commentField', ->
+    html = JST['comment'](text: @commentField.text())
+    @preview.html(html)
+```
+
+[big price]: http://staal.io/blog/2014/02/05/2-way-data-binding-under-the-microscope/
+
+## Modules
+
+If your blocks has same behavior, you can create module-block and set
+multiple blocks on same tag:
+
+```haml
+@popup@@closable
+  a@closeLink href="#"
+```
+
+```coffee
+evil.block '@@closable', ->
+
+  'click on @closeLink': ->
+    @block.trigger('close')
+
+evil.block '@@popup', ->
+
+  'on close': ->
+    @clock.removeClass('is-open')
+```
+
+If you want to use same methods inside multiple block, you can create
+inject-function:
+
+```coffee
+fancybox = (obj) ->
+  for name, value of fancybox.module
+    obj[name] = value
+  # Initializer code
+
+fancybox.module =
+  openInFancybox: (node) ->
+
+evil.block '@@docs',
+
+  init: ->
+    fancybox(@)
+
+  'click on @showExampleButton': ->
+    @openInFancybox(@example)
+```
+
+## Debug
+
+Evil Blocks contains debug extension, which log every events inside blocks.
+To enable it, just load `evil-block.debug.js`. For example, in Rails:
+
+```haml
+- if Rails.env.development?
+  = javascript_include_tag 'evil-block.debug'
+```
 
 ## Install
 
 ### Ruby on Rails
 
 Add `evil-block-rails` gem to `Gemfile`:
+
 ```ruby
 gem "evil-blocks-rails"
 ```
 
 Load `evil-blocks.js` in your script:
+
 ```js
 //= require evil-blocks
 ```
@@ -125,16 +391,19 @@ Load `evil-blocks.js` in your script:
 
 If you use Sinatra or other non-Rails framework you can add Evil Blocks path
 to Sprockets environment:
+
 ```ruby
 EvilBlocks.install(sprockets)
 ```
 
-And change Slim options to support `@data-rule` shortcut:
+And change Slim options to support `@@block` and `@rule` shortcuts:
+
 ```ruby
 EvilBlocks.install_to_slim!
 ```
 
 Then just load `evil-blocks.js` in your script:
+
 ```js
 //= require evil-blocks
 ```
@@ -142,8 +411,3 @@ Then just load `evil-blocks.js` in your script:
 ### Others
 
 Add file `lib/evil-blocks.js` to your project.
-
-## See Also
-
-* [Evil Front](https://github.com/ai/evil-front) – pack of helpers and libraries
-  for Ruby on Rails and Evil Blocks.

data/lib/evil-blocks-rails.rb

@@ -6,20 +6,21 @@ module EvilBlocks
     # Copy from role-rails by Sasha Koss.
     # https://github.com/kossnocorp/role-rails
     shortcut = Slim::Parser.default_options[:shortcut]
-    shortcut['@']  = { :attr =>  'data-role' }
-    shortcut['@.'] = { :attr => ['data-role', 'class'] }
-    Slim::Engine.default_options[:merge_attrs]['data-role'] = ' '
+    shortcut['@']  = { attr: 'data-role' }
+    shortcut['@@'] = { attr: 'data-block' }
+    Slim::Engine.default_options[:merge_attrs]['data-role']  = ' '
+    Slim::Engine.default_options[:merge_attrs]['data-block'] = ' '
   end
 
   # Add assets paths to standalone Sprockets environment.
   def self.install(sprockets)
-    sprockets.append_path(Pathname(__FILE__).dirname.join('assets/javascripts'))
+    sprockets.append_path(Pathname(__FILE__).dirname)
   end
 
   if defined? ::Rails
-    # Tell Ruby on Rails to add `evil-block.js` to Rails Admin load paths.
     class Engine < ::Rails::Engine
-      initializer 'evil-front.slim' do
+      initializer 'evil-blocks' do
+        EvilBlocks.install(Rails.application.assets)
         EvilBlocks.install_to_slim! if defined?(Slim::Parser)
       end
     end

data/lib/evil-blocks.debug.js

@@ -0,0 +1,29 @@
+;(function () {
+    "use strict";
+
+    var log = function () {
+        if ( !console || !console.log ) {
+            return;
+        }
+        console.log.apply(console, arguments);
+    };
+
+    if ( !window.evil || !window.evil.block ) {
+        log("You should include evil-blocks.debug.js after evil-blocks.js");
+        return;
+    }
+
+    window.evil.block.eventFilter = function (callback, block, event) {
+        return function () {
+            var params = Array.prototype.slice.call(arguments, 1);
+            var messages = ['Event "' + event + '" on', block.block[0]];
+            if ( params.length > 0 ) {
+                messages.push('with params');
+                messages = messages.concat(params);
+            }
+            log.apply(this, messages);
+
+            callback.apply(this, arguments);
+        };
+    }
+})();

data/lib/{assets/javascripts/evil-blocks.js → evil-blocks.js}

@@ -15,7 +15,9 @@
 
         context[name] = function () {
             arguments[pos] = arguments[pos].replace(
-                /@([\w\u00c0-\uFFFF\-]+)/g, '[data-role~="$1"]');
+                /@@([\w\u00c0-\uFFFF\-]+)/g, '[data-block~="$1"]');
+            arguments[pos] = arguments[pos].replace(
+                /@([\w\u00c0-\uFFFF\-]+)/g,  '[data-role~="$1"]');
             return original.apply(context, arguments);
         };
 
@@ -34,20 +36,48 @@
         window.evil = { };
     }
 
-    /**
-     * Evil blocks list.
-     */
-    var vitalizers = [];
-
     /**
      * If onready event is already happend.
      */
     var ready = false;
 
+    var callbacks = {
+        /**
+         * Create callback wrapper for block listener.
+         */
+        block: function (self, func) {
+            return function (e) {
+                if ( e.currentTarget == e.target ) {
+                    func.apply(self, arguments);
+                }
+            }
+        },
+
+        /**
+         * Create callback wrapper for body/document listener.
+         */
+        global: function (self, func) {
+            return function () {
+                func.apply(self, arguments);
+            }
+        },
+
+        /**
+         * Create callback wrapper for element listener.
+         */
+        elem: function (self, func) {
+            return function () {
+                var event = arguments[0];
+                event.el = $(this);
+                func.apply(self, arguments);
+            }
+        }
+    };
+
     /**
      * Execute `callback` on every finded `selector` inside `base`.
      */
-    var vitalize = function (base, selector, callback) {
+    var vitalize = function (base, selector, klass) {
         var blocks = $().add( base.filter(selector) ).
                          add( base.find(selector) );
 
@@ -55,10 +85,19 @@
             return;
         }
 
+        var inits = [];
+
         for ( var i = 0; i < blocks.length; i++ ) {
             var block = $(blocks[i]);
 
-            var b = (function (block) {
+            if ( block.data('evil-vitalized') ) {
+                continue;
+            }
+            block.data('evil-vitalized', true);
+
+            var obj = { };
+
+            obj.$ = (function (block) {
                 return function (subselector) {
                     return $(subselector, block);
                 };
@@ -68,99 +107,61 @@
             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] = [];
+                    var role = roles[i];
+                    if ( !obj[role] ) {
+                        obj[role] = $();
                     }
-                    actives[role].push(el);
+                    obj[role].push(el);
                 }
             });
 
-            for ( var role in actives ) {
-                b[role] = b(actives[role]);
-            }
+            obj.block = block;
 
-            var inits = callback($, b, block);
-            if ( typeof(inits) == 'object' ) {
-                for ( var init in inits ) {
-                    inits[init]($, b, block);
+            var event = function (type, name, prop) {
+                var result = callbacks[type](obj, prop);
+                if ( window.evil.block.eventFilter ) {
+                    result = window.evil.block.eventFilter(result, obj, name);
                 }
-            }
-        }
-    };
-
-    /**
-     * Create callback wrapper for block listener.
-     */
-    var blockCallback = function (self, func) {
-        return function (e) {
-            if ( e.currentTarget == e.target ) {
-                func.apply(self, arguments);
-            }
-        }
-    };
-
-    /**
-     * Create callback wrapper for body/document listener.
-     */
-    var globalCallback = function (self, func) {
-        return function () {
-            func.apply(self, arguments);
-        }
-    };
-
-    /**
-     * Create callback wrapper for element listener.
-     */
-    var elemCallback = function (self, func) {
-        return function () {
-            var args = Array.prototype.slice.call(arguments);
-            var el   = $(this);
-            args.unshift(el);
-            func.apply(self, args);
-        }
-    };
-
-    /**
-     * Convert block class to callback.
-     */
-    var convert = function (klass) {
-        return function ($, obj, block) {
-            obj.block = block;
+                return result;
+            };
 
             for ( var name in klass ) {
                 var prop = klass[name];
 
-                (function (name, prop) {
-                    if ( name.indexOf('on ') == -1 ) {
-                        obj[name] = prop;
-                        return;
-                    }
+                if ( name.indexOf('on ') == -1 ) {
+                    obj[name] = prop;
+                    continue;
+                }
 
+                (function (name, prop) {
                     var parts = name.split(' on ');
 
                     if ( parts[1] == 'body' ) {
-                        $('body').on(parts[0], globalCallback(obj, prop));
+                        $('body').on(parts[0], event('global', name, prop));
 
                     } else if ( parts[1] == 'window' ) {
-                        $(window).on(parts[0], globalCallback(obj, prop));
+                        $(window).on(parts[0], event('global', name, prop));
 
                     } else if ( parts[1] ) {
-                        block.on(parts[0], parts[1], elemCallback(obj, prop));
+                        block.on(parts[0], parts[1], event('elem', name, prop));
 
                     } else {
-                        block.on(parts[0], blockCallback(obj, prop));
+                        block.on(parts[0], event('block', name, prop));
                     }
                 })(name, prop);
             }
 
-            if ( typeof(obj.init) == 'function' ) {
-                obj.init();
-            }
+            inits.push(obj);
         }
-    }
+
+        if ( klass.init ) {
+            return function () {
+                for ( var i = 0; i < inits.length; i++ ) {
+                    klass.init.apply(inits[i]);
+                }
+            };
+        }
+    };
 
     /**
      * Create object for every `selector` finded in page and call their
@@ -172,8 +173,8 @@
      *     delete: ->
      *       @deleteForm.submit ->
      *         $('user-status').trigger('deleted')
-     *     'click on @deleleLink': (link) ->
-     *       link.addClass('is-loading')
+     *     'click on @deleleLink': (e) ->
+     *       e.el.addClass('is-loading')
      *       delete()
      *     'on update': ->
      *       location.reload()
@@ -181,7 +182,7 @@
      * Every `data-role="aName"` in HTML will create in object `aName` property
      * with jQuery node.
      *
-     * To bind delegate listener just create `on EVENT on SELECTOR` method.
+     * To bind delegate listener just create `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.
      *
@@ -198,16 +199,25 @@
      *     # init method
      */
     window.evil.block = function (selector, vitalizer) {
-        if ( typeof(vitalizer) != 'function' ) {
-            vitalizer = convert(vitalizer)
+        if ( typeof(vitalizer) == 'function' ) {
+            vitalizer = { init: vitalizer };
         }
-        vitalizers.push([selector, vitalizer]);
+
+        window.evil.block.vitalizers.push([selector, vitalizer]);
 
         if ( ready ) {
-            vitalize($(document), selector, vitalizer);
+            var init = vitalize($(document), selector, vitalizer);
+            if ( init ) {
+                init();
+            }
         }
     };
 
+    /**
+     * Evil blocks list.
+     */
+    window.evil.block.vitalizers = [];
+
     /**
      * Vitalize all current blocks inside base. You must call it on every
      * new content from AJAX.
@@ -217,11 +227,22 @@
      *       evil.block.vitalize $(comments).applyTo(@comments)
      */
     window.evil.block.vitalize = function (base) {
-        base = $(base);
+        if ( base ) {
+            base = $(base);
+        } else {
+            base = $(document);
+        }
+
+        var inits = [];
+        for ( var i = 0; i < window.evil.block.vitalizers.length; i++ ) {
+            var vitalizer = window.evil.block.vitalizers[i];
+            inits.push( vitalize(base, vitalizer[0], vitalizer[1]) );
+        }
 
-        for ( var i = 0; i < vitalizers.length; i++ ) {
-            var vitalizer = vitalizers[i];
-            vitalize(base, vitalizer[0], vitalizer[1]);
+        for ( var i = 0; i < inits.length; i++ ) {
+            if ( inits[i] ) {
+                inits[i]();
+            }
         }
     };
 
@@ -229,8 +250,10 @@
      * Run all blocks on load.
      */
     $(document).ready(function () {
-        ready = true;
-        evil.block.vitalize(document);
+        setTimeout(function () {
+            ready = true;
+            evil.block.vitalize();
+        }, 1);
     });
 
 })(jQuery);

metadata

@@ -1,45 +1,44 @@
 --- !ruby/object:Gem::Specification
 name: evil-blocks-rails
 version: !ruby/object:Gem::Version
-  version: 0.4.2
+  version: 0.5.0
 platform: ruby
 authors:
-- Andrey "A.I." Sitnik
+- Andrey Sitnik
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-10-01 00:00:00.000000000 Z
+date: 2014-02-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sprockets
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '2'
-description: Evil Block is a tiny framework for web pages. It split your application
-  to separated blocks and isolate their styles and scripts.
-email:
-- andrey@sitnik.ru
+description: 
+email: andrey@sitnik.ru
 executables: []
 extensions: []
 extra_rdoc_files:
 - LICENSE
 - README.md
-- ChangeLog
+- ChangeLog.md
 files:
-- lib/assets/javascripts/evil-blocks.js
-- lib/evil-blocks-rails.rb
+- ChangeLog.md
 - LICENSE
 - README.md
-- ChangeLog
+- lib/evil-blocks-rails.rb
+- lib/evil-blocks.debug.js
+- lib/evil-blocks.js
 homepage: https://github.com/ai/evil-blocks
 licenses:
 - MIT
@@ -50,18 +49,18 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.3
+rubygems_version: 2.2.0
 signing_key: 
 specification_version: 4
-summary: Tiny framework for web pages to split your app to separated blocks
+summary: Tiny JS framework for web pages to split your app to independent blocks
 test_files: []

data/ChangeLog

@@ -1,24 +0,0 @@
-== 0.4.2 (Zebra, 14th May 1948)
-* Don’t listen bubbled events as block event.
-
-== 0.4.1 (Yoke, 30th April 1948)
-* Allow to listen body and window events from object style.
-
-== 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).
-
-== 0.3.1 (Gilda, 1st July 1946)
-* Fix in multiple block copies on one page (by Andrei Miroshnik).
-
-== 0.3 (Fat Man, 9th August 1945)
-* Add shortcut to Slim to set data-role and class.
-* Run callback on every block copy in page.
-
-== 0.2 (Little Boy, 6th August 1945)
-* Support non-Rails applications in gem.
-
-== 0.1 (The Gadget, 16th July 1945)
-* Initial release.