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

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

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