oxjs/source/UI/js/Core/Event.js

503 lines
19 KiB
JavaScript
Raw Normal View History

2014-09-23 19:12:31 +00:00
(function() {
var chars = {
comma: ',',
dot: '.',
minus: '-',
quote: '\'',
semicolon: ';',
slash: '/',
space: ' '
},
2014-09-24 20:28:56 +00:00
keyboardCallbacks = {},
2014-09-23 19:12:31 +00:00
keyboardEventRegExp = /^key(\.[\w\d.]+)?$/,
keys = '',
keysEventRegExp = new RegExp(
'^[\\w\\d](\\.numpad)?$|^(' + Object.keys(chars).join('|') + ')$'
),
resetTimeout,
triggerTimeout;
function bind(options) {
var args = Ox.slice(arguments, 1),
callbacks = options.callbacks,
2014-09-24 20:28:56 +00:00
that = this,
oxid = that.oxid || 0;
2014-09-23 19:12:31 +00:00
Ox.forEach(
Ox.isFunction(args[0]) ? {'*': args[0]} : Ox.makeObject(args),
function(originalCallback, event) {
event = event.replace(/^key_/, 'key.');
callbacks[event] = (callbacks[event] || []).concat(
options.once ? function callback() {
unbind.call(
that, {callbacks: callbacks}, event, callback
);
return originalCallback.apply(null, arguments);
}
: originalCallback
);
if (isKeyboardEvent(event)) {
2014-09-24 20:28:56 +00:00
keyboardCallbacks[oxid] = (
keyboardCallbacks[oxid] || []
).concat(event);
2014-09-23 19:12:31 +00:00
}
}
);
return this;
}
function isKeyboardEvent(event) {
return keyboardEventRegExp.test(event);
2012-06-30 09:24:03 +00:00
}
2011-09-23 10:43:57 +00:00
2014-09-23 19:12:31 +00:00
function isKeysEventKey(key) {
return keysEventRegExp.test(key);
}
function onMessage(e) {
var element, message = {};
try {
message = Ox.extend({data: {}}, JSON.parse(e.data));
} catch (e) {}
if (message.event == 'init') {
if (message.data.oxid) {
// The inner window receives the oxid of the outer iframe element
Ox.oxid = message.data.oxid;
2014-09-25 16:30:49 +00:00
Ox.$parent.postMessage('init', {})
2014-09-23 19:12:31 +00:00
} else if (message.target) {
// The outer window receives init from iframe
2014-09-25 16:47:29 +00:00
Ox.$elements[message.target].triggerEvent('init');
2014-09-23 19:12:31 +00:00
}
2012-06-29 12:24:06 +00:00
} else {
2014-09-25 16:47:29 +00:00
(message.target ? Ox.$elements[message.target] : Ox.$parent)
2014-09-23 19:12:31 +00:00
.triggerMessage(message.event, message.data);
}
}
function onKeydown(e) {
2014-09-24 20:45:34 +00:00
var $element = Ox.Focus.focusedElement(),
2014-09-24 20:28:56 +00:00
isInput = Ox.Focus.focusedElementIsInput(),
2015-05-23 11:02:39 +00:00
keyName = Ox.KEYS[e.keyCode] || ('keyCode' + e.keyCode),
2014-09-23 19:12:31 +00:00
keyBasename = keyName.split('.')[0],
key = Object.keys(Ox.MODIFIER_KEYS).filter(function(key) {
return e[key] && Ox.MODIFIER_KEYS[key] != keyBasename;
}).map(function(key) {
return Ox.MODIFIER_KEYS[key];
}).concat(keyName).join('_'),
event = 'key.' + key,
2014-09-23 19:12:31 +00:00
triggerEvent = function() {
2014-09-24 20:45:34 +00:00
if ($element) {
2014-09-23 19:12:31 +00:00
$element.triggerEvent.apply($element, arguments);
2014-09-24 20:28:56 +00:00
} else if (!isInput) {
2014-09-23 19:12:31 +00:00
Ox.Event.trigger.apply(
2014-09-24 20:45:34 +00:00
Ox.$body, [{}].concat(Ox.slice(arguments))
2014-09-23 19:12:31 +00:00
);
}
};
triggerEvent(event, e);
2014-09-24 20:28:56 +00:00
if (!isInput) {
if (isKeysEventKey(key)) {
// don't register leading spaces or trailing double spaces
if (keyName != 'space' || (
keys != '' && !Ox.endsWith(keys, ' ')
)) {
keys += chars[keyName] || keyBasename;
// clear the trigger timeout only if the key registered
clearTimeout(triggerTimeout);
triggerTimeout = setTimeout(function() {
triggerEvent('keys', Ox.extend(e, {keys: keys}));
}, 250);
}
}
// clear the reset timeout even if the key didn't register
clearTimeout(resetTimeout);
resetTimeout = setTimeout(function() {
keys = '';
}, 1000);
2014-09-25 17:41:46 +00:00
if ((
keyboardCallbacks[0]
&& Ox.contains(keyboardCallbacks[0], event)
) || (
2014-09-24 20:45:34 +00:00
$element && keyboardCallbacks[$element.oxid]
&& Ox.contains(keyboardCallbacks[$element.oxid], event)
)) {
// if there is a global handler for this keyboard event, or a
// handler on the focused element, then prevent default
2014-09-24 20:28:56 +00:00
e.preventDefault();
2012-06-29 12:24:06 +00:00
}
2014-09-23 19:12:31 +00:00
}
}
function trigger(options) {
var args = Ox.slice(arguments, 1),
callbacks = options.callbacks,
that = this;
Ox.forEach(Ox.makeObject(args), function(data, originalEvent) {
var events = originalEvent.split('.'),
triggerGlobally = !isKeyboardEvent(originalEvent)
|| !Ox.Focus.focusedElementIsInput();
2014-09-23 19:12:31 +00:00
['*'].concat(events.map(function(event, index) {
return events.slice(0, index + 1).join('.');
})).forEach(function(event) {
(triggerGlobally ? callbacks[0][event] || [] : [])
2014-09-23 19:12:31 +00:00
.concat(callbacks[1][event] || [])
.forEach(function(callback) {
callback.call(that, data, originalEvent, that);
2012-06-30 09:24:03 +00:00
});
});
2014-09-23 19:12:31 +00:00
});
return this;
}
function unbind(options) {
var args = Ox.slice(arguments, 1),
2014-09-24 20:28:56 +00:00
callbacks = options.callbacks,
oxid = this.oxid || 0;
2012-06-30 10:15:27 +00:00
if (args.length == 0) {
2014-09-23 19:12:31 +00:00
// unbind all handlers for all events
callbacks = [];
} else {
Ox.forEach(
Ox.isFunction(args[0]) ? {'*': args[0]}
: Ox.makeObject(args),
function(callback, event) {
if (!callback) {
// unbind all handlers for this event
delete callbacks[event];
} else if (callbacks[event]) {
// unbind this handler for this event
callbacks[event] = callbacks[event].filter(
function(eventCallback) {
return eventCallback !== callback;
2012-06-30 10:15:27 +00:00
}
2014-09-23 19:12:31 +00:00
);
if (callbacks[event].length == 0) {
delete callbacks[event];
}
2012-06-30 09:24:03 +00:00
}
2014-09-24 20:28:56 +00:00
if (isKeyboardEvent(event)) {
var index = keyboardCallbacks[oxid].indexOf(event);
keyboardCallbacks[oxid].splice(
keyboardCallbacks[oxid].indexOf(event), 1
)
if (keyboardCallbacks[oxid].length == 0) {
delete keyboardCallbacks[oxid];
}
2014-09-23 19:12:31 +00:00
}
}
);
2011-09-23 10:43:57 +00:00
}
2014-09-23 19:12:31 +00:00
return this;
}
/*@
2014-09-25 16:30:49 +00:00
Ox.$parent <o> Proxy to be used by iframes for messaging with outer window
@*/
2014-09-25 16:30:49 +00:00
Ox.$parent = (function() {
2014-09-23 19:12:31 +00:00
var self = {messageCallbacks: {}},
that = {oxid: Ox.uid()};
/*@
bindMessage <f> Adds one or more message handlers
@*/
2014-09-23 19:12:31 +00:00
that.bindMessage = function() {
return Ox.Message.bind.apply(
this, [self].concat(Ox.slice(arguments))
);
};
/*@
bindMessageOnce <f> Adds one or more message handlers that run only once
@*/
2014-09-23 19:12:31 +00:00
that.bindMessageOnce = function() {
return Ox.Message.bindOnce.apply(
this, [self].concat(Ox.slice(arguments))
);
};
/*@
postMessage <f> Sends one or more messages
@*/
2014-09-23 19:12:31 +00:00
that.postMessage = function() {
2014-09-23 22:00:00 +00:00
if (window !== window.top) {
// There actually is an outer window
if (!Ox.oxid) {
// Inner window has not received init message yet
self.initTime = self.initTime || new Date();
if (new Date() < self.initTime + 60000) {
setTimeout(function() {
that.postMessage.apply(that, arguments);
}, 250);
}
} else {
return Ox.Message.post.apply(this, arguments);
}
2014-09-23 22:00:00 +00:00
}
2014-09-23 19:12:31 +00:00
};
/*@
triggerMessage <f> Triggers all handlers for one or more messages
@*/
2014-09-23 19:12:31 +00:00
that.triggerMessage = function() {
return Ox.Message.trigger.apply(
this, [self].concat(Ox.slice(arguments))
);
};
/*@
unbindMessage <f> Removes one or more message handlers
@*/
2014-09-23 19:12:31 +00:00
that.unbindMessage = function() {
return Ox.Message.unbind.apply(
this, [self].concat(Ox.slice(arguments))
);
};
return that;
}());
/*@
Ox.Event <o> Event controller
@*/
2014-09-23 19:12:31 +00:00
Ox.Event = (function() {
var callbacks = {},
that = {};
/*@
bind <f> Adds one or more event handlers
([self, ]callback) -> <o> This method's `this` binding
Adds a catch-all handler
([self, ]event, callback) -> <o> This method's `this` binding
Adds a handler for a single event
([self, ]{event: callback, ...}) -> <o> This method's `this` binding
Adds handlers for multiple events
self <o> Object with `eventCallbacks` (`Ox.Element`'s `self`)
If `self` is missing and this method is not rebound, then the
handler is global and is not bound to a specific `Ox.Element`
event <s> Event name
callback <f> Callback function
data <o> Event data (key/value pairs)
event <s> Event name
element <o> Element object (this method's `this` binding)
@*/
2014-09-23 19:12:31 +00:00
that.bind = function() {
var isElement = this !== that;
return bind.apply(this, [{
callbacks: isElement ? arguments[0].eventCallbacks : callbacks
}].concat(Ox.slice(arguments, isElement ? 1 : 0)));
};
/*@
bindOnce <f> Adds one or more event handlers that run only once
([self, ]callback) -> <o> This method's `this` binding
Adds a catch-all handler
([self, ]event, callback) -> <o> This method's `this` binding
Adds a handler for a single event
([self, ]{event: callback, ...}) -> <o> This method's `this` binding
Adds handlers for multiple events
self <o> Object with `eventCallbacks` (`Ox.Element`'s `self`)
If `self` is missing and this method is not rebound, then the
handler is global and is not bound to a specific `Ox.Element`
event <s> Event name
callback <f> Callback function
data <o> Event data (key/value pairs)
event <s> Event name
element <o> Element object (this method's `this` binding)
@*/
2014-09-23 19:12:31 +00:00
that.bindOnce = function() {
var isElement = this !== that;
return bind.apply(this, [{
callbacks: isElement ? arguments[0].eventCallbacks : callbacks,
once: true
}].concat(Ox.slice(arguments, isElement ? 1 : 0)));
};
/*@
trigger <f> Triggers all event handlers for one or more events
([self, ]event[, data]) -> <o> This method's `this` binding
Triggers one event, with optional event data
([self, ]{event: data, ...}) -> <o> This method's `this` binding
Triggers multiple events
self <o> Object with `eventCallbacks` (`Ox.Element`'s `self`)
If `self` is missing and this method is not rebound, then the
handler is global and is not bound to a specific `Ox.Element`
event <s> Event name
data <o> Event data (key/value pairs)
@*/
that.trigger = function() {
var isElement = this !== that;
2014-09-23 19:12:31 +00:00
return trigger.apply(this, [{
callbacks: [
callbacks,
isElement ? arguments[0].eventCallbacks || {} : {}
]
}].concat(Ox.slice(arguments, isElement ? 1 : 0)));
2014-09-23 19:12:31 +00:00
};
/*@
unbind <f> Removes one or more event handlers
([self]) -> <o> This method's `this` binding
Unbinds all handlers
([self, ]callback) -> <o> This method's `this` binding
Unbinds a catch-all handler
([self, ]event, callback) -> <o> This method's `this` binding
Unbinds a handler for a single event
([self, ]{event: callback, ...}) -> <o> This method's `this` binding
Unbinds handlers for multiple events
self <o> Object with `eventCallbacks` (`Ox.Element`'s `self`)
If `self` is missing and this method is not rebound, then the
handler is global and is not bound to a specific `Ox.Element`
event <s> Event name
callback <f> Event handler
@*/
2014-09-23 19:12:31 +00:00
that.unbind = function() {
var isElement = this !== that;
return unbind.apply(this, [{
callbacks: isElement ? arguments[0].eventCallbacks : callbacks
}].concat(Ox.slice(arguments, isElement ? 1 : 0)));
};
2011-09-23 10:43:57 +00:00
return that;
2014-09-23 19:12:31 +00:00
}());
/*@
Ox.Message <o> Message controller
@*/
2014-09-23 19:12:31 +00:00
Ox.Message = (function() {
var callbacks = {},
that = {};
/*@
bind <f> Adds one or more message handlers
([self, ]callback) -> <o> This method's `this` binding
Adds a catch-all handler
([self, ]message, callback) -> <o> This method's `this` binding
Adds a handler for a single message
([self, ]{message: callback, ...}) -> <o> This method's `this` binding
Adds handlers for multiple messages
self <o> Object with `messageCallbacks` (`Ox.Element`'s `self`)
If `self` is missing and this method is not rebound, then the
2014-09-25 16:30:49 +00:00
handler is bound to the outer window (via `Ox.$parent`)
message <s> Message name
callback <f> Callback function
data <o> Message data (key/value pairs)
message <s> Message name
element <o> Element object (this method's `this` binding)
@*/
2014-09-23 19:12:31 +00:00
that.bind = function() {
var isElement = this !== that;
return bind.apply(this, [{
callbacks: isElement ? arguments[0].messageCallbacks
: callbacks
}].concat(Ox.slice(arguments, isElement ? 1 : 0)));
};
/*@
bindOnce <f> Adds one or more message handlers that run only once
([self, ]callback) -> <o> This method's `this` binding
Adds a catch-all handler
([self, ]message, callback) -> <o> This method's `this` binding
Adds a handler for a single message
([self, ]{message: callback, ...}) -> <o> This method's `this` binding
Adds handlers for multiple messages
self <o> Object with `messageCallbacks` (`Ox.Element`'s `self`)
If `self` is missing and this method is not rebound, then the
2014-09-25 16:30:49 +00:00
handler is bound to the outer window (via `Ox.$parent`)
message <s> Message name
callback <f> Callback function
data <o> Message data (key/value pairs)
message <s> Message name
element <o> Element object (this method's `this` binding)
@*/
2014-09-23 19:12:31 +00:00
that.bindOnce = function() {
var isElement = this !== that;
return bind.apply(this, [{
callbacks: isElement ? arguments[0].messageCallbacks
: callbacks,
once: true
}].concat(Ox.slice(arguments, isElement ? 1 : 0)));
};
/*@
2014-09-25 17:03:13 +00:00
post <f> Post a message into or out of an iframe
(message[, data]) -> <o> This method's `this` binding
Posts one message, with optional message data
({message: data, ...}) -> <o> This method's `this` binding
Posts multiple messages
message <s> Message name
data <o> Message data (key/value pairs)
@*/
2014-09-23 19:12:31 +00:00
that.post = function() {
2014-09-25 16:30:49 +00:00
var isParent = this == Ox.$parent,
target = isParent ? window.parent : this[0].contentWindow;
Ox.forEach(
Ox.makeObject(Ox.slice(arguments)),
function(data, event) {
target.postMessage(JSON.stringify({
data: data,
event: event,
target: isParent ? Ox.oxid : null
}), '*');
}
);
return this;
2014-09-23 19:12:31 +00:00
};
/*@
trigger <f> Triggers all message handlers for one or more messages
([self, ]message[, data]) -> <o> This method's `this` binding
Triggers one message, with optional message data
([self, ]{message: data, ...}) -> <o> This method's `this` binding
Triggers multiple messages
self <o> Object with `eventCallbacks` (`Ox.Element`'s `self`)
If `self` is missing and this method is not rebound, then the
handler is global and is not bound to a specific `Ox.Element`
message <s> Message name
data <o> Message data (key/value pairs)
@*/
that.trigger = function() {
var isElement = this !== that;
2014-09-23 19:12:31 +00:00
return trigger.apply(this, [{
callbacks: [
callbacks,
isElement ? arguments[0].messageCallbacks || {} : {}
]
}].concat(Ox.slice(arguments, isElement ? 1 : 0)));
2014-09-23 19:12:31 +00:00
};
/*@
unbind <f> Removes one or more message handlers
([self, ]callback) -> <o> This method's `this` binding
Removes a catch-all handler
([self, ]message, callback) -> <o> This method's `this` binding
Removes a handler for a single message
([self, ]{message: callback, ...}) -> <o> This method's `this` binding
Removes handlers for multiple messages
self <o> Object with `messageCallbacks` (`Ox.Element`'s `self`)
If `self` is missing and this method is not rebound, then the
2014-09-25 16:30:49 +00:00
handler is bound to the outer window (via `Ox.$parent`)
message <s> Message name
callback <f> Message handler
@*/
2014-09-23 19:12:31 +00:00
that.unbind = function() {
var isElement = this !== that;
return unbind.apply(this, [{
callbacks: isElement ? arguments[0].messageCallbacks
: callbacks
}].concat(Ox.slice(arguments, isElement ? 1 : 0)));
};
return that;
}());
document.addEventListener('keydown', onKeydown);
window.addEventListener('message', onMessage);
2011-09-23 10:43:57 +00:00
2015-05-23 11:02:39 +00:00
}());