Use EventEmitter class as a way to delegate events from behaviors to the dom

library/Icinga/Web/JavaScript.php

@@ -18,6 +18,7 @@ class JavaScript
         'js/icinga/ui.js',
         'js/icinga/timer.js',
         'js/icinga/loader.js',
+        'js/icinga/eventlistener.js',
         'js/icinga/events.js',
         'js/icinga/history.js',
         'js/icinga/module.js',

public/js/icinga/behavior/navigation.js

@@ -10,10 +10,20 @@
     Icinga.Behaviors = Icinga.Behaviors || {};
 
     var Navigation = function (icinga) {
-        this.icinga = icinga;
+        Icinga.EventListener.call(this, icinga);
+        this.on('click', '#menu a', this.linkClicked, this);
+        this.on('click', '#menu tr[href]', this.linkClicked, this);
+        this.on('mouseenter', 'li.dropdown', this.dropdownHover, this);
+        this.on('mouseleave', 'li.dropdown', this.dropdownLeave, this);
+        this.on('mouseenter', '#menu > ul > li', this.menuTitleHovered, this);
+        this.on('mouseleave', '#sidebar', this.leaveSidebar, this);
+        this.on('rendered', this.onRendered);
     };
+    Navigation.prototype = new Icinga.EventListener();
 
-    Navigation.prototype.apply = function(el) {
+    Navigation.prototype.onRendered = function(evt) {
+        // get original source element of the rendered-event
+        var el = evt.target;
         // restore old menu state
         if (activeMenuId) {
             $('[role="navigation"] li.active', el).removeClass('active');
@@ -31,24 +41,6 @@
         }
     };
 
-    Navigation.prototype.bind = function() {
-        $(document).on('click', '#menu a', { self: this }, this.linkClicked);
-        $(document).on('click', '#menu tr[href]', { self: this }, this.linkClicked);
-        $(document).on('mouseenter', 'li.dropdown', this.dropdownHover);
-        $(document).on('mouseleave', 'li.dropdown', {self: this}, this.dropdownLeave);
-        $(document).on('mouseenter', '#menu > ul > li', { self: this }, this.menuTitleHovered);
-        $(document).on('mouseleave', '#sidebar', { self: this }, this.leaveSidebar);
-    };
-
-    Navigation.prototype.unbind = function() {
-        $(document).off('click', '#menu a', this.linkClicked);
-        $(document).off('click', '#menu tr[href]', this.linkClicked);
-        $(document).off('mouseenter', 'li.dropdown', this.dropdownHover);
-        $(document).off('mouseleave', 'li.dropdown', this.dropdownLeave);
-        $(document).off('mouseenter', '#menu > ul > li', this.menuTitleHovered);
-        $(document).on('mouseleave', '#sidebar', this.leaveSidebar);
-    };
-
     Navigation.prototype.linkClicked = function(event) {
         var $a = $(this);
         var href = $a.attr('href');

public/js/icinga/behavior/sparkline.js

@@ -8,10 +8,14 @@
     Icinga.Behaviors = Icinga.Behaviors || {};
 
     var Sparkline = function (icinga) {
-        this.icinga = icinga;
+        Icinga.EventListener.call(this, icinga);
+        this.on('rendered', this.onRendered, this);
     };
+    Sparkline.prototype = new Icinga.EventListener();
+
+    Sparkline.prototype.onRendered = function(evt) {
+        var el = evt.target;
 
-    Sparkline.prototype.apply = function(el) {
         $('span.sparkline', el).each(function(i, element) {
             // read custom options
             var $spark            = $(element);
@@ -45,12 +49,6 @@
         });
     };
 
-    Sparkline.prototype.bind = function() {
-    };
-
-    Sparkline.prototype.unbind = function() {
-    };
-
     Icinga.Behaviors.Sparkline = Sparkline;
 
 }) (Icinga, jQuery);

public/js/icinga/behavior/tooltip.js

@@ -8,15 +8,23 @@
     Icinga.Behaviors = Icinga.Behaviors || {};
 
     var Tooltip = function (icinga) {
-        this.icinga = icinga;
+        Icinga.EventListener.call(this, icinga);
         this.mouseX = 0;
         this.mouseY = 0;
+        this.on('mousemove', this.onMousemove, this);
+        this.on('rendered', this.onRendered, this);
+    };
+    Tooltip.prototype = new Icinga.EventListener();
+
+    Tooltip.prototype.onMousemove = function(event) {
+        event.data.self.mouseX = event.pageX;
+        event.data.self.mouseY = event.pageY;
     };
 
-    Tooltip.prototype.apply = function(el) {
+    Tooltip.prototype.onRendered = function(evt) {
-        var self = this, icinga = this.icinga;
+        var self = evt.data.self, icinga = evt.data.icinga, el = evt.target;
 
-        $('[title]').each(function () {
+        $('[title]', el).each(function () {
             var $el = $(this);
             $el.attr('title', $el.data('title-rich') || $el.attr('title'));
         });
@@ -49,18 +57,6 @@
         });
     };
 
-    Tooltip.prototype.bind = function() {
-        var self = this;
-        $(document).on('mousemove', function (event) {
-            self.mouseX = event.pageX;
-            self.mouseY = event.pageY;
-        });
-    };
-
-    Tooltip.prototype.unbind = function() {
-        $(document).off('mousemove');
-    };
-
     // Export
     Icinga.Behaviors.Tooltip = Tooltip;
 

public/js/icinga/behavior/tristate.js

@@ -8,21 +8,10 @@
     Icinga.Behaviors = Icinga.Behaviors || {};
 
     var Tristate = function (icinga) {
-        this.icinga = icinga;
+        Icinga.EventListener.call(this, icinga);
-    };
+        this.on('click', 'div.tristate .tristate-dummy', this.clickTriState, this);
-
-    Tristate.prototype.apply = function(el) {
-        var self = this, icinga = this.icinga;
-    };
-
-    Tristate.prototype.bind = function() {
-        // Toggle all triStateButtons
-        $(document).on('click', 'div.tristate .tristate-dummy', { self: this }, this.clickTriState);
-    };
-
-    Tristate.prototype.unbind = function() {
-        $(document).off('click', 'div.tristate .tristate-dummy', this.clickTriState);
     };
+    Tristate.prototype = new Icinga.EventListener();
 
     Tristate.prototype.clickTriState = function (event) {
         var self = event.data.self;

public/js/icinga/eventlistener.js

@@ -0,0 +1,74 @@
+// {{{ICINGA_LICENSE_HEADER}}}
+// {{{ICINGA_LICENSE_HEADER}}}
+
+/**
+ * EventListener contains event handlers and can bind / and unbind them from
+ * event emitting objects
+ */
+(function(Icinga, $) {
+
+    "use strict";
+
+    var EventListener = function (icinga) {
+        this.icinga = icinga;
+        this.handlers = [];
+    };
+
+    /**
+     * Add an handler to this EventLister
+     *
+     * @param evt   {String}    The name of the triggering event
+     * @param cond  {String}    The filter condition
+     * @param fn    {Function}  The event handler to execute
+     * @param scope {Object}    The optional 'this' of the called function
+     */
+    EventListener.prototype.on = function(evt, cond, fn, scope) {
+        if (typeof cond === 'function') {
+            scope = fn;
+            fn = cond;
+            cond = 'body';
+        }
+        this.icinga.logger.debug('on: ' + evt + '(' + cond + ')');
+        this.handlers.push({ evt: evt, cond: cond, fn: fn, scope: scope });
+    };
+
+    /**
+     * Bind all listeners to the given event emitter
+     *
+     * All event handlers will be executed when the associated event is
+     * triggered on the given Emitter.
+     *
+     * @param emitter   {String}   An event emitter that supports the function
+     *                             'on' to register listeners
+     */
+    EventListener.prototype.bind = function (emitter) {
+        var self = this;
+        $.each(this.handlers, function(i, handler) {
+            self.icinga.logger.debug('bind: ' + handler.evt + '(' + handler.cond + ')');
+            emitter.on(
+                handler.evt, handler.cond,
+                {
+                    self: handler.scope || emitter,
+                    icinga: self.icinga
+                }, handler.fn
+            );
+        });
+    };
+
+    /**
+     * Unbind all listeners from the given event emitter
+     *
+     * @param emitter   {String}    An event emitter that supports the function
+     *                              'off' to un-register listeners.
+     */
+    EventListener.prototype.unbind = function (emitter) {
+        var self = this;
+        $.each(this.handlers, function(i, handler) {
+            self.icinga.logger.debug('unbind: ' + handler.evt + '(' + handler.cond + ')');
+            emitter.off(handler.evt, handler.cond, handler.fn);
+        });
+    };
+
+    Icinga.EventListener = EventListener;
+
+}) (Icinga, jQuery);

public/js/icinga/events.js

@@ -29,20 +29,17 @@
          */
         initialize: function () {
             this.applyGlobalDefaults();
-            this.applyHandlers($('#layout'));
+            $('#layout').trigger('rendered');
+            //$('.container').trigger('rendered');
             $('.container').each(function(idx, el) {
-                icinga.events.applyHandlers($(el));
                 icinga.ui.initializeControls($(el));
             });
         },
 
         // TODO: What's this?
-        applyHandlers: function (el) {
+        applyHandlers: function (evt) {
-            $.each(this.icinga.behaviors, function (name, behavior) {
+            var el = $(evt.target), self = evt.data.self;
-                behavior.apply(el);
+            var icinga = self.icinga;
-            });
-
-            var icinga = this.icinga;
 
             $('.dashboard > div', el).each(function(idx, el) {
                 var url = $(el).data('icingaUrl');
@@ -83,7 +80,7 @@
             var searchField = $('#menu input.search', el);
             // Remember initial search field value if any
             if (searchField.length && searchField.val().length) {
-                this.searchValue = searchField.val();
+                self.searchValue = searchField.val();
             }
         },
 
@@ -92,9 +89,12 @@
          */
         applyGlobalDefaults: function () {
             $.each(self.icinga.behaviors, function (name, behavior) {
-                behavior.bind();
+                behavior.bind($(document));
             });
 
+            // Apply element-specific behavior whenever the layout is rendered
+            $(document).on('rendered', { self: this }, this.applyHandlers);
+
             // We catch resize events
             $(window).on('resize', { self: this.icinga.ui }, this.icinga.ui.onWindowResize);
 
@@ -145,7 +145,7 @@
         },
 
         onLoad: function (event) {
-            $('.container').trigger('rendered');
+            //$('.container').trigger('rendered');
         },
 
         onUnload: function (event) {
@@ -462,7 +462,7 @@
 
         unbindGlobalHandlers: function () {
             $.each(self.icinga.behaviors, function (name, behavior) {
-                behavior.unbind();
+                behavior.unbind($(document));
             });
             $(window).off('resize', this.onWindowResize);
             $(window).off('load', this.onLoad);

public/js/icinga/loader.js

@@ -540,7 +540,6 @@
                         }).addClass('active');
                 }
             }
-            req.$target.trigger('rendered');
         },
 
         /**
@@ -726,8 +725,10 @@
             }
 
             // TODO: this.icinga.events.refreshContainer(container);
+            $container.trigger('rendered');
+
             var icinga = this.icinga;
-            icinga.events.applyHandlers($container);
+            //icinga.events.applyHandlers($container);
             icinga.ui.initializeControls($container);
             icinga.ui.fixControls();