(function() {
var chars = {
comma: ',',
dot: '.',
minus: '-',
quote: '\'',
semicolon: ';',
slash: '/',
space: ' '
},
keyboardCallbacks = {},
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,
that = this,
oxid = that.oxid || 0;
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)) {
keyboardCallbacks[oxid] = (
keyboardCallbacks[oxid] || []
).concat(event);
}
}
);
return this;
}
function isKeyboardEvent(event) {
return keyboardEventRegExp.test(event);
}
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;
Ox.$parent.postMessage('init', {})
} else if (message.target) {
// The outer window receives init from iframe
Ox.$elements[message.target].triggerEvent('init');
}
} else {
(message.target ? Ox.$elements[message.target] : Ox.$parent)
.triggerMessage(message.event, message.data);
}
}
function onKeydown(e) {
var $element = Ox.Focus.focusedElement(),
isInput = Ox.Focus.focusedElementIsInput(),
keyName = Ox.KEYS[e.keyCode] || ('keyCode' + e.keyCode),
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,
triggerEvent = function() {
if ($element) {
$element.triggerEvent.apply($element, arguments);
} else if (!isInput) {
Ox.Event.trigger.apply(
Ox.$body, [{}].concat(Ox.slice(arguments))
);
}
};
triggerEvent(event, e);
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);
if ((
keyboardCallbacks[0]
&& Ox.contains(keyboardCallbacks[0], event)
) || (
$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
e.preventDefault();
}
}
}
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();
['*'].concat(events.map(function(event, index) {
return events.slice(0, index + 1).join('.');
})).forEach(function(event) {
(triggerGlobally ? callbacks[0][event] || [] : [])
.concat(callbacks[1][event] || [])
.forEach(function(callback) {
callback.call(that, data, originalEvent, that);
});
});
});
return this;
}
function unbind(options) {
var args = Ox.slice(arguments, 1),
callbacks = options.callbacks,
oxid = this.oxid || 0;
if (args.length == 0) {
// 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;
}
);
if (callbacks[event].length == 0) {
delete callbacks[event];
}
}
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];
}
}
}
);
}
return this;
}
/*@
Ox.$parent <o> Proxy to be used by iframes for messaging with outer window
@*/
Ox.$parent = (function() {
var self = {messageCallbacks: {}},
that = {oxid: Ox.uid()};
/*@
bindMessage <f> Adds one or more message handlers
@*/
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
@*/
that.bindMessageOnce = function() {
return Ox.Message.bindOnce.apply(
this, [self].concat(Ox.slice(arguments))
);
};
/*@
postMessage <f> Sends one or more messages
@*/
that.postMessage = function() {
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);
}
}
};
/*@
triggerMessage <f> Triggers all handlers for one or more messages
@*/
that.triggerMessage = function() {
return Ox.Message.trigger.apply(
this, [self].concat(Ox.slice(arguments))
);
};
/*@
unbindMessage <f> Removes one or more message handlers
@*/
that.unbindMessage = function() {
return Ox.Message.unbind.apply(
this, [self].concat(Ox.slice(arguments))
);
};
return that;
}());
/*@
Ox.Event <o> Event controller
@*/
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)
@*/
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)
@*/
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;
return trigger.apply(this, [{
callbacks: [
callbacks,
isElement ? arguments[0].eventCallbacks || {} : {}
]
}].concat(Ox.slice(arguments, isElement ? 1 : 0)));
};
/*@
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
@*/
that.unbind = function() {
var isElement = this !== that;
return unbind.apply(this, [{
callbacks: isElement ? arguments[0].eventCallbacks : callbacks
}].concat(Ox.slice(arguments, isElement ? 1 : 0)));
};
return that;
}());
/*@
Ox.Message <o> Message controller
@*/
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
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)
@*/
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
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)
@*/
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)));
};
/*@
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)
@*/
that.post = function() {
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;
};
/*@
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;
return trigger.apply(this, [{
callbacks: [
callbacks,
isElement ? arguments[0].messageCallbacks || {} : {}
]
}].concat(Ox.slice(arguments, isElement ? 1 : 0)));
};
/*@
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
handler is bound to the outer window (via `Ox.$parent`)
message <s> Message name
callback <f> Message handler
@*/
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);
}());