tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Matthias Jentsch 2014-09-12 09:09:21 +02:00
parent 3a5415f7c8
commit ad53f7ad3d
8 changed files with 123 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
library/Icinga/Web/JavaScript.php
View File

@ -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',

32
public/js/icinga/behavior/navigation.js
View File

@ -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');

14
public/js/icinga/behavior/sparkline.js
View File

@ -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);

28
public/js/icinga/behavior/tooltip.js
View File

@ -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) {
var self = this, icinga = this.icinga;
Tooltip.prototype.onRendered = function(evt) {
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;

17
public/js/icinga/behavior/tristate.js
View File

@ -8,21 +8,10 @@
Icinga.Behaviors = Icinga.Behaviors || {};
var Tristate = function (icinga) {
this.icinga = icinga;
};
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);
Icinga.EventListener.call(this, icinga);
this.on('click', 'div.tristate .tristate-dummy', this.clickTriState, this);
};
Tristate.prototype = new Icinga.EventListener();
Tristate.prototype.clickTriState = function (event) {
var self = event.data.self;

74
public/js/icinga/eventlistener.js Normal file
View File

@ -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);

24
public/js/icinga/events.js
View File

@ -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) {
$.each(this.icinga.behaviors, function (name, behavior) {
behavior.apply(el);
});
var icinga = this.icinga;
applyHandlers: function (evt) {
var el = $(evt.target), self = evt.data.self;
var icinga = self.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);

5
public/js/icinga/loader.js
View File

@ -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();