10774 lines
377 KiB
JavaScript
10774 lines
377 KiB
JavaScript
/*
|
|
################################################################################
|
|
ox.ui.js
|
|
|
|
requires
|
|
jquery-1.4.js
|
|
ox.js
|
|
################################################################################
|
|
*/
|
|
|
|
// also see test.js, in demos ...
|
|
|
|
(function() {
|
|
|
|
var oxui = {
|
|
defaultTheme: 'classic',
|
|
elements: {},
|
|
getDimensions: function(orientation) {
|
|
return orientation == 'horizontal' ?
|
|
['width', 'height'] : ['height', 'width'];
|
|
},
|
|
getEdges: function(orientation) {
|
|
return orientation == 'horizontal' ?
|
|
['left', 'right', 'top', 'bottom'] :
|
|
['top', 'bottom', 'left', 'right'];
|
|
},
|
|
getBarSize: function(size) {
|
|
var sizes = {
|
|
small: 20,
|
|
medium: 24,
|
|
large: 28,
|
|
};
|
|
return sizes[size];
|
|
},
|
|
jQueryFunctions: function() {
|
|
var functions = [],
|
|
$element = $('<div>');
|
|
//delete $element.length;
|
|
Ox.each($element, function(k, v) {
|
|
if (typeof v == 'function') {
|
|
functions.push(k);
|
|
}
|
|
});
|
|
return functions.sort();
|
|
}(),
|
|
path: $('script[src*=ox.ui.js]').attr('src').replace('js/ox.ui.js', ''),
|
|
scrollbarSize: $.browser.mozilla ? 16 : 12,
|
|
symbols: {
|
|
alt: '\u2325',
|
|
apple: '\uF8FF',
|
|
arrow_down: '\u2193',
|
|
arrow_left: '\u2190',
|
|
arrow_right: '\u2192',
|
|
arrow_up: '\u2191',
|
|
backspace: '\u232B',
|
|
backup: '\u2707',
|
|
ballot: '\u2717',
|
|
black_star: '\u2605',
|
|
burn: '\u2622',
|
|
caps_lock: '\u21EA',
|
|
check: '\u2713',
|
|
//clear: '\u2327',
|
|
clear: '\u00D7',
|
|
click: '\uF803',
|
|
close: '\u2715',
|
|
command: '\u2318',
|
|
control: '\u2303',
|
|
cut: '\u2702',
|
|
'delete': '\u2326',
|
|
diamond: '\u25C6',
|
|
edit: '\uF802',
|
|
eject: '\u23CF',
|
|
escape: '\u238B',
|
|
end: '\u2198',
|
|
enter: '\u2324',
|
|
fly: '\u2708',
|
|
gear: '\u2699',
|
|
home: '\u2196',
|
|
info: '\u24D8',
|
|
navigate: '\u2388',
|
|
option: '\u2387',
|
|
page_up: '\u21DE',
|
|
page_down: '\u21DF',
|
|
redo: '\u21BA',
|
|
'return': '\u21A9',
|
|
//select: '\u21D5',
|
|
select: '\u25BE',
|
|
shift: '\u21E7',
|
|
sound: '\u266B',
|
|
space: '\u2423',
|
|
tab: '\u21E5',
|
|
trash: '\u267A',
|
|
triangle_down: '\u25BC',
|
|
triangle_left: '\u25C0',
|
|
triangle_right: '\u25BA',
|
|
triangle_up: '\u25B2',
|
|
undo: '\u21BB',
|
|
voltage: '\u26A1',
|
|
warning: '\u26A0',
|
|
white_star: '\u2606'
|
|
}
|
|
},
|
|
$elements = {},
|
|
$window, $document, $body;
|
|
|
|
_$elements = $elements;
|
|
|
|
$(function() {
|
|
$window = $(window),
|
|
$document = $(document),
|
|
$body = $('body'),
|
|
Ox.theme(oxui.defaultTheme);
|
|
});
|
|
|
|
/*
|
|
============================================================================
|
|
Application
|
|
============================================================================
|
|
*/
|
|
|
|
/**
|
|
Creates an App instance.
|
|
*/
|
|
Ox.App = function() {
|
|
return function(options) {
|
|
|
|
options = options || {};
|
|
var self = {},
|
|
that = this;
|
|
|
|
self.time = +new Date();
|
|
|
|
self.options = $.extend({
|
|
apiTimeout: 15000,
|
|
apiType: 'POST',
|
|
apiURL: '',
|
|
config: '',
|
|
init: ''
|
|
}, options);
|
|
|
|
function getUserAgent() {
|
|
var userAgent = '';
|
|
$.each(['Chrome', 'Firefox', 'Internet Explorer', 'Opera', 'Safari'], function(i, v) {
|
|
if (navigator.userAgent.indexOf(v) > -1) {
|
|
userAgent = v;
|
|
return false;
|
|
}
|
|
});
|
|
return userAgent;
|
|
}
|
|
|
|
function getUserData() {
|
|
//return {};
|
|
return {};
|
|
return {
|
|
navigator: {
|
|
cookieEnabled: navigator.cookieEnabled,
|
|
plugins: $.map(navigator.plugins, function(plugin, i) {
|
|
return plugin.name;
|
|
}),
|
|
userAgent: navigator.userAgent
|
|
},
|
|
screen: screen,
|
|
time: (+new Date() - self.time) / 1000,
|
|
window: {
|
|
innerHeight: window.innerHeight,
|
|
innerWidth: window.innerWidth,
|
|
outerHeight: window.outerHeight,
|
|
outerWidth: window.outerWidth,
|
|
screenLeft: window.screenLeft,
|
|
screenTop: window.screenTop
|
|
}
|
|
};
|
|
}
|
|
|
|
function loadImages(callback) {
|
|
$.getJSON(oxui.path + 'json/ox.ui.images.json', function(data) {
|
|
var counter = 0,
|
|
length = data.length;
|
|
data.forEach(function(src, i) {
|
|
image = new Image()
|
|
image.src = oxui.path + src;
|
|
image.onload = function() {
|
|
(++counter == length) && callback();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
self.change = function(key, value) {
|
|
|
|
};
|
|
|
|
that.api = {
|
|
api: function(callback) {
|
|
Ox.Request.send({
|
|
url: self.options.apiURL,
|
|
data: {
|
|
action: 'api'
|
|
},
|
|
callback: callback
|
|
});
|
|
},
|
|
cancel: function(id) {
|
|
Ox.Request.cancel(id);
|
|
}
|
|
};
|
|
|
|
that.launch = function(callback) {
|
|
var time = +new Date(),
|
|
userAgent = getUserAgent(),
|
|
userAgents = ['Chrome', 'Firefox', 'Opera', 'Safari'];
|
|
$.ajaxSetup({
|
|
timeout: self.options.apiTimeout,
|
|
type: self.options.apiType,
|
|
url: self.options.apiURL
|
|
});
|
|
userAgents.indexOf(userAgent) > -1 ? start() : stop();
|
|
function start() {
|
|
$.getJSON(self.options.config, function(data) {
|
|
var config = data;
|
|
Ox.print('config', config);
|
|
document.title = config.site.name;
|
|
loadImages(function() {
|
|
that.api.api(function(result) {
|
|
$.each(result.data.actions, function(i, action) {
|
|
that.api[action] = function(data, callback) {
|
|
if (arguments.length == 1) {
|
|
callback = data;
|
|
data = {};
|
|
}
|
|
return Ox.Request.send({
|
|
url: self.options.apiURL,
|
|
data: {
|
|
action: action,
|
|
data: JSON.stringify(data)
|
|
},
|
|
callback: callback
|
|
});
|
|
};
|
|
});
|
|
that.api[self.options.init](getUserData(), function(data) {
|
|
var user = data.data.user;
|
|
$(function() {
|
|
var $div = $body.find('div');
|
|
$body.find('img').remove();
|
|
$div.animate({
|
|
opacity: 0
|
|
}, 1000, function() {
|
|
$div.remove();
|
|
});
|
|
callback({
|
|
config: config,
|
|
user: user
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
}
|
|
function stop() {
|
|
that.request.send(self.options.init, getUserData(), function() {});
|
|
}
|
|
return that;
|
|
};
|
|
|
|
that.options = function() {
|
|
return Ox.getset(self.options, Array.prototype.slice.call(arguments), self.change, that);
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
}();
|
|
|
|
/**
|
|
Ox.Event event object
|
|
*/
|
|
/*
|
|
Ox.Event = function() {
|
|
var $eventHandler = $('<div>'),
|
|
events = {};
|
|
function bindEvent(id, event, callback) {
|
|
Ox.print('bind', id, event);
|
|
events[id] = events[id] || {};
|
|
events[id][event] = events[id][event] || [];
|
|
if ($.map(events[id][event], function(fn) {
|
|
return fn.toString();
|
|
}).indexOf(callback.toString()) == -1) {
|
|
events[id][event].push(callback);
|
|
if (!isKeyboardEvent(event) || Ox.Focus.focused() == id) {
|
|
$eventHandler.bind(event + '_' + id, callback); // requestStart/requestStop currently have '' as id
|
|
}
|
|
}
|
|
}
|
|
function unbindEvent(id, event, callback) {
|
|
Ox.print('unbind', id, event);
|
|
var toString = (callback || '').toString(),
|
|
unbind = !event || (event && !isKeyboardEvent(event)) || Ox.Focus.focused() == id;
|
|
if (events[id] && (!event || events[id][event])) {
|
|
$.each(events[id], function(e, fns) {
|
|
if (!event || event == e) {
|
|
events[id][e] = $.map(events[id][e], function(fn, i) {
|
|
if (!callback || toString == fn.toString()) {
|
|
Ox.print(unbind, 'eventHandler.unbind', e, id)
|
|
unbind && $eventHandler.unbind(e + '_' + id, fn);
|
|
return null;
|
|
} else {
|
|
return fn;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
Ox.print('id/events', id, events, events[id])
|
|
if (!callback || (event && events[id][event].length == 0)) {
|
|
delete events[id][event];
|
|
}
|
|
if (!event || Ox.length(events[id]) == 0) {
|
|
delete events[id];
|
|
}
|
|
}
|
|
}
|
|
function isKeyboardEvent(event) {
|
|
return event.substr(0, 4) == 'key_';
|
|
}
|
|
return {
|
|
_print: function() {
|
|
Ox.print(events);
|
|
},
|
|
bind: function(id, event, callback) {
|
|
// bind event
|
|
bindEvent(id, event, callback);
|
|
},
|
|
bindKeyboard: function(id) {
|
|
// bind all keyboard events
|
|
//Ox.print('binding', 'id', id, 'events', events[id], Ox.length(events[id]), 'keyboardevents', events[id]['keyboard'])
|
|
$.each(events[id], function(k, v) {
|
|
Ox.print('|' + k + '|');
|
|
})
|
|
events[id] && $.each(events[id], function(event, callbacks) {
|
|
Ox.print('BIND ID EVENT', id, event)
|
|
isKeyboardEvent(event) && $.each(callbacks, function(i, callback) {
|
|
Ox.print('bind', id, event);
|
|
$eventHandler.bind(event, callback);
|
|
});
|
|
});
|
|
},
|
|
changeId: function(oldId, newId) {
|
|
// we need to reference events by options('id'),
|
|
// not by that.id, since textlist events fire on list,
|
|
// new lists have new that.ids, etc.
|
|
// so this renaming is necessary
|
|
Ox.print('changeId', oldId, newId, events[oldId]);
|
|
$.each($.extend({}, events[oldId] || {}), function(event, callbacks) {
|
|
$.each(callbacks, function(i, callback) {
|
|
Ox.Event.unbind(oldId, event, callback);
|
|
Ox.Event.bind(newId, event, callback);
|
|
});
|
|
});
|
|
},
|
|
unbind: function(id, event, callback) {
|
|
// unbind event
|
|
// event and callback are optional
|
|
unbindEvent(id, event, callback);
|
|
},
|
|
unbindAll: function() {
|
|
Ox.print('beginUnbindAll')
|
|
$.each(events, function(id, eventsById) {
|
|
$.each(eventsById, function(event, callbacks) {
|
|
$.each(callbacks, function(i, callback) {
|
|
Ox.Event.unbind(id, event, callback);
|
|
});
|
|
});
|
|
});
|
|
Ox.print('endUnbindAll')
|
|
},
|
|
trigger: function(id, event, data) {
|
|
// trigger event
|
|
// data is optional
|
|
// keyboard handler will call this with '' as id
|
|
Ox.print('trigger', id, event, data || {});
|
|
$eventHandler.trigger(event + (id ? '_' + id : ''), data || {});
|
|
},
|
|
unbindKeyboard: function(id) {
|
|
// unbind all keyboard events
|
|
Ox.print('unbinding', id)
|
|
events[id] && $.each(events[id], function(event, callbacks) {
|
|
Ox.print('UNBIND ID EVENT', id, event)
|
|
isKeyboardEvent(event) && $.each(callbacks, function(i, callback) {
|
|
Ox.print('unbind', event)
|
|
$eventHandler.unbind(event, callback);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}();
|
|
*/
|
|
|
|
/**
|
|
Ox.Focus
|
|
*/
|
|
|
|
Ox.Focus = function() {
|
|
var stack = [];
|
|
return {
|
|
_print: function() {
|
|
Ox.print(stack);
|
|
},
|
|
blur: function(id) {
|
|
Ox.print('BLUR', id, stack)
|
|
var index = stack.indexOf(id);
|
|
if (index == stack.length - 1) {
|
|
stack.length == 1 ? stack.pop() :
|
|
stack.splice(stack.length - 2, 0, stack.pop());
|
|
// fix later: Ox.Event.unbindKeyboard($elements[id].options('id'));
|
|
// fix later: stack.length && Ox.Event.bindKeyboard($elements[stack[stack.length - 1]].options('id'));
|
|
//$elements[id].removeClass('OxFocus');
|
|
$('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
|
|
stack.length && $elements[stack[stack.length - 1]].addClass('OxFocus');
|
|
Ox.print('blur', id, stack);
|
|
}
|
|
},
|
|
focus: function(id) {
|
|
var index = stack.indexOf(id);
|
|
if (index == -1 || index < stack.length - 1) {
|
|
// fix later: stack.length && Ox.Event.unbindKeyboard($elements[stack[stack.length - 1]].options('id'));
|
|
index > -1 && stack.splice(index, 1);
|
|
stack.push(id);
|
|
// fix later: Ox.Event.bindKeyboard($elements[id].options('id'));
|
|
$('.OxFocus').removeClass('OxFocus'); // fixme: see above
|
|
$elements[id].addClass('OxFocus');
|
|
Ox.print('focus', id, stack);
|
|
}
|
|
},
|
|
focused: function() {
|
|
return stack.length ? stack[stack.length - 1] : null;
|
|
}
|
|
};
|
|
}();
|
|
|
|
/**
|
|
Ox.History
|
|
*/
|
|
|
|
/**
|
|
Ox.Keyboard
|
|
*/
|
|
|
|
(function() {
|
|
|
|
var buffer = '',
|
|
bufferTime = 0,
|
|
bufferTimeout = 1000,
|
|
keyNames = function() {
|
|
return {
|
|
0: 'section',
|
|
8: 'backspace',
|
|
9: 'tab',
|
|
12: 'clear',
|
|
13: 'enter',
|
|
16: 'shift',
|
|
17: 'control',
|
|
18: 'alt',
|
|
20: 'capslock',
|
|
27: 'escape',
|
|
32: 'space',
|
|
33: 'pageup',
|
|
34: 'pagedown',
|
|
35: 'end',
|
|
36: 'home',
|
|
37: 'left',
|
|
38: 'up',
|
|
39: 'right',
|
|
40: 'down',
|
|
45: 'insert',
|
|
46: 'delete',
|
|
47: 'help',
|
|
48: '0',
|
|
49: '1',
|
|
50: '2',
|
|
51: '3',
|
|
52: '4',
|
|
53: '5',
|
|
54: '6',
|
|
55: '7',
|
|
56: '8',
|
|
57: '9',
|
|
65: 'a',
|
|
66: 'b',
|
|
67: 'c',
|
|
68: 'd',
|
|
69: 'e',
|
|
70: 'f',
|
|
71: 'g',
|
|
72: 'h',
|
|
73: 'i',
|
|
74: 'j',
|
|
75: 'k',
|
|
76: 'l',
|
|
77: 'm',
|
|
78: 'n',
|
|
79: 'o',
|
|
80: 'p',
|
|
81: 'q',
|
|
82: 'r',
|
|
83: 's',
|
|
84: 't',
|
|
85: 'u',
|
|
86: 'v',
|
|
87: 'w',
|
|
88: 'x',
|
|
89: 'y',
|
|
90: 'z',
|
|
91: 'meta.left',
|
|
92: 'meta.right',
|
|
93: 'select',
|
|
96: '0.numpad',
|
|
97: '1.numpad',
|
|
98: '2.numpad',
|
|
99: '3.numpad',
|
|
100: '4.numpad',
|
|
101: '5.numpad',
|
|
102: '6.numpad',
|
|
103: '7.numpad',
|
|
104: '8.numpad',
|
|
105: '9.numpad',
|
|
106: 'asterisk.numpad',
|
|
107: 'plus.numpad',
|
|
109: 'minus.numpad',
|
|
108: 'enter.numpad',
|
|
110: 'dot.numpad',
|
|
111: 'slash.numpad',
|
|
112: 'f1',
|
|
113: 'f2',
|
|
114: 'f3',
|
|
115: 'f4',
|
|
116: 'f5',
|
|
117: 'f6',
|
|
118: 'f7',
|
|
119: 'f8',
|
|
120: 'f9',
|
|
121: 'f10',
|
|
122: 'f11',
|
|
123: 'f12',
|
|
124: 'f13',
|
|
125: 'f14',
|
|
126: 'f15',
|
|
127: 'f16',
|
|
144: 'numlock',
|
|
145: 'scrolllock',
|
|
186: 'semicolon',
|
|
187: 'equal',
|
|
188: 'comma',
|
|
189: 'minus',
|
|
190: 'dot',
|
|
191: 'slash',
|
|
192: 'backtick',
|
|
219: 'openbracket',
|
|
220: 'backslash',
|
|
221: 'closebracket',
|
|
222: 'quote'
|
|
// see dojo, for ex.
|
|
};
|
|
}(),
|
|
modifierNames = {
|
|
altKey: 'alt', // mac: option
|
|
ctrlKey: 'control',
|
|
// metaKey: 'meta', // mac: command
|
|
shiftKey: 'shift'
|
|
};
|
|
|
|
$(function() {
|
|
// fixme: how to do this better?
|
|
// in firefox on mac, keypress doesn't fire for up/down
|
|
// if the cursor is at the start/end of an input element
|
|
// on linux, it doesn't seem to fire if the input element has focus
|
|
if ($.browser.mozilla) {
|
|
$document.keypress(keypress);
|
|
$document.keydown(function(event) {
|
|
var $element = $('input:focus');
|
|
if ($element.length) {
|
|
if (
|
|
(
|
|
keyNames[event.keyCode] == 'up' &&
|
|
$element[0].selectionStart + $element[0].selectionEnd == 0
|
|
) || (
|
|
keyNames[event.keyCode] == 'down' &&
|
|
$element[0].selectionStart == $element.val().length &&
|
|
$element[0].selectionEnd == $element.val().length
|
|
)
|
|
) {
|
|
keypress(event);
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
$document.keydown(keypress);
|
|
}
|
|
});
|
|
function keypress(event) {
|
|
var focused = Ox.Focus.focused(),
|
|
key,
|
|
keys = [],
|
|
//ret = true,
|
|
time;
|
|
$.each(modifierNames, function(k, v) {
|
|
if (event[k]) {
|
|
keys.push(v);
|
|
}
|
|
});
|
|
// avoid pushing modifier twice
|
|
Ox.print('keys', keys)
|
|
if (keyNames[event.keyCode] && keys.indexOf(keyNames[event.keyCode]) == -1) {
|
|
keys.push(keyNames[event.keyCode]);
|
|
}
|
|
key = keys.join('_');
|
|
if (key.match(/^[\w\d-]$|SPACE/)) {
|
|
time = Ox.getTime();
|
|
if (time - bufferTime > bufferTimeout) {
|
|
buffer = '';
|
|
}
|
|
buffer += key == 'SPACE' ? ' ' : key;
|
|
bufferTime = time;
|
|
}
|
|
focused && $elements[focused].triggerEvent('key_' + key);
|
|
//return false;
|
|
/*
|
|
$.each(stack, function(i, v) {
|
|
// fixme: we dont get the return value!
|
|
ret = Ox.event.trigger(keyboard + Ox.toCamelCase(key) + '.' + v);
|
|
return ret;
|
|
});
|
|
*/
|
|
}
|
|
|
|
})();
|
|
|
|
/**
|
|
Ox.Mouse (??)
|
|
*/
|
|
|
|
/**
|
|
Ox.Request request object
|
|
*/
|
|
Ox.Request = function() {
|
|
|
|
var cache = {},
|
|
pending = {},
|
|
requests = {},
|
|
self = {
|
|
options: {
|
|
timeout: 15000,
|
|
type: 'POST',
|
|
url: 'api'
|
|
}
|
|
};
|
|
|
|
return {
|
|
|
|
cancel: function() {
|
|
var index;
|
|
if (arguments.length == 0) {
|
|
requests = {};
|
|
} else if (Ox.isFunction(arguments[0])) {
|
|
// cancel with function
|
|
$.each(requests, function(id, req) {
|
|
if (arguments[0](req)) {
|
|
delete requests[id];
|
|
}
|
|
})
|
|
} else {
|
|
// cancel by id
|
|
delete requests[arguments[0]]
|
|
}
|
|
},
|
|
|
|
emptyCache: function() {
|
|
cache = {};
|
|
},
|
|
|
|
options: function(options) {
|
|
return Ox.getset(self.options, options, $.noop(), this);
|
|
},
|
|
|
|
send: function(options) {
|
|
|
|
var options = $.extend({
|
|
age: -1,
|
|
callback: function() {},
|
|
id: Ox.uid(),
|
|
timeout: self.options.timeout,
|
|
type: self.options.type,
|
|
url: self.options.url
|
|
}, options),
|
|
req = JSON.stringify({
|
|
url: options.url,
|
|
data: options.data
|
|
});
|
|
|
|
function callback(data) {
|
|
delete requests[options.id];
|
|
Ox.length(requests) == 0 && $body.trigger('requestStop');
|
|
options.callback(data); // fixme: doesn't work if callback hasn't been passed
|
|
}
|
|
|
|
function debug(request) {
|
|
var $iframe = $('<iframe>')
|
|
.css({ // fixme: should go into a class
|
|
width: 768,
|
|
height: 384
|
|
}),
|
|
$dialog = new Ox.Dialog({
|
|
title: 'Application Error',
|
|
buttons: [
|
|
new Ox.Button({
|
|
title: 'Close'
|
|
})
|
|
.bindEvent({
|
|
click: function() {
|
|
$dialog.close();
|
|
}
|
|
})
|
|
],
|
|
content: $iframe,
|
|
width: 800,
|
|
height: 400
|
|
})
|
|
.open(),
|
|
iframe = $iframe[0].contentDocument || $iframe[0].contentWindow.document;
|
|
iframe.open();
|
|
iframe.write(request.responseText);
|
|
iframe.close();
|
|
}
|
|
|
|
function error(request, status, error) {
|
|
var data;
|
|
if (arguments.length == 1) {
|
|
data = arguments[0]
|
|
} else {
|
|
try {
|
|
data = JSON.parse(request.responseText);
|
|
} catch (err) {
|
|
try {
|
|
data = {
|
|
status: {
|
|
code: request.status,
|
|
text: request.statusText
|
|
}
|
|
};
|
|
} catch (err) {
|
|
data = {
|
|
status: {
|
|
code: '500',
|
|
text: 'Unknown Error'
|
|
}
|
|
};
|
|
}
|
|
}
|
|
}
|
|
if (data.status.code < 500) {
|
|
callback(data);
|
|
} else {
|
|
var $dialog = new Ox.Dialog({
|
|
title: 'Application Error',
|
|
buttons: [
|
|
new Ox.Button({
|
|
title: 'Details'
|
|
})
|
|
.bindEvent({
|
|
click: function() {
|
|
$dialog.close(function() {
|
|
debug(request);
|
|
})
|
|
}
|
|
}),
|
|
new Ox.Button({
|
|
title: 'Close'
|
|
})
|
|
.bindEvent({
|
|
click: function() {
|
|
$dialog.close();
|
|
}
|
|
})
|
|
],
|
|
content: 'Sorry, we have encountered an application error while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.',
|
|
width: 400,
|
|
height: 200
|
|
})
|
|
.open();
|
|
// fixme: change this to Send / Don't Send
|
|
Ox.print({
|
|
request: request,
|
|
status: status,
|
|
error: error
|
|
});
|
|
}
|
|
pending[options.id] = false;
|
|
}
|
|
|
|
function success(data) {
|
|
pending[options.id] = false;
|
|
cache[req] = {
|
|
data: data,
|
|
time: Ox.getTime()
|
|
};
|
|
callback(data);
|
|
}
|
|
|
|
if (pending[options.id]) {
|
|
setTimeout(function() {
|
|
Ox.Request.send(options);
|
|
}, 0);
|
|
} else {
|
|
requests[options.id] = {
|
|
url: options.url,
|
|
data: options.data
|
|
};
|
|
if (cache[req] && (options.age == -1 || options.age > Ox.getTime() - cache[req].time)) {
|
|
setTimeout(function() {
|
|
callback(cache[req].data);
|
|
}, 0);
|
|
} else {
|
|
pending[options.id] = true;
|
|
$.ajax({
|
|
data: options.data,
|
|
dataType: 'json',
|
|
error: error,
|
|
success: success,
|
|
timeout: options.timeout,
|
|
type: options.type,
|
|
url: options.url
|
|
});
|
|
Ox.print('request', options.data, Ox.length(requests));
|
|
Ox.length(requests) == 1 && $body.trigger('requestStart');
|
|
}
|
|
}
|
|
|
|
return options.id;
|
|
|
|
},
|
|
|
|
requests: function() {
|
|
return Ox.length(requests);
|
|
}
|
|
|
|
};
|
|
}();
|
|
|
|
/**
|
|
not implemented
|
|
*/
|
|
Ox.Theme = function() {
|
|
|
|
};
|
|
|
|
/**
|
|
Ox.URL
|
|
*/
|
|
|
|
/*
|
|
============================================================================
|
|
Core
|
|
============================================================================
|
|
*/
|
|
|
|
|
|
// fixme: wouldn't it be better to let the elements be,
|
|
// rather then $element, $content, and potentially others,
|
|
// 0, 1, 2, etc, so that append would append 0, and appendTo
|
|
// would append (length - 1)?
|
|
|
|
/**
|
|
*/
|
|
Ox.Container = function(options, self) {
|
|
var that = new Ox.Element('div', self)
|
|
.options(options || {})
|
|
.addClass('OxContainer');
|
|
that.$content = new Ox.Element('div', self)
|
|
.options(options || {})
|
|
.addClass('OxContent')
|
|
.appendTo(that);
|
|
return that;
|
|
};
|
|
|
|
|
|
// check out http://ejohn.org/apps/learn/#36 (-#38, making fns work w/o new)
|
|
/**
|
|
Ox.Element
|
|
*/
|
|
Ox.Element = function() {
|
|
|
|
return function(options, self) {
|
|
|
|
// construct
|
|
self = self || {};
|
|
self.options = options || {};
|
|
if (!self.$eventHandler) {
|
|
self.$eventHandler = $('<div>');
|
|
}
|
|
var that = this;
|
|
|
|
// init
|
|
(function() {
|
|
// allow for Ox.Element('tagname', self)
|
|
if (typeof self.options == 'string') {
|
|
self.options = {
|
|
element: self.options
|
|
};
|
|
}
|
|
that.ox = Ox.version;
|
|
that.id = Ox.uid();
|
|
that.$element = $('<' + (self.options.element || 'div') + '/>', {
|
|
data: {
|
|
ox: that.id
|
|
}
|
|
});
|
|
$elements[that.id] = that;
|
|
wrapjQuery();
|
|
})();
|
|
|
|
// private
|
|
function wrapjQuery() {
|
|
$.each(oxui.jQueryFunctions, function(i, fn) {
|
|
that[fn] = function() {
|
|
var args = arguments,
|
|
length = args.length,
|
|
id, ret;
|
|
$.each(args, function(i, arg) {
|
|
if (Ox.isUndefined(arg)) {
|
|
Ox.print('fn', fn, 'undefined argument')
|
|
}
|
|
// if an ox object was passed
|
|
// then pass its $element instead
|
|
// so we can do oxObj.jqFn(oxObj)
|
|
if (arg && arg.ox) {
|
|
args[i] = arg.$element;
|
|
}
|
|
/*
|
|
if (arg.ox) { // fixme: or is this too much magic?
|
|
if (fn == 'appendTo' && arg.$content) {
|
|
args[i] = arg.$content
|
|
} else {
|
|
args[i] = arg.$element;
|
|
}
|
|
}
|
|
*/
|
|
});
|
|
/*
|
|
if (fn == 'html' && that.$content) { // fixme: or is this too much magic?
|
|
$element = that.$content;
|
|
} else {
|
|
$element = that.$element;
|
|
}
|
|
*/
|
|
// why does this not work? (that?)
|
|
// ret = that.$element[fn].apply(this, arguments);
|
|
if (length == 0) {
|
|
ret = that.$element[fn]();
|
|
} else if (length == 1) {
|
|
ret = that.$element[fn](args[0]);
|
|
} else if (length == 2) {
|
|
ret = that.$element[fn](args[0], args[1]);
|
|
} else if (length == 3) {
|
|
ret = that.$element[fn](args[0], args[1], args[2]);
|
|
} else if (length == 4) {
|
|
ret = that.$element[fn](args[0], args[1], args[2], args[3]);
|
|
}
|
|
if (fn == 'data') {
|
|
// Ox.print('data ret', ret, $(ret))
|
|
}
|
|
// if the $element of an ox object was returned
|
|
// then return the ox object instead
|
|
// so we can do oxObj.jqFn().oxFn()
|
|
return ret.jquery && $elements[id = ret.data('ox')] ?
|
|
$elements[id] : ret;
|
|
}
|
|
});
|
|
}
|
|
|
|
// shared
|
|
self.onChange = function() {
|
|
// self.onChange(key, value)
|
|
// is called when an option changes
|
|
// (to be implemented by widget)
|
|
};
|
|
|
|
// public
|
|
|
|
that.bindEvent = function() {
|
|
/*
|
|
binds a function to an event triggered by this object
|
|
bindEvent(event, fn) or bindEvent({event0: fn0, event1: fn1, ...})
|
|
*/
|
|
if (arguments.length == 1) {
|
|
$.each(arguments[0], function(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;
|
|
}
|
|
|
|
that.defaults = function(defaults) {
|
|
/*
|
|
that.defaults({foo: x}) sets self.defaults
|
|
*/
|
|
self.defaults = defaults;
|
|
delete self.options; // fixme: hackish fix for that = Ox.Foo({...}, self).defaults({...}).options({...})
|
|
return that;
|
|
};
|
|
|
|
that.gainFocus = function() {
|
|
Ox.Focus.focus(that.id);
|
|
return that;
|
|
};
|
|
|
|
that.hasFocus = function() {
|
|
return Ox.Focus.focused() == that.id;
|
|
};
|
|
|
|
that.loseFocus = function() {
|
|
Ox.Focus.blur(that.id);
|
|
return that;
|
|
};
|
|
|
|
that.options = function() { // fixme: use Ox.getset
|
|
/*
|
|
that.options() returns self.options
|
|
that.options('foo') returns self.options.foo
|
|
that.options('foo', x) sets self.options.foo,
|
|
returns that
|
|
that.options({foo: x, bar: y}) sets self.options.foo
|
|
and self.options.bar,
|
|
returns that
|
|
*/
|
|
var args,
|
|
length = arguments.length,
|
|
oldOptions,
|
|
ret;
|
|
if (length == 0) {
|
|
// options()
|
|
ret = self.options;
|
|
} else if (length == 1 && typeof arguments[0] == 'string') {
|
|
// options(str)
|
|
ret = self.options ? self.options[arguments[0]] : options[arguments[0]];
|
|
} else {
|
|
// options (str, val) or options({str: val, ...})
|
|
// translate (str, val) to ({str: val})
|
|
args = Ox.makeObject.apply(that, arguments || {});
|
|
oldOptions = $.extend({}, self.options);
|
|
// if options have not been set, extend defaults,
|
|
// otherwise, extend options
|
|
//self.options = $.extend(self.options, self.options ? {} : self.defaults, args);
|
|
self.options = $.extend({}, self.defaults, self.options, args);
|
|
//self.options = $.extend(self.options || self.defaults, args);
|
|
$.each(args, function(key, value) {
|
|
// key == 'id' && id && Ox.Event.changeId(id, value);
|
|
/*!Ox.equals(value, oldOptions[key]) &&*/ self.onChange(key, value);
|
|
});
|
|
ret = that;
|
|
}
|
|
return ret;
|
|
};
|
|
|
|
that.remove = function() { // fixme: clashes with jquery, should be removeElement
|
|
//self.options && Ox.Event.unbind(self.options.id); // there are optionless elements, like the dialog layer
|
|
//that.loseFocus();
|
|
//delete self.$eventHandler;
|
|
that.$element.remove();
|
|
delete $elements[that.ox];
|
|
return that;
|
|
};
|
|
|
|
that.triggerEvent = function() {
|
|
/*
|
|
triggers an event
|
|
triggerEvent(event) or triggerEvent(event, data) or triggerEvent({event0: data, event1: data, ...})
|
|
*/
|
|
if (Ox.isObject(arguments[0])) {
|
|
$.each(arguments[0], function(event, data) {
|
|
Ox.print(that.id, self.options.id, 'trigger', event, data);
|
|
self.$eventHandler.trigger('ox_' + event, data);
|
|
});
|
|
} else {
|
|
Ox.print('??', that.id, self.options ? self.options.id : '', 'trigger', arguments[0], arguments[1] || {});
|
|
self.$eventHandler.trigger('ox_' + arguments[0], arguments[1] || {});
|
|
}
|
|
return that;
|
|
};
|
|
|
|
that.unbindEvent = function() {
|
|
/*
|
|
unbinds an event
|
|
unbindEvent(event, fn) or unbindEvent({event0: fn0, event1: fn1, ...})
|
|
*/
|
|
if (arguments.length == 1) {
|
|
$.each(arguments[0], function(event, fn) {
|
|
Ox.print(that.id, 'unbind', arguments[0]);
|
|
self.$eventHandler.unbind('ox_' + event, fn);
|
|
});
|
|
} else {
|
|
Ox.print(that.id, 'unbind', arguments[0]);
|
|
self.$eventHandler.unbind('ox_' + arguments[0], arguments[1]);
|
|
}
|
|
return that;
|
|
};
|
|
|
|
// return
|
|
return that;
|
|
|
|
}
|
|
|
|
}();
|
|
|
|
Ox._Element = function(element) {
|
|
var that = this;
|
|
that.def = {};
|
|
that.opt = {};
|
|
that.ox = Ox.version;
|
|
that.id = Ox.uid();
|
|
//Ox.print('that.id', that.id)
|
|
that.$element = $('<' + (element || 'div') + '/>')
|
|
//.addClass('OxElement')
|
|
.data('ox', that.id);
|
|
oxui.elements[that.id] = that;
|
|
// Ox.print('oxui.elements', oxui.elements)
|
|
//function setOption() {};
|
|
that.setOption = function() {};
|
|
/*
|
|
*/
|
|
that.destroy = function() {
|
|
that.$element.remove();
|
|
delete oxui.elements[that.ox];
|
|
}
|
|
/*
|
|
*/
|
|
that.disable = function() {
|
|
|
|
}
|
|
/*
|
|
*/
|
|
that.enable = function() {
|
|
|
|
}
|
|
/*
|
|
*/
|
|
///*
|
|
that.defaults = function() {
|
|
var length = arguments.length,
|
|
ret;
|
|
if (length == 0) {
|
|
ret = that.def
|
|
} else if (length == 1 && typeof arguments[0] == 'string') {
|
|
ret = that.def[arguments[0]];
|
|
} else {
|
|
// translate ('key', 'value') to {'key': 'value'}
|
|
that.def = $.extend(
|
|
that.def, Ox.makeObject.apply(that, arguments)
|
|
);
|
|
ret = that;
|
|
}
|
|
return ret;
|
|
}
|
|
//*/
|
|
/*
|
|
Ox.Element.options()
|
|
get options
|
|
Ox.Element.options('foo')
|
|
get options.foo
|
|
Ox.Element.options('foo', 0)
|
|
set options.foo
|
|
Ox.Element.options({foo: 0, bar: 1})
|
|
set options.foo and options.bar
|
|
*/
|
|
///*
|
|
that.options = function() {
|
|
var length = arguments.length,
|
|
args, ret;
|
|
if (length == 0) {
|
|
//Ox.print('getting all options', options);
|
|
ret = that.opt;
|
|
} else if (length == 1 && typeof arguments[0] == 'string') {
|
|
//Ox.print('getting one option', options, arguments[0], options[arguments[0]]);
|
|
ret = that.opt[arguments[0]];
|
|
} else {
|
|
// translate ('key', 'value') to {'key': 'value'}
|
|
args = Ox.makeObject.apply(that, arguments);
|
|
// if options have been set then extend options,
|
|
// otherwise extend defaults
|
|
that.opt = $.extend(Ox.length(that.opt) ?
|
|
that.opt : that.def, args);
|
|
// that.trigger('OxElement' + that.id + 'SetOptions', args);
|
|
$.each(args, function(k, v) {
|
|
that.setOption(k, v);
|
|
//Ox.print('triggering', 'OxElement' + that.id + 'SetOption', {k: v})
|
|
//that.trigger('OxElement' + that.id + 'SetOption', {k: v});
|
|
})
|
|
ret = that;
|
|
}
|
|
return ret;
|
|
}
|
|
// should become self.publish
|
|
that.publish = function(event, data) {
|
|
Ox.Event.publish(event + that.id, data);
|
|
return that;
|
|
}
|
|
that.subscribe = function(event, callback) {
|
|
Ox.Event.subscribe(event, callback);
|
|
return that;
|
|
}
|
|
//that.setOptions = function() {};
|
|
//*/
|
|
// wrap jquery functions
|
|
// so we can do oxObj.jqFn()
|
|
$.each(oxui.jqueryFunctions, function(i, v) {
|
|
that[v] = function() {
|
|
var args = arguments,
|
|
length = args.length,
|
|
$element, id, ret;
|
|
$.each(args, function(i, v) {
|
|
// if an oxui object was passed
|
|
// then pass its $element instead
|
|
// so we can do jqObj.append(oxObj)
|
|
if (v.ox) {
|
|
args[i] = v.$element;
|
|
}
|
|
});
|
|
if (v == 'html' && that.$content) {
|
|
$element = that.$content;
|
|
} else {
|
|
$element = that.$element;
|
|
}
|
|
// why does this not work?
|
|
// ret = that.$element[v].apply(this, arguments);
|
|
// maybe because we pass this, and not that.$element[v] ... ?
|
|
// ret = that.$element[v].apply(that.$element[v], arguments);
|
|
// doesn't work either ...
|
|
if (length == 0) {
|
|
ret = $element[v]();
|
|
} else if (length == 1) {
|
|
ret = $element[v](args[0]);
|
|
} else if (length == 2) {
|
|
ret = $element[v](args[0], args[1]);
|
|
} else if (length == 3) {
|
|
ret = $element[v](args[0], args[1], args[2]);
|
|
} else if (length == 4) {
|
|
ret = $element[v](args[0], args[1], args[2], args[3]);
|
|
}
|
|
// if the $element of an oxui object was returned
|
|
// then return the oxui object instead
|
|
// so we can do oxObj.jqFn().oxFn()
|
|
//Ox.print('v', v, 'arguments', arguments)
|
|
if (ret.jquery) {
|
|
//Ox.print('ret', ret, 'ret.data('id')', ret.data('ox'))
|
|
}
|
|
return ret.jquery && oxui.elements[id = ret.data('ox')] ?
|
|
oxui.elements[id] : ret;
|
|
}
|
|
});
|
|
return that;
|
|
};
|
|
|
|
/**
|
|
Ox.Window
|
|
*/
|
|
Ox.Window = function(options, self) {
|
|
|
|
self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
draggable: true,
|
|
fullscreenable: true, // fixme: silly name
|
|
height: 225,
|
|
resizeable: true,
|
|
scaleable: true,
|
|
width: 400
|
|
})
|
|
.options(options || {})
|
|
|
|
self.center = function() {
|
|
|
|
};
|
|
|
|
self.drag = function() {
|
|
|
|
};
|
|
|
|
self.fullscreen = function() {
|
|
|
|
};
|
|
|
|
self.onChange = function() {
|
|
|
|
};
|
|
|
|
self.reset = function() {
|
|
|
|
};
|
|
|
|
self.resize = function() {
|
|
|
|
};
|
|
|
|
self.scale = function() {
|
|
|
|
};
|
|
|
|
that.close = function() {
|
|
|
|
};
|
|
|
|
that.open = function() {
|
|
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
|
|
// fixme: this should be Ox.Theme, and provide Ox.Theme.set(), Ox.Theme.load, etc.
|
|
/**
|
|
if name is given as argument, switch to this theme.
|
|
return current theme otherwise.
|
|
|
|
Ox.theme()
|
|
get theme
|
|
Ox.theme('foo')
|
|
set theme to 'foo'
|
|
*/
|
|
Ox.theme = function() {
|
|
var length = arguments.length,
|
|
classes = $body.attr('class').split(' '),
|
|
arg, theme;
|
|
$.each(classes, function(i, v) {
|
|
if (Ox.startsWith(v, 'OxTheme')) {
|
|
theme = v.replace('OxTheme', '').toLowerCase();
|
|
if (length == 1) {
|
|
$body.removeClass(v);
|
|
}
|
|
return false;
|
|
}
|
|
});
|
|
if (length == 1) {
|
|
arg = arguments[0]
|
|
$body.addClass('OxTheme' + Ox.toTitleCase(arg));
|
|
if (theme) {
|
|
$('input[type=image]').each(function() {
|
|
var $this = $(this);
|
|
$this.attr({
|
|
src: $this.attr('src').replace(
|
|
'/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
|
|
)
|
|
});
|
|
});
|
|
$('.OxLoadingIcon').each(function() {
|
|
var $this = $(this);
|
|
$this.attr({
|
|
src: $this.attr('src').replace(
|
|
'/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
|
|
)
|
|
});
|
|
})
|
|
}
|
|
}
|
|
return theme;
|
|
};
|
|
|
|
/**
|
|
*/
|
|
Ox.Bar = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
orientation: 'horizontal',
|
|
size: 'medium' // can be int
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxBar Ox' + Ox.toTitleCase(self.options.orientation)),
|
|
dimensions = oxui.getDimensions(self.options.orientation);
|
|
self.options.size = Ox.isString(self.options.size) ?
|
|
oxui.getBarSize(self.options.size) : self.options.size;
|
|
that.css(dimensions[0], '100%')
|
|
.css(dimensions[1], self.options.size + 'px');
|
|
return that;
|
|
};
|
|
|
|
/**
|
|
*/
|
|
Ox.Resizebar = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
collapsed: false,
|
|
collapsible: true,
|
|
edge: 'left',
|
|
elements: [],
|
|
orientation: 'horizontal',
|
|
parent: null,
|
|
resizable: true,
|
|
resize: [],
|
|
size: 0
|
|
})
|
|
.options(options || {}) // fixme: options function should be able to handle undefined, no need for || {}
|
|
.addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
|
|
/*
|
|
.attr({
|
|
draggable: 'true'
|
|
})
|
|
.bind('dragstart', function(e) {
|
|
// e.originalEvent.dataTransfer.setDragImage($('<div>')[0], 0, 0);
|
|
})
|
|
.bind('drag', function(e) {
|
|
Ox.print('dragging', e)
|
|
})
|
|
*/
|
|
.mousedown(dragStart)
|
|
.dblclick(toggle)
|
|
.append($('<div>').addClass('OxSpace'))
|
|
.append($('<div>').addClass('OxLine'))
|
|
.append($('<div>').addClass('OxSpace'));
|
|
|
|
$.extend(self, {
|
|
clientXY: self.options.orientation == 'horizontal' ? 'clientY' : 'clientX',
|
|
dimensions: oxui.getDimensions(self.options.orientation), // fixme: should orientation be the opposite orientation here?
|
|
edges: oxui.getEdges(self.options.orientation),
|
|
leftOrTop: self.options.edge == 'left' || self.options.edge == 'top',
|
|
startPos: 0,
|
|
startSize: 0
|
|
});
|
|
|
|
function drag(e) {
|
|
var d = e[self.clientXY] - self.startPos
|
|
size = self.options.size;
|
|
self.options.size = Ox.limit(
|
|
self.startSize + d * (self.leftOrTop ? 1 : -1),
|
|
self.options.resize[0],
|
|
self.options.resize[self.options.resize.length - 1]
|
|
);
|
|
$.each(self.options.resize, function(i, v) {
|
|
if (self.options.size >= v - 8 && self.options.size <= v + 8) {
|
|
self.options.size = v;
|
|
return false;
|
|
}
|
|
});
|
|
if (self.options.size != size) {
|
|
that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px');
|
|
if (self.leftOrTop) {
|
|
self.options.elements[0]
|
|
.css(self.dimensions[1], self.options.size + 'px')
|
|
.triggerEvent('resize', self.options.size);
|
|
self.options.elements[1]
|
|
.css(self.edges[2], (self.options.size + 1) + 'px')
|
|
.triggerEvent('resize', self.options.elements[1][self.dimensions[1]]());
|
|
self.options.parent.updateSize(self.ids[0], self.options.size);
|
|
} else {
|
|
self.options.elements[0]
|
|
.css(self.edges[3], (self.options.size + 1) + 'px')
|
|
.triggerEvent('resize', self.options.elements[0][self.dimensions[1]]());
|
|
self.options.elements[1]
|
|
.css(self.dimensions[1], self.options.size + 'px')
|
|
.triggerEvent('resize', self.options.size);
|
|
self.options.parent.updateSize(self.ids[1], self.options.size); // fixme: listen to event instead?
|
|
}
|
|
}
|
|
}
|
|
|
|
function dragStart(e) {
|
|
if (self.options.resizable && !self.options.collapsed) {
|
|
self.startPos = e[self.clientXY];
|
|
self.startSize = self.options.size;
|
|
Ox.print('startSize', self.startSize)
|
|
$window.mousemove(drag);
|
|
$window.one('mouseup', dragStop);
|
|
}
|
|
}
|
|
|
|
function dragStop() {
|
|
$window.unbind('mousemove');
|
|
}
|
|
|
|
function toggle() {
|
|
if (self.options.collapsible) {
|
|
self.options.parent.toggle(self.leftOrTop ? 0 : self.options.elements.length - 1);
|
|
self.options.collapsed = !self.options.collapsed;
|
|
}
|
|
/*
|
|
Ox.print('toggle');
|
|
if (Ox.isUndefined(self.options.position)) {
|
|
self.options.position = parseInt(self.options.parent.css(self.options.edge)) +
|
|
(self.options.collapsed ? self.options.size : 0);
|
|
}
|
|
var size = self.options.position -
|
|
(self.options.collapsed ? 0 : self.options.size),
|
|
animate = {};
|
|
Ox.print('s.o.e', self.options.edge);
|
|
animate[self.options.edge] = size;
|
|
self.options.parent.animate(animate, 200, function() {
|
|
var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 0 : 1;
|
|
self.options.collapsed = !self.options.collapsed;
|
|
Ox.Event.trigger(self.ids[i], 'toggle', self.options.collapsed);
|
|
Ox.Event.trigger(self.ids[1 - i], 'resize', self.options.elements[1 - i][self.dimensions[1]]());
|
|
});
|
|
*/
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
*/
|
|
Ox.Tabbar = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Bar({
|
|
size: 20
|
|
}, self)
|
|
.defaults({
|
|
selected: 0,
|
|
tabs: []
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxTabbar');
|
|
|
|
Ox.ButtonGroup({
|
|
buttons: self.options.tabs,
|
|
group: true,
|
|
selectable: true,
|
|
selected: self.options.selected,
|
|
size: 'medium',
|
|
style: 'tab',
|
|
}).appendTo(that);
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
fixme: no need for this
|
|
*/
|
|
Ox.Toolbar = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Bar({
|
|
size: oxui.getBarSize(options.size)
|
|
}, self);
|
|
return that;
|
|
};
|
|
|
|
/**
|
|
*/
|
|
Ox.Dialog = function(options, self) {
|
|
|
|
// fixme: dialog should be derived from a generic draggable
|
|
// fixme: buttons should have a close attribute, or the dialog a close id
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
title: '',
|
|
buttons: [],
|
|
content: null,
|
|
height: 216,
|
|
keys: {},
|
|
minHeight: 144,
|
|
minWidth: 256,
|
|
movable: true,
|
|
padding: 16,
|
|
resizable: true,
|
|
width: 384
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxDialog')
|
|
.bindEvent({
|
|
key_enter: function() {
|
|
keypress('enter');
|
|
},
|
|
key_escape: function() {
|
|
Ox.print('KEY ESCAPE')
|
|
keypress('escape');
|
|
}
|
|
});
|
|
|
|
$.extend(self, {
|
|
initialWidth: self.options.width,
|
|
initialHeight: self.options.height
|
|
})
|
|
|
|
that.$titlebar = new Ox.Bar({
|
|
size: 'medium'
|
|
})
|
|
.addClass('OxTitleBar')
|
|
.appendTo(that);
|
|
self.options.movable && that.$titlebar
|
|
.mousedown(drag)
|
|
.dblclick(center);
|
|
|
|
that.$title = new Ox.Element()
|
|
.addClass('OxTitle')
|
|
.html(self.options.title)
|
|
.appendTo(that.$titlebar);
|
|
|
|
// fixme: should the following be a container?
|
|
that.$content = new Ox.Element()
|
|
.addClass('OxContent')
|
|
.css({
|
|
padding: self.options.padding + 'px',
|
|
overflow: 'auto'
|
|
})
|
|
.append(self.options.content)
|
|
.appendTo(that);
|
|
|
|
that.$buttonsbar = new Ox.Bar({})
|
|
.addClass('OxButtonsBar')
|
|
.appendTo(that);
|
|
loadButtons();
|
|
|
|
//that.$buttons[0].focus();
|
|
|
|
that.$layer = new Ox.Element() // fixme: Layer widget that would handle click?
|
|
.addClass('OxLayer')
|
|
.mousedown(mousedownLayer)
|
|
.mouseup(mouseupLayer);
|
|
|
|
function center() {
|
|
var documentHeight = $document.height();
|
|
that.css({
|
|
left: 0,
|
|
top: Math.max(parseInt(-documentHeight / 10), self.options.height - documentHeight + 40) + 'px',
|
|
right: 0,
|
|
bottom: 0,
|
|
margin: 'auto'
|
|
});
|
|
}
|
|
|
|
function drag(event) {
|
|
var bodyWidth = $body.width(),
|
|
bodyHeight = $document.height(),
|
|
elementWidth = that.width(),
|
|
offset = that.offset(),
|
|
x = event.clientX,
|
|
y = event.clientY;
|
|
$window.mousemove(function(event) {
|
|
that.css({
|
|
margin: 0
|
|
});
|
|
var left = Ox.limit(
|
|
offset.left - x + event.clientX,
|
|
24 - elementWidth, bodyWidth - 24
|
|
//0, documentWidth - elementWidth
|
|
),
|
|
top = Ox.limit(
|
|
offset.top - y + event.clientY,
|
|
24, bodyHeight - 24
|
|
//24, documentHeight - elementHeight
|
|
);
|
|
that.css({
|
|
left: left + 'px',
|
|
top: top + 'px'
|
|
});
|
|
});
|
|
$window.one('mouseup', function() {
|
|
$window.unbind('mousemove');
|
|
});
|
|
}
|
|
|
|
function getButtonById(id) {
|
|
var ret = null;
|
|
Ox.print('that.$buttons', that.$buttons, id)
|
|
$.each(that.$buttons, function(i, button) {
|
|
if (button.options('id') == id) {
|
|
ret = button;
|
|
return false;
|
|
}
|
|
});
|
|
return ret;
|
|
}
|
|
|
|
function keypress(key) {
|
|
var id = self.options.keys[key];
|
|
Ox.print('X', key, self.options.keys)
|
|
id && getButtonById(id).$element.trigger('click');
|
|
}
|
|
|
|
function loadButtons() {
|
|
Ox.print('loadButtons', $.map(self.options.buttons, function(v) {
|
|
return v;
|
|
}));
|
|
if (that.$buttons) {
|
|
that.$buttons.forEach(function($button) {
|
|
$button.remove();
|
|
});
|
|
that.$resize.remove();
|
|
// that.$buttonsbar.empty();
|
|
}
|
|
that.$buttons = [];
|
|
if (!Ox.isArray(self.options.buttons[0])) {
|
|
self.options.buttons = [[], self.options.buttons];
|
|
}
|
|
Ox.print('--- one', self.options.buttons[0]);
|
|
$.each(self.options.buttons[0], function(i, button) {
|
|
// Ox.print('---', button, self.options.buttons)
|
|
that.$buttons[i] = button
|
|
.addClass('OxLeft')
|
|
.appendTo(that.$buttonsbar);
|
|
});
|
|
if (self.options.resizable) {
|
|
that.$resize = new Ox.Element()
|
|
.addClass('OxResize')
|
|
.mousedown(resize)
|
|
.dblclick(reset)
|
|
.appendTo(that.$buttonsbar);
|
|
}
|
|
Ox.print('--- two', self.options.buttons[1]);
|
|
$.each(self.options.buttons[1].reverse(), function(i, button) {
|
|
//Ox.print('---', button, self.options.buttons)
|
|
that.$buttons[that.$buttons.length] = button
|
|
.addClass('OxRight')
|
|
.appendTo(that.$buttonsbar);
|
|
});
|
|
}
|
|
|
|
function mousedownLayer() {
|
|
that.$layer.stop().animate({
|
|
opacity: 0.5
|
|
}, 0);
|
|
}
|
|
|
|
function mouseupLayer() {
|
|
that.$layer.stop().animate({
|
|
opacity: 0
|
|
}, 0);
|
|
}
|
|
|
|
function reset() {
|
|
$.extend(self.options, {
|
|
height: self.initialHeight,
|
|
width: self.initialWidth
|
|
});
|
|
that/*.css({
|
|
left: Math.max(that.offset().left, 24 - that.width())
|
|
})*/
|
|
.width(self.options.width)
|
|
.height(self.options.height);
|
|
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
|
|
triggerResizeEvent();
|
|
}
|
|
|
|
function resize(event) { // fixme: reserved jquery string?
|
|
var documentWidth = $document.width(),
|
|
documentHeight = $document.height(),
|
|
elementWidth = that.width(),
|
|
elementHeight = that.height(),
|
|
offset = that.offset(),
|
|
x = event.clientX,
|
|
y = event.clientY;
|
|
$window.mousemove(function(event) {
|
|
that.css({
|
|
left: offset.left,
|
|
top: offset.top,
|
|
margin: 0
|
|
});
|
|
self.options.width = Ox.limit(
|
|
elementWidth - x + event.clientX,
|
|
self.options.minWidth, Math.min(documentWidth, documentWidth - offset.left)
|
|
);
|
|
self.options.height = Ox.limit(
|
|
elementHeight - y + event.clientY,
|
|
self.options.minHeight, documentHeight - offset.top
|
|
);
|
|
that.width(self.options.width);
|
|
that.height(self.options.height);
|
|
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
|
|
triggerResizeEvent();
|
|
});
|
|
$window.one('mouseup', function() {
|
|
$window.unbind('mousemove');
|
|
});
|
|
}
|
|
|
|
function triggerResizeEvent() {
|
|
that.triggerEvent('resize', {
|
|
width: self.options.width,
|
|
height: self.options.height
|
|
});
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'buttons') {
|
|
loadButtons();
|
|
/*
|
|
that.$buttonsbar.children().animate({
|
|
opacity: 0
|
|
}, 100, function() {
|
|
loadButtons();
|
|
that.$buttonsbar.children().animate({
|
|
opacity: 1
|
|
}, 100);
|
|
});
|
|
*/
|
|
} else if (key == 'content') {
|
|
that.$content.html(value);
|
|
} else if (key == 'height' || key == 'width') {
|
|
that.animate({
|
|
height: self.options.height + 'px',
|
|
width: self.options.width + 'px'
|
|
}, 100);
|
|
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
|
|
} else if (key == 'title') {
|
|
that.$title.animate({
|
|
opacity: 0
|
|
}, 100, function() {
|
|
that.$title.html(value).animate({
|
|
opacity: 1
|
|
}, 100);
|
|
});
|
|
}
|
|
}
|
|
|
|
that.center = function() {
|
|
|
|
};
|
|
|
|
that.close = function(callback) {
|
|
callback = callback || function() {};
|
|
that.animate({
|
|
opacity: 0
|
|
}, 200, function() {
|
|
that.$buttons.forEach(function($button) {
|
|
$button.remove();
|
|
});
|
|
that.loseFocus();
|
|
that.$layer.remove();
|
|
that.remove();
|
|
callback();
|
|
});
|
|
$window.unbind('mouseup', mouseupLayer)
|
|
return that;
|
|
};
|
|
|
|
that.content = function($element) {
|
|
that.$content.empty().append($element);
|
|
return that;
|
|
}
|
|
|
|
that.disable = function() {
|
|
// to be used on submit of form, like login
|
|
that.$layer.addClass('OxFront');
|
|
return that;
|
|
};
|
|
|
|
that.disableButton = function(id) {
|
|
getButtonById(id).options({
|
|
disabled: true
|
|
});
|
|
return that;
|
|
};
|
|
|
|
that.enable = function() {
|
|
that.$layer.removeClass('OxFront');
|
|
return that;
|
|
};
|
|
|
|
that.enableButton = function(id) {
|
|
getButtonById(id).options({
|
|
disabled: false
|
|
});
|
|
return that;
|
|
};
|
|
|
|
that.open = function() {
|
|
Ox.print('before open')
|
|
that.$layer.appendTo($body);
|
|
that.css({
|
|
opacity: 0
|
|
}).appendTo($body).animate({
|
|
opacity: 1
|
|
}, 200);
|
|
center();
|
|
reset();
|
|
// fixme: the following line prevents preview-style dialog
|
|
that.gainFocus();
|
|
$window.bind('mouseup', mouseupLayer)
|
|
Ox.print('after open')
|
|
return that;
|
|
};
|
|
|
|
that.size = function(width, height, callback) {
|
|
$.extend(self, {
|
|
initialWidth: width,
|
|
initialHeight: height
|
|
});
|
|
$.extend(self.options, {
|
|
width: width,
|
|
height: height
|
|
});
|
|
// fixme: duplicated
|
|
that.animate({
|
|
height: self.options.height + 'px',
|
|
width: self.options.width + 'px'
|
|
}, 100, function() {
|
|
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
|
|
callback();
|
|
});
|
|
}
|
|
|
|
return that;
|
|
|
|
}
|
|
|
|
/*
|
|
============================================================================
|
|
Forms
|
|
============================================================================
|
|
*/
|
|
|
|
/**
|
|
*/
|
|
Ox.Filter = function(options, self) {
|
|
|
|
var self = self || {}
|
|
that = new Ox.Element()
|
|
.defaults({
|
|
|
|
})
|
|
.options(options || {});
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
*/
|
|
Ox.Form = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
error: '',
|
|
id: '',
|
|
items: [],
|
|
submit: null
|
|
})
|
|
.options(options || {}) // fixme: the || {} can be done once, in the options function
|
|
.addClass('OxForm');
|
|
|
|
$.extend(self, {
|
|
$items: [],
|
|
$messages: [],
|
|
formIsValid: false,
|
|
itemIds: [],
|
|
itemIsValid: []
|
|
});
|
|
|
|
// fixme: form isn't necessarily empty/invalid
|
|
$.each(self.options.items, function(i, item) {
|
|
self.itemIds[i] = item.options('id') || item.id;
|
|
self.itemIsValid[i] = !!item.value().length;
|
|
that.append(self.$items[i] = new Ox.FormItem({element: item}))
|
|
.append(self.$messages[i] = new Ox.Element().addClass('OxFormMessage'));
|
|
item.bindEvent({
|
|
/*
|
|
blur: function(event, data) {
|
|
validate(i, data.valid);
|
|
if (data.valid) {
|
|
self.$messages[i].html('').hide();
|
|
} else {
|
|
self.$messages[i].html(data.message).show();
|
|
}
|
|
},
|
|
*/
|
|
autovalidate: function(event, data) {
|
|
data.valid = !!data.value.length;
|
|
validate(i, data.valid);
|
|
if (data.valid) {
|
|
self.$messages[i].html('').hide();
|
|
} else {
|
|
//self.$messages[i].html(data.message).show();
|
|
}
|
|
},
|
|
submit: function(event, data) {
|
|
self.formIsValid && that.submit();
|
|
},
|
|
validate: function(event, data) {
|
|
validate(i, data.valid);
|
|
if (data.valid) {
|
|
self.$messages[i].html('').hide();
|
|
} else {
|
|
self.$messages[i].html(data.message).show();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
function getItemPositionById(id) {
|
|
return self.itemIds.indexOf(id);
|
|
}
|
|
|
|
function setMessage(id, message) {
|
|
self.$messages[getItemPositionById(id)].html(message)[message !== '' ? 'show' : 'hide']();
|
|
}
|
|
|
|
function submitCallback(data) {
|
|
$.each(data, function(i, v) {
|
|
setMessage(v.id, v.message);
|
|
});
|
|
}
|
|
|
|
function validate(pos, valid) {
|
|
Ox.print('FORM validate', pos, valid)
|
|
self.itemIsValid[pos] = valid;
|
|
if (Ox.every(self.itemIsValid) != self.formIsValid) {
|
|
self.formIsValid = !self.formIsValid;
|
|
that.triggerEvent('validate', {
|
|
valid: self.formIsValid
|
|
});
|
|
}
|
|
}
|
|
|
|
that.submit = function() {
|
|
Ox.print('---- that.values()', that.values())
|
|
self.options.submit(that.values(), submitCallback);
|
|
};
|
|
|
|
that.values = function() { // fixme: can this be private?
|
|
/*
|
|
get/set form values
|
|
call without arguments to get current form values
|
|
pass values as array to set values (not implemented)
|
|
*/
|
|
var values = {};
|
|
if (arguments.length == 0) {
|
|
$.each(self.$items, function(i, $item) {
|
|
values[self.itemIds[i]] = self.$items[i].value();
|
|
});
|
|
Ox.print('VALUES', values)
|
|
return values;
|
|
} else {
|
|
$.each(arguments[0], function(key, value) {
|
|
|
|
});
|
|
return that;
|
|
}
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
*/
|
|
Ox.FormItem = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
element: null,
|
|
error: '',
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxFormItem')
|
|
.append(self.options.element);
|
|
|
|
that.value = function() {
|
|
return self.options.element.value();
|
|
};
|
|
|
|
return that;
|
|
|
|
}
|
|
|
|
/**
|
|
Form Elements
|
|
*/
|
|
|
|
/**
|
|
methods:
|
|
toggleDisabled enable/disable button
|
|
toggleSelected select/unselect button
|
|
toggleTitle if more than one title was provided,
|
|
toggle to next title.
|
|
events:
|
|
click non-selectable button was clicked
|
|
deselect selectable button was deselected
|
|
select selectable button was selected
|
|
*/
|
|
Ox.Button = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Element('input', self)
|
|
.defaults({
|
|
disabled: false,
|
|
group: false,
|
|
id: '',
|
|
overlap: 'none',
|
|
selectable: false,
|
|
selected: false,
|
|
size: 'medium',
|
|
// fixme: 'default' or ''?
|
|
style: 'default', // can be default, checkbox, symbol, or tab
|
|
title: '',
|
|
tooltip: '',
|
|
type: 'text',
|
|
width: 'auto'
|
|
})
|
|
.options(options || {})
|
|
.attr({
|
|
disabled: self.options.disabled ? 'disabled' : '',
|
|
type: self.options.type == 'text' ? 'button' : 'image'
|
|
})
|
|
.addClass('OxButton Ox' + Ox.toTitleCase(self.options.size) +
|
|
(self.options.disabled ? ' OxDisabled': '') +
|
|
(self.options.selected ? ' OxSelected': '') +
|
|
(self.options.style != 'default' ? ' Ox' + Ox.toTitleCase(self.options.style) : '') +
|
|
(self.options.overlap != 'none' ? ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''))
|
|
.css(self.options.width == 'auto' ? {} : {
|
|
width: (self.options.width - 14) + 'px'
|
|
})
|
|
.mousedown(mousedown)
|
|
.click(click);
|
|
|
|
$.extend(self, Ox.isArray(self.options.title) ? {
|
|
selectedTitle: Ox.setPropertyOnce(self.options.title, 'selected'),
|
|
titles: self.options.title
|
|
} : {
|
|
selectedTitle: 0,
|
|
titles: [{
|
|
id: '',
|
|
title: self.options.title
|
|
}]
|
|
});
|
|
|
|
setTitle(self.titles[self.selectedTitle].title);
|
|
|
|
if (self.options.tooltip) {
|
|
self.tooltips = Ox.isArray(self.options.tooltip) ? self.options.tooltip : [self.options.tooltip];
|
|
self.$tooltip = new Ox.Tooltip({
|
|
title: self.tooltips[self.selectedTitle]
|
|
});
|
|
that.mouseenter(mouseenter)
|
|
.mouseleave(mouseleave);
|
|
}
|
|
|
|
function click() {
|
|
if (!self.options.disabled) {
|
|
var data = self.titles[self.selectedTitle];
|
|
if (!self.options.selectable) {
|
|
that.triggerEvent('click', data);
|
|
} else {
|
|
if (self.options.group) {
|
|
that.triggerEvent('select', data);
|
|
} else {
|
|
that.toggleSelected();
|
|
}
|
|
}
|
|
if (self.titles.length == 2) {
|
|
that.toggleTitle();
|
|
}
|
|
}
|
|
}
|
|
|
|
function mousedown(event) {
|
|
if (self.options.type == 'image' && $.browser.safari) {
|
|
// keep image from being draggable
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
function mouseenter(event) {
|
|
self.$tooltip.show(event.clientX, event.clientY);
|
|
}
|
|
|
|
function mouseleave(event) {
|
|
self.$tooltip.hide();
|
|
}
|
|
|
|
function setTitle(title) {
|
|
self.title = title;
|
|
if (self.options.type == 'image') {
|
|
that.attr({
|
|
src: oxui.path + 'png/ox.ui.' + Ox.theme() +
|
|
'/symbol' + Ox.toTitleCase(title) + '.png'
|
|
});
|
|
} else {
|
|
that.val(title);
|
|
}
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'disabled') {
|
|
that.attr({
|
|
disabled: value ? 'disabled' : ''
|
|
})
|
|
.toggleClass('OxDisabled');
|
|
} else if (key == 'selected') {
|
|
if (value != that.hasClass('OxSelected')) { // fixme: neccessary?
|
|
that.toggleClass('OxSelected');
|
|
}
|
|
that.triggerEvent('change');
|
|
} else if (key == 'title') {
|
|
setTitle(value);
|
|
} else if (key == 'width') {
|
|
that.$element.css({
|
|
width: (value - 14) + 'px'
|
|
});
|
|
}
|
|
}
|
|
|
|
that.toggleDisabled = function() {
|
|
that.options({
|
|
enabled: !self.options.disabled
|
|
});
|
|
}
|
|
|
|
that.toggleSelected = function() {
|
|
that.options({
|
|
selected: !self.options.selected
|
|
});
|
|
}
|
|
|
|
that.toggleTitle = function() {
|
|
self.selectedTitle = 1 - self.selectedTitle;
|
|
setTitle(self.titles[self.selectedTitle].title);
|
|
self.$tooltip && self.$tooltip.options({
|
|
title: self.tooltips[self.selectedTitle]
|
|
});
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
options
|
|
buttons array of buttons
|
|
max integer, maximum number of selected buttons, 0 for all
|
|
min integer, minimum number of selected buttons, 0 for none
|
|
selectable if true, buttons are selectable
|
|
type string, 'image' or 'text'
|
|
methods:
|
|
events:
|
|
change {id, value} selection within a group changed
|
|
*/
|
|
Ox.ButtonGroup = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
buttons: [],
|
|
max: 1,
|
|
min: 1,
|
|
selectable: false,
|
|
size: 'medium',
|
|
style: '',
|
|
type: 'text',
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxButtonGroup');
|
|
|
|
if (self.options.selectable) {
|
|
self.optionGroup = new Ox.OptionGroup(
|
|
self.options.buttons,
|
|
self.options.min,
|
|
self.options.max,
|
|
'selected'
|
|
);
|
|
self.options.buttons = self.optionGroup.init();
|
|
}
|
|
|
|
self.$buttons = [];
|
|
$.each(self.options.buttons, function(position, button) {
|
|
var id = self.options.id + Ox.toTitleCase(button.id)
|
|
self.$buttons[position] = Ox.Button({
|
|
disabled: button.disabled,
|
|
group: true,
|
|
id: id,
|
|
selectable: self.options.selectable,
|
|
selected: button.selected,
|
|
size: self.options.size,
|
|
style: self.options.style,
|
|
title: button.title,
|
|
type: self.options.type
|
|
})
|
|
.bindEvent('select', function() {
|
|
selectButton(position);
|
|
})
|
|
.appendTo(that);
|
|
});
|
|
|
|
function selectButton(pos) {
|
|
var toggled = self.optionGroup.toggle(pos);
|
|
if (toggled.length) {
|
|
$.each(toggled, function(i, pos) {
|
|
self.$buttons[pos].toggleSelected();
|
|
});
|
|
that.triggerEvent('change', {
|
|
selected: $.map(self.optionGroup.selected(), function(v, i) {
|
|
return self.options.buttons[v].id;
|
|
})
|
|
});
|
|
}
|
|
}
|
|
|
|
return that;
|
|
};
|
|
|
|
/**
|
|
options
|
|
disabled boolean, if true, checkbox is disabled
|
|
id element id
|
|
group boolean, if true, checkbox is part of a group
|
|
checked boolean, if true, checkbox is checked
|
|
title string, text on label
|
|
width integer, width in px
|
|
methods:
|
|
toggleChecked function()
|
|
toggles checked property
|
|
returns that
|
|
events:
|
|
change triggered when checked property changes
|
|
passes {checked, id, title}
|
|
*/
|
|
Ox.Checkbox = function(options, self) {
|
|
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
disabled: false,
|
|
id: '',
|
|
group: false,
|
|
checked: false,
|
|
title: '',
|
|
width: 'auto'
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxCheckbox')
|
|
.attr(self.options.disabled ? {
|
|
disabled: 'disabled'
|
|
} : {});
|
|
|
|
if (self.options.title) {
|
|
self.options.width != 'auto' && that.css({
|
|
width: self.options.width + 'px'
|
|
});
|
|
self.$title = new Ox.Label({
|
|
disabled: self.options.disabled,
|
|
id: self.options.id + 'Label',
|
|
overlap: 'left',
|
|
title: self.options.title,
|
|
width: self.options.width - 16
|
|
})
|
|
.css({
|
|
float: 'right'
|
|
})
|
|
.click(clickTitle)
|
|
.appendTo(that);
|
|
}
|
|
|
|
self.$button = new Ox.Button({
|
|
disabled: self.options.disabled,
|
|
id: self.options.id + 'Button',
|
|
title: [
|
|
{id: 'none', title: 'none', selected: !self.options.checked},
|
|
{id: 'check', title: 'check', selected: self.options.checked}
|
|
],
|
|
type: 'image'
|
|
})
|
|
.addClass('OxCheckbox')
|
|
.click(clickButton)
|
|
.appendTo(that);
|
|
|
|
function clickButton() {
|
|
self.options.checked = !self.options.checked;
|
|
// click will have toggled the button,
|
|
// if it is part of a group, we have to revert that
|
|
self.options.group && that.toggleChecked();
|
|
that.triggerEvent('change', {
|
|
checked: self.options.checked,
|
|
id: self.options.id,
|
|
title: self.options.title
|
|
});
|
|
}
|
|
|
|
function clickTitle() {
|
|
!self.options.disabled && self.$button.trigger('click');
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'checked') {
|
|
that.toggleChecked();
|
|
}
|
|
};
|
|
|
|
that.checked = function() {
|
|
return self.options.checked;
|
|
}
|
|
|
|
that.toggleChecked = function() {
|
|
self.$button.toggleTitle();
|
|
return that;
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
options
|
|
checkboxes [] array of checkboxes
|
|
max 1 integer
|
|
min 1 integer
|
|
width integer, width in px
|
|
events:
|
|
change triggered when checked property changes
|
|
passes {checked, id, title}
|
|
*/
|
|
Ox.CheckboxGroup = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
checkboxes: [],
|
|
max: 1,
|
|
min: 1,
|
|
width: 256
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxCheckboxGroup');
|
|
|
|
self.optionGroup = new Ox.OptionGroup(
|
|
self.options.checkboxes,
|
|
self.options.min,
|
|
self.options.max);
|
|
self.options.checkboxes = self.optionGroup.init();
|
|
|
|
$.extend(self, {
|
|
$checkboxes: [],
|
|
checkboxWidth: $.map(Ox.divideInt(
|
|
self.options.width + (self.options.checkboxes.length - 1) * 6,
|
|
self.options.checkboxes.length
|
|
), function(v, i) {
|
|
return v + (i < self.options.checkboxes.length - 1 ? 10 : 0);
|
|
})
|
|
});
|
|
$.each(self.options.checkboxes, function(position, checkbox) {
|
|
var id = self.options.id + Ox.toTitleCase(checkbox.id)
|
|
self.$checkboxes[position] = new Ox.Checkbox($.extend(checkbox, {
|
|
group: true,
|
|
id: id,
|
|
width: self.checkboxWidth[position]
|
|
}))
|
|
.bindEvent('change', function() {
|
|
change(position);
|
|
})
|
|
.appendTo(that);
|
|
});
|
|
|
|
function change(pos) {
|
|
var toggled = self.optionGroup.toggle(pos);
|
|
//Ox.print('change', pos, 'toggled', toggled)
|
|
if (toggled.length) {
|
|
$.each(toggled, function(i, pos) {
|
|
self.$checkboxes[pos].toggleChecked();
|
|
});
|
|
that.triggerEvent('change', {
|
|
checked: $.map(self.optionGroup.checked(), function(v, i) {
|
|
return self.options.checkboxes[v].id;
|
|
})
|
|
});
|
|
}
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
options
|
|
arrows boolearn, if true, and type is 'float' or 'integer', display arrows
|
|
arrowStep number, step when clicking arrows
|
|
autocomplete array of possible values, or
|
|
function(key, value, callback), returns one or more values
|
|
autocompleteReplace boolean, if true, value is replaced
|
|
autocompleteReplaceCorrect boolean, if true, only valid values can be entered
|
|
autocompleteSelect boolean, if true, menu is displayed
|
|
autocompleteSelectHighlight boolean, if true, value in menu is highlighted
|
|
autocompleteSelectSubmit boolean, if true, submit input on menu selection
|
|
autocorrect string ('email', 'float', 'integer', 'phone', 'url'), or
|
|
regexp(value), or
|
|
function(key, value, blur, callback), returns value
|
|
auto validate --remote validation--
|
|
clear boolean, if true, has clear button
|
|
disabled boolean, if true, is disabled
|
|
height integer, px (for type='textarea' and type='range' with orientation='horizontal')
|
|
id string, element id
|
|
key string, to be passed to autocomplete and autovalidate functions
|
|
max number, max value if type is 'integer' or 'float'
|
|
min number, min value if type is 'integer' or 'float'
|
|
name string, will be displayed by autovalidate function ('invalid ' + name)
|
|
overlap string, '', 'left' or 'right', will cause padding and negative margin
|
|
picker
|
|
//rangeOptions
|
|
arrows boolean, if true, display arrows
|
|
//arrowStep number, step when clicking arrows
|
|
//arrowSymbols array of two strings
|
|
max number, maximum value
|
|
min number, minimum value
|
|
orientation 'horizontal' or 'vertical'
|
|
step number, step
|
|
thumbValue boolean, if true, value is displayed on thumb, or
|
|
array of strings per value, or
|
|
function(value), returns string
|
|
thumbSize integer, px
|
|
trackGradient string, css gradient for track
|
|
trackImage string, image url, or
|
|
array of image urls
|
|
//trackStep number, 0 for 'scroll here', positive for step
|
|
trackValues boolean
|
|
serialize
|
|
textAlign 'left', 'center' or 'right'
|
|
type 'float', 'integer', 'password', 'text'
|
|
value string
|
|
validate function, remote validation
|
|
width integer, px
|
|
methods:
|
|
events:
|
|
change
|
|
submit
|
|
*/
|
|
Ox.Input = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
arrows: false,
|
|
arrowStep: 1,
|
|
autocomplete: null,
|
|
autocompleteReplace: false,
|
|
autocompleteReplaceCorrect: false,
|
|
autocompleteSelect: false,
|
|
autocompleteSelectHighlight: false,
|
|
autocompleteSelectSubmit: false,
|
|
autovalidate: null,
|
|
clear: false,
|
|
disabled: false,
|
|
key: '',
|
|
min: 0,
|
|
max: 100,
|
|
label: '',
|
|
labelWidth: 64,
|
|
overlap: 'none',
|
|
placeholder: '',
|
|
serialize: null,
|
|
textAlign: 'left',
|
|
type: 'text',
|
|
validate: null,
|
|
value: '',
|
|
width: 128
|
|
})
|
|
.options(options)
|
|
.addClass('OxInput OxMedium')
|
|
.bindEvent($.extend(self.options.type == 'textarea' ? {} : {
|
|
key_enter: submit
|
|
}, {
|
|
key_escape: cancel
|
|
}));
|
|
|
|
if (
|
|
Ox.isArray(self.options.autocomplete) &&
|
|
self.options.autocompleteReplace &&
|
|
self.options.autocompleteReplaceCorrect &&
|
|
self.options.value === ''
|
|
) {
|
|
self.options.value = self.options.autocomplete[0]
|
|
}
|
|
|
|
// fixme: set to min, not 0
|
|
if (self.options.type == 'float') {
|
|
$.extend(self.options, {
|
|
autovalidate: 'float',
|
|
textAlign: 'right',
|
|
value: self.options.value || '0.0'
|
|
});
|
|
} else if (self.options.type == 'integer') {
|
|
$.extend(self.options, {
|
|
autovalidate: 'integer',
|
|
textAlign: 'right',
|
|
value: self.options.value || '0'
|
|
});
|
|
}
|
|
|
|
if (self.options.label) {
|
|
self.$label = new Ox.Label({
|
|
overlap: 'right',
|
|
textAlign: 'right',
|
|
title: self.options.label,
|
|
width: self.options.labelWidth
|
|
})
|
|
.css({
|
|
float: 'left', // fixme: use css rule
|
|
})
|
|
.click(function() {
|
|
that.focus();
|
|
})
|
|
.appendTo(that);
|
|
}
|
|
|
|
if (self.options.arrows) {
|
|
self.arrows = [];
|
|
self.arrows[0] = [
|
|
new Ox.Button({
|
|
overlap: 'right',
|
|
title: 'previous',
|
|
type: 'image'
|
|
})
|
|
.css({
|
|
float: 'left'
|
|
})
|
|
.click(function() {
|
|
clickArrow(0);
|
|
})
|
|
.appendTo(that),
|
|
new Ox.Button({
|
|
overlap: 'left',
|
|
title: 'next',
|
|
type: 'image'
|
|
})
|
|
.css({
|
|
float: 'right'
|
|
})
|
|
.click(function() {
|
|
clickArrow(1);
|
|
})
|
|
.appendTo(that)
|
|
]
|
|
}
|
|
|
|
$.extend(self, {
|
|
bindKeyboard: self.options.autocomplete || self.options.autovalidate,
|
|
hasPasswordPlaceholder: self.options.type == 'password' && self.options.placeholder,
|
|
inputWidth: getInputWidth()
|
|
});
|
|
|
|
if (self.options.clear) {
|
|
self.$button = new Ox.Button({
|
|
overlap: 'left',
|
|
title: 'clear',
|
|
type: 'image'
|
|
})
|
|
.css({
|
|
float: 'right' // fixme: use css rule
|
|
})
|
|
.click(clear)
|
|
.appendTo(that);
|
|
}
|
|
|
|
self.$input = $('<input>')
|
|
.addClass('OxInput OxMedium')
|
|
.attr({
|
|
disabled: self.options.disabled ? 'disabled' : '',
|
|
type: self.options.type == 'password' ? 'password' : 'text'
|
|
})
|
|
.css({
|
|
width: self.inputWidth + 'px',
|
|
textAlign: self.options.textAlign
|
|
})
|
|
.val(self.options.value)
|
|
.blur(blur)
|
|
.change(change)
|
|
.focus(focus)
|
|
.appendTo(that.$element);
|
|
|
|
if (self.hasPasswordPlaceholder) {
|
|
self.$input.hide();
|
|
self.$placeholder = $('<input>')
|
|
.addClass('OxInput OxMedium OxPlaceholder')
|
|
.attr({
|
|
type: 'text'
|
|
})
|
|
.css({
|
|
//float: 'left',
|
|
width: self.inputWidth + 'px'
|
|
})
|
|
.val(self.options.placeholder)
|
|
.focus(focus)
|
|
.appendTo(that.$element);
|
|
}
|
|
|
|
if (self.options.autocomplete && self.options.autocompleteSelect) {
|
|
self.$autocompleteMenu = new Ox.Menu({
|
|
element: self.$input,
|
|
id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
|
|
offset: {
|
|
left: 4,
|
|
top: 0
|
|
},
|
|
size: self.options.size
|
|
})
|
|
.bindEvent('click', clickMenu);
|
|
if (self.options.autocompleteReplace) {
|
|
self.$autocompleteMenu.bindEvent({
|
|
deselect: deselectMenu,
|
|
select: selectMenu,
|
|
});
|
|
}
|
|
}
|
|
|
|
self.options.placeholder && setPlaceholder();
|
|
|
|
function autocomplete(oldValue, oldCursor) {
|
|
|
|
if (self.options.value || self.options.autocompleteReplaceCorrect) {
|
|
Ox.isFunction(self.options.autocomplete) ?
|
|
(self.options.key ? self.options.autocomplete(
|
|
self.options.key,
|
|
self.options.value,
|
|
autocompleteCallback
|
|
) : self.options.autocomplete(
|
|
self.options.value,
|
|
autocompleteCallback
|
|
)) : autocompleteCallback(autocompleteFunction(self.options.value));
|
|
}
|
|
if (!self.options.value) {
|
|
self.options.autocompleteSelect && self.$autocompleteMenu.hideMenu();
|
|
}
|
|
|
|
function autocompleteFunction() {
|
|
var values = Ox.find(self.options.autocomplete, self.options.value);
|
|
return self.options.autocompleteReplace ? values[0] :
|
|
$.merge(values[0], values[1]);
|
|
}
|
|
|
|
function autocompleteCallback(values) {
|
|
|
|
Ox.print('autocompleteCallback', values[0], self.options.value, self.options.value.length, oldValue, oldCursor)
|
|
|
|
var length = self.options.value.length,
|
|
deleted = length <= oldValue.length - (oldCursor[1] - oldCursor[0]),
|
|
newValue = values[0] ?
|
|
((self.options.autocompleteReplaceCorrect || !deleted) ?
|
|
values[0] : self.options.value) :
|
|
(self.options.autocompleteReplaceCorrect ? oldValue : self.options.value),
|
|
newLength = newValue.length,
|
|
pos = cursor(),
|
|
selected = -1,
|
|
selectEnd = length == 0 || (values[0] && values[0].length),
|
|
value;
|
|
|
|
Ox.print('selectEnd', selectEnd)
|
|
|
|
if (self.options.autocompleteReplace) {
|
|
self.options.value = newValue;
|
|
self.$input.val(self.options.value);
|
|
if (selectEnd) {
|
|
cursor(length, newLength);
|
|
} else if (self.options.autocompleteReplaceCorrect) {
|
|
cursor(oldCursor);
|
|
} else {
|
|
cursor(pos);
|
|
}
|
|
selected = 0;
|
|
}
|
|
|
|
if (self.options.autocompleteSelect) {
|
|
value = self.options.value.toLowerCase();
|
|
if (values.length) {
|
|
self.oldCursor = cursor();
|
|
self.oldValue = self.options.value;
|
|
self.$autocompleteMenu.options({
|
|
items: $.map(values, function(v, i) {
|
|
if (value == v.toLowerCase()) {
|
|
selected = i;
|
|
}
|
|
return {
|
|
id: v.toLowerCase().replace(/ /g, '_'), // fixme: need function to do lowercase, underscores etc?
|
|
title: self.options.autocompleteSelectHighlight ? v.replace(
|
|
new RegExp('(' + value + ')', 'ig'),
|
|
'<span class="OxHighlight">$1</span>'
|
|
) : v
|
|
};
|
|
}),
|
|
selected: selected
|
|
}).showMenu();
|
|
} else {
|
|
self.$autocompleteMenu.hideMenu();
|
|
}
|
|
}
|
|
|
|
that.triggerEvent('autocomplete', {
|
|
value: newValue
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function autovalidate() {
|
|
|
|
var blur, oldCursor, oldValue;
|
|
|
|
if (arguments.length == 1) {
|
|
blur = arguments[0];
|
|
} else {
|
|
blur = false;
|
|
oldValue = arguments[0];
|
|
oldCursor = arguments[1];
|
|
}
|
|
|
|
Ox.isFunction(self.options.autovalidate) ?
|
|
(self.options.key ? self.options.autovalidate(
|
|
self.options.key,
|
|
self.options.value,
|
|
blur,
|
|
autovalidateCallback
|
|
) : self.options.autovalidate(
|
|
self.options.value,
|
|
blur,
|
|
autovalidateCallback
|
|
)) : (Ox.isRegExp(self.options.autovalidate) ?
|
|
autovalidateCallback(autovalidateFunction(self.options.value)) :
|
|
autovalidateTypeFunction(self.options.type, self.options.value)
|
|
);
|
|
|
|
function autovalidateFunction(value) {
|
|
var regexp = new RegExp(self.options.autovalidate);
|
|
return $.map(value.split(''), function(v) {
|
|
return regexp(v) ? v : null;
|
|
}).join('');
|
|
}
|
|
|
|
function autovalidateTypeFunction(type, value) {
|
|
// fixme: remove trailing zeroes on blur
|
|
var cursor,
|
|
regexp = type == 'float' ? /[\d\.]/ : /\d/;
|
|
if (type == 'float') {
|
|
if (value.indexOf('.') != value.lastIndexOf('.')) {
|
|
value = oldValue;
|
|
} else {
|
|
if (self.autovalidateFloatFlag) {
|
|
if (Ox.endsWith(value, '.')) {
|
|
value = value.substr(0, value.length - 1);
|
|
}
|
|
self.autovalidateFloatFlag = false;
|
|
}
|
|
while (value[0] == '0' && value[1] != '.') {
|
|
value = value.substr(1);
|
|
}
|
|
while (Ox.startsWith(value, '.')) {
|
|
if (Ox.startsWith(value, '..')) {
|
|
value = value.substr(1);
|
|
} else {
|
|
value = '0' + value;
|
|
}
|
|
}
|
|
if (Ox.endsWith(value, '.')) {
|
|
value += '0';
|
|
cursor = [value.length - 1, value.length];
|
|
self.autovalidateFloatFlag = true;
|
|
}
|
|
}
|
|
}
|
|
value = $.map(value.split(''), function(v) {
|
|
return regexp(v) ? v : null;
|
|
}).join('');
|
|
if (type == 'integer') {
|
|
while (value.length > 1 && Ox.startsWith(value, '0')) {
|
|
value = value.substr(1);
|
|
}
|
|
}
|
|
if (value === '') {
|
|
value = type == 'float' ? '0.0' : '0';
|
|
cursor = [0, value.length];
|
|
} else if (value > self.options.max) {
|
|
value = oldValue;
|
|
}
|
|
autovalidateCallback(value, cursor);
|
|
}
|
|
|
|
function autovalidateCallback(newValue, newCursor) {
|
|
Ox.print('autovalidateCallback', newValue, oldCursor)
|
|
self.options.value = newValue;
|
|
self.$input.val(self.options.value);
|
|
!blur && cursor(
|
|
newCursor || (oldCursor[1] + newValue.length - oldValue.length)
|
|
);
|
|
that.triggerEvent('autovalidate', {
|
|
value: self.options.value
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
|
|
function autovalidate(blur) {
|
|
Ox.print('autovalidate', self.options.value, blur || false)
|
|
self.autocorrectBlur = blur || false;
|
|
self.autocorrectCursor = cursor();
|
|
Ox.isFunction(self.options.autocorrect) ?
|
|
(self.options.key ? self.options.autocorrect(
|
|
self.options.key,
|
|
self.options.value,
|
|
self.autocorrectBlur,
|
|
autocorrectCallback
|
|
) : self.options.autocorrect(
|
|
self.options.value,
|
|
self.autocorrectBlur,
|
|
autocorrectCallback
|
|
)) : autocorrectCallback(autocorrect(self.options.value));
|
|
}
|
|
|
|
function autovalidateFunction(value) {
|
|
var length = value.length;
|
|
return $.map(value.toLowerCase().split(''), function(v, i) {
|
|
if (new RegExp(self.options.autocorrect)(v)) {
|
|
return v;
|
|
} else {
|
|
return null;
|
|
}
|
|
}).join('');
|
|
}
|
|
|
|
*/
|
|
|
|
function blur() {
|
|
Ox.print('blur')
|
|
that.loseFocus();
|
|
//that.removeClass('OxFocus');
|
|
self.options.value = self.$input.val();
|
|
self.options.autovalidate && autovalidate(true);
|
|
self.options.placeholder && setPlaceholder();
|
|
self.options.validate && validate();
|
|
if (self.bindKeyboard) {
|
|
$document.unbind('keydown', keypress);
|
|
$document.unbind('keypress', keypress);
|
|
}
|
|
}
|
|
|
|
function cancel() {
|
|
self.$input.blur();
|
|
}
|
|
|
|
function change() {
|
|
self.options.value = self.$input.val();
|
|
that.triggerEvent('change', {
|
|
value: self.options.value
|
|
});
|
|
}
|
|
|
|
function clear() {
|
|
// fixme: set to min, not zero
|
|
// fixme: make this work for password
|
|
var value = '';
|
|
if (self.options.type == 'float') {
|
|
value = '0.0';
|
|
} else if (self.options.type == 'integer') {
|
|
value = '0'
|
|
}
|
|
self.$input.val(value);
|
|
cursor(0, value.length);
|
|
}
|
|
|
|
function clickArrow(i) {
|
|
self.options.value = Ox.limit(
|
|
parseFloat(self.options.value) + (i == 0 ? -1 : 1) * self.options.arrowStep,
|
|
self.options.min,
|
|
self.options.max
|
|
).toString();
|
|
self.$input.val(self.options.value);//.focus();
|
|
}
|
|
|
|
function clickMenu(event, data) {
|
|
Ox.print('clickMenu', data);
|
|
self.options.value = data.title;
|
|
self.$input.val(self.options.value).focus();
|
|
that.gainFocus();
|
|
self.options.autocompleteSelectSubmit && submit();
|
|
}
|
|
|
|
function cursor(start, end) {
|
|
/*
|
|
cursor() returns [start, end]
|
|
cursor(start) sets start
|
|
cursor([start, end]) sets start and end
|
|
cursor(start, end) sets start and end
|
|
*/
|
|
var isArray = Ox.isArray(start);
|
|
if (arguments.length == 0) {
|
|
return [self.$input[0].selectionStart, self.$input[0].selectionEnd];
|
|
} else {
|
|
end = isArray ? start[1] : (end ? end : start);
|
|
start = isArray ? start[0] : start;
|
|
self.$input[0].setSelectionRange(start, end);
|
|
}
|
|
}
|
|
|
|
function deselectMenu() {
|
|
self.options.value = self.oldValue;
|
|
self.$input.val(self.options.value);
|
|
cursor(self.oldCursor);
|
|
}
|
|
|
|
function focus() {
|
|
Ox.print('focus()')
|
|
if (
|
|
that.hasClass('OxFocus') || // fixme: this is just a workaround, since for some reason, focus() gets called twice on focus
|
|
(self.$autocompleteMenu && self.$autocompleteMenu.is(':visible')) ||
|
|
(self.hasPasswordPlaceholder && self.$input.is(':visible'))
|
|
) {
|
|
return;
|
|
}
|
|
that.gainFocus();
|
|
self.options.placeholder && setPlaceholder();
|
|
if (self.bindKeyboard) {
|
|
Ox.print('binding...')
|
|
// fixme: different in webkit and firefox (?), see keyboard handler, need generic function
|
|
$document.keydown(keypress);
|
|
$document.keypress(keypress);
|
|
self.options.autocompleteSelect && setTimeout(autocomplete, 0); // fixme: why is the timeout needed?
|
|
}
|
|
}
|
|
|
|
function getInputWidth() {
|
|
return self.options.width - 14 -
|
|
(self.options.arrows ? 32 : 0) -
|
|
(self.options.clear ? 16 : 0) -
|
|
(self.options.label ? self.options.labelWidth : 0);
|
|
}
|
|
|
|
function keypress(event) {
|
|
var oldCursor = cursor(),
|
|
oldValue = self.options.value,
|
|
newValue = oldValue.substr(0, oldCursor[0] - 1),
|
|
hasDeletedSelectedEnd = (event.keyCode == 8 || event.keyCode == 46) &&
|
|
oldCursor[0] < oldCursor[1] && oldCursor[1] == oldValue.length;
|
|
Ox.print('keypress', event.keyCode)
|
|
if (event.keyCode != 9 && event.keyCode != 13 && event.keyCode != 27) { // fixme: can't 13 and 27 return false?
|
|
setTimeout(function() { // wait for val to be set
|
|
var value = self.$input.val();
|
|
if (self.options.autocompleteReplaceCorrect && hasDeletedSelectedEnd) {
|
|
Ox.print(value, '->', newValue);
|
|
value = newValue; // value.substr(0, value.length - 1);
|
|
self.$input.val(value);
|
|
}
|
|
if (value != self.options.value) {
|
|
self.options.value = value;
|
|
self.options.autocomplete && autocomplete(oldValue, oldCursor);
|
|
self.options.autovalidate && autovalidate(oldValue, oldCursor);
|
|
}
|
|
}, 0);
|
|
}
|
|
if ((event.keyCode == 38 || event.keyCode == 40) && self.options.autocompleteSelect && self.$autocompleteMenu.is(':visible')) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function selectMenu(event, data) {
|
|
var pos = cursor();
|
|
Ox.print('selectMenu', pos)
|
|
self.options.value = data.title
|
|
self.$input.val(self.options.value);
|
|
cursor(pos[0], self.options.value.length)
|
|
}
|
|
|
|
function setPlaceholder() {
|
|
if (self.options.placeholder) {
|
|
if (that.hasClass('OxFocus')) {
|
|
if (self.options.value === '') {
|
|
if (self.options.type == 'password') {
|
|
self.$placeholder.hide();
|
|
self.$input.show().focus();
|
|
} else {
|
|
self.$input
|
|
.removeClass('OxPlaceholder')
|
|
.val('');
|
|
}
|
|
}
|
|
} else {
|
|
if (self.options.value === '') {
|
|
if (self.options.type == 'password') {
|
|
self.$input.hide();
|
|
self.$placeholder.show();
|
|
} else {
|
|
self.$input
|
|
.addClass('OxPlaceholder')
|
|
.val(self.options.placeholder)
|
|
}
|
|
} else {
|
|
self.$input
|
|
.removeClass('OxPlaceholder')
|
|
.val(self.options.value)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function setWidth() {
|
|
|
|
}
|
|
|
|
function submit() {
|
|
self.$input.blur();
|
|
that.triggerEvent('submit', {
|
|
value: self.options.value
|
|
});
|
|
}
|
|
|
|
function validate() {
|
|
self.options.validate(self.options.value, function(data) {
|
|
that.triggerEvent('validate', data);
|
|
});
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
var inputWidth, val;
|
|
if (key == 'disabled') {
|
|
self.$input.attr({
|
|
disabled: value ? 'disabled' : ''
|
|
});
|
|
} else if (key == 'placeholder') {
|
|
setPlaceholder();
|
|
} else if (key == 'value') {
|
|
val = self.$input.val();
|
|
self.$input.val(value);
|
|
setPlaceholder();
|
|
} else if (key == 'width') {
|
|
inputWidth = getInputWidth();
|
|
self.$input.css({
|
|
width: inputWidth + 'px'
|
|
});
|
|
self.hasPasswordPlaceholder && self.$placeholder.css({
|
|
width: inputWidth + 'px'
|
|
});
|
|
}
|
|
};
|
|
|
|
that.focus = function() {
|
|
self.$input.focus();
|
|
cursor(0, self.$input.val().length);
|
|
};
|
|
|
|
that.value = function() {
|
|
return self.$input.val();
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.AutocorrectIntFunction = function(min, max, pad, year) {
|
|
var pad = pad || false,
|
|
year = year || false,
|
|
maxLength = max.toString().length,
|
|
ret = null,
|
|
values = [];
|
|
$.each(Ox.range(min, max + 1), function(i, v) {
|
|
values.push(v + '');
|
|
pad && v.toString().length < maxLength && values.push(Ox.pad(v, maxLength));
|
|
});
|
|
return function(value, blur, callback) {
|
|
var results;
|
|
if (year && value == '1') {
|
|
value = '1900';
|
|
} else {
|
|
results = Ox.find(values, value);
|
|
value = results[0].length == 1 && results[0][0].length < maxLength ?
|
|
(pad ? Ox.pad(results[0][0], maxLength) : results[0][0]) :
|
|
(results[0].length ? results[0][0] : null);
|
|
}
|
|
callback(value);
|
|
};
|
|
};
|
|
|
|
Ox.InputGroup = function(options, self) {
|
|
|
|
/***
|
|
Ox.InputGroup
|
|
Options:
|
|
Methods:
|
|
Events:
|
|
***/
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
id: '',
|
|
inputs: [],
|
|
separators: [],
|
|
width: 0
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxInputGroup')
|
|
.click(click);
|
|
|
|
if (self.options.width) {
|
|
setWidths();
|
|
} else {
|
|
self.options.width = getWidth();
|
|
}
|
|
that.css({
|
|
width: self.options.width + 'px'
|
|
});
|
|
|
|
$.extend(self, {
|
|
//$input: [],
|
|
$separator: []
|
|
});
|
|
|
|
$.each(self.options.separators, function(i, v) {
|
|
self.$separator[i] = new Ox.Label({
|
|
textAlign: 'center',
|
|
title: v.title,
|
|
width: v.width + 32
|
|
})
|
|
.addClass('OxSeparator')
|
|
.css({
|
|
marginLeft: (self.options.inputs[i].options('width') - (i == 0 ? 16 : 32)) + 'px'
|
|
})
|
|
.appendTo(that);
|
|
});
|
|
|
|
$.each(self.options.inputs, function(i, $input) {
|
|
$input.options({
|
|
id: self.options.id + Ox.toTitleCase($input.options('id')),
|
|
parent: that
|
|
})
|
|
.css({
|
|
marginLeft: -Ox.sum($.map(self.options.inputs, function(v_, i_) {
|
|
return i_ > i ? self.options.inputs[i_ - 1].options('width') +
|
|
self.options.separators[i_ - 1].width : (i_ == i ? 16 : 0);
|
|
})) + 'px'
|
|
})
|
|
.bindEvent({
|
|
change: change,
|
|
submit: change,
|
|
validate: validate
|
|
})
|
|
.appendTo(that);
|
|
});
|
|
|
|
function change(event, data) {
|
|
Ox.print('InputGroup change')
|
|
// fixme: would be good to pass a value here
|
|
that.triggerEvent('change');
|
|
}
|
|
|
|
function click(event) {
|
|
if ($(event.target).hasClass('OxSeparator')) {
|
|
self.options.inputs[0].focus();
|
|
}
|
|
}
|
|
|
|
function getWidth() {
|
|
return Ox.sum($.map(self.options.inputs, function(v, i) {
|
|
return v.options('width');
|
|
})) + Ox.sum($.map(self.options.separators, function(v, i) {
|
|
return v.width;
|
|
}));
|
|
}
|
|
|
|
function setWidths() {
|
|
var length = self.options.inputs.length,
|
|
inputWidths = Ox.divideInt(
|
|
self.options.width - Ox.sum($.map(self.options.separators, function(v, i) {
|
|
return v.width;
|
|
})), length
|
|
);
|
|
$.each(self.options.inputs, function(i, v) {
|
|
v.options({
|
|
width: inputWidths[1]
|
|
});
|
|
});
|
|
}
|
|
|
|
function validate(event, data) {
|
|
Ox.print('INPUTGROUP TRIGGER VALIDATE')
|
|
that.triggerEvent('validate', data);
|
|
}
|
|
|
|
// fixme: is this used?
|
|
that.getInputById = function(id) {
|
|
var input = null;
|
|
$.each(self.options.inputs, function(i, v) {
|
|
Ox.print(v, v.options('id'), id)
|
|
if (v.options('id') == self.options.id + Ox.toTitleCase(id)) {
|
|
input = v;
|
|
return false;
|
|
}
|
|
});
|
|
return input;
|
|
};
|
|
|
|
that.value = function() {
|
|
return $.map(self.options.inputs, function(input) {
|
|
var ret = null;
|
|
['checked', 'selected', 'value'].forEach(function(v) {
|
|
input[v] && (ret = input[v]());
|
|
});
|
|
return ret;
|
|
});
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.ColorInput = function(options, self) {
|
|
|
|
var self = $.extend(self || {}, {
|
|
options: $.extend({
|
|
id: '',
|
|
value: '0, 0, 0'
|
|
}, options)
|
|
}),
|
|
that;
|
|
|
|
self.values = self.options.value.split(', ');
|
|
self.$inputs = [];
|
|
$.each(['red', 'green', 'blue'], function(i, v) {
|
|
self.$inputs[i] = new Ox.Input({
|
|
id: v,
|
|
max: 255,
|
|
type: 'integer',
|
|
value: self.values[i],
|
|
width: 36
|
|
})
|
|
.bindEvent('autovalidate', change);
|
|
});
|
|
self.$inputs[3] = new Ox.Label({
|
|
id: 'color',
|
|
width: 36
|
|
})
|
|
.css({
|
|
background: 'rgb(' + self.options.value + ')'
|
|
});
|
|
self.$inputs[4] = new Ox.ColorPicker({
|
|
id: 'picker'
|
|
})
|
|
.bindEvent('change', function(event, data) {
|
|
Ox.print('change function called');
|
|
self.options.value = data.value;
|
|
self.values = data.value.split(', ');
|
|
$.each(Ox.range(3), function(i) {
|
|
self.$inputs[i].options({
|
|
value: self.values[i]
|
|
});
|
|
});
|
|
})
|
|
.options({
|
|
width: 16 // this is just a hack to make the InputGroup layout work
|
|
});
|
|
|
|
that = new Ox.InputGroup({
|
|
id: self.options.id,
|
|
inputs: self.$inputs,
|
|
separators: [
|
|
{title: ',', width: 8},
|
|
{title: ',', width: 8},
|
|
{title: '', width: 8},
|
|
{title: '', width: 8}
|
|
],
|
|
value: self.options.value // fixme: it'd be nicer if this would be taken care of by passing self
|
|
}, self)
|
|
.bindEvent('change', change);
|
|
|
|
function change() {
|
|
self.options.value = $.map(self.$inputs, function(v, i) {
|
|
return v.options('value');
|
|
}).join(', ');
|
|
self.$inputs[3].css({
|
|
background: 'rgb(' + self.options.value + ')'
|
|
});
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
options:
|
|
format: 'short'
|
|
value: date value
|
|
weekday: false
|
|
width: {
|
|
day: 32,
|
|
month: options.format == 'long' ? 80 : (options.format == 'medium' ? 40 : 32),
|
|
weekday: options.format == 'long' ? 80 : 40,
|
|
year: 48
|
|
}
|
|
*/
|
|
Ox.DateInput = function(options, self) {
|
|
|
|
var self = $.extend(self || {}, {
|
|
options: $.extend({
|
|
format: 'short',
|
|
value: Ox.formatDate(new Date(), '%F'),
|
|
weekday: false,
|
|
width: {
|
|
day: 32,
|
|
month: options.format == 'long' ? 80 : (options.format == 'medium' ? 40 : 32),
|
|
weekday: options.format == 'long' ? 80 : 40,
|
|
year: 48
|
|
}
|
|
}, options)
|
|
}),
|
|
that;
|
|
|
|
$.extend(self, {
|
|
date: new Date(self.options.value.replace(/-/g, '/')),
|
|
formats: {
|
|
day: '%d',
|
|
month: self.options.format == 'short' ? '%m' :
|
|
(self.options.format == 'medium' ? '%b' : '%B'),
|
|
weekday: self.options.format == 'long' ? '%A' : '%a',
|
|
year: '%Y'
|
|
},
|
|
months: self.options.format == 'long' ? Ox.MONTHS : $.map(Ox.MONTHS, function(v, i) {
|
|
return v.substr(0, 3);
|
|
}),
|
|
weekdays: self.options.format == 'long' ? Ox.WEEKDAYS : $.map(Ox.WEEKDAYS, function(v, i) {
|
|
return v.substr(0, 3);
|
|
})
|
|
});
|
|
|
|
self.$input = $.extend(self.options.weekday ? {
|
|
weekday: new Ox.Input({
|
|
autocomplete: self.weekdays,
|
|
autocompleteReplace: true,
|
|
autocompleteReplaceCorrect: true,
|
|
id: 'weekday',
|
|
value: Ox.formatDate(self.date, self.formats.weekday),
|
|
width: self.options.width.weekday
|
|
})
|
|
.bindEvent('autocomplete', changeWeekday),
|
|
} : {}, {
|
|
day: new Ox.Input({
|
|
autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth(
|
|
parseInt(Ox.formatDate(self.date, '%Y'), 10),
|
|
parseInt(Ox.formatDate(self.date, '%m'), 10)
|
|
) + 1), function(v, i) {
|
|
return self.options.format == 'short' ? Ox.pad(v, 2) : v.toString();
|
|
}),
|
|
autocompleteReplace: true,
|
|
autocompleteReplaceCorrect: true,
|
|
id: 'day',
|
|
value: Ox.formatDate(self.date, self.formats.day),
|
|
textAlign: 'right',
|
|
width: self.options.width.day
|
|
})
|
|
.bindEvent('autocomplete', changeDay),
|
|
month: new Ox.Input({
|
|
autocomplete: self.options.format == 'short' ? $.map(Ox.range(1, 13), function(v, i) {
|
|
return Ox.pad(v, 2);
|
|
}) : self.months,
|
|
autocompleteReplace: true,
|
|
autocompleteReplaceCorrect: true,
|
|
id: 'month',
|
|
value: Ox.formatDate(self.date, self.formats.month),
|
|
textAlign: self.options.format == 'short' ? 'right' : 'left',
|
|
width: self.options.width.month
|
|
})
|
|
.bindEvent('autocomplete', changeMonthOrYear),
|
|
year: new Ox.Input({
|
|
autocomplete: $.map($.merge(Ox.range(1900, 3000), Ox.range(1000, 1900)), function(v, i) {
|
|
return v.toString();
|
|
}),
|
|
autocompleteReplace: true,
|
|
autocompleteReplaceCorrect: true,
|
|
id: 'year',
|
|
value: Ox.formatDate(self.date, self.formats.year),
|
|
textAlign: 'right',
|
|
width: self.options.width.year
|
|
})
|
|
.bindEvent('autocomplete', changeMonthOrYear)
|
|
});
|
|
|
|
that = new Ox.InputGroup($.extend(self.options, {
|
|
id: self.options.id,
|
|
inputs: $.merge(self.options.weekday ? [
|
|
self.$input.weekday
|
|
] : [], self.options.format == 'short' ? [
|
|
self.$input.year, self.$input.month, self.$input.day
|
|
] : [
|
|
self.$input.month, self.$input.day, self.$input.year
|
|
]),
|
|
separators: $.merge(self.options.weekday ? [
|
|
{title: self.options.format == 'short' ? '' : ',', width: 8},
|
|
] : [], self.options.format == 'short' ? [
|
|
{title: '-', width: 8}, {title: '-', width: 8}
|
|
] : [
|
|
{title: '', width: 8}, {title: ',', width: 8}
|
|
]),
|
|
width: 0
|
|
}), self);
|
|
|
|
Ox.print('SELF', self)
|
|
|
|
function changeDay() {
|
|
self.options.weekday && self.$input.weekday.options({
|
|
value: Ox.formatDate(new Date([
|
|
self.$input.month.options('value'),
|
|
self.$input.day.options('value'),
|
|
self.$input.year.options('value')
|
|
].join(' ')), self.formats.weekday)
|
|
});
|
|
setValue();
|
|
}
|
|
|
|
function changeMonthOrYear() {
|
|
var day = self.$input.day.options('value'),
|
|
month = self.$input.month.options('value'),
|
|
year = self.$input.year.options('value'),
|
|
days = Ox.getDaysInMonth(year, self.options.format == 'short' ? parseInt(month, 10) : month);
|
|
day = day <= days ? day : days;
|
|
Ox.print(year, month, 'day days', day, days)
|
|
self.options.weekday && self.$input.weekday.options({
|
|
value: Ox.formatDate(new Date([month, day, year].join(' ')), self.formats.weekday)
|
|
});
|
|
self.$input.day.options({
|
|
autocomplete: $.map(Ox.range(1, days + 1), function(v, i) {
|
|
return self.options.format == 'short' ? Ox.pad(v, 2) : v.toString();
|
|
}),
|
|
value: self.options.format == 'short' ? Ox.pad(day, 2) : day.toString()
|
|
});
|
|
setValue();
|
|
}
|
|
|
|
function changeWeekday() {
|
|
var date = getDateInWeek(
|
|
self.$input.weekday.options('value'),
|
|
self.$input.month.options('value'),
|
|
self.$input.day.options('value'),
|
|
self.$input.year.options('value')
|
|
);
|
|
self.$input.month.options({value: date.month});
|
|
self.$input.day.options({
|
|
autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth(date.year, date.month) + 1), function(v, i) {
|
|
return self.options.format == 'short' ? Ox.pad(v, 2) : v.toString();
|
|
}),
|
|
value: date.day
|
|
});
|
|
self.$input.year.options({value: date.year});
|
|
setValue();
|
|
}
|
|
|
|
function getDateInWeek(weekday, month, day, year) {
|
|
Ox.print([month, day, year].join(' '))
|
|
var date = new Date([month, day, year].join(' '));
|
|
date = Ox.getDateInWeek(date, weekday);
|
|
return {
|
|
day: Ox.formatDate(date, self.formats.day),
|
|
month: Ox.formatDate(date, self.formats.month),
|
|
year: Ox.formatDate(date, self.formats.year)
|
|
};
|
|
}
|
|
|
|
function setValue() {
|
|
self.options.value = Ox.formatDate(new Date(self.options.format == 'short' ? [
|
|
self.$input.year.options('value'),
|
|
self.$input.month.options('value'),
|
|
self.$input.day.options('value')
|
|
].join('/') : [
|
|
self.$input.month.options('value'),
|
|
self.$input.day.options('value'),
|
|
self.$input.year.options('value')
|
|
].join(' ')), '%F');
|
|
}
|
|
|
|
/*
|
|
function normalize() {
|
|
var year = that.getInputById('year').options('value'),
|
|
month = that.getInputById('month').options('value'),
|
|
day = that.getInputById('day').options('value')
|
|
return {
|
|
year: year,
|
|
month: self.options.format == 'short' ? month :
|
|
Ox.pad((format == 'medium' ? Ox.WEEKDAYS.map(function(v, i) {
|
|
return v.substr(0, 3);
|
|
}) : Ox.WEEKDAYS).indexOf(month), 2),
|
|
day: Ox.pad(day, 2)
|
|
}
|
|
}
|
|
*/
|
|
|
|
/*
|
|
that.serialize = function() {
|
|
var normal = normalize();
|
|
return [normal.year, normal.month, normal.day].join('-');
|
|
}
|
|
*/
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.DateTimeInput = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
ampm: false,
|
|
format: 'short',
|
|
seconds: false,
|
|
value: Ox.formatDate(new Date(), '%F %T'),
|
|
weekday: false
|
|
})
|
|
.options(options || {});
|
|
|
|
self.values = self.options.value.split(' ');
|
|
Ox.print(self.values)
|
|
|
|
that = new Ox.InputGroup({
|
|
inputs: [
|
|
new Ox.DateInput({
|
|
format: self.options.format,
|
|
id: 'date',
|
|
value: self.values[0],
|
|
weekday: self.options.weekday
|
|
}),
|
|
new Ox.TimeInput({
|
|
ampm: self.options.ampm,
|
|
id: 'time',
|
|
value: self.values[1],
|
|
seconds: self.options.seconds
|
|
})
|
|
],
|
|
separators: [
|
|
{title: '', width: 8}
|
|
],
|
|
value: self.options.value
|
|
})
|
|
.bindEvent('change', setValue);
|
|
|
|
function setValue() {
|
|
self.options.value = [
|
|
self.options('inputs')[0].options('value'),
|
|
self.options('inputs')[1].options('value')
|
|
].join(' ');
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.PlaceInput = function(options, self) {
|
|
|
|
var self = $.extend(self || {}, {
|
|
options: $.extend({
|
|
id: '',
|
|
value: 'United States'
|
|
}, options)
|
|
}),
|
|
that;
|
|
|
|
that = new Ox.FormElementGroup({
|
|
id: self.options.id,
|
|
elements: [
|
|
new Ox.Input({
|
|
id: 'input',
|
|
value: self.options.value
|
|
}),
|
|
new Ox.PlacePicker({
|
|
id: 'picker',
|
|
overlap: 'left',
|
|
value: self.options.value
|
|
})
|
|
],
|
|
float: 'right'
|
|
}, self)
|
|
.bindEvent('change', change);
|
|
|
|
function change() {
|
|
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.TimeInput = function(options, self) {
|
|
|
|
// fixme: seconds get set even if options.seconds is false
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
ampm: false,
|
|
seconds: false,
|
|
milliseconds: false,
|
|
value: Ox.formatDate(new Date(), '%T'),
|
|
})
|
|
.options(options || {});
|
|
|
|
if (self.options.milliseconds) {
|
|
self.options.seconds = true;
|
|
if (self.options.value.indexOf('.') == -1) {
|
|
self.options.value += '.000';
|
|
}
|
|
}
|
|
|
|
self.date = getDate();
|
|
self.values = getValues();
|
|
|
|
self.$input = {
|
|
hours: Ox.Input({
|
|
autocomplete: $.map(self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24), function(v) {
|
|
return Ox.pad(v, 2);
|
|
}),
|
|
autocompleteReplace: true,
|
|
autocompleteReplaceCorrect: true,
|
|
id: 'hours',
|
|
textAlign: 'right',
|
|
value: self.values.hours,
|
|
width: 32
|
|
}),
|
|
minutes: Ox.Input({
|
|
autocomplete: $.map(Ox.range(0, 60), function(v) {
|
|
return Ox.pad(v, 2);
|
|
}),
|
|
autocompleteReplace: true,
|
|
autocompleteReplaceCorrect: true,
|
|
id: 'minutes',
|
|
textAlign: 'right',
|
|
value: self.values.minutes,
|
|
width: 32
|
|
}),
|
|
seconds: Ox.Input({
|
|
autocomplete: $.map(Ox.range(0, 60), function(v) {
|
|
return Ox.pad(v, 2);
|
|
}),
|
|
autocompleteReplace: true,
|
|
autocompleteReplaceCorrect: true,
|
|
id: 'seconds',
|
|
textAlign: 'right',
|
|
value: self.values.seconds,
|
|
width: 32
|
|
}),
|
|
milliseconds: Ox.Input({
|
|
autocomplete: $.map(Ox.range(0, 1000), function(v) {
|
|
return Ox.pad(v, 3);
|
|
}),
|
|
autocompleteReplace: true,
|
|
autocompleteReplaceCorrect: true,
|
|
id: 'milliseconds',
|
|
textAlign: 'right',
|
|
value: self.values.milliseconds,
|
|
width: 40
|
|
}),
|
|
ampm: Ox.Input({
|
|
autocomplete: ['AM', 'PM'],
|
|
autocompleteReplace: true,
|
|
autocompleteReplaceCorrect: true,
|
|
id: 'ampm',
|
|
value: self.values.ampm,
|
|
width: 32
|
|
})
|
|
};
|
|
|
|
that = new Ox.InputGroup($.extend(self.options, {
|
|
inputs: $.merge($.merge($.merge([
|
|
self.$input.hours,
|
|
self.$input.minutes,
|
|
], self.options.seconds ? [
|
|
self.$input.seconds
|
|
] : []), self.options.milliseconds ? [
|
|
self.$input.milliseconds
|
|
] : []), self.options.ampm ? [
|
|
self.$input.ampm
|
|
] : []),
|
|
separators: $.merge($.merge($.merge([
|
|
{title: ':', width: 8},
|
|
], self.options.seconds ? [
|
|
{title: ':', width: 8}
|
|
] : []), self.options.milliseconds ? [
|
|
{title: '.', width: 8}
|
|
] : []), self.options.ampm ? [
|
|
{title: '', width: 8}
|
|
] : []),
|
|
//width: self.options.width || 128
|
|
}), self)
|
|
.bindEvent('change', setValue);
|
|
|
|
setValue();
|
|
|
|
function getDate() {
|
|
return new Date('1970/01/01 ' + (
|
|
self.options.milliseconds ?
|
|
self.options.value.substr(0, self.options.value.length - 4) :
|
|
self.options.value
|
|
));
|
|
}
|
|
|
|
function getValues() {
|
|
self.date = getDate();
|
|
return {
|
|
ampm: Ox.formatDate(self.date, '%p'),
|
|
hours: Ox.formatDate(self.date, self.options.ampm ? '%I' : '%H'),
|
|
milliseconds: self.options.milliseconds ? self.options.value.substr(-3) : '000',
|
|
minutes: Ox.formatDate(self.date, '%M'),
|
|
seconds: Ox.formatDate(self.date, '%S')
|
|
};
|
|
}
|
|
|
|
function setValue() {
|
|
self.options.value = Ox.formatDate(new Date('1970/01/01 ' + [
|
|
self.$input.hours.options('value'),
|
|
self.$input.minutes.options('value'),
|
|
self.options.seconds ? self.$input.seconds.options('value') : '00'
|
|
].join(':') + (self.options.ampm ? ' ' + self.$input.ampm.options('value') : '')),
|
|
(self.options.seconds? '%T' : '%H:%M')) +
|
|
(self.options.milliseconds ? '.' + self.$input.milliseconds.options('value') : '');
|
|
Ox.print('SETVALUE', self.options.value);
|
|
}
|
|
|
|
function setValues() {
|
|
self.values = getValues();
|
|
$.each(self.$input, function(k, v) {
|
|
self.$input[k].options({
|
|
value: self.values[k]
|
|
});
|
|
});
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'value') {
|
|
setValues();
|
|
}
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.Label = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
disabled: false,
|
|
id: '',
|
|
overlap: 'none',
|
|
textAlign: 'left',
|
|
title: '',
|
|
width: 'auto'
|
|
})
|
|
.options(options)
|
|
.addClass(
|
|
'OxLabel' + (self.options.disabled ? ' OxDisabled' : '') +
|
|
(self.options.overlap != 'none' ?
|
|
' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '')
|
|
)
|
|
.css($.extend(self.options.width == 'auto' ? {} : {
|
|
width: (self.options.width - 14) + 'px'
|
|
}, {
|
|
textAlign: self.options.textAlign
|
|
}))
|
|
.html(self.options.title);
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'title') {
|
|
that.html(value);
|
|
}
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.OptionGroup = function(items, min, max, property) {
|
|
|
|
/*
|
|
to be used by ButtonGroup, CheckboxGroup, Select and Menu
|
|
*/
|
|
|
|
var property = property || 'checked'
|
|
length = items.length,
|
|
max = max == -1 ? length : max;
|
|
|
|
function getLastBefore(pos) {
|
|
// returns the position of the last checked item before position pos
|
|
var last = -1;
|
|
Ox.print(items, items.length, length, $.merge(
|
|
pos > 0 ? Ox.range(pos - 1, -1, -1) : [],
|
|
pos < items.length - 1 ? Ox.range(items.length - 1, pos, -1) : []
|
|
))
|
|
// fixme: why is length not == items.length here?
|
|
$.each($.merge(
|
|
pos > 0 ? Ox.range(pos - 1, -1, -1) : [],
|
|
pos < items.length - 1 ? Ox.range(items.length - 1, pos, -1) : []
|
|
), function(i, v) {
|
|
Ox.print(pos, v)
|
|
if (items[v][property]) {
|
|
last = v;
|
|
return false;
|
|
}
|
|
});
|
|
return last;
|
|
}
|
|
|
|
function getNumber() {
|
|
// returns the number of checked items
|
|
var num = 0;
|
|
$.each(items, function(i, item) {
|
|
if (item[property]) {
|
|
num++;
|
|
}
|
|
})
|
|
return num;
|
|
}
|
|
|
|
this[property] = function() {
|
|
// returns an array with the positions of all checked item
|
|
var checked = [];
|
|
$.each(items, function(i, item) {
|
|
if (item[property]) {
|
|
checked.push(i);
|
|
}
|
|
})
|
|
return checked;
|
|
};
|
|
|
|
this.init = function() {
|
|
var num = getNumber(),
|
|
count = 0;
|
|
//if (num < min || num > max) {
|
|
$.each(items, function(i, item) {
|
|
if (Ox.isUndefined(item[property])) {
|
|
item[property] = false;
|
|
}
|
|
if (item[property]) {
|
|
count++;
|
|
if (count > max) {
|
|
item[property] = false;
|
|
}
|
|
} else {
|
|
if (num < min) {
|
|
item[property] = true;
|
|
num++;
|
|
}
|
|
}
|
|
});
|
|
//}
|
|
return items;
|
|
};
|
|
|
|
this.toggle = function(pos) {
|
|
var last,
|
|
num = getNumber(),
|
|
toggled = [];
|
|
if (!items[pos][property]) { // check
|
|
if (num >= max) {
|
|
last = getLastBefore(pos);
|
|
items[last][property] = false;
|
|
toggled.push(last);
|
|
}
|
|
if (!items[pos][property]) {
|
|
items[pos][property] = true;
|
|
toggled.push(pos);
|
|
}
|
|
} else { // uncheck
|
|
if (num > min) {
|
|
items[pos][property] = false;
|
|
toggled.push(pos);
|
|
}
|
|
}
|
|
return toggled;
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
/**
|
|
options
|
|
arrows boolean if true, show arrows
|
|
arrowStep number step when clicking arrows
|
|
arrowSymbols array arrow symbols, like ['minus', 'plus']
|
|
max number maximum value
|
|
min number minimum value
|
|
orientation string 'horizontal' or 'vertical'
|
|
step number step between values
|
|
size number width or height, in px
|
|
thumbSize number minimum width or height of thumb, in px
|
|
thumbValue boolean if true, display value on thumb
|
|
trackGradient array colors
|
|
trackImages string or array one or multiple track background image URLs
|
|
trackStep number 0 (scroll here) or step when clicking track
|
|
value number initial value
|
|
valueNames array value names to display on thumb
|
|
*/
|
|
Ox.Range = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
arrows: false,
|
|
arrowStep: 1,
|
|
arrowSymbols: ['previous', 'next'],
|
|
max: 100,
|
|
min: 0,
|
|
orientation: 'horizontal',
|
|
step: 1,
|
|
size: 128,
|
|
thumbSize: 16,
|
|
thumbValue: false,
|
|
trackColors: [],
|
|
trackImages: [],
|
|
trackStep: 0,
|
|
value: 0,
|
|
valueNames: null,
|
|
})
|
|
.options($.extend(options, {
|
|
arrowStep: options.arrowStep ?
|
|
options.arrowStep : options.step,
|
|
trackImages: $.makeArray(options.trackImages || [])
|
|
}))
|
|
.addClass('OxRange')
|
|
.css({
|
|
width: self.options.size + 'px'
|
|
});
|
|
|
|
$.extend(self, {
|
|
trackColors: self.options.trackColors.length,
|
|
trackImages: self.options.trackImages.length,
|
|
trackSize: self.options.size - self.options.arrows * 32,
|
|
values: (self.options.max - self.options.min + self.options.step) /
|
|
self.options.step
|
|
});
|
|
$.extend(self, {
|
|
thumbSize: Math.max(self.trackSize / self.values, self.options.thumbSize),
|
|
trackImageWidths: self.trackImages == 1 ? [self.trackSize - 16] :
|
|
Ox.divideInt(self.trackSize - 2, self.trackImages)
|
|
});
|
|
$.extend(self, {
|
|
trackColorsStart: self.thumbSize / 2 / self.options.size,
|
|
trackColorsStep: (self.options.size - self.thumbSize) / (self.trackColors - 1) / self.options.size
|
|
});
|
|
|
|
if (self.options.arrows) {
|
|
self.$arrows = [];
|
|
$.each(Ox.range(0, 2), function(i) {
|
|
self.$arrows[i] = Ox.Button({
|
|
overlap: i == 0 ? 'right' : 'left',
|
|
title: self.options.arrowSymbols[i],
|
|
type: 'image'
|
|
})
|
|
.addClass('OxArrow')
|
|
.mousedown(function(e) {
|
|
clickArrow(e, i);
|
|
})
|
|
.appendTo(that.$element);
|
|
});
|
|
}
|
|
|
|
self.$track = $('<div>')
|
|
.addClass('OxTrack')
|
|
.css($.extend({
|
|
width: (self.trackSize - 2) + 'px'
|
|
}, self.trackImages == 1 ? {
|
|
background: 'rgb(0, 0, 0)'
|
|
} : {}))
|
|
.mousedown(clickTrack)
|
|
.appendTo(that.$element);
|
|
|
|
self.trackColors && setTrackColors();
|
|
|
|
if (self.trackImages) {
|
|
self.$trackImages = $('<div>')
|
|
.css({
|
|
width: self.trackSize + 'px',
|
|
marginRight: (-self.trackSize - 1) + 'px'
|
|
})
|
|
.appendTo(self.$track);
|
|
$.each(self.options.trackImages, function(i, v) {
|
|
Ox.print(self.trackImageWidths[i])
|
|
$('<img>')
|
|
.attr({
|
|
src: v
|
|
})
|
|
.addClass(i == 0 ? 'OxFirstChild' : '')
|
|
.addClass(i == self.trackImages - 1 ? 'OxLastChild' : '')
|
|
.css({
|
|
width: self.trackImageWidths[i] + 'px'
|
|
})
|
|
.mousedown(function(e) {
|
|
e.preventDefault(); // prevent drag
|
|
})
|
|
.appendTo(self.$trackImages);
|
|
//left += self.trackImageWidths[i];
|
|
});
|
|
}
|
|
|
|
self.$thumb = Ox.Button({
|
|
id: self.options.id + 'Thumb',
|
|
title: self.options.thumbValue ? (self.options.valueNames ?
|
|
self.options.valueNames[self.options.value] :
|
|
self.options.value) : '',
|
|
width: self.thumbSize
|
|
})
|
|
.addClass('OxThumb')
|
|
/*
|
|
.css({
|
|
border: '1px solid rgb(255, 255, 255)',
|
|
background: 'rgba(0, 0, 0, 0)'
|
|
})
|
|
*/
|
|
.appendTo(self.$track);
|
|
|
|
setThumb();
|
|
|
|
function clickArrow(e, i) {
|
|
// fixme: shift doesn't work, see menu scrolling
|
|
var interval,
|
|
timeout = setTimeout(function() {
|
|
interval = setInterval(function() {
|
|
setValue(self.options.value + self.options.arrowStep * (i == 0 ? -1 : 1));
|
|
}, 50);
|
|
}, 500);
|
|
setValue(self.options.value + self.options.arrowStep * (i == 0 ? -1 : 1) * (e.shiftKey ? 2 : 1), true);
|
|
$window.one('mouseup', function() {
|
|
clearInterval(interval);
|
|
clearTimeout(timeout);
|
|
});
|
|
}
|
|
|
|
function clickTrack(e) {
|
|
//Ox.Focus.focus();
|
|
var isThumb = $(e.target).hasClass('OxThumb'),
|
|
left = self.$track.offset().left,
|
|
offset = isThumb ? e.clientX - self.$thumb.offset().left - 8 /*self.thumbSize / 2*/ : 0;
|
|
setValue(val(e), !isThumb);
|
|
$window.mousemove(function(e) {
|
|
setValue(val(e));
|
|
});
|
|
$window.one('mouseup', function() {
|
|
$window.unbind('mousemove');
|
|
});
|
|
function val(e) {
|
|
return getVal(e.clientX - left - offset);
|
|
}
|
|
}
|
|
|
|
function getPx(val) {
|
|
var pxPerVal = (self.trackSize - self.thumbSize) /
|
|
(self.options.max - self.options.min);
|
|
return Math.ceil((val - self.options.min) * pxPerVal);
|
|
}
|
|
|
|
/*
|
|
function getTime(oldValue, newValue) {
|
|
return self.animationTime * Math.abs(oldValue - newValue) / (self.options.max - self.options.min);
|
|
}
|
|
*/
|
|
|
|
function getVal(px) {
|
|
var px = self.trackSize / self.values >= 16 ? px : px - 8,
|
|
valPerPx = (self.options.max - self.options.min) /
|
|
(self.trackSize - self.thumbSize);
|
|
return Ox.limit(self.options.min +
|
|
Math.floor(px * valPerPx / self.options.step) * self.options.step,
|
|
self.options.min, self.options.max);
|
|
}
|
|
|
|
function setThumb(animate) {
|
|
self.$thumb.stop().animate({
|
|
marginLeft: (getPx(self.options.value) - 1) + 'px',
|
|
//width: self.thumbSize + 'px'
|
|
}, animate ? 200 : 0, function() {
|
|
if (self.options.thumbValue) {
|
|
self.$thumb.options({
|
|
title: self.options.valueNames ?
|
|
self.options.valueNames[self.options.value] :
|
|
self.options.value
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function setTrackColors() {
|
|
self.$track.css({
|
|
backgroundImage: $.browser.mozilla ?
|
|
('-moz-linear-gradient(left, ' +
|
|
self.options.trackColors[0] + ' 0%, ' + $.map(self.options.trackColors, function(v, i) {
|
|
return v + ' ' + ((self.trackColorsStart + self.trackColorsStep * i) * 100) + '%';
|
|
}).join(', ') + ', ' + self.options.trackColors[self.trackColors - 1] + ' 100%)') :
|
|
('-webkit-gradient(linear, left top, right top, color-stop(0, ' +
|
|
self.options.trackColors[0] + '), ' + $.map(self.options.trackColors, function(v, i) {
|
|
return 'color-stop(' + (self.trackColorsStart + self.trackColorsStep * i) + ', ' + v + ')';
|
|
}).join(', ') + ', color-stop(1, ' + self.options.trackColors[self.trackColors - 1] + '))')
|
|
});
|
|
}
|
|
|
|
function setValue(value, animate) {
|
|
var value = Ox.limit(value, self.options.min, self.options.max);
|
|
if (value != self.options.value) {
|
|
//time = getTime(self.options.value, value);
|
|
self.options.value = value;
|
|
setThumb(animate);
|
|
that.triggerEvent('change', {
|
|
value: value
|
|
});
|
|
}
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'trackColors') {
|
|
setTrackColors();
|
|
} else if (key == 'value') {
|
|
setThumb();
|
|
}
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.Select = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self) // fixme: do we use 'div', or {}, or '', by default?
|
|
.defaults({
|
|
id: '',
|
|
items: [],
|
|
max: 1,
|
|
min: 1,
|
|
overlap: 'none', // can be none, left or right
|
|
selectable: true,
|
|
size: 'medium',
|
|
title: '',
|
|
type: 'text', // can be 'text' or 'image'
|
|
width: 'auto'
|
|
})
|
|
.options(options)
|
|
.addClass(
|
|
'OxSelect Ox' + Ox.toTitleCase(self.options.size) +
|
|
(self.options.overlap == 'none' ? '' : ' OxOverlap' +
|
|
Ox.toTitleCase(self.options.overlap))
|
|
)
|
|
.css(self.options.width == 'auto' ? {} : {
|
|
width: self.options.width + 'px'
|
|
})
|
|
.bindEvent({
|
|
key_escape: loseFocus,
|
|
key_down: showMenu
|
|
});
|
|
|
|
$.extend(self, {
|
|
buttonId: self.options.id + 'Button',
|
|
groupId: self.options.id + 'Group',
|
|
menuId: self.options.id + 'Menu'
|
|
});
|
|
|
|
if (self.options.selectable) {
|
|
self.optionGroup = new Ox.OptionGroup(
|
|
self.options.items,
|
|
self.options.min,
|
|
self.options.max
|
|
);
|
|
self.options.items = self.optionGroup.init();
|
|
self.checked = self.optionGroup.checked();
|
|
}
|
|
|
|
if (self.options.type == 'text') {
|
|
self.$title = $('<div>')
|
|
.addClass('OxTitle')
|
|
.css({
|
|
width: (self.options.width - 22) + 'px'
|
|
})
|
|
.html(
|
|
self.options.title ? self.options.title :
|
|
self.options.items[self.checked[0]].title
|
|
)
|
|
.click(showMenu)
|
|
.appendTo(that.$element);
|
|
}
|
|
|
|
self.$button = new Ox.Button({
|
|
id: self.buttonId,
|
|
style: 'symbol',
|
|
title: 'select',
|
|
type: 'image'
|
|
})
|
|
.bindEvent('click', showMenu)
|
|
.appendTo(that);
|
|
|
|
self.$menu = new Ox.Menu({
|
|
element: self.$title || self.$button,
|
|
id: self.menuId,
|
|
items: [self.options.selectable ? {
|
|
group: self.groupId,
|
|
items: self.options.items,
|
|
max: self.options.max,
|
|
min: self.options.min
|
|
} : self.options.items],
|
|
side: 'bottom',
|
|
size: self.options.size
|
|
})
|
|
.bindEvent({
|
|
change: changeMenu,
|
|
click: clickMenu,
|
|
hide: hideMenu
|
|
});
|
|
|
|
self.options.type == 'image' && self.$menu.addClass('OxRight');
|
|
|
|
function clickMenu(event, data) {
|
|
Ox.print('%% clickMenu')
|
|
}
|
|
|
|
function changeMenu(event, data) {
|
|
Ox.print('clickMenu: ', self.options.id, data)
|
|
self.checked = self.optionGroup.checked();
|
|
self.$title && self.$title.html(
|
|
self.options.title ? self.options.title :
|
|
data.checked[0].title
|
|
);
|
|
that.triggerEvent('change', {
|
|
selected: data.checked
|
|
});
|
|
}
|
|
|
|
function hideMenu() {
|
|
Ox.print('%% hideMenu that', that, 'self', self)
|
|
that.removeClass('OxSelected');
|
|
// self.$button.removeClass('OxSelected');
|
|
Ox.print('%% hideMenu end')
|
|
}
|
|
|
|
function loseFocus() {
|
|
that.loseFocus();
|
|
}
|
|
|
|
function showMenu() {
|
|
that.gainFocus();
|
|
that.addClass('OxSelected');
|
|
self.$menu.showMenu();
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
|
|
};
|
|
|
|
that.selected = function() {
|
|
return $.map(/*self.checked*/self.optionGroup.checked(), function(v, i) {
|
|
return {
|
|
id: self.options.items[i].id,
|
|
title: self.options.items[i].title
|
|
};
|
|
});
|
|
};
|
|
|
|
that.selectItem = function(id) {
|
|
Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title)
|
|
self.options.type == 'text' && self.$title.html(
|
|
Ox.getObjectById(self.options.items, id).title[0] // fixme: title should not have become an array
|
|
);
|
|
self.$menu.checkItem(id);
|
|
self.checked = self.optionGroup.checked();
|
|
};
|
|
|
|
/*
|
|
that.width = function(val) {
|
|
// fixme: silly hack, and won't work for css() ... remove!
|
|
that.$element.width(val + 16);
|
|
that.$button.width(val);
|
|
//that.$symbol.width(val);
|
|
return that;
|
|
};
|
|
*/
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.FormElementGroup = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
id: '',
|
|
elements: [],
|
|
float: 'left',
|
|
separators: [],
|
|
width: 0
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxInputGroup');
|
|
|
|
$.each(self.options.float == 'left' ? self.options.elements : self.options.elements.reverse(), function(i, $element) {
|
|
$element.css({
|
|
float: self.options.float // fixme: make this a class
|
|
})
|
|
.bindEvent({
|
|
validate: function(event, data) {
|
|
that.triggerEvent({
|
|
validate: data
|
|
});
|
|
}
|
|
})
|
|
.appendTo(that);
|
|
});
|
|
|
|
/*
|
|
if (self.options.width) {
|
|
setWidths();
|
|
} else {
|
|
self.options.width = getWidth();
|
|
}
|
|
that.css({
|
|
width: self.options.width + 'px'
|
|
});
|
|
*/
|
|
|
|
function getWidth() {
|
|
|
|
}
|
|
|
|
function setWidth() {
|
|
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'trackColors') {
|
|
|
|
}
|
|
}
|
|
|
|
that.value = function() {
|
|
return $.map(self.options.elements, function(input) {
|
|
var ret = null;
|
|
['checked', 'selected', 'value'].forEach(function(v) {
|
|
input[v] && (ret = input[v]());
|
|
});
|
|
return ret;
|
|
});
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.Picker = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
element: null,
|
|
elementHeight: 128,
|
|
elementWidth: 256,
|
|
id: '',
|
|
overlap: 'none'
|
|
})
|
|
.options(options || {});
|
|
|
|
self.$selectButton = new Ox.Button({
|
|
overlap: self.options.overlap,
|
|
title: 'select',
|
|
type: 'image'
|
|
})
|
|
.click(showMenu)
|
|
.appendTo(that);
|
|
|
|
self.$menu = new Ox.Element('div')
|
|
.addClass('OxPicker')
|
|
.css({
|
|
width: self.options.elementWidth + 'px',
|
|
height: (self.options.elementHeight + 24) + 'px'
|
|
});
|
|
|
|
self.options.element
|
|
.css({
|
|
width: self.options.elementWidth + 'px',
|
|
height: self.options.elementHeight + 'px'
|
|
})
|
|
.appendTo(self.$menu);
|
|
|
|
self.$bar = new Ox.Bar({
|
|
orientation: 'horizontal',
|
|
size: 24
|
|
})
|
|
.appendTo(self.$menu);
|
|
|
|
that.$label = new Ox.Label({
|
|
width: self.options.elementWidth - 60
|
|
})
|
|
.appendTo(self.$bar);
|
|
|
|
self.$doneButton = new Ox.Button({
|
|
title: 'Done',
|
|
width: 48
|
|
})
|
|
.click(hideMenu)
|
|
.appendTo(self.$bar);
|
|
|
|
self.$layer = $('<div>')
|
|
.addClass('OxLayer')
|
|
.click(hideMenu);
|
|
|
|
function hideMenu() {
|
|
self.$menu.detach();
|
|
self.$layer.detach();
|
|
self.$selectButton
|
|
.removeClass('OxSelected')
|
|
.css({
|
|
MozBorderRadius: '8px',
|
|
WebkitBorderRadius: '8px'
|
|
});
|
|
that.triggerEvent('hide');
|
|
};
|
|
|
|
function showMenu() {
|
|
var offset = that.offset(),
|
|
left = offset.left,
|
|
top = offset.top + 15;
|
|
self.$selectButton
|
|
.addClass('OxSelected')
|
|
.css({
|
|
MozBorderRadius: '8px 8px 0 0',
|
|
WebkitBorderRadius: '8px 8px 0 0'
|
|
});
|
|
self.$layer.appendTo($body);
|
|
self.$menu
|
|
.css({
|
|
left: left + 'px',
|
|
top: top + 'px'
|
|
})
|
|
.appendTo($body);
|
|
that.triggerEvent('show');
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.ColorPicker = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
id: '',
|
|
value: '0, 0, 0'
|
|
})
|
|
.options(options || {});
|
|
|
|
Ox.print(self)
|
|
self.$ranges = [];
|
|
self.rgb = ['red', 'green', 'blue'];
|
|
self.values = self.options.value.split(', ');
|
|
|
|
$.each(Ox.range(3), function(i) {
|
|
self.$ranges[i] = new Ox.Range({
|
|
arrows: true,
|
|
id: self.options.id + Ox.toTitleCase(self.rgb[i]),
|
|
max: 255,
|
|
size: 328, // 256 + 16 + 40 + 16
|
|
thumbSize: 40,
|
|
thumbValue: true,
|
|
trackColors: getColors(i),
|
|
value: self.values[i]
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
top: (i * 15) + 'px'
|
|
})
|
|
.bindEvent('change', function(event, data) {
|
|
change(i, data.value);
|
|
})
|
|
.appendTo(that);
|
|
// fixme: make self.$ranges[i].children() work
|
|
if (i == 0) {
|
|
self.$ranges[i].$element.children('input.OxOverlapRight').css({
|
|
MozBorderRadius: 0,
|
|
WebkitBorderRadius: 0
|
|
});
|
|
self.$ranges[i].$element.children('input.OxOverlapLeft').css({
|
|
MozBorderRadius: '0 8px 0 0',
|
|
WebkitBorderRadius: '0 8px 0 0'
|
|
});
|
|
} else {
|
|
self.$ranges[i].$element.children('input').css({
|
|
MozBorderRadius: 0,
|
|
WebkitBorderRadius: 0
|
|
});
|
|
}
|
|
});
|
|
|
|
that = new Ox.Picker({
|
|
element: that,
|
|
elementHeight: 46,
|
|
elementWidth: 328,
|
|
id: self.options.id
|
|
});
|
|
|
|
function change(index, value) {
|
|
self.values[index] = value;
|
|
self.options.value = self.values.join(', ');
|
|
that.$label.css({
|
|
background: 'rgb(' + self.options.value + ')'
|
|
});
|
|
$.each(Ox.range(3), function(i) {
|
|
if (i != index) {
|
|
self.$ranges[i].options({
|
|
trackColors: getColors(i)
|
|
});
|
|
}
|
|
});
|
|
that.triggerEvent('change', {
|
|
value: self.options.value
|
|
});
|
|
}
|
|
|
|
function getColors(index) {
|
|
return [
|
|
'rgb(' + $.map(Ox.range(3), function(v) {
|
|
return v == index ? 0 : self.values[v];
|
|
}).join(', ') + ')',
|
|
'rgb(' + $.map(Ox.range(3), function(v) {
|
|
return v == index ? 255 : self.values[v];
|
|
}).join(', ') + ')'
|
|
]
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.PlacePicker = function(options, self) {
|
|
|
|
var self = $.extend(self || {}, {
|
|
options: $.extend({
|
|
id: '',
|
|
value: 'United States'
|
|
}, options)
|
|
}),
|
|
that;
|
|
|
|
self.$element = new Ox.Element('div')
|
|
.css({
|
|
width: '256px',
|
|
height: '192px'
|
|
})
|
|
.append(
|
|
self.$topBar = new Ox.Bar({
|
|
size: 16
|
|
})
|
|
.css({
|
|
MozBorderRadius: '0 8px 0 0',
|
|
WebkitBorderRadius: '0 8px 0 0'
|
|
})
|
|
.append(
|
|
self.$input = new Ox.Input({
|
|
clear: true,
|
|
id: self.options.id + 'Input',
|
|
placeholder: 'Find',
|
|
width: 256
|
|
})
|
|
.bindEvent('submit', findPlace)
|
|
)
|
|
)
|
|
.append(
|
|
self.$container = new Ox.Element('div')
|
|
.css({
|
|
width: '256px',
|
|
height: '160px'
|
|
})
|
|
)
|
|
.append(
|
|
self.$bottomBar = new Ox.Bar({
|
|
size: 16
|
|
})
|
|
.append(
|
|
self.$range = new Ox.Range({
|
|
arrows: true,
|
|
id: self.options.id + 'Range',
|
|
max: 22,
|
|
size: 256,
|
|
thumbSize: 32,
|
|
thumbValue: true
|
|
})
|
|
.bindEvent('change', changeZoom)
|
|
)
|
|
);
|
|
|
|
self.$input.$element.children('input[type=text]').css({
|
|
width: '230px',
|
|
paddingLeft: '2px',
|
|
MozBorderRadius: '0 8px 8px 0',
|
|
WebkitBorderRadius: '0 8px 8px 0'
|
|
});
|
|
self.$input.$element.children('input[type=image]').css({
|
|
MozBorderRadius: '0 8px 0 0',
|
|
WebkitBorderRadius: '0 8px 0 0'
|
|
});
|
|
self.$range.$element.children('input').css({
|
|
MozBorderRadius: 0,
|
|
WebkitBorderRadius: 0
|
|
});
|
|
|
|
that = new Ox.Picker({
|
|
element: self.$element,
|
|
elementHeight: 192,
|
|
elementWidth: 256,
|
|
id: self.options.id,
|
|
overlap: self.options.overlap,
|
|
value: self.options.value
|
|
}, self)
|
|
.bindEvent('show', showPicker);
|
|
|
|
that.$label.bind('click', clickLabel)
|
|
|
|
self.map = false;
|
|
|
|
function changeZoom(event, data) {
|
|
Ox.print('changeZoom')
|
|
self.$map.zoom(data.value);
|
|
}
|
|
|
|
function clickLabel() {
|
|
var name = that.$label.html();
|
|
if (name) {
|
|
self.$input.options({
|
|
value: name
|
|
})
|
|
.triggerEvent('submit', {
|
|
value: name
|
|
});
|
|
}
|
|
}
|
|
|
|
function findPlace(event, data) {
|
|
Ox.print('findPlace', data);
|
|
self.$map.find(data.value, function(place) {
|
|
place && that.$label.html(place.geoname);
|
|
})
|
|
}
|
|
|
|
function onSelect(event, data) {
|
|
that.$label.html(data.geoname);
|
|
}
|
|
|
|
function onZoom(event, data) {
|
|
self.$range.options({
|
|
value: data.value
|
|
});
|
|
}
|
|
|
|
function showPicker() {
|
|
if (!self.map) {
|
|
self.$map = new Ox.Map({
|
|
id: self.options.id + 'Map',
|
|
places: [self.options.value]
|
|
})
|
|
.css({
|
|
width: '256px',
|
|
height: '160px'
|
|
})
|
|
.bindEvent({
|
|
select: onSelect,
|
|
zoom: onZoom
|
|
})
|
|
.appendTo(self.$container);
|
|
self.map = true;
|
|
}
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
delete below
|
|
*/
|
|
|
|
Ox.Input_ = function(options, self) {
|
|
|
|
/*
|
|
options:
|
|
clear boolean, clear button, or not
|
|
disabled boolean, disabled, or not
|
|
height height (px), if type is 'textarea'
|
|
id
|
|
label string, or
|
|
array [{ id, title, checked }] (selectable label) or
|
|
array [{ id, label: [{ id, title, checked }], width }] (multiple selectable labels)
|
|
label and placeholder are mutually exclusive
|
|
labelWidth integer (px)
|
|
placeholder string, or
|
|
array [{ id, title, checked }] (selectable placeholder)
|
|
label and placeholder are mutually exclusive
|
|
separator string, or
|
|
array of strings
|
|
to separate multiple values
|
|
separatorWidth integer (px), or
|
|
array of integers
|
|
serialize function
|
|
size 'large', 'medium' or 'small'
|
|
type 'password', 'select' or 'text'
|
|
unit string, or
|
|
array [{ id, title, checked }] (selectable unit)
|
|
unitWidth integer (px)
|
|
value string, or
|
|
array [{ id, value, width }] (multiple values)
|
|
width integer (px)
|
|
methods:
|
|
events:
|
|
*/
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
autocomplete: null,
|
|
autocorrect: null,
|
|
autosuggest: null,
|
|
autosuggestHighlight: false,
|
|
autosuggestSubmit: false,
|
|
autovalidate: null,
|
|
autovalidateName: 'Value',
|
|
clear: false,
|
|
disabled: false,
|
|
height: 128,
|
|
id: '',
|
|
key: '',
|
|
label: '',
|
|
labelWidth: 64,
|
|
placeholder: '',
|
|
separator: '',
|
|
separatorWidth: 16,
|
|
serialize: null,
|
|
size: 'medium',
|
|
type: 'text',
|
|
unit: '',
|
|
unitWidth: 64,
|
|
value: '',
|
|
width: 128
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxInput Ox' + Ox.toTitleCase(self.options.size))
|
|
.css({
|
|
width: self.options.width + 'px'
|
|
});
|
|
|
|
$.extend(self, {
|
|
clearWidth: 16,
|
|
hasMultipleKeys: Ox.isArray(self.options.label) && 'label' in self.options.label[0],
|
|
hasMultipleValues: Ox.isArray(self.options.value) &&
|
|
(self.options.type != 'select' || 'items' in self.options.value[0]),
|
|
hasSelectableKeys: Ox.isArray(self.options.label) || Ox.isArray(self.options.placeholder),
|
|
hasSelectableUnits: Ox.isArray(self.options.unit),
|
|
keyName: self.options.label ? 'label' : (self.options.placeholder ? 'placeholder' : ''),
|
|
placeholderWidth: 16,
|
|
selectedKey: [0], // fixme: only set on demand?
|
|
selectedValue: 0,
|
|
selectedUnit: 0,
|
|
/* valid: autovalidateCall(true) */
|
|
});
|
|
|
|
$.each(['autocomplete', 'autocorrect', 'autosuggest', 'autovalidate'], function(i, v) {
|
|
//if (!Ox.isFunction(self.options[v])) {
|
|
self.options[v] = {
|
|
'': self.options[v]
|
|
};
|
|
//}
|
|
});
|
|
|
|
if (self.keyName && !self.hasMultipleKeys) {
|
|
self.options[self.keyName] = [$.extend({
|
|
id: '',
|
|
label: self.options[self.keyName],
|
|
}, self.keyName == 'label' ? {
|
|
id: '',
|
|
width: self.options.labelWidth
|
|
} : {})];
|
|
if (!self.hasSelectableKeys) {
|
|
self.options[self.keyName][0].label = [{
|
|
id: '',
|
|
title: self.options[self.keyName][0].label
|
|
}];
|
|
}
|
|
}
|
|
if (self.hasSelectableKeys) {
|
|
$.each(self.options[self.keyName], function(keyPos, key) {
|
|
if (key.width) {
|
|
self.options.labelWidth = (keyPos == 0 ? 0 : self.options.labelWidth) + key.width;
|
|
}
|
|
self.selectedKey[keyPos] = 0;
|
|
$.each(key, function(valuePos, value) {
|
|
if (value.checked) {
|
|
self.selectedKey[keyPos] = valuePos;
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
self.valueWidth = self.options.width -
|
|
(self.options.label ? self.options.labelWidth : 0) -
|
|
((self.options.placeholder && self.options.placeholder[0].label.length > 1) ? self.placeholderWidth : 0) -
|
|
(self.options.unit ? self.options.unitWidth : 0) -
|
|
(self.options.clear ? self.clearWidth : 0);
|
|
/*
|
|
if (self.hasMultipleValues) {
|
|
self.valueWidth -= Ox.isArray(self.options.separatorWidth) ?
|
|
Ox.sum(self.options.separatorWidth) :
|
|
(self.options.value.length - 1) * self.options.separatorWidth;
|
|
}
|
|
*/
|
|
Ox.print('self.hasMulVal', self.hasMultipleValues);
|
|
Ox.print('self.options.value', self.options.value)
|
|
if (!self.hasMultipleValues) {
|
|
if (self.options.type == 'select') {
|
|
self.options.value = [{
|
|
id: '',
|
|
items: self.options.value,
|
|
width: self.valueWidth
|
|
}];
|
|
} else if (self.options.type == 'range') {
|
|
self.options.value = [$.extend({
|
|
id: '',
|
|
size: self.valueWidth
|
|
}, self.options.value)];
|
|
} else {
|
|
self.options.value = [{
|
|
id: '',
|
|
value: self.options.value,
|
|
width: self.valueWidth
|
|
}]
|
|
}
|
|
}
|
|
Ox.print('self.options.value', self.options.value)
|
|
self.values = self.options.value.length;
|
|
Ox.print(self.options.id, 'self.values', self.values)
|
|
|
|
if (Ox.isString(self.options.separator)) {
|
|
self.options.separator = $.map(new Array(self.values - 1), function(v, i) {
|
|
return self.options.separator;
|
|
});
|
|
}
|
|
if (Ox.isNumber(self.options.separatorWidth)) {
|
|
self.options.separatorWidth = $.map(new Array(self.values - 1), function(v, i) {
|
|
return self.options.separatorWidth;
|
|
});
|
|
}
|
|
|
|
if (self.options.unit) {
|
|
if (self.hasSelectableUnits) {
|
|
$.each(self.options.unit, function(pos, unit) {
|
|
if (unit.checked) {
|
|
self.selectedUnit = pos;
|
|
return false;
|
|
}
|
|
});
|
|
} else {
|
|
self.options.unit = [{
|
|
id: '',
|
|
title: self.options.unit
|
|
}];
|
|
}
|
|
}
|
|
|
|
Ox.print('self', self);
|
|
|
|
if (self.keyName) {
|
|
that.$key = [];
|
|
$.each(self.options[self.keyName], function(keyPos, key) {
|
|
Ox.print('keyPos key', keyPos, key)
|
|
if (self.keyName == 'label' && key.label.length == 1) {
|
|
that.$key[keyPos] = new Ox.Label({
|
|
overlap: 'right',
|
|
title: key.label[0].title,
|
|
width: self.options.labelWidth
|
|
})
|
|
.css({
|
|
float: 'left'
|
|
})
|
|
.click(function() {
|
|
that.$input[0].focus();
|
|
})
|
|
.appendTo(that);
|
|
} else if (key.label.length > 1) {
|
|
Ox.print('key.length > 1')
|
|
self.selectKeyId = self.options.id + Ox.toTitleCase(self.keyName) +
|
|
(self.options[self.keyName].length == 1 ? '' : keyPos);
|
|
Ox.print('three', self.selectedKey, keyPos, self.selectedKey[keyPos]);
|
|
that.$key[keyPos] = new Ox.Select({
|
|
id: self.selectKeyId,
|
|
items: $.map(key.label, function(value, valuePos) {
|
|
return {
|
|
checked: valuePos == self.selectedKey[keyPos],
|
|
id: value.id,
|
|
group: self.selectKeyId, // fixme: same id, works here, but should be different
|
|
title: value.title
|
|
};
|
|
}),
|
|
overlap: 'right',
|
|
type: self.options.label ? 'text' : 'image',
|
|
width: self.options.label ? (self.options.label.length == 1 ? self.options.labelWidth : key.width) : self.placeholderWidth
|
|
})
|
|
.css({
|
|
float: 'left'
|
|
})
|
|
.appendTo(that);
|
|
that.bindEvent('change_' + self.selectKeyId, changeKey);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (self.options.clear) {
|
|
that.$clear = new Ox.Button({
|
|
overlap: 'left',
|
|
type: 'image',
|
|
value: 'clear'
|
|
})
|
|
.css({
|
|
float: 'right'
|
|
})
|
|
.click(clear)
|
|
.appendTo(that);
|
|
}
|
|
|
|
if (self.options.unit.length == 1) {
|
|
that.$unit = new Ox.Label({
|
|
overlap: 'left',
|
|
title: self.options.unit[0].title,
|
|
width: self.options.unitWidth
|
|
})
|
|
.css({
|
|
float: 'right'
|
|
})
|
|
.click(function() {
|
|
that.$input[0].focus();
|
|
})
|
|
.appendTo(that);
|
|
} else if (self.options.unit.length > 1) {
|
|
self.selectUnitId = self.options.id + 'Unit';
|
|
that.$unit = new Ox.Select({
|
|
id: self.selectUnitId,
|
|
items: $.map(self.options.unit, function(unit, i) {
|
|
Ox.print('unit', unit)
|
|
return {
|
|
checked: i == 0,
|
|
id: unit.id,
|
|
group: self.selectUnitId, // fixme: same id, works here, but should be different
|
|
title: unit.title
|
|
};
|
|
}),
|
|
overlap: 'left',
|
|
size: self.options.size,
|
|
width: self.options.unitWidth
|
|
})
|
|
.css({
|
|
float: 'right'
|
|
})
|
|
.appendTo(that);
|
|
}
|
|
|
|
if (self.values) {
|
|
that.$separator = [];
|
|
$.each(self.options.value, function(i, v) {
|
|
if (i < self.values - 1) {
|
|
that.$separator[i] = new Ox.Label({
|
|
textAlign: 'center',
|
|
title: self.options.separator[i],
|
|
width: self.options.separatorWidth[i] + 32
|
|
})
|
|
.css({
|
|
float: 'left',
|
|
marginLeft: (v.width - (i == 0 ? 16 : 32)) + 'px'
|
|
})
|
|
.click(function() {
|
|
that.$input[0].focus();
|
|
})
|
|
.appendTo(that);
|
|
}
|
|
});
|
|
}
|
|
that.$input = [];
|
|
//self.margin = 0;
|
|
$.each(self.options.value, function(i, v) {
|
|
Ox.print('o k i', self.options, self.keyName, i);
|
|
var id = self.keyName ? $.map(self.selectedKey, function(v, i) {
|
|
return self.options[self.keyName][i].id;
|
|
}).join('.') : '';
|
|
//self.margin -= (i == 0 ? 16 : self.options.value[i - 1].width)
|
|
Ox.print('v:', v, 'id:', id)
|
|
if (self.options.type == 'select') {
|
|
that.$input[i] = new Ox.Select({
|
|
id: v.id,
|
|
items: v.items,
|
|
width: v.width
|
|
}).
|
|
css({
|
|
float: 'left'
|
|
});
|
|
} else if (self.options.type == 'range') {
|
|
that.$input[i] = new Ox.Range(v)
|
|
.css({
|
|
float: 'left'
|
|
});
|
|
} else {
|
|
that.$input[i] = new Ox.InputElement({
|
|
autocomplete: self.options.autocomplete[id],
|
|
autocorrect: self.options.autocorrect[id],
|
|
autosuggest: self.options.autosuggest[id],
|
|
autosuggestHighlight: self.options.autosuggestHighlight,
|
|
autosuggestSubmit: self.options.autosuggestSubmit,
|
|
autovalidate: self.options.autovalidate[id],
|
|
autovalidateName: self.options.autovalidateName,
|
|
disabled: self.options.disabled,
|
|
height: self.options.height,
|
|
id: self.options.id + 'Input' + Ox.toTitleCase(v.id),
|
|
key: self.hasSelectableKeys ? self.options[self.keyName][0].label[self.selectedKey[0]].id : '',
|
|
parent: that,
|
|
placeholder: self.options.placeholder ? self.options.placeholder[0].label[0].title : '',
|
|
size: self.options.size,
|
|
type: self.options.type,
|
|
value: v.value,
|
|
width: v.width
|
|
});
|
|
}
|
|
that.$input[i]
|
|
.css($.extend({}, self.options.value.length > 1 ? {
|
|
float: 'left',
|
|
marginLeft: -Ox.sum($.map(self.options.value, function(v_, i_) {
|
|
return i_ > i ? self.options.value[i_ - 1].width + self.options.separatorWidth[i_ - 1] : (i_ == i ? 16 : 0);
|
|
}))
|
|
} : {}))
|
|
.appendTo(that);
|
|
});
|
|
|
|
//width(self.options.width);
|
|
|
|
function changeKey(event, data) {
|
|
Ox.print('changeKey', data);
|
|
if (data) { // fixme: necessary?
|
|
self.key = {
|
|
id: data.id,
|
|
title: data.value // fixme: should be data.title
|
|
};
|
|
that.$input[0].options({
|
|
key: data.id
|
|
});
|
|
}
|
|
if (self.options.label) {
|
|
//that.$label.html(self.option.title);
|
|
that.$input[0].focus();
|
|
//autocompleteCall();
|
|
} else {
|
|
that.$input[0].options({
|
|
placeholder: data.value // fixme: should be data.title
|
|
});
|
|
/*
|
|
if (that.$input.hasClass('OxPlaceholder')) {
|
|
that.$input.val(self.key.title);
|
|
//that.$input.focus();
|
|
} else {
|
|
that.$input.focus();
|
|
self.options.autosuggest && autosuggestCall();
|
|
}
|
|
*/
|
|
}
|
|
}
|
|
|
|
function changeUnit() {
|
|
that.$input[0].focus();
|
|
}
|
|
|
|
function clear() {
|
|
$.each(that.$input, function(i, v) {
|
|
v.val('');
|
|
});
|
|
that.$input[0].focus();
|
|
}
|
|
|
|
function height(value) {
|
|
var stop = 8 / value;
|
|
if (self.options.type == 'textarea') {
|
|
that.$element
|
|
.height(value)
|
|
.css({
|
|
background: '-moz-linear-gradient(top, rgb(224, 224, 224), rgb(208, 208, 208) ' + (stop * 100) + '%, rgb(208, 208, 208) ' + (100 - stop * 100) + '%, rgb(192, 192, 192))'
|
|
})
|
|
.css({
|
|
background: '-webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), color-stop(' + stop + ', rgb(208, 208, 208)), color-stop(' + (1 - stop) + ', rgb(208, 208, 208)), to(rgb(192, 192, 192)))'
|
|
});
|
|
that.$input
|
|
.height(value)
|
|
.css({
|
|
background: '-moz-linear-gradient(top, rgb(224, 224, 224), rgb(240, 240, 240) ' + (stop * 100) + '%, rgb(240, 240, 240) ' + (100 - stop * 100) + '%, rgb(255, 255, 255))'
|
|
})
|
|
.css({
|
|
background: '-webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), color-stop(' + stop + ', rgb(240, 240, 240)), color-stop(' + (1 - stop) + ', rgb(240, 240, 240)), to(rgb(255, 255, 255)))'
|
|
});
|
|
}
|
|
}
|
|
|
|
function selectUnit() {
|
|
self.$selectUnitMenu.show();
|
|
}
|
|
|
|
function submit() {
|
|
Ox.print('submit')
|
|
var value = that.$input.val();
|
|
that.$input.blur();
|
|
that.triggerEvent('submit', self.options.key ? {
|
|
key: self.options.key,
|
|
value: value
|
|
} : value);
|
|
}
|
|
|
|
function width(value) {
|
|
that.$element.width(value);
|
|
that.$input.width(
|
|
value - (self.options.type == 'textarea' ? 0 : 12) -
|
|
(self.options.label ? self.options.labelWidth : 0) -
|
|
(self.options.placeholder.length > 1 ? 16 : 0) -
|
|
(self.options.unit ? self.options.unitWidth : 0) -
|
|
(self.options.clear ? 16 : 0)
|
|
);
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'height') {
|
|
height(value);
|
|
} else if (key == 'width') {
|
|
width(value);
|
|
}
|
|
};
|
|
|
|
that.changeLabel = function(id) {
|
|
that.$key.html(Ox.getObjectById(self.options.label, id).title);
|
|
self.selectMenu.checkItem(id);
|
|
};
|
|
|
|
return that;
|
|
|
|
}
|
|
|
|
Ox.InputElement_ = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element(
|
|
options.type == 'textarea' ? 'textarea' : 'input', self
|
|
)
|
|
.defaults({
|
|
autocomplete: null,
|
|
autocorrect: null,
|
|
autosuggest: null,
|
|
autosuggestHighlight: false,
|
|
autosuggestSubmit: false,
|
|
autovalidate: null,
|
|
disabled: false,
|
|
height: 128,
|
|
id: '',
|
|
key: '',
|
|
parent: null,
|
|
placeholder: '',
|
|
size: 'medium',
|
|
type: 'text',
|
|
value: '',
|
|
width: 128
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxInput Ox' + Ox.toTitleCase(self.options.size) + (
|
|
(self.options.placeholder && self.options.value === '') ?
|
|
' OxPlaceholder' : ''
|
|
))
|
|
.attr(self.options.type == 'textarea' ? {} : {
|
|
type: self.options.type
|
|
})
|
|
.css({
|
|
float: 'left',
|
|
width: (self.options.width - 14) + 'px'
|
|
})
|
|
.val(
|
|
(self.options.placeholder && self.options.value === '') ?
|
|
self.options.placeholder : self.options.value
|
|
)
|
|
.blur(blur)
|
|
.change(change)
|
|
.focus(focus);
|
|
|
|
Ox.print('InputElement self.options', self.options)
|
|
|
|
self.bindKeyboard = self.options.autocomplete || self.options.autocorrect ||
|
|
self.options.autosuggest || self.options.autovalidate;
|
|
|
|
if (self.options.autosuggest) {
|
|
self.autosuggestId = self.options.id + 'Menu'; // fixme: we do this in other places ... are we doing it the same way? var name?
|
|
self.$autosuggestMenu = new Ox.Menu({
|
|
element: that.$element,
|
|
id: self.autosuggestId,
|
|
offset: {
|
|
left: 4,
|
|
top: 0
|
|
},
|
|
size: self.options.size
|
|
});
|
|
that.bindEvent('click_' + self.autosuggestId, clickMenu);
|
|
}
|
|
|
|
that.bindEvent($.extend(self.options.type == 'textarea' ? {} : {
|
|
key_enter: submit
|
|
}, {
|
|
key_escape: cancel
|
|
}));
|
|
|
|
function autocomplete(value) {
|
|
var value = value.toLowerCase(),
|
|
ret = '';
|
|
if (value !== '') {
|
|
$.each(self.options.autocomplete, function(i, v) {
|
|
if (v.toLowerCase().indexOf(value) == 0) {
|
|
ret = v;
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
return ret;
|
|
}
|
|
|
|
function autocompleteCall() {
|
|
var value = that.$element.val();
|
|
Ox.isFunction(self.options.autocomplete) ?
|
|
self.options.autocomplete(self.options.key ? {
|
|
key: self.options.key,
|
|
value: value
|
|
} : value, autocompleteCallback) :
|
|
autocompleteCallback(autocomplete(value));
|
|
}
|
|
|
|
function autocompleteCallback(value) {
|
|
var pos = cursor()[0];
|
|
if (value) {
|
|
that.$element.val(value);
|
|
cursor(pos, value.length);
|
|
}
|
|
}
|
|
|
|
function autocorrect(value) {
|
|
var length = value.length;
|
|
return $.map(value.toLowerCase().split(''), function(v, i) {
|
|
if (new RegExp(self.options.autocorrect)(v)) {
|
|
return v
|
|
} else {
|
|
return null;
|
|
}
|
|
}).join('');
|
|
}
|
|
|
|
function autocorrectCall(blur) {
|
|
var blur = blur || false,
|
|
value = that.$element.val(),
|
|
pos = cursor()[0];
|
|
Ox.isFunction(self.options.autocorrect) ?
|
|
self.options.autocorrect(value, blur, autocorrectCallback) :
|
|
autocorrectCallback(autocorrect(value), blue);
|
|
}
|
|
|
|
function autocorrectCallback(value, blur) {
|
|
var length = that.$element.val().length;
|
|
that.$element.val(self.options.value);
|
|
!blur && cursor(pos + value.length - length);
|
|
}
|
|
|
|
function autosuggest(value) {
|
|
var value = value.toLowerCase(),
|
|
values = [[], []];
|
|
if (value !== '') {
|
|
$.each(self.options.key ? self.options.autosuggest[self.options.key] : self.options.autosuggest, function(i, v) {
|
|
//Ox.print('v...', v)
|
|
var index = v.toLowerCase().indexOf(value);
|
|
index > -1 && values[index == 0 ? 0 : 1].push(v);
|
|
});
|
|
}
|
|
return $.merge(values[0], values[1]);
|
|
}
|
|
|
|
function autosuggestCall() {
|
|
var value = that.$element.val();
|
|
Ox.isFunction(self.options.autosuggest) ?
|
|
self.options.autosuggest(self.options.key ? {
|
|
key: self.options.key,
|
|
value: value
|
|
} : value, autosuggestCallback) :
|
|
autosuggestCallback(autosuggest(value));
|
|
}
|
|
|
|
function autosuggestCallback(values) {
|
|
var values = values || [],
|
|
selected = values.length == 1 ? 0 : -1,
|
|
value = that.$element.val().toLowerCase();
|
|
//Ox.print('values', values);
|
|
if (values.length) {
|
|
values = $.map(values, function(v, i) {
|
|
if (value == v.toLowerCase()) {
|
|
selected = i;
|
|
}
|
|
return {
|
|
id: v.toLowerCase().replace(/ /g, '_'), // fixme: need function to do lowercase, underscores etc?
|
|
title: self.options.autosuggestHighlight ? v.replace(
|
|
new RegExp('(' + value + ')', 'ig'),
|
|
'<span class="OxHighlight">$1</span>'
|
|
) : v
|
|
};
|
|
});
|
|
// self.selectMenu && self.selectMenu.hideMenu(); // fixme: need event
|
|
self.$autosuggestMenu.options({
|
|
items: values,
|
|
selected: selected
|
|
}).showMenu();
|
|
} else {
|
|
self.$autosuggestMenu.hideMenu();
|
|
}
|
|
}
|
|
|
|
function autovalidate(value) {
|
|
return {
|
|
valid: self.options.autovalidate(value) != null,
|
|
message: 'Invalid ' + self.options.name
|
|
};
|
|
}
|
|
|
|
function autovalidateCall(blur) {
|
|
var blur = blur || false,
|
|
value = that.$element.val();
|
|
if (value !== '') {
|
|
Ox.isFunction(self.options.autovalidate) ?
|
|
self.options.autovalidate(value, autovalidateCallback) :
|
|
autovalidateCallback(autovalidate(value), blur);
|
|
} else {
|
|
autovalidateCallback({
|
|
blur: blur,
|
|
valid: false,
|
|
message: 'Empty ' + self.options.name
|
|
});
|
|
}
|
|
}
|
|
|
|
function autovalidateCallback(data, blur) {
|
|
if (data.valid != self.valid) {
|
|
self.valid = data.valid;
|
|
that.triggerEvent('validate', $.extend(data, {
|
|
blur: blur
|
|
}));
|
|
}
|
|
}
|
|
|
|
function blur() {
|
|
if (!self.options.autosuggest || self.$autosuggestMenu.is(':hidden')) {
|
|
Ox.print('losing focus...')
|
|
that.loseFocus();
|
|
self.options.parent.removeClass('OxFocus');
|
|
self.options.autocorrect && autocorrectCall(true);
|
|
// self.options.autosuggest && self.$autosuggestMenu.hideMenu();
|
|
self.options.autovalidate && autovalidateCall(true);
|
|
if (self.options.placeholder && that.$element.val() === '') {
|
|
that.$element.addClass('OxPlaceholder').val(self.options.placeholder);
|
|
}
|
|
}
|
|
if (self.bindKeyboard) {
|
|
$document.unbind('keydown', keypress);
|
|
$document.unbind('keypress', keypress);
|
|
}
|
|
}
|
|
|
|
function cancel() {
|
|
that.$element.blur();
|
|
}
|
|
|
|
function change() {
|
|
|
|
}
|
|
|
|
function clear() {
|
|
that.$element.val('').focus();
|
|
}
|
|
|
|
function clickMenu(event, data) {
|
|
Ox.print('clickMenu', data);
|
|
that.$element.val(data.title);
|
|
//self.$autosuggestMenu.hideMenu();
|
|
self.options.autosuggestSubmit && submit();
|
|
}
|
|
|
|
function cursor(start, end) {
|
|
/*
|
|
cursor() returns [start, end]
|
|
cursor(start) sets start
|
|
cursor([start, end]) sets start and end
|
|
cursor(start, end) sets start and end
|
|
*/
|
|
var isArray = Ox.isArray(start);
|
|
if (arguments.length == 0) {
|
|
return [that.$element[0].selectionStart, that.$element[0].selectionEnd];
|
|
} else {
|
|
start = isArray ? start[0] : start;
|
|
end = isArray ? start[1] : (end ? end : start);
|
|
that.$element[0].setSelectionRange(start, end);
|
|
}
|
|
}
|
|
|
|
function focus() {
|
|
var val = that.$element.val();
|
|
that.gainFocus();
|
|
self.options.parent.addClass('OxFocus');
|
|
if (that.$element.hasClass('OxPlaceholder')) {
|
|
that.$element.val('').removeClass('OxPlaceholder');
|
|
}
|
|
if (self.bindKeyboard) {
|
|
// fixme: different in webkit and firefox (?), see keyboard handler, need generic function
|
|
$document.keydown(keypress);
|
|
$document.keypress(keypress);
|
|
Ox.print('calling autosuggest...')
|
|
self.options.autosuggest && setTimeout(autosuggestCall, 0); // fixme: why is the timeout needed?
|
|
}
|
|
}
|
|
|
|
function keypress(event) {
|
|
Ox.print('keyCode', event.keyCode)
|
|
if (event.keyCode != 9 && event.keyCode != 13 && event.keyCode != 27) { // fixme: can't 13 and 27 return false?
|
|
setTimeout(function() { // fixme: document what this timeout is for
|
|
var value = that.$element.val();
|
|
if (value != self.options.value) {
|
|
self.options.value = value;
|
|
self.options.autocomplete && autocompleteCall();
|
|
self.options.autocorrect && autocorrectCall();
|
|
self.options.autosuggest && autosuggestCall();
|
|
self.options.autovalidate && autovalidateCall();
|
|
}
|
|
}, 25);
|
|
}
|
|
}
|
|
|
|
function submit() {
|
|
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'placeholder') {
|
|
that.$element.hasClass('OxPlaceholder') && that.$element.val(value);
|
|
} else if (key == 'value') {
|
|
if (self.options.placeholder) {
|
|
if (value === '') {
|
|
that.$element.addClass('OxPlaceholder').val(self.options.placeholder);
|
|
} else {
|
|
that.$element.removeClass('OxPlaceholder');
|
|
}
|
|
}
|
|
change(); // fixme: keypress too
|
|
}
|
|
}
|
|
|
|
return that;
|
|
|
|
}
|
|
|
|
Ox.Range_ = function(options, self) {
|
|
|
|
/*
|
|
init
|
|
*/
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
animate: false,
|
|
arrows: false,
|
|
arrowStep: 1,
|
|
arrowSymbols: ['previous', 'next'],
|
|
max: 100,
|
|
min: 0,
|
|
orientation: 'horizontal',
|
|
step: 1,
|
|
size: 128,
|
|
thumbSize: 16,
|
|
thumbValue: false,
|
|
trackImages: [],
|
|
trackStep: 0,
|
|
value: 0,
|
|
valueNames: null
|
|
})
|
|
.options($.extend(options, {
|
|
arrowStep: options.arrowStep ?
|
|
options.arrowStep : options.step,
|
|
trackImages: $.makeArray(options.trackImages || [])
|
|
}))
|
|
.addClass('OxRange')
|
|
.css({
|
|
width: self.options.size + 'px'
|
|
});
|
|
|
|
// fixme: self. ... ?
|
|
var trackImages = self.options.trackImages.length,
|
|
values = (self.options.max - self.options.min + self.options.step) /
|
|
self.options.step;
|
|
|
|
/*
|
|
construct
|
|
*/
|
|
that.$element
|
|
.css({
|
|
width: self.options.size + 'px'
|
|
});
|
|
if (self.options.arrows) {
|
|
var $arrowDec = Ox.Button({
|
|
style: 'symbol',
|
|
type: 'image',
|
|
value: self.options.arrowSymbols[0]
|
|
})
|
|
.addClass('OxArrow')
|
|
.mousedown(mousedownArrow)
|
|
.click(clickArrowDec)
|
|
.appendTo(that.$element);
|
|
}
|
|
var $track = new Ox.Element()
|
|
.addClass('OxTrack')
|
|
.mousedown(clickTrack)
|
|
.appendTo(that.$element);
|
|
|
|
if (trackImages) {
|
|
var width = parseFloat(screen.width / trackImages),
|
|
$image = $('<canvas>')
|
|
.attr({
|
|
width: width * trackImages,
|
|
height: 14
|
|
})
|
|
.addClass('OxImage')
|
|
.appendTo($track.$element),
|
|
c = $image[0].getContext('2d');
|
|
c.mozImageSmoothingEnabled = false; // we may want to remove this later
|
|
$.each(self.options.trackImages, function(i, v) {
|
|
var left = 0;
|
|
$('<img/>')
|
|
.attr({
|
|
src: v
|
|
})
|
|
.load(function() {
|
|
c.drawImage(this, left, 0, self.trackImageWidth[i], 14);
|
|
});
|
|
left += self.trackImageWidth[i];
|
|
});
|
|
}
|
|
var $thumb = Ox.Button({})
|
|
.addClass('OxThumb')
|
|
.appendTo($track);
|
|
Ox.print('----')
|
|
if (self.options.arrows) {
|
|
var $arrowInc = Ox.Button({
|
|
style: 'symbol',
|
|
type: 'image',
|
|
value: self.options.arrowSymbols[1]
|
|
})
|
|
.addClass('OxArrow')
|
|
.mousedown(mousedownArrow)
|
|
.click(clickArrowInc)
|
|
.appendTo(that.$element);
|
|
}
|
|
var rangeWidth, trackWidth, imageWidth, thumbWidth;
|
|
setWidth(self.options.size);
|
|
|
|
/*
|
|
private functions
|
|
*/
|
|
|
|
function clickArrowDec() {
|
|
that.removeClass('OxActive');
|
|
setValue(self.options.value - self.options.arrowStep, 200)
|
|
}
|
|
function clickArrowInc() {
|
|
that.removeClass('OxActive');
|
|
setValue(self.options.value + self.options.arrowStep, 200);
|
|
}
|
|
function clickTrack(e) {
|
|
//Ox.Focus.focus();
|
|
var left = $track.offset().left,
|
|
offset = $(e.target).hasClass('OxThumb') ?
|
|
e.clientX - $thumb.offset().left - thumbWidth / 2 - 2 : 0;
|
|
function val(e) {
|
|
return getVal(e.clientX - left - offset);
|
|
}
|
|
setValue(val(e), 200);
|
|
$window.mousemove(function(e) {
|
|
setValue(val(e));
|
|
});
|
|
$window.one('mouseup', function() {
|
|
$window.unbind('mousemove');
|
|
});
|
|
}
|
|
function getPx(val) {
|
|
var pxPerVal = (trackWidth - thumbWidth - 2) /
|
|
(self.options.max - self.options.min);
|
|
return Math.ceil((val - self.options.min) * pxPerVal + 1);
|
|
}
|
|
function getVal(px) {
|
|
var px = trackWidth / values >= 16 ? px : px - 8,
|
|
valPerPx = (self.options.max - self.options.min) /
|
|
(trackWidth - thumbWidth);
|
|
return Ox.limit(self.options.min +
|
|
Math.floor(px * valPerPx / self.options.step) * self.options.step,
|
|
self.options.min, self.options.max);
|
|
}
|
|
function mousedownArrow() {
|
|
that.addClass('OxActive');
|
|
}
|
|
function setThumb(animate) {
|
|
var animate = typeof animate != 'undefined' ? animate : 0;
|
|
$thumb.animate({
|
|
marginLeft: (getPx(self.options.value) - 2) + 'px',
|
|
width: thumbWidth + 'px'
|
|
}, self.options.animate ? animate : 0, function() {
|
|
if (self.options.thumbValue) {
|
|
$thumb.options({
|
|
value: self.options.valueNames ?
|
|
self.options.valueNames[self.options.value] :
|
|
self.options.value
|
|
});
|
|
}
|
|
});
|
|
}
|
|
function setValue(val, animate) {
|
|
val = Ox.limit(val, self.options.min, self.options.max);
|
|
if (val != self.options.value) {
|
|
that.options({
|
|
value: val
|
|
});
|
|
setThumb(animate);
|
|
that.triggerEvent('change', { value: val });
|
|
}
|
|
}
|
|
function setWidth(width) {
|
|
trackWidth = width - self.options.arrows * 32;
|
|
thumbWidth = Math.max(trackWidth / values - 2, self.options.thumbSize - 2);
|
|
that.$element.css({
|
|
width: (width - 2) + 'px'
|
|
});
|
|
$track.css({
|
|
width: (trackWidth - 2) + 'px'
|
|
});
|
|
if (trackImages) {
|
|
$image.css({
|
|
width: (trackWidth - 2) + 'px'
|
|
});
|
|
}
|
|
$thumb.css({
|
|
width: (thumbWidth - 2) + 'px',
|
|
padding: 0
|
|
});
|
|
setThumb();
|
|
}
|
|
|
|
/*
|
|
shared functions
|
|
*/
|
|
|
|
self.onChange = function(key, value) {
|
|
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/*
|
|
============================================================================
|
|
Lists
|
|
============================================================================
|
|
*/
|
|
|
|
Ox.IconList = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
id: '',
|
|
item: function() {},
|
|
keys: [],
|
|
max: -1,
|
|
min: 0,
|
|
orientation: 'both',
|
|
request: function() {},
|
|
selected: [],
|
|
size: 128,
|
|
sort: [],
|
|
})
|
|
.options(options || {});
|
|
|
|
$.extend(self, {
|
|
itemHeight: self.options.size * 1.5,
|
|
itemWidth: self.options.size
|
|
});
|
|
|
|
that.$element = new Ox.List({
|
|
construct: constructItem,
|
|
id: self.options.id,
|
|
itemHeight: self.itemHeight,
|
|
itemWidth: self.itemWidth,
|
|
keys: self.options.keys,
|
|
orientation: self.options.orientation,
|
|
keys: self.options.keys,
|
|
max: self.options.max,
|
|
min: self.options.min,
|
|
request: self.options.request,
|
|
selected: self.options.selected,
|
|
size: self.options.size,
|
|
sort: self.options.sort,
|
|
type: 'icon',
|
|
unique: self.options.unique
|
|
}, $.extend({}, self)) // pass event handler
|
|
.addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation))
|
|
.click(click)
|
|
.dblclick(dblclick)
|
|
.scroll(scroll);
|
|
|
|
updateKeys();
|
|
|
|
function click() {
|
|
|
|
}
|
|
|
|
function constructItem(data) {
|
|
var data = self.options.item(data, self.options.sort, self.options.size),
|
|
ratio = data.width / data.height;
|
|
return new Ox.IconItem($.extend(data, {
|
|
height: self.options.size / (ratio <= 1 ? 1 : ratio),
|
|
size: self.options.size,
|
|
width: self.options.size * (ratio >= 1 ? 1 : ratio)
|
|
}));
|
|
}
|
|
|
|
function dblclick() {
|
|
|
|
}
|
|
|
|
function scroll() {
|
|
|
|
}
|
|
|
|
function updateKeys() {
|
|
self.options.keys = Ox.unique($.merge(self.options.keys, [self.options.sort[0].key]));
|
|
that.$element.options({
|
|
keys: self.options.keys
|
|
});
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'request') {
|
|
that.$element.options(key, value);
|
|
}
|
|
}
|
|
|
|
that.closePreview = function() {
|
|
that.$element.closePreview();
|
|
};
|
|
|
|
that.size = function() {
|
|
that.$element.size();
|
|
}
|
|
|
|
that.sortList = function(key, operator) {
|
|
self.options.sort = [{
|
|
key: key,
|
|
operator: operator
|
|
}];
|
|
updateKeys();
|
|
that.$element.sortList(key, operator);
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.IconItem = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
height: 128,
|
|
id: '',
|
|
info: '',
|
|
size: 128,
|
|
title: '',
|
|
width: 128,
|
|
url: ''
|
|
})
|
|
.options(options || {})
|
|
|
|
$.extend(self, {
|
|
fontSize: self.options.size == 64 ? 6 : 9,
|
|
height: self.options.size * 1.5,
|
|
lineLength: self.options.size == 64 ? 15 : 23,
|
|
lines: self.options.size == 64 ? 4 : 5,
|
|
url: oxui.path + '/png/ox.ui/transparent.png',
|
|
width: self.options.size
|
|
});
|
|
self.title = formatText(self.options.title, self.lines - 1, self.lineLength);
|
|
self.info = formatText(self.options.info, 5 - self.title.split('<br/>').length, self.lineLength);
|
|
|
|
that.css({
|
|
width: self.width + 'px',
|
|
height: self.height + 'px'
|
|
});
|
|
that.$icon = $('<div>')
|
|
.addClass('OxIcon')
|
|
.css({
|
|
top: self.options.size == 64 ? -64 : -124,
|
|
width: (self.options.size + 4) + 'px',
|
|
height: (self.options.size + 4) + 'px'
|
|
});
|
|
that.$iconImage = $('<img>')
|
|
.addClass('OxLoading OxTarget')
|
|
.attr({
|
|
src: self.url
|
|
})
|
|
.css({
|
|
width: self.options.width + 'px',
|
|
height: self.options.height + 'px'
|
|
})
|
|
.mousedown(mousedown)
|
|
.mouseenter(mouseenter)
|
|
.mouseleave(mouseleave)
|
|
.one('load', load);
|
|
that.$textBox = $('<div>')
|
|
.addClass('OxText')
|
|
.css({
|
|
top: (self.options.size / 2) + 'px',
|
|
width: (self.options.size + 4) + 'px',
|
|
height: (self.options.size == 64 ? 30 : 58) + 'px'
|
|
})
|
|
that.$text = $('<div>')
|
|
.addClass('OxTarget')
|
|
.css({
|
|
fontSize: self.fontSize + 'px'
|
|
})
|
|
.html(
|
|
self.title + '<br/><span class="OxInfo">' + self.info + '</span>'
|
|
)
|
|
.mouseenter(mouseenter)
|
|
.mouseleave(mouseleave);
|
|
that.$reflection = $('<div>')
|
|
.addClass('OxReflection')
|
|
.css({
|
|
top: self.options.size + 'px',
|
|
width: (self.options.size + 4) + 'px',
|
|
height: (self.options.size / 2) + 'px'
|
|
});
|
|
that.$reflectionImage = $('<img>')
|
|
.addClass('OxLoading')
|
|
.attr({
|
|
src: self.url
|
|
})
|
|
.css({
|
|
width: self.options.width + 'px',
|
|
height: self.options.height + 'px',
|
|
// firefox is 1px off when centering images with odd width and scaleY(-1)
|
|
paddingLeft: ($.browser.mozilla && self.options.width % 2 ? 1 : 0) + 'px'
|
|
});
|
|
that.$gradient = $('<div>')
|
|
.css({
|
|
//top: (-self.options.size / 2) + 'px',
|
|
width: self.options.width + 'px',
|
|
height: (self.options.size / 2) + 'px'
|
|
});
|
|
|
|
that.append(
|
|
that.$reflection.append(
|
|
that.$reflectionImage
|
|
).append(
|
|
that.$gradient
|
|
)
|
|
).append(
|
|
that.$textBox.append(
|
|
that.$text
|
|
)
|
|
).append(
|
|
that.$icon.append(
|
|
that.$iconImage
|
|
)
|
|
);
|
|
|
|
function formatText(text, maxLines, maxLength) {
|
|
var lines = Ox.wordwrap(text, maxLength, '<br/>', true, false).split('<br/>');
|
|
return $.map(lines, function(line, i) {
|
|
if (i < maxLines - 1) {
|
|
return line;
|
|
} else if (i == maxLines - 1) {
|
|
return lines.length == maxLines ? line : Ox.truncate($.map(lines, function(line, i) {
|
|
return i < maxLines - 1 ? null : line;
|
|
}).join(' '), maxLength, '...', 'center');
|
|
} else {
|
|
return null;
|
|
}
|
|
}).join('<br/>');
|
|
}
|
|
|
|
function load() {
|
|
that.$iconImage.attr({
|
|
src: self.options.url
|
|
})
|
|
.one('load', function() {
|
|
that.$iconImage.removeClass('OxLoading');
|
|
that.$reflectionImage.removeClass('OxLoading');
|
|
});
|
|
that.$reflectionImage.attr({
|
|
src: self.options.url
|
|
});
|
|
}
|
|
|
|
function mousedown(e) {
|
|
// fixme: preventDefault keeps image from being draggable in safari - but also keeps the list from getting focus
|
|
// e.preventDefault();
|
|
}
|
|
|
|
function mouseenter() {
|
|
that.addClass('OxHover');
|
|
}
|
|
|
|
function mouseleave() {
|
|
that.removeClass('OxHover');
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.List = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Container({}, self)
|
|
.defaults({
|
|
construct: function() {},
|
|
itemHeight: 16,
|
|
itemWidth: 16,
|
|
keys: [],
|
|
max: -1,
|
|
min: 0,
|
|
orientation: 'vertical',
|
|
pageLength: 100,
|
|
request: function() {}, // (data, callback), without data returns {items, size etc.}
|
|
selected: [],
|
|
sort: [],
|
|
type: 'text',
|
|
unique: ''
|
|
})
|
|
.options(options || {})
|
|
.scroll(scroll);
|
|
|
|
that.$content.mousedown(mousedown);
|
|
|
|
$.extend(self, {
|
|
$items: [],
|
|
$pages: [],
|
|
clickTimeout: 0,
|
|
ids: {},
|
|
itemMargin: self.options.type == 'text' ? 0 : 8, // 2 x 4 px margin ... fixme: the 2x should be computed later
|
|
keyboardEvents: {
|
|
key_end: scrollToFirst,
|
|
key_enter: open,
|
|
key_home: scrollToLast,
|
|
key_pagedown: scrollPageDown,
|
|
key_pageup: scrollPageUp,
|
|
key_section: preview, // fixme: firefox gets keyCode 0 when pressing space
|
|
key_space: preview
|
|
},
|
|
listMargin: self.options.type == 'text' ? 0 : 8, // 2 x 4 px padding
|
|
page: 0,
|
|
preview: false,
|
|
requests: [],
|
|
scrollTimeout: 0,
|
|
selected: []
|
|
});
|
|
if (self.options.max == -1) {
|
|
$.extend(self.keyboardEvents, {
|
|
key_alt_control_a: invertSelection,
|
|
key_control_a: selectAll
|
|
});
|
|
}
|
|
if (self.options.min == 0) {
|
|
$.extend(self.keyboardEvents, {
|
|
key_control_shift_a: selectNone
|
|
});
|
|
}
|
|
self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'up' : 'left')] = selectPrevious;
|
|
self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'down' : 'right')] = selectNext;
|
|
if (self.options.max == -1) {
|
|
self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'shift_up' : 'shift_left')] = addPreviousToSelection;
|
|
self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'shift_down' : 'shift_right')] = addNextToSelection;
|
|
}
|
|
if (self.options.orientation == 'both') {
|
|
$.extend(self.keyboardEvents, {
|
|
key_down: selectBelow,
|
|
key_up: selectAbove
|
|
});
|
|
if (self.options.max == -1) {
|
|
$.extend(self.keyboardEvents, {
|
|
key_shift_down: addBelowToSelection,
|
|
key_shift_up: addAboveToSelection
|
|
});
|
|
}
|
|
self.pageLengthByRowLength = [
|
|
0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60, 66, 60, 65, 70, 60, 64, 68, 72, 76, 60
|
|
];
|
|
}
|
|
|
|
updateQuery(self.options.selected);
|
|
Ox.print('s.o', self.options)
|
|
that.bindEvent(self.keyboardEvents);
|
|
$window.resize(that.size);
|
|
|
|
function addAboveToSelection() {
|
|
var pos = getAbove();
|
|
if (pos > -1) {
|
|
addToSelection(pos);
|
|
scrollToPosition(pos);
|
|
}
|
|
}
|
|
|
|
function addAllToSelection(pos) {
|
|
var arr,
|
|
len = self.$items.length;
|
|
if (!isSelected(pos)) {
|
|
if (self.selected.length == 0) {
|
|
addToSelection(pos);
|
|
} else {
|
|
if (Ox.min(self.selected) < pos) {
|
|
var arr = [pos];
|
|
for (var i = pos - 1; i >= 0; i--) {
|
|
if (isSelected(i)) {
|
|
$.each(arr, function(i, v) {
|
|
addToSelection(v);
|
|
});
|
|
break;
|
|
}
|
|
arr.push(i);
|
|
}
|
|
}
|
|
if (Ox.max(self.selected) > pos) {
|
|
var arr = [pos];
|
|
for (var i = pos + 1; i < len; i++) {
|
|
if (isSelected(i)) {
|
|
$.each(arr, function(i, v) {
|
|
addToSelection(v);
|
|
});
|
|
break;
|
|
}
|
|
arr.push(i);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function addBelowToSelection() {
|
|
var pos = getBelow();
|
|
if (pos > -1) {
|
|
addToSelection(pos);
|
|
scrollToPosition(pos);
|
|
}
|
|
}
|
|
|
|
function addNextToSelection() {
|
|
var pos = getNext();
|
|
if (pos > -1) {
|
|
addToSelection(pos);
|
|
scrollToPosition(pos);
|
|
}
|
|
}
|
|
|
|
function addPreviousToSelection() {
|
|
var pos = getPrevious();
|
|
if (pos > -1) {
|
|
addToSelection(pos);
|
|
scrollToPosition(pos);
|
|
}
|
|
}
|
|
|
|
function addToSelection(pos) {
|
|
if (!isSelected(pos)) {
|
|
self.selected.push(pos);
|
|
if (!Ox.isUndefined(self.$items[pos])) {
|
|
self.$items[pos].addClass('OxSelected');
|
|
}
|
|
Ox.print('addToSelection')
|
|
triggerSelectEvent();
|
|
} else {
|
|
// allow for 'cursor navigation' if orientation == 'both'
|
|
self.selected.splice(self.selected.indexOf(pos), 1);
|
|
self.selected.push(pos);
|
|
Ox.print('self.selected', self.selected)
|
|
}
|
|
}
|
|
|
|
function clear() {
|
|
$.each(self.requests, function(i, v) {
|
|
Ox.print('Ox.Request.cancel', v);
|
|
Ox.Request.cancel(v);
|
|
});
|
|
$.extend(self, {
|
|
$items: [],
|
|
$pages: [],
|
|
page: 0,
|
|
requests: []
|
|
});
|
|
}
|
|
|
|
function deselect(pos) {
|
|
if (isSelected(pos)) {
|
|
self.selected.splice(self.selected.indexOf(pos), 1);
|
|
if (!Ox.isUndefined(self.$items[pos])) {
|
|
self.$items[pos].removeClass('OxSelected');
|
|
}
|
|
triggerSelectEvent();
|
|
}
|
|
}
|
|
|
|
function emptyFirstPage() {
|
|
Ox.print('emptyFirstPage', self.$pages);
|
|
self.$pages[0] && self.$pages[0].find('.OxEmpty').remove();
|
|
}
|
|
|
|
function fillFirstPage() {
|
|
if (self.$pages[0]) {
|
|
var height = getHeight(),
|
|
lastItemHeight = height % self.options.itemHeight || self.options.itemHeight,
|
|
visibleItems = Math.ceil(height / self.options.itemHeight);
|
|
if (self.$items.length < visibleItems) {
|
|
$.each(Ox.range(self.$items.length, visibleItems), function(i, v) {
|
|
var $item = new Ox.ListItem({
|
|
construct: self.options.construct,
|
|
data: {},
|
|
id: '',
|
|
position: v
|
|
});
|
|
$item.addClass('OxEmpty').removeClass('OxTarget');
|
|
if (v == visibleItems - 1) {
|
|
$item.$element.css({
|
|
height: lastItemHeight + 'px',
|
|
overflowY: 'hidden'
|
|
});
|
|
}
|
|
$item.appendTo(self.$pages[0]);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function findItem(e) {
|
|
Ox.print('---- findItem', e.target)
|
|
var $element = $(e.target),
|
|
$item = null;
|
|
while (!$element.hasClass('OxTarget') && !$element.hasClass('OxPage') && !$element.is('body')) {
|
|
$element = $element.parent();
|
|
}
|
|
if ($element.hasClass('OxTarget')) {
|
|
while (!$element.hasClass('OxItem') && !$element.hasClass('OxPage') && !$element.is('body')) {
|
|
$element = $element.parent();
|
|
}
|
|
if ($element.hasClass('OxItem')) {
|
|
$item = $element;
|
|
}
|
|
}
|
|
return $item;
|
|
}
|
|
|
|
function getAbove() {
|
|
var pos = -1;
|
|
if (self.selected.length) {
|
|
pos = self.selected[self.selected.length - 1] - self.rowLength
|
|
if (pos < 0) {
|
|
pos = -1;
|
|
}
|
|
}
|
|
return pos;
|
|
}
|
|
|
|
function getBelow() {
|
|
var pos = -1;
|
|
if (self.selected.length) {
|
|
pos = self.selected[self.selected.length - 1] + self.rowLength;
|
|
if (pos >= self.$items.length) {
|
|
pos = -1;
|
|
}
|
|
}
|
|
return pos;
|
|
}
|
|
|
|
function getHeight() {
|
|
return that.height() - (that.$content.width() > that.width() ? oxui.scrollbarSize : 0);
|
|
}
|
|
|
|
function getListSize() {
|
|
return Math.ceil(self.listLength *
|
|
(self.options[self.options.orientation == 'horizontal' ?
|
|
'itemWidth' : 'itemHeight'] + self.itemMargin) / self.rowLength);
|
|
}
|
|
|
|
function getNext() {
|
|
var pos = -1;
|
|
if (self.selected.length) {
|
|
pos = (self.options.orientation == 'both' ?
|
|
self.selected[self.selected.length - 1] :
|
|
Ox.max(self.selected)) + 1;
|
|
if (pos == self.$items.length) {
|
|
pos = -1;
|
|
}
|
|
}
|
|
return pos;
|
|
}
|
|
|
|
function getPage() {
|
|
return Math.max(
|
|
Math.floor(self.options.orientation == 'horizontal' ?
|
|
(that.scrollLeft() - self.listMargin / 2) / self.pageWidth :
|
|
(that.scrollTop() - self.listMargin / 2) / self.pageHeight
|
|
), 0);
|
|
}
|
|
|
|
function getPageByPosition(pos) {
|
|
return parseInt(pos / self.options.pageLength);
|
|
}
|
|
|
|
function getPageHeight() {
|
|
return Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength);
|
|
}
|
|
|
|
function getPosition() {
|
|
// if orientation is both, this returns the
|
|
// element position at the current scroll position
|
|
return parseInt(
|
|
that.scrollTop() / (self.options.itemHeight + self.itemMargin)
|
|
) * self.rowLength;
|
|
}
|
|
|
|
function getPositions(ids) {
|
|
ids = ids || getSelectedIds();
|
|
// fixme: optimize: send non-selected ids if more than half of the items are selected
|
|
if (ids.length /*&& ids.length < self.listLength*/) {
|
|
Ox.print('-------- request', {
|
|
ids: ids,
|
|
sort: self.options.sort
|
|
});
|
|
self.requests.push(self.options.request({
|
|
ids: ids,
|
|
sort: self.options.sort
|
|
}, getPositionsCallback));
|
|
} else {
|
|
getPositionsCallback();
|
|
}
|
|
}
|
|
|
|
function getPositionsCallback(result) {
|
|
Ox.print('getPositionsCallback', result)
|
|
var pos = 0;
|
|
if (result) {
|
|
$.extend(self, {
|
|
ids: {},
|
|
selected: []
|
|
});
|
|
$.each(result.data.positions, function(id, pos) {
|
|
Ox.print('id', id, 'pos', pos)
|
|
self.selected.push(pos);
|
|
});
|
|
pos = Ox.min(self.selected);
|
|
self.page = getPageByPosition(pos);
|
|
}
|
|
// that.scrollTop(0);
|
|
that.$content.empty();
|
|
Ox.print('self.selected', self.selected, 'self.page', self.page);
|
|
loadPages(self.page, function() {
|
|
scrollToPosition(pos, true);
|
|
});
|
|
}
|
|
|
|
function getPrevious() {
|
|
var pos = -1;
|
|
if (self.selected.length) {
|
|
pos = (self.options.orientation == 'both' ?
|
|
self.selected[self.selected.length - 1] :
|
|
Ox.min(self.selected)) - 1;
|
|
}
|
|
return pos;
|
|
}
|
|
|
|
function getRow(pos) {
|
|
return Math.floor(pos / self.rowLength);
|
|
}
|
|
|
|
function getRowLength() {
|
|
return self.options.orientation == 'both' ?
|
|
Math.floor((getWidth() - self.listMargin) /
|
|
(self.options.itemWidth + self.itemMargin)) : 1
|
|
}
|
|
|
|
function getSelectedIds() {
|
|
// fixme: is carring self.ids around the best way?
|
|
return $.map(self.selected, function(v, i) {
|
|
return self.ids[v];
|
|
});
|
|
}
|
|
|
|
function getWidth() {
|
|
return that.width() - (that.$content.height() > that.height() ? oxui.scrollbarSize : 0);
|
|
}
|
|
|
|
function invertSelection() {
|
|
$.each(Ox.range(self.listLength), function(i, v) {
|
|
toggleSelection(v);
|
|
});
|
|
}
|
|
|
|
function isSelected(pos) {
|
|
return self.selected.indexOf(pos) > -1;
|
|
}
|
|
|
|
function loadPage(page, callback) {
|
|
if (page < 0 || page >= self.pages) {
|
|
!Ox.isUndefined(callback) && callback();
|
|
return;
|
|
}
|
|
Ox.print('loadPage', page);
|
|
var keys = $.inArray('id', self.options.keys) > -1 ? self.options.keys :
|
|
$.merge(self.options.keys, ['id']),
|
|
offset = page * self.pageLength,
|
|
range = [offset, offset + (page < self.pages - 1 ?
|
|
self.pageLength : self.listLength % self.pageLength)];
|
|
Ox.print('is page', page, 'undefined?', Ox.isUndefined(self.$pages[page]))
|
|
if (Ox.isUndefined(self.$pages[page])) { // fixme: unload will have made this undefined already
|
|
self.requests.push(self.options.request({
|
|
keys: keys,
|
|
range: range,
|
|
sort: self.options.sort
|
|
}, function(result) {
|
|
self.$pages[page] = new Ox.ListPage();
|
|
if (self.options.orientation == 'horizontal') {
|
|
self.$pages[page].css({
|
|
left: (page * self.pageWidth + self.listMargin / 2) + 'px',
|
|
top: (self.listMargin / 2) + 'px',
|
|
width: (page < self.pages - 1 ? self.pageWidth :
|
|
self.listLength % self.pageLength *
|
|
(self.options.itemWidth + self.itemMargin)) + 'px'
|
|
});
|
|
} else {
|
|
self.$pages[page].css({
|
|
top: (page * self.pageHeight + self.listMargin / 2) + 'px',
|
|
width: self.pageWidth + 'px'
|
|
});
|
|
}
|
|
$.each(result.data.items, function(i, v) {
|
|
var pos = offset + i;
|
|
self.$items[pos] = new Ox.ListItem({
|
|
construct: self.options.construct,
|
|
data: v,
|
|
id: v[self.options.unique],
|
|
position: pos
|
|
});
|
|
self.ids[pos] = v[self.options.unique];
|
|
if (isSelected(pos)) {
|
|
Ox.print('pos', pos, 'isSelected')
|
|
self.$items[pos].addClass('OxSelected');
|
|
}
|
|
self.$items[pos].appendTo(self.$pages[page]);
|
|
});
|
|
if (self.options.type == 'text' && page == 0) {
|
|
fillFirstPage();
|
|
}
|
|
self.$pages[page].appendTo(that.$content);
|
|
!Ox.isUndefined(callback) && callback();
|
|
}));
|
|
} else {
|
|
Ox.print('loading a page from cache, this should probably not happen -----------')
|
|
self.$pages[page].appendTo(that.$content);
|
|
}
|
|
}
|
|
|
|
function loadPages(page, callback) {
|
|
var counter = 0,
|
|
fn = function() {
|
|
Ox.print('---- self.$pages', self.$pages)
|
|
++counter == 2 && !Ox.isUndefined(callback) && callback();
|
|
};
|
|
loadPage(page, function() {
|
|
loadPage(page - 1, fn);
|
|
loadPage(page + 1, fn);
|
|
});
|
|
}
|
|
|
|
function mousedown(e) {
|
|
Ox.print('click')
|
|
var $item = findItem(e),
|
|
pos,
|
|
deselectTimeout = false;
|
|
selectTimeout = false;
|
|
that.gainFocus();
|
|
if ($item) {
|
|
if (!self.clickTimeout) {
|
|
// click
|
|
pos = $item.data('position');
|
|
if (e.metaKey && self.options.max == -1) {
|
|
if (!isSelected(pos)) {
|
|
addToSelection(pos);
|
|
} else {
|
|
deselectTimeout = true;
|
|
}
|
|
} else if (e.shiftKey && self.options.max == -1) {
|
|
addAllToSelection(pos);
|
|
} else if (!isSelected(pos)) {
|
|
select(pos);
|
|
} else {
|
|
selectTimeout = true;
|
|
}
|
|
self.clickTimeout = setTimeout(function() {
|
|
self.clickTimeout = 0;
|
|
if (deselectTimeout) {
|
|
deselect(pos);
|
|
} else if (selectTimeout) {
|
|
select(pos);
|
|
}
|
|
}, 250);
|
|
} else {
|
|
// dblclick
|
|
clearTimeout(self.clickTimeout);
|
|
self.clickTimeout = 0;
|
|
open();
|
|
}
|
|
} else if (self.options.min == 0) {
|
|
selectNone();
|
|
}
|
|
}
|
|
|
|
function open() {
|
|
that.triggerEvent('open', {
|
|
ids: getSelectedIds()
|
|
});
|
|
}
|
|
|
|
function preview() {
|
|
self.preview = !self.preview;
|
|
if (self.preview) {
|
|
that.triggerEvent('openpreview', {
|
|
ids: getSelectedIds()
|
|
});
|
|
} else {
|
|
that.triggerEvent('closepreview');
|
|
}
|
|
}
|
|
|
|
function scroll() {
|
|
var page = self.page;
|
|
self.scrollTimeout && clearTimeout(self.scrollTimeout);
|
|
self.scrollTimeout = setTimeout(function() {
|
|
self.scrollTimeout = 0;
|
|
self.page = getPage();
|
|
if (self.page != page) {
|
|
Ox.print('page', page, '-->', self.page);
|
|
}
|
|
if (self.page == page - 1) {
|
|
unloadPage(self.page + 2);
|
|
loadPage(self.page - 1);
|
|
} else if (self.page == page + 1) {
|
|
unloadPage(self.page - 2);
|
|
loadPage(self.page + 1);
|
|
} else if (self.page == page - 2) {
|
|
unloadPage(self.page + 3);
|
|
unloadPage(self.page + 2);
|
|
loadPage(self.page);
|
|
loadPage(self.page - 1);
|
|
} else if (self.page == page + 2) {
|
|
unloadPage(self.page - 3);
|
|
unloadPage(self.page - 2);
|
|
loadPage(self.page);
|
|
loadPage(self.page + 1);
|
|
} else if (self.page != page) {
|
|
unloadPages(page);
|
|
loadPages(self.page);
|
|
}
|
|
}, 250);
|
|
}
|
|
|
|
function scrollPageDown() {
|
|
that.scrollBy(getHeight());
|
|
}
|
|
|
|
function scrollPageUp() {
|
|
that.scrollBy(-getHeight());
|
|
}
|
|
|
|
function scrollTo(value) {
|
|
that.animate(self.options.orientation == 'horizontal' ? {
|
|
scrollLeft: (self.listSize * value) + 'px'
|
|
} : {
|
|
scrollTop: (self.listSize * value) + 'px'
|
|
}, 0);
|
|
}
|
|
|
|
function scrollToFirst() {
|
|
that[self.options.orientation == 'horizontal' ? 'scrollLeft' : 'scrollTop'](0);
|
|
}
|
|
|
|
function scrollToLast() {
|
|
that[self.options.orientation == 'horizontal' ? 'scrollLeft' : 'scrollTop'](self.listSize);
|
|
}
|
|
|
|
function scrollToPosition(pos, leftOrTopAlign) {
|
|
var itemHeight = self.options.itemHeight + self.itemMargin,
|
|
itemWidth = self.options.itemWidth + self.itemMargin,
|
|
positions = [],
|
|
scroll,
|
|
size;
|
|
if (self.options.orientation == 'horizontal') {
|
|
positions[0] = pos * itemWidth;
|
|
positions[1] = positions[0] + itemWidth + self.itemMargin;
|
|
scroll = that.scrollLeft();
|
|
size = getWidth();
|
|
if (positions[0] < scroll || leftOrTopAlign) {
|
|
that.animate({
|
|
scrollLeft: positions[0] + 'px'
|
|
}, 0);
|
|
} else if (positions[1] > scroll + size) {
|
|
that.animate({
|
|
scrollLeft: (positions[1] - size) + 'px'
|
|
}, 0);
|
|
}
|
|
} else {
|
|
positions[0] = (self.options.orientation == 'vertical' ? pos : getRow(pos)) * itemHeight;
|
|
positions[1] = positions[0] + itemHeight + (self.options.orientation == 'vertical' ? 0 : self.itemMargin);
|
|
scroll = that.scrollTop();
|
|
size = getHeight();
|
|
if (positions[0] < scroll || leftOrTopAlign) {
|
|
that.animate({
|
|
scrollTop: positions[0] + 'px'
|
|
}, 0);
|
|
} else if (positions[1] > scroll + size) {
|
|
that.animate({
|
|
scrollTop: (positions[1] - size) + 'px'
|
|
}, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
function select(pos) {
|
|
if (!isSelected(pos) || self.selected.length > 1) {
|
|
selectNone();
|
|
addToSelection(pos);
|
|
}
|
|
}
|
|
|
|
function selectAbove() {
|
|
var pos = getAbove();
|
|
if (pos > -1) {
|
|
select(pos);
|
|
scrollToPosition(pos);
|
|
}
|
|
}
|
|
|
|
function selectAll() {
|
|
$.each(Ox.range(self.listLength), function(i, v) {
|
|
Ox.print('adding', v);
|
|
addToSelection(v);
|
|
});
|
|
}
|
|
|
|
function selectBelow() {
|
|
var pos = getBelow();
|
|
if (pos > -1) {
|
|
select(pos);
|
|
scrollToPosition(pos);
|
|
}
|
|
}
|
|
|
|
function selectNext() {
|
|
var pos = getNext();
|
|
if (pos > -1) {
|
|
select(pos);
|
|
scrollToPosition(pos);
|
|
}
|
|
}
|
|
|
|
function selectNone() {
|
|
$.each(self.$items, function(i, v) {
|
|
deselect(i);
|
|
});
|
|
}
|
|
|
|
function selectPrevious() {
|
|
var pos = getPrevious();
|
|
if (pos > -1) {
|
|
select(pos);
|
|
scrollToPosition(pos);
|
|
}
|
|
}
|
|
|
|
function selectQuery(str) {
|
|
$.each(self.$items, function(i, v) {
|
|
if (Ox.toLatin(v.title).toUpperCase().indexOf(str) == 0) {
|
|
select(i);
|
|
scrollToPosition(i);
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
function toggleSelection(pos) {
|
|
if (!isSelected(pos)) {
|
|
addToSelection(pos);
|
|
} else {
|
|
deselect(pos);
|
|
}
|
|
}
|
|
|
|
function triggerSelectEvent() {
|
|
var ids = getSelectedIds();
|
|
setTimeout(function() {
|
|
var ids_ = getSelectedIds();
|
|
Ox.print('ids', ids, 'ids after 100 msec', ids_)
|
|
if (ids.length == ids_.length && (ids.length == 0 || ids[0] == ids_[0])) {
|
|
that.triggerEvent('select', {
|
|
ids: ids
|
|
});
|
|
self.preview && that.triggerEvent('openpreview', {
|
|
ids: ids
|
|
});
|
|
} else {
|
|
Ox.print('select event not triggered after timeout');
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
function unloadPage(page) {
|
|
if (page < 0 || page >= self.pages) {
|
|
return;
|
|
}
|
|
Ox.print('unloadPage', page)
|
|
Ox.print('self.$pages', self.$pages)
|
|
Ox.print('page not undefined', !Ox.isUndefined(self.$pages[page]))
|
|
if (!Ox.isUndefined(self.$pages[page])) {
|
|
self.$pages[page].remove();
|
|
delete self.$pages[page];
|
|
}
|
|
}
|
|
|
|
function unloadPages(page) {
|
|
unloadPage(page);
|
|
unloadPage(page - 1);
|
|
unloadPage(page + 1)
|
|
}
|
|
|
|
function updateQuery(ids) {
|
|
// ids are the selcected ids
|
|
// (in case list is loaded with selection)
|
|
clear();
|
|
self.requests.push(self.options.request({}, function(result) {
|
|
var keys = {};
|
|
that.triggerEvent('load', result.data);
|
|
self.rowLength = getRowLength();
|
|
self.pageLength = self.options.orientation == 'both' ?
|
|
self.pageLengthByRowLength[self.rowLength] :
|
|
self.options.pageLength;
|
|
$.extend(self, {
|
|
listLength: result.data.items,
|
|
pages: Math.ceil(result.data.items / self.pageLength),
|
|
pageWidth: self.options.orientation == 'vertical' ? 0 :
|
|
(self.options.itemWidth + self.itemMargin) *
|
|
(self.options.orientation == 'horizontal' ?
|
|
self.pageLength : self.rowLength),
|
|
pageHeight: self.options.orientation == 'horizontal' ? 0 :
|
|
Math.ceil(self.pageLength * (self.options.itemHeight +
|
|
self.itemMargin) / self.rowLength)
|
|
});
|
|
self.listSize = getListSize();
|
|
that.$content.css(
|
|
self.options.orientation == 'horizontal' ? 'width' : 'height',
|
|
self.listSize + 'px'
|
|
);
|
|
getPositions(ids);
|
|
}));
|
|
}
|
|
|
|
function updatePages(pos, scroll) {
|
|
// only used if orientation is both
|
|
clear();
|
|
self.pageLength = self.pageLengthByRowLength[self.rowLength]
|
|
$.extend(self, {
|
|
listSize: getListSize(),
|
|
pages: Math.ceil(self.listLength / self.pageLength),
|
|
pageWidth: (self.options.itemWidth + self.itemMargin) * self.rowLength,
|
|
pageHeight: getPageHeight()
|
|
});
|
|
that.$content.css({
|
|
height: self.listSize + 'px'
|
|
});
|
|
self.page = getPageByPosition(pos);
|
|
//that.scrollTop(0);
|
|
that.$content.empty();
|
|
loadPages(self.page, function() {
|
|
scrollTo(scroll);
|
|
});
|
|
}
|
|
|
|
function updateSort() {
|
|
if (self.listLength > 1) {
|
|
clear();
|
|
getPositions();
|
|
}
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
Ox.print('list onChange', key, value);
|
|
if (key == 'request') {
|
|
updateQuery();
|
|
}
|
|
};
|
|
|
|
that.clearCache = function() { // was used by TextList resizeColumn, now probably no longer necessary
|
|
self.$pages = [];
|
|
return that;
|
|
};
|
|
|
|
that.closePreview = function() {
|
|
self.preview = false;
|
|
};
|
|
|
|
that.reload = function() {
|
|
Ox.print('---------------- list reload, page', self.page)
|
|
var page = self.page;
|
|
clear();
|
|
self.page = page
|
|
that.$content.empty();
|
|
loadPages(self.page);
|
|
return that;
|
|
};
|
|
|
|
that.size = function() {
|
|
if (self.options.orientation == 'both') {
|
|
var rowLength = getRowLength(),
|
|
pageLength = self.pageLengthByRowLength[rowLength],
|
|
pos = getPosition(),
|
|
scroll = that.scrollTop() / self.listSize;
|
|
if (pageLength != self.pageLength) {
|
|
self.pageLength = pageLength;
|
|
self.rowLength = rowLength;
|
|
updatePages(pos, scroll);
|
|
} else if (rowLength != self.rowLength) {
|
|
self.rowLength = rowLength;
|
|
self.pageWidth = (self.options.itemWidth + self.itemMargin) * self.rowLength; // fixme: make function
|
|
self.listSize = getListSize();
|
|
self.pageHeight = getPageHeight();
|
|
$.each(self.$pages, function(i, $page) {
|
|
!Ox.isUndefined($page) && $page.css({
|
|
width: self.pageWidth + 'px',
|
|
top: (i * self.pageHeight + self.listMargin / 2) + 'px'
|
|
});
|
|
});
|
|
that.$content.css({
|
|
height: self.listSize + 'px'
|
|
});
|
|
Ox.print('scrolling to', scroll)
|
|
scrollTo(scroll);
|
|
}
|
|
} else if (self.options.type == 'text') {
|
|
Ox.print('that.size, type==text')
|
|
emptyFirstPage();
|
|
fillFirstPage();
|
|
}
|
|
}
|
|
|
|
that.sortList = function(key, operator) {
|
|
if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
|
|
self.options.sort[0] = {
|
|
key: key,
|
|
operator: operator
|
|
}
|
|
that.triggerEvent('sort', self.options.sort[0]);
|
|
updateSort();
|
|
}
|
|
return that;
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.ListItem = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
construct: function() {},
|
|
data: {},
|
|
id: '',
|
|
position: 0
|
|
})
|
|
.options(options || {});
|
|
|
|
$.each(self.options.data, function(k, v) {
|
|
self.options.data[k] = $.isArray(v) ? v.join(', ') : v;
|
|
});
|
|
|
|
that.$element = self.options.construct(self.options.data)
|
|
.addClass('OxItem')
|
|
.attr({
|
|
id: self.options.id
|
|
})
|
|
.data('position', self.options.position);
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.ListPage = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.addClass('OxPage');
|
|
return that;
|
|
};
|
|
|
|
Ox.TextList = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
columns: [],
|
|
columnsMovable: false,
|
|
columnsRemovable: false,
|
|
columnsResizable: false,
|
|
columnWidth: [40, 800],
|
|
id: '',
|
|
max: -1,
|
|
min: 0,
|
|
selected: [],
|
|
request: function() {}, // {sort, range, keys, callback}
|
|
sort: []
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxTextList');
|
|
|
|
$.each(self.options.columns, function(i, v) { // fixme: can this go into a generic ox.js function?
|
|
if (Ox.isUndefined(v.unique)) {
|
|
v.unique = false;
|
|
}
|
|
if (Ox.isUndefined(v.visible)) {
|
|
v.visible = false;
|
|
}
|
|
if (v.unique) {
|
|
self.unique = v.id;
|
|
}
|
|
});
|
|
|
|
$.extend(self, {
|
|
columnPositions: [],
|
|
itemHeight: 16,
|
|
page: 0,
|
|
pageLength: 100,
|
|
scrollLeft: 0,
|
|
selectedColumn: getColumnIndexById(self.options.sort[0].key),
|
|
visibleColumns: $.map(self.options.columns, function(v, i) {
|
|
return v.visible ? v : null;
|
|
})
|
|
});
|
|
$.extend(self, {
|
|
columnWidths: $.map(self.visibleColumns, function(v, i) {
|
|
return v.width;
|
|
}),
|
|
pageHeight: self.options.pageLength * self.itemHeight
|
|
});
|
|
|
|
// Head
|
|
|
|
that.$bar = new Ox.Bar({
|
|
orientation: 'horizontal',
|
|
size: 16
|
|
}).appendTo(that);
|
|
that.$head = new Ox.Container()
|
|
.addClass('OxHead')
|
|
.appendTo(that.$bar);
|
|
that.$head.$content.addClass('OxTitles');
|
|
constructHead();
|
|
if (self.options.columnsRemovable) {
|
|
that.$select = new Ox.Select({
|
|
id: self.options.id + 'SelectColumns',
|
|
items: $.map(self.options.columns, function(v, i) {
|
|
return {
|
|
checked: v.visible,
|
|
disabled: v.removable === false,
|
|
id: v.id,
|
|
title: v.title
|
|
}
|
|
}),
|
|
max: -1,
|
|
min: 1,
|
|
type: 'image'
|
|
})
|
|
.bindEvent('change', changeColumns)
|
|
.appendTo(that.$bar.$element);
|
|
}
|
|
|
|
// Body
|
|
|
|
that.$body = new Ox.List({
|
|
construct: constructItem,
|
|
id: self.options.id,
|
|
itemHeight: 16,
|
|
itemWidth: getItemWidth(),
|
|
keys: $.map(self.visibleColumns, function(v, i) {
|
|
return v.id;
|
|
}),
|
|
max: self.options.max,
|
|
min: self.options.min,
|
|
orientation: 'vertical',
|
|
request: self.options.request,
|
|
selected: self.options.selected,
|
|
sort: self.options.sort,
|
|
type: 'text',
|
|
unique: self.unique
|
|
}, $.extend({}, self)) // pass event handler
|
|
.addClass('OxBody')
|
|
.scroll(function() {
|
|
var scrollLeft = $(this).scrollLeft();
|
|
if (scrollLeft != self.scrollLeft) {
|
|
self.scrollLeft = scrollLeft;
|
|
that.$head.scrollLeft(scrollLeft);
|
|
}
|
|
})
|
|
.appendTo(that);
|
|
that.$body.$content.css({
|
|
width: getItemWidth() + 'px'
|
|
});
|
|
|
|
Ox.print('s.vC', self.visibleColumns)
|
|
|
|
function addColumn(id) {
|
|
Ox.print('addColumn', id);
|
|
var column,
|
|
index = 0;
|
|
$.each(self.options.columns, function(i, v) {
|
|
if (v.visible) {
|
|
index++;
|
|
} else if (v.id == id) {
|
|
column = v;
|
|
return false;
|
|
}
|
|
});
|
|
column.visible = true;
|
|
self.visibleColumns.splice(index, 0, column);
|
|
self.columnWidths.splice(index, 0, column.width);
|
|
that.$head.$content.empty();
|
|
constructHead();
|
|
that.$body.options({
|
|
keys: $.map(self.visibleColumns, function(v, i) {
|
|
return v.id;
|
|
})
|
|
});
|
|
that.$body.reload();
|
|
}
|
|
|
|
function changeColumns(event, data) {
|
|
var add,
|
|
ids = [];
|
|
$.each(data.selected, function(i, column) {
|
|
var index = getColumnIndexById(column.id);
|
|
if (!self.options.columns[index].visible) {
|
|
addColumn(column.id);
|
|
add = true;
|
|
return false;
|
|
}
|
|
ids.push(column.id);
|
|
});
|
|
if (!add) {
|
|
$.each(self.visibleColumns, function(i, column) {
|
|
if (ids.indexOf(column.id) == -1) {
|
|
removeColumn(column.id);
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function clickColumn(id) {
|
|
Ox.print('clickColumn', id);
|
|
var i = getColumnIndexById(id),
|
|
isSelected = self.options.sort[0].key == self.options.columns[i].id;
|
|
that.sortList(
|
|
self.options.columns[i].id, isSelected ?
|
|
(self.options.sort[0].operator === '' ? '-' : '') :
|
|
self.options.columns[i].operator
|
|
);
|
|
}
|
|
|
|
function constructHead() {
|
|
var offset = 0;
|
|
that.$titles = [];
|
|
self.columnOffsets = [];
|
|
$.each(self.visibleColumns, function(i, v) {
|
|
var $order, $resize, $left, $center, $right, timeout = 0;
|
|
offset += self.columnWidths[i];
|
|
self.columnOffsets[i] = offset - self.columnWidths[i] / 2;
|
|
that.$titles[i] = $('<div>')
|
|
.addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
|
|
.css({
|
|
width: (self.columnWidths[i] - 9) + 'px',
|
|
textAlign: v.align
|
|
})
|
|
.html(v.title)
|
|
.mousedown(function(e) {
|
|
timeout = setTimeout(function() {
|
|
self.options.columnsMovable && dragColumn(v.id, e);
|
|
timeout = 0;
|
|
}, 250);
|
|
})
|
|
.mouseup(function() {
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
timeout = 0;
|
|
clickColumn(v.id);
|
|
}
|
|
})
|
|
.appendTo(that.$head.$content.$element);
|
|
$order = $('<div>')
|
|
.addClass('OxOrder')
|
|
.html(oxui.symbols['triangle_' + (
|
|
v.operator === '' ? 'up' : 'down'
|
|
)])
|
|
.click(function() {
|
|
$(this).prev().trigger('click')
|
|
})
|
|
.appendTo(that.$head.$content.$element);
|
|
$resize = $('<div>')
|
|
.addClass('OxResize')
|
|
.appendTo(that.$head.$content.$element);
|
|
if (self.options.columnsResizable) {
|
|
$resize.addClass('OxResizable')
|
|
.mousedown(function(e) {
|
|
var startWidth = self.columnWidths[i],
|
|
startX = e.clientX;
|
|
$window.mousemove(function(e) {
|
|
var x = e.clientX,
|
|
width = Ox.limit(
|
|
startWidth - startX + x,
|
|
self.options.columnWidth[0],
|
|
self.options.columnWidth[1]
|
|
);
|
|
resizeColumn(v.id, width);
|
|
});
|
|
$window.one('mouseup', function() {
|
|
$window.unbind('mousemove');
|
|
});
|
|
})
|
|
.dblclick(function() {
|
|
resizeColumn(v.id, v.width);
|
|
});
|
|
}
|
|
$left = $('<div>').addClass('OxLeft').appendTo($resize);
|
|
$center = $('<div>').addClass('OxCenter').appendTo($resize);
|
|
$right = $('<div>').addClass('OxRight').appendTo($resize);
|
|
});
|
|
that.$head.$content.css({
|
|
width: (Ox.sum(self.columnWidths) + 2) + 'px'
|
|
});
|
|
Ox.print('s.sC', self.selectedColumn)
|
|
Ox.print('s.cO', self.columnOffsets)
|
|
if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var
|
|
toggleSelected(self.options.columns[self.selectedColumn].id);
|
|
that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
|
|
width: (self.options.columns[self.selectedColumn].width - 25) + 'px'
|
|
});
|
|
}
|
|
}
|
|
|
|
function constructItem(data) {
|
|
var $item = $('<div>')
|
|
.addClass('OxTarget')
|
|
.css({
|
|
width: getItemWidth() + 'px'
|
|
});
|
|
$.each(self.visibleColumns, function(i, v) {
|
|
var $cell = $('<div>')
|
|
|
|
.addClass('OxCell OxColumn' + Ox.toTitleCase(v.id))
|
|
.css({
|
|
width: (self.columnWidths[i] - 9) + 'px',
|
|
textAlign: v.align
|
|
})
|
|
.html(!$.isEmptyObject(data) && data[v.id] ? data[v.id] : '')
|
|
.appendTo($item);
|
|
});
|
|
return $item;
|
|
}
|
|
|
|
function dragColumn(id, e) {
|
|
var startX = e.clientX,
|
|
startPos = getColumnPositionById(id),
|
|
pos = startPos,
|
|
stopPos = startPos,
|
|
offsets = $.map(self.visibleColumns, function(v, i) {
|
|
return self.columnOffsets[i] - self.columnOffsets[startPos]
|
|
});
|
|
$('.OxColumn' + Ox.toTitleCase(id)).css({
|
|
opacity: 0.25
|
|
});
|
|
that.$titles[startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
|
|
cursor: 'move'
|
|
});
|
|
Ox.print('offsets', offsets)
|
|
$window.mousemove(function(e) {
|
|
var d = e.clientX - startX;
|
|
$.each(offsets, function(i, v) {
|
|
if (d < 0 && d < v) {
|
|
stopPos = i;
|
|
return false;
|
|
} else if (d > 0 && d > v) {
|
|
stopPos = i;
|
|
}
|
|
});
|
|
if (stopPos != pos) {
|
|
pos = stopPos;
|
|
moveColumn(id, pos);
|
|
}
|
|
});
|
|
$window.one('mouseup', function() {
|
|
dropColumn(id, pos);
|
|
$window.unbind('mousemove');
|
|
});
|
|
}
|
|
|
|
function dropColumn(id, pos) {
|
|
Ox.print('dropColumn', id, pos)
|
|
var startPos = getColumnPositionById(id),
|
|
stopPos = pos,
|
|
$title = that.$titles.splice(startPos, 1)[0],
|
|
column = self.visibleColumns.splice(startPos, 1)[0],
|
|
width = self.columnWidths.splice(startPos, 1)[0];
|
|
self.visibleColumns.splice(stopPos, 0, column);
|
|
self.columnWidths.splice(stopPos, 0, width);
|
|
that.$head.$content.empty();
|
|
constructHead();
|
|
Ox.print('s.vC', self.visibleColumns)
|
|
$('.OxColumn' + Ox.toTitleCase(id)).css({
|
|
opacity: 1
|
|
});
|
|
that.$titles[stopPos].removeClass('OxDrag').css({
|
|
cursor: 'pointer'
|
|
});
|
|
that.$body.clearCache();
|
|
}
|
|
|
|
function getColumnIndexById(id) {
|
|
var pos = -1;
|
|
$.each(self.options.columns, function(i, v) {
|
|
if (v.id == id) {
|
|
pos = i;
|
|
return false;
|
|
}
|
|
});
|
|
return pos;
|
|
}
|
|
|
|
function getColumnPositionById(id) {
|
|
var pos = -1;
|
|
$.each(self.visibleColumns, function(i, v) {
|
|
if (v.id == id) {
|
|
pos = i;
|
|
return false;
|
|
}
|
|
});
|
|
return pos;
|
|
}
|
|
|
|
function getItemWidth() {
|
|
return Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize);
|
|
//return Ox.sum(self.columnWidths)
|
|
}
|
|
|
|
function moveColumn(id, pos) {
|
|
// fixme: column head should be one element, not three
|
|
Ox.print('moveColumn', id, pos)
|
|
var startPos = getColumnPositionById(id),
|
|
stopPos = pos,
|
|
startClassName = '.OxColumn' + Ox.toTitleCase(id),
|
|
stopClassName = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
|
|
insert = startPos < stopPos ? 'insertAfter' : 'insertBefore'
|
|
$column = $('.OxTitle' + startClassName),
|
|
$order = $column.next(),
|
|
$resize = $order.next();
|
|
Ox.print(startClassName, insert, stopClassName)
|
|
$column.detach()[insert](insert == 'insertAfter' ? $('.OxTitle' + stopClassName).next().next() : $('.OxTitle' + stopClassName));
|
|
$order.detach().insertAfter($column);
|
|
$resize.detach().insertAfter($order);
|
|
$.each(that.$body.find('.OxItem'), function(i, v) {
|
|
var $v = $(v);
|
|
$v.children(startClassName).detach()[insert]($v.children(stopClassName));
|
|
});
|
|
column = self.visibleColumns.splice(startPos, 1)[0],
|
|
width = self.columnWidths.splice(startPos, 1)[0];
|
|
self.visibleColumns.splice(stopPos, 0, column);
|
|
self.columnWidths.splice(stopPos, 0, width);
|
|
}
|
|
|
|
function removeColumn(id) {
|
|
Ox.print('removeColumn', id);
|
|
var className = '.OxColumn' + Ox.toTitleCase(id),
|
|
index = getColumnIndexById(id),
|
|
itemWidth,
|
|
position = getColumnPositionById(id),
|
|
$column = $('.OxTitle' + className),
|
|
$order = $column.next(),
|
|
$resize = $order.next();
|
|
self.options.columns[index].visible = false;
|
|
self.visibleColumns.splice(position, 1);
|
|
self.columnWidths.splice(position, 1);
|
|
that.$head.$content.empty();
|
|
constructHead();
|
|
itemWidth = getItemWidth();
|
|
$.each(that.$body.find('.OxItem'), function(i, v) {
|
|
var $v = $(v);
|
|
$v.children(className).remove();
|
|
$v.css({
|
|
width: itemWidth + 'px'
|
|
});
|
|
});
|
|
that.$body.$content.css({
|
|
width: itemWidth + 'px'
|
|
});
|
|
that.$body.options({
|
|
keys: $.map(self.visibleColumns, function(v, i) {
|
|
return v.id;
|
|
})
|
|
});
|
|
//that.$body.clearCache();
|
|
}
|
|
|
|
function resize() {
|
|
|
|
}
|
|
|
|
function resizeColumn(id, width) {
|
|
var i = getColumnIndexById(id),
|
|
pos = getColumnPositionById(id);
|
|
self.columnWidths[pos] = width;
|
|
that.$head.$content.css({
|
|
width: (Ox.sum(self.columnWidths) + 2) + 'px'
|
|
});
|
|
that.$titles[pos].css({
|
|
width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px'
|
|
});
|
|
$('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({
|
|
width: (width - 9) + 'px'
|
|
});
|
|
setWidth();
|
|
//that.$body.clearCache();
|
|
}
|
|
|
|
function setWidth() {
|
|
var width = getItemWidth();
|
|
that.$body.$content.find('.OxItem').css({ // fixme: can we avoid this lookup?
|
|
width: width + 'px'
|
|
});
|
|
that.$body.$content.css({
|
|
width: width + 'px' // fixme: check if scrollbar visible, and listen to resize/toggle event
|
|
});
|
|
}
|
|
|
|
function toggleSelected(id) {
|
|
var pos = getColumnPositionById(id);
|
|
if (pos > -1) {
|
|
updateOrder(id);
|
|
pos > 0 && that.$titles[pos].prev().children().eq(2).toggleClass('OxSelected');
|
|
that.$titles[pos].toggleClass('OxSelected');
|
|
that.$titles[pos].next().toggleClass('OxSelected');
|
|
that.$titles[pos].next().next().children().eq(0).toggleClass('OxSelected');
|
|
that.$titles[pos].css({
|
|
width: (
|
|
that.$titles[pos].width() + (that.$titles[pos].hasClass('OxSelected') ? -16 : 16)
|
|
) + 'px'
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateOrder(id) {
|
|
var pos = getColumnPositionById(id);
|
|
Ox.print(id, pos)
|
|
that.$titles[pos].next().html(oxui.symbols[
|
|
'triangle_' + (self.options.sort[0].operator === '' ? 'up' : 'down')
|
|
]);
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'request') {
|
|
that.$body.options(key, value);
|
|
}
|
|
};
|
|
|
|
that.closePreview = function() {
|
|
that.$body.closePreview();
|
|
};
|
|
|
|
that.size = function() {
|
|
setWidth();
|
|
that.$body.size();
|
|
}
|
|
|
|
that.resizeColumn = function(id, width) {
|
|
resizeColumn(id, width);
|
|
return that;
|
|
}
|
|
|
|
that.sortList = function(key, operator) {
|
|
var isSelected = key == self.options.sort[0].key;
|
|
self.options.sort = [
|
|
{
|
|
key: key,
|
|
operator: operator
|
|
}
|
|
];
|
|
if (isSelected) {
|
|
updateOrder(self.options.columns[self.selectedColumn].id);
|
|
} else {
|
|
toggleSelected(self.options.columns[self.selectedColumn].id);
|
|
self.selectedColumn = getColumnIndexById(key);
|
|
toggleSelected(self.options.columns[self.selectedColumn].id);
|
|
}
|
|
that.$body.sortList(self.options.sort[0].key, self.options.sort[0].operator);
|
|
return that;
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/*
|
|
============================================================================
|
|
Maps
|
|
============================================================================
|
|
*/
|
|
|
|
Ox.Map = function(options, self) {
|
|
|
|
var self = self || {}
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
clickable: false,
|
|
places: [],
|
|
type: 'satellite'
|
|
})
|
|
.options(options || {})
|
|
.bindEvent({
|
|
key_up: function() {
|
|
pan(0, -1);
|
|
},
|
|
key_down: function() {
|
|
pan(0, 1);
|
|
},
|
|
key_left: function() {
|
|
pan(-1, 0);
|
|
},
|
|
key_right: function() {
|
|
pan(1, 0);
|
|
},
|
|
key_0: reset,
|
|
key_minus: function() {
|
|
zoom(-1);
|
|
},
|
|
key_equal: function() {
|
|
zoom(1);
|
|
},
|
|
key_enter: focusOnPlace,
|
|
key_shift_enter: zoomToPlace,
|
|
key_escape: deselectPlace
|
|
});
|
|
|
|
if (Ox.isUndefined(window.google)) {
|
|
window.google = function() {};
|
|
$.getScript('http://maps.google.com/maps/api/js?callback=google&sensor=false', function() {
|
|
var interval = setInterval(function() {
|
|
if (!Ox.isUndefined(google.maps)) {
|
|
clearInterval(interval);
|
|
initMap();
|
|
}
|
|
}, 100);
|
|
});
|
|
} else {
|
|
initMap();
|
|
}
|
|
|
|
function initMap() {
|
|
$.extend(self, {
|
|
geocoder: new google.maps.Geocoder(),
|
|
selected: -1
|
|
});
|
|
if (Ox.isObject(self.options.places[0])) {
|
|
$.each(self.options.places, function(i, place) {
|
|
place.bounds = getBounds(),
|
|
place.center = place.bounds.getCenter();
|
|
$.extend(place, {
|
|
marker: new Marker(place),
|
|
polygon: new Polygon(place)
|
|
});
|
|
self.bounds = i == 0 ? getBounds() : self.bounds.union(place.bounds);
|
|
self.options.places[i] = place;
|
|
function getBounds() {
|
|
return new google.maps.LatLngBounds(
|
|
new google.maps.LatLng(place.points.southwest[0], place.points.southwest[1]),
|
|
new google.maps.LatLng(place.points.northeast[0], place.points.northeast[1])
|
|
);
|
|
}
|
|
});
|
|
loadMap();
|
|
} else {
|
|
self.counter = 0;
|
|
$.each(self.options.places, function(i, place) {
|
|
getLocationByName(place, function(place) {
|
|
Ox.print(self.counter, i, place);
|
|
self.options.places[i] = place;
|
|
if (self.counter++ == self.options.places.length - 1) {
|
|
loadMap();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function loadMap() {
|
|
self.center = self.bounds ? self.bounds.getCenter() : new google.maps.LatLng(0, 0);
|
|
self.zoom = 1;
|
|
$.extend(self, {
|
|
map: new google.maps.Map(that.$element[0], {
|
|
center: self.center,
|
|
disableDefaultUI: true,
|
|
mapTypeId: google.maps.MapTypeId[self.options.type.toUpperCase()],
|
|
zoom: self.zoom
|
|
})
|
|
});
|
|
if (self.bounds) {
|
|
self.map.fitBounds(self.bounds);
|
|
// self.center = self.map.getCenter();
|
|
self.zoom = self.map.getZoom();
|
|
}
|
|
google.maps.event.addListener(self.map, 'click', click);
|
|
google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
|
|
$.each(self.options.places, function(i, place) {
|
|
place.marker.add();
|
|
});
|
|
resize();
|
|
that.gainFocus();
|
|
that.triggerEvent('loaded');
|
|
}
|
|
|
|
function canContain(outerBounds, innerBounds) {
|
|
var outerSpan = outerBounds.toSpan(),
|
|
innerSpan = innerBounds.toSpan();
|
|
return outerSpan.lat() > innerSpan.lat() &&
|
|
outerSpan.lng() > innerSpan.lng();
|
|
}
|
|
|
|
function click(event) {
|
|
Ox.print('event', event);
|
|
that.gainFocus();
|
|
if (self.options.clickable) {
|
|
getLocationByLatLng(event.latLng, self.map.getBounds(), function(location) {
|
|
self.marker && self.marker.remove();
|
|
self.polygon && self.polygon.remove();
|
|
if (location) {
|
|
self.marker = location.marker.add();
|
|
self.polygon && self.polygon.remove();
|
|
self.polygon = location.polygon.add();
|
|
that.triggerEvent('select', location);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function deselectPlace() {
|
|
|
|
}
|
|
|
|
function focusOnPlace() {
|
|
if (self.selected > -1) {
|
|
self.map.panTo(self.options.places[self.selected].center);
|
|
}
|
|
}
|
|
|
|
function getLocationByLatLng(latlng, bounds, callback) {
|
|
Ox.print('ll b', latlng, bounds)
|
|
var callback = arguments.length == 3 ? callback : bounds,
|
|
bounds = arguments.length == 3 ? bounds : null;
|
|
self.geocoder.geocode({
|
|
latLng: latlng
|
|
}, function(results, status) {
|
|
Ox.print('results', results)
|
|
var length = results.length;
|
|
if (status == google.maps.GeocoderStatus.OK) {
|
|
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
|
|
if (bounds) {
|
|
$.each(results.reverse(), function(i, result) {
|
|
if (
|
|
i == length - 1 ||
|
|
canContain(bounds, result.geometry.bounds || result.geometry.viewport)
|
|
) {
|
|
callback(new Location(results[i]));
|
|
return false;
|
|
}
|
|
});
|
|
} else {
|
|
callback(new Location(results[0]));
|
|
}
|
|
} else {
|
|
callback(null);
|
|
}
|
|
} else {
|
|
Ox.print('geocode failed:', status);
|
|
callback(null);
|
|
}
|
|
});
|
|
}
|
|
|
|
function getLocationByName(name, callback) {
|
|
self.geocoder.geocode({
|
|
address: name
|
|
}, function(results, status) {
|
|
if (status == google.maps.GeocoderStatus.OK) {
|
|
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
|
|
callback(new Location(results[0]))
|
|
} else {
|
|
callback(null);
|
|
}
|
|
} else {
|
|
Ox.print('geocode failed:', status);
|
|
callback(null);
|
|
}
|
|
});
|
|
}
|
|
|
|
function getPositionByName(name) {
|
|
var position = -1;
|
|
$.each(self.options.places, function(i, place) {
|
|
if (place.name == name) {
|
|
position = i;
|
|
return false;
|
|
}
|
|
});
|
|
return position;
|
|
}
|
|
|
|
function pan(x, y) {
|
|
self.map.panBy(x * 256, y * 256);
|
|
};
|
|
|
|
function resize() {
|
|
google.maps.event.trigger(self.map, 'resize');
|
|
}
|
|
|
|
function reset() {
|
|
Ox.print(self.map.getZoom(), self.zoom);
|
|
self.map.getZoom() == self.zoom ?
|
|
self.map.panTo(self.center) :
|
|
self.map.fitBounds(self.bounds);
|
|
}
|
|
|
|
function zoomChanged() {
|
|
that.triggerEvent('zoom', {
|
|
value: self.map.getZoom()
|
|
});
|
|
}
|
|
|
|
function zoom(z) {
|
|
self.map.setZoom(self.map.getZoom() + z);
|
|
}
|
|
|
|
function zoomToPlace() {
|
|
if (self.selected > -1) {
|
|
self.map.fitBounds(self.options.places[self.selected].bounds);
|
|
}
|
|
}
|
|
|
|
function Location(geodata) {
|
|
Ox.print('geodata', geodata);
|
|
var bounds = geodata.geometry.bounds || geodata.geometry.viewport,
|
|
center = bounds.getCenter(),
|
|
location = {
|
|
bounds: bounds,
|
|
center: center,
|
|
geoname: geodata.formatted_address,
|
|
points: {
|
|
'center': [center.lat(), center.lng()],
|
|
'southwest': [bounds.getSouthWest().lat(), bounds.getSouthWest().lng()],
|
|
'northeast': [bounds.getNorthEast().lat(), bounds.getNorthEast().lng()]
|
|
},
|
|
name: geodata.formatted_address.split(', ')[0],
|
|
size: 0,
|
|
type: geodata.address_components[0].types.join(', ')
|
|
};
|
|
return $.extend(location, {
|
|
marker: new Marker(location),
|
|
polygon: new Polygon(location)
|
|
});
|
|
}
|
|
|
|
function Marker(place) {
|
|
Ox.print(place.center)
|
|
var listeners = {},
|
|
marker = new google.maps.Marker({
|
|
icon: icon('red'),
|
|
position: place.center,
|
|
title: place.name
|
|
}),
|
|
selected = false;
|
|
function click() {
|
|
Ox.print('click', self.selected, selected)
|
|
selected = !selected;
|
|
selected && self.selected > -1 && self.options.places[self.selected].marker.deselect();
|
|
self.selected = selected ? getPositionByName(place.name) : -1;
|
|
marker.setOptions({
|
|
icon: icon(selected ? 'blue' : 'red')
|
|
});
|
|
place.polygon[selected ? 'add' : 'remove']();
|
|
that.triggerEvent(selected ? 'select' : 'deselect', place);
|
|
}
|
|
function deselect() {
|
|
|
|
}
|
|
function dblclick() {
|
|
Ox.print('dblclick', place.bounds)
|
|
self.map.fitBounds(place.bounds);
|
|
}
|
|
function select() {
|
|
|
|
}
|
|
function icon(color) {
|
|
return oxui.path + 'png/ox.ui/marker' + Ox.toTitleCase(color) + '.png'
|
|
}
|
|
return {
|
|
add: function() {
|
|
Ox.print('add Marker')
|
|
marker.setMap(self.map);
|
|
listeners = {
|
|
click: google.maps.event.addListener(marker, 'click', click),
|
|
dblclick: google.maps.event.addListener(marker, 'dblclick', dblclick),
|
|
};
|
|
return this;
|
|
},
|
|
deselect: function() {
|
|
self.selected = -1;
|
|
selected = false;
|
|
marker.setOptions({
|
|
icon: icon('red')
|
|
});
|
|
place.polygon.remove();
|
|
},
|
|
remove: function() {
|
|
marker.setMap(null);
|
|
$.each(listeners, function(i, listener) {
|
|
google.maps.event.removeListener(listener);
|
|
});
|
|
return this;
|
|
},
|
|
select: function() {
|
|
if (self.selected > -1) {
|
|
self.options.places[self.selected].marker.deselect();
|
|
}
|
|
self.selected = getPositionByName(place.name);
|
|
selected = true;
|
|
marker.setOptions({
|
|
icon: icon('blue')
|
|
});
|
|
place.polygon.add();
|
|
}
|
|
};
|
|
}
|
|
|
|
function Polygon(location) {
|
|
var listeners = {},
|
|
paths = [
|
|
new google.maps.LatLng(location.points.southwest[0], location.points.southwest[1]),
|
|
new google.maps.LatLng(location.points.northeast[0], location.points.southwest[1]),
|
|
new google.maps.LatLng(location.points.northeast[0], location.points.northeast[1]),
|
|
new google.maps.LatLng(location.points.southwest[0], location.points.northeast[1]),
|
|
new google.maps.LatLng(location.points.southwest[0], location.points.southwest[1])
|
|
],
|
|
polygon = new google.maps.Polygon({
|
|
paths: paths
|
|
}),
|
|
selected = false;
|
|
setOptions();
|
|
function click() {
|
|
selected = !selected;
|
|
setOptions();
|
|
}
|
|
function setOptions() {
|
|
var color = selected ? '#8080FF' : '#FFFFFF';
|
|
polygon.setOptions({
|
|
clickable: true,
|
|
fillColor: color,
|
|
fillOpacity: selected ? 0.1 : 0,
|
|
strokeColor: color,
|
|
strokeOpacity: 1,
|
|
strokeWeight: 2
|
|
});
|
|
}
|
|
return {
|
|
add: function() {
|
|
polygon.setMap(self.map);
|
|
listeners.click = google.maps.event.addListener(polygon, 'click', click);
|
|
return this;
|
|
},
|
|
deselect: function() {
|
|
selected = false;
|
|
setOptions();
|
|
},
|
|
remove: function() {
|
|
polygon.setMap(null);
|
|
google.maps.event.removeListener(listeners.click);
|
|
return this;
|
|
},
|
|
select: function() {
|
|
selected = true;
|
|
setOptions();
|
|
}
|
|
};
|
|
}
|
|
|
|
function Rectangle(area) { // fixme: not used
|
|
var latlng = {
|
|
sw: new google.maps.LatLng(area[0][0], area[0][1]),
|
|
ne: new google.maps.LatLng(area[1][0], area[1][1])
|
|
},
|
|
bounds = new google.maps.LatLngBounds(latlng.sw, latlng.ne),
|
|
lat = {},
|
|
lng = {};
|
|
latlng.mc = bounds.getCenter();
|
|
$.each(latlng, function(k, v) {
|
|
lat[k] = v.lat();
|
|
lng[k] = v.lng();
|
|
});
|
|
$.extend(latlng, {
|
|
sc: new google.maps.LatLng(lat.sw, lng.mc),
|
|
se: new google.maps.LatLng(lat.sw, lng.ne),
|
|
mw: new google.maps.LatLng(lat.mc, lng.sw),
|
|
me: new google.maps.LatLng(lat.mc, lng.ne),
|
|
nw: new google.maps.LatLng(lat.ne, lng.sw),
|
|
nc: new google.maps.LatLng(lat.ne, lng.mc),
|
|
});
|
|
return {
|
|
area: area,
|
|
bounds: bounds,
|
|
canContain: function(rectangle) {
|
|
var outerSpan = this.bounds.toSpan(),
|
|
innerSpan = rectangle.bounds.toSpan();
|
|
return outerSpan.lat() > innerSpan.lat() &&
|
|
outerSpan.lng() > innerSpan.lng();
|
|
},
|
|
center: latlng.mc,
|
|
contains: function(rectangle) {
|
|
return this.bounds.contains(rectangle.bounds.getSouthWest()) &&
|
|
this.bounds.contains(rectangle.bounds.getNorthEast());
|
|
},
|
|
latlng: latlng
|
|
};
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'type') {
|
|
|
|
}
|
|
};
|
|
|
|
that.find = function(name, callback) {
|
|
getLocationByName(name, function(place) {
|
|
if (place) {
|
|
//self.marker = location.marker.add();
|
|
self.polygon && self.polygon.remove();
|
|
self.polygon = place.polygon.add();
|
|
self.bounds = place.bounds;
|
|
self.map.fitBounds(self.bounds);
|
|
}
|
|
callback(place);
|
|
});
|
|
};
|
|
|
|
that.triggerResize = function() {
|
|
Ox.print('---- triggerResize');
|
|
var center = self.map.getCenter();
|
|
google.maps.event.trigger(self.map, 'resize');
|
|
self.map.setCenter(center);
|
|
}
|
|
|
|
that.zoom = function(value) {
|
|
self.map.setZoom(value);
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
options
|
|
height image height (px)
|
|
places array of either names (''), points ([0, 0]),
|
|
or objects ({name, point, highlight})
|
|
type map type ('hybrid', 'roadmap', 'satellite', 'terrain')
|
|
width image width (px)
|
|
*/
|
|
Ox.MapImage = function(options, self) {
|
|
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('img', self)
|
|
.defaults({
|
|
height: 360,
|
|
markerColorHighlight: 'yellow',
|
|
markerColorNormal: 'blue',
|
|
places: [],
|
|
type: 'satellite',
|
|
width: 640
|
|
})
|
|
.options(options || {})
|
|
|
|
$.extend(self, {
|
|
markers: {
|
|
highlight: [],
|
|
normal: []
|
|
},
|
|
src: 'http://maps.google.com/maps/api/staticmap?sensor=false' +
|
|
'&size=' + self.options.width + 'x' + self.options.height +
|
|
'&maptype=' + self.options.type
|
|
});
|
|
|
|
if (self.options.places.length) {
|
|
$.each(self.options.places, function(i, place) {
|
|
if (Ox.isString(place)) {
|
|
self.markers.normal.push(place);
|
|
} else if (Ox.isArray(place)) {
|
|
self.markers.normal.push(place.join(','));
|
|
} else {
|
|
self.markers[place.highlight ? 'highlight' : 'normal']
|
|
.push('point' in place ? place.point.join(',') : place.name)
|
|
}
|
|
});
|
|
$.each(self.markers, function(k, markers) {
|
|
if (markers.length) {
|
|
self.src += '&markers=icon:' + 'http://dev.pan.do:8000' + oxui.path + 'png/ox.ui/marker' +
|
|
Ox.toTitleCase(self.options['markerColor' + Ox.toTitleCase(k)]) + '.png|' +
|
|
markers.join('|')
|
|
}
|
|
});
|
|
} else {
|
|
self.src += '¢er=0,0&zoom=2'
|
|
}
|
|
|
|
that.attr({
|
|
src: self.src
|
|
});
|
|
|
|
self.onChange = function(key, value) {
|
|
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/*
|
|
============================================================================
|
|
Menus
|
|
============================================================================
|
|
*/
|
|
|
|
/**
|
|
*/
|
|
Ox.MainMenu = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Bar({}, self)
|
|
.defaults({
|
|
extras: [],
|
|
menus: [],
|
|
size: 'medium'
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxMainMenu Ox' + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large ... like toolbar
|
|
.click(click)
|
|
.mousemove(mousemove);
|
|
|
|
self.focused = false;
|
|
self.selected = -1;
|
|
that.menus = [];
|
|
that.titles = [];
|
|
that.layer = $('<div>').addClass('OxLayer');
|
|
|
|
$.each(self.options.menus, function(position, menu) {
|
|
that.titles[position] = $('<div>')
|
|
.addClass('OxTitle')
|
|
.html(menu.title)
|
|
.data('position', position)
|
|
.appendTo(that.$element);
|
|
that.menus[position] = new Ox.Menu($.extend(menu, {
|
|
element: that.titles[position],
|
|
mainmenu: that,
|
|
size: self.options.size
|
|
}))
|
|
.bindEvent({
|
|
hide: onHideMenu
|
|
});
|
|
});
|
|
|
|
if (self.options.extras.length) {
|
|
that.extras = $('<div>')
|
|
.addClass('OxExtras')
|
|
.appendTo(that.$element);
|
|
$.each(self.options.extras, function(position, extra) {
|
|
extra.css({
|
|
float: 'left' // fixme: need class!
|
|
}).appendTo(that.extras);
|
|
});
|
|
}
|
|
|
|
function click(event) {
|
|
var $target = $(event.target),
|
|
position = typeof $target.data('position') != 'undefined' ?
|
|
$target.data('position') : -1;
|
|
clickTitle(position);
|
|
}
|
|
|
|
function clickTitle(position) {
|
|
var selected = self.selected;
|
|
if (self.selected > -1) {
|
|
that.menus[self.selected].hideMenu();
|
|
}
|
|
if (position > -1) {
|
|
if (position != selected) {
|
|
self.focused = true;
|
|
self.selected = position;
|
|
that.titles[self.selected].addClass('OxSelected');
|
|
that.menus[self.selected].showMenu();
|
|
}
|
|
}
|
|
}
|
|
|
|
function mousemove(event) {
|
|
var $target = $(event.target),
|
|
focused,
|
|
position = typeof $target.data('position') != 'undefined' ?
|
|
$target.data('position') : -1;
|
|
if (self.focused && position != self.selected) {
|
|
if (position > -1) {
|
|
clickTitle(position);
|
|
} else {
|
|
focused = self.focused;
|
|
that.menus[self.selected].hideMenu();
|
|
self.focused = focused;
|
|
}
|
|
}
|
|
}
|
|
|
|
function onHideMenu() {
|
|
if (self.selected > -1) {
|
|
that.titles[self.selected].removeClass('OxSelected');
|
|
self.selected = -1;
|
|
}
|
|
self.focused = false;
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
|
|
};
|
|
|
|
that.addMenuAfter = function(id) {
|
|
|
|
};
|
|
|
|
that.addMenuBefore = function(id) {
|
|
|
|
};
|
|
|
|
that.checkItem = function(id) {
|
|
var ids = id.split('_'),
|
|
itemId = ids.pop(),
|
|
menuId = ids.join('_');
|
|
that.getMenu(menuId).checkItem(itemId);
|
|
};
|
|
|
|
that.disableItem = function(id) {
|
|
that.getItem(id).options({
|
|
disabled: true
|
|
});
|
|
};
|
|
|
|
that.enableItem = function(id) {
|
|
that.getItem(id).options({
|
|
disabled: false
|
|
});
|
|
};
|
|
|
|
that.getItem = function(id) {
|
|
var ids = id.split('_'),
|
|
item;
|
|
if (ids.length == 1) {
|
|
$.each(that.menus, function(i, menu) {
|
|
item = menu.getItem(id);
|
|
return !item;
|
|
});
|
|
} else {
|
|
item = that.getMenu(ids.shift()).getItem(ids.join('_'));
|
|
}
|
|
Ox.print('getItem', id, item);
|
|
return item;
|
|
};
|
|
|
|
that.getMenu = function(id) {
|
|
var ids = id.split('_'),
|
|
menu;
|
|
if (ids.length == 1) {
|
|
$.each(that.menus, function(i, v) {
|
|
if (v.options('id') == id) {
|
|
menu = v;
|
|
return false;
|
|
}
|
|
});
|
|
} else {
|
|
menu = that.getMenu(ids.shift()).getSubmenu(ids.join('_'));
|
|
}
|
|
Ox.print('getMenu', id, menu);
|
|
return menu;
|
|
};
|
|
|
|
that.removeMenu = function() {
|
|
|
|
};
|
|
|
|
that.selectNextMenu = function() {
|
|
if (self.selected < self.options.menus.length - 1) {
|
|
clickTitle(self.selected + 1);
|
|
}
|
|
};
|
|
|
|
that.selectPreviousMenu = function() {
|
|
if (self.selected) {
|
|
clickTitle(self.selected - 1);
|
|
}
|
|
};
|
|
|
|
that.uncheckItem = function(id) {
|
|
that.getItem(id).options({
|
|
checked: false
|
|
});
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
options
|
|
element the element the menu is attached to
|
|
id the menu id
|
|
items array of menu items
|
|
mainmenu the main menu this menu is part of, if any
|
|
offset offset of the menu, in px
|
|
parent the supermenu, if any
|
|
selected the position of the selected item
|
|
side open to 'bottom' or 'right'
|
|
size 'large', 'medium' or 'small'
|
|
|
|
events:
|
|
change_groupId {id, value} checked item of a group has changed
|
|
click_itemId item not belonging to a group was clicked
|
|
click_menuId {id, value} item not belonging to a group was clicked
|
|
deselect_menuId {id, value} item was deselected not needed, not implemented
|
|
hide_menuId menu was hidden
|
|
select_menuId {id, value} item was selected
|
|
*/
|
|
Ox.Menu = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
element: null,
|
|
id: '',
|
|
items: [],
|
|
mainmenu: null,
|
|
offset: {
|
|
left: 0,
|
|
top: 0
|
|
},
|
|
parent: null,
|
|
selected: -1,
|
|
side: 'bottom',
|
|
size: 'medium',
|
|
})
|
|
.options(options || {})
|
|
.addClass(
|
|
'OxMenu Ox' + Ox.toTitleCase(self.options.side) +
|
|
' Ox' + Ox.toTitleCase(self.options.size)
|
|
)
|
|
.click(click)
|
|
.mouseenter(mouseenter)
|
|
.mouseleave(mouseleave)
|
|
.mousemove(mousemove)
|
|
.bindEvent({
|
|
key_up: selectPreviousItem,
|
|
key_down: selectNextItem,
|
|
key_left: selectSupermenu,
|
|
key_right: selectSubmenu,
|
|
key_escape: hideMenu,
|
|
key_enter: clickSelectedItem
|
|
}),
|
|
itemHeight = self.options.size == 'small' ? 12 : (self.options.size == 'medium' ? 16 : 20),
|
|
// menuHeight,
|
|
scrollSpeed = 1,
|
|
$item; // fixme: used?
|
|
// fixme: attach all private vars to self
|
|
|
|
// construct
|
|
that.items = [];
|
|
that.submenus = {};
|
|
that.$scrollbars = [];
|
|
that.$top = $('<div>')
|
|
.addClass('OxTop')
|
|
.appendTo(that.$element);
|
|
that.$scrollbars.up = constructScrollbar('up')
|
|
.appendTo(that.$element);
|
|
that.$container = $('<div>')
|
|
.addClass('OxContainer')
|
|
.appendTo(that.$element);
|
|
that.$content = $('<table>')
|
|
.addClass('OxContent')
|
|
.appendTo(that.$container);
|
|
constructItems(self.options.items);
|
|
that.$scrollbars.down = constructScrollbar('down')
|
|
.appendTo(that.$element);
|
|
that.$bottom = $('<div>')
|
|
.addClass('OxBottom')
|
|
.appendTo(that.$element);
|
|
that.$layer = $('<div>')
|
|
.addClass(self.options.mainmenu ? 'OxMainMenuLayer' : 'OxMenuLayer')
|
|
.click(click);
|
|
|
|
function click(event) {
|
|
var item,
|
|
position,
|
|
$target = $(event.target),
|
|
$parent = $target.parent();
|
|
// necessary for highlight
|
|
if ($parent.is('.OxCell')) {
|
|
$target = $parent;
|
|
$parent = $target.parent();
|
|
}
|
|
if ($target.is('.OxCell')) {
|
|
position = $parent.data('position');
|
|
item = that.items[position];
|
|
if (!item.options('disabled')) {
|
|
clickItem(position);
|
|
} else {
|
|
that.hideMenu();
|
|
}
|
|
} else {
|
|
that.hideMenu();
|
|
}
|
|
}
|
|
|
|
function clickItem(position) {
|
|
var item = that.items[position],
|
|
toggled;
|
|
that.hideMenu();
|
|
if (!item.options('items').length) {
|
|
if (that.options('parent')) {
|
|
that.options('parent').hideMenu().triggerEvent('click');
|
|
}
|
|
if (item.options('checked') !== null) {
|
|
if (item.options('group')) {
|
|
Ox.print('has group', item.options('group'))
|
|
toggled = self.optionGroups[item.options('group')].toggle(position);
|
|
Ox.print('toggled', toggled)
|
|
if (toggled.length) {
|
|
$.each(toggled, function(i, pos) {
|
|
that.items[pos].toggleChecked();
|
|
});
|
|
Ox.print('--triggering change event--');
|
|
(self.options.mainmenu || that).triggerEvent('change', {
|
|
id: item.options('group'),
|
|
checked: $.map(self.optionGroups[item.options('group')].checked(), function(v, i) {
|
|
return {
|
|
id: that.items[v].options('id'),
|
|
title: Ox.stripTags(that.items[v].options('title')[0])
|
|
};
|
|
})
|
|
});
|
|
}
|
|
} else {
|
|
item.toggleChecked();
|
|
(self.options.mainmenu || that).triggerEvent('change', {
|
|
checked: item.options('checked'),
|
|
id: item.options('id'),
|
|
title: Ox.stripTags(item.options('title')[0])
|
|
});
|
|
}
|
|
} else {
|
|
(self.options.mainmenu || that).triggerEvent('click', {
|
|
id: item.options('id'),
|
|
title: Ox.stripTags(item.options('title')[0])
|
|
});
|
|
}
|
|
if (item.options('title').length == 2) {
|
|
item.toggleTitle();
|
|
}
|
|
}
|
|
}
|
|
|
|
function clickSelectedItem() {
|
|
// called on key.enter
|
|
if (self.options.selected > -1) {
|
|
clickItem(self.options.selected);
|
|
} else {
|
|
that.hideMenu();
|
|
}
|
|
}
|
|
|
|
function constructItems(items) {
|
|
|
|
that.$content.empty();
|
|
scrollMenuUp();
|
|
|
|
self.optionGroups = {};
|
|
$.each(items, function(i, item) {
|
|
if (item.group) {
|
|
items[i] = $.map(item.items, function(v, i) {
|
|
return $.extend(v, {
|
|
group: item.group
|
|
});
|
|
});
|
|
self.optionGroups[item.group] = new Ox.OptionGroup(
|
|
items[i],
|
|
'min' in item ? item.min : 1,
|
|
'max' in item ? item.max : 1
|
|
);
|
|
}
|
|
});
|
|
items = Ox.flatten(items);
|
|
|
|
that.items = [];
|
|
$.each(items, function(i, item) {
|
|
var position;
|
|
if (item.id) {
|
|
that.items.push(new Ox.MenuItem($.extend(item, {
|
|
menu: that,
|
|
position: position = that.items.length
|
|
})).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
|
|
if (item.items) {
|
|
that.submenus[item.id] = new Ox.Menu({
|
|
element: that.items[position],
|
|
id: Ox.toCamelCase(self.options.id + '/' + item.id),
|
|
items: item.items,
|
|
mainmenu: self.options.mainmenu,
|
|
offset: {
|
|
left: 0,
|
|
top: -4
|
|
},
|
|
parent: that,
|
|
side: 'right',
|
|
size: self.options.size,
|
|
});
|
|
}
|
|
} else {
|
|
that.$content.append(constructSpace());
|
|
that.$content.append(constructLine());
|
|
that.$content.append(constructSpace());
|
|
}
|
|
});
|
|
|
|
if (!that.is(':hidden')) {
|
|
that.hideMenu();
|
|
that.showMenu();
|
|
}
|
|
|
|
}
|
|
|
|
function constructLine() {
|
|
return $('<tr>').append(
|
|
$('<td>', {
|
|
'class': 'OxLine',
|
|
colspan: 5
|
|
})
|
|
);
|
|
}
|
|
|
|
function constructScrollbar(direction) {
|
|
var interval,
|
|
speed = direction == 'up' ? -1 : 1;
|
|
return $('<div/>', {
|
|
'class': 'OxScrollbar Ox' + Ox.toTitleCase(direction),
|
|
html: oxui.symbols['triangle_' + direction],
|
|
click: function() { // fixme: do we need to listen to click event?
|
|
return false;
|
|
},
|
|
mousedown: function() {
|
|
scrollSpeed = 2;
|
|
return false;
|
|
},
|
|
mouseenter: function() {
|
|
var $otherScrollbar = that.$scrollbars[direction == 'up' ? 'down' : 'up'];
|
|
$(this).addClass('OxSelected');
|
|
if ($otherScrollbar.is(':hidden')) {
|
|
$otherScrollbar.show();
|
|
that.$container.height(that.$container.height() - itemHeight);
|
|
if (direction == 'down') {
|
|
that.$content.css({
|
|
top: -itemHeight + 'px'
|
|
});
|
|
}
|
|
}
|
|
scrollMenu(speed);
|
|
interval = setInterval(function() {
|
|
scrollMenu(speed);
|
|
}, 100);
|
|
},
|
|
mouseleave: function() {
|
|
$(this).removeClass('OxSelected');
|
|
clearInterval(interval);
|
|
},
|
|
mouseup: function() {
|
|
scrollSpeed = 1;
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
function constructSpace() {
|
|
return $('<tr>').append(
|
|
$('<td>', {
|
|
'class': 'OxSpace',
|
|
colspan: 5
|
|
})
|
|
);
|
|
}
|
|
|
|
function getElement(id) {
|
|
// fixme: needed?
|
|
return $('#' + Ox.toCamelCase(options.id + '/' + id));
|
|
}
|
|
|
|
function getItemPositionById(id) {
|
|
var position;
|
|
$.each(that.items, function(i, v) {
|
|
if (v.options('id') == id) {
|
|
position = i;
|
|
return false;
|
|
}
|
|
});
|
|
return position;
|
|
}
|
|
|
|
function hideMenu() {
|
|
// called on key_escape
|
|
that.hideMenu();
|
|
}
|
|
|
|
function isFirstEnabledItem() {
|
|
var ret = true;
|
|
$.each(that.items, function(i, item) {
|
|
if (i < self.options.selected && !item.options('disabled')) {
|
|
return ret = false;
|
|
}
|
|
});
|
|
return ret;
|
|
}
|
|
|
|
function isLastEnabledItem() {
|
|
var ret = true;
|
|
$.each(that.items, function(i, item) {
|
|
if (i > self.options.selected && !item.options('disabled')) {
|
|
return ret = false;
|
|
}
|
|
});
|
|
return ret;
|
|
}
|
|
|
|
function mouseenter() {
|
|
that.gainFocus();
|
|
}
|
|
|
|
function mouseleave() {
|
|
if (self.options.selected > -1 && !that.items[self.options.selected].options('items').length) {
|
|
selectItem(-1);
|
|
}
|
|
}
|
|
|
|
function mousemove(event) {
|
|
var item,
|
|
position,
|
|
$target = $(event.target);
|
|
$parent = $target.parent();
|
|
if ($parent.is('.OxCell')) {
|
|
$target = $parent;
|
|
$parent = $target.parent();
|
|
}
|
|
if ($target.is('.OxCell')) {
|
|
position = $parent.data('position');
|
|
item = that.items[position];
|
|
if (!item.options('disabled') && position != self.options.selected) {
|
|
selectItem(position);
|
|
}
|
|
} else {
|
|
mouseleave();
|
|
}
|
|
}
|
|
|
|
function scrollMenu(speed) {
|
|
var containerHeight = that.$container.height(),
|
|
contentHeight = that.$content.height(),
|
|
top = parseInt(that.$content.css('top')) || 0,
|
|
min = containerHeight - contentHeight + itemHeight,
|
|
max = 0;
|
|
top += speed * scrollSpeed * -itemHeight;
|
|
if (top <= min) {
|
|
top = min;
|
|
that.$scrollbars.down.hide().trigger('mouseleave');
|
|
that.$container.height(containerHeight + itemHeight);
|
|
that.items[that.items.length - 1].trigger('mouseover');
|
|
} else if (top >= max - itemHeight) {
|
|
top = max;
|
|
that.$scrollbars.up.hide().trigger('mouseleave');
|
|
that.$container.height(containerHeight + itemHeight);
|
|
that.items[0].trigger('mouseover');
|
|
}
|
|
that.$content.css({
|
|
top: top + 'px'
|
|
});
|
|
}
|
|
|
|
function scrollMenuUp() {
|
|
if (that.$scrollbars.up.is(':visible')) {
|
|
that.$content.css({
|
|
top: '0px'
|
|
});
|
|
that.$scrollbars.up.hide();
|
|
if (that.$scrollbars.down.is(':hidden')) {
|
|
that.$scrollbars.down.show();
|
|
} else {
|
|
that.$container.height(that.$container.height() + itemHeight);
|
|
}
|
|
}
|
|
}
|
|
|
|
function selectItem(position) {
|
|
var item;
|
|
if (self.options.selected > -1) {
|
|
//Ox.print('s.o.s', self.options.selected, that.items)
|
|
item = that.items[self.options.selected]
|
|
item.removeClass('OxSelected');
|
|
/* disabled
|
|
that.triggerEvent('deselect', {
|
|
id: item.options('id'),
|
|
title: Ox.stripTags(item.options('title')[0])
|
|
});
|
|
*/
|
|
}
|
|
if (position > -1) {
|
|
item = that.items[position];
|
|
$.each(that.submenus, function(id, submenu) {
|
|
if (!submenu.is(':hidden')) {
|
|
submenu.hideMenu();
|
|
return false;
|
|
}
|
|
});
|
|
item.options('items').length && that.submenus[item.options('id')].showMenu(); // fixme: do we want to switch to this style?
|
|
item.addClass('OxSelected');
|
|
/* disabled
|
|
that.triggerEvent('select', {
|
|
id: item.options('id'),
|
|
title: Ox.stripTags(item.options('title')[0])
|
|
});
|
|
*/
|
|
}
|
|
self.options.selected = position;
|
|
}
|
|
|
|
function selectNextItem() {
|
|
var offset,
|
|
selected = self.options.selected;
|
|
Ox.print('sNI', selected)
|
|
if (!isLastEnabledItem()) {
|
|
if (selected == -1) {
|
|
scrollMenuUp();
|
|
} else {
|
|
that.items[selected].removeClass('OxSelected');
|
|
}
|
|
do {
|
|
selected++;
|
|
} while (that.items[selected].options('disabled'))
|
|
selectItem(selected);
|
|
offset = that.items[selected].offset().top + itemHeight -
|
|
that.$container.offset().top - that.$container.height();
|
|
if (offset > 0) {
|
|
if (that.$scrollbars.up.is(':hidden')) {
|
|
that.$scrollbars.up.show();
|
|
that.$container.height(that.$container.height() - itemHeight);
|
|
offset += itemHeight;
|
|
}
|
|
if (selected == that.items.length - 1) {
|
|
that.$scrollbars.down.hide();
|
|
that.$container.height(that.$container.height() + itemHeight);
|
|
} else {
|
|
that.$content.css({
|
|
top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function selectPreviousItem() {
|
|
var offset,
|
|
selected = self.options.selected;
|
|
Ox.print('sPI', selected)
|
|
if (selected > - 1) {
|
|
if (!isFirstEnabledItem()) {
|
|
that.items[selected].removeClass('OxSelected');
|
|
do {
|
|
selected--;
|
|
} while (that.items[selected].options('disabled'))
|
|
selectItem(selected);
|
|
}
|
|
offset = that.items[selected].offset().top - that.$container.offset().top;
|
|
if (offset < 0) {
|
|
if (that.$scrollbars.down.is(':hidden')) {
|
|
that.$scrollbars.down.show();
|
|
that.$container.height(that.$container.height() - itemHeight);
|
|
}
|
|
if (selected == 0) {
|
|
that.$scrollbars.up.hide();
|
|
that.$container.height(that.$container.height() + itemHeight);
|
|
}
|
|
that.$content.css({
|
|
top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function selectSubmenu() {
|
|
Ox.print('selectSubmenu', self.options.selected)
|
|
if (self.options.selected > -1) {
|
|
var submenu = that.submenus[that.items[self.options.selected].options('id')];
|
|
Ox.print('submenu', submenu, that.submenus);
|
|
if (submenu && submenu.hasEnabledItems()) {
|
|
submenu.gainFocus();
|
|
submenu.selectFirstItem();
|
|
} else if (self.options.mainmenu) {
|
|
self.options.mainmenu.selectNextMenu();
|
|
}
|
|
} else if (self.options.mainmenu) {
|
|
self.options.mainmenu.selectNextMenu();
|
|
}
|
|
}
|
|
|
|
function selectSupermenu() {
|
|
Ox.print('selectSupermenu', self.options.selected)
|
|
if (self.options.parent) {
|
|
self.options.selected > -1 && that.items[self.options.selected].trigger('mouseleave');
|
|
scrollMenuUp();
|
|
self.options.parent.gainFocus();
|
|
} else if (self.options.mainmenu) {
|
|
self.options.mainmenu.selectPreviousMenu();
|
|
}
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'items') {
|
|
constructItems(value);
|
|
} else if (key == 'selected') {
|
|
that.$content.find('.OxSelected').removeClass('OxSelected');
|
|
selectItem(value);
|
|
}
|
|
}
|
|
|
|
that.addItem = function(item, position) {
|
|
|
|
};
|
|
|
|
that.addItemAfter = function(item, id) {
|
|
|
|
};
|
|
|
|
that.addItemBefore = function(item, id) {
|
|
|
|
};
|
|
|
|
that.checkItem = function(id) {
|
|
var item = that.getItem(id);
|
|
if (item.options('group')) {
|
|
var position = getItemPositionById(id),
|
|
toggled = self.optionGroups[item.options('group')].toggle(position);
|
|
if (toggled.length) {
|
|
$.each(toggled, function(i, pos) {
|
|
that.items[pos].toggleChecked();
|
|
});
|
|
}
|
|
} else {
|
|
item.options({
|
|
checked: true
|
|
});
|
|
}
|
|
};
|
|
|
|
that.getItem = function(id) {
|
|
//Ox.print('id', id)
|
|
var ids = id.split('_'),
|
|
item;
|
|
if (ids.length == 1) {
|
|
$.each(that.items, function(i, v) {
|
|
if (v.options('id') == id) {
|
|
item = v;
|
|
return false;
|
|
}
|
|
});
|
|
if (!item) {
|
|
$.each(that.submenus, function(k, submenu) {
|
|
item = submenu.getItem(id);
|
|
return !item;
|
|
});
|
|
}
|
|
} else {
|
|
item = that.submenus[ids.shift()].getItem(ids.join('_'));
|
|
}
|
|
return item;
|
|
};
|
|
|
|
that.getSubmenu = function(id) {
|
|
var ids = id.split('_'),
|
|
submenu;
|
|
if (ids.length == 1) {
|
|
submenu = that.submenus[id];
|
|
} else {
|
|
submenu = that.submenus[ids.shift()].getSubmenu(ids.join('_'));
|
|
}
|
|
Ox.print('getSubmenu', id, submenu);
|
|
return submenu;
|
|
}
|
|
|
|
that.hasEnabledItems = function() {
|
|
var ret = false;
|
|
$.each(that.items, function(i, item) {
|
|
if (!item.options('disabled')) {
|
|
return ret = true;
|
|
}
|
|
});
|
|
return ret;
|
|
};
|
|
|
|
that.hideMenu = function() {
|
|
if (that.is(':hidden')) {
|
|
return;
|
|
}
|
|
$.each(that.submenus, function(i, submenu) {
|
|
if (submenu.is(':visible')) {
|
|
submenu.hideMenu();
|
|
return false;
|
|
}
|
|
});
|
|
selectItem(-1);
|
|
scrollMenuUp();
|
|
that.$scrollbars.up.is(':visible') && that.$scrollbars.up.hide();
|
|
that.$scrollbars.down.is(':visible') && that.$scrollbars.down.hide();
|
|
if (self.options.parent) {
|
|
//self.options.element.removeClass('OxSelected');
|
|
self.options.parent.options({
|
|
selected: -1
|
|
});
|
|
}
|
|
that.hide()
|
|
.loseFocus()
|
|
.triggerEvent('hide');
|
|
that.$layer.hide();
|
|
return that;
|
|
};
|
|
|
|
that.removeItem = function() {
|
|
|
|
};
|
|
|
|
that.selectFirstItem = function() {
|
|
selectNextItem();
|
|
};
|
|
|
|
that.showMenu = function() {
|
|
if (!that.is(':hidden')) {
|
|
return;
|
|
}
|
|
if (!self.options.parent && !that.$layer.parent().length) {
|
|
that.$layer.appendTo($body);
|
|
}
|
|
that.parent().length == 0 && that.appendTo($body);
|
|
that.css({
|
|
left: '-1000px',
|
|
top: '-1000px',
|
|
}).show();
|
|
var offset = self.options.element.offset(),
|
|
width = self.options.element.outerWidth(),
|
|
height = self.options.element.outerHeight(),
|
|
left = Ox.limit(
|
|
offset.left + self.options.offset.left + (self.options.side == 'bottom' ? 0 : width),
|
|
0, $window.width() - that.width()
|
|
),
|
|
top = offset.top + self.options.offset.top + (self.options.side == 'bottom' ? height : 0),
|
|
menuHeight = that.$content.outerHeight(); // fixme: why is outerHeight 0 when hidden?
|
|
menuMaxHeight = Math.floor($window.height() - top - 16);
|
|
if (self.options.parent) {
|
|
if (menuHeight > menuMaxHeight) {
|
|
top = Ox.limit(top - menuHeight + menuMaxHeight, self.options.parent.offset().top, top);
|
|
menuMaxHeight = Math.floor($window.height() - top - 16);
|
|
}
|
|
}
|
|
that.css({
|
|
left: left + 'px',
|
|
top: top + 'px'
|
|
});
|
|
if (menuHeight > menuMaxHeight) {
|
|
that.$container.height(menuMaxHeight - itemHeight - 8); // margin
|
|
that.$scrollbars.down.show();
|
|
} else {
|
|
that.$container.height(menuHeight);
|
|
}
|
|
if (!self.options.parent) {
|
|
that.gainFocus();
|
|
}
|
|
that.$layer.show();
|
|
return that;
|
|
//that.triggerEvent('show');
|
|
};
|
|
|
|
that.toggleMenu = function() {
|
|
that.is(':hidden') ? that.showMenu() : that.hideMenu();
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.MenuItem = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('tr', self)
|
|
.defaults({
|
|
bind: [], // fixme: what's this?
|
|
checked: null,
|
|
disabled: false,
|
|
group: '',
|
|
icon: '',
|
|
id: '',
|
|
items: [],
|
|
keyboard: '',
|
|
menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
|
|
position: 0,
|
|
title: [],
|
|
})
|
|
.options($.extend(options, {
|
|
keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
|
|
title: Ox.makeArray(options.title || self.defaults.title)
|
|
}))
|
|
.addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : ''))
|
|
.attr({
|
|
id: Ox.toCamelCase(self.options.menu.options('id') + '/' + self.options.id)
|
|
})
|
|
.data('group', self.options.group); // fixme: why?
|
|
|
|
if (self.options.group && self.options.checked === null) {
|
|
self.options.checked = false;
|
|
}
|
|
|
|
// construct
|
|
that.append(
|
|
that.$status = $('<td>', {
|
|
'class': 'OxCell OxStatus',
|
|
html: self.options.checked ? oxui.symbols.check : ''
|
|
})
|
|
)
|
|
.append(
|
|
that.$icon = $('<td>', {
|
|
'class': 'OxCell OxIcon'
|
|
})
|
|
.append(self.options.icon ?
|
|
$('<img>', {
|
|
src: self.options.icon
|
|
}) : null
|
|
)
|
|
)
|
|
.append(
|
|
that.$title = $('<td>', {
|
|
'class': 'OxCell OxTitle',
|
|
html: self.options.title[0]
|
|
})
|
|
)
|
|
.append(
|
|
$('<td>', {
|
|
'class': 'OxCell OxModifiers',
|
|
html: $.map(self.options.keyboard.modifiers, function(modifier) {
|
|
return oxui.symbols[modifier];
|
|
}).join('')
|
|
})
|
|
)
|
|
.append(
|
|
$('<td>', {
|
|
'class': 'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key'),
|
|
html: self.options.items.length ? oxui.symbols.triangle_right :
|
|
oxui.symbols[self.options.keyboard.key] ||
|
|
self.options.keyboard.key.toUpperCase()
|
|
})
|
|
);
|
|
|
|
function parseKeyboard(str) {
|
|
var modifiers = str.split(' '),
|
|
key = modifiers.pop();
|
|
return {
|
|
modifiers: modifiers,
|
|
key: key
|
|
};
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'checked') {
|
|
that.$status.html(value ? oxui.symbols.check : '')
|
|
} else if (key == 'disabled') {
|
|
that.toggleClass('OxDisabled'); // fixme: this will only work if onChange is only invoked on actual change
|
|
} else if (key == 'title') {
|
|
self.options.title = Ox.makeArray(value);
|
|
that.$title.html(self.options.title[0]);
|
|
}
|
|
}
|
|
|
|
that.toggle = function() {
|
|
// toggle id and title
|
|
};
|
|
|
|
that.toggleChecked = function() {
|
|
that.options({
|
|
checked: !self.options.checked
|
|
});
|
|
};
|
|
|
|
that.toggleDisabled = function() {
|
|
|
|
};
|
|
|
|
that.toggleTitle = function() {
|
|
Ox.print('s.o.t', self.options.title)
|
|
that.options({
|
|
title: self.options.title.reverse()
|
|
});
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/*
|
|
============================================================================
|
|
Panels
|
|
============================================================================
|
|
*/
|
|
|
|
/**
|
|
*/
|
|
Ox.CollapsePanel = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Panel({}, self)
|
|
.defaults({
|
|
collapsed: false,
|
|
menu: [],
|
|
size: 16,
|
|
title: ''
|
|
})
|
|
.options(options)
|
|
.addClass('OxCollapsePanel'),
|
|
title = self.options.collapsed ?
|
|
[{id: 'expand', title: 'expand'}, {id: 'collapse', title: 'collapse'}] :
|
|
[{id: 'collapse', title: 'collapse'}, {id: 'expand', title: 'expand'}],
|
|
$titlebar = new Ox.Bar({
|
|
orientation: 'horizontal',
|
|
size: self.options.size,
|
|
})
|
|
.dblclick(dblclickTitlebar)
|
|
.appendTo(that),
|
|
$switch = new Ox.Button({
|
|
id: self.options.id + 'Switch',
|
|
style: 'symbol',
|
|
title: title,
|
|
type: 'image',
|
|
})
|
|
.click(toggleCollapsed)
|
|
.appendTo($titlebar),
|
|
$title = new Ox.Element()
|
|
.addClass('OxTitle')
|
|
.html(self.options.title/*.toUpperCase()*/)
|
|
.appendTo($titlebar);
|
|
if (self.options.menu.length) {
|
|
that.$menu = new Ox.Select({
|
|
id: self.options.id + 'Menu',
|
|
items: self.options.menu,
|
|
max: 0,
|
|
min: 0,
|
|
type: 'image'
|
|
})
|
|
.bindEvent('click', clickMenu)
|
|
.appendTo($titlebar)
|
|
}
|
|
that.$content = new Ox.Element()
|
|
.addClass('OxContent')
|
|
.appendTo(that);
|
|
// fixme: doesn't work, content still empty
|
|
// need to hide it if collapsed
|
|
if (self.options.collapsed) {
|
|
that.$content.css({
|
|
marginTop: -that.$content.height() + 'px'
|
|
});
|
|
}
|
|
function clickMenu() {
|
|
|
|
}
|
|
function dblclickTitlebar(e) {
|
|
if (!$(e.target).hasClass('OxButton')) {
|
|
$switch.trigger('click');
|
|
}
|
|
}
|
|
function toggleCollapsed() {
|
|
var marginTop;
|
|
self.options.collapsed = !self.options.collapsed;
|
|
marginTop = self.options.collapsed ? -that.$content.height() : 0;
|
|
that.$content.animate({
|
|
marginTop: marginTop + 'px'
|
|
}, 200);
|
|
}
|
|
self.onChange = function(key, value) {
|
|
if (key == 'collapsed') {
|
|
|
|
} else if (key == 'title') {
|
|
$title.html(self.options.title);
|
|
}
|
|
};
|
|
return that;
|
|
};
|
|
|
|
/**
|
|
*/
|
|
Ox.Panel = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.addClass('OxPanel');
|
|
return that;
|
|
};
|
|
|
|
/**
|
|
options:
|
|
elements: [{ array of one, two or three elements
|
|
collapsible: false, collapsible or not (only for outer elements)
|
|
collapsed: false, collapsed or not (only for collapsible elements)
|
|
element: {}, OxElement (if any element is resizable or
|
|
collapsible, all OxElements must have an id)
|
|
resizable: false, resizable or not (only for outer elements)
|
|
resize: [], array of sizes (only for resizable elements,
|
|
first value is min, last value is max,
|
|
other values are 'snappy' points in between)
|
|
size: 0 size in px (one element must have no size)
|
|
}],
|
|
orientation: '' 'horizontal' or 'vertical'
|
|
events:
|
|
resize
|
|
toggle
|
|
*/
|
|
Ox.SplitPanel = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self) // fixme: Container
|
|
.defaults({
|
|
elements: [],
|
|
orientation: 'horizontal'
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxSplitPanel');
|
|
|
|
$.extend(self, {
|
|
dimensions: oxui.getDimensions(self.options.orientation),
|
|
edges: oxui.getEdges(self.options.orientation),
|
|
length: self.options.elements.length,
|
|
resizebarElements: [],
|
|
$resizebars: []
|
|
});
|
|
|
|
that.$elements = [];
|
|
|
|
$.each(self.options.elements, function(i, v) {
|
|
Ox.print('$$$$ v', v)
|
|
self.options.elements[i] = $.extend({
|
|
collapsible: false,
|
|
collapsed: false,
|
|
resizable: false,
|
|
resize: [],
|
|
size: 'auto'
|
|
}, v);
|
|
that.$elements[i] = v.element
|
|
.css(self.edges[2], 0)
|
|
.css(self.edges[3], 0);
|
|
});
|
|
|
|
$.each(self.options.elements, function(i, v) {
|
|
//that.append(element)
|
|
//Ox.print('V: ', v, that.$elements[i])
|
|
var index = i == 0 ? 0 : 1;
|
|
that.$elements[i].appendTo(that.$element); // fixme: that.$content
|
|
if (v.collapsible || v.resizable) {
|
|
Ox.print('v.size', v.size)
|
|
self.resizebarElements[index] = i < 2 ? [0, 1] : [1, 2];
|
|
self.$resizebars[index] = new Ox.Resizebar({
|
|
collapsible: v.collapsible,
|
|
edge: self.edges[index],
|
|
elements: [
|
|
that.$elements[self.resizebarElements[index][0]],
|
|
that.$elements[self.resizebarElements[index][1]]
|
|
],
|
|
id: v.element.options('id'),
|
|
orientation: self.options.orientation == 'horizontal' ? 'vertical' : 'horizontal',
|
|
parent: that, // fixme: that.$content
|
|
resizable: v.resizable,
|
|
resize: v.resize,
|
|
size: v.size
|
|
});
|
|
self.$resizebars[index][i == 0 ? 'insertAfter' : 'insertBefore'](that.$elements[i]);
|
|
}
|
|
});
|
|
|
|
setSizes();
|
|
|
|
function getPositionById(id) {
|
|
var position = -1;
|
|
$.each(self.options.elements, function(i, element) {
|
|
if (element.element.options('id') == id) {
|
|
position = i;
|
|
return false;
|
|
}
|
|
});
|
|
Ox.print('getPositionById', id, position);
|
|
return position;
|
|
}
|
|
|
|
function getSize(element) {
|
|
return element.size + element.resizable;
|
|
}
|
|
|
|
function setSizes() {
|
|
$.each(self.options.elements, function(i, v) {
|
|
v.size != 'auto' && that.$elements[i].css(self.dimensions[0], v.size + 'px');
|
|
if (i == 0) {
|
|
that.$elements[i].css(self.edges[0], 0);
|
|
that.$elements[i].css(
|
|
self.edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + 'px'
|
|
);
|
|
} else if (i == 1) {
|
|
that.$elements[i].css(
|
|
self.edges[0], 'auto'
|
|
);
|
|
self.options.elements[0].size != 'auto' && that.$elements[i].css(
|
|
self.edges[0], getSize(self.options.elements[0]) + 'px'
|
|
);
|
|
(self.options.elements[0].size != 'auto' || v.size != 'auto') && that.$elements[i].css(
|
|
self.edges[1], (self.length == 3 ? getSize(self.options.elements[2]) : 0) + 'px'
|
|
);
|
|
} else {
|
|
that.$elements[i].css(
|
|
self.edges[0], 'auto'
|
|
);
|
|
that.$elements[i].css(self.edges[1], 0);
|
|
v.size != 'auto' && that.$elements[i].css(
|
|
self.edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + 'px'
|
|
);
|
|
}
|
|
if (v.collapsible || v.resizable) {
|
|
self.$resizebars[i == 0 ? 0 : 1].css(self.edges[i == 0 ? 0 : 1], v.size);
|
|
}
|
|
});
|
|
}
|
|
|
|
that.isCollapsed = function(id) {
|
|
var pos = Ox.isNumber(id) ? id : getPositionById(id);
|
|
return self.options.elements[pos].collapsed;
|
|
};
|
|
|
|
that.replace = function(id, element) {
|
|
// one can pass pos instead of id
|
|
var pos = Ox.isNumber(id) ? id : getPositionById(id);
|
|
Ox.print('replace', pos, element);
|
|
Ox.print('element', self.options.elements[pos].element, element)
|
|
self.options.elements[pos].element.replaceWith(element.$element.$element || element.$element);
|
|
self.options.elements[pos].element = element;
|
|
that.$elements[pos] = element
|
|
.css(self.edges[2], 0)
|
|
.css(self.edges[3], 0);
|
|
setSizes();
|
|
self.$resizebars.forEach(function($resizebar, i) {
|
|
$resizebar.options({
|
|
elements: [
|
|
that.$elements[self.resizebarElements[i][0]],
|
|
that.$elements[self.resizebarElements[i][1]]
|
|
]
|
|
});
|
|
});
|
|
Ox.print(self.options.elements[pos])
|
|
return that;
|
|
};
|
|
|
|
that.replaceElements = function(elements) {
|
|
elements.forEach(function(element, i) {
|
|
if (Ox.isNumber(element.size)) {
|
|
that.size(i, element.size);
|
|
if (element.collapsible || element.resizable) {
|
|
self.$resizebars[i == 0 ? 0 : 1].options({
|
|
collapsible: element.collapsible,
|
|
resizable: element.resizable,
|
|
size: element.size
|
|
});
|
|
}
|
|
}
|
|
that.replace(i, element.element);
|
|
});
|
|
self.options.elements = elements;
|
|
self.$resizebars.forEach(function($resizebar, i) {
|
|
$resizebar.options({
|
|
elements: [
|
|
that.$elements[self.resizebarElements[i][0]],
|
|
that.$elements[self.resizebarElements[i][1]]
|
|
]
|
|
});
|
|
});
|
|
return that;
|
|
}
|
|
|
|
that.size = function(id, size) {
|
|
// one can pass pos instead of id
|
|
var pos = Ox.isNumber(id) ? id : getPositionById(id),
|
|
element = self.options.elements[pos];
|
|
Ox.print('pos', pos, 'size', size);
|
|
if (arguments.length == 1) {
|
|
Ox.print('get size', self.options.id, id, element.element[self.dimensions[0]]() * !that.isCollapsed(pos))
|
|
return element.element[self.dimensions[0]]() * !that.isCollapsed(pos);
|
|
} else {
|
|
Ox.print('set size', self.options.id, id, size)
|
|
element.size = size;
|
|
setSizes();
|
|
return that;
|
|
}
|
|
};
|
|
|
|
that.toggle = function(id) {
|
|
// one can pass pos instead of id
|
|
Ox.print('toggle', id);
|
|
/*
|
|
// something like this is needed to load in collapsed state
|
|
if (Ox.isUndefined(self.options.position)) {
|
|
self.options.position = parseInt(self.options.parent.css(self.options.edge)) +
|
|
(self.options.collapsed ? self.options.size : 0);
|
|
}
|
|
var size = self.options.position -
|
|
(self.options.collapsed ? 0 : self.options.size),
|
|
animate = {};
|
|
Ox.print('s.o.e', self.options.edge);
|
|
*/
|
|
Ox.print('!!!! element', self.options.elements[getPositionById(id)], getPositionById(id), id);
|
|
var pos = Ox.isNumber(id) ? id : getPositionById(id),
|
|
element = self.options.elements[pos],
|
|
value = parseInt(that.css(self.edges[pos == 0 ? 0 : 1])) +
|
|
element.element[self.dimensions[0]]() *
|
|
(element.collapsed ? 1 : -1),
|
|
animate = {};
|
|
Ox.print('===', parseInt(that.css(self.edges[0])), element.element[self.dimensions[0]]())
|
|
animate[self.edges[pos == 0 ? 0 : 1]] = value;
|
|
Ox.print('animate', animate, 'value', value)
|
|
that.animate(animate, 200, function() {
|
|
var element = self.options.elements[pos == 0 ? 1 : pos - 1].element;
|
|
self.options.elements[pos].collapsed = !self.options.elements[pos].collapsed;
|
|
Ox.print('after animation, element', element, element.id, element.options('id'))
|
|
element.triggerEvent(
|
|
'resize',
|
|
element[self.dimensions[0]]()
|
|
);
|
|
});
|
|
};
|
|
|
|
that.updateSize = function(id, size) {
|
|
// this is called from resizebar
|
|
// one can pass pos instead of id
|
|
Ox.print('updateSize', self.options.id, id, size);
|
|
var pos = Ox.isNumber(id) ? id : getPositionById(id);
|
|
self.options.elements[pos].size = size;
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
Ox.TabPanel = function(options, self) {
|
|
|
|
};
|
|
|
|
/*
|
|
============================================================================
|
|
Requests
|
|
============================================================================
|
|
*/
|
|
|
|
/**
|
|
*/
|
|
Ox.LoadingIcon = function(options, self) {
|
|
var self = self || {},
|
|
that = new Ox.Element('img', self)
|
|
.defaults({
|
|
size: 'medium'
|
|
})
|
|
.options(options || {})
|
|
.attr({
|
|
src: oxui.path + '/png/ox.ui.' + Ox.theme() + '/loading.png' // fixme: oxui.themePath needed?
|
|
})
|
|
.addClass(
|
|
'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size)
|
|
);
|
|
self.deg = 0;
|
|
self.interval = 0;
|
|
self.isRunning = false;
|
|
function clear() {
|
|
clearInterval(self.interval);
|
|
self.deg = 0;
|
|
self.interval = 0;
|
|
update();
|
|
}
|
|
function update() {
|
|
that.css({
|
|
MozTransform: 'rotate(' + self.deg + 'deg)',
|
|
WebkitTransform: 'rotate(' + self.deg + 'deg)'
|
|
});
|
|
}
|
|
that.start = function() {
|
|
self.isRunning = true;
|
|
clear();
|
|
that.animate({
|
|
opacity: 1
|
|
}, 250);
|
|
self.interval = setInterval(function() {
|
|
self.deg = (self.deg + 30) % 360;
|
|
update();
|
|
}, 83);
|
|
return that;
|
|
};
|
|
that.stop = function() {
|
|
that.animate({
|
|
opacity: 0
|
|
}, 250, function() {
|
|
!self.isRunning && clear();
|
|
self.isRunning = false;
|
|
});
|
|
return that;
|
|
}
|
|
return that;
|
|
}
|
|
|
|
/**
|
|
Ox.Progressbar
|
|
*/
|
|
|
|
|
|
/*
|
|
============================================================================
|
|
Video
|
|
============================================================================
|
|
*/
|
|
|
|
/**
|
|
*/
|
|
Ox.LargeTimeline = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
cuts: [],
|
|
duration: 0,
|
|
find: '',
|
|
matches: [],
|
|
points: [0, 0],
|
|
position: 0,
|
|
style: 'default',
|
|
subtitles: [],
|
|
videoId: '',
|
|
width: 0
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxTimelineLarge')
|
|
.mousedown(mousedown)
|
|
.mouseleave(mouseleave)
|
|
.mousemove(mousemove);
|
|
|
|
$.extend(self, {
|
|
$cuts: [],
|
|
$markerPoint: [],
|
|
$subtitles: [],
|
|
$tiles: {},
|
|
$tooltip: new Ox.Tooltip(),
|
|
center: parseInt(self.options.width / 2),
|
|
element: that.$element[0],
|
|
fps: 25,
|
|
height: 64,
|
|
tileWidth: 1500
|
|
});
|
|
self.tiles = self.options.duration * self.fps / self.tileWidth;
|
|
|
|
self.$timeline = $('<div>')
|
|
.css({
|
|
left: self.center + 'px'
|
|
})
|
|
.appendTo(that.$element)
|
|
|
|
$.each(self.options.subtitles, function(i, v) {
|
|
self.$subtitles[i] = $('<div>')
|
|
.addClass('OxSubtitle' + (self.options.matches.indexOf(i) > -1 ? ' OxHighlight' : ''))
|
|
.css({
|
|
left: (v['in'] * self.fps) + 'px',
|
|
width: (((v['out'] - v['in']) * self.fps) - 4) + 'px'
|
|
})
|
|
.html(Ox.highlight(v.text, self.options.find))
|
|
.appendTo(self.$timeline)
|
|
});
|
|
|
|
$.each(self.options.cuts, function(i, v) {
|
|
self.$cuts[i] = $('<img>')
|
|
.addClass('OxCut')
|
|
.attr({
|
|
src: '/static/oxjs/build/png/ox.ui/videoMarkerCut.png'
|
|
})
|
|
.css({
|
|
left: (v * self.fps) + 'px'
|
|
})
|
|
.appendTo(self.$timeline)
|
|
});
|
|
|
|
self.$markerPosition = $('<img>')
|
|
.addClass('OxMarkerPosition')
|
|
.attr({
|
|
src: '/static/oxjs/build/png/ox.ui/videoMarkerPlay.png'
|
|
})
|
|
.appendTo(that.$element);
|
|
setMarker();
|
|
|
|
$.each(['In', 'Out'], function(i, v) {
|
|
self.$markerPoint[i] = $('<img>')
|
|
.addClass('OxMarkerPoint' + v)
|
|
.attr({
|
|
src: '/static/oxjs/build/png/ox.ui/videoMarker' + v + '.png'
|
|
})
|
|
.appendTo(self.$timeline);
|
|
setMarkerPoint(i);
|
|
});
|
|
|
|
setWidth();
|
|
setPosition();
|
|
|
|
function mousedown(e) {
|
|
var mousemove = false,
|
|
x = e.clientX;
|
|
$window.mousemove(function(e) {
|
|
mousemove = true;
|
|
self.options.position = Ox.limit(
|
|
self.options.position + (x - e.clientX) / self.fps,
|
|
0, self.options.duration
|
|
);
|
|
x = e.clientX;
|
|
setPosition();
|
|
that.triggerEvent('change', {
|
|
position: self.options.position
|
|
});
|
|
});
|
|
$window.one('mouseup', function() {
|
|
$window.unbind('mousemove');
|
|
if (!mousemove) {
|
|
self.options.position = Ox.limit(
|
|
self.options.position + (e.clientX - that.$element.offset().left - self.center) / self.fps,
|
|
0, self.options.duration
|
|
);
|
|
setPosition();
|
|
}
|
|
that.triggerEvent('change', {
|
|
position: self.options.position
|
|
});
|
|
});
|
|
e.preventDefault();
|
|
}
|
|
|
|
function mouseleave(e) {
|
|
self.clientX = 0;
|
|
self.clientY = 0;
|
|
self.$tooltip.hide();
|
|
}
|
|
|
|
function mousemove(e) {
|
|
self.clientX = e.clientX;
|
|
self.clientY = e.clientY;
|
|
updateTooltip();
|
|
}
|
|
|
|
function setMarkerPoint(i) {
|
|
self.$markerPoint[i].css({
|
|
left: (self.options.points[i] * self.fps) + 'px'
|
|
});
|
|
}
|
|
|
|
function setMarker() {
|
|
self.$markerPosition.css({
|
|
left: (self.center - 4) + 'px',
|
|
});
|
|
}
|
|
|
|
function setPosition() {
|
|
self.tile = parseInt(self.options.position * self.fps / self.tileWidth);
|
|
self.$timeline.css({
|
|
marginLeft: (-self.options.position * self.fps) + 'px'
|
|
});
|
|
$.each(Ox.range(Math.max(self.tile - 1, 0), Math.min(self.tile + 2, self.tiles)), function(i, v) {
|
|
if (!self.$tiles[v]) {
|
|
self.$tiles[v] = $('<img>')
|
|
.attr({
|
|
src: '/' + self.options.videoId + '/timelines/' +
|
|
(self.options.style == 'default' ? 'timeline' : self.options.style) + '.64.' + v + '.png'
|
|
})
|
|
.css({
|
|
left: (v * self.tileWidth) + 'px'
|
|
})
|
|
.appendTo(self.$timeline);
|
|
}
|
|
});
|
|
if (self.clientX && self.clientY) {
|
|
updateTooltip();
|
|
}
|
|
}
|
|
|
|
function setWidth() {
|
|
self.center = parseInt(self.options.width / 2);
|
|
that.css({
|
|
width: self.options.width + 'px'
|
|
});
|
|
self.$timeline.css({
|
|
left: self.center + 'px'
|
|
});
|
|
setMarker();
|
|
}
|
|
|
|
function updateTooltip() {
|
|
var position = self.options.position + (self.clientX - that.offset().left - self.center) / self.fps;
|
|
if (position >= 0 && position <= self.options.duration) {
|
|
self.$tooltip
|
|
.options({
|
|
title: Ox.formatDuration(position, 3)
|
|
})
|
|
.show(self.clientX, self.clientY);
|
|
} else {
|
|
self.$tooltip.hide();
|
|
}
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'points') {
|
|
setMarkerPoint(0);
|
|
setMarkerPoint(1);
|
|
} else if (key == 'position') {
|
|
setPosition();
|
|
} else if (key == 'width') {
|
|
setWidth();
|
|
}
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
*/
|
|
Ox.SmallTimeline = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
cuts: [],
|
|
duration: 0,
|
|
find: '',
|
|
matches: [],
|
|
points: [0, 0],
|
|
position: 0,
|
|
subtitles: [],
|
|
videoId: '',
|
|
width: 0
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxTimelineSmall')
|
|
.mousedown(mousedown)
|
|
.mouseleave(mouseleave)
|
|
.mousemove(mousemove);
|
|
|
|
$.extend(self, {
|
|
$images: [],
|
|
$lines: [],
|
|
$markerPoint: [],
|
|
$subtitles: [],
|
|
hasSubtitles: self.options.subtitles.length,
|
|
height: 16,
|
|
lines: Math.ceil(self.options.duration / self.options.width),
|
|
margin: 8
|
|
});
|
|
|
|
that.css({
|
|
width: (self.options.width + self.margin) + 'px',
|
|
height: ((self.height + self.margin) * self.lines + 4) + 'px'
|
|
});
|
|
|
|
getTimelineImageURL(function(url) {
|
|
|
|
self.timelineImageURL = url;
|
|
|
|
$.each(Ox.range(0, self.lines), function(i) {
|
|
addLine(i);
|
|
});
|
|
|
|
self.$markerPosition = $('<img>')
|
|
.addClass('OxMarkerPosition')
|
|
.attr({
|
|
src: '/static/oxjs/build/png/ox.ui/videoMarkerPlay.png'
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
width: '9px',
|
|
height: '5px',
|
|
zIndex: 10
|
|
})
|
|
.appendTo(that.$element);
|
|
|
|
setPosition();
|
|
|
|
$.each(['in', 'out'], function(i, v) {
|
|
var titleCase = Ox.toTitleCase(v);
|
|
self.$markerPoint[i] = $('<img>')
|
|
.addClass('OxMarkerPoint' + titleCase)
|
|
.attr({
|
|
src: '/static/oxjs/build/png/ox.ui/videoMarker' + titleCase + '.png'
|
|
})
|
|
.appendTo(that.$element);
|
|
setMarkerPoint(i);
|
|
});
|
|
|
|
});
|
|
|
|
function addLine(i) {
|
|
self.$lines[i] = new Ox.Element('div')
|
|
.css({
|
|
top: i * (self.height + self.margin) + 'px',
|
|
width: self.options.width + 'px'
|
|
})
|
|
.appendTo(that);
|
|
self.$images[i] = $('<img>')
|
|
.addClass('OxTimelineSmallImage')
|
|
.attr({
|
|
src: self.timelineImageURL
|
|
})
|
|
.css({
|
|
marginLeft: (-i * self.options.width) + 'px'
|
|
})
|
|
.appendTo(self.$lines[i].$element)
|
|
if (self.hasSubtitles) {
|
|
self.subtitlesImageURL = getSubtitlesImageURL();
|
|
self.$subtitles[i] = $('<img>')
|
|
.attr({
|
|
src: self.subtitlesImageURL
|
|
})
|
|
.css({
|
|
marginLeft: (-i * self.options.width) + 'px'
|
|
})
|
|
.appendTo(self.$lines[i].$element);
|
|
}
|
|
}
|
|
|
|
function getPosition(e) {
|
|
//FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
|
|
return (e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left);
|
|
}
|
|
|
|
function getSubtitle(position) {
|
|
var subtitle = null;
|
|
$.each(self.options.subtitles, function(i, v) {
|
|
if (v['in'] <= position && v['out'] >= position) {
|
|
subtitle = v;
|
|
return false;
|
|
}
|
|
});
|
|
return subtitle;
|
|
}
|
|
|
|
function getSubtitlesImageURL() {
|
|
var height = 18,
|
|
width = Math.ceil(self.options.duration),
|
|
$canvas = $('<canvas>')
|
|
.attr({
|
|
height: height,
|
|
width: width
|
|
}),
|
|
canvas = $canvas[0],
|
|
context = canvas.getContext('2d'),
|
|
imageData = context.createImageData(width, height),
|
|
data = imageData.data;
|
|
$.each(self.options.subtitles, function(i, v) {
|
|
var color = self.options.matches.indexOf(i) > -1 ? [255, 255, 0] : [255, 255, 255]
|
|
$.each(Ox.range(
|
|
Math.round(v['in']),
|
|
Math.round(v['out']) + 1
|
|
), function(i, x) {
|
|
$.each(Ox.range(0, 18), function(i, y) {
|
|
var index = x * 4 + y * 4 * width;
|
|
data[index] = color[0];
|
|
data[index + 1] = color[1];
|
|
data[index + 2] = color[2];
|
|
data[index + 3] = (y == 0 || y == 17) ? 255 : 128
|
|
});
|
|
});
|
|
});
|
|
context.putImageData(imageData, 0, 0);
|
|
return canvas.toDataURL();
|
|
}
|
|
|
|
function getTimelineImageURL(callback) {
|
|
var height = 16,
|
|
images = Math.ceil(self.options.duration / 3600),
|
|
loaded = 0,
|
|
width = Math.ceil(self.options.duration),
|
|
$canvas = $('<canvas>')
|
|
.attr({
|
|
height: height,
|
|
width: width
|
|
}),
|
|
canvas = $canvas[0],
|
|
context = canvas.getContext('2d');
|
|
Ox.range(images).forEach(function(i) {
|
|
var $img = $('<img>')
|
|
.attr({
|
|
src: '/' + self.options.videoId + '/timelines/timeline.16.' + i + '.png'
|
|
})
|
|
.load(function() {
|
|
context.drawImage($img[0], i * 3600, 0);
|
|
Ox.print('loaded, images', loaded, images, $img[0])
|
|
if (++loaded == images) {
|
|
Ox.print('callback', canvas.toDataURL().length)
|
|
callback(canvas.toDataURL());
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function mousedown(e) {
|
|
if ($(e.target).is('img')) {
|
|
self.options.position = getPosition(e);
|
|
setPosition();
|
|
that.triggerEvent('change', {
|
|
position: self.options.position
|
|
});
|
|
}
|
|
$window.mousemove(function(e) {
|
|
if ($(e.target).is('img')) {
|
|
self.options.position = getPosition(e);
|
|
setPosition();
|
|
that.triggerEvent('change', {
|
|
position: self.options.position
|
|
});
|
|
}
|
|
});
|
|
$window.one('mouseup', function() {
|
|
$window.unbind('mousemove');
|
|
})
|
|
e.preventDefault();
|
|
}
|
|
|
|
function mouseleave(e) {
|
|
self.$tooltip.hide();
|
|
}
|
|
|
|
function mousemove(e) {
|
|
var $target = $(e.target),
|
|
position,
|
|
subtitle;
|
|
if ($target.is('img')) {
|
|
//FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
|
|
position = getPosition(e),
|
|
subtitle = getSubtitle(position);
|
|
Ox.print('position', position, e)
|
|
self.$tooltip = new Ox.Tooltip({
|
|
title: subtitle ?
|
|
'<span class=\'OxBright\'>' +
|
|
Ox.highlight(subtitle.text, self.options.find).replace(/\n/g, '<br/>') + '</span><br/>' +
|
|
Ox.formatDuration(subtitle['in'], 3) + ' - ' + Ox.formatDuration(subtitle['out'], 3) :
|
|
Ox.formatDuration(position, 3)
|
|
})
|
|
.css({
|
|
textAlign: 'center'
|
|
})
|
|
.show(e.clientX, e.clientY);
|
|
}
|
|
|
|
}
|
|
|
|
function setMarker() {
|
|
self.$markerPosition
|
|
.css({
|
|
left: (self.options.position % self.options.width) + 'px',
|
|
top: (parseInt(self.options.position / self.options.width) * (self.height + self.margin) + 2) + 'px',
|
|
});
|
|
}
|
|
|
|
function setMarkerPoint(i) {
|
|
var position = self.options.points[i];
|
|
self.$markerPoint[i]
|
|
.css({
|
|
left: (position % self.options.width) + 'px',
|
|
top: (parseInt(position / self.options.width) * (self.height + self.margin) + 16) + 'px',
|
|
});
|
|
}
|
|
|
|
function setPosition() {
|
|
self.options.position = Ox.limit(self.options.position, 0, self.options.duration);
|
|
setMarker();
|
|
}
|
|
|
|
function setWidth() {
|
|
self.lines = Math.ceil(self.options.duration / self.options.width);
|
|
that.css({
|
|
width: (self.options.width + self.margin) + 'px',
|
|
height: ((self.height + self.margin) * self.lines + 4) + 'px'
|
|
});
|
|
$.each(Ox.range(self.lines), function(i) {
|
|
if (self.$lines[i]) {
|
|
self.$lines[i].css({
|
|
width: self.options.width + 'px'
|
|
});
|
|
self.$images[i].css({
|
|
marginLeft: (-i * self.options.width) + 'px'
|
|
});
|
|
if (self.hasSubtitles) {
|
|
self.$subtitles[i].css({
|
|
marginLeft: (-i * self.options.width) + 'px'
|
|
});
|
|
}
|
|
} else {
|
|
addLine(i);
|
|
}
|
|
});
|
|
while (self.$lines.length > self.lines) {
|
|
self.$lines[self.$lines.length - 1].remove();
|
|
self.$lines.pop();
|
|
}
|
|
setMarker();
|
|
setMarkerPoint(0);
|
|
setMarkerPoint(1);
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
Ox.print('onChange:', key, value)
|
|
if (key == 'points') {
|
|
Ox.print('key', key, 'value', value)
|
|
setMarkerPoint(0);
|
|
setMarkerPoint(1);
|
|
} else if (key == 'position') {
|
|
setPosition();
|
|
} else if (key == 'width') {
|
|
setWidth();
|
|
}
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
*/
|
|
Ox.VideoEditor = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
cuts: [],
|
|
duration: 0,
|
|
find: '',
|
|
frameURL: function() {},
|
|
height: 0,
|
|
largeTimeline: true,
|
|
matches: [],
|
|
points: [0, 0],
|
|
position: 0,
|
|
posterFrame: 0,
|
|
subtitles: [],
|
|
videoHeight: 0,
|
|
videoId: '',
|
|
videoWidth: 0,
|
|
videoSize: 'small',
|
|
videoURL: '',
|
|
width: 0
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxEditor');
|
|
/*.css({
|
|
//height: self.options.height + 'px',
|
|
overflowY: 'scroll',
|
|
//width: self.options.width + 'px'
|
|
});*/
|
|
|
|
$.extend(self, {
|
|
$player: [],
|
|
$timeline: [],
|
|
controlsHeight: 16,
|
|
margin: 8,
|
|
videoRatio: self.options.videoWidth / self.options.videoHeight
|
|
});
|
|
self.sizes = getSizes();
|
|
|
|
$.each(['play', 'in', 'out'], function(i, type) {
|
|
self.$player[i] = new Ox.VideoPlayer({
|
|
duration: self.options.duration,
|
|
find: self.options.find,
|
|
height: self.sizes.player[i].height,
|
|
id: 'player' + Ox.toTitleCase(type),
|
|
points: self.options.points,
|
|
position: type == 'play' ? self.options.position : self.options.points[type == 'in' ? 0 : 1],
|
|
posterFrame: self.options.posterFrame,
|
|
subtitles: self.options.subtitles,
|
|
type: type,
|
|
url: type == 'play' ? self.options.videoURL : self.options.frameURL,
|
|
width: self.sizes.player[i].width
|
|
})
|
|
.css({
|
|
left: self.sizes.player[i].left + 'px',
|
|
top: self.sizes.player[i].top + 'px'
|
|
})
|
|
.appendTo(that);
|
|
if (type == 'in' || type == 'out') {
|
|
self.$player[i].bindEvent({
|
|
change: function() {
|
|
goToPoint(type);
|
|
},
|
|
set: function() {
|
|
setPoint(type);
|
|
}
|
|
})
|
|
}
|
|
});
|
|
self.$player[0].bindEvent({
|
|
change: changePlayer,
|
|
togglesize: togglePlayerSize
|
|
});
|
|
|
|
self.$timeline[0] = new Ox.LargeTimeline({
|
|
cuts: self.options.cuts,
|
|
duration: self.options.duration,
|
|
find: self.options.find,
|
|
id: 'timelineLarge',
|
|
matches: self.options.matches,
|
|
points: self.options.points,
|
|
position: self.options.position,
|
|
subtitles: self.options.subtitles,
|
|
videoId: self.options.videoId,
|
|
width: self.sizes.timeline[0].width
|
|
})
|
|
.css({
|
|
left: self.sizes.timeline[0].left + 'px',
|
|
top: self.sizes.timeline[0].top + 'px'
|
|
})
|
|
.bindEvent('change', changeTimelineLarge)
|
|
.bindEvent('changeEnd', changeTimelineLarge)
|
|
.appendTo(that);
|
|
|
|
self.$timeline[1] = new Ox.SmallTimeline({
|
|
cuts: self.options.cuts,
|
|
duration: self.options.duration,
|
|
find: self.options.find,
|
|
id: 'timelineSmall',
|
|
matches: self.options.matches,
|
|
points: self.options.points,
|
|
position: self.options.position,
|
|
subtitles: self.options.subtitles,
|
|
videoId: self.options.videoId,
|
|
width: self.sizes.timeline[1].width
|
|
})
|
|
.css({
|
|
left: self.sizes.timeline[1].left + 'px',
|
|
top: self.sizes.timeline[1].top + 'px'
|
|
})
|
|
.bindEvent('change', changeTimelineSmall)
|
|
.appendTo(that);
|
|
|
|
that.bindEvent({
|
|
key_alt_left: function() {
|
|
movePositionTo('cut', -1);
|
|
},
|
|
key_alt_right: function() {
|
|
movePositionTo('cut', 1);
|
|
},
|
|
key_alt_shift_left: function() {
|
|
},
|
|
key_alt_shift_right: function() {
|
|
},
|
|
key_closebracket: function() {
|
|
goToPoint('out');
|
|
},
|
|
key_comma: function() {
|
|
movePositionTo('subtitle', -1);
|
|
},
|
|
key_dot: function() {
|
|
movePositionTo('subtitle', 1);
|
|
},
|
|
key_down: function() {
|
|
movePositionBy(self.options.width - 2 * self.margin);
|
|
},
|
|
key_i: function() {
|
|
setPoint('in');
|
|
},
|
|
key_left: function() {
|
|
movePositionBy(-1);
|
|
},
|
|
key_m: toggleMute,
|
|
key_o: function() {
|
|
setPoint('out');
|
|
},
|
|
key_openbracket: function() {
|
|
goToPoint('in');
|
|
},
|
|
key_p: playInToOut,
|
|
key_right: function() {
|
|
movePositionBy(1);
|
|
},
|
|
key_shift_comma: function() {
|
|
movePositionTo('match', -1)
|
|
},
|
|
key_shift_dot: function() {
|
|
movePositionTo('match', 1)
|
|
},
|
|
key_shift_down: function() {
|
|
movePositionBy(self.options.duration);
|
|
},
|
|
key_shift_left: function() {
|
|
movePositionBy(-0.04);
|
|
//movePositionBy(-60);
|
|
},
|
|
key_shift_right: function() {
|
|
movePositionBy(0.04);
|
|
//movePositionBy(60);
|
|
},
|
|
key_shift_up: function() {
|
|
movePositionBy(-self.options.duration);
|
|
},
|
|
key_space: togglePlay,
|
|
key_up: function() {
|
|
movePositionBy(-(self.options.width - 2 * self.margin));
|
|
}
|
|
});
|
|
|
|
that.gainFocus();
|
|
|
|
function changePlayer(event, data) {
|
|
self.options.position = data.position;
|
|
self.$timeline[0].options({
|
|
position: data.position
|
|
});
|
|
self.$timeline[1].options({
|
|
position: data.position
|
|
});
|
|
}
|
|
|
|
function changeTimelineLarge(event, data) {
|
|
self.options.position = data.position;
|
|
self.$player[0].options({
|
|
position: data.position
|
|
});
|
|
self.$timeline[1].options({
|
|
position: data.position
|
|
});
|
|
}
|
|
|
|
function changeTimelineSmall(event, data) {
|
|
self.options.position = data.position;
|
|
self.$player[0].options({
|
|
position: data.position
|
|
});
|
|
self.$timeline[0].options({
|
|
position: data.position
|
|
});
|
|
}
|
|
|
|
function getNextPosition(type, direction) {
|
|
var found = false,
|
|
position = 0,
|
|
positions;
|
|
if (type == 'cut') {
|
|
positions = self.options.cuts;
|
|
} else if (type == 'match') {
|
|
positions = $.map(self.options.matches, function(v, i) {
|
|
return self.options.subtitles[v]['in'];
|
|
});
|
|
} else if (type == 'subtitle') {
|
|
positions = $.map(self.options.subtitles, function(v, i) {
|
|
return v['in'];
|
|
});
|
|
}
|
|
direction == -1 && positions.reverse();
|
|
$.each(positions, function(i, v) {
|
|
if (direction == 1 ? v > self.options.position : v < self.options.position) {
|
|
position = v;
|
|
found = true;
|
|
return false;
|
|
}
|
|
});
|
|
direction == -1 && positions.reverse();
|
|
if (!found) {
|
|
position = positions[direction == 1 ? 0 : positions.length - 1];
|
|
}
|
|
return position;
|
|
}
|
|
|
|
function getSizes(scrollbarIsVisible) {
|
|
Ox.print('getSizes', scrollbarIsVisible)
|
|
var scrollbarWidth = oxui.scrollbarSize,
|
|
contentWidth = self.options.width - (scrollbarIsVisible ? scrollbarWidth : 0),
|
|
lines,
|
|
size = {
|
|
player: [],
|
|
timeline: []
|
|
},
|
|
width, widths;
|
|
if (self.options.videoSize == 'small') {
|
|
width = 0;
|
|
widths = Ox.divideInt(contentWidth - 4 * self.margin, 3);
|
|
[1, 0, 2].forEach(function(v, i) {
|
|
size.player[v] = {
|
|
left: (i + 0.5) * self.margin + width,
|
|
top: self.margin / 2,
|
|
width: widths[i],
|
|
height: Math.round(widths[1] / self.videoRatio)
|
|
}
|
|
width += widths[i];
|
|
});
|
|
} else {
|
|
size.player[0] = {
|
|
left: self.margin / 2,
|
|
top: self.margin / 2,
|
|
width: Math.round((contentWidth - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.videoRatio) * 2/3),
|
|
}
|
|
size.player[0].height = Math.round(size.player[0].width / self.videoRatio);
|
|
size.player[1] = {
|
|
left: size.player[0].left + size.player[0].width + self.margin,
|
|
top: size.player[0].top,
|
|
width: contentWidth - 3 * self.margin - size.player[0].width
|
|
}
|
|
size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio)
|
|
size.player[2] = {
|
|
left: size.player[1].left,
|
|
top: size.player[0].top + size.player[1].height + self.controlsHeight + self.margin,
|
|
width: size.player[1].width,
|
|
height: size.player[0].height - size.player[1].height - self.controlsHeight - self.margin
|
|
}
|
|
}
|
|
size.timeline[0] = {
|
|
left: self.margin / 2,
|
|
top: size.player[0].height + self.controlsHeight + 1.5 * self.margin,
|
|
width: contentWidth - 2 * self.margin,
|
|
height: 64
|
|
}
|
|
size.timeline[1] = {
|
|
left: size.timeline[0].left,
|
|
top: size.timeline[0].top + size.timeline[0].height + self.margin,
|
|
width: size.timeline[0].width
|
|
}
|
|
lines = Math.ceil(self.options.duration / size.timeline[1].width);
|
|
Ox.print('lines', lines, getHeight(), self.options.height, (scrollbarIsVisible && getHeight() <= self.options.height) ? 'scroll' : 'auto')
|
|
that.css({
|
|
overflowY: (scrollbarIsVisible && getHeight() <= self.options.height) ? 'scroll' : 'auto'
|
|
});
|
|
return (!scrollbarIsVisible && getHeight() > self.options.height) ? getSizes(true) : size;
|
|
function getHeight() {
|
|
return size.player[0].height + self.controlsHeight +
|
|
size.timeline[0].height + lines * 16 +
|
|
(lines + 3) * self.margin;
|
|
}
|
|
}
|
|
|
|
function goToPoint(point) {
|
|
self.options.position = self.options.points[point == 'in' ? 0 : 1];
|
|
setPosition();
|
|
that.triggerEvent('change', {
|
|
position: self.options.position
|
|
});
|
|
}
|
|
|
|
function movePositionBy(sec) {
|
|
self.options.position = Ox.limit(self.options.position + sec, 0, self.options.duration);
|
|
setPosition();
|
|
that.triggerEvent('change', {
|
|
position: self.options.position
|
|
});
|
|
}
|
|
|
|
function movePositionTo(type, direction) {
|
|
self.options.position = getNextPosition(type, direction);
|
|
setPosition();
|
|
that.triggerEvent('change', {
|
|
position: self.options.position
|
|
});
|
|
}
|
|
|
|
function playInToOut() {
|
|
self.$player[0].playInToOut();
|
|
}
|
|
|
|
function resizeEditor(event, data) {
|
|
var width = data - 2 * margin + 100;
|
|
resizeVideoPlayers(width);
|
|
$timelineLarge.options({
|
|
width: width
|
|
});
|
|
$timelineSmall.options({
|
|
width: width
|
|
});
|
|
}
|
|
|
|
function resizePlayers() {
|
|
$.each(self.$player, function(i, v) {
|
|
v.options({
|
|
width: size[i].width,
|
|
height: size[i].height
|
|
})
|
|
.css({
|
|
left: size[i].left + 'px',
|
|
top: size[i].top + 'px',
|
|
});
|
|
});
|
|
}
|
|
|
|
function setPoint(point) {
|
|
self.options.points[point == 'in' ? 0 : 1] = self.options.position;
|
|
self.$player[point == 'in' ? 1 : 2].options({
|
|
position: self.options.position
|
|
});
|
|
if (self.options.points[1] < self.options.points[0]) {
|
|
self.options.points[point == 'in' ? 1 : 0] = self.options.position;
|
|
self.$player[point == 'in' ? 2 : 1].options({
|
|
position: self.options.position
|
|
});
|
|
}
|
|
$.each(self.$player, function(i, v) {
|
|
v.options({
|
|
points: self.options.points
|
|
});
|
|
});
|
|
$.each(self.$timeline, function(i, v) {
|
|
Ox.print('points:', self.options.points)
|
|
v.options({
|
|
points: self.options.points
|
|
});
|
|
});
|
|
}
|
|
|
|
function setPosition() {
|
|
self.$player[0].options({
|
|
position: self.options.position
|
|
});
|
|
$.each(self.$timeline, function(i, v) {
|
|
v.options({
|
|
position: self.options.position
|
|
});
|
|
});
|
|
}
|
|
|
|
function setSizes() {
|
|
self.sizes = getSizes();
|
|
$.each(self.$player, function(i, v) {
|
|
v.options({
|
|
height: self.sizes.player[i].height,
|
|
width: self.sizes.player[i].width
|
|
})
|
|
.css({
|
|
left: self.sizes.player[i].left + 'px',
|
|
top: self.sizes.player[i].top + 'px'
|
|
});
|
|
});
|
|
$.each(self.$timeline, function(i, v) {
|
|
v.options({
|
|
width: self.sizes.timeline[i].width
|
|
})
|
|
.css({
|
|
left: self.sizes.timeline[i].left + 'px',
|
|
top: self.sizes.timeline[i].top + 'px'
|
|
});
|
|
});
|
|
}
|
|
|
|
function toggleMute() {
|
|
self.$player[0].toggleMute();
|
|
}
|
|
|
|
function togglePlay() {
|
|
self.$player[0].togglePlay();
|
|
}
|
|
|
|
function togglePlayerSize() {
|
|
self.options.videoSize = self.options.videoSize == 'large' ? 'small' : 'large';
|
|
setSizes();
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'width' || key == 'height') {
|
|
Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height)
|
|
setSizes();
|
|
}
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
/**
|
|
*/
|
|
Ox.VideoPlayer = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
find: '',
|
|
height: 0,
|
|
points: [0, 0],
|
|
position: 0,
|
|
posterFrame: 0,
|
|
subtitles: [],
|
|
type: 'play',
|
|
url: '',
|
|
width: 0
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxVideoPlayer')
|
|
.css({
|
|
height: (self.options.height + 16) + 'px',
|
|
width: self.options.width + 'px'
|
|
});
|
|
|
|
self.controlsHeight = 16;
|
|
|
|
if (self.options.type == 'play') {
|
|
self.$video = $('<video>')
|
|
.attr({
|
|
preload: 'auto',
|
|
src: self.options.url
|
|
})
|
|
.css({
|
|
height: self.options.height + 'px',
|
|
width: self.options.width + 'px'
|
|
})
|
|
.appendTo(that.$element);
|
|
self.video = self.$video[0];
|
|
} else {
|
|
self.$video = $('<img>')
|
|
.css({
|
|
height: self.options.height + 'px',
|
|
width: self.options.width + 'px'
|
|
})
|
|
.appendTo(that.$element)
|
|
}
|
|
|
|
self.$subtitle = $('<div>')
|
|
.addClass('OxSubtitle')
|
|
.appendTo(that.$element);
|
|
|
|
setSubtitleSize();
|
|
|
|
self.$markerFrame = $('<div>')
|
|
.addClass('OxMarkerFrame')
|
|
.append(
|
|
$('<div>')
|
|
.addClass('OxFrame')
|
|
.css({
|
|
width: Math.floor((self.options.width - self.options.height) / 2) + 'px',
|
|
height: self.options.height + 'px'
|
|
})
|
|
)
|
|
.append(
|
|
$('<div>')
|
|
.addClass('OxPoster')
|
|
.css({
|
|
width: (self.options.height - 2) + 'px',
|
|
height: (self.options.height - 2) + 'px'
|
|
})
|
|
)
|
|
.append(
|
|
$('<div>')
|
|
.addClass('OxFrame')
|
|
.css({
|
|
width: Math.ceil((self.options.width - self.options.height) / 2) + 'px',
|
|
height: self.options.height + 'px'
|
|
})
|
|
)
|
|
.hide()
|
|
.appendTo(that.$element);
|
|
|
|
self.$markerPoint = {}
|
|
$.each(['in', 'out'], function(i, point) {
|
|
self.$markerPoint[point] = {};
|
|
$.each(['top', 'bottom'], function(i, edge) {
|
|
var titleCase = Ox.toTitleCase(point) + Ox.toTitleCase(edge);
|
|
self.$markerPoint[point][edge] = $('<img>')
|
|
.addClass('OxMarkerPoint OxMarker' + titleCase)
|
|
.attr({
|
|
src: '/static/oxjs/build/png/ox.ui/videoMarker' + titleCase + '.png' // fixme: remove static path
|
|
})
|
|
.hide()
|
|
.appendTo(that.$element);
|
|
if (self.options.points[point == 'in' ? 0 : 1] == self.options.position) {
|
|
self.$markerPoint[point][edge].show();
|
|
}
|
|
});
|
|
});
|
|
|
|
self.$controls = new Ox.Bar({
|
|
size: self.controlsHeight
|
|
})
|
|
.css({
|
|
marginTop: '-2px'
|
|
})
|
|
.appendTo(that);
|
|
|
|
if (self.options.type == 'play') {
|
|
// fixme: $buttonPlay etc.
|
|
self.$playButton = new Ox.Button({
|
|
id: self.options.id + 'Play',
|
|
title: [
|
|
{id: 'play', title: 'play'},
|
|
{id: 'pause', title: 'pause'}
|
|
],
|
|
tooltip: ['Play', 'Pause'],
|
|
type: 'image'
|
|
})
|
|
.bindEvent('click', togglePlay)
|
|
.appendTo(self.$controls);
|
|
self.$playInToOutButton = new Ox.Button({
|
|
id: self.options.id + 'PlayInToOut',
|
|
title: 'PlayInToOut',
|
|
tooltip: 'Play In to Out',
|
|
type: 'image'
|
|
})
|
|
.bindEvent('click', function() {
|
|
that.playInToOut();
|
|
})
|
|
.appendTo(self.$controls);
|
|
self.$muteButton = new Ox.Button({
|
|
id: self.options.id + 'Mute',
|
|
title: [
|
|
{id: 'mute', title: 'mute'},
|
|
{id: 'unmute', title: 'unmute'}
|
|
],
|
|
tooltip: ['Mute', 'Unmute'],
|
|
type: 'image'
|
|
})
|
|
.bindEvent('click', toggleMute)
|
|
.appendTo(self.$controls);
|
|
self.$sizeButton = new Ox.Button({
|
|
id: self.options.id + 'Size',
|
|
title: [
|
|
{id: 'large', title: 'add'},
|
|
{id: 'small', title: 'remove'}
|
|
],
|
|
tooltip: ['Larger', 'Smaller'],
|
|
type: 'image'
|
|
})
|
|
.bindEvent('click', toggleSize)
|
|
.appendTo(self.$controls);
|
|
} else {
|
|
self.$goToPointButton = new Ox.Button({
|
|
id: self.options.id + 'GoTo' + Ox.toTitleCase(self.options.type),
|
|
title: 'GoTo' + Ox.toTitleCase(self.options.type),
|
|
tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point',
|
|
type: 'image'
|
|
})
|
|
.bindEvent('click', goToPoint)
|
|
.appendTo(self.$controls);
|
|
self.$setPointButton = new Ox.Button({
|
|
id: self.options.id + 'Set' + Ox.toTitleCase(self.options.type),
|
|
title: 'Set' + Ox.toTitleCase(self.options.type),
|
|
tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point',
|
|
type: 'image'
|
|
})
|
|
.bindEvent('click', setPoint)
|
|
.appendTo(self.$controls);
|
|
}
|
|
|
|
self.$positionInput = new Ox.TimeInput({
|
|
milliseconds: true,
|
|
seconds: true,
|
|
value: Ox.formatDuration(self.options.position, 3)
|
|
})
|
|
.css({
|
|
float: 'right',
|
|
})
|
|
.appendTo(self.$controls)
|
|
|
|
self.$positionInput.css({
|
|
width: '98px'
|
|
});
|
|
// fixme: children doesnt work w/o $element
|
|
self.$positionInput.$element.children('.OxLabel').each(function(i, element) {
|
|
$(this).css({
|
|
width: '22px',
|
|
marginLeft: (i == 0 ? 8 : 0) + 'px',
|
|
background: 'rgb(32, 32, 32)'
|
|
});
|
|
});
|
|
self.$positionInput.$element.children('div.OxInput').each(function(i) {
|
|
var marginLeft = [-82, -58, -34, -10];
|
|
$(this).css({
|
|
marginLeft: marginLeft[i] + 'px'
|
|
}).addClass('foo');
|
|
});
|
|
|
|
if (self.options.type == 'play') {
|
|
self.$loadingIcon = new Ox.LoadingIcon()
|
|
.appendTo(that)
|
|
.start();
|
|
self.loadingInterval = setInterval(function() {
|
|
if (self.video.readyState) {
|
|
clearInterval(self.loadingInterval);
|
|
self.$loadingIcon.stop();
|
|
setPosition();
|
|
}
|
|
}, 50);
|
|
} else {
|
|
setPosition();
|
|
}
|
|
|
|
function getSubtitle() {
|
|
var subtitle = '';
|
|
$.each(self.options.subtitles, function(i, v) {
|
|
if (v['in'] <= self.options.position && v['out'] > self.options.position) {
|
|
subtitle = v.text;
|
|
return false;
|
|
}
|
|
});
|
|
return subtitle;
|
|
}
|
|
|
|
function goToPoint() {
|
|
that.triggerEvent('change', {
|
|
position: self.options.points[self.options.type == 'in' ? 0 : 1]
|
|
});
|
|
}
|
|
|
|
function playing() {
|
|
self.options.position = Math.round(self.video.currentTime * 25) / 25;
|
|
if (self.video.ended) {
|
|
self.$playButton.trigger('click');
|
|
}
|
|
if (self.playingInToOut && self.options.position >= self.options.points[1]) {
|
|
self.$playButton.trigger('click');
|
|
self.options.position = self.options.points[1];
|
|
}
|
|
setMarkers();
|
|
setSubtitle();
|
|
self.$positionInput.options({
|
|
value: Ox.formatDuration(self.options.position, 3)
|
|
});
|
|
that.triggerEvent('change', {
|
|
position: self.options.position
|
|
});
|
|
}
|
|
|
|
function setHeight() {
|
|
that.css({
|
|
height: (self.options.height + 16) + 'px'
|
|
});
|
|
self.$video.css({
|
|
height: self.options.height + 'px'
|
|
});
|
|
setSubtitleSize();
|
|
}
|
|
|
|
function setMarkers() {
|
|
self.options.position == self.options.posterFrame ? self.$markerFrame.show() : self.$markerFrame.hide();
|
|
$.each(self.$markerPoint, function(point, markers) {
|
|
$.each(markers, function(edge, marker) {
|
|
self.options.position == self.options.points[point == 'in' ? 0 : 1] ?
|
|
marker.show() : marker.hide();
|
|
});
|
|
})
|
|
}
|
|
|
|
function setPoint() {
|
|
var data = {};
|
|
self.options.points[self.options.type == 'in' ? 0 : 1] = self.options.position;
|
|
setMarkers();
|
|
data[self.options.type] = self.options.position;
|
|
that.triggerEvent('set', data);
|
|
}
|
|
|
|
function setPosition() {
|
|
if (self.options.type == 'play') {
|
|
self.video.currentTime = self.options.position;
|
|
} else {
|
|
self.$loadingIcon && self.$loadingIcon.stop();
|
|
if (self.$video.attr('src') != self.options.url(self.options.position)) {
|
|
self.$loadingIcon = new Ox.LoadingIcon()
|
|
.appendTo(that)
|
|
.start();
|
|
self.$video.attr({
|
|
src: self.options.url(self.options.position)
|
|
})
|
|
.load(self.$loadingIcon.stop);
|
|
}
|
|
}
|
|
setMarkers();
|
|
setSubtitle();
|
|
self.$positionInput.options({
|
|
value: Ox.formatDuration(self.options.position, 3)
|
|
});
|
|
}
|
|
|
|
function setSubtitle() {
|
|
var subtitle = getSubtitle();
|
|
if (subtitle != self.subtitle) {
|
|
self.subtitle = subtitle;
|
|
self.$subtitle.html(Ox.highlight(self.subtitle, self.options.find).replace(/\n/g, '<br/>'));
|
|
}
|
|
}
|
|
|
|
function setSubtitleSize() {
|
|
self.$subtitle.css({
|
|
bottom: parseInt(self.controlsHeight + self.options.height / 16) + 'px',
|
|
width: self.options.width + 'px',
|
|
fontSize: parseInt(self.options.height / 20) + 'px',
|
|
WebkitTextStroke: (self.options.height / 1000) + 'px rgb(0, 0, 0)'
|
|
});
|
|
}
|
|
|
|
function setWidth() {
|
|
that.css({
|
|
width: self.options.width + 'px'
|
|
});
|
|
self.$video.css({
|
|
width: self.options.width + 'px'
|
|
});
|
|
setSubtitleSize();
|
|
}
|
|
|
|
function toggleMute() {
|
|
self.video.muted = !self.video.muted;
|
|
}
|
|
|
|
function togglePlay() {
|
|
self.video.paused ? that.play() : that.pause();
|
|
}
|
|
|
|
function toggleSize(event, data) {
|
|
that.triggerEvent('togglesize', {
|
|
size: data.id
|
|
});
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'height') {
|
|
setHeight();
|
|
} else if (key == 'points') {
|
|
setMarkers();
|
|
} else if (key == 'position') {
|
|
setPosition();
|
|
} else if (key == 'posterFrame') {
|
|
setMarkers();
|
|
} else if (key == 'width') {
|
|
setWidth();
|
|
}
|
|
}
|
|
|
|
that.mute = function() {
|
|
self.video.muted = true;
|
|
return that;
|
|
};
|
|
|
|
that.pause = function() {
|
|
self.video.pause();
|
|
clearInterval(self.playInterval);
|
|
self.playingInToOut = false;
|
|
return that;
|
|
};
|
|
|
|
that.play = function() {
|
|
self.video.play();
|
|
self.playInterval = setInterval(playing, 40);
|
|
return that;
|
|
};
|
|
|
|
that.playInToOut = function() {
|
|
self.options.position = self.options.points[0];
|
|
setPosition();
|
|
Ox.print('sop', self.options.position, self.options.points);
|
|
self.playingInToOut = true;
|
|
self.video.paused && self.$playButton.trigger('click');
|
|
return that;
|
|
};
|
|
|
|
that.toggleMute = function() {
|
|
self.$muteButton.trigger('click');
|
|
return that;
|
|
}
|
|
|
|
that.togglePlay = function() {
|
|
self.$playButton.trigger('click');
|
|
return that;
|
|
}
|
|
|
|
that.unmute = function() {
|
|
self.video.muted = false;
|
|
return that;
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
|
|
/*
|
|
============================================================================
|
|
Miscellaneous
|
|
============================================================================
|
|
*/
|
|
|
|
/**
|
|
*/
|
|
Ox.Tooltip = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
title: ''
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxTooltip')
|
|
.html(self.options.title);
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'title') {
|
|
that.html(value);
|
|
}
|
|
};
|
|
|
|
that.hide = function() {
|
|
that.animate({
|
|
opacity: 0
|
|
}, 0, function() {
|
|
that.remove();
|
|
});
|
|
return that;
|
|
};
|
|
|
|
that.show = function(x, y) {
|
|
var left, top, width, height;
|
|
$('.OxTooltip').remove(); // fixme: don't use dom
|
|
that.appendTo($body);
|
|
width = that.width();
|
|
height = that.height();
|
|
left = Ox.limit(x - width / 2, 0, $document.width() - width);
|
|
top = y > $document.height() - height - 16 ? y - 32 : y + 16;
|
|
that.css({
|
|
left: left + 'px',
|
|
top: top + 'px'
|
|
})
|
|
.animate({
|
|
opacity: 1
|
|
}, 0);
|
|
return that;
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
})();
|