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)
This commit is contained in:
rolux
parent
8c60fef203
commit
7f05af7380
1 changed files with 58 additions and 37 deletions
|
|
@ -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>')
|
||||
)
|
||||
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() {
|
||||
if (Ox.typeOf(arguments[0]) == 'function') {
|
||||
self.eventCallbacks.push(arguments[0]);
|
||||
} else {
|
||||
Ox.forEach(Ox.makeObject(arguments), function(callback, event) {
|
||||
bind('bind', event, callback);
|
||||
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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue