0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

allow for binding a callback to all events of an element; change the signature of event callbacks from (data) to (data, event), where event is the original jQuery event (formerly data._event)

Browse source
This commit is contained in:
rolux 2012-05-28 16:02:25 +02:00
parent 8c60fef203
commit 7f05af7380
1 changed files with 58 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
source/Ox.UI/js/Core/Ox.Element.js
View file

@ -90,6 +90,8 @@ Ox.Element = function(options, self) {
element: self.options element: self.options
}; };
} }
// array of callbacks bound to any event
self.eventCallbacks = [];
// create event handler // create event handler
// (this can be passed as part of self) // (this can be passed as part of self)
if (!self.$eventHandler) { if (!self.$eventHandler) {
@ -97,23 +99,25 @@ Ox.Element = function(options, self) {
} }
// create public object // create public object
var that = new Ox.JQueryElement( var that = new Ox.JQueryElement($(self.options.element || '<div>'))
$(self.options.element || '<div>')
)
.addClass('OxElement') .addClass('OxElement')
.mousedown(mousedown); .mousedown(mousedown);
setTooltip(); setTooltip();
function bind(action, event, callback) { function bind(event, callback, once) {
self.$eventHandler[action]('ox_' + event, function(event, data) { self.$eventHandler[
callback.call(that, Ox.extend({ once ? 'one' : 'on'
_element: that.$element, ]('ox_' + event, function(event, data) {
_event: event call(callback, data, event);
}, data || {}));
}); });
} }
function call(callback, data, event) {
event.ox_type = event.type.replace(/^ox_/, '');
callback.call(that, data || {}, event);
}
function mousedown(e) { function mousedown(e) {
/* /*
better mouse events better mouse events
@ -158,14 +162,14 @@ Ox.Element = function(options, self) {
}); });
// trigger dragstart, set up drag events // trigger dragstart, set up drag events
that.triggerEvent('dragstart', e); that.triggerEvent('dragstart', e);
$('*').bind({ $('*').on({
mouseenter: dragenter, mouseenter: dragenter,
mouseleave: dragleave mouseleave: dragleave
}); });
clientX = e.clientX; clientX = e.clientX;
clientY = e.clientY; clientY = e.clientY;
Ox.UI.$window Ox.UI.$window
.unbind('mouseup', mouseup) .off('mouseup', mouseup)
.mousemove(mousemove) .mousemove(mousemove)
.one('mouseup', function(e) { .one('mouseup', function(e) {
// stop checking for mouserepeat // stop checking for mouserepeat
@ -173,9 +177,9 @@ Ox.Element = function(options, self) {
// stop checking for dragpause // stop checking for dragpause
clearTimeout(dragTimeout); clearTimeout(dragTimeout);
// stop checking for drag // stop checking for drag
Ox.UI.$window.unbind('mousemove', mousemove); Ox.UI.$window.off('mousemove', mousemove);
// stop checking for dragenter and dragleave // stop checking for dragenter and dragleave
$('*').unbind({ $('*').off({
mouseenter: dragenter, mouseenter: dragenter,
mouseleave: dragleave mouseleave: dragleave
}); });
@ -248,28 +252,28 @@ Ox.Element = function(options, self) {
that.$tooltip = Ox.Tooltip({ that.$tooltip = Ox.Tooltip({
title: self.options.tooltip title: self.options.tooltip
}); });
that.bind({ that.on({
mouseenter: mouseenter mouseenter: mouseenter
}).unbind({ }).off({
mousemove: mousemove mousemove: mousemove
}); });
} else { } else {
that.$tooltip = Ox.Tooltip({ that.$tooltip = Ox.Tooltip({
animate: false animate: false
}); });
that.bind({ that.on({
mousemove: mousemove mousemove: mousemove
}).unbind({ }).off({
mouseenter: mouseenter mouseenter: mouseenter
}); });
} }
that.bind({ that.on({
mouseleave: mouseleave mouseleave: mouseleave
}); });
} else { } else {
if (that.$tooltip) { if (that.$tooltip) {
that.$tooltip.remove(); that.$tooltip.remove();
that.unbind({ that.off({
mouseenter: mouseenter, mouseenter: mouseenter,
mousemove: mousemove, mousemove: mousemove,
mouseleave: mouseleave mouseleave: mouseleave
@ -289,6 +293,7 @@ Ox.Element = function(options, self) {
/*@ /*@
bindEvent <function> Binds a function to an event bindEvent <function> Binds a function to an event
(callback) -> <o> This element
(event, callback) -> <o> This element (event, callback) -> <o> This element
({event: callback, ...}) -> <o> This element ({event: callback, ...}) -> <o> This element
callback <f> Callback function callback <f> Callback function
@ -297,9 +302,13 @@ Ox.Element = function(options, self) {
Event names can be namespaced, like <code>'click.foo'</code> Event names can be namespaced, like <code>'click.foo'</code>
@*/ @*/
that.bindEvent = function() { that.bindEvent = function() {
if (Ox.typeOf(arguments[0]) == 'function') {
self.eventCallbacks.push(arguments[0]);
} else {
Ox.forEach(Ox.makeObject(arguments), function(callback, event) { Ox.forEach(Ox.makeObject(arguments), function(callback, event) {
bind('bind', event, callback); bind(event, callback);
}); });
}
return that; return that;
}; };
@ -314,7 +323,7 @@ Ox.Element = function(options, self) {
@*/ @*/
that.bindEventOnce = function() { that.bindEventOnce = function() {
Ox.forEach(Ox.makeObject(arguments), function(callback, event) { Ox.forEach(Ox.makeObject(arguments), function(callback, event) {
bind('one', event, callback); bind(event, callback, true);
}); });
return that; return that;
}; };
@ -445,6 +454,7 @@ Ox.Element = function(options, self) {
@*/ @*/
that.triggerEvent = function() { that.triggerEvent = function() {
Ox.forEach(Ox.makeObject(arguments), function(data, event) { Ox.forEach(Ox.makeObject(arguments), function(data, event) {
var type = 'ox_' + event;
if ([ if ([
'mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick',
'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend', 'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend',
@ -458,7 +468,10 @@ Ox.Element = function(options, self) {
// it is necessary to check if self.$eventHandler exists, // it is necessary to check if self.$eventHandler exists,
// since, for example, when removing the element on click, // since, for example, when removing the element on click,
// singleclick will fire after the removal of the event handler // singleclick will fire after the removal of the event handler
self.$eventHandler && self.$eventHandler.trigger('ox_' + event, data); self.$eventHandler && self.$eventHandler.trigger(type, data);
self.eventCallbacks.forEach(function(callback) {
call(callback, data, {type: type});
});
}); });
return that; return that;
}; };
@ -468,22 +481,30 @@ Ox.Element = function(options, self) {
To unbind a specific handler, use namespaced events, like To unbind a specific handler, use namespaced events, like
<code>bindEvent('click.foo', callback)</code>, and then <code>bindEvent('click.foo', callback)</code>, and then
<code>unbindEvent('click.foo')</code>. <code>unbindEvent('click.foo')</code>.
() -> <object> This element object () -> <object> This element
Unbinds all events Unbinds all callbacks from all events
(event) -> <object> This element object (callback) -> <o> This element
Unbinds one event Unbinds one callback from all events
(event, event, ...) -> <object> This element object (event) -> <o> This element
Unbinds multiple events Unbinds all callbacks from one event
([event, event, ...]) -> <object> This element object (event, callback) -> <o> This element
Unbinds multiple events Unbinds one callback from one event
({event: callback}, ...) -> <o> This element
Unbinds multiple callbacks from multiple events
event <string> Event name event <string> Event name
@*/ @*/
that.unbindEvent = function() { that.unbindEvent = function() {
var callback = arguments[0];
if (arguments.length == 0) { if (arguments.length == 0) {
self.$eventHandler.unbind(); self.eventCallbacks = [];
self.$eventHandler.off();
} else if (Ox.typeOf(callback) == 'function') {
self.eventCallbacks = self.eventCallbacks.filter(function(fn) {
return fn !== callback;
});
} else { } else {
Ox.toArray(arguments).forEach(function(event) { Ox.makeObject(arguments).forEach(function(callback, event) {
self.$eventHandler.unbind('ox_' + event); self.$eventHandler.off('ox_' + event, callback);
}); });
} }
return that; return that;