better event handling in Ox.Element

This commit is contained in:
rolux 2011-04-30 00:07:23 +02:00
parent 506a2f2923
commit 5f417fa152
4 changed files with 60 additions and 71 deletions

View file

@ -44,6 +44,7 @@ Ox.load('UI', {
}) })
.bindEvent({ .bindEvent({
geocode: function(event, data) { geocode: function(event, data) {
Ox.print(event)
Ox.print(JSON.stringify(data)) Ox.print(JSON.stringify(data))
} }
}) })

View file

@ -55,6 +55,13 @@ Ox.Element = function() {
} : {})); } : {}));
*/ */
function bind(action, event, fn) {
self.$eventHandler[action]('ox_' + event, function(event, data) {
// fixme: remove second parameter
fn(Ox.extend({_event: event}, data), data);
});
}
function mousedown(e) { function mousedown(e) {
/* /*
better mouse events better mouse events
@ -170,28 +177,19 @@ Ox.Element = function() {
/*** /***
binds a function to an event triggered by this object binds a function to an event triggered by this object
Usage Usage
bindEvent(event, fn) or bindEvent({event0: fn0, event1: fn1, ...}) bindEvent(event, fn)
bindEvent({eventA: fnA, eventB: fnB, ...})
***/ ***/
if (arguments.length == 1) { Ox.forEach(Ox.makeObject(arguments), function(fn, event) {
Ox.forEach(arguments[0], function(fn, event) { bind('bind', event, fn);
// Ox.print(that.id, 'bind', event); });
self.$eventHandler.bind('ox_' + event, fn);
});
} else {
// Ox.print(that.id, 'bind', arguments[0]);
self.$eventHandler.bind('ox_' + arguments[0], arguments[1]);
}
return that; return that;
} }
that.bindEventOnce = function() { that.bindEventOnce = function() {
if (arguments.length == 1) { Ox.forEach(Ox.makeObject(arguments), function(fn, event) {
Ox.forEach(arguments[0], function(fn, event) { bind('one', event, fn);
self.$eventHandler.one('ox_' + event, fn); });
});
} else {
self.$eventHandler.one('ox_' + arguments[0], arguments[1]);
}
return that; return that;
}; };
@ -259,39 +257,37 @@ Ox.Element = function() {
Usage Usage
triggerEvent(event) triggerEvent(event)
triggerEvent(event, data) triggerEvent(event, data)
triggerEvent({event0: data0, event1: data1, ...}) triggerEvent({eventA: dataA, eventB: dataB, ...})
***/ ***/
if (Ox.isObject(arguments[0])) { Ox.forEach(Ox.makeObject(arguments), function(data, event) {
Ox.forEach(arguments[0], function(data, event) { if ([
if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragpause', 'dragend', 'playing'].indexOf(event) == -1) { 'mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick',
Ox.print(that.id, self.options.id, 'trigger', event, data); 'dragstart', 'drag', 'dragpause', 'dragend', 'playing'
} ].indexOf(event) == -1) {
self.$eventHandler.trigger('ox_' + event, data); Ox.print(that.id, self.options.id, 'trigger', event, data);
});
} else {
if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragpause', 'dragend', 'playing'].indexOf(arguments[0]) == -1) {
Ox.print(that.id, self.options ? self.options.id : '', 'trigger', arguments[0], arguments[1] || {});
} }
self.$eventHandler.trigger('ox_' + arguments[0], arguments[1] || {}); self.$eventHandler.trigger('ox_' + event, data);
} });
return that; return that;
}; };
that.unbindEvent = function() { that.unbindEvent = function() {
/*** /***
unbinds a function from an event triggered by this element unbinds an event triggered by this element
Usage Usage
unbindEvent(event, fn) unbindEvent() // unbinds all events
unbindEvent({event0: fn0, event1: fn1, ...}) unbindEvent(event)
unbindEvent(eventA, eventB, ...)
unbindEvent([eventA, eventB, ...])
to unbind a specific handler, use namespaced events
bind('doubleclick.x', fn) ... unbind('doubleclick.x')
***/ ***/
if (arguments.length == 1) { if (arguments.length == 0) {
Ox.forEach(arguments[0], function(fn, event) { self.$eventHandler.unbind();
// Ox.print(that.id, 'unbind', arguments[0]);
self.$eventHandler.unbind('ox_' + event, fn);
});
} else { } else {
// Ox.print(that.id, 'unbind', arguments[0]); Ox.makeArray(arguments).forEach(function(event) {
self.$eventHandler.unbind('ox_' + arguments[0], arguments[1]); self.$eventHandler.unbind('ox_' + event);
});
} }
return that; return that;
}; };

View file

@ -1,4 +1,5 @@
// vim: et:ts=4:sw=4:sts=4:ft=js // vim: et:ts=4:sw=4:sts=4:ft=js
Ox.Range = function(options, self) { Ox.Range = function(options, self) {
/** /**

View file

@ -136,7 +136,8 @@ Ox.getset = function(obj, args, callback, context) {
ret = obj[args[0]]; ret = obj[args[0]];
} else { } else {
// getset([key, val]) or getset([{key: val, ...}]) // getset([key, val]) or getset([{key: val, ...}])
args = Ox.makeObject(Ox.isObject(args[0]) ? args[0] : args); args = Ox.makeObject(args);
// args = Ox.makeObject(Ox.isObject(args[0]) ? args[0] : args);
obj = Ox.extend(obj, args); obj = Ox.extend(obj, args);
Ox.forEach(args, function(val, key) { Ox.forEach(args, function(val, key) {
if (!obj_ || !Ox.isEqual(obj_[key], val)) { if (!obj_ || !Ox.isEqual(obj_[key], val)) {
@ -629,44 +630,34 @@ Ox.loop = function() {
} }
}; };
Ox.makeArray = function(arg) { Ox.makeArray = function(obj) {
/* /*
like $.makeArray()
>>> Ox.makeArray('foo', 'bar')
['foo', 'bar']
>>> (function() { return Ox.makeArray(arguments); }('foo', 'bar')) >>> (function() { return Ox.makeArray(arguments); }('foo', 'bar'))
['foo', 'bar'] ['foo', 'bar']
*/ */
return Array.prototype.slice.call( return Array.prototype.slice.call(obj);
Ox.isArguments(arg) ? arg : arguments
);
}; };
Ox.makeObject = function() { Ox.makeObject = function(obj) {
/* /*
>>> Ox.makeObject("foo", "bar").foo >>> (function() { return Ox.makeObject(arguments); }({foo: 'bar'})).foo
"bar" 'bar'
>>> Ox.makeObject(["foo", "bar"]).foo >>> (function() { return Ox.makeObject(arguments); }('foo', 'bar')).foo
"bar" 'bar'
>>> Ox.makeObject({foo: "bar"}).foo >>> (function() { return Ox.makeObject(arguments); }('foo')).foo
"bar" undefined
>>> (function() { return Ox.makeObject(arguments); }("foo", "bar")).foo >>> (function() { return Ox.makeObject(arguments); }()).foo
"bar" undefined
*/ */
var obj = {}; var ret = {};
if (arguments.length == 1) { if (obj.length == 1) {
if (Ox.isObject(arguments[0])) { // ({foo: 'bar'})
// ({foo: 'bar'}) ret = obj[0];
obj = arguments[0]; } else if (obj.length == 2){
} else {
// (['foo', 'bar'])
obj[arguments[0][0]] = arguments[0][1];
}
} else {
// ('foo', 'bar') // ('foo', 'bar')
obj[arguments[0]] = arguments[1]; ret[obj[0]] = obj[1]
} }
return obj; return ret;
}; };
Ox.map = function(obj, fn) { Ox.map = function(obj, fn) {
@ -1320,7 +1311,7 @@ Ox.element = function(str) {
if (arguments.length == 1 && Ox.isString(arguments[0])) { if (arguments.length == 1 && Ox.isString(arguments[0])) {
ret = this[0].getAttribute(arguments[0]); ret = this[0].getAttribute(arguments[0]);
} else { } else {
Ox.forEach(Ox.makeObject.apply(null, arguments), function(v, k) { Ox.forEach(Ox.makeObject(arguments), function(v, k) {
that[0].setAttribute(k, v); that[0].setAttribute(k, v);
}); });
ret = this; ret = this;
@ -1332,7 +1323,7 @@ Ox.element = function(str) {
if (arguments.length == 1 && Ox.isString(arguments[0])) { if (arguments.length == 1 && Ox.isString(arguments[0])) {
ret = this[0].style[arguments[0]]; ret = this[0].style[arguments[0]];
} else { } else {
Ox.forEach(Ox.makeObject.apply(null, arguments), function(v, k) { Ox.forEach(Ox.makeObject(arguments), function(v, k) {
that[0].style[k] = v; that[0].style[k] = v;
}); });
ret = this; ret = this;