oxjs/build/js/ox.ui.js

14518 lines
507 KiB
JavaScript
Raw Normal View History

2010-01-07 20:21:07 +00:00
/*
################################################################################
ox.ui.js
requires
2010-01-25 11:42:28 +00:00
jquery-1.4.js
2010-01-07 20:21:07 +00:00
ox.js
################################################################################
*/
// also see test.js, in demos ...
// fixme: render might be a better function name than construct
2010-01-07 20:21:07 +00:00
(function() {
// fixme: move into Ox.UI
2010-01-07 20:21:07 +00:00
var oxui = {
2010-09-03 20:54:40 +00:00
defaultTheme: 'classic',
2010-01-07 20:21:07 +00:00
elements: {},
getDimensions: function(orientation) {
2010-09-03 20:54:40 +00:00
return orientation == 'horizontal' ?
['width', 'height'] : ['height', 'width'];
2010-01-07 20:21:07 +00:00
},
getEdges: function(orientation) {
2010-09-03 20:54:40 +00:00
return orientation == 'horizontal' ?
['left', 'right', 'top', 'bottom'] :
['top', 'bottom', 'left', 'right'];
2010-01-07 20:21:07 +00:00
},
getBarSize: function(size) {
var sizes = {
2010-02-20 03:58:46 +00:00
small: 20,
medium: 24,
large: 28,
2010-01-07 20:21:07 +00:00
};
return sizes[size];
},
2011-02-22 10:02:28 +00:00
path: $('script[src*="ox.ui.js"]').attr('src').replace('js/ox.ui.js', ''),
2010-06-30 18:47:10 +00:00
scrollbarSize: $.browser.mozilla ? 16 : 12,
2010-06-30 09:27:02 +00:00
symbols: {
2010-09-03 20:54:40 +00:00
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'
2010-02-03 12:12:21 +00:00
}
2010-01-07 20:21:07 +00:00
},
2010-12-26 20:16:35 +00:00
$elements = {},
2010-01-07 20:21:07 +00:00
$window, $document, $body;
2011-01-02 10:01:55 +00:00
_$elements = $elements;
2010-12-31 11:01:35 +00:00
2010-01-07 20:21:07 +00:00
$(function() {
2011-03-01 11:06:37 +00:00
$window = $(window);
$document = $(document);
$body = $('body');
2010-01-07 20:21:07 +00:00
Ox.theme(oxui.defaultTheme);
2010-02-04 09:50:45 +00:00
});
2010-01-07 20:21:07 +00:00
/*
============================================================================
Application
============================================================================
*/
Ox.App = (function() {
/***
Ox.App
Basic application instance that communicates with a JSON API.
The JSON API should support at least the following actions:
api returns all api methods
init returns {config: {...}, user: {...}}
Options
timeout API timeout in msec
type 'GET' or 'POST'
url URL of the API
Methods
api[action] make a request
api.cancel cancel a request
launch launch the App
options get or set options
***/
2010-01-27 12:30:00 +00:00
return function(options) {
options = options || {};
var self = {},
that = this;
2010-09-05 14:24:22 +00:00
self.time = +new Date();
2010-01-27 12:30:00 +00:00
self.options = $.extend({
timeout: 60000,
type: 'POST',
url: '/api/',
2010-01-27 12:30:00 +00:00
}, options);
that.$element = new Ox.Element('body');
2010-09-05 14:24:22 +00:00
function getUserAgent() {
var userAgent = '';
$.each(['Chrome', 'Firefox', 'Internet Explorer', 'Opera', 'Safari'], function(i, v) {
if (navigator.userAgent.indexOf(v) > -1) {
userAgent = v;
return false;
}
});
2011-03-01 11:06:37 +00:00
if (!userAgent && $.browser.mozilla) {
userAgent = 'Firefox';
}
if (!userAgent && $.browser.webkit) {
userAgent = 'Chrome';
}
2010-09-05 14:24:22 +00:00
return userAgent;
}
2010-09-05 00:31:58 +00:00
function getUserData() {
return {
navigator: {
cookieEnabled: navigator.cookieEnabled,
plugins: $.map(navigator.plugins, function(plugin, i) {
return plugin.name;
}),
userAgent: navigator.userAgent
},
screen: screen,
2010-09-05 14:24:22 +00:00
time: (+new Date() - self.time) / 1000,
2010-09-05 00:31:58 +00:00
window: {
innerHeight: window.innerHeight,
innerWidth: window.innerWidth,
outerHeight: window.outerHeight,
outerWidth: window.outerWidth,
screenLeft: window.screenLeft,
screenTop: window.screenTop
}
};
}
function loadImages(callback) {
window.OxImageCache = [];
2010-09-05 00:31:58 +00:00
$.getJSON(oxui.path + 'json/ox.ui.images.json', function(data) {
var counter = 0,
length = data.length;
data.forEach(function(src, i) {
var image = new Image();
2010-09-05 00:31:58 +00:00
image.src = oxui.path + src;
image.onload = function() {
(++counter == length) && callback();
}
window.OxImageCache.push(image);
2010-09-05 00:31:58 +00:00
});
});
}
2010-07-07 12:36:12 +00:00
self.change = function(key, value) {
2010-01-27 12:30:00 +00:00
};
that.api = {
api: function(callback) {
Ox.Request.send({
url: self.options.url,
data: {
action: 'api'
},
callback: callback
});
},
cancel: function(id) {
Ox.Request.cancel(id);
}
};
that.bindEvent = function() {
};
2010-09-05 00:31:58 +00:00
that.launch = function(callback) {
2010-09-05 14:24:22 +00:00
var time = +new Date(),
userAgent = getUserAgent(),
2011-01-02 10:01:55 +00:00
userAgents = ['Chrome', 'Firefox', 'Opera', 'Safari'];
2010-01-27 12:30:00 +00:00
$.ajaxSetup({
timeout: self.options.timeour,
type: self.options.type,
url: self.options.url
2010-01-27 12:30:00 +00:00
});
2010-09-05 14:24:22 +00:00
userAgents.indexOf(userAgent) > -1 ? start() : stop();
function start() {
// fixme: rename config to site?
var counter = 0, config, user;
that.api.api(function(result) {
$.each(result.data.actions, function(key, value) {
that.api[key] = function(data, callback) {
if (arguments.length == 1 && Ox.isFunction(data)) {
callback = data;
data = {};
}
return Ox.Request.send($.extend({
url: self.options.url,
data: {
action: key,
data: JSON.stringify(data)
},
callback: callback
}, !value.cache ? {age: 0}: {}));
};
});
that.api.init(getUserData(), function(result) {
2011-03-01 11:06:37 +00:00
config = result.data.config;
user = result.data.user;
document.title = config.site.name;
launchCallback();
2010-09-05 00:31:58 +00:00
});
});
loadImages(launchCallback);
function launchCallback() {
++counter == 2 && $(function() {
var $div = $body.find('div');
$body.find('img').remove();
$div.animate({
opacity: 0
}, 1000, function() {
$div.remove();
});
callback({config: config, user: user});
});
}
2010-09-05 14:24:22 +00:00
}
function stop() {
that.request.send(self.options.init, getUserData(), function() {});
2010-09-05 14:24:22 +00:00
}
2010-09-05 00:31:58 +00:00
return that;
2010-01-27 12:30:00 +00:00
};
that.options = function() {
return Ox.getset(self.options, Array.prototype.slice.call(arguments), self.change, that);
2010-01-27 12:30:00 +00:00
};
return that;
};
}());
2010-01-27 12:30:00 +00:00
2011-01-15 06:09:22 +00:00
Ox.Clipboard = function() {
/***
Ox.Clipboard
Basic clipboard handler
Methods
copy(data) copy data to clipboard
paste paste data from clipboard
***/
2011-01-15 06:09:22 +00:00
var clipboard = {};
return {
_print: function() {
Ox.print(JSON.stringify(clipboard));
},
copy: function(data) {
clipboard = data;
Ox.print('copy', JSON.stringify(clipboard));
},
paste: function(type) {
return clipboard;
}
};
}();
2010-01-07 20:21:07 +00:00
Ox.Focus = function() {
/***
Ox.Focus
Basic focus handler
Methods
blur(id) blur element
focus(id) focus element
focused() return id of focused element, or null
***/
2010-01-07 20:21:07 +00:00
var stack = [];
return {
2010-12-26 20:16:35 +00:00
_print: function() {
Ox.print(stack);
},
2010-06-30 09:27:02 +00:00
blur: function(id) {
2010-09-03 08:47:40 +00:00
var index = stack.indexOf(id);
if (index > -1 && index == stack.length - 1) {
2010-09-03 08:47:40 +00:00
stack.length == 1 ? stack.pop() :
stack.splice(stack.length - 2, 0, stack.pop());
2010-09-04 14:28:40 +00:00
//$elements[id].removeClass('OxFocus');
$('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
stack.length && $elements[stack[stack.length - 1]].addClass('OxFocus');
2010-09-03 20:54:40 +00:00
Ox.print('blur', id, stack);
2010-06-30 09:27:02 +00:00
}
},
2010-01-07 20:21:07 +00:00
focus: function(id) {
2010-02-07 15:01:22 +00:00
var index = stack.indexOf(id);
2010-09-03 08:47:40 +00:00
if (index == -1 || index < stack.length - 1) {
index > -1 && stack.splice(index, 1);
stack.push(id);
2010-09-04 14:28:40 +00:00
$('.OxFocus').removeClass('OxFocus'); // fixme: see above
$elements[id].addClass('OxFocus');
2010-09-03 20:54:40 +00:00
Ox.print('focus', id, stack);
2010-01-07 20:21:07 +00:00
}
2010-02-05 09:13:03 +00:00
},
focused: function() {
2010-12-27 05:01:24 +00:00
return stack.length ? stack[stack.length - 1] : null;
2010-01-07 20:21:07 +00:00
}
};
}();
/***
2010-12-06 17:42:45 +00:00
Ox.History
***/
2010-01-07 20:21:07 +00:00
/***
2010-12-06 17:42:45 +00:00
Ox.Keyboard
***/
2010-01-07 20:21:07 +00:00
(function() {
2010-01-25 11:42:28 +00:00
2010-09-03 20:54:40 +00:00
var buffer = '',
2010-01-07 20:21:07 +00:00
bufferTime = 0,
bufferTimeout = 1000,
// wrapped in function so it can be collapsed in text editor
keyNames = (function() {
2010-01-07 20:21:07 +00:00
return {
2010-09-03 20:54:40 +00:00
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'
2010-01-07 20:21:07 +00:00
// see dojo, for ex.
};
})(),
2010-01-07 20:21:07 +00:00
modifierNames = {
2010-09-03 20:54:40 +00:00
altKey: 'alt', // mac: option
ctrlKey: 'control',
// metaKey: 'meta', // mac: command
shiftKey: 'shift'
2010-01-07 20:21:07 +00:00
};
2010-02-05 15:42:52 +00:00
2010-02-04 09:50:45 +00:00
$(function() {
2010-02-05 15:42:52 +00:00
// fixme: how to do this better?
2010-02-19 14:19:48 +00:00
// in firefox on mac, keypress doesn't fire for up/down
2010-02-19 11:47:13 +00:00
// if the cursor is at the start/end of an input element
2010-02-19 14:19:48 +00:00
// on linux, it doesn't seem to fire if the input element has focus
2010-02-19 11:47:13 +00:00
if ($.browser.mozilla) {
2010-02-18 07:27:32 +00:00
$document.keypress(keypress);
2010-02-19 11:47:13 +00:00
$document.keydown(function(event) {
2010-09-03 20:54:40 +00:00
var $element = $('input:focus');
2010-02-19 11:47:13 +00:00
if ($element.length) {
if (
(
2010-09-03 20:54:40 +00:00
keyNames[event.keyCode] == 'up' &&
2010-02-19 11:47:13 +00:00
$element[0].selectionStart + $element[0].selectionEnd == 0
) || (
2010-09-03 20:54:40 +00:00
keyNames[event.keyCode] == 'down' &&
2010-02-19 11:47:13 +00:00
$element[0].selectionStart == $element.val().length &&
$element[0].selectionEnd == $element.val().length
)
) {
keypress(event);
}
}
});
2010-02-19 11:47:13 +00:00
} else {
$document.keydown(keypress);
2010-02-05 15:31:19 +00:00
}
2010-02-04 09:50:45 +00:00
});
2010-02-18 07:27:32 +00:00
function keypress(event) {
2010-12-27 05:01:24 +00:00
var focused = Ox.Focus.focused(),
key,
2010-02-04 09:50:45 +00:00
keys = [],
2010-02-20 03:58:46 +00:00
//ret = true,
2010-02-04 09:50:45 +00:00
time;
$.each(modifierNames, function(k, v) {
event[k] && keys.push(v);
2010-02-04 09:50:45 +00:00
});
// avoid pushing modifier twice
2011-01-13 12:43:20 +00:00
//Ox.print('keys', keys)
2010-02-04 09:50:45 +00:00
if (keyNames[event.keyCode] && keys.indexOf(keyNames[event.keyCode]) == -1) {
keys.push(keyNames[event.keyCode]);
}
2010-09-03 20:54:40 +00:00
key = keys.join('_');
2011-03-01 11:06:37 +00:00
if (key.match(/^[\w\d\-]$|SPACE/)) {
2010-02-04 09:50:45 +00:00
time = Ox.getTime();
if (time - bufferTime > bufferTimeout) {
2010-09-03 20:54:40 +00:00
buffer = '';
2010-01-07 20:21:07 +00:00
}
2010-09-03 20:54:40 +00:00
buffer += key == 'SPACE' ? ' ' : key;
bufferTime = time;
2010-01-07 20:21:07 +00:00
}
2011-01-02 10:01:55 +00:00
focused && $elements[focused].triggerEvent('key_' + key);
if (['down', 'space', 'up'].indexOf(key) > -1 && !$elements[focused].hasClass('OxInput')) {
2011-01-16 04:55:08 +00:00
// prevent chrome from scrolling
return false;
}
2010-02-04 09:50:45 +00:00
/*
$.each(stack, function(i, v) {
// fixme: we dont get the return value!
2010-09-03 20:54:40 +00:00
ret = Ox.event.trigger(keyboard + Ox.toCamelCase(key) + '.' + v);
2010-02-04 09:50:45 +00:00
return ret;
});
*/
2010-02-04 09:50:45 +00:00
}
2010-01-07 20:21:07 +00:00
})();
Ox.Request = function(options) {
2010-01-07 20:21:07 +00:00
/***
Ox.Request
Basic request handler
Options
timeout
Methods
cancel() cancel request
clearCache() clear cache
options() get or set options
requests() return number of active requests
send() send request
***/
2010-01-27 12:30:00 +00:00
var cache = {},
pending = {},
requests = {},
self = {
options: $.extend({
2011-01-23 04:59:16 +00:00
timeout: 60000,
2010-09-03 20:54:40 +00:00
type: 'POST',
url: '/api/'
}, options)
2010-01-27 12:30:00 +00:00
};
return {
cancel: function() {
if (arguments.length == 0) {
// cancel all requests
2010-01-27 12:30:00 +00:00
requests = {};
} else if (Ox.isFunction(arguments[0])) {
// cancel with function
$.each(requests, function(id, req) {
if (arguments[0](req)) {
delete requests[id];
}
2011-03-01 11:06:37 +00:00
});
2010-01-27 12:30:00 +00:00
} else {
// cancel by id
2011-03-01 11:06:37 +00:00
delete requests[arguments[0]];
2010-01-27 12:30:00 +00:00
}
},
clearCache: function() {
2010-01-27 12:34:27 +00:00
cache = {};
2010-01-27 12:35:37 +00:00
},
2010-01-27 12:34:27 +00:00
2010-01-27 12:30:00 +00:00
options: function(options) {
2010-01-27 12:34:27 +00:00
return Ox.getset(self.options, options, $.noop(), this);
2010-01-27 12:30:00 +00:00
},
requests: function() {
return Ox.length(requests);
},
2010-01-27 12:30:00 +00:00
send: function(options) {
2010-07-01 23:51:08 +00:00
var options = $.extend({
age: -1,
callback: null,
2010-07-01 23:51:08 +00:00
id: Ox.uid(),
timeout: self.options.timeout,
type: self.options.type,
url: self.options.url
}, options),
req = JSON.stringify({
2010-01-27 12:30:00 +00:00
url: options.url,
data: options.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 && 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
});
}
}
2010-01-31 10:06:52 +00:00
function callback(data) {
2010-01-27 12:30:00 +00:00
delete requests[options.id];
2011-01-16 04:55:08 +00:00
//Ox.length(requests) == 0 && $body.trigger('requestStop');
options.callback && options.callback(data);
2010-01-27 12:30:00 +00:00
}
2010-01-31 09:32:41 +00:00
function debug(request) {
2010-09-03 20:54:40 +00:00
var $iframe = $('<iframe>')
2010-01-31 09:32:41 +00:00
.css({ // fixme: should go into a class
width: 768,
height: 384
}),
$dialog = new Ox.Dialog({
2010-09-03 20:54:40 +00:00
title: 'Application Error',
2010-01-31 09:32:41 +00:00
buttons: [
2010-12-24 17:13:18 +00:00
new Ox.Button({
title: 'Close'
})
.bindEvent({
2010-12-26 20:16:35 +00:00
click: function() {
$dialog.close();
}
2010-12-24 17:13:18 +00:00
})
2010-01-31 09:32:41 +00:00
],
2010-12-24 17:13:18 +00:00
content: $iframe,
2010-01-31 09:32:41 +00:00
width: 800,
height: 400
})
.open(),
iframe = $iframe[0].contentDocument || $iframe[0].contentWindow.document;
iframe.open();
iframe.write(request.responseText);
iframe.close();
}
2010-01-27 12:30:00 +00:00
function error(request, status, error) {
2010-01-31 10:06:52 +00:00
var data;
2010-02-01 06:11:35 +00:00
if (arguments.length == 1) {
data = arguments[0]
} else {
try {
data = JSON.parse(request.responseText);
} catch (err) {
2011-01-02 10:01:55 +00:00
try {
data = {
status: {
code: request.status,
text: request.statusText
}
};
} catch (err) {
data = {
status: {
code: '500',
text: 'Unknown Error'
}
};
}
2010-02-01 06:11:35 +00:00
}
2010-01-27 13:25:37 +00:00
}
2010-01-31 10:06:52 +00:00
if (data.status.code < 500) {
callback(data);
} else {
2010-01-27 13:25:37 +00:00
var $dialog = new Ox.Dialog({
2010-09-03 20:54:40 +00:00
title: 'Application Error',
2010-01-31 09:32:41 +00:00
buttons: [
2010-12-24 17:13:18 +00:00
new Ox.Button({
id: 'details',
title: 'Details'
})
.bindEvent({
click: function() {
$dialog.close(function() {
debug(request);
});
}
}),
2010-12-24 17:13:18 +00:00
new Ox.Button({
id: 'close',
title: 'Close'
})
.bindEvent({
click: function() {
$dialog.close();
}
})
2010-01-31 09:32:41 +00:00
],
2010-12-24 17:13:18 +00:00
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.',
keys: {enter: 'close', escape: 'close'},
2010-01-31 09:32:41 +00:00
width: 400,
2010-06-30 18:47:10 +00:00
height: 200
2010-01-31 09:32:41 +00:00
})
.open();
2010-02-01 06:11:35 +00:00
// fixme: change this to Send / Don't Send
2011-01-13 12:43:20 +00:00
/*Ox.print({
2010-01-27 13:25:37 +00:00
request: request,
status: status,
error: error
2011-01-13 12:43:20 +00:00
});*/
2010-01-27 13:25:37 +00:00
}
2010-01-27 12:30:00 +00:00
pending[options.id] = false;
}
function success(data) {
pending[options.id] = false;
cache[req] = {
data: data,
time: Ox.getTime()
};
2010-01-31 10:06:52 +00:00
callback(data);
2010-01-27 12:30:00 +00:00
}
return options.id;
2010-07-01 23:51:08 +00:00
2010-01-27 12:30:00 +00:00
}
};
2010-01-27 12:30:00 +00:00
}();
2010-09-05 15:51:11 +00:00
Ox.Theme = function() {
};
2011-02-28 10:03:01 +00:00
Ox.UI = (function() {
2011-03-03 21:02:35 +00:00
/*
$(function() {
Ox.extend(Ox.UI, {
$body: $('body'),
$document: $(document),
$window: $(window)
});
});
*/
return {
2011-03-03 21:02:35 +00:00
getDimensions: function(orientation) {
return orientation == 'horizontal' ?
['width', 'height'] : ['height', 'width'];
},
2011-03-03 21:02:35 +00:00
getEdges: function(orientation) {
return orientation == 'horizontal' ?
['left', 'right', 'top', 'bottom'] :
['top', 'bottom', 'left', 'right'];
},
DIMENSIONS: {
horizontal: ['width', 'height'],
vertical: ['height', 'width']
},
EDGES: {
horizontal: [['left', 'right'], ['top', 'bottom']],
vertical: [['top', 'bottom'], ['left', 'right']]
},
PATH: $('script[src*="ox.ui.js"]')
.attr('src').replace('js/ox.ui.js', ''),
theme: function() {
},
themePath: function() {
}
2011-03-03 21:02:35 +00:00
};
2011-02-28 10:03:01 +00:00
}());
/***
2010-01-07 20:21:07 +00:00
Ox.URL
***/
2010-01-07 20:21:07 +00:00
/*
============================================================================
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)?
2010-12-06 17:42:45 +00:00
2010-06-28 11:19:04 +00:00
Ox.Container = function(options, self) {
// fixme: to be deprecated
2010-09-03 20:54:40 +00:00
var that = new Ox.Element('div', self)
2010-09-03 08:47:40 +00:00
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxContainer');
that.$content = new Ox.Element('div', self)
2010-09-03 08:47:40 +00:00
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxContent')
2010-01-07 20:21:07 +00:00
.appendTo(that);
return that;
2010-02-07 15:01:22 +00:00
};
2010-01-07 20:21:07 +00:00
Ox.jQueryElement = (function() {
// Basic jQuery element
var jQueryFunctions = (function() {
var functions = [];
Ox.each($('<div>'), function(key, val) {
typeof val == 'function' && functions.push(key);
});
return functions.sort();
})();
return function(element) {
var that = {};
Ox.each(jQueryFunctions, function(i, fn) {
that[fn] = function() {
var args = arguments, id, ret;
$.each(args, function(i, arg) {
// if an ox object was passed
// then pass its $element instead
// so that we can do oxObj.jqFn(oxObj)
if (arg && arg.ox) {
args[i] = arg.$element;
}
});
ret = element.$element[fn].apply(element.$element, args);
// if the $element of an ox object was returned
// then return the ox object instead
// so that we can do oxObj.jqFn().oxFn()
/*
if (fn == 'appendTo') {
Ox.print('ret', ret, $element, ret.jquery && $elements[id = ret.data('ox')] == true)
}
*/
return ret.jquery && $elements[id = ret.data('ox')] ?
$elements[id] : ret;
};
});
return that;
}
})();
2010-01-07 20:21:07 +00:00
// check out http://ejohn.org/apps/learn/#36 (-#38, making fns work w/o new)
2010-01-07 20:21:07 +00:00
Ox.Element = function() {
/***
Basic element object
***/
2010-01-07 20:21:07 +00:00
return function(options, self) {
2011-02-28 10:03:01 +00:00
if (!(this instanceof arguments.callee)) {
return new arguments.callee(options, self);
}
2010-01-07 20:21:07 +00:00
self = self || {};
2011-01-02 10:01:55 +00:00
self.options = options || {};
if (!self.$eventHandler) {
self.$eventHandler = $('<div>');
}
2010-01-07 20:21:07 +00:00
var that = this;
// allow for Ox.Element('tagname', self)
if (typeof self.options == 'string') {
self.options = {
element: self.options
};
}
2011-03-03 21:02:35 +00:00
that.ox = Ox.VERSION;
that.id = Ox.uid();
that.$element = $('<' + (self.options.element || 'div') + '/>', {
data: {
ox: that.id
},
mousedown: mousedown
});
$elements[that.id] = that;
2010-01-07 20:21:07 +00:00
$.extend(that, Ox.jQueryElement(that));
function mousedown(e) {
/*
better mouse events
on mousedown:
trigger mousedown
within 250 msec:
mouseup: trigger anyclick ("click" would collide with click events of certain widgets)
mouseup + mousedown: trigger doubleclick
after 250 msec:
mouseup + no mousedown within 250 msec: trigger singleclick
no mouseup within 250 msec:
trigger mouserepeat every 50 msec
trigger dragstart
mousemove: trigger drag
mouseup: trigger dragend
*/
var mouseInterval = 0;
if (!self.mouseTimeout) {
// first mousedown
that.triggerEvent('mousedown', e);
self.mouseup = false;
self.mouseTimeout = setTimeout(function() {
self.mouseTimeout = 0;
if (self.mouseup) {
// singleclick
that.triggerEvent('singleclick', e);
} else {
// mouserepeat, drag
that.triggerEvent({
mouserepeat: e,
dragstart: e
});
mouseInterval = setInterval(function() {
that.triggerEvent('mouserepeat');
}, 50);
$window.unbind('mouseup', mouseup)
.mousemove(mousemove)
.one('mouseup', function(e) {
clearInterval(mouseInterval);
$window.unbind('mousemove', mousemove);
that.triggerEvent('dragend', e);
});
that.one('mouseleave', function() {
clearInterval(mouseInterval);
});
}
}, 250);
} else {
// second mousedown
clearTimeout(self.mouseTimeout);
self.mouseTimeout = 0;
that.triggerEvent('doubleclick');
}
$window.one('mouseup', mouseup);
function mousemove(e) {
that.triggerEvent('drag', e);
}
function mouseup(e) {
if (!self.mouseup) { // fixme: shouldn't be necessary, bound only once
that.triggerEvent('anyclick', e);
self.mouseup = true;
}
}
}
2010-01-07 20:21:07 +00:00
self.onChange = function() {
2010-02-07 15:01:22 +00:00
// self.onChange(key, value)
2010-01-07 20:21:07 +00:00
// is called when an option changes
// (to be implemented by widget)
2011-02-25 10:23:33 +00:00
// fixme: rename to self.setOption
2010-01-07 20:21:07 +00:00
};
2011-02-07 18:57:05 +00:00
that._leakSelf = function() { // fixme: remove
return self;
}
2010-02-05 09:13:03 +00:00
that.bindEvent = function() {
/***
2010-09-03 08:47:40 +00:00
binds a function to an event triggered by this object
Usage
bindEvent(event, fn) or bindEvent({event0: fn0, event1: fn1, ...})
***/
2010-02-05 09:13:03 +00:00
if (arguments.length == 1) {
$.each(arguments[0], function(event, fn) {
2011-01-13 19:41:10 +00:00
// Ox.print(that.id, 'bind', event);
2010-12-31 11:01:35 +00:00
self.$eventHandler.bind('ox_' + event, fn);
2010-02-10 16:37:26 +00:00
});
2010-02-05 09:13:03 +00:00
} else {
2011-01-13 19:41:10 +00:00
// Ox.print(that.id, 'bind', arguments[0]);
2010-12-31 11:01:35 +00:00
self.$eventHandler.bind('ox_' + arguments[0], arguments[1]);
2010-02-05 09:13:03 +00:00
}
return that;
2010-09-03 08:47:40 +00:00
}
2010-01-07 20:21:07 +00:00
that.defaults = function(defaults) {
/***
sets the default options
Usage
that.defaults({key0: value0, key1: value1, ...})
***/
2010-01-07 20:21:07 +00:00
self.defaults = defaults;
delete self.options; // fixme: hackish fix for that = Ox.Foo({...}, self).defaults({...}).options({...})
2010-01-07 20:21:07 +00:00
return that;
2010-02-05 09:13:03 +00:00
};
2010-09-03 08:47:40 +00:00
2010-02-05 09:13:03 +00:00
that.gainFocus = function() {
/***
make this object gain focus
***/
2010-02-05 09:13:03 +00:00
Ox.Focus.focus(that.id);
2010-02-09 05:43:36 +00:00
return that;
2010-02-05 09:13:03 +00:00
};
2010-09-03 08:47:40 +00:00
2010-02-05 09:13:03 +00:00
that.hasFocus = function() {
/***
returns true if this object has focus
***/
2010-02-05 09:13:03 +00:00
return Ox.Focus.focused() == that.id;
};
2010-09-03 08:47:40 +00:00
2010-02-05 09:13:03 +00:00
that.loseFocus = function() {
/***
make this object lose focus
***/
2010-02-05 09:13:03 +00:00
Ox.Focus.blur(that.id);
2010-02-09 05:43:36 +00:00
return that;
2010-02-05 09:13:03 +00:00
};
2010-09-03 08:47:40 +00:00
2010-02-05 09:13:03 +00:00
that.options = function() { // fixme: use Ox.getset
/***
get or set options
Usage
2010-01-07 20:21:07 +00:00
that.options() returns self.options
2010-09-03 20:54:40 +00:00
that.options('foo') returns self.options.foo
that.options('foo', x) sets self.options.foo,
2010-01-07 20:21:07 +00:00
returns that
that.options({foo: x, bar: y}) sets self.options.foo
and self.options.bar,
returns that
***/
2010-12-24 17:13:18 +00:00
var args,
length = arguments.length,
oldOptions,
ret;
2010-01-07 20:21:07 +00:00
if (length == 0) {
// options()
2011-01-02 10:01:55 +00:00
ret = self.options;
2010-09-03 20:54:40 +00:00
} else if (length == 1 && typeof arguments[0] == 'string') {
2010-01-07 20:21:07 +00:00
// options(str)
2010-07-06 18:28:58 +00:00
ret = self.options ? self.options[arguments[0]] : options[arguments[0]];
2010-01-07 20:21:07 +00:00
} else {
// options (str, val) or options({str: val, ...})
// translate (str, val) to ({str: val})
2011-01-02 10:01:55 +00:00
args = Ox.makeObject.apply(that, arguments || {});
2010-12-24 17:13:18 +00:00
oldOptions = $.extend({}, self.options);
// if options have not been set, extend defaults,
// otherwise, extend options
2011-01-02 10:01:55 +00:00
//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) {
2010-12-26 20:16:35 +00:00
// key == 'id' && id && Ox.Event.changeId(id, value);
/*!Ox.equals(value, oldOptions[key]) &&*/ self.onChange(key, value);
2010-01-07 20:21:07 +00:00
});
ret = that;
2010-01-07 20:21:07 +00:00
}
return ret;
2010-02-10 16:37:26 +00:00
};
2010-09-03 08:47:40 +00:00
2010-12-27 05:01:24 +00:00
that.remove = function() { // fixme: clashes with jquery, should be removeElement
/***
remove this element, including its event handler
***/
2011-01-03 23:38:43 +00:00
that.loseFocus();
delete self.$eventHandler;
2010-01-07 20:21:07 +00:00
that.$element.remove();
2010-06-30 09:27:02 +00:00
delete $elements[that.ox];
return that;
2010-02-10 16:37:26 +00:00
};
2010-09-03 08:47:40 +00:00
2010-12-26 20:16:35 +00:00
that.triggerEvent = function() {
/***
2010-12-26 20:16:35 +00:00
triggers an event
Usage
triggerEvent(event)
triggerEvent(event, data)
triggerEvent({event0: data0, event1: data1, ...})
***/
2010-12-26 20:16:35 +00:00
if (Ox.isObject(arguments[0])) {
$.each(arguments[0], function(event, data) {
2011-01-17 21:12:17 +00:00
if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend', 'playing'].indexOf(event) == -1) {
Ox.print(that.id, self.options.id, 'trigger', event, data);
2011-01-17 21:12:17 +00:00
}
2010-12-31 11:01:35 +00:00
self.$eventHandler.trigger('ox_' + event, data);
2010-09-03 08:47:40 +00:00
});
} else {
2011-01-17 21:12:17 +00:00
if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend', 'playing'].indexOf(arguments[0]) == -1) {
Ox.print(that.id, self.options ? self.options.id : '', 'trigger', arguments[0], arguments[1] || {});
2011-01-17 21:12:17 +00:00
}
2010-12-31 11:01:35 +00:00
self.$eventHandler.trigger('ox_' + arguments[0], arguments[1] || {});
2010-09-03 08:47:40 +00:00
}
return that;
};
2010-02-05 09:13:03 +00:00
that.unbindEvent = function() {
/***
unbinds a function from an event triggered by this element
Usage
unbindEvent(event, fn)
unbindEvent({event0: fn0, event1: fn1, ...})
***/
2010-12-26 20:16:35 +00:00
if (arguments.length == 1) {
$.each(arguments[0], function(event, fn) {
2011-01-13 19:41:10 +00:00
// Ox.print(that.id, 'unbind', arguments[0]);
2010-12-31 11:01:35 +00:00
self.$eventHandler.unbind('ox_' + event, fn);
2010-12-26 20:16:35 +00:00
});
} else {
2011-01-13 19:41:10 +00:00
// Ox.print(that.id, 'unbind', arguments[0]);
2010-12-31 11:01:35 +00:00
self.$eventHandler.unbind('ox_' + arguments[0], arguments[1]);
2010-02-05 09:13:03 +00:00
}
return that;
2010-02-10 16:37:26 +00:00
};
2010-01-07 20:21:07 +00:00
return that;
}
}();
2010-07-24 01:32:08 +00:00
Ox.Window = function(options, self) {
self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-07-24 01:32:08 +00:00
.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;
};
2010-01-07 20:21:07 +00:00
2010-09-03 22:12:25 +00:00
// fixme: this should be Ox.Theme, and provide Ox.Theme.set(), Ox.Theme.load, etc.
2010-12-06 17:42:45 +00:00
/**
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'
*/
2010-01-07 20:21:07 +00:00
Ox.theme = function() {
var length = arguments.length,
2010-09-03 20:54:40 +00:00
classes = $body.attr('class').split(' '),
2010-01-07 20:21:07 +00:00
arg, theme;
$.each(classes, function(i, v) {
2010-09-03 20:54:40 +00:00
if (Ox.startsWith(v, 'OxTheme')) {
theme = v.replace('OxTheme', '').toLowerCase();
2010-01-07 20:21:07 +00:00
if (length == 1) {
$body.removeClass(v);
}
return false;
}
});
if (length == 1) {
arg = arguments[0]
2010-09-03 20:54:40 +00:00
$body.addClass('OxTheme' + Ox.toTitleCase(arg));
2010-01-07 20:21:07 +00:00
if (theme) {
$('img').each(function() {
var $this = $(this);
2011-01-15 23:26:20 +00:00
if (!$this.attr('src')) return; // fixme: remove, should't be neccessary
$this.attr({
src: $this.attr('src').replace(
'/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
)
});
});
2010-09-03 20:54:40 +00:00
$('input[type=image]').each(function() {
2010-01-07 20:21:07 +00:00
var $this = $(this);
$this.attr({
2010-09-03 20:54:40 +00:00
src: $this.attr('src').replace(
'/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
2010-01-07 20:21:07 +00:00
)
});
});
2010-09-03 20:54:40 +00:00
$('.OxLoadingIcon').each(function() {
2010-02-20 10:34:50 +00:00
var $this = $(this);
$this.attr({
2010-09-03 20:54:40 +00:00
src: $this.attr('src').replace(
'/ox.ui.' + theme + '/', '/ox.ui.' + arg + '/'
2010-02-20 10:34:50 +00:00
)
});
})
2010-01-07 20:21:07 +00:00
}
}
return theme;
};
/*
============================================================================
Bars
============================================================================
*/
2010-12-06 17:42:45 +00:00
/**
2010-01-07 20:21:07 +00:00
*/
Ox.Bar = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
2010-09-03 20:54:40 +00:00
orientation: 'horizontal',
size: 'medium' // can be int
2010-01-07 20:21:07 +00:00
})
2010-02-18 07:27:32 +00:00
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxBar Ox' + Ox.toTitleCase(self.options.orientation)),
2010-01-07 20:21:07 +00:00
dimensions = oxui.getDimensions(self.options.orientation);
2010-02-20 03:58:46 +00:00
self.options.size = Ox.isString(self.options.size) ?
oxui.getBarSize(self.options.size) : self.options.size;
2010-09-03 20:54:40 +00:00
that.css(dimensions[0], '100%')
.css(dimensions[1], self.options.size + 'px');
2010-01-07 20:21:07 +00:00
return that;
};
2010-12-06 17:42:45 +00:00
/**
2010-07-06 18:28:58 +00:00
*/
Ox.Resizebar = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
2010-07-07 07:18:38 +00:00
collapsed: false,
2010-07-06 18:28:58 +00:00
collapsible: true,
2010-09-03 20:54:40 +00:00
edge: 'left',
2010-07-06 18:28:58 +00:00
elements: [],
2010-09-03 20:54:40 +00:00
orientation: 'horizontal',
2010-07-06 18:28:58 +00:00
parent: null,
resizable: true,
resize: [],
size: 0
})
.options(options || {}) // fixme: options function should be able to handle undefined, no need for || {}
2010-09-03 20:54:40 +00:00
.addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
2010-07-06 18:28:58 +00:00
/*
.attr({
2010-09-03 20:54:40 +00:00
draggable: 'true'
2010-07-06 18:28:58 +00:00
})
2010-09-03 20:54:40 +00:00
.bind('dragstart', function(e) {
// e.originalEvent.dataTransfer.setDragImage($('<div>')[0], 0, 0);
2010-07-06 18:28:58 +00:00
})
2010-09-03 20:54:40 +00:00
.bind('drag', function(e) {
Ox.print('dragging', e)
2010-07-06 18:28:58 +00:00
})
*/
.bindEvent({
anyclick: toggle,
dragstart: dragstart,
drag: drag,
dragend: dragend
})
2010-09-03 20:54:40 +00:00
.append($('<div>').addClass('OxSpace'))
.append($('<div>').addClass('OxLine'))
.append($('<div>').addClass('OxSpace'));
2010-07-06 18:28:58 +00:00
$.extend(self, {
2010-09-03 20:54:40 +00:00
clientXY: self.options.orientation == 'horizontal' ? 'clientY' : 'clientX',
2010-07-15 19:04:47 +00:00
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'
2010-07-06 18:28:58 +00:00
});
function dragstart(event, e) {
if (self.options.resizable && !self.options.collapsed) {
Ox.print('DRAGSTART')
self.drag = {
startPos: e[self.clientXY],
startSize: self.options.size
}
} else { Ox.print('NO DRAGSTART r !c', self.options.resizable, !self.options.collapsed) }
}
function drag(event, e) {
2011-01-17 21:12:17 +00:00
if (self.options.resizable && !self.options.collapsed) {
var d = e[self.clientXY] - self.drag.startPos,
size = self.options.size;
self.options.size = Ox.limit(
self.drag.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');
// fixme: send {size: x}, not x
if (self.leftOrTop) {
self.options.elements[0]
.css(self.dimensions[1], self.options.size + 'px')
self.options.elements[1]
.css(self.edges[2], (self.options.size + 1) + 'px')
} else {
self.options.elements[0]
.css(self.edges[3], (self.options.size + 1) + 'px')
self.options.elements[1]
.css(self.dimensions[1], self.options.size + 'px')
}
triggerEvents('resize');
self.options.parent.updateSize(self.leftOrTop ? 0 : 1, self.options.size); // fixme: listen to event instead?
}
2010-09-17 16:37:11 +00:00
}
2010-07-06 18:28:58 +00:00
}
function dragend() {
2011-01-17 21:12:17 +00:00
if (self.options.resizable && !self.options.collapsed) {
self.options.size != self.drag.startSize && triggerEvents('resizeend');
}
2010-07-06 18:28:58 +00:00
}
function toggle() {
if (self.options.collapsible) {
// fixme: silly, pass a parameter
self.options.parent.toggle(
self.leftOrTop ? 0 :
self.options.parent.options('elements').length - 1
);
self.options.collapsed = !self.options.collapsed;
}
2010-11-28 15:06:47 +00:00
/*
2011-01-13 12:43:20 +00:00
//Ox.print('toggle');
if (Ox.isUndefined(self.options.position)) {
self.options.position = parseInt(self.options.parent.css(self.options.edge)) +
2010-11-28 15:06:47 +00:00
(self.options.collapsed ? self.options.size : 0);
}
var size = self.options.position -
(self.options.collapsed ? 0 : self.options.size),
2010-07-07 07:18:38 +00:00
animate = {};
2011-01-13 12:43:20 +00:00
//Ox.print('s.o.e', self.options.edge);
2010-07-07 07:18:38 +00:00
animate[self.options.edge] = size;
self.options.parent.animate(animate, 200, function() {
2010-11-28 15:06:47 +00:00
var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 0 : 1;
2010-07-07 07:18:38 +00:00
self.options.collapsed = !self.options.collapsed;
2010-11-28 15:06:47 +00:00
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]]());
2010-07-07 07:18:38 +00:00
});
2010-11-28 15:06:47 +00:00
*/
2010-07-06 18:28:58 +00:00
}
2011-01-15 14:22:05 +00:00
function triggerEvents(event) {
self.options.elements[0].triggerEvent(event,
self.leftOrTop ?
self.options.size :
self.options.elements[0][self.dimensions[1]]()
);
self.options.elements[1].triggerEvent(event,
self.leftOrTop ?
self.options.elements[1][self.dimensions[1]]() :
self.options.size
);
}
2010-07-06 18:28:58 +00:00
return that;
};
2010-12-06 17:42:45 +00:00
/**
2010-01-07 20:21:07 +00:00
*/
Ox.Tabbar = function(options, self) {
var self = self || {},
that = new Ox.Bar({
size: 20
}, self)
.defaults({
selected: 0,
2010-02-10 09:59:59 +00:00
tabs: []
2010-01-07 20:21:07 +00:00
})
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxTabbar');
2010-01-07 20:21:07 +00:00
2010-02-08 09:35:24 +00:00
Ox.ButtonGroup({
2010-02-10 09:59:59 +00:00
buttons: self.options.tabs,
2010-02-08 09:35:24 +00:00
group: true,
selectable: true,
selected: self.options.selected,
2010-09-03 20:54:40 +00:00
size: 'medium',
style: 'tab',
2010-02-08 09:35:24 +00:00
}).appendTo(that);
2010-01-07 20:21:07 +00:00
return that;
};
2010-12-06 17:42:45 +00:00
/**
fixme: no need for this
*/
2010-01-07 20:21:07 +00:00
Ox.Toolbar = function(options, self) {
var self = self || {},
that = new Ox.Bar({
2010-02-07 15:01:22 +00:00
size: oxui.getBarSize(options.size)
}, self);
2010-01-07 20:21:07 +00:00
return that;
};
2011-02-26 04:22:49 +00:00
/*
============================================================================
Calendars
============================================================================
2010-01-27 12:30:00 +00:00
*/
2011-02-26 04:22:49 +00:00
Ox.Calendar = function(options, self) {
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
dates: [],
height: 256,
width: 256
})
.options(options || {});
return that;
};
2010-01-27 12:30:00 +00:00
Ox.Dialog = function(options, self) {
2010-02-20 07:46:31 +00:00
2010-02-18 07:27:32 +00:00
// fixme: dialog should be derived from a generic draggable
2010-09-04 14:28:40 +00:00
// fixme: buttons should have a close attribute, or the dialog a close id
2010-01-27 12:30:00 +00:00
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-02-20 03:42:03 +00:00
.defaults({
2010-09-03 20:54:40 +00:00
title: '',
2010-02-20 03:42:03 +00:00
buttons: [],
2010-12-24 17:13:18 +00:00
content: null,
2010-02-21 06:47:18 +00:00
height: 216,
2010-12-26 20:16:35 +00:00
keys: {},
2010-02-21 06:47:18 +00:00
minHeight: 144,
2010-02-21 05:40:11 +00:00
minWidth: 256,
2010-09-13 11:53:31 +00:00
movable: true,
2010-07-24 01:32:08 +00:00
padding: 16,
2010-09-13 11:53:31 +00:00
resizable: true,
2010-02-21 05:20:39 +00:00
width: 384
2010-02-20 03:42:03 +00:00
})
.options(options || {})
2010-09-04 14:28:40 +00:00
.addClass('OxDialog')
2010-12-26 20:16:35 +00:00
.bindEvent({
key_enter: function() {
keypress('enter');
},
2010-09-04 14:28:40 +00:00
key_escape: function() {
2011-01-13 12:43:20 +00:00
//Ox.print('KEY ESCAPE')
2010-12-26 20:16:35 +00:00
keypress('escape');
2010-09-04 14:28:40 +00:00
}
});
2010-02-20 07:46:31 +00:00
2010-09-13 11:53:31 +00:00
$.extend(self, {
initialWidth: self.options.width,
initialHeight: self.options.height
})
2010-01-31 08:03:22 +00:00
that.$titlebar = new Ox.Bar({
2010-09-03 20:54:40 +00:00
size: 'medium'
2010-01-31 08:03:22 +00:00
})
2010-09-03 20:54:40 +00:00
.addClass('OxTitleBar')
2010-01-27 12:30:00 +00:00
.appendTo(that);
2010-09-13 11:53:31 +00:00
self.options.movable && that.$titlebar
.dblclick(center)
.bindEvent({
dragstart: dragstart,
drag: drag
});
2010-09-04 14:28:40 +00:00
2010-02-09 05:43:36 +00:00
that.$title = new Ox.Element()
2010-09-03 20:54:40 +00:00
.addClass('OxTitle')
2010-02-20 03:42:03 +00:00
.html(self.options.title)
2010-02-09 05:43:36 +00:00
.appendTo(that.$titlebar);
2010-09-04 14:28:40 +00:00
2010-07-24 01:32:08 +00:00
that.$content = new Ox.Element()
2010-09-03 20:54:40 +00:00
.addClass('OxContent')
2010-07-24 01:32:08 +00:00
.css({
2010-09-03 20:54:40 +00:00
padding: self.options.padding + 'px',
overflow: 'auto'
2010-07-24 01:32:08 +00:00
})
2010-12-24 17:13:18 +00:00
.append(self.options.content)
2010-01-27 12:30:00 +00:00
.appendTo(that);
2010-09-04 14:28:40 +00:00
2010-02-20 04:26:53 +00:00
that.$buttonsbar = new Ox.Bar({})
2010-09-03 20:54:40 +00:00
.addClass('OxButtonsBar')
2010-01-27 12:30:00 +00:00
.appendTo(that);
2010-12-24 17:13:18 +00:00
loadButtons();
2010-09-04 14:28:40 +00:00
2010-12-26 20:16:35 +00:00
//that.$buttons[0].focus();
2010-09-04 14:28:40 +00:00
that.$layer = new Ox.Element() // fixme: Layer widget that would handle click?
2010-09-03 20:54:40 +00:00
.addClass('OxLayer')
2010-02-21 07:09:32 +00:00
.mousedown(mousedownLayer)
.mouseup(mouseupLayer);
2010-02-20 07:46:31 +00:00
function center() {
2010-07-20 20:04:13 +00:00
var documentHeight = $document.height();
that.css({
left: 0,
2010-09-03 20:54:40 +00:00
top: Math.max(parseInt(-documentHeight / 10), self.options.height - documentHeight + 40) + 'px',
right: 0,
bottom: 0,
2010-09-03 20:54:40 +00:00
margin: 'auto'
});
}
function dragstart(event, e) {
self.drag = {
bodyWidth: $body.width(),
bodyHeight: $document.height(),
elementWidth: that.width(),
offset: that.offset(),
x: e.clientX,
y: e.clientY
};
that.css({
margin: 0
2010-02-21 05:20:39 +00:00
});
}
function drag(event, e) {
var left = Ox.limit(
self.drag.offset.left - self.drag.x + e.clientX,
24 - self.drag.elementWidth, self.drag.bodyWidth - 24
//0, self.drag.documentWidth - self.drag.elementWidth
),
top = Ox.limit(
self.drag.offset.top - self.drag.y + e.clientY,
24, self.drag.bodyHeight - 24
//24, self.drag.documentHeight - self.drag.elementHeight
);
that.css({
left: left + 'px',
top: top + 'px'
});
}
function dragstartResize(event, e) {
self.drag = {
documentWidth: $document.width(),
documentHeight: $document.height(),
elementWidth: that.width(),
elementHeight: that.height(),
offset: that.offset(),
x: e.clientX,
y: e.clientY
};
$.extend(self.drag, {
ratio: self.drag.elementWidth / self.drag.elementHeight
});
that.css({
left: self.drag.offset.left,
top: self.drag.offset.top,
margin: 0
});
2010-02-21 05:20:39 +00:00
}
function dragResize(event, e) {
if (!e.shiftKey) {
self.drag.ratio = self.options.width / self.options.height;
}
self.options.width = Ox.limit(
self.drag.elementWidth - self.drag.x + e.clientX,
self.options.minWidth,
Math.min(
self.drag.documentWidth,
self.drag.documentWidth - self.drag.offset.left
)
);
self.options.height = Ox.limit(
self.drag.elementHeight - self.drag.y + e.clientY,
self.options.minHeight,
Math.min(
self.drag.documentHeight,
self.drag.documentHeight - self.drag.offset.top
)
);
if (e.shiftKey) {
self.options.height = Ox.limit(
self.options.width / self.drag.ratio,
self.options.minHeight,
Math.min(
self.drag.documentHeight,
self.drag.documentHeight - self.drag.offset.top
)
);
self.options.width = self.options.height * self.drag.ratio;
}
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
}
function dragendResize(event, e) {
triggerResizeEvent();
}
2010-07-24 01:32:08 +00:00
function getButtonById(id) {
2010-12-26 20:16:35 +00:00
var ret = null;
2011-01-13 12:43:20 +00:00
//Ox.print('that.$buttons', that.$buttons, id)
2010-07-24 01:32:08 +00:00
$.each(that.$buttons, function(i, button) {
2010-09-03 20:54:40 +00:00
if (button.options('id') == id) {
2010-07-24 01:32:08 +00:00
ret = button;
return false;
}
});
return ret;
}
2010-12-26 20:16:35 +00:00
function keypress(key) {
var id = self.options.keys[key];
2011-01-13 12:43:20 +00:00
//Ox.print('X', key, self.options.keys)
2010-12-26 20:16:35 +00:00
id && getButtonById(id).$element.trigger('click');
}
2010-12-24 17:13:18 +00:00
function loadButtons() {
2011-01-13 12:43:20 +00:00
/*Ox.print('loadButtons', $.map(self.options.buttons, function(v) {
2010-12-26 20:16:35 +00:00
return v;
2011-01-13 12:43:20 +00:00
}));*/
2010-12-24 17:13:18 +00:00
if (that.$buttons) {
that.$buttons.forEach(function($button) {
$button.remove();
});
that.$resize.remove();
2010-12-26 20:16:35 +00:00
// that.$buttonsbar.empty();
2010-12-24 17:13:18 +00:00
}
that.$buttons = [];
if (!Ox.isArray(self.options.buttons[0])) {
self.options.buttons = [[], self.options.buttons];
}
2011-01-13 12:43:20 +00:00
//Ox.print('--- one', self.options.buttons[0]);
2010-12-24 17:13:18 +00:00
$.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')
.dblclick(reset)
.bindEvent({
dragstart: dragstartResize,
drag: dragResize,
dragend: dragendResize
})
2010-12-24 17:13:18 +00:00
.appendTo(that.$buttonsbar);
}
2011-01-13 12:43:20 +00:00
//Ox.print('--- two', self.options.buttons[1]);
2010-12-24 17:13:18 +00:00
$.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);
});
}
2010-02-21 07:09:32 +00:00
function mousedownLayer() {
that.$layer.stop().animate({
opacity: 0.5
}, 0);
2010-02-21 07:09:32 +00:00
}
function mouseupLayer() {
that.$layer.stop().animate({
opacity: 0
}, 0);
2010-02-21 07:09:32 +00:00
}
2010-02-21 06:47:18 +00:00
function reset() {
2010-09-13 11:53:31 +00:00
$.extend(self.options, {
height: self.initialHeight,
width: self.initialWidth
});
2010-09-04 14:28:40 +00:00
that/*.css({
2010-07-24 01:32:08 +00:00
left: Math.max(that.offset().left, 24 - that.width())
2010-09-04 14:28:40 +00:00
})*/
.width(self.options.width)
.height(self.options.height);
2010-07-24 01:32:08 +00:00
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
2010-09-13 11:53:31 +00:00
triggerResizeEvent();
2010-02-21 06:47:18 +00:00
}
2010-09-13 11:53:31 +00:00
function triggerResizeEvent() {
that.triggerEvent('resize', {
width: self.options.width,
height: self.options.height
});
}
2010-01-31 08:03:22 +00:00
self.onChange = function(key, value) {
2010-12-24 17:13:18 +00:00
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') {
2010-07-24 01:32:08 +00:00
that.animate({
2010-09-03 20:54:40 +00:00
height: self.options.height + 'px',
width: self.options.width + 'px'
2010-09-13 11:53:31 +00:00
}, 100);
2010-07-24 01:32:08 +00:00
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
2010-09-03 20:54:40 +00:00
} else if (key == 'title') {
2010-07-20 20:04:13 +00:00
that.$title.animate({
opacity: 0
2010-09-13 11:53:31 +00:00
}, 100, function() {
2010-07-20 20:04:13 +00:00
that.$title.html(value).animate({
opacity: 1
2010-09-13 11:53:31 +00:00
}, 100);
2010-07-20 20:04:13 +00:00
});
2010-01-31 08:03:22 +00:00
}
}
2010-02-20 07:46:31 +00:00
2010-09-13 11:53:31 +00:00
that.center = function() {
};
2010-02-20 07:46:31 +00:00
2010-01-31 09:32:41 +00:00
that.close = function(callback) {
callback = callback || function() {};
2010-01-27 12:30:00 +00:00
that.animate({
opacity: 0
}, 200, function() {
2010-12-26 20:16:35 +00:00
that.$buttons.forEach(function($button) {
$button.remove();
});
that.loseFocus();
2010-01-27 12:30:00 +00:00
that.$layer.remove();
2010-12-26 20:16:35 +00:00
that.remove();
2010-01-31 09:32:41 +00:00
callback();
});
2010-09-03 20:54:40 +00:00
$window.unbind('mouseup', mouseupLayer)
return that;
2010-09-13 11:53:31 +00:00
};
2010-02-20 07:46:31 +00:00
2010-12-24 17:13:18 +00:00
that.content = function($element) {
that.$content.empty().append($element);
return that;
}
2010-02-20 07:46:31 +00:00
that.disable = function() {
2010-02-10 16:37:26 +00:00
// to be used on submit of form, like login
2010-09-03 20:54:40 +00:00
that.$layer.addClass('OxFront');
2010-07-20 20:04:13 +00:00
return that;
2010-02-10 16:37:26 +00:00
};
2010-02-20 07:46:31 +00:00
2010-07-24 01:32:08 +00:00
that.disableButton = function(id) {
getButtonById(id).options({
disabled: true
});
2010-09-04 14:28:40 +00:00
return that;
2010-07-24 01:32:08 +00:00
};
2010-02-20 07:46:31 +00:00
that.enable = function() {
2010-09-03 20:54:40 +00:00
that.$layer.removeClass('OxFront');
2010-07-20 20:04:13 +00:00
return that;
2010-07-24 01:32:08 +00:00
};
that.enableButton = function(id) {
getButtonById(id).options({
disabled: false
});
2010-09-04 14:28:40 +00:00
return that;
2010-07-24 01:32:08 +00:00
};
2010-02-20 07:46:31 +00:00
2010-01-27 12:30:00 +00:00
that.open = function() {
2011-01-13 12:43:20 +00:00
//Ox.print('before open')
2010-02-20 07:46:31 +00:00
that.$layer.appendTo($body);
2010-01-27 12:30:00 +00:00
that.css({
opacity: 0
2010-05-05 18:27:09 +00:00
}).appendTo($body).animate({
2010-01-27 12:30:00 +00:00
opacity: 1
}, 200);
2010-09-04 14:28:40 +00:00
center();
reset();
2010-12-26 20:16:35 +00:00
// fixme: the following line prevents preview-style dialog
that.gainFocus();
2010-09-03 20:54:40 +00:00
$window.bind('mouseup', mouseupLayer)
2011-01-13 12:43:20 +00:00
//Ox.print('after open')
2010-01-27 12:30:00 +00:00
return that;
2010-07-24 01:32:08 +00:00
};
2010-02-20 07:46:31 +00:00
2010-11-25 10:05:50 +00:00
that.size = function(width, height, callback) {
2010-09-13 11:53:31 +00:00
$.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();
});
}
2010-01-27 12:30:00 +00:00
return that;
2010-02-20 07:46:31 +00:00
2010-01-27 12:30:00 +00:00
}
2010-01-07 20:21:07 +00:00
/*
============================================================================
Forms
============================================================================
*/
2010-07-24 01:32:08 +00:00
Ox.Filter = function(options, self) {
2011-01-24 04:08:19 +00:00
/***
Options:
Methods:
Events:
***/
2011-01-23 04:59:16 +00:00
var self = self || {},
that = new Ox.Element('div', self)
2010-07-24 01:32:08 +00:00
.defaults({
2011-01-24 04:08:19 +00:00
findKeys: [],
2011-01-23 04:59:16 +00:00
query: {
conditions: [],
operator: '&'
2011-01-24 04:08:19 +00:00
},
sortKeys: [],
viewKeys: []
2010-07-24 01:32:08 +00:00
})
.options(options || {});
2011-01-24 04:08:19 +00:00
Ox.print('Ox.Filter self.options', self.options)
2011-01-23 04:59:16 +00:00
$.extend(self, {
2011-01-24 04:08:19 +00:00
conditionOperators: {
2011-01-23 04:59:16 +00:00
date: [
2011-01-24 04:08:19 +00:00
{id: '', title: 'is'},
{id: '!', title: 'is not'},
{id: '<', title: 'is before'},
{id: '>', title: 'is after'},
{id: '>&<', title: 'is between'},
{id: '<|>', title: 'is not between'}
2011-01-23 04:59:16 +00:00
],
list: [
2011-01-24 04:08:19 +00:00
{id: '', title: 'is'},
{id: '!', title: 'is not'}
2011-01-23 04:59:16 +00:00
],
number: [
2011-01-24 04:08:19 +00:00
{id: '', title: 'is'},
{id: '!', title: 'is not'},
{id: '<', title: 'is less than'},
{id: '>', title: 'is greater than'},
{id: '>&<', title: 'is between'},
{id: '<|>', title: 'is not between'}
2011-01-23 04:59:16 +00:00
],
string: [
2011-01-24 04:08:19 +00:00
{id: '=', title: 'is'},
{id: '!=', title: 'is not'},
{id: '^', title: 'begins with'},
{id: '$', title: 'ends with'},
{id: '', title: 'contains'},
{id: '!', title: 'does not contain'}
2011-01-23 04:59:16 +00:00
],
text: [
2011-01-24 04:08:19 +00:00
{id: '', title: 'contains'},
{id: '!', title: 'does not contain'}
2011-01-23 04:59:16 +00:00
]
2011-01-24 04:08:19 +00:00
},
operators: [
{id: '&', title: 'all'},
{id: '|', title: 'any'}
]
2011-01-23 04:59:16 +00:00
});
2011-01-24 04:08:19 +00:00
if (!self.options.query.conditions.length) {
self.options.query.conditions = [{
key: self.options.findKeys[0].id,
value: '',
operator: self.conditionOperators[
getConditionType(self.options.findKeys[0].type)
][0].id
}];
}
2011-01-23 04:59:16 +00:00
self.$operator = new Ox.FormElementGroup({
elements: [
new Ox.Label({
title: 'Match',
overlap: 'right',
width: 48
}),
2011-01-24 04:08:19 +00:00
new Ox.FormElementGroup({
elements: [
new Ox.Select({
items: self.operators,
width: 48
})
.bindEvent({
change: changeOperator
}),
new Ox.Label({
overlap: 'left',
title: 'of the following conditions',
width: 160
})
2011-01-23 04:59:16 +00:00
],
2011-01-24 04:08:19 +00:00
float: 'right',
width: 208
})
2011-01-23 04:59:16 +00:00
],
float: 'left',
});
self.$buttons = [];
self.$conditions = $.map(self.options.query.conditions, function(condition, i) {
return constructCondition(condition, i);
});
self.$limit = new Ox.InputGroup({
inputs: [
new Ox.Checkbox({
width: 16
}),
new Ox.FormElementGroup({
elements: [
new Ox.Input({
width: 56
}),
new Ox.Select({
items: [
{id: 'items', title: 'items'},
{},
{id: 'hours', title: 'hours'},
{id: 'days', title: 'days'},
{},
{id: 'GB', title: 'GB'}
],
overlap: 'left',
width: 64
})
],
float: 'right',
width: 120
}),
new Ox.Select({
2011-01-24 04:08:19 +00:00
items: self.options.sortKeys,
2011-01-23 04:59:16 +00:00
width: 128
2011-01-24 04:08:19 +00:00
}),
new Ox.FormElementGroup({
elements: [
new Ox.Select({
items: [
{id: 'ascending', title: 'ascending'},
{id: 'descending', title: 'descending'}
],
width: 96
}),
new Ox.Label({
overlap: 'left',
title: 'order',
width: 72
})
],
float: 'right',
width: 168
2011-01-23 04:59:16 +00:00
})
],
separators: [
{title: 'Limit to', width: 56},
2011-01-24 04:08:19 +00:00
{title: 'sorted by', width: 64},
{title: 'in', width: 32}
]
});
self.$view = new Ox.InputGroup({
inputs: [
new Ox.Checkbox({
width: 16
}),
new Ox.Select({
items: self.options.viewKeys,
width: 128
})
],
separators: [
{title: 'By default, view', width: 112}
]
});
self.$save = new Ox.InputGroup({
inputs: [
new Ox.Checkbox({
width: 16
}),
new Ox.Input({
id: 'list',
width: 128
})
],
separators: [
{title: 'Save as Smart List', width: 112}
2011-01-23 04:59:16 +00:00
]
});
2011-01-24 04:08:19 +00:00
self.$items = $.merge($.merge([self.$operator], self.$conditions), [self.$limit, self.$view, self.$save]);
2011-01-23 04:59:16 +00:00
2011-01-24 04:08:19 +00:00
self.$form = new Ox.Form({
2011-01-23 04:59:16 +00:00
items: self.$items
2011-01-24 04:08:19 +00:00
});
that.$element = self.$form.$element;
2011-01-23 04:59:16 +00:00
function addCondition(pos) {
2011-01-24 04:08:19 +00:00
var key = self.options.findKeys[0];
2011-01-23 04:59:16 +00:00
self.options.query.conditions.splice(pos, 0, {
key: key.id,
value: '',
2011-01-24 04:08:19 +00:00
operator: self.conditionOperators[key.type][0].id
2011-01-23 04:59:16 +00:00
});
self.$conditions.splice(pos, 0, constructCondition({}, pos));
updateConditions();
2011-01-24 04:08:19 +00:00
self.$form.addItem(pos + 1, self.$conditions[pos]);
}
function addGroup(pos) {
self.$form.addItem(pos + 1, constructGroup(pos))
}
2011-01-24 04:08:19 +00:00
function changeConditionKey(pos, key) {
Ox.print('changeConditionKey', pos, key);
var oldOperator = self.options.query.conditions[pos].operator,
oldType = Ox.getObjectById(
self.options.findKeys, self.options.query.conditions[pos].key
).type,
newType = Ox.getObjectById(
self.options.findKeys, key
).type,
oldConditionType = getConditionType(oldType),
newConditionType = getConditionType(newType);
changeConditionType = oldConditionType != newConditionType;
Ox.print('old new', oldConditionType, newConditionType)
self.options.query.conditions[pos].key = key;
if (changeConditionType) {
self.$conditions[pos].replaceElement(1, constructConditionOperator(pos, oldOperator));
}
}
function changeConditionOperator(pos, operator) {
self.options.query.conditions[pos].operator = operator;
2011-01-24 04:08:19 +00:00
}
function changeOperator(event, data) {
self.options.query.operator = data.selected[0].id;
2011-01-23 04:59:16 +00:00
}
function constructCondition(condition, pos) {
var $condition;
return $condition = new Ox.FormElementGroup({
elements: [
new Ox.Select({
2011-01-24 04:08:19 +00:00
items: $.map(self.options.findKeys, function(key) {
return {
id: key.id,
title: key.title
};
}),
//items: $.extend({}, self.options.findKeys), // fixme: Ox.Menu messes with keys
overlap: 'right',
width: 128
})
.bindEvent({
change: function(event, data) {
Ox.print('event', event)
changeConditionKey($condition.data('position'), data.selected[0].id);
}
2011-01-23 04:59:16 +00:00
}),
2011-01-24 04:08:19 +00:00
constructConditionOperator(pos),
2011-01-23 04:59:16 +00:00
new Ox.Input({
width: 256
}),
new Ox.Button({
disabled: self.options.query.conditions.length == 1,
id: 'remove',
title: 'remove',
type: 'image'
})
.css({margin: '0 4px 0 8px'})
.bindEvent({
click: function() {
removeCondition($condition.data('position'));
}
}),
new Ox.Button({
id: 'add',
title: 'add',
type: 'image'
})
.css({margin: '0 4px 0 4px'})
.bindEvent({
click: function() {
2011-01-24 04:08:19 +00:00
Ox.print('add', $(this).parent().parent().data('position'))
2011-01-23 04:59:16 +00:00
addCondition($condition.data('position') + 1)
}
}),
new Ox.Button({
id: 'addgroup',
2011-01-23 04:59:16 +00:00
title: 'more',
type: 'image'
})
2011-01-24 04:08:19 +00:00
.css({margin: '0 0 0 4px'})
.bindEvent({
click: function() {
addGroup($condition.data('position') + 1)
2011-01-24 04:08:19 +00:00
}
})
2011-01-23 04:59:16 +00:00
]
})
.data({position: pos});
}
2011-01-24 04:08:19 +00:00
function constructConditionOperator(pos, selected) {
return new Ox.Select({
items: $.map(self.conditionOperators[getConditionType(
Ox.getObjectById(
self.options.findKeys,
self.options.query.conditions[pos].key
).type
)], function(operator) {
return {
checked: operator.id == selected, // fixme: should be "selected", not "checked"
id: operator.operator,
title: operator.title
};
}),
overlap: 'right',
width: 128
})
.bindEvent({
change: function(event, data) {
changeConditionOperator(/*$condition.data('position')*/ pos, data.selected[0].id)
}
});
}
function constructGroup() {
// fixme: duplicated
return new Ox.FormElementGroup({
elements: [
new Ox.Label({
title: self.options.operator == '&' ? 'and' : 'or',
overlap: 'right',
width: 48
}),
new Ox.FormElementGroup({
elements: [
new Ox.Select({
items: $.map(self.operators, function(operator) {
Ox.print('!!!!', {
checked: operator.id != self.options.operator,
id: operator.id,
title: operator.title
});
return {
//checked: operator.id != self.options.operator,
id: operator.id,
title: operator.title
}
}),
width: 48
})
.bindEvent({
change: changeOperator
}),
new Ox.Label({
overlap: 'left',
title: 'of the following conditions',
width: 160
})
],
float: 'right',
width: 208
})
],
float: 'left',
});
}
2011-01-24 04:08:19 +00:00
function getConditionType(type) {
type = Ox.isArray(type) ? type[0] : type;
if (['float', 'integer', 'year'].indexOf(type) > -1) {
2011-01-24 04:08:19 +00:00
type = 'number';
}
return type;
}
2011-01-23 04:59:16 +00:00
function removeCondition(pos) {
self.options.query.conditions.splice(pos, 1);
self.$conditions.splice(pos, 1);
updateConditions();
2011-01-24 04:08:19 +00:00
self.$form.removeItem(pos + 1);
2011-01-23 04:59:16 +00:00
}
function updateConditions() {
self.$conditions.forEach(function(condition, pos) {
condition.data({position: pos});
});
self.$conditions[0].options('elements')[3].options({
disabled: self.options.query.conditions.length == 1
});
}
2010-07-24 01:32:08 +00:00
return that;
};
2010-02-10 16:37:26 +00:00
Ox.Form = function(options, self) {
2011-01-24 04:08:19 +00:00
/**
*/
2010-02-10 16:37:26 +00:00
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
.defaults({
2010-09-03 20:54:40 +00:00
error: '',
id: '',
2010-07-24 01:32:08 +00:00
items: [],
submit: null
})
2010-12-24 17:13:18 +00:00
.options(options || {}) // fixme: the || {} can be done once, in the options function
.addClass('OxForm');
2010-07-20 20:04:13 +00:00
$.extend(self, {
2010-07-24 01:32:08 +00:00
$items: [],
$messages: [],
2010-07-20 20:04:13 +00:00
formIsValid: false,
2010-07-24 01:32:08 +00:00
itemIds: [],
itemIsValid: []
});
// fixme: form isn't necessarily empty/invalid
$.each(self.options.items, function(i, item) {
2010-12-26 20:16:35 +00:00
self.itemIds[i] = item.options('id') || item.id;
self.itemIsValid[i] = !!item.value().length;
2011-01-23 04:59:16 +00:00
that.append(self.$items[i] = new Ox.FormItem({element: item}));
2010-12-26 20:16:35 +00:00
item.bindEvent({
2010-12-24 17:13:18 +00:00
/*
2010-12-06 17:42:05 +00:00
blur: function(event, data) {
validate(i, data.valid);
if (data.valid) {
self.$messages[i].html('').hide();
} else {
self.$messages[i].html(data.message).show();
}
},
2010-12-24 17:13:18 +00:00
*/
2010-12-26 20:16:35 +00:00
autovalidate: function(event, data) {
data.valid = !!data.value.length;
validate(i, data.valid);
2011-01-23 04:59:16 +00:00
data.valid && self.$items[i].setMessage('');
2010-12-26 20:16:35 +00:00
},
2010-12-06 17:42:05 +00:00
submit: function(event, data) {
self.formIsValid && that.submit();
2010-12-24 17:13:18 +00:00
},
validate: function(event, data) {
validate(i, data.valid);
2011-01-23 04:59:16 +00:00
self.$items[i].setMessage(data.valid ? '' : data.message);
2010-12-06 17:42:05 +00:00
}
});
});
2010-07-24 01:32:08 +00:00
function getItemPositionById(id) {
return self.itemIds.indexOf(id);
}
function submitCallback(data) {
$.each(data, function(i, v) {
2011-01-23 04:59:16 +00:00
self.$items[i].setMessage(v.message);
2010-07-24 01:32:08 +00:00
});
}
function validate(pos, valid) {
2011-01-13 12:43:20 +00:00
//Ox.print('FORM validate', pos, valid)
2010-07-24 01:32:08 +00:00
self.itemIsValid[pos] = valid;
2010-07-20 20:04:13 +00:00
if (Ox.every(self.itemIsValid) != self.formIsValid) {
self.formIsValid = !self.formIsValid;
2010-09-03 20:54:40 +00:00
that.triggerEvent('validate', {
2010-07-24 01:32:08 +00:00
valid: self.formIsValid
2010-07-20 20:04:13 +00:00
});
}
}
2011-01-23 04:59:16 +00:00
that.addItem = function(pos, item) {
Ox.print('addItem', pos)
self.options.items.splice(pos, 0, item);
self.$items.splice(pos, 0, new Ox.FormItem({element: item}));
pos == 0 ?
self.$items[pos].insertBefore(self.$items[0]) :
self.$items[pos].insertAfter(self.$items[pos - 1]);
}
that.removeItem = function(pos) {
Ox.print('removeItem', pos);
self.$items[pos].remove();
self.options.items.splice(pos, 1);
self.$items.splice(pos, 1);
}
2010-07-24 01:32:08 +00:00
that.submit = function() {
2011-01-13 12:43:20 +00:00
//Ox.print('---- that.values()', that.values())
2010-07-24 01:32:08 +00:00
self.options.submit(that.values(), submitCallback);
};
that.values = function() { // fixme: can this be private?
2010-12-06 17:42:45 +00:00
/*
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) {
2010-07-24 01:32:08 +00:00
$.each(self.$items, function(i, $item) {
values[self.itemIds[i]] = self.$items[i].value();
});
2011-01-13 12:43:20 +00:00
//Ox.print('VALUES', values)
return values;
} else {
$.each(arguments[0], function(key, value) {
});
return that;
}
};
return that;
2010-02-10 16:37:26 +00:00
};
Ox.FormItem = function(options, self) {
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
.defaults({
2010-07-20 20:04:13 +00:00
element: null,
2010-09-03 20:54:40 +00:00
error: '',
})
2010-07-20 20:04:13 +00:00
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxFormItem')
2010-07-20 20:04:13 +00:00
.append(self.options.element);
2011-01-23 04:59:16 +00:00
self.$message = new Ox.Element()
.addClass('OxFormMessage')
.appendTo(that);
that.setMessage = function(message) {
self.$message.html(message)[message !== '' ? 'show' : 'hide']();
}
2010-07-24 01:32:08 +00:00
that.value = function() {
2010-12-24 17:13:18 +00:00
return self.options.element.value();
2010-07-24 01:32:08 +00:00
};
return that;
}
2010-12-06 17:42:45 +00:00
/**
2010-09-03 08:47:40 +00:00
Form Elements
2010-01-07 20:21:07 +00:00
*/
2010-12-06 17:42:45 +00:00
Ox.Button = function(options, self) {
2011-01-24 04:08:19 +00:00
/**
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
*/
2010-01-07 20:21:07 +00:00
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('input', self)
2010-01-07 20:21:07 +00:00
.defaults({
disabled: false,
2010-09-03 08:47:40 +00:00
group: false,
2010-09-03 20:54:40 +00:00
id: '',
overlap: 'none',
2010-01-07 20:21:07 +00:00
selectable: false,
selected: false,
2010-09-03 20:54:40 +00:00
size: 'medium',
// fixme: 'default' or ''?
style: 'default', // can be default, checkbox, symbol, or tab
title: '',
tooltip: '',
type: 'text',
width: 'auto'
2010-01-07 20:21:07 +00:00
})
2010-09-03 08:47:40 +00:00
.options(options || {})
2010-02-06 08:23:42 +00:00
.attr({
2010-09-03 20:54:40 +00:00
disabled: self.options.disabled ? 'disabled' : '',
type: self.options.type == 'text' ? 'button' : 'image'
})
2010-09-03 20:54:40 +00:00
.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'
2010-09-03 08:47:40 +00:00
})
.mousedown(mousedown)
.click(click);
2010-09-03 08:47:40 +00:00
$.extend(self, Ox.isArray(self.options.title) ? {
2010-09-03 20:54:40 +00:00
selectedTitle: Ox.setPropertyOnce(self.options.title, 'selected'),
2010-09-03 08:47:40 +00:00
titles: self.options.title
} : {
selectedTitle: 0,
titles: [{
2010-09-03 20:54:40 +00:00
id: '',
2010-09-03 08:47:40 +00:00
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);
2010-01-07 20:21:07 +00:00
}
2010-09-03 08:47:40 +00:00
2010-01-07 20:21:07 +00:00
function click() {
2010-12-26 20:16:35 +00:00
if (!self.options.disabled) {
var data = self.titles[self.selectedTitle];
if (!self.options.selectable) {
that.triggerEvent('click', data);
2010-02-10 09:59:59 +00:00
} else {
2011-01-14 09:54:28 +00:00
//self.options.selected = !self.options.selected;
//that.toggleClass('OxSelected');
2010-12-26 20:16:35 +00:00
if (self.options.group) {
that.triggerEvent('select', data);
} else {
that.toggleSelected();
2011-01-14 09:54:28 +00:00
//that.triggerEvent('change', {selected: self.options.selected});
2010-12-26 20:16:35 +00:00
}
}
if (self.titles.length == 2) {
that.toggleTitle();
2010-02-10 09:59:59 +00:00
}
2010-09-03 08:47:40 +00:00
}
}
function mousedown(e) {
2010-09-03 20:54:40 +00:00
if (self.options.type == 'image' && $.browser.safari) {
2010-09-03 08:47:40 +00:00
// keep image from being draggable
e.preventDefault();
2010-09-03 08:47:40 +00:00
}
}
function mouseenter(e) {
self.$tooltip.show(e.clientX, e.clientY);
}
2010-09-03 08:47:40 +00:00
function mouseleave() {
2010-09-03 08:47:40 +00:00
self.$tooltip.hide();
}
function setTitle(title) {
self.title = title;
2010-09-03 20:54:40 +00:00
if (self.options.type == 'image') {
2010-09-03 08:47:40 +00:00
that.attr({
2010-09-03 20:54:40 +00:00
src: oxui.path + 'png/ox.ui.' + Ox.theme() +
'/symbol' + Ox.toTitleCase(title) + '.png'
2010-09-03 08:47:40 +00:00
});
} else {
that.val(title);
2010-01-07 20:21:07 +00:00
}
}
2010-09-03 08:47:40 +00:00
self.onChange = function(key, value) {
2010-09-03 20:54:40 +00:00
if (key == 'disabled') {
2010-07-24 01:32:08 +00:00
that.attr({
2010-09-03 20:54:40 +00:00
disabled: value ? 'disabled' : ''
2010-07-24 01:32:08 +00:00
})
2010-09-03 20:54:40 +00:00
.toggleClass('OxDisabled');
} else if (key == 'selected') {
if (value != that.hasClass('OxSelected')) { // fixme: neccessary?
that.toggleClass('OxSelected');
2010-01-07 20:21:07 +00:00
}
2010-09-03 20:54:40 +00:00
that.triggerEvent('change');
} else if (key == 'title') {
2010-09-03 08:47:40 +00:00
setTitle(value);
2010-09-03 20:54:40 +00:00
} else if (key == 'width') {
2010-09-03 08:47:40 +00:00
that.$element.css({
2010-09-03 20:54:40 +00:00
width: (value - 14) + 'px'
2010-09-03 08:47:40 +00:00
});
2010-01-07 20:21:07 +00:00
}
}
2010-09-03 08:47:40 +00:00
2010-01-31 08:03:22 +00:00
that.toggleDisabled = function() {
that.options({
enabled: !self.options.disabled
});
2011-01-14 09:54:28 +00:00
//self.options.disabled = !self.options.disabled;
2010-01-31 08:03:22 +00:00
}
2010-09-03 08:47:40 +00:00
2010-01-07 20:21:07 +00:00
that.toggleSelected = function() {
that.options({
selected: !self.options.selected
});
2011-01-14 09:54:28 +00:00
//self.options.selected = !self.options.selected;
2010-01-07 20:21:07 +00:00
}
2010-09-03 08:47:40 +00:00
that.toggleTitle = function() {
self.selectedTitle = 1 - self.selectedTitle;
setTitle(self.titles[self.selectedTitle].title);
2010-09-03 20:54:40 +00:00
self.$tooltip && self.$tooltip.options({
2010-09-03 08:47:40 +00:00
title: self.tooltips[self.selectedTitle]
});
}
2010-01-07 20:21:07 +00:00
return that;
2010-09-03 08:47:40 +00:00
};
2010-01-07 20:21:07 +00:00
2010-12-06 17:42:45 +00:00
Ox.ButtonGroup = function(options, self) {
2011-01-24 04:08:19 +00:00
/**
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
*/
2010-01-07 20:21:07 +00:00
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
2010-02-10 09:59:59 +00:00
buttons: [],
2010-09-03 08:47:40 +00:00
max: 1,
min: 1,
2010-01-07 20:21:07 +00:00
selectable: false,
2010-09-03 20:54:40 +00:00
size: 'medium',
style: '',
type: 'text',
2010-01-07 20:21:07 +00:00
})
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxButtonGroup');
2010-02-08 09:35:24 +00:00
2010-09-03 08:47:40 +00:00
if (self.options.selectable) {
self.optionGroup = new Ox.OptionGroup(
self.options.buttons,
self.options.min,
self.options.max,
2010-09-03 20:54:40 +00:00
'selected'
2010-09-03 08:47:40 +00:00
);
self.options.buttons = self.optionGroup.init();
}
self.$buttons = [];
2010-02-10 09:59:59 +00:00
$.each(self.options.buttons, function(position, button) {
2010-09-03 08:47:40 +00:00
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
})
2010-09-03 20:54:40 +00:00
.bindEvent('select', function() {
2010-09-03 08:47:40 +00:00
selectButton(position);
})
.appendTo(that);
2010-02-08 09:35:24 +00:00
});
2010-09-03 08:47:40 +00:00
function selectButton(pos) {
var toggled = self.optionGroup.toggle(pos);
if (toggled.length) {
$.each(toggled, function(i, pos) {
self.$buttons[pos].toggleSelected();
});
2010-09-03 20:54:40 +00:00
that.triggerEvent('change', {
2010-09-03 08:47:40 +00:00
selected: $.map(self.optionGroup.selected(), function(v, i) {
return self.options.buttons[v].id;
})
});
2010-02-08 09:35:24 +00:00
}
}
2010-02-10 09:59:59 +00:00
2010-01-07 20:21:07 +00:00
return that;
};
2010-12-06 17:42:45 +00:00
Ox.Checkbox = function(options, self) {
2011-01-24 04:08:19 +00:00
/**
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}
*/
2010-02-19 10:24:02 +00:00
2010-01-07 20:21:07 +00:00
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-01-07 20:21:07 +00:00
.defaults({
2010-09-03 08:47:40 +00:00
disabled: false,
2010-09-03 20:54:40 +00:00
id: '',
2010-09-03 08:47:40 +00:00
group: false,
checked: false,
2011-01-23 04:59:16 +00:00
overlap: 'none',
2010-09-03 20:54:40 +00:00
title: '',
width: 'auto'
2010-01-07 20:21:07 +00:00
})
2010-02-18 07:27:32 +00:00
.options(options || {})
2011-01-23 04:59:16 +00:00
.addClass('OxCheckbox' +
(self.options.overlap == 'none' ? '' : ' OxOverlap' +
Ox.toTitleCase(self.options.overlap))
)
2010-09-03 08:47:40 +00:00
.attr(self.options.disabled ? {
2010-09-03 20:54:40 +00:00
disabled: 'disabled'
2010-09-03 08:47:40 +00:00
} : {});
2010-02-19 10:24:02 +00:00
2010-09-03 08:47:40 +00:00
if (self.options.title) {
2010-09-03 20:54:40 +00:00
self.options.width != 'auto' && that.css({
width: self.options.width + 'px'
2010-09-03 08:47:40 +00:00
});
self.$title = new Ox.Label({
disabled: self.options.disabled,
2010-09-03 20:54:40 +00:00
id: self.options.id + 'Label',
overlap: 'left',
2010-09-03 08:47:40 +00:00
title: self.options.title,
width: self.options.width - 16
})
.css({
2010-09-03 20:54:40 +00:00
float: 'right'
2010-02-19 10:24:02 +00:00
})
2010-09-03 08:47:40 +00:00
.click(clickTitle)
2010-02-19 10:24:02 +00:00
.appendTo(that);
}
2010-09-03 08:47:40 +00:00
self.$button = new Ox.Button({
disabled: self.options.disabled,
2010-09-03 20:54:40 +00:00
id: self.options.id + 'Button',
2010-09-03 08:47:40 +00:00
title: [
2010-09-03 20:54:40 +00:00
{id: 'none', title: 'none', selected: !self.options.checked},
{id: 'check', title: 'check', selected: self.options.checked}
2010-09-03 08:47:40 +00:00
],
2010-09-03 20:54:40 +00:00
type: 'image'
2010-02-19 10:24:02 +00:00
})
2010-09-03 20:54:40 +00:00
.addClass('OxCheckbox')
2010-09-03 08:47:40 +00:00
.click(clickButton)
2010-02-19 10:24:02 +00:00
.appendTo(that);
2010-09-03 08:47:40 +00:00
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();
2010-09-03 20:54:40 +00:00
that.triggerEvent('change', {
2010-09-03 08:47:40 +00:00
checked: self.options.checked,
id: self.options.id,
title: self.options.title
2010-02-18 07:27:32 +00:00
});
}
2010-02-19 10:24:02 +00:00
2010-09-03 08:47:40 +00:00
function clickTitle() {
2010-09-03 20:54:40 +00:00
!self.options.disabled && self.$button.trigger('click');
2010-02-26 13:46:14 +00:00
}
2010-07-24 01:32:08 +00:00
2010-09-03 08:47:40 +00:00
self.onChange = function(key, value) {
2010-09-03 20:54:40 +00:00
if (key == 'checked') {
2010-09-03 08:47:40 +00:00
that.toggleChecked();
}
};
2010-12-26 20:16:35 +00:00
that.checked = function() {
return self.options.checked;
}
2010-09-03 08:47:40 +00:00
that.toggleChecked = function() {
self.$button.toggleTitle();
return that;
2010-07-24 01:32:08 +00:00
}
2010-09-03 08:47:40 +00:00
return that;
2010-02-19 10:24:02 +00:00
2010-09-03 08:47:40 +00:00
};
Ox.CheckboxGroup = function(options, self) {
2011-01-24 04:08:19 +00:00
/**
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}
*/
2010-09-03 08:47:40 +00:00
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-09-03 08:47:40 +00:00
.defaults({
checkboxes: [],
max: 1,
min: 1,
width: 256
})
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxCheckboxGroup');
2010-09-03 08:47:40 +00:00
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);
})
2010-09-05 00:31:58 +00:00
});
2010-09-03 08:47:40 +00:00
$.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]
}))
2010-09-03 20:54:40 +00:00
.bindEvent('change', function() {
2010-09-03 08:47:40 +00:00
change(position);
})
.appendTo(that);
});
function change(pos) {
var toggled = self.optionGroup.toggle(pos);
2010-09-03 20:54:40 +00:00
//Ox.print('change', pos, 'toggled', toggled)
2010-09-03 08:47:40 +00:00
if (toggled.length) {
$.each(toggled, function(i, pos) {
self.$checkboxes[pos].toggleChecked();
});
2010-09-03 20:54:40 +00:00
that.triggerEvent('change', {
2010-09-03 08:47:40 +00:00
checked: $.map(self.optionGroup.checked(), function(v, i) {
return self.options.checkboxes[v].id;
})
});
}
}
return that;
};
2010-12-06 17:42:45 +00:00
Ox.Input = function(options, self) {
2011-01-24 04:08:19 +00:00
/**
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
autovalidate --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', 'textarea'
2011-01-24 04:08:19 +00:00
value string
validate function, remote validation
width integer, px
methods:
events:
change
submit
*/
2010-09-03 08:47:40 +00:00
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-09-03 08:47:40 +00:00
.defaults({
arrows: false,
arrowStep: 1,
autocomplete: null,
autocompleteReplace: false,
autocompleteReplaceCorrect: false,
autocompleteSelect: false,
autocompleteSelectHighlight: false,
autocompleteSelectSubmit: false,
autovalidate: null,
clear: false,
2010-11-28 15:06:47 +00:00
disabled: false,
2010-09-03 20:54:40 +00:00
key: '',
2010-09-03 08:47:40 +00:00
min: 0,
max: 100,
2010-09-03 20:54:40 +00:00
label: '',
2010-09-03 08:47:40 +00:00
labelWidth: 64,
2010-09-03 20:54:40 +00:00
overlap: 'none',
placeholder: '',
2010-09-03 08:47:40 +00:00
serialize: null,
style: 'rounded',
2010-09-03 20:54:40 +00:00
textAlign: 'left',
type: 'text',
2010-12-24 17:13:18 +00:00
validate: null,
2010-09-03 20:54:40 +00:00
value: '',
2010-09-03 08:47:40 +00:00
width: 128
})
.options(options)
2011-02-25 10:23:33 +00:00
.addClass(
'OxInput OxMedium Ox' + Ox.toTitleCase(self.options.style) /*+ (
self.options.overlap != 'none' ?
' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''
)*/
)
2010-12-26 20:16:35 +00:00
.bindEvent($.extend(self.options.type == 'textarea' ? {} : {
2010-09-03 08:47:40 +00:00
key_enter: submit
}, {
2011-01-15 06:09:22 +00:00
key_control_v: paste,
2010-09-03 08:47:40 +00:00
key_escape: cancel
}));
if (
Ox.isArray(self.options.autocomplete) &&
self.options.autocompleteReplace &&
self.options.autocompleteReplaceCorrect &&
2010-09-03 20:54:40 +00:00
self.options.value === ''
2010-09-03 08:47:40 +00:00
) {
self.options.value = self.options.autocomplete[0]
}
// fixme: set to min, not 0
2010-09-03 20:54:40 +00:00
if (self.options.type == 'float') {
2010-09-03 08:47:40 +00:00
$.extend(self.options, {
2010-09-03 20:54:40 +00:00
autovalidate: 'float',
textAlign: 'right',
value: self.options.value || '0.0'
2010-09-03 08:47:40 +00:00
});
2010-09-03 20:54:40 +00:00
} else if (self.options.type == 'integer') {
2010-09-03 08:47:40 +00:00
$.extend(self.options, {
2010-09-03 20:54:40 +00:00
autovalidate: 'integer',
textAlign: 'right',
value: self.options.value || '0'
2010-09-03 08:47:40 +00:00
});
}
if (self.options.label) {
self.$label = new Ox.Label({
2010-09-03 20:54:40 +00:00
overlap: 'right',
textAlign: 'right',
2010-09-03 08:47:40 +00:00
title: self.options.label,
width: self.options.labelWidth
})
.css({
2010-09-03 20:54:40 +00:00
float: 'left', // fixme: use css rule
2010-09-03 08:47:40 +00:00
})
.click(function() {
2011-02-25 10:23:33 +00:00
// fixme: ???
// that.focus();
2010-09-03 08:47:40 +00:00
})
.appendTo(that);
}
if (self.options.arrows) {
self.arrows = [];
self.arrows[0] = [
new Ox.Button({
2010-09-03 20:54:40 +00:00
overlap: 'right',
title: 'previous',
type: 'image'
2010-09-03 08:47:40 +00:00
})
.css({
2010-09-03 20:54:40 +00:00
float: 'left'
2010-09-03 08:47:40 +00:00
})
.click(function() {
clickArrow(0);
})
.appendTo(that),
new Ox.Button({
2010-09-03 20:54:40 +00:00
overlap: 'left',
title: 'next',
type: 'image'
2010-09-03 08:47:40 +00:00
})
.css({
2010-09-03 20:54:40 +00:00
float: 'right'
2010-09-03 08:47:40 +00:00
})
.click(function() {
clickArrow(1);
})
.appendTo(that)
]
}
$.extend(self, {
bindKeyboard: self.options.autocomplete || self.options.autovalidate,
2010-09-03 20:54:40 +00:00
hasPasswordPlaceholder: self.options.type == 'password' && self.options.placeholder,
2010-09-03 08:47:40 +00:00
inputWidth: getInputWidth()
});
if (self.options.clear) {
self.$button = new Ox.Button({
2010-09-03 20:54:40 +00:00
overlap: 'left',
title: 'clear',
type: 'image'
2010-09-03 08:47:40 +00:00
})
.css({
2010-09-03 20:54:40 +00:00
float: 'right' // fixme: use css rule
2010-09-03 08:47:40 +00:00
})
.click(clear)
.appendTo(that);
}
2011-02-01 09:56:16 +00:00
self.$input = $(self.options.type == 'textarea' ? '<textarea>' : '<input>')
.addClass('OxInput OxMedium Ox' + Ox.toTitleCase(self.options.style))
2010-09-03 08:47:40 +00:00
.attr({
2010-09-03 20:54:40 +00:00
disabled: self.options.disabled ? 'disabled' : '',
type: self.options.type == 'password' ? 'password' : 'text'
2010-09-03 08:47:40 +00:00
})
2011-02-01 09:56:16 +00:00
.css($.extend({
2010-09-03 20:54:40 +00:00
width: self.inputWidth + 'px',
2010-09-03 08:47:40 +00:00
textAlign: self.options.textAlign
2011-02-01 09:56:16 +00:00
}, self.options.type == 'textarea' ? {
2011-02-01 13:45:48 +00:00
height: self.options.height + 'px',
2011-02-01 09:56:16 +00:00
} : {}))
2010-09-03 08:47:40 +00:00
.val(self.options.value)
.blur(blur)
.change(change)
.focus(focus)
.appendTo(that.$element);
2011-02-01 13:45:48 +00:00
// fixme: is there a better way than this one?
// should at least go into ox.ui.theme.foo.js
2011-02-09 17:56:35 +00:00
// probably better: divs in the background
2011-02-01 13:45:48 +00:00
if (self.options.type == 'textarea') {
$.extend(self, {
colors: Ox.theme() == 'classic' ?
[208, 232, 244] :
2011-02-09 17:56:35 +00:00
//[0, 16, 32],
[32, 48, 64],
2011-02-01 13:45:48 +00:00
colorstops: [8 / self.options.height, self.options.height - 8 / self.options.height]
});
self.$input.css({
background: '-moz-linear-gradient(top, rgb(' +
[self.colors[0], self.colors[0], self.colors[0]].join(', ') + '), rgb(' +
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' +
Math.round(self.colorstops[0] * 100) + '%, rgb(' +
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' +
Math.round(self.colorstops[1] * 100) + '%, rgb(' +
[self.colors[2], self.colors[2], self.colors[2]].join(', ') + '))'
});
self.$input.css({
background: '-webkit-gradient(linear, left top, left bottom, from(rgb(' +
[self.colors[0], self.colors[0], self.colors[0]].join(', ') + ')), color-stop(' +
self.colorstops[0] + ', ' + 'rgb(' +
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), color-stop( ' +
self.colorstops[1] + ', ' + 'rgb(' +
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), to(rgb(' +
[self.colors[2], self.colors[2], self.colors[2]].join(', ') + ')))'
});
}
2010-09-03 08:47:40 +00:00
if (self.hasPasswordPlaceholder) {
self.$input.hide();
2010-09-03 20:54:40 +00:00
self.$placeholder = $('<input>')
.addClass('OxInput OxMedium Ox' +
Ox.toTitleCase(self.options.style) +
' OxPlaceholder')
2010-09-03 08:47:40 +00:00
.attr({
2010-09-03 20:54:40 +00:00
type: 'text'
2010-09-03 08:47:40 +00:00
})
.css({
2010-09-03 20:54:40 +00:00
//float: 'left',
width: self.inputWidth + 'px'
2010-09-03 08:47:40 +00:00
})
.val(self.options.placeholder)
.focus(focus)
.appendTo(that.$element);
}
if (self.options.autocomplete && self.options.autocompleteSelect) {
2011-01-03 12:01:38 +00:00
self.$autocompleteMenu = constructAutocompleteMenu();
2010-09-03 08:47:40 +00:00
}
self.options.placeholder && setPlaceholder();
function autocomplete(oldValue, oldCursor) {
2011-01-23 04:59:16 +00:00
oldValue = Ox.isUndefined(oldValue) ? self.options.value : oldValue;
oldCursor = Ox.isUndefined(oldCursor) ? cursor : oldCursor;
2011-01-15 14:22:05 +00:00
Ox.print('autocomplete', oldValue, oldCursor)
2010-09-03 08:47:40 +00:00
if (self.options.value || self.options.autocompleteReplaceCorrect) {
if(Ox.isFunction(self.options.autocomplete)) {
if(self.options.key) {
self.options.autocomplete(self.options.key,
self.options.value,
autocompleteCallback)
} else {
self.options.autocomplete(self.options.value,
autocompleteCallback)
}
} else {
autocompleteCallback(autocompleteFunction(self.options.value));
}
2010-09-03 08:47:40 +00:00
}
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) {
2011-01-13 12:43:20 +00:00
//Ox.print('autocompleteCallback', values[0], self.options.value, self.options.value.length, oldValue, oldCursor)
2010-09-03 08:47:40 +00:00
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;
2011-01-13 12:43:20 +00:00
//Ox.print('selectEnd', selectEnd)
2010-09-03 08:47:40 +00:00
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 {
2010-09-03 20:54:40 +00:00
id: v.toLowerCase().replace(/ /g, '_'), // fixme: need function to do lowercase, underscores etc?
2010-09-03 08:47:40 +00:00
title: self.options.autocompleteSelectHighlight ? v.replace(
2010-09-03 20:54:40 +00:00
new RegExp('(' + value + ')', 'ig'),
'<span class="OxHighlight">$1</span>'
2010-09-03 08:47:40 +00:00
) : v
};
}),
selected: selected
}).showMenu();
} else {
self.$autocompleteMenu.hideMenu();
}
}
2010-09-03 20:54:40 +00:00
that.triggerEvent('autocomplete', {
2010-09-03 08:47:40 +00:00
value: newValue
});
}
}
2011-01-03 12:01:38 +00:00
function constructAutocompleteMenu() {
var menu = 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) {
menu.bindEvent({
deselect: deselectMenu,
select: selectMenu,
});
}
return menu;
}
2010-09-03 08:47:40 +00:00
function autovalidate() {
var blur, oldCursor, oldValue;
if (arguments.length == 1) {
blur = arguments[0];
} else {
blur = false;
oldValue = arguments[0];
oldCursor = arguments[1];
}
if(Ox.isFunction(self.options.autovalidate)) {
if(self.options.key) {
self.options.autovalidate(self.options.key, self.options.value,
blur, autovalidateCallback);
} else {
self.options.autovalidate(self.options.value, blur,
autovalidateCallback);
}
} else {
if(Ox.isRegExp(self.options.autovalidate)) {
autovalidateCallback(autovalidateFunction(self.options.value));
} else {
autovalidateTypeFunction(self.options.type, self.options.value);
}
}
2010-09-03 08:47:40 +00:00
function autovalidateFunction(value) {
var regexp = new RegExp(self.options.autovalidate);
2010-12-26 20:16:35 +00:00
return $.map(value.split(''), function(v) {
return regexp(v) ? v : null;
2010-09-03 20:54:40 +00:00
}).join('');
2010-09-03 08:47:40 +00:00
}
function autovalidateTypeFunction(type, value) {
2010-12-26 20:16:35 +00:00
// fixme: remove trailing zeroes on blur
2010-09-03 08:47:40 +00:00
var cursor,
2010-09-03 20:54:40 +00:00
regexp = type == 'float' ? /[\d\.]/ : /\d/;
if (type == 'float') {
if (value.indexOf('.') != value.lastIndexOf('.')) {
2010-09-03 08:47:40 +00:00
value = oldValue;
} else {
if (self.autovalidateFloatFlag) {
2010-09-03 20:54:40 +00:00
if (Ox.endsWith(value, '.')) {
2010-09-03 08:47:40 +00:00
value = value.substr(0, value.length - 1);
}
self.autovalidateFloatFlag = false;
}
2010-12-26 20:16:35 +00:00
while (value[0] == '0' && value[1] != '.') {
value = value.substr(1);
}
2010-09-03 20:54:40 +00:00
while (Ox.startsWith(value, '.')) {
if (Ox.startsWith(value, '..')) {
2010-09-03 08:47:40 +00:00
value = value.substr(1);
} else {
2010-09-03 20:54:40 +00:00
value = '0' + value;
2010-09-03 08:47:40 +00:00
}
}
2010-09-03 20:54:40 +00:00
if (Ox.endsWith(value, '.')) {
value += '0';
2010-09-03 08:47:40 +00:00
cursor = [value.length - 1, value.length];
self.autovalidateFloatFlag = true;
}
}
}
2010-12-26 20:16:35 +00:00
value = $.map(value.split(''), function(v) {
return regexp(v) ? v : null;
2010-09-03 20:54:40 +00:00
}).join('');
if (type == 'integer') {
while (value.length > 1 && Ox.startsWith(value, '0')) {
2010-09-03 08:47:40 +00:00
value = value.substr(1);
}
}
2010-09-03 20:54:40 +00:00
if (value === '') {
value = type == 'float' ? '0.0' : '0';
2010-09-03 08:47:40 +00:00
cursor = [0, value.length];
} else if (value > self.options.max) {
value = oldValue;
}
autovalidateCallback(value, cursor);
}
function autovalidateCallback(newValue, newCursor) {
2011-01-13 12:43:20 +00:00
//Ox.print('autovalidateCallback', newValue, oldCursor)
2010-09-03 08:47:40 +00:00
self.options.value = newValue;
self.$input.val(self.options.value);
!blur && cursor(
newCursor || (oldCursor[1] + newValue.length - oldValue.length)
);
2010-09-03 20:54:40 +00:00
that.triggerEvent('autovalidate', {
2010-09-03 08:47:40 +00:00
value: self.options.value
});
}
}
/*
function autovalidate(blur) {
2010-09-03 20:54:40 +00:00
Ox.print('autovalidate', self.options.value, blur || false)
2010-09-03 08:47:40 +00:00
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;
2010-09-03 20:54:40 +00:00
return $.map(value.toLowerCase().split(''), function(v, i) {
2010-09-03 08:47:40 +00:00
if (new RegExp(self.options.autocorrect)(v)) {
return v;
} else {
return null;
}
2010-09-03 20:54:40 +00:00
}).join('');
2010-09-03 08:47:40 +00:00
}
*/
function blur() {
that.loseFocus();
2010-09-03 20:54:40 +00:00
//that.removeClass('OxFocus');
2010-09-03 08:47:40 +00:00
self.options.value = self.$input.val();
self.options.autovalidate && autovalidate(true);
self.options.placeholder && setPlaceholder();
2010-12-24 17:13:18 +00:00
self.options.validate && validate();
2010-09-03 08:47:40 +00:00
if (self.bindKeyboard) {
2010-09-03 20:54:40 +00:00
$document.unbind('keydown', keypress);
$document.unbind('keypress', keypress);
2010-09-03 08:47:40 +00:00
}
that.triggerEvent('blur', {});
2010-09-03 08:47:40 +00:00
}
function cancel() {
self.$input.blur();
}
function change() {
self.options.value = self.$input.val();
2010-09-03 20:54:40 +00:00
that.triggerEvent('change', {
2010-09-03 08:47:40 +00:00
value: self.options.value
});
}
function clear() {
// fixme: set to min, not zero
// fixme: make this work for password
2010-09-03 20:54:40 +00:00
var value = '';
if (self.options.type == 'float') {
value = '0.0';
} else if (self.options.type == 'integer') {
value = '0'
2010-09-03 08:47:40 +00:00
}
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
2010-12-26 20:16:35 +00:00
).toString();
2010-09-03 08:47:40 +00:00
self.$input.val(self.options.value);//.focus();
}
function clickMenu(event, data) {
2011-01-13 12:43:20 +00:00
//Ox.print('clickMenu', data);
2010-09-03 08:47:40 +00:00
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() {
2011-01-13 12:43:20 +00:00
//Ox.print('focus()')
2010-09-03 08:47:40 +00:00
if (
2010-09-03 20:54:40 +00:00
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'))
2010-09-03 08:47:40 +00:00
) {
return;
}
that.gainFocus();
self.options.placeholder && setPlaceholder();
if (self.bindKeyboard) {
2011-01-13 12:43:20 +00:00
//Ox.print('binding...')
2010-09-03 08:47:40 +00:00
// 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 -
2010-09-03 08:47:40 +00:00
(self.options.arrows ? 32 : 0) -
(self.options.clear ? 16 : 0) -
(self.options.label ? self.options.labelWidth : 0) -
(self.options.style == 'rounded' ? 14 : 6);
2010-09-03 08:47:40 +00:00
}
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;
2011-01-13 12:43:20 +00:00
//Ox.print('keypress', event.keyCode)
2010-09-03 08:47:40 +00:00
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) {
2011-01-13 12:43:20 +00:00
//Ox.print(value, '->', newValue);
2010-09-03 08:47:40 +00:00
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);
}
2010-09-03 20:54:40 +00:00
if ((event.keyCode == 38 || event.keyCode == 40) && self.options.autocompleteSelect && self.$autocompleteMenu.is(':visible')) {
2010-09-03 08:47:40 +00:00
return false;
}
}
2011-01-15 06:09:22 +00:00
function paste() {
var data = Ox.Clipboard.paste();
data.text && self.$input.val(data.text);
}
2010-09-03 08:47:40 +00:00
function selectMenu(event, data) {
var pos = cursor();
2011-01-13 12:43:20 +00:00
//Ox.print('selectMenu', pos)
2010-09-03 08:47:40 +00:00
self.options.value = data.title
self.$input.val(self.options.value);
cursor(pos[0], self.options.value.length)
}
function setPlaceholder() {
if (self.options.placeholder) {
2010-09-03 20:54:40 +00:00
if (that.hasClass('OxFocus')) {
if (self.options.value === '') {
if (self.options.type == 'password') {
2010-09-03 08:47:40 +00:00
self.$placeholder.hide();
2011-02-25 10:23:33 +00:00
self.$input.show().focusInput();
2010-09-03 08:47:40 +00:00
} else {
self.$input
2010-09-03 20:54:40 +00:00
.removeClass('OxPlaceholder')
.val('');
2010-09-03 08:47:40 +00:00
}
}
} else {
2010-09-03 20:54:40 +00:00
if (self.options.value === '') {
if (self.options.type == 'password') {
2010-09-03 08:47:40 +00:00
self.$input.hide();
self.$placeholder.show();
} else {
self.$input
2010-09-03 20:54:40 +00:00
.addClass('OxPlaceholder')
2010-09-03 08:47:40 +00:00
.val(self.options.placeholder)
}
} else {
self.$input
2010-09-03 20:54:40 +00:00
.removeClass('OxPlaceholder')
2010-09-03 08:47:40 +00:00
.val(self.options.value)
}
}
}
}
function setWidth() {
}
function submit() {
self.$input.blur();
2010-09-03 20:54:40 +00:00
that.triggerEvent('submit', {
2010-09-03 08:47:40 +00:00
value: self.options.value
});
}
2010-12-24 17:13:18 +00:00
function validate() {
self.options.validate(self.options.value, function(data) {
that.triggerEvent('validate', data);
});
}
2010-09-03 08:47:40 +00:00
self.onChange = function(key, value) {
var inputWidth, val;
2011-01-03 12:01:38 +00:00
if (['autocomplete', 'autocompleteReplace', 'autocompleteSelect', 'autovalidate'].indexOf(key) > -1) {
if (self.options.autocomplete && self.options.autocompleteSelect) {
self.$autocompleteMenu = constructAutocompleteMenu();
}
self.bindKeyboard = self.options.autocomplete || self.options.autovalidate;
} else if (key == 'disabled') {
2010-11-28 15:06:47 +00:00
self.$input.attr({
disabled: value ? 'disabled' : ''
});
} else if (key == 'placeholder') {
2010-09-04 14:28:40 +00:00
setPlaceholder();
} else if (key == 'value') {
2011-01-15 06:09:22 +00:00
val = self.$input.val(); // fixme: ??
2010-09-03 08:47:40 +00:00
self.$input.val(value);
setPlaceholder();
2010-09-03 20:54:40 +00:00
} else if (key == 'width') {
2010-09-03 08:47:40 +00:00
inputWidth = getInputWidth();
self.$input.css({
2010-09-03 20:54:40 +00:00
width: inputWidth + 'px'
2010-09-03 08:47:40 +00:00
});
self.hasPasswordPlaceholder && self.$placeholder.css({
2010-09-03 20:54:40 +00:00
width: inputWidth + 'px'
2010-09-03 08:47:40 +00:00
});
}
};
2011-02-25 10:23:33 +00:00
that.focusInput = function() {
2010-09-03 08:47:40 +00:00
self.$input.focus();
cursor(0, self.$input.val().length);
return that;
2010-09-03 08:47:40 +00:00
};
2010-12-24 17:13:18 +00:00
that.value = function() {
2011-01-03 23:38:43 +00:00
return self.$input.hasClass('OxPlaceholder') ? '' : self.$input.val();
2010-12-24 17:13:18 +00:00
};
2010-09-03 08:47:40 +00:00
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) {
2010-09-03 20:54:40 +00:00
values.push(v + '');
2010-09-03 08:47:40 +00:00
pad && v.toString().length < maxLength && values.push(Ox.pad(v, maxLength));
});
return function(value, blur, callback) {
var results;
2010-09-03 20:54:40 +00:00
if (year && value == '1') {
value = '1900';
2010-09-03 08:47:40 +00:00
} 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 || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-09-03 08:47:40 +00:00
.defaults({
2010-09-03 20:54:40 +00:00
id: '',
2010-09-03 08:47:40 +00:00
inputs: [],
separators: [],
width: 0
})
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxInputGroup')
2010-09-03 08:47:40 +00:00
.click(click);
if (self.options.width) {
setWidths();
} else {
self.options.width = getWidth();
}
that.css({
2010-09-03 20:54:40 +00:00
width: self.options.width + 'px'
2010-09-03 08:47:40 +00:00
});
$.extend(self, {
//$input: [],
$separator: []
});
$.each(self.options.separators, function(i, v) {
2011-01-23 04:59:16 +00:00
self.options.id == 'debug' && Ox.print('separator #' + i + ' ' + self.options.inputs[i].options('id') + ' ' + self.options.inputs[i].options('width'))
2010-09-03 08:47:40 +00:00
self.$separator[i] = new Ox.Label({
2010-09-03 20:54:40 +00:00
textAlign: 'center',
2010-09-03 08:47:40 +00:00
title: v.title,
width: v.width + 32
})
2010-09-03 20:54:40 +00:00
.addClass('OxSeparator')
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
marginLeft: (self.options.inputs[i].options('width') - (i == 0 ? 16 : 32)) + 'px'
2010-09-03 08:47:40 +00:00
})
.appendTo(that);
});
$.each(self.options.inputs, function(i, $input) {
$input.options({
2010-09-03 20:54:40 +00:00
id: self.options.id + Ox.toTitleCase($input.options('id')),
2010-09-03 08:47:40 +00:00
parent: that
})
.css({
marginLeft: -Ox.sum($.map(self.options.inputs, function(v_, i_) {
2010-09-03 20:54:40 +00:00
return i_ > i ? self.options.inputs[i_ - 1].options('width') +
2010-09-03 08:47:40 +00:00
self.options.separators[i_ - 1].width : (i_ == i ? 16 : 0);
2010-09-03 20:54:40 +00:00
})) + 'px'
2010-09-03 08:47:40 +00:00
})
.bindEvent({
change: change,
2010-12-26 20:16:35 +00:00
submit: change,
validate: validate
2010-09-03 08:47:40 +00:00
})
.appendTo(that);
});
function change(event, data) {
2011-01-13 12:43:20 +00:00
//Ox.print('InputGroup change')
2010-09-03 08:47:40 +00:00
// fixme: would be good to pass a value here
2010-09-03 20:54:40 +00:00
that.triggerEvent('change');
2010-09-03 08:47:40 +00:00
}
function click(event) {
2010-09-03 20:54:40 +00:00
if ($(event.target).hasClass('OxSeparator')) {
2011-02-25 10:23:33 +00:00
self.options.inputs[0].focusInput();
2010-09-03 08:47:40 +00:00
}
}
function getWidth() {
return Ox.sum($.map(self.options.inputs, function(v, i) {
2010-09-03 20:54:40 +00:00
return v.options('width');
2010-09-03 08:47:40 +00:00
})) + Ox.sum($.map(self.options.separators, function(v, i) {
return v.width;
2011-01-23 04:59:16 +00:00
})) + 2; // fixme: why + 2?
2010-09-03 08:47:40 +00:00
}
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]
});
});
}
2010-12-26 20:16:35 +00:00
function validate(event, data) {
2011-01-13 12:43:20 +00:00
//Ox.print('INPUTGROUP TRIGGER VALIDATE')
2010-12-26 20:16:35 +00:00
that.triggerEvent('validate', data);
}
2010-09-03 08:47:40 +00:00
// fixme: is this used?
that.getInputById = function(id) {
var input = null;
$.each(self.options.inputs, function(i, v) {
2011-01-13 12:43:20 +00:00
//Ox.print(v, v.options('id'), id)
2010-09-03 20:54:40 +00:00
if (v.options('id') == self.options.id + Ox.toTitleCase(id)) {
2010-09-03 08:47:40 +00:00
input = v;
return false;
}
});
return input;
};
2010-12-26 20:16:35 +00:00
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;
});
};
2010-09-03 08:47:40 +00:00
return that;
};
Ox.ColorInput = function(options, self) {
var self = $.extend(self || {}, {
options: $.extend({
2010-09-03 20:54:40 +00:00
id: '',
value: '0, 0, 0'
2010-09-03 08:47:40 +00:00
}, options)
}),
that;
2010-09-03 20:54:40 +00:00
self.values = self.options.value.split(', ');
2010-09-03 08:47:40 +00:00
self.$inputs = [];
2010-09-03 20:54:40 +00:00
$.each(['red', 'green', 'blue'], function(i, v) {
2010-09-03 08:47:40 +00:00
self.$inputs[i] = new Ox.Input({
id: v,
max: 255,
2010-09-03 20:54:40 +00:00
type: 'integer',
2010-09-03 08:47:40 +00:00
value: self.values[i],
width: 36
})
2010-09-03 20:54:40 +00:00
.bindEvent('autovalidate', change);
2010-09-03 08:47:40 +00:00
});
self.$inputs[3] = new Ox.Label({
2010-09-03 20:54:40 +00:00
id: 'color',
2010-09-03 08:47:40 +00:00
width: 36
})
.css({
2010-09-03 20:54:40 +00:00
background: 'rgb(' + self.options.value + ')'
2010-09-03 08:47:40 +00:00
});
self.$inputs[4] = new Ox.ColorPicker({
2010-09-03 20:54:40 +00:00
id: 'picker'
2010-09-03 08:47:40 +00:00
})
2010-09-03 20:54:40 +00:00
.bindEvent('change', function(event, data) {
2011-01-13 12:43:20 +00:00
//Ox.print('change function called');
2010-09-03 08:47:40 +00:00
self.options.value = data.value;
2010-09-03 20:54:40 +00:00
self.values = data.value.split(', ');
2010-09-03 08:47:40 +00:00
$.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: [
2010-09-03 20:54:40 +00:00
{title: ',', width: 8},
{title: ',', width: 8},
{title: '', width: 8},
{title: '', width: 8}
2010-09-03 08:47:40 +00:00
],
value: self.options.value // fixme: it'd be nicer if this would be taken care of by passing self
}, self)
2010-09-03 20:54:40 +00:00
.bindEvent('change', change);
2010-09-03 08:47:40 +00:00
function change() {
self.options.value = $.map(self.$inputs, function(v, i) {
2010-09-03 20:54:40 +00:00
return v.options('value');
}).join(', ');
2010-09-03 08:47:40 +00:00
self.$inputs[3].css({
2010-09-03 20:54:40 +00:00
background: 'rgb(' + self.options.value + ')'
2010-09-03 08:47:40 +00:00
});
}
return that;
};
Ox.DateInput = function(options, self) {
2011-01-24 04:08:19 +00:00
/**
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
}
*/
2010-09-03 08:47:40 +00:00
var self = $.extend(self || {}, {
options: $.extend({
2010-09-03 20:54:40 +00:00
format: 'short',
value: Ox.formatDate(new Date(), '%F'),
2010-09-03 08:47:40 +00:00
weekday: false,
width: {
day: 32,
2010-09-03 20:54:40 +00:00
month: options.format == 'long' ? 80 : (options.format == 'medium' ? 40 : 32),
weekday: options.format == 'long' ? 80 : 40,
2010-09-03 08:47:40 +00:00
year: 48
}
}, options)
}),
that;
$.extend(self, {
2010-09-03 20:54:40 +00:00
date: new Date(self.options.value.replace(/-/g, '/')),
2010-09-03 08:47:40 +00:00
formats: {
2010-09-03 20:54:40 +00:00
day: '%d',
month: self.options.format == 'short' ? '%m' :
(self.options.format == 'medium' ? '%b' : '%B'),
weekday: self.options.format == 'long' ? '%A' : '%a',
year: '%Y'
2010-09-03 08:47:40 +00:00
},
2010-09-03 20:54:40 +00:00
months: self.options.format == 'long' ? Ox.MONTHS : $.map(Ox.MONTHS, function(v, i) {
2010-09-03 08:47:40 +00:00
return v.substr(0, 3);
}),
2010-09-03 20:54:40 +00:00
weekdays: self.options.format == 'long' ? Ox.WEEKDAYS : $.map(Ox.WEEKDAYS, function(v, i) {
2010-09-03 08:47:40 +00:00
return v.substr(0, 3);
})
});
self.$input = $.extend(self.options.weekday ? {
weekday: new Ox.Input({
autocomplete: self.weekdays,
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
2010-09-03 20:54:40 +00:00
id: 'weekday',
2010-09-03 08:47:40 +00:00
value: Ox.formatDate(self.date, self.formats.weekday),
width: self.options.width.weekday
})
2010-09-03 20:54:40 +00:00
.bindEvent('autocomplete', changeWeekday),
2010-09-03 08:47:40 +00:00
} : {}, {
day: new Ox.Input({
autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth(
2010-09-03 20:54:40 +00:00
parseInt(Ox.formatDate(self.date, '%Y'), 10),
parseInt(Ox.formatDate(self.date, '%m'), 10)
2010-09-03 08:47:40 +00:00
) + 1), function(v, i) {
2010-09-03 20:54:40 +00:00
return self.options.format == 'short' ? Ox.pad(v, 2) : v.toString();
2010-09-03 08:47:40 +00:00
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
2010-09-03 20:54:40 +00:00
id: 'day',
2010-09-03 08:47:40 +00:00
value: Ox.formatDate(self.date, self.formats.day),
2010-09-03 20:54:40 +00:00
textAlign: 'right',
2010-09-03 08:47:40 +00:00
width: self.options.width.day
})
2010-09-03 20:54:40 +00:00
.bindEvent('autocomplete', changeDay),
2010-09-03 08:47:40 +00:00
month: new Ox.Input({
2010-09-03 20:54:40 +00:00
autocomplete: self.options.format == 'short' ? $.map(Ox.range(1, 13), function(v, i) {
2010-09-03 08:47:40 +00:00
return Ox.pad(v, 2);
}) : self.months,
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
2010-09-03 20:54:40 +00:00
id: 'month',
2010-09-03 08:47:40 +00:00
value: Ox.formatDate(self.date, self.formats.month),
2010-09-03 20:54:40 +00:00
textAlign: self.options.format == 'short' ? 'right' : 'left',
2010-09-03 08:47:40 +00:00
width: self.options.width.month
})
2010-09-03 20:54:40 +00:00
.bindEvent('autocomplete', changeMonthOrYear),
2010-09-03 08:47:40 +00:00
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,
2010-09-03 20:54:40 +00:00
id: 'year',
2010-09-03 08:47:40 +00:00
value: Ox.formatDate(self.date, self.formats.year),
2010-09-03 20:54:40 +00:00
textAlign: 'right',
2010-09-03 08:47:40 +00:00
width: self.options.width.year
})
2010-09-03 20:54:40 +00:00
.bindEvent('autocomplete', changeMonthOrYear)
2010-09-03 08:47:40 +00:00
});
that = new Ox.InputGroup($.extend(self.options, {
id: self.options.id,
inputs: $.merge(self.options.weekday ? [
self.$input.weekday
2010-09-03 20:54:40 +00:00
] : [], self.options.format == 'short' ? [
2010-09-03 08:47:40 +00:00
self.$input.year, self.$input.month, self.$input.day
] : [
self.$input.month, self.$input.day, self.$input.year
]),
separators: $.merge(self.options.weekday ? [
2010-09-03 20:54:40 +00:00
{title: self.options.format == 'short' ? '' : ',', width: 8},
] : [], self.options.format == 'short' ? [
{title: '-', width: 8}, {title: '-', width: 8}
2010-09-03 08:47:40 +00:00
] : [
2010-09-03 20:54:40 +00:00
{title: '', width: 8}, {title: ',', width: 8}
2010-09-03 08:47:40 +00:00
]),
width: 0
}), self);
2011-01-13 12:43:20 +00:00
//Ox.print('SELF', self)
2010-09-03 08:47:40 +00:00
function changeDay() {
self.options.weekday && self.$input.weekday.options({
value: Ox.formatDate(new Date([
2010-09-03 20:54:40 +00:00
self.$input.month.options('value'),
self.$input.day.options('value'),
self.$input.year.options('value')
].join(' ')), self.formats.weekday)
2010-09-03 08:47:40 +00:00
});
setValue();
}
function changeMonthOrYear() {
2010-09-03 20:54:40 +00:00
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);
2010-09-03 08:47:40 +00:00
day = day <= days ? day : days;
2011-01-13 12:43:20 +00:00
//Ox.print(year, month, 'day days', day, days)
2010-09-03 08:47:40 +00:00
self.options.weekday && self.$input.weekday.options({
2010-09-03 20:54:40 +00:00
value: Ox.formatDate(new Date([month, day, year].join(' ')), self.formats.weekday)
2010-09-03 08:47:40 +00:00
});
self.$input.day.options({
autocomplete: $.map(Ox.range(1, days + 1), function(v, i) {
2010-09-03 20:54:40 +00:00
return self.options.format == 'short' ? Ox.pad(v, 2) : v.toString();
2010-09-03 08:47:40 +00:00
}),
2010-09-03 20:54:40 +00:00
value: self.options.format == 'short' ? Ox.pad(day, 2) : day.toString()
2010-09-03 08:47:40 +00:00
});
setValue();
}
function changeWeekday() {
var date = getDateInWeek(
2010-09-03 20:54:40 +00:00
self.$input.weekday.options('value'),
self.$input.month.options('value'),
self.$input.day.options('value'),
self.$input.year.options('value')
2010-09-03 08:47:40 +00:00
);
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) {
2010-09-03 20:54:40 +00:00
return self.options.format == 'short' ? Ox.pad(v, 2) : v.toString();
2010-09-03 08:47:40 +00:00
}),
value: date.day
});
self.$input.year.options({value: date.year});
setValue();
}
function getDateInWeek(weekday, month, day, year) {
2011-01-13 12:43:20 +00:00
//Ox.print([month, day, year].join(' '))
2010-09-03 20:54:40 +00:00
var date = new Date([month, day, year].join(' '));
2010-09-03 08:47:40 +00:00
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() {
2010-09-03 20:54:40 +00:00
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');
2010-09-03 08:47:40 +00:00
}
/*
function normalize() {
2010-09-03 20:54:40 +00:00
var year = that.getInputById('year').options('value'),
month = that.getInputById('month').options('value'),
day = that.getInputById('day').options('value')
2010-09-03 08:47:40 +00:00
return {
year: year,
2010-09-03 20:54:40 +00:00
month: self.options.format == 'short' ? month :
Ox.pad((format == 'medium' ? Ox.WEEKDAYS.map(function(v, i) {
2010-09-03 08:47:40 +00:00
return v.substr(0, 3);
}) : Ox.WEEKDAYS).indexOf(month), 2),
day: Ox.pad(day, 2)
}
}
*/
/*
that.serialize = function() {
var normal = normalize();
2010-09-03 20:54:40 +00:00
return [normal.year, normal.month, normal.day].join('-');
2010-09-03 08:47:40 +00:00
}
*/
return that;
};
Ox.DateTimeInput = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
ampm: false,
2010-09-03 20:54:40 +00:00
format: 'short',
2010-09-03 08:47:40 +00:00
seconds: false,
2010-09-03 20:54:40 +00:00
value: Ox.formatDate(new Date(), '%F %T'),
2010-09-03 08:47:40 +00:00
weekday: false
})
.options(options || {});
2010-09-03 20:54:40 +00:00
self.values = self.options.value.split(' ');
2011-01-13 12:43:20 +00:00
//Ox.print(self.values)
2010-09-03 08:47:40 +00:00
that = new Ox.InputGroup({
inputs: [
new Ox.DateInput({
format: self.options.format,
2010-09-03 20:54:40 +00:00
id: 'date',
2010-09-03 08:47:40 +00:00
value: self.values[0],
weekday: self.options.weekday
}),
new Ox.TimeInput({
ampm: self.options.ampm,
2010-09-03 20:54:40 +00:00
id: 'time',
2010-09-03 08:47:40 +00:00
value: self.values[1],
seconds: self.options.seconds
})
],
separators: [
2010-09-03 20:54:40 +00:00
{title: '', width: 8}
2010-09-03 08:47:40 +00:00
],
value: self.options.value
})
2010-09-03 20:54:40 +00:00
.bindEvent('change', setValue);
2010-09-03 08:47:40 +00:00
function setValue() {
self.options.value = [
2010-09-03 20:54:40 +00:00
self.options('inputs')[0].options('value'),
self.options('inputs')[1].options('value')
].join(' ');
2010-09-03 08:47:40 +00:00
}
return that;
};
Ox.PlaceInput = function(options, self) {
var self = $.extend(self || {}, {
options: $.extend({
2010-09-03 20:54:40 +00:00
id: '',
value: 'United States'
2010-09-03 08:47:40 +00:00
}, options)
}),
that;
that = new Ox.FormElementGroup({
id: self.options.id,
elements: [
new Ox.Input({
2010-09-03 20:54:40 +00:00
id: 'input',
2010-09-03 08:47:40 +00:00
value: self.options.value
}),
new Ox.PlacePicker({
2010-09-03 20:54:40 +00:00
id: 'picker',
overlap: 'left',
2010-09-03 08:47:40 +00:00
value: self.options.value
})
],
2010-09-03 20:54:40 +00:00
float: 'right'
2010-09-03 08:47:40 +00:00
}, self)
2010-09-03 20:54:40 +00:00
.bindEvent('change', change);
2010-09-03 08:47:40 +00:00
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,
2010-09-03 20:54:40 +00:00
value: Ox.formatDate(new Date(), '%T'),
2010-09-03 08:47:40 +00:00
})
.options(options || {});
if (self.options.milliseconds) {
self.options.seconds = true;
2010-09-03 20:54:40 +00:00
if (self.options.value.indexOf('.') == -1) {
self.options.value += '.000';
2010-09-03 08:47:40 +00:00
}
}
self.date = getDate();
self.values = getValues();
self.$input = {
hours: new Ox.Input({
2010-09-03 08:47:40 +00:00
autocomplete: $.map(self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24), function(v) {
return Ox.pad(v, 2);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
2010-09-03 20:54:40 +00:00
id: 'hours',
textAlign: 'right',
2010-09-03 08:47:40 +00:00
value: self.values.hours,
width: 32
}),
minutes: new Ox.Input({
2010-09-03 08:47:40 +00:00
autocomplete: $.map(Ox.range(0, 60), function(v) {
return Ox.pad(v, 2);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
2010-09-03 20:54:40 +00:00
id: 'minutes',
textAlign: 'right',
2010-09-03 08:47:40 +00:00
value: self.values.minutes,
width: 32
}),
seconds: new Ox.Input({
2010-09-03 08:47:40 +00:00
autocomplete: $.map(Ox.range(0, 60), function(v) {
return Ox.pad(v, 2);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
2010-09-03 20:54:40 +00:00
id: 'seconds',
textAlign: 'right',
2010-09-03 08:47:40 +00:00
value: self.values.seconds,
width: 32
}),
milliseconds: new Ox.Input({
2010-09-03 08:47:40 +00:00
autocomplete: $.map(Ox.range(0, 1000), function(v) {
return Ox.pad(v, 3);
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
2010-09-03 20:54:40 +00:00
id: 'milliseconds',
textAlign: 'right',
2010-09-03 08:47:40 +00:00
value: self.values.milliseconds,
width: 40
}),
ampm: new Ox.Input({
2010-09-03 20:54:40 +00:00
autocomplete: ['AM', 'PM'],
2010-09-03 08:47:40 +00:00
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
2010-09-03 20:54:40 +00:00
id: 'ampm',
2010-09-03 08:47:40 +00:00
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([
2010-09-03 20:54:40 +00:00
{title: ':', width: 8},
2010-09-03 08:47:40 +00:00
], self.options.seconds ? [
2010-09-03 20:54:40 +00:00
{title: ':', width: 8}
2010-09-03 08:47:40 +00:00
] : []), self.options.milliseconds ? [
2010-09-03 20:54:40 +00:00
{title: '.', width: 8}
2010-09-03 08:47:40 +00:00
] : []), self.options.ampm ? [
2010-09-03 20:54:40 +00:00
{title: '', width: 8}
2010-09-03 08:47:40 +00:00
] : []),
//width: self.options.width || 128
}), self)
2010-09-03 20:54:40 +00:00
.bindEvent('change', setValue);
2010-09-03 08:47:40 +00:00
setValue();
function getDate() {
2010-09-03 20:54:40 +00:00
return new Date('1970/01/01 ' + (
2010-09-03 08:47:40 +00:00
self.options.milliseconds ?
self.options.value.substr(0, self.options.value.length - 4) :
self.options.value
));
}
function getValues() {
self.date = getDate();
return {
2010-09-03 20:54:40 +00:00
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')
2010-09-03 08:47:40 +00:00
};
}
function setValue() {
2010-09-03 20:54:40 +00:00
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') : '');
2011-01-13 12:43:20 +00:00
//Ox.print('SETVALUE', self.options.value);
2010-09-03 08:47:40 +00:00
}
function setValues() {
self.values = getValues();
$.each(self.$input, function(k, v) {
self.$input[k].options({
value: self.values[k]
});
});
}
self.onChange = function(key, value) {
2010-09-03 20:54:40 +00:00
if (key == 'value') {
2010-09-03 08:47:40 +00:00
setValues();
}
}
return that;
};
Ox.Label = function(options, self) {
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-09-03 08:47:40 +00:00
.defaults({
disabled: false,
2010-09-03 20:54:40 +00:00
id: '',
overlap: 'none',
textAlign: 'left',
title: '',
width: 'auto'
2010-09-03 08:47:40 +00:00
})
.options(options)
.addClass(
2010-09-03 20:54:40 +00:00
'OxLabel' + (self.options.disabled ? ' OxDisabled' : '') +
(self.options.overlap != 'none' ?
' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '')
2010-09-03 08:47:40 +00:00
)
2010-09-03 20:54:40 +00:00
.css($.extend(self.options.width == 'auto' ? {} : {
width: (self.options.width - 14) + 'px'
2010-09-03 08:47:40 +00:00
}, {
textAlign: self.options.textAlign
}))
.html(self.options.title);
2010-11-28 15:06:47 +00:00
self.onChange = function(key, value) {
if (key == 'title') {
that.html(value);
}
}
2010-09-03 08:47:40 +00:00
return that;
};
Ox.OptionGroup = function(items, min, max, property) {
/*
to be used by ButtonGroup, CheckboxGroup, Select and Menu
*/
2010-09-03 20:54:40 +00:00
var property = property || 'checked'
2010-09-03 08:47:40 +00:00
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;
2011-01-13 12:43:20 +00:00
/*Ox.print(items, items.length, length, $.merge(
2010-09-03 08:47:40 +00:00
pos > 0 ? Ox.range(pos - 1, -1, -1) : [],
2010-09-03 20:54:40 +00:00
pos < items.length - 1 ? Ox.range(items.length - 1, pos, -1) : []
2011-01-13 12:43:20 +00:00
))*/
2010-09-03 20:54:40 +00:00
// fixme: why is length not == items.length here?
2010-09-03 08:47:40 +00:00
$.each($.merge(
pos > 0 ? Ox.range(pos - 1, -1, -1) : [],
2010-09-03 20:54:40 +00:00
pos < items.length - 1 ? Ox.range(items.length - 1, pos, -1) : []
2010-09-03 08:47:40 +00:00
), function(i, v) {
2011-01-13 12:43:20 +00:00
//Ox.print(pos, v)
2010-09-03 08:47:40 +00:00
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;
}
2010-12-06 17:42:45 +00:00
Ox.Range = function(options, self) {
2011-01-24 04:08:19 +00:00
/**
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
*/
2010-09-03 08:47:40 +00:00
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
arrows: false,
arrowStep: 1,
2010-09-03 20:54:40 +00:00
arrowSymbols: ['previous', 'next'],
2010-09-03 08:47:40 +00:00
max: 100,
min: 0,
2010-09-03 20:54:40 +00:00
orientation: 'horizontal',
2010-09-03 08:47:40 +00:00
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 || [])
}))
2010-09-03 20:54:40 +00:00
.addClass('OxRange')
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
width: self.options.size + 'px'
2010-09-03 08:47:40 +00:00
});
$.extend(self, {
trackColors: self.options.trackColors.length,
trackImages: self.options.trackImages.length,
values: (self.options.max - self.options.min + self.options.step) /
self.options.step
});
2011-02-25 10:23:33 +00:00
setSizes();
2010-09-03 08:47:40 +00:00
if (self.options.arrows) {
self.$arrows = [];
$.each(Ox.range(0, 2), function(i) {
self.$arrows[i] = new Ox.Button({
2010-09-03 20:54:40 +00:00
overlap: i == 0 ? 'right' : 'left',
2010-09-03 08:47:40 +00:00
title: self.options.arrowSymbols[i],
2010-09-03 20:54:40 +00:00
type: 'image'
2010-09-03 08:47:40 +00:00
})
2010-09-03 20:54:40 +00:00
.addClass('OxArrow')
.bindEvent({
mousedown: function(event, e) {
clickArrow(e, i, true);
},
mouserepeat: function(event, e) {
clickArrow(e, i, false);
}
2010-09-03 08:47:40 +00:00
})
.appendTo(that.$element);
});
}
self.$track = new Ox.Element()
2010-09-03 20:54:40 +00:00
.addClass('OxTrack')
2010-09-03 08:47:40 +00:00
.css($.extend({
2010-09-03 20:54:40 +00:00
width: (self.trackSize - 2) + 'px'
2010-09-03 08:47:40 +00:00
}, self.trackImages == 1 ? {
2010-09-03 20:54:40 +00:00
background: 'rgb(0, 0, 0)'
2010-09-03 08:47:40 +00:00
} : {}))
.bindEvent({
mousedown: clickTrack,
drag: dragTrack
})
2010-09-03 08:47:40 +00:00
.appendTo(that.$element);
self.trackColors && setTrackColors();
if (self.trackImages) {
2010-09-03 20:54:40 +00:00
self.$trackImages = $('<div>')
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
width: self.trackSize + 'px',
marginRight: (-self.trackSize - 1) + 'px'
2010-09-03 08:47:40 +00:00
})
.appendTo(self.$track.$element);
2010-09-03 08:47:40 +00:00
$.each(self.options.trackImages, function(i, v) {
2011-01-13 12:43:20 +00:00
//Ox.print(self.trackImageWidths[i])
2010-09-03 20:54:40 +00:00
$('<img>')
2010-09-03 08:47:40 +00:00
.attr({
src: v
})
2010-09-03 20:54:40 +00:00
.addClass(i == 0 ? 'OxFirstChild' : '')
.addClass(i == self.trackImages - 1 ? 'OxLastChild' : '')
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
width: self.trackImageWidths[i] + 'px'
2010-09-03 08:47:40 +00:00
})
.mousedown(function(e) {
e.preventDefault(); // prevent drag
})
.appendTo(self.$trackImages);
//left += self.trackImageWidths[i];
});
}
self.$thumb = Ox.Button({
2010-09-03 20:54:40 +00:00
id: self.options.id + 'Thumb',
2010-09-03 08:47:40 +00:00
title: self.options.thumbValue ? (self.options.valueNames ?
self.options.valueNames[self.options.value] :
2010-09-03 20:54:40 +00:00
self.options.value) : '',
2010-09-03 08:47:40 +00:00
width: self.thumbSize
})
2010-09-03 20:54:40 +00:00
.addClass('OxThumb')
2010-09-03 08:47:40 +00:00
/*
.css({
2010-09-03 20:54:40 +00:00
border: '1px solid rgb(255, 255, 255)',
background: 'rgba(0, 0, 0, 0)'
2010-09-03 08:47:40 +00:00
})
*/
.appendTo(self.$track);
setThumb();
function clickArrow(e, i, animate) {
2010-09-03 08:47:40 +00:00
// fixme: shift doesn't work, see menu scrolling
setValue(self.options.value + self.options.arrowStep * (i == 0 ? -1 : 1) * (e.shiftKey ? 2 : 1), animate);
2010-09-03 08:47:40 +00:00
}
function clickTrack(event, e) {
// fixme: thumb ends up a bit too far on the right
var isThumb = $(e.target).hasClass('OxThumb');
self.drag = {
left: self.$track.offset().left,
offset: isThumb ? e.clientX - self.$thumb.offset().left - 8 /*self.thumbSize / 2*/ : 0
};
setValue(getVal(e.clientX - self.drag.left - self.drag.offset), !isThumb);
}
function dragTrack(event, e) {
setValue(getVal(e.clientX - self.drag.left - self.drag.offset))
2010-09-03 08:47:40 +00:00
}
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);
2010-09-03 08:47:40 +00:00
return Ox.limit(self.options.min +
Math.floor(px * valPerPx / self.options.step) * self.options.step,
self.options.min, self.options.max);
}
2011-02-25 10:23:33 +00:00
function setSizes() {
self.trackSize = self.options.size - self.options.arrows * 32;
self.thumbSize = Math.max(self.trackSize / self.values, self.options.thumbSize);
self.trackImageWidths = self.trackImages == 1 ? [self.trackSize - 16] :
Ox.divideInt(self.trackSize - 2, self.trackImages);
self.trackColorsStart = self.thumbSize / 2 / self.options.size;
self.trackColorsStep = (self.options.size - self.thumbSize) /
(self.trackColors - 1) / self.options.size;
self.$track && self.$track.css({
width: (self.trackSize - 2) + 'px'
});
self.$thumb && self.$thumb.options({
width: self.thumbSize
});
}
2010-09-03 08:47:40 +00:00
function setThumb(animate) {
self.$thumb.stop().animate({
2010-09-03 20:54:40 +00:00
marginLeft: (getPx(self.options.value) - 1) + 'px',
//width: self.thumbSize + 'px'
2010-09-03 08:47:40 +00:00
}, 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 ?
2010-09-03 20:54:40 +00:00
('-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] + '))')
2010-09-03 08:47:40 +00:00
});
}
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);
2010-09-03 20:54:40 +00:00
that.triggerEvent('change', {
2010-09-03 08:47:40 +00:00
value: value
});
}
}
self.onChange = function(key, value) {
2011-02-25 10:23:33 +00:00
if (key == 'size') {
setSizes();
} else if (key == 'trackColors') {
2010-09-03 08:47:40 +00:00
setTrackColors();
2010-09-03 20:54:40 +00:00
} else if (key == 'value') {
2010-09-03 08:47:40 +00:00
setThumb();
}
}
return that;
};
Ox.Select = function(options, self) {
2011-01-16 04:55:08 +00:00
// fixme: selected item needs attribute "checked", not "selected" ... that's strange
2010-09-03 08:47:40 +00:00
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self) // fixme: do we use 'div', or {}, or '', by default?
2010-09-03 08:47:40 +00:00
.defaults({
2010-09-03 20:54:40 +00:00
id: '',
2010-09-03 08:47:40 +00:00
items: [],
max: 1,
min: 1,
2010-09-03 20:54:40 +00:00
overlap: 'none', // can be none, left or right
2010-09-03 08:47:40 +00:00
selectable: true,
2010-09-03 20:54:40 +00:00
size: 'medium',
title: '',
type: 'text', // can be 'text' or 'image'
width: 'auto'
2010-09-03 08:47:40 +00:00
})
// fixme: make default selection restorable
// or allow for extra action items below options
2010-09-03 08:47:40 +00:00
.options(options)
.addClass(
2010-09-03 20:54:40 +00:00
'OxSelect Ox' + Ox.toTitleCase(self.options.size) +
(self.options.overlap == 'none' ? '' : ' OxOverlap' +
2010-09-03 08:47:40 +00:00
Ox.toTitleCase(self.options.overlap))
)
2010-09-03 20:54:40 +00:00
.css(self.options.width == 'auto' ? {} : {
width: self.options.width + 'px'
2010-09-04 14:28:40 +00:00
})
2010-12-26 20:16:35 +00:00
.bindEvent({
2010-09-04 14:28:40 +00:00
key_escape: loseFocus,
key_down: showMenu
2010-09-03 08:47:40 +00:00
});
2011-01-23 04:59:16 +00:00
Ox.print('Ox.Select', self.options)
2010-09-03 08:47:40 +00:00
$.extend(self, {
2010-09-03 20:54:40 +00:00
buttonId: self.options.id + 'Button',
groupId: self.options.id + 'Group',
menuId: self.options.id + 'Menu'
2010-09-03 08:47:40 +00:00
});
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();
}
2010-09-03 20:54:40 +00:00
if (self.options.type == 'text') {
self.$title = $('<div>')
.addClass('OxTitle')
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
width: (self.options.width - 22) + 'px'
2010-09-03 08:47:40 +00:00
})
.html(
self.options.title ? self.options.title :
self.options.items[self.checked[0]].title
)
2010-09-04 14:28:40 +00:00
.click(showMenu)
2010-09-03 08:47:40 +00:00
.appendTo(that.$element);
}
self.$button = new Ox.Button({
id: self.buttonId,
2010-09-03 20:54:40 +00:00
style: 'symbol',
title: 'select',
type: 'image'
2010-09-03 08:47:40 +00:00
})
2010-09-04 14:28:40 +00:00
.bindEvent('click', showMenu)
2010-09-03 08:47:40 +00:00
.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],
2010-09-03 20:54:40 +00:00
side: 'bottom',
2010-09-03 08:47:40 +00:00
size: self.options.size
})
2010-09-03 20:54:40 +00:00
.bindEvent({
change: changeMenu,
click: clickMenu,
hide: hideMenu
});
2010-09-03 08:47:40 +00:00
2010-12-27 05:01:24 +00:00
self.options.type == 'image' && self.$menu.addClass('OxRight');
2010-09-03 08:47:40 +00:00
function clickMenu(event, data) {
2011-01-13 19:41:10 +00:00
that.triggerEvent('click', data);
2010-09-03 20:54:40 +00:00
}
function changeMenu(event, data) {
2011-01-13 12:43:20 +00:00
//Ox.print('clickMenu: ', self.options.id, data)
2010-09-03 20:54:40 +00:00
self.checked = self.optionGroup.checked();
2010-09-03 08:47:40 +00:00
self.$title && self.$title.html(
self.options.title ? self.options.title :
2010-09-03 20:54:40 +00:00
data.checked[0].title
2010-09-03 08:47:40 +00:00
);
2010-09-04 14:28:40 +00:00
that.triggerEvent('change', {
selected: data.checked
});
2010-09-03 08:47:40 +00:00
}
function hideMenu() {
2011-01-13 12:43:20 +00:00
//Ox.print('%% hideMenu that', that, 'self', self)
2010-09-03 20:54:40 +00:00
that.removeClass('OxSelected');
2010-12-26 20:16:35 +00:00
// self.$button.removeClass('OxSelected');
2011-01-13 12:43:20 +00:00
//Ox.print('%% hideMenu end')
2010-09-03 08:47:40 +00:00
}
2010-09-04 14:28:40 +00:00
function loseFocus() {
that.loseFocus();
}
function showMenu() {
that.gainFocus();
that.addClass('OxSelected');
self.$menu.showMenu();
}
2010-09-03 08:47:40 +00:00
self.onChange = function(key, value) {
};
2010-09-03 20:54:40 +00:00
that.selected = function() {
return $.map(/*self.checked*/self.optionGroup.checked(), function(v) {
2010-09-03 20:54:40 +00:00
return {
id: self.options.items[v].id,
title: self.options.items[v].title
2010-09-03 20:54:40 +00:00
};
});
};
2010-09-03 08:47:40 +00:00
that.selectItem = function(id) {
2011-01-13 12:43:20 +00:00
//Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title)
2010-09-03 20:54:40 +00:00
self.options.type == 'text' && self.$title.html(
Ox.getObjectById(self.options.items, id).title[0] // fixme: title should not have become an array
2010-09-03 08:47:40 +00:00
);
self.$menu.checkItem(id);
2010-09-03 20:54:40 +00:00
self.checked = self.optionGroup.checked();
2010-09-03 08:47:40 +00:00
};
/*
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;
2010-12-23 17:05:46 +00:00
};
2010-09-03 08:47:40 +00:00
Ox.FormElementGroup = function(options, self) {
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-09-03 08:47:40 +00:00
.defaults({
2010-09-03 20:54:40 +00:00
id: '',
2010-09-03 08:47:40 +00:00
elements: [],
2010-09-03 20:54:40 +00:00
float: 'left',
2010-09-03 08:47:40 +00:00
separators: [],
width: 0
})
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxInputGroup');
2010-09-03 08:47:40 +00:00
2010-09-03 20:54:40 +00:00
$.each(self.options.float == 'left' ? self.options.elements : self.options.elements.reverse(), function(i, $element) {
2010-12-26 20:16:35 +00:00
$element.css({
2010-09-03 08:47:40 +00:00
float: self.options.float // fixme: make this a class
})
2010-12-26 20:16:35 +00:00
.bindEvent({
validate: function(event, data) {
that.triggerEvent({
validate: data
});
}
})
2010-09-03 08:47:40 +00:00
.appendTo(that);
});
/*
if (self.options.width) {
setWidths();
} else {
self.options.width = getWidth();
}
that.css({
2010-09-03 20:54:40 +00:00
width: self.options.width + 'px'
2010-09-03 08:47:40 +00:00
});
*/
function getWidth() {
}
function setWidth() {
}
self.onChange = function(key, value) {
2011-01-24 04:08:19 +00:00
};
that.replaceElement = function(pos, element) {
Ox.print('Ox.FormElementGroup replaceElement', pos, element)
self.options.elements[pos].replaceWith(element.$element);
self.options.elements[pos] = element;
};
2010-09-03 08:47:40 +00:00
2010-12-26 20:16:35 +00:00
that.value = function() {
return $.map(self.options.elements, function(element) {
2010-12-26 20:16:35 +00:00
var ret = null;
['checked', 'selected', 'value'].forEach(function(v) {
element[v] && (ret = element[v]());
2010-12-26 20:16:35 +00:00
});
return ret;
});
};
2010-09-03 08:47:40 +00:00
return that;
2010-12-23 17:05:46 +00:00
};
2010-09-03 08:47:40 +00:00
Ox.Picker = function(options, self) {
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-09-03 08:47:40 +00:00
.defaults({
element: null,
elementHeight: 128,
elementWidth: 256,
2010-09-03 20:54:40 +00:00
id: '',
overlap: 'none'
2010-09-03 08:47:40 +00:00
})
.options(options || {});
self.$selectButton = new Ox.Button({
overlap: self.options.overlap,
2010-09-03 20:54:40 +00:00
title: 'select',
type: 'image'
2010-09-03 08:47:40 +00:00
})
.click(showMenu)
.appendTo(that);
2010-09-03 20:54:40 +00:00
self.$menu = new Ox.Element('div')
.addClass('OxPicker')
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
width: self.options.elementWidth + 'px',
height: (self.options.elementHeight + 24) + 'px'
2010-09-03 08:47:40 +00:00
});
self.options.element
.css({
2010-09-03 20:54:40 +00:00
width: self.options.elementWidth + 'px',
height: self.options.elementHeight + 'px'
2010-09-03 08:47:40 +00:00
})
.appendTo(self.$menu);
self.$bar = new Ox.Bar({
2010-09-03 20:54:40 +00:00
orientation: 'horizontal',
2010-09-03 08:47:40 +00:00
size: 24
})
.appendTo(self.$menu);
that.$label = new Ox.Label({
width: self.options.elementWidth - 60
})
.appendTo(self.$bar);
self.$doneButton = new Ox.Button({
2010-09-03 20:54:40 +00:00
title: 'Done',
2010-09-03 08:47:40 +00:00
width: 48
})
.click(hideMenu)
.appendTo(self.$bar);
2010-09-03 20:54:40 +00:00
self.$layer = $('<div>')
.addClass('OxLayer')
2010-09-03 08:47:40 +00:00
.click(hideMenu);
function hideMenu() {
self.$menu.detach();
self.$layer.detach();
self.$selectButton
2010-09-03 20:54:40 +00:00
.removeClass('OxSelected')
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
MozBorderRadius: '8px',
WebkitBorderRadius: '8px'
2010-09-03 08:47:40 +00:00
});
2010-09-03 20:54:40 +00:00
that.triggerEvent('hide');
2010-09-03 08:47:40 +00:00
};
function showMenu() {
var offset = that.offset(),
left = offset.left,
top = offset.top + 15;
self.$selectButton
2010-09-03 20:54:40 +00:00
.addClass('OxSelected')
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
MozBorderRadius: '8px 8px 0 0',
WebkitBorderRadius: '8px 8px 0 0'
2010-09-03 08:47:40 +00:00
});
self.$layer.appendTo($body);
self.$menu
.css({
2010-09-03 20:54:40 +00:00
left: left + 'px',
top: top + 'px'
2010-09-03 08:47:40 +00:00
})
.appendTo($body);
2010-09-03 20:54:40 +00:00
that.triggerEvent('show');
2010-09-03 08:47:40 +00:00
};
return that;
};
Ox.ColorPicker = function(options, self) {
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-09-03 08:47:40 +00:00
.defaults({
2010-09-03 20:54:40 +00:00
id: '',
value: '0, 0, 0'
2010-09-03 08:47:40 +00:00
})
.options(options || {});
2011-01-13 12:43:20 +00:00
//Ox.print(self)
2010-09-03 08:47:40 +00:00
self.$ranges = [];
2010-09-03 20:54:40 +00:00
self.rgb = ['red', 'green', 'blue'];
self.values = self.options.value.split(', ');
2010-09-03 08:47:40 +00:00
$.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({
2010-09-03 20:54:40 +00:00
position: 'absolute',
top: (i * 15) + 'px'
2010-09-03 08:47:40 +00:00
})
2010-09-03 20:54:40 +00:00
.bindEvent('change', function(event, data) {
2010-09-03 08:47:40 +00:00
change(i, data.value);
})
.appendTo(that);
// fixme: make self.$ranges[i].children() work
if (i == 0) {
2010-09-03 20:54:40 +00:00
self.$ranges[i].$element.children('input.OxOverlapRight').css({
2010-09-03 08:47:40 +00:00
MozBorderRadius: 0,
WebkitBorderRadius: 0
});
2010-09-03 20:54:40 +00:00
self.$ranges[i].$element.children('input.OxOverlapLeft').css({
MozBorderRadius: '0 8px 0 0',
WebkitBorderRadius: '0 8px 0 0'
2010-09-03 08:47:40 +00:00
});
} else {
2010-09-03 20:54:40 +00:00
self.$ranges[i].$element.children('input').css({
2010-09-03 08:47:40 +00:00
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;
2010-09-03 20:54:40 +00:00
self.options.value = self.values.join(', ');
2010-09-03 08:47:40 +00:00
that.$label.css({
2010-09-03 20:54:40 +00:00
background: 'rgb(' + self.options.value + ')'
2010-09-03 08:47:40 +00:00
});
$.each(Ox.range(3), function(i) {
if (i != index) {
self.$ranges[i].options({
trackColors: getColors(i)
});
}
});
2010-09-03 20:54:40 +00:00
that.triggerEvent('change', {
2010-09-03 08:47:40 +00:00
value: self.options.value
});
}
function getColors(index) {
return [
2010-09-03 20:54:40 +00:00
'rgb(' + $.map(Ox.range(3), function(v) {
2010-09-03 08:47:40 +00:00
return v == index ? 0 : self.values[v];
2010-09-03 20:54:40 +00:00
}).join(', ') + ')',
'rgb(' + $.map(Ox.range(3), function(v) {
2010-09-03 08:47:40 +00:00
return v == index ? 255 : self.values[v];
2010-09-03 20:54:40 +00:00
}).join(', ') + ')'
2010-09-03 08:47:40 +00:00
]
}
return that;
};
Ox.PlacePicker = function(options, self) {
var self = $.extend(self || {}, {
options: $.extend({
2010-09-03 20:54:40 +00:00
id: '',
value: 'United States'
2010-09-03 08:47:40 +00:00
}, options)
}),
that;
2010-09-03 20:54:40 +00:00
self.$element = new Ox.Element('div')
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
width: '256px',
height: '192px'
2010-09-03 08:47:40 +00:00
})
.append(
self.$topBar = new Ox.Bar({
size: 16
})
.css({
2010-09-03 20:54:40 +00:00
MozBorderRadius: '0 8px 0 0',
WebkitBorderRadius: '0 8px 0 0'
2010-09-03 08:47:40 +00:00
})
.append(
self.$input = new Ox.Input({
clear: true,
2010-09-03 20:54:40 +00:00
id: self.options.id + 'Input',
placeholder: 'Find',
2010-09-03 08:47:40 +00:00
width: 256
})
2010-09-03 20:54:40 +00:00
.bindEvent('submit', findPlace)
2010-09-03 08:47:40 +00:00
)
)
.append(
2010-09-03 20:54:40 +00:00
self.$container = new Ox.Element('div')
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
width: '256px',
height: '160px'
2010-09-03 08:47:40 +00:00
})
)
.append(
self.$bottomBar = new Ox.Bar({
size: 16
})
.append(
self.$range = new Ox.Range({
arrows: true,
2010-09-03 20:54:40 +00:00
id: self.options.id + 'Range',
2010-09-03 08:47:40 +00:00
max: 22,
size: 256,
thumbSize: 32,
thumbValue: true
})
2010-09-03 20:54:40 +00:00
.bindEvent('change', changeZoom)
2010-09-03 08:47:40 +00:00
)
);
2010-09-03 20:54:40 +00:00
self.$input.$element.children('input[type=text]').css({
width: '230px',
paddingLeft: '2px',
MozBorderRadius: '0 8px 8px 0',
WebkitBorderRadius: '0 8px 8px 0'
2010-09-03 08:47:40 +00:00
});
2010-09-03 20:54:40 +00:00
self.$input.$element.children('input[type=image]').css({
MozBorderRadius: '0 8px 0 0',
WebkitBorderRadius: '0 8px 0 0'
2010-09-03 08:47:40 +00:00
});
2010-09-03 20:54:40 +00:00
self.$range.$element.children('input').css({
2010-09-03 08:47:40 +00:00
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)
2010-09-03 20:54:40 +00:00
.bindEvent('show', showPicker);
2010-09-03 08:47:40 +00:00
2010-09-03 20:54:40 +00:00
that.$label.bind('click', clickLabel)
2010-09-03 08:47:40 +00:00
self.map = false;
function changeZoom(event, data) {
2011-01-13 12:43:20 +00:00
//Ox.print('changeZoom')
2010-09-03 08:47:40 +00:00
self.$map.zoom(data.value);
}
function clickLabel() {
var name = that.$label.html();
if (name) {
self.$input.options({
value: name
})
2010-09-03 20:54:40 +00:00
.triggerEvent('submit', {
2010-09-03 08:47:40 +00:00
value: name
});
}
}
function findPlace(event, data) {
2011-01-13 12:43:20 +00:00
//Ox.print('findPlace', data);
2010-12-06 17:42:05 +00:00
self.$map.find(data.value, function(place) {
place && that.$label.html(place.geoname);
2010-09-03 08:47:40 +00:00
})
}
function onSelect(event, data) {
2010-12-06 17:42:05 +00:00
that.$label.html(data.geoname);
2010-09-03 08:47:40 +00:00
}
function onZoom(event, data) {
self.$range.options({
value: data.value
});
}
function showPicker() {
if (!self.map) {
self.$map = new Ox.Map({
2010-09-03 20:54:40 +00:00
id: self.options.id + 'Map',
2010-09-03 08:47:40 +00:00
places: [self.options.value]
})
.css({
2010-09-03 20:54:40 +00:00
width: '256px',
height: '160px'
2010-09-03 08:47:40 +00:00
})
.bindEvent({
select: onSelect,
zoom: onZoom
})
.appendTo(self.$container);
self.map = true;
}
}
return that;
};
2010-12-06 17:42:45 +00:00
/**
2010-09-03 08:47:40 +00:00
delete below
*/
Ox.Input_ = function(options, self) {
/*
options:
clear boolean, clear button, or not
disabled boolean, disabled, or not
2010-09-03 20:54:40 +00:00
height height (px), if type is 'textarea'
2010-09-03 08:47:40 +00:00
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
2010-09-03 20:54:40 +00:00
size 'large', 'medium' or 'small'
type 'password', 'select' or 'text'
unit string, or
2010-09-03 08:47:40 +00:00
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 || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-09-03 08:47:40 +00:00
.defaults({
autocomplete: null,
autocorrect: null,
autosuggest: null,
autosuggestHighlight: false,
autosuggestSubmit: false,
autovalidate: null,
2010-09-03 20:54:40 +00:00
autovalidateName: 'Value',
2010-09-03 08:47:40 +00:00
clear: false,
disabled: false,
height: 128,
2010-09-03 20:54:40 +00:00
id: '',
key: '',
label: '',
2010-09-03 08:47:40 +00:00
labelWidth: 64,
2010-09-03 20:54:40 +00:00
placeholder: '',
separator: '',
2010-09-03 08:47:40 +00:00
separatorWidth: 16,
serialize: null,
2010-09-03 20:54:40 +00:00
size: 'medium',
type: 'text',
unit: '',
2010-09-03 08:47:40 +00:00
unitWidth: 64,
2010-09-03 20:54:40 +00:00
value: '',
2010-09-03 08:47:40 +00:00
width: 128
})
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxInput Ox' + Ox.toTitleCase(self.options.size))
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
width: self.options.width + 'px'
2010-09-03 08:47:40 +00:00
});
$.extend(self, {
clearWidth: 16,
2010-09-03 20:54:40 +00:00
hasMultipleKeys: Ox.isArray(self.options.label) && 'label' in self.options.label[0],
2010-09-03 08:47:40 +00:00
hasMultipleValues: Ox.isArray(self.options.value) &&
2010-09-03 20:54:40 +00:00
(self.options.type != 'select' || 'items' in self.options.value[0]),
2010-09-03 08:47:40 +00:00
hasSelectableKeys: Ox.isArray(self.options.label) || Ox.isArray(self.options.placeholder),
hasSelectableUnits: Ox.isArray(self.options.unit),
2010-09-03 20:54:40 +00:00
keyName: self.options.label ? 'label' : (self.options.placeholder ? 'placeholder' : ''),
2010-09-03 08:47:40 +00:00
placeholderWidth: 16,
selectedKey: [0], // fixme: only set on demand?
selectedValue: 0,
selectedUnit: 0,
/* valid: autovalidateCall(true) */
});
2010-09-03 20:54:40 +00:00
$.each(['autocomplete', 'autocorrect', 'autosuggest', 'autovalidate'], function(i, v) {
2010-09-03 08:47:40 +00:00
//if (!Ox.isFunction(self.options[v])) {
self.options[v] = {
2010-09-03 20:54:40 +00:00
'': self.options[v]
2010-09-03 08:47:40 +00:00
};
//}
});
if (self.keyName && !self.hasMultipleKeys) {
self.options[self.keyName] = [$.extend({
2010-09-03 20:54:40 +00:00
id: '',
2010-09-03 08:47:40 +00:00
label: self.options[self.keyName],
2010-09-03 20:54:40 +00:00
}, self.keyName == 'label' ? {
id: '',
2010-09-03 08:47:40 +00:00
width: self.options.labelWidth
} : {})];
if (!self.hasSelectableKeys) {
self.options[self.keyName][0].label = [{
2010-09-03 20:54:40 +00:00
id: '',
2010-09-03 08:47:40 +00:00
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;
}
*/
2011-01-13 12:43:20 +00:00
//Ox.print('self.hasMulVal', self.hasMultipleValues);
//Ox.print('self.options.value', self.options.value)
2010-09-03 08:47:40 +00:00
if (!self.hasMultipleValues) {
2010-09-03 20:54:40 +00:00
if (self.options.type == 'select') {
2010-09-03 08:47:40 +00:00
self.options.value = [{
2010-09-03 20:54:40 +00:00
id: '',
2010-09-03 08:47:40 +00:00
items: self.options.value,
width: self.valueWidth
}];
2010-09-03 20:54:40 +00:00
} else if (self.options.type == 'range') {
2010-09-03 08:47:40 +00:00
self.options.value = [$.extend({
2010-09-03 20:54:40 +00:00
id: '',
2010-09-03 08:47:40 +00:00
size: self.valueWidth
}, self.options.value)];
2010-02-19 10:24:02 +00:00
} else {
2010-09-03 08:47:40 +00:00
self.options.value = [{
2010-09-03 20:54:40 +00:00
id: '',
2010-09-03 08:47:40 +00:00
value: self.options.value,
width: self.valueWidth
}]
}
}
2011-01-13 12:43:20 +00:00
//Ox.print('self.options.value', self.options.value)
2010-09-03 08:47:40 +00:00
self.values = self.options.value.length;
2011-01-13 12:43:20 +00:00
//Ox.print(self.options.id, 'self.values', self.values)
2010-09-03 08:47:40 +00:00
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;
2010-02-19 10:24:02 +00:00
}
});
2010-09-03 08:47:40 +00:00
} else {
self.options.unit = [{
2010-09-03 20:54:40 +00:00
id: '',
2010-09-03 08:47:40 +00:00
title: self.options.unit
}];
2010-02-19 10:24:02 +00:00
}
2010-02-20 11:05:58 +00:00
}
2011-01-13 12:43:20 +00:00
//Ox.print('self', self);
2010-09-03 08:47:40 +00:00
if (self.keyName) {
that.$key = [];
$.each(self.options[self.keyName], function(keyPos, key) {
2011-01-13 12:43:20 +00:00
//Ox.print('keyPos key', keyPos, key)
2010-09-03 20:54:40 +00:00
if (self.keyName == 'label' && key.label.length == 1) {
2010-09-03 08:47:40 +00:00
that.$key[keyPos] = new Ox.Label({
2010-09-03 20:54:40 +00:00
overlap: 'right',
2010-09-03 08:47:40 +00:00
title: key.label[0].title,
width: self.options.labelWidth
})
.css({
2010-09-03 20:54:40 +00:00
float: 'left'
2010-09-03 08:47:40 +00:00
})
.click(function() {
2011-02-25 10:23:33 +00:00
that.$input[0].focusInput();
2010-09-03 08:47:40 +00:00
})
.appendTo(that);
} else if (key.label.length > 1) {
2011-01-13 12:43:20 +00:00
//Ox.print('key.length > 1')
2010-09-03 08:47:40 +00:00
self.selectKeyId = self.options.id + Ox.toTitleCase(self.keyName) +
2010-09-03 20:54:40 +00:00
(self.options[self.keyName].length == 1 ? '' : keyPos);
2011-01-13 12:43:20 +00:00
//Ox.print('three', self.selectedKey, keyPos, self.selectedKey[keyPos]);
2010-09-03 08:47:40 +00:00
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
};
}),
2010-09-03 20:54:40 +00:00
overlap: 'right',
type: self.options.label ? 'text' : 'image',
2010-09-03 08:47:40 +00:00
width: self.options.label ? (self.options.label.length == 1 ? self.options.labelWidth : key.width) : self.placeholderWidth
})
.css({
2010-09-03 20:54:40 +00:00
float: 'left'
2010-09-03 08:47:40 +00:00
})
.appendTo(that);
2010-09-03 20:54:40 +00:00
that.bindEvent('change_' + self.selectKeyId, changeKey);
2010-09-03 08:47:40 +00:00
}
});
}
if (self.options.clear) {
that.$clear = new Ox.Button({
2010-09-03 20:54:40 +00:00
overlap: 'left',
type: 'image',
value: 'clear'
2010-09-03 08:47:40 +00:00
})
.css({
2010-09-03 20:54:40 +00:00
float: 'right'
2010-09-03 08:47:40 +00:00
})
.click(clear)
.appendTo(that);
}
if (self.options.unit.length == 1) {
that.$unit = new Ox.Label({
2010-09-03 20:54:40 +00:00
overlap: 'left',
2010-09-03 08:47:40 +00:00
title: self.options.unit[0].title,
width: self.options.unitWidth
})
.css({
2010-09-03 20:54:40 +00:00
float: 'right'
2010-09-03 08:47:40 +00:00
})
.click(function() {
2011-02-25 10:23:33 +00:00
that.$input[0].focusInput();
2010-09-03 08:47:40 +00:00
})
.appendTo(that);
} else if (self.options.unit.length > 1) {
2010-09-03 20:54:40 +00:00
self.selectUnitId = self.options.id + 'Unit';
2010-09-03 08:47:40 +00:00
that.$unit = new Ox.Select({
id: self.selectUnitId,
items: $.map(self.options.unit, function(unit, i) {
2011-01-13 12:43:20 +00:00
//Ox.print('unit', unit)
2010-09-03 08:47:40 +00:00
return {
checked: i == 0,
id: unit.id,
group: self.selectUnitId, // fixme: same id, works here, but should be different
title: unit.title
};
}),
2010-09-03 20:54:40 +00:00
overlap: 'left',
2010-09-03 08:47:40 +00:00
size: self.options.size,
width: self.options.unitWidth
})
.css({
2010-09-03 20:54:40 +00:00
float: 'right'
2010-09-03 08:47:40 +00:00
})
.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({
2010-09-03 20:54:40 +00:00
textAlign: 'center',
2010-09-03 08:47:40 +00:00
title: self.options.separator[i],
width: self.options.separatorWidth[i] + 32
})
.css({
2010-09-03 20:54:40 +00:00
float: 'left',
marginLeft: (v.width - (i == 0 ? 16 : 32)) + 'px'
2010-09-03 08:47:40 +00:00
})
.click(function() {
2011-02-25 10:23:33 +00:00
that.$input[0].focusInput();
2010-09-03 08:47:40 +00:00
})
.appendTo(that);
}
});
}
that.$input = [];
//self.margin = 0;
$.each(self.options.value, function(i, v) {
2011-01-13 12:43:20 +00:00
//Ox.print('o k i', self.options, self.keyName, i);
2010-09-03 08:47:40 +00:00
var id = self.keyName ? $.map(self.selectedKey, function(v, i) {
return self.options[self.keyName][i].id;
2010-09-03 20:54:40 +00:00
}).join('.') : '';
2010-09-03 08:47:40 +00:00
//self.margin -= (i == 0 ? 16 : self.options.value[i - 1].width)
2011-01-13 12:43:20 +00:00
//Ox.print('v:', v, 'id:', id)
2010-09-03 20:54:40 +00:00
if (self.options.type == 'select') {
2010-09-03 08:47:40 +00:00
that.$input[i] = new Ox.Select({
id: v.id,
items: v.items,
width: v.width
}).
css({
2010-09-03 20:54:40 +00:00
float: 'left'
2010-09-03 08:47:40 +00:00
});
2010-09-03 20:54:40 +00:00
} else if (self.options.type == 'range') {
2010-09-03 08:47:40 +00:00
that.$input[i] = new Ox.Range(v)
.css({
2010-09-03 20:54:40 +00:00
float: 'left'
2010-09-03 08:47:40 +00:00
});
} 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,
2010-09-03 20:54:40 +00:00
id: self.options.id + 'Input' + Ox.toTitleCase(v.id),
key: self.hasSelectableKeys ? self.options[self.keyName][0].label[self.selectedKey[0]].id : '',
2010-09-03 08:47:40 +00:00
parent: that,
2010-09-03 20:54:40 +00:00
placeholder: self.options.placeholder ? self.options.placeholder[0].label[0].title : '',
2010-09-03 08:47:40 +00:00
size: self.options.size,
type: self.options.type,
value: v.value,
width: v.width
});
}
that.$input[i]
.css($.extend({}, self.options.value.length > 1 ? {
2010-09-03 20:54:40 +00:00
float: 'left',
2010-09-03 08:47:40 +00:00
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) {
2011-01-13 12:43:20 +00:00
//Ox.print('changeKey', data);
2010-09-03 08:47:40 +00:00
if (data) { // fixme: necessary?
self.key = {
2010-09-03 08:47:40 +00:00
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);
2011-02-25 10:23:33 +00:00
that.$input[0].focusInput();
2010-09-03 08:47:40 +00:00
//autocompleteCall();
} else {
that.$input[0].options({
placeholder: data.value // fixme: should be data.title
});
/*
2010-09-03 20:54:40 +00:00
if (that.$input.hasClass('OxPlaceholder')) {
2010-09-03 08:47:40 +00:00
that.$input.val(self.key.title);
//that.$input.focus();
2010-07-02 12:33:45 +00:00
} else {
2010-09-03 08:47:40 +00:00
that.$input.focus();
self.options.autosuggest && autosuggestCall();
2010-07-02 12:33:45 +00:00
}
2010-09-03 08:47:40 +00:00
*/
}
}
function changeUnit() {
2011-02-25 10:23:33 +00:00
that.$input[0].focusInput();
2010-09-03 08:47:40 +00:00
}
function clear() {
$.each(that.$input, function(i, v) {
2010-09-03 20:54:40 +00:00
v.val('');
2010-09-03 08:47:40 +00:00
});
2011-02-25 10:23:33 +00:00
that.$input[0].focusInput();
2010-09-03 08:47:40 +00:00
}
function height(value) {
var stop = 8 / value;
2010-09-03 20:54:40 +00:00
if (self.options.type == 'textarea') {
2010-09-03 08:47:40 +00:00
that.$element
.height(value)
.css({
2010-09-03 20:54:40 +00:00
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))'
2010-09-03 08:47:40 +00:00
})
.css({
2010-09-03 20:54:40 +00:00
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)))'
2010-09-03 08:47:40 +00:00
});
that.$input
.height(value)
.css({
2010-09-03 20:54:40 +00:00
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))'
2010-09-03 08:47:40 +00:00
})
.css({
2010-09-03 20:54:40 +00:00
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)))'
2010-09-03 08:47:40 +00:00
});
}
}
function selectUnit() {
self.$selectUnitMenu.show();
}
function submit() {
2011-01-13 12:43:20 +00:00
//Ox.print('submit')
2010-09-03 08:47:40 +00:00
var value = that.$input.val();
that.$input.blur();
2010-09-03 20:54:40 +00:00
that.triggerEvent('submit', self.options.key ? {
2010-09-03 08:47:40 +00:00
key: self.options.key,
value: value
} : value);
}
function width(value) {
that.$element.width(value);
that.$input.width(
2010-09-03 20:54:40 +00:00
value - (self.options.type == 'textarea' ? 0 : 12) -
2010-09-03 08:47:40 +00:00
(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) {
2010-09-03 20:54:40 +00:00
if (key == 'height') {
2010-09-03 08:47:40 +00:00
height(value);
2010-09-03 20:54:40 +00:00
} else if (key == 'width') {
2010-09-03 08:47:40 +00:00
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(
2010-09-03 20:54:40 +00:00
options.type == 'textarea' ? 'textarea' : 'input', self
2010-09-03 08:47:40 +00:00
)
.defaults({
autocomplete: null,
autocorrect: null,
autosuggest: null,
autosuggestHighlight: false,
autosuggestSubmit: false,
autovalidate: null,
disabled: false,
height: 128,
2010-09-03 20:54:40 +00:00
id: '',
key: '',
2010-09-03 08:47:40 +00:00
parent: null,
2010-09-03 20:54:40 +00:00
placeholder: '',
size: 'medium',
type: 'text',
value: '',
width: 128
2010-09-03 08:47:40 +00:00
})
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxInput Ox' + Ox.toTitleCase(self.options.size) + (
(self.options.placeholder && self.options.value === '') ?
' OxPlaceholder' : ''
2010-09-03 08:47:40 +00:00
))
2010-09-03 20:54:40 +00:00
.attr(self.options.type == 'textarea' ? {} : {
2010-09-03 08:47:40 +00:00
type: self.options.type
})
.css({
2010-09-03 20:54:40 +00:00
float: 'left',
width: (self.options.width - 14) + 'px'
2010-09-03 08:47:40 +00:00
})
.val(
2010-09-03 20:54:40 +00:00
(self.options.placeholder && self.options.value === '') ?
2010-09-03 08:47:40 +00:00
self.options.placeholder : self.options.value
)
.blur(blur)
.change(change)
.focus(focus);
2011-01-13 12:43:20 +00:00
//Ox.print('InputElement self.options', self.options)
2010-09-03 08:47:40 +00:00
self.bindKeyboard = self.options.autocomplete || self.options.autocorrect ||
self.options.autosuggest || self.options.autovalidate;
if (self.options.autosuggest) {
2010-09-03 20:54:40 +00:00
self.autosuggestId = self.options.id + 'Menu'; // fixme: we do this in other places ... are we doing it the same way? var name?
2010-09-03 08:47:40 +00:00
self.$autosuggestMenu = new Ox.Menu({
element: that.$element,
id: self.autosuggestId,
offset: {
left: 4,
top: 0
},
size: self.options.size
});
2010-09-03 20:54:40 +00:00
that.bindEvent('click_' + self.autosuggestId, clickMenu);
2010-09-03 08:47:40 +00:00
}
2010-09-03 20:54:40 +00:00
that.bindEvent($.extend(self.options.type == 'textarea' ? {} : {
2010-09-03 08:47:40 +00:00
key_enter: submit
}, {
key_escape: cancel
}));
function autocomplete(value) {
var value = value.toLowerCase(),
2010-09-03 20:54:40 +00:00
ret = '';
if (value !== '') {
2010-09-03 08:47:40 +00:00
$.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);
2010-02-19 10:24:02 +00:00
}
2010-02-18 07:27:32 +00:00
}
2010-02-19 10:24:02 +00:00
2010-09-03 08:47:40 +00:00
function autocorrect(value) {
var length = value.length;
2010-09-03 20:54:40 +00:00
return $.map(value.toLowerCase().split(''), function(v, i) {
2010-09-03 08:47:40 +00:00
if (new RegExp(self.options.autocorrect)(v)) {
return v
} else {
return null;
}
2010-09-03 20:54:40 +00:00
}).join('');
2010-09-03 08:47:40 +00:00
}
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 = [[], []];
2010-09-03 20:54:40 +00:00
if (value !== '') {
2010-09-03 08:47:40 +00:00
$.each(self.options.key ? self.options.autosuggest[self.options.key] : self.options.autosuggest, function(i, v) {
2010-09-03 20:54:40 +00:00
//Ox.print('v...', v)
2010-09-03 08:47:40 +00:00
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();
2010-09-03 20:54:40 +00:00
//Ox.print('values', values);
2010-09-03 08:47:40 +00:00
if (values.length) {
values = $.map(values, function(v, i) {
if (value == v.toLowerCase()) {
selected = i;
2010-02-18 15:11:14 +00:00
}
2010-02-18 07:56:37 +00:00
return {
2010-09-03 20:54:40 +00:00
id: v.toLowerCase().replace(/ /g, '_'), // fixme: need function to do lowercase, underscores etc?
2010-09-03 08:47:40 +00:00
title: self.options.autosuggestHighlight ? v.replace(
2010-09-03 20:54:40 +00:00
new RegExp('(' + value + ')', 'ig'),
'<span class="OxHighlight">$1</span>'
2010-09-03 08:47:40 +00:00
) : v
2010-02-18 09:11:47 +00:00
};
2010-02-18 07:56:37 +00:00
});
2010-09-03 08:47:40 +00:00
// self.selectMenu && self.selectMenu.hideMenu(); // fixme: need event
self.$autosuggestMenu.options({
items: values,
2010-02-18 15:11:14 +00:00
selected: selected
2010-02-18 07:56:37 +00:00
}).showMenu();
} else {
2010-09-03 08:47:40 +00:00
self.$autosuggestMenu.hideMenu();
2010-02-18 07:56:37 +00:00
}
2010-02-10 15:49:33 +00:00
}
2010-02-19 10:24:02 +00:00
2010-09-03 08:47:40 +00:00
function autovalidate(value) {
return {
valid: self.options.autovalidate(value) != null,
2010-09-03 20:54:40 +00:00
message: 'Invalid ' + self.options.name
2010-09-03 08:47:40 +00:00
};
}
function autovalidateCall(blur) {
2010-07-24 01:32:08 +00:00
var blur = blur || false,
2010-09-03 08:47:40 +00:00
value = that.$element.val();
2010-09-03 20:54:40 +00:00
if (value !== '') {
2010-09-03 08:47:40 +00:00
Ox.isFunction(self.options.autovalidate) ?
self.options.autovalidate(value, autovalidateCallback) :
autovalidateCallback(autovalidate(value), blur);
} else {
autovalidateCallback({
blur: blur,
valid: false,
2010-09-03 20:54:40 +00:00
message: 'Empty ' + self.options.name
2010-09-03 08:47:40 +00:00
});
}
}
function autovalidateCallback(data, blur) {
if (data.valid != self.valid) {
self.valid = data.valid;
2010-09-03 20:54:40 +00:00
that.triggerEvent('validate', $.extend(data, {
2010-09-03 08:47:40 +00:00
blur: blur
}));
2010-07-24 01:32:08 +00:00
}
}
function blur() {
2010-09-03 20:54:40 +00:00
if (!self.options.autosuggest || self.$autosuggestMenu.is(':hidden')) {
2011-01-13 12:43:20 +00:00
//Ox.print('losing focus...')
2010-09-03 08:47:40 +00:00
that.loseFocus();
2010-09-03 20:54:40 +00:00
self.options.parent.removeClass('OxFocus');
2010-09-03 08:47:40 +00:00
self.options.autocorrect && autocorrectCall(true);
// self.options.autosuggest && self.$autosuggestMenu.hideMenu();
self.options.autovalidate && autovalidateCall(true);
2010-09-03 20:54:40 +00:00
if (self.options.placeholder && that.$element.val() === '') {
that.$element.addClass('OxPlaceholder').val(self.options.placeholder);
2010-09-03 08:47:40 +00:00
}
2010-07-24 01:32:08 +00:00
}
2010-09-03 08:47:40 +00:00
if (self.bindKeyboard) {
2010-09-03 20:54:40 +00:00
$document.unbind('keydown', keypress);
$document.unbind('keypress', keypress);
2010-07-24 01:32:08 +00:00
}
}
2010-02-19 10:24:02 +00:00
function cancel() {
2010-09-03 08:47:40 +00:00
that.$element.blur();
2010-02-19 10:24:02 +00:00
}
2010-09-03 08:47:40 +00:00
function change() {
2010-02-19 10:24:02 +00:00
}
2010-02-20 11:05:58 +00:00
function clear() {
2010-09-03 20:54:40 +00:00
that.$element.val('').focus();
2010-07-24 01:32:08 +00:00
}
2010-09-03 08:47:40 +00:00
function clickMenu(event, data) {
2011-01-13 12:43:20 +00:00
//Ox.print('clickMenu', data);
2010-09-03 08:47:40 +00:00
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);
2010-07-24 01:32:08 +00:00
if (arguments.length == 0) {
2010-09-03 08:47:40 +00:00
return [that.$element[0].selectionStart, that.$element[0].selectionEnd];
2010-07-24 01:32:08 +00:00
} else {
2010-09-03 08:47:40 +00:00
start = isArray ? start[0] : start;
end = isArray ? start[1] : (end ? end : start);
that.$element[0].setSelectionRange(start, end);
2010-07-24 01:32:08 +00:00
}
2010-01-07 20:21:07 +00:00
}
2010-02-19 10:24:02 +00:00
2010-01-07 20:21:07 +00:00
function focus() {
2010-09-03 08:47:40 +00:00
var val = that.$element.val();
2010-02-19 10:24:02 +00:00
that.gainFocus();
2010-09-03 20:54:40 +00:00
self.options.parent.addClass('OxFocus');
if (that.$element.hasClass('OxPlaceholder')) {
that.$element.val('').removeClass('OxPlaceholder');
2010-01-07 20:21:07 +00:00
}
2010-09-03 08:47:40 +00:00
if (self.bindKeyboard) {
2010-02-18 07:27:32 +00:00
// fixme: different in webkit and firefox (?), see keyboard handler, need generic function
2010-09-03 08:47:40 +00:00
$document.keydown(keypress);
$document.keypress(keypress);
2011-01-13 12:43:20 +00:00
//Ox.print('calling autosuggest...')
2010-09-03 08:47:40 +00:00
self.options.autosuggest && setTimeout(autosuggestCall, 0); // fixme: why is the timeout needed?
2010-02-18 07:27:32 +00:00
}
2010-01-07 20:21:07 +00:00
}
2010-02-19 10:24:02 +00:00
2010-02-18 14:24:17 +00:00
function keypress(event) {
2011-01-13 12:43:20 +00:00
//Ox.print('keyCode', event.keyCode)
2010-09-03 08:47:40 +00:00
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;
2010-07-24 01:32:08 +00:00
self.options.autocomplete && autocompleteCall();
2010-09-03 08:47:40 +00:00
self.options.autocorrect && autocorrectCall();
self.options.autosuggest && autosuggestCall();
self.options.autovalidate && autovalidateCall();
2010-02-18 15:15:23 +00:00
}
2010-02-18 15:19:36 +00:00
}, 25);
2010-02-18 15:15:23 +00:00
}
2010-02-18 07:56:37 +00:00
}
2010-02-19 10:24:02 +00:00
function submit() {
2010-09-03 08:47:40 +00:00
2010-07-24 01:32:08 +00:00
}
2010-09-03 08:47:40 +00:00
self.onChange = function(key, value) {
2010-09-03 20:54:40 +00:00
if (key == 'placeholder') {
that.$element.hasClass('OxPlaceholder') && that.$element.val(value);
} else if (key == 'value') {
2010-09-03 08:47:40 +00:00
if (self.options.placeholder) {
2010-09-03 20:54:40 +00:00
if (value === '') {
that.$element.addClass('OxPlaceholder').val(self.options.placeholder);
2010-09-03 08:47:40 +00:00
} else {
2010-09-03 20:54:40 +00:00
that.$element.removeClass('OxPlaceholder');
2010-09-03 08:47:40 +00:00
}
2010-07-24 01:32:08 +00:00
}
2010-09-03 08:47:40 +00:00
change(); // fixme: keypress too
2010-07-24 01:32:08 +00:00
}
}
2010-02-27 08:46:49 +00:00
return that;
2010-09-03 08:47:40 +00:00
}
2010-01-07 20:21:07 +00:00
2010-09-03 08:47:40 +00:00
Ox.Range_ = function(options, self) {
2010-01-07 20:21:07 +00:00
/*
init
*/
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
animate: false,
arrows: false,
arrowStep: 1,
2010-09-03 20:54:40 +00:00
arrowSymbols: ['previous', 'next'],
2010-01-07 20:21:07 +00:00
max: 100,
min: 0,
2010-09-03 20:54:40 +00:00
orientation: 'horizontal',
2010-01-07 20:21:07 +00:00
step: 1,
size: 128,
thumbSize: 16,
thumbValue: false,
trackImages: [],
trackStep: 0,
2010-09-03 08:47:40 +00:00
value: 0,
valueNames: null
2010-01-07 20:21:07 +00:00
})
.options($.extend(options, {
arrowStep: options.arrowStep ?
options.arrowStep : options.step,
trackImages: $.makeArray(options.trackImages || [])
}))
2010-09-03 20:54:40 +00:00
.addClass('OxRange')
2010-09-03 08:47:40 +00:00
.css({
2010-09-03 20:54:40 +00:00
width: self.options.size + 'px'
2010-09-03 08:47:40 +00:00
});
2010-01-07 20:21:07 +00:00
// 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({
2010-09-03 20:54:40 +00:00
width: self.options.size + 'px'
2010-01-07 20:21:07 +00:00
});
if (self.options.arrows) {
var $arrowDec = Ox.Button({
2010-09-03 20:54:40 +00:00
style: 'symbol',
type: 'image',
2010-03-06 09:54:30 +00:00
value: self.options.arrowSymbols[0]
2010-01-07 20:21:07 +00:00
})
2010-09-03 20:54:40 +00:00
.addClass('OxArrow')
2010-01-07 20:21:07 +00:00
.mousedown(mousedownArrow)
.click(clickArrowDec)
.appendTo(that.$element);
}
var $track = new Ox.Element()
2010-09-03 20:54:40 +00:00
.addClass('OxTrack')
2010-01-07 20:21:07 +00:00
.mousedown(clickTrack)
2010-09-03 08:47:40 +00:00
.appendTo(that.$element);
2010-01-07 20:21:07 +00:00
if (trackImages) {
var width = parseFloat(screen.width / trackImages),
2010-09-03 20:54:40 +00:00
$image = $('<canvas>')
2010-01-07 20:21:07 +00:00
.attr({
width: width * trackImages,
height: 14
})
2010-09-03 20:54:40 +00:00
.addClass('OxImage')
2010-09-03 08:47:40 +00:00
.appendTo($track.$element),
2010-01-07 20:21:07 +00:00
c = $image[0].getContext('2d');
2010-01-25 15:10:44 +00:00
c.mozImageSmoothingEnabled = false; // we may want to remove this later
2010-01-07 20:21:07 +00:00
$.each(self.options.trackImages, function(i, v) {
2010-09-03 08:47:40 +00:00
var left = 0;
2010-09-03 20:54:40 +00:00
$('<img/>')
2010-01-07 20:21:07 +00:00
.attr({
src: v
})
.load(function() {
2010-09-03 08:47:40 +00:00
c.drawImage(this, left, 0, self.trackImageWidth[i], 14);
2010-01-07 20:21:07 +00:00
});
2010-09-03 08:47:40 +00:00
left += self.trackImageWidth[i];
2010-01-07 20:21:07 +00:00
});
}
var $thumb = Ox.Button({})
2010-09-03 20:54:40 +00:00
.addClass('OxThumb')
2010-01-07 20:21:07 +00:00
.appendTo($track);
2011-01-13 12:43:20 +00:00
//Ox.print('----')
2010-01-07 20:21:07 +00:00
if (self.options.arrows) {
var $arrowInc = Ox.Button({
2010-09-03 20:54:40 +00:00
style: 'symbol',
type: 'image',
2010-03-06 09:54:30 +00:00
value: self.options.arrowSymbols[1]
2010-01-07 20:21:07 +00:00
})
2010-09-03 20:54:40 +00:00
.addClass('OxArrow')
2010-01-07 20:21:07 +00:00
.mousedown(mousedownArrow)
.click(clickArrowInc)
.appendTo(that.$element);
}
var rangeWidth, trackWidth, imageWidth, thumbWidth;
setWidth(self.options.size);
/*
private functions
*/
function clickArrowDec() {
2010-09-03 20:54:40 +00:00
that.removeClass('OxActive');
2010-01-07 20:21:07 +00:00
setValue(self.options.value - self.options.arrowStep, 200)
}
function clickArrowInc() {
2010-09-03 20:54:40 +00:00
that.removeClass('OxActive');
2010-01-07 20:21:07 +00:00
setValue(self.options.value + self.options.arrowStep, 200);
}
function clickTrack(e) {
2010-09-03 08:47:40 +00:00
//Ox.Focus.focus();
2010-01-07 20:21:07 +00:00
var left = $track.offset().left,
2010-09-03 20:54:40 +00:00
offset = $(e.target).hasClass('OxThumb') ?
2010-01-07 20:21:07 +00:00
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));
});
2010-09-03 20:54:40 +00:00
$window.one('mouseup', function() {
$window.unbind('mousemove');
2010-01-07 20:21:07 +00:00
});
}
function getPx(val) {
var pxPerVal = (trackWidth - thumbWidth - 2) /
2010-09-03 08:47:40 +00:00
(self.options.max - self.options.min);
2010-01-07 20:21:07 +00:00
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);
2010-01-07 20:21:07 +00:00
return Ox.limit(self.options.min +
2010-09-03 08:47:40 +00:00
Math.floor(px * valPerPx / self.options.step) * self.options.step,
self.options.min, self.options.max);
2010-01-07 20:21:07 +00:00
}
function mousedownArrow() {
2010-09-03 20:54:40 +00:00
that.addClass('OxActive');
2010-01-07 20:21:07 +00:00
}
function setThumb(animate) {
2010-09-03 20:54:40 +00:00
var animate = typeof animate != 'undefined' ? animate : 0;
2010-01-07 20:21:07 +00:00
$thumb.animate({
2010-09-03 20:54:40 +00:00
marginLeft: (getPx(self.options.value) - 2) + 'px',
width: thumbWidth + 'px'
2010-01-07 20:21:07 +00:00
}, self.options.animate ? animate : 0, function() {
if (self.options.thumbValue) {
$thumb.options({
2010-09-03 08:47:40 +00:00
value: self.options.valueNames ?
self.options.valueNames[self.options.value] :
self.options.value
2010-01-07 20:21:07 +00:00
});
}
});
}
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);
2010-09-03 20:54:40 +00:00
that.triggerEvent('change', { value: val });
2010-01-07 20:21:07 +00:00
}
}
function setWidth(width) {
trackWidth = width - self.options.arrows * 32;
thumbWidth = Math.max(trackWidth / values - 2, self.options.thumbSize - 2);
that.$element.css({
2010-09-03 20:54:40 +00:00
width: (width - 2) + 'px'
2010-01-07 20:21:07 +00:00
});
$track.css({
2010-09-03 20:54:40 +00:00
width: (trackWidth - 2) + 'px'
2010-01-07 20:21:07 +00:00
});
if (trackImages) {
$image.css({
2010-09-03 20:54:40 +00:00
width: (trackWidth - 2) + 'px'
2010-01-07 20:21:07 +00:00
});
}
$thumb.css({
2010-09-03 20:54:40 +00:00
width: (thumbWidth - 2) + 'px',
2010-01-07 20:21:07 +00:00
padding: 0
});
setThumb();
}
/*
shared functions
*/
2010-09-03 08:47:40 +00:00
self.onChange = function(key, value) {
2010-01-07 20:21:07 +00:00
}
return that;
};
2010-02-10 09:59:59 +00:00
/*
============================================================================
Lists
============================================================================
*/
2010-07-05 07:09:34 +00:00
Ox.IconList = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
2011-01-03 12:01:38 +00:00
centerSelection: false,
draggable: true,
2010-09-03 20:54:40 +00:00
id: '',
2011-02-25 10:23:33 +00:00
item: null,
items: null,
2010-07-05 07:09:34 +00:00
keys: [],
2011-01-02 10:01:55 +00:00
max: -1,
min: 0,
2010-09-03 20:54:40 +00:00
orientation: 'both',
2011-01-02 10:01:55 +00:00
selected: [],
2010-07-05 07:09:34 +00:00
size: 128,
sort: [],
})
.options(options || {});
$.extend(self, {
itemHeight: self.options.size * 1.5,
itemWidth: self.options.size
});
that.$element = new Ox.List({
2011-01-03 12:01:38 +00:00
centered: self.options.centered,
2010-07-05 07:09:34 +00:00
construct: constructItem,
draggable: self.options.draggable,
2010-09-08 16:35:34 +00:00
id: self.options.id,
2010-07-05 07:09:34 +00:00
itemHeight: self.itemHeight,
2011-02-25 10:23:33 +00:00
items: self.options.items,
2010-07-05 07:09:34 +00:00
itemWidth: self.itemWidth,
2010-09-08 16:35:34 +00:00
keys: self.options.keys,
2010-09-06 23:44:37 +00:00
orientation: self.options.orientation,
2010-09-05 14:24:22 +00:00
keys: self.options.keys,
2011-01-02 10:01:55 +00:00
max: self.options.max,
min: self.options.min,
selected: self.options.selected,
2010-09-08 16:35:34 +00:00
size: self.options.size,
sort: self.options.sort,
type: 'icon',
2010-09-08 16:35:34 +00:00
unique: self.options.unique
2011-01-02 10:01:55 +00:00
}, $.extend({}, self)) // pass event handler
.addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation))
2010-07-05 07:09:34 +00:00
.click(click)
.dblclick(dblclick)
.scroll(scroll);
2010-09-08 16:35:34 +00:00
updateKeys();
2010-07-05 07:09:34 +00:00
function click() {
}
function constructItem(data) {
var data = !$.isEmptyObject(data) ?
self.options.item(data, self.options.sort, self.options.size) :
{height: 8, width: 5},
2010-09-08 16:35:34 +00:00
ratio = data.width / data.height;
2010-07-05 07:09:34 +00:00
return new Ox.IconItem($.extend(data, {
height: Math.round(self.options.size / (ratio <= 1 ? 1 : ratio)),
2010-09-08 16:35:34 +00:00
size: self.options.size,
width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio))
2010-07-05 07:09:34 +00:00
}));
}
function dblclick() {
}
function scroll() {
}
2010-09-08 16:35:34 +00:00
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) {
2011-02-25 10:23:33 +00:00
if (key == 'items') {
2010-09-08 16:35:34 +00:00
that.$element.options(key, value);
2011-01-15 06:09:22 +00:00
} else if (key == 'paste') {
that.$element.options(key, value);
2011-01-10 00:07:48 +00:00
} else if (key == 'selected') {
that.$element.options(key, value);
2010-09-08 16:35:34 +00:00
}
}
2010-09-13 11:53:31 +00:00
that.closePreview = function() {
that.$element.closePreview();
};
2011-01-15 06:09:22 +00:00
that.paste = function(data) {
that.$element.paste(data);
return that;
};
that.reloadList = function() {
that.$element.reloadList();
return that;
};
2011-01-03 12:01:38 +00:00
that.scrollToSelection = function() {
that.$element.scrollToSelection();
};
2010-11-25 10:05:50 +00:00
that.size = function() {
that.$element.size();
2011-01-15 06:09:22 +00:00
};
2010-09-08 16:35:34 +00:00
that.sortList = function(key, operator) {
self.options.sort = [{
key: key,
operator: operator
}];
updateKeys();
that.$element.sortList(key, operator);
2011-01-15 06:09:22 +00:00
};
that.value = function(id, key, value) {
// fixme: make this accept id, {k: v, ...}
if (arguments.length == 1) {
return that.$element.value(id);
} else if (arguments.length == 2) {
return that.$element.value(id, key);
} else {
that.$element.value(id, key, value);
return that;
}
2010-09-08 16:35:34 +00:00
}
2010-09-03 20:54:40 +00:00
2010-07-05 07:09:34 +00:00
return that;
};
Ox.IconItem = function(options, self) {
//Ox.print('IconItem', options, self)
var self = self || {},
2010-07-05 07:09:34 +00:00
that = new Ox.Element({}, self)
.defaults({
2010-09-08 16:35:34 +00:00
height: 128,
2010-09-03 20:54:40 +00:00
id: '',
info: '',
2010-07-05 07:09:34 +00:00
size: 128,
2010-09-03 20:54:40 +00:00
title: '',
2010-09-08 16:35:34 +00:00
width: 128,
2010-09-03 20:54:40 +00:00
url: ''
2010-07-05 07:09:34 +00:00
})
2010-09-06 23:44:37 +00:00
.options(options || {})
2010-07-05 07:09:34 +00:00
$.extend(self, {
2011-01-02 10:01:55 +00:00
fontSize: self.options.size == 64 ? 6 : 9,
height: self.options.size * 1.5,
2011-01-02 10:01:55 +00:00
lineLength: self.options.size == 64 ? 15 : 23,
2010-09-08 16:35:34 +00:00
lines: self.options.size == 64 ? 4 : 5,
2010-09-11 08:59:40 +00:00
url: oxui.path + '/png/ox.ui/transparent.png',
width: self.options.size
2010-07-05 07:09:34 +00:00
});
2010-09-08 16:35:34 +00:00
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);
2010-07-05 07:09:34 +00:00
that.css({
2010-09-03 20:54:40 +00:00
width: self.width + 'px',
height: self.height + 'px'
2010-07-05 07:09:34 +00:00
});
2010-09-03 20:54:40 +00:00
that.$icon = $('<div>')
.addClass('OxIcon')
2010-07-05 07:09:34 +00:00
.css({
2011-01-02 10:01:55 +00:00
top: self.options.size == 64 ? -64 : -124,
width: (self.options.size + 4) + 'px',
2010-09-11 08:59:40 +00:00
height: (self.options.size + 4) + 'px'
2010-07-05 07:09:34 +00:00
});
2010-09-03 20:54:40 +00:00
that.$iconImage = $('<img>')
.addClass('OxLoading OxTarget')
2010-07-05 07:09:34 +00:00
.attr({
2010-09-11 08:59:40 +00:00
src: self.url
2010-07-05 07:09:34 +00:00
})
.css({
2010-09-06 23:44:37 +00:00
width: self.options.width + 'px',
height: self.options.height + 'px'
2010-07-05 07:09:34 +00:00
})
.mousedown(mousedown)
2010-07-05 07:09:34 +00:00
.mouseenter(mouseenter)
.mouseleave(mouseleave);
self.options.url && that.$iconImage.one('load', load);
2010-09-03 20:54:40 +00:00
that.$textBox = $('<div>')
.addClass('OxText')
2010-07-05 07:09:34 +00:00
.css({
2010-09-06 23:44:37 +00:00
top: (self.options.size / 2) + 'px',
width: (self.options.size + 4) + 'px',
2011-01-02 10:01:55 +00:00
height: (self.options.size == 64 ? 30 : 58) + 'px'
2010-07-05 07:09:34 +00:00
})
2010-09-03 20:54:40 +00:00
that.$text = $('<div>')
.addClass('OxTarget')
2010-09-08 16:35:34 +00:00
.css({
fontSize: self.fontSize + 'px'
})
2010-09-06 23:44:37 +00:00
.html(
2010-09-08 16:35:34 +00:00
self.title + '<br/><span class="OxInfo">' + self.info + '</span>'
2010-09-06 23:44:37 +00:00
)
2010-07-05 07:09:34 +00:00
.mouseenter(mouseenter)
.mouseleave(mouseleave);
2010-09-03 20:54:40 +00:00
that.$reflection = $('<div>')
.addClass('OxReflection')
2010-07-05 07:09:34 +00:00
.css({
2010-09-06 23:44:37 +00:00
top: self.options.size + 'px',
2010-09-11 08:59:40 +00:00
width: (self.options.size + 4) + 'px',
2010-09-03 20:54:40 +00:00
height: (self.options.size / 2) + 'px'
2010-07-05 07:09:34 +00:00
});
2010-09-03 20:54:40 +00:00
that.$reflectionImage = $('<img>')
.addClass('OxLoading')
2010-07-05 07:09:34 +00:00
.attr({
2010-09-11 08:59:40 +00:00
src: self.url
2010-07-05 07:09:34 +00:00
})
.css({
2010-09-03 20:54:40 +00:00
width: self.options.width + 'px',
2010-09-11 08:59:40 +00:00
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'
});
2010-09-03 20:54:40 +00:00
that.$gradient = $('<div>')
2010-07-05 07:09:34 +00:00
.css({
2010-09-06 23:44:37 +00:00
//top: (-self.options.size / 2) + 'px',
width: self.options.width + 'px',
height: (self.options.size / 2) + 'px'
2010-07-05 07:09:34 +00:00
});
that.append(
that.$reflection.append(
that.$reflectionImage
).append(
2010-09-06 23:44:37 +00:00
that.$gradient
2010-07-05 07:09:34 +00:00
)
).append(
that.$textBox.append(
that.$text
)
).append(
that.$icon.append(
that.$iconImage
)
);
2010-09-08 16:35:34 +00:00
function formatText(text, maxLines, maxLength) {
var lines = Ox.wordwrap(text, maxLength, '<br/>', true, false).split('<br/>');
2010-09-06 23:44:37 +00:00
return $.map(lines, function(line, i) {
2010-09-08 16:35:34 +00:00
if (i < maxLines - 1) {
2010-09-06 23:44:37 +00:00
return line;
2010-09-08 16:35:34 +00:00
} 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');
2010-09-06 23:44:37 +00:00
} else {
return null;
}
}).join('<br/>');
}
function load() {
2010-09-11 08:59:40 +00:00
that.$iconImage.attr({
src: self.options.url
})
.one('load', function() {
that.$iconImage.removeClass('OxLoading');
that.$reflectionImage
.attr({
src: self.options.url
})
.removeClass('OxLoading');
2010-09-11 08:59:40 +00:00
});
}
function mousedown(e) {
2010-09-14 13:50:51 +00:00
// fixme: preventDefault keeps image from being draggable in safari - but also keeps the list from getting focus
// e.preventDefault();
}
2010-07-05 07:09:34 +00:00
function mouseenter() {
2010-09-03 20:54:40 +00:00
that.addClass('OxHover');
2010-07-05 07:09:34 +00:00
}
function mouseleave() {
that.removeClass('OxHover');
2010-07-05 07:09:34 +00:00
}
return that;
};
2010-02-10 09:59:59 +00:00
Ox.List = function(options, self) {
/***
basic list object
Options
centered boolean if true, and orientation is 'horizontal',
then keep the selected item centered
construct function function(data), returns the list item HTML
2011-02-25 10:23:33 +00:00
items function function(callback) returns {items, size, ...}
function(data, callback) returns [items]
2011-02-25 10:23:33 +00:00
or array of items
Methods
Events
***/
2010-02-10 09:59:59 +00:00
var self = self || {},
2010-06-25 15:55:25 +00:00
that = new Ox.Container({}, self)
.defaults({
2011-01-03 12:01:38 +00:00
centered: false,
construct: null,
draggable: false,
format: [],
2010-06-25 15:55:25 +00:00
itemHeight: 16,
items: null,
2010-06-25 15:55:25 +00:00
itemWidth: 16,
2010-06-28 09:16:36 +00:00
keys: [],
2011-01-02 10:01:55 +00:00
max: -1,
min: 0,
2010-09-03 20:54:40 +00:00
orientation: 'vertical',
pageLength: 100,
2011-01-02 10:01:55 +00:00
selected: [],
2010-06-25 15:55:25 +00:00
sort: [],
sortable: false,
2010-09-03 20:54:40 +00:00
type: 'text',
unique: ''
2010-06-25 15:55:25 +00:00
})
2010-06-28 09:16:36 +00:00
.options(options || {})
.scroll(scroll);
2010-06-25 15:55:25 +00:00
that.$content.mousedown(_mousedown);
//that.bindEvent('doubleclick', function() {alert('d')})
/*
that.$content.bindEvent({ // fixme: port to new Ox mouse events
mousedown: mousedown,
singleclick: singleclick,
doubleclick: doubleclick,
dragstart: dragstart,
drag: drag,
dragend: dragend
});
*/
2010-12-22 14:16:15 +00:00
2010-06-25 15:55:25 +00:00
$.extend(self, {
$items: [],
$pages: [],
clickTimeout: 0,
dragTimeout: 0,
format: {},
itemMargin: self.options.type == 'text' ? 0 : 8, // 2 x 4 px margin ... fixme: the 2x should be computed later
2010-06-30 14:21:06 +00:00
keyboardEvents: {
2011-01-15 06:09:22 +00:00
key_control_c: copyItems,
key_control_n: addItem,
key_control_v: pasteItems,
key_control_x: cutItems,
2011-01-13 19:41:10 +00:00
key_delete: deleteItems,
2010-06-30 14:21:06 +00:00
key_end: scrollToFirst,
2010-07-20 20:04:13 +00:00
key_enter: open,
2010-06-30 14:21:06 +00:00
key_home: scrollToLast,
key_pagedown: scrollPageDown,
2010-07-20 20:04:13 +00:00
key_pageup: scrollPageUp,
key_section: preview, // fixme: firefox gets keyCode 0 when pressing space
2010-07-20 20:04:13 +00:00
key_space: preview
2010-06-30 14:21:06 +00:00
},
listMargin: self.options.type == 'text' ? 0 : 8, // 2 x 4 px padding
2010-06-25 15:55:25 +00:00
page: 0,
2010-07-20 20:04:13 +00:00
preview: false,
2010-06-28 09:16:36 +00:00
requests: [],
scrollTimeout: 0,
2010-06-25 15:55:25 +00:00
selected: []
});
self.options.max == -1 && $.extend(self.keyboardEvents, {
key_alt_control_a: invertSelection,
key_control_a: selectAll
});
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;
2011-01-02 10:01:55 +00:00
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;
2011-01-02 10:01:55 +00:00
}
2011-02-07 18:57:05 +00:00
if (self.options.orientation == 'vertical') {
$.extend(self.keyboardEvents, {
key_left: function() {
triggerToggleEvent(false);
},
key_right: function() {
triggerToggleEvent(true);
}
});
} else if (self.options.orientation == 'both') {
$.extend(self.keyboardEvents, {
key_down: selectBelow,
2011-01-02 10:01:55 +00:00
key_up: selectAbove
});
2011-01-02 10:01:55 +00:00
if (self.options.max == -1) {
$.extend(self.keyboardEvents, {
key_shift_down: addBelowToSelection,
key_shift_up: addAboveToSelection
});
}
self.pageLengthByRowLength = [
2010-09-08 16:35:34 +00:00
0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60, 66, 60, 65, 70, 60, 64, 68, 72, 76, 60
];
2010-09-06 23:44:37 +00:00
}
if (self.options.draggable) {
that.bind({
dragstart: function(e) {
2011-01-17 21:12:17 +00:00
//alert('DRAGSTART')
Ox.print('DRAGSTART', e);
}
});
}
2010-06-28 09:16:36 +00:00
if (Ox.isArray(self.options.items)) {
2011-02-25 10:23:33 +00:00
self.listLength = self.options.items.length;
loadItems();
} else {
updateQuery(self.options.selected);
}
2010-12-26 20:16:35 +00:00
that.bindEvent(self.keyboardEvents);
$window.resize(that.size); // fixme: this is not the widget's job
2010-06-25 15:55:25 +00:00
2010-09-06 23:44:37 +00:00
function addAboveToSelection() {
var pos = getAbove();
if (pos > -1) {
addToSelection(pos);
scrollToPosition(pos);
2010-09-06 23:44:37 +00:00
}
}
2010-06-25 15:55:25 +00:00
function addAllToSelection(pos) {
var arr,
len = self.$items.length;
if (!isSelected(pos)) {
2010-06-30 09:02:13 +00:00
if (self.selected.length == 0) {
2010-06-25 15:55:25 +00:00
addToSelection(pos);
} else {
2010-06-30 09:02:13 +00:00
if (Ox.min(self.selected) < pos) {
2010-06-25 15:55:25 +00:00
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);
}
}
2010-06-30 09:02:13 +00:00
if (Ox.max(self.selected) > pos) {
2010-06-25 15:55:25 +00:00
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);
}
}
}
}
}
2010-09-06 23:44:37 +00:00
function addBelowToSelection() {
var pos = getBelow();
if (pos > -1) {
addToSelection(pos);
scrollToPosition(pos);
2010-09-06 23:44:37 +00:00
}
}
2011-01-15 06:09:22 +00:00
function addItem() {
that.triggerEvent('add', {});
}
2010-06-30 14:21:06 +00:00
function addNextToSelection() {
var pos = getNext();
if (pos > -1) {
addToSelection(pos);
scrollToPosition(pos);
2010-06-30 14:21:06 +00:00
}
}
function addPreviousToSelection() {
var pos = getPrevious();
if (pos > -1) {
addToSelection(pos);
scrollToPosition(pos);
2010-06-30 14:21:06 +00:00
}
}
2010-06-25 15:55:25 +00:00
function addToSelection(pos) {
if (!isSelected(pos)) {
2010-06-30 09:02:13 +00:00
self.selected.push(pos);
2011-01-05 17:17:11 +00:00
!Ox.isUndefined(self.$items[pos]) &&
2010-09-03 20:54:40 +00:00
self.$items[pos].addClass('OxSelected');
2011-01-13 12:43:20 +00:00
//Ox.print('addToSelection')
2010-07-17 08:46:27 +00:00
triggerSelectEvent();
2010-09-06 23:44:37 +00:00
} else {
// allow for 'cursor navigation' if orientation == 'both'
self.selected.splice(self.selected.indexOf(pos), 1);
self.selected.push(pos);
2011-01-13 12:43:20 +00:00
//Ox.print('self.selected', self.selected)
2010-06-25 15:55:25 +00:00
}
}
2010-06-30 18:47:10 +00:00
function clear() {
$.each(self.requests, function(i, v) {
2011-01-13 12:43:20 +00:00
//Ox.print('Ox.Request.cancel', v);
2010-06-30 18:47:10 +00:00
Ox.Request.cancel(v);
});
$.extend(self, {
2011-02-25 10:23:33 +00:00
//$items: [],
2010-06-30 18:47:10 +00:00
$pages: [],
page: 0,
requests: []
});
}
function constructEmptyPage(page) {
2011-01-13 12:43:20 +00:00
//Ox.print('cEP', page)
var i, $page = new Ox.ListPage().css(getPageCSS(page));
2011-02-25 10:23:33 +00:00
for (i = 0; i < getPageLength(page); i++
) {
// fixme: why does chainging fail here?
2011-01-05 17:17:11 +00:00
new Ox.ListItem({
construct: self.options.construct
}).appendTo($page);
}
2011-01-13 12:43:20 +00:00
//Ox.print('cEP done')
return $page;
}
2011-01-15 06:09:22 +00:00
function copyItems() {
var ids = getSelectedIds();
ids.length && that.triggerEvent('copy', {
ids: ids
});
/*
ids.length && self.options.copy && Ox.Clipboard.copy(
self.options.copy(
$.map(ids, function(id) {
return that.value(id);
})
)
);
*/
}
function cutItems() {
copyItems();
deleteItems();
}
2011-01-13 19:41:10 +00:00
function deleteItems() {
var ids = getSelectedIds();
ids.length && that.triggerEvent('delete', {
ids: ids
});
}
2010-06-25 15:55:25 +00:00
function deselect(pos) {
if (isSelected(pos)) {
2010-06-30 09:02:13 +00:00
self.selected.splice(self.selected.indexOf(pos), 1);
2011-01-10 00:07:48 +00:00
!Ox.isUndefined(self.$items[pos]) &&
2010-09-03 20:54:40 +00:00
self.$items[pos].removeClass('OxSelected');
2010-07-17 08:46:27 +00:00
triggerSelectEvent();
2010-06-25 15:55:25 +00:00
}
}
function dragstart(event, e) { // fixme: doesn't work yet
self.drag = {
pos: findItemPosition(e)
};
$.extend(self.drag, {
2011-02-07 18:57:05 +00:00
id: self.$items[self.drag.pos].options('data')[self.options.unique],
startPos: self.drag.pos,
startY: e.clientY,
stopPos: self.drag.pos
});
self.$items[pos].addClass('OxDrag') // fixme: why does the class not work?
.css({
cursor: 'move',
});
}
function drag(event, e) { // fixme: doesn't work yet
var clientY = e.clientY - that.offset()['top'],
offset = clientY % 16,
position = Ox.limit(parseInt(clientY / 16), 0, self.$items.length - 1);
if (position < self.drag.pos) {
self.drag.stopPos = position + (offset > 8 ? 1 : 0);
} else if (position > self.drag.pos) {
self.drag.stopPos = position - (offset <= 8 ? 1 : 0);
}
if (self.drag.stopPos != self.drag.pos) {
moveItem(self.drag.pos, self.drag.stopPos);
self.drag.pos = self.drag.stopPos;
}
}
function dragend(event, e) { // fixme: doesn't work yet
var $item = self.$items[self.drag.pos];
$item.removeClass('OxDrag')
.css({
cursor: 'default',
});
that.triggerEvent('move', {
//id: id,
2011-02-07 18:57:05 +00:00
ids: $.map(self.$items, function($item) {
return $item.options('data')[self.options.unique];
})
//position: pos
});
}
function dragItem(pos, e) {
var $item = self.$items[pos],
2011-02-07 18:57:05 +00:00
id = self.$items[pos].options('data')[self.options.unique],
startPos = pos,
startY = e.clientY,
stopPos = startPos,
offsets = $.map(self.$items, function($item, pos) {
return (pos - startPos) * 16 - e.offsetY + 8;
});
2011-01-13 12:43:20 +00:00
//Ox.print('dragItem', e);
//Ox.print(e.offsetY, offsets)
2011-01-16 22:33:48 +00:00
$item.addClass('OxDrag');
$window.mousemove(function(e) {
var clientY = e.clientY - that.offset()['top'],
offset = clientY % 16,
position = Ox.limit(parseInt(clientY / 16), 0, self.$items.length - 1);
if (position < pos) {
stopPos = position + (offset > 8 ? 1 : 0);
} else if (position > pos) {
stopPos = position - (offset <= 8 ? 1 : 0);
}
if (stopPos != pos) {
moveItem(pos, stopPos);
pos = stopPos;
}
});
$window.one('mouseup', function() {
dropItem(id, pos);
$window.unbind('mousemove');
});
}
function dropItem(id, pos) {
var $item = self.$items[pos];
$item.removeClass('OxDrag')
.css({
2011-01-13 01:58:38 +00:00
cursor: 'default',
});
2011-01-13 01:58:38 +00:00
that.triggerEvent('move', {
//id: id,
2011-02-07 18:57:05 +00:00
ids: $.map(self.$items, function($item) {
return $item.options('data')[self.options.unique];
})
//position: pos
});
}
function emptyFirstPage() {
2011-01-13 12:43:20 +00:00
//Ox.print('emptyFirstPage', self.$pages);
self.$pages[0] && self.$pages[0].find('.OxEmpty').remove();
}
function fillFirstPage() {
2011-02-25 10:23:33 +00:00
Ox.print('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.listLength < visibleItems) {
$.each(Ox.range(self.listLength, visibleItems), function(i, v) {
var $item = new Ox.ListItem({
construct: self.options.construct,
});
$item.addClass('OxEmpty').removeClass('OxTarget');
if (v == visibleItems - 1) {
$item.$element.css({
height: lastItemHeight + 'px',
overflowY: 'hidden'
});
}
$item.appendTo(self.$pages[0]);
});
}
}
}
function findCell(e) {
var $element = $(e.target);
while (!$element.hasClass('OxCell') && !$element.hasClass('OxPage') && !$element.is('body')) {
$element = $element.parent();
}
return $element.hasClass('OxCell') ? $element : null;
}
function findItemPosition(e) {
2011-01-13 12:43:20 +00:00
//Ox.print('---- findItem', e.target)
var $element = $(e.target),
position = -1;
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')) {
position = $element.data('position');
}
}
return position;
}
2010-09-06 23:44:37 +00:00
function getAbove() {
var pos = -1;
if (self.selected.length) {
pos = self.selected[self.selected.length - 1] - self.rowLength
2010-09-06 23:44:37 +00:00
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;
2010-09-06 23:44:37 +00:00
if (pos >= self.$items.length) {
pos = -1;
}
}
return pos;
}
2010-06-30 14:21:06 +00:00
function getHeight() {
2010-06-30 18:47:10 +00:00
return that.height() - (that.$content.width() > that.width() ? oxui.scrollbarSize : 0);
2010-06-30 14:21:06 +00:00
}
2011-01-02 10:01:55 +00:00
function getListSize() {
return Math.ceil(self.listLength *
(self.options[self.options.orientation == 'horizontal' ?
'itemWidth' : 'itemHeight'] + self.itemMargin) / self.rowLength);
}
2010-06-25 15:55:25 +00:00
function getNext() {
var pos = -1;
2010-06-30 09:02:13 +00:00
if (self.selected.length) {
2010-09-06 23:44:37 +00:00
pos = (self.options.orientation == 'both' ?
self.selected[self.selected.length - 1] :
Ox.max(self.selected)) + 1;
2010-06-25 15:55:25 +00:00
if (pos == self.$items.length) {
pos = -1;
}
}
return pos;
}
function getPage() {
2010-09-11 08:59:40 +00:00
return Math.max(
Math.floor(self.options.orientation == 'horizontal' ?
(that.scrollLeft() - self.listMargin / 2) / self.pageWidth :
(that.scrollTop() - self.listMargin / 2) / self.pageHeight
), 0);
2010-06-25 15:55:25 +00:00
}
2010-11-25 10:05:50 +00:00
function getPageByPosition(pos) {
2010-12-22 14:16:15 +00:00
return parseInt(pos / self.options.pageLength);
2010-11-25 10:05:50 +00:00
}
function getPageCSS(page) {
return self.options.orientation == 'horizontal' ? {
left: (page * self.pageWidth + self.listMargin / 2) + 'px',
top: (self.listMargin / 2) + 'px',
width: (page < self.pages - 1 ? self.pageWidth :
2011-02-25 10:23:33 +00:00
getPageLength(page) * (self.options.itemWidth + self.itemMargin)) + 'px'
} : {
top: (page * self.pageHeight + self.listMargin / 2) + 'px',
width: self.pageWidth + 'px'
}
}
function getPageHeight() {
return Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength);
}
2011-01-13 01:58:38 +00:00
function getPositionById(id) {
// fixme: is this really needed?
var pos = -1;
2011-02-07 18:57:05 +00:00
$.each(self.$items, function(i, $item) {
if ($item.options('data')[self.options.unique] == id) {
2011-01-13 01:58:38 +00:00
pos = i;
return false;
}
});
return pos;
}
2011-01-02 10:01:55 +00:00
function getPositions(ids) {
2011-02-25 10:23:33 +00:00
Ox.print('getPositions', ids)
2011-01-02 10:01:55 +00:00
ids = ids || getSelectedIds();
2011-02-25 10:23:33 +00:00
Ox.print('getPositions', ids)
2010-06-30 18:47:10 +00:00
// fixme: optimize: send non-selected ids if more than half of the items are selected
2011-01-02 10:01:55 +00:00
if (ids.length /*&& ids.length < self.listLength*/) {
2011-01-13 12:43:20 +00:00
/*Ox.print('-------- request', {
2011-01-02 10:01:55 +00:00
ids: ids,
2010-12-22 14:16:15 +00:00
sort: self.options.sort
2011-01-13 12:43:20 +00:00
});*/
2011-02-25 10:23:33 +00:00
self.requests.push(self.options.items({
2011-01-02 10:01:55 +00:00
ids: ids,
2010-06-30 18:47:10 +00:00
sort: self.options.sort
}, getPositionsCallback));
2010-06-30 18:47:10 +00:00
} else {
getPositionsCallback();
}
}
function getPositionsCallback(result) {
2011-02-25 10:23:33 +00:00
Ox.print('getPositionsCallback', result)
2010-11-25 10:05:50 +00:00
var pos = 0;
2010-06-30 18:47:10 +00:00
if (result) {
$.extend(self, {
ids: {},
selected: []
});
$.each(result.data.positions, function(id, pos) {
2011-01-13 12:43:20 +00:00
//Ox.print('id', id, 'pos', pos)
2010-06-30 18:47:10 +00:00
self.selected.push(pos);
});
2010-11-25 10:05:50 +00:00
pos = Ox.min(self.selected);
self.page = getPageByPosition(pos);
2010-06-30 18:47:10 +00:00
}
// that.scrollTop(0);
2010-11-25 10:05:50 +00:00
that.$content.empty();
2011-01-13 12:43:20 +00:00
//Ox.print('self.selected', self.selected, 'self.page', self.page);
2010-11-25 10:05:50 +00:00
loadPages(self.page, function() {
2010-12-23 04:41:46 +00:00
scrollToPosition(pos, true);
2010-11-25 10:05:50 +00:00
});
2010-06-30 18:47:10 +00:00
}
2010-06-25 15:55:25 +00:00
function getPrevious() {
var pos = -1;
2010-06-30 09:02:13 +00:00
if (self.selected.length) {
2010-09-06 23:44:37 +00:00
pos = (self.options.orientation == 'both' ?
self.selected[self.selected.length - 1] :
Ox.min(self.selected)) - 1;
2010-06-25 15:55:25 +00:00
}
return pos;
}
2010-09-06 23:44:37 +00:00
function getRow(pos) {
return Math.floor(pos / self.rowLength);
2010-09-06 23:44:37 +00:00
}
function getRowLength() {
2010-09-17 16:37:11 +00:00
return self.options.orientation == 'both' ?
Math.floor((getWidth() - self.listMargin) /
(self.options.itemWidth + self.itemMargin)) : 1
2010-09-06 23:44:37 +00:00
}
2011-01-13 01:58:38 +00:00
function getScrollPosition() {
// 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;
}
2010-07-20 20:04:13 +00:00
function getSelectedIds() {
2011-02-25 10:23:33 +00:00
Ox.print('gSI', self.selected, self.$items)
2011-01-03 23:38:43 +00:00
return $.map(self.selected, function(pos) {
2011-02-25 10:23:33 +00:00
Ox.print('....', pos, self.options.unique, self.$items[pos].options('data')[self.options.unique])
2011-02-07 18:57:05 +00:00
return self.$items[pos].options('data')[self.options.unique];
2010-07-20 20:04:13 +00:00
});
}
2010-06-30 14:21:06 +00:00
function getWidth() {
2010-06-30 18:47:10 +00:00
return that.width() - (that.$content.height() > that.height() ? oxui.scrollbarSize : 0);
2010-06-30 14:21:06 +00:00
}
2010-06-25 15:55:25 +00:00
function invertSelection() {
2010-06-30 14:21:06 +00:00
$.each(Ox.range(self.listLength), function(i, v) {
toggleSelection(v);
2010-06-25 15:55:25 +00:00
});
}
function isSelected(pos) {
2010-06-28 09:16:36 +00:00
return self.selected.indexOf(pos) > -1;
2010-06-25 15:55:25 +00:00
}
function loadItems() {
2011-02-25 10:23:33 +00:00
that.$content.empty();
self.options.items.forEach(function(item, pos) {
// fixme: duplicated
self.$items[pos] = new Ox.ListItem({
construct: self.options.construct,
data: item,
draggable: self.options.draggable,
position: pos,
unique: self.options.unique
});
isSelected(pos) && self.$items[pos].addClass('OxSelected');
self.$items[pos].appendTo(that.$content);
});
}
2011-02-25 10:23:33 +00:00
function getPageLength(page) {
var mod = self.listLength % self.pageLength;
return page < self.pages - 1 || mod == 0 ? self.pageLength : mod;
}
2010-06-25 15:55:25 +00:00
function loadPage(page, callback) {
2010-06-30 18:47:10 +00:00
if (page < 0 || page >= self.pages) {
!Ox.isUndefined(callback) && callback();
2010-06-25 15:55:25 +00:00
return;
}
2011-01-13 12:43:20 +00:00
//Ox.print('loadPage', page);
var keys = $.merge(self.options.keys.indexOf(self.options.unique) == -1 ? [self.options.unique] : [], self.options.keys),
offset = page * self.pageLength,
2011-02-25 10:23:33 +00:00
range = [offset, offset + getPageLength(page)];
if (Ox.isUndefined(self.$pages[page])) { // fixme: unload will have made this undefined already
self.$pages[page] = constructEmptyPage(page);
self.options.type == 'text' && page == 0 && fillFirstPage();
self.$pages[page].appendTo(that.$content);
2011-02-25 10:23:33 +00:00
self.requests.push(self.options.items({
keys: keys,
range: range,
sort: self.options.sort
}, function(result) {
2011-02-25 10:23:33 +00:00
var $emptyPage = Ox.clone(self.$pages[page]);
self.$pages[page] = new Ox.ListPage().css(getPageCSS(page));
$.each(result.data.items, function(i, v) {
var pos = offset + i;
self.$items[pos] = new Ox.ListItem({
construct: self.options.construct,
data: v,
draggable: self.options.draggable,
//format: self.options.format,
2011-01-13 01:58:38 +00:00
position: pos,
unique: self.options.unique
});
2011-01-13 19:41:10 +00:00
isSelected(pos) && self.$items[pos].addClass('OxSelected');
self.$items[pos].appendTo(self.$pages[page]);
});
self.options.type == 'text' && page == 0 && fillFirstPage();
$emptyPage.remove();
self.$pages[page].appendTo(that.$content);
2011-01-13 19:41:10 +00:00
!Ox.isUndefined(callback) && callback(); // fixme: callback necessary? why not bind to event?
2010-06-28 09:16:36 +00:00
}));
} else {
2011-01-13 12:43:20 +00:00
//Ox.print('loading a page from cache, this should probably not happen -----------')
2010-06-28 09:16:36 +00:00
self.$pages[page].appendTo(that.$content);
2010-06-25 15:55:25 +00:00
}
}
function loadPages(page, callback) {
var counter = 0,
fn = function() {
2011-01-15 14:22:05 +00:00
if (++counter == 3) {
!Ox.isUndefined(callback) && callback();
that.triggerEvent('load');
}
2010-06-25 15:55:25 +00:00
};
2011-01-06 03:10:40 +00:00
// fixme: find out which option is better
/*
2010-06-25 15:55:25 +00:00
loadPage(page, function() {
loadPage(page - 1, fn);
loadPage(page + 1, fn);
2010-06-25 15:55:25 +00:00
});
*/
loadPage(page, fn);
2011-01-06 03:10:40 +00:00
loadPage(page - 1, fn);
loadPage(page + 1, fn);
2010-06-25 15:55:25 +00:00
}
function mousedown(event, e) { // fixme: doesn't work yet
var pos = findItemPosition(e);
self.hadFocus = that.hasFocus();
that.gainFocus();
if (pos > -1) {
if (e.metaKey) {
if (!isSelected(pos) && (self.options.max == -1 || self.options.max > self.selected.length)) {
// meta-click on unselected item
addToSelection(pos);
} else if (isSelected(pos) && self.options.min < self.selected.length) {
// meta-click on selected item
deselect(pos);
}
} else if (e.shiftKey) {
if (self.options.max == -1) {
// shift-click on item
addAllToSelection(pos);
}
} else if (!isSelected(pos)) {
// click on unselected item
select(pos);
}
} else if (self.options.min == 0) {
// click on empty area
selectNone();
}
}
function singleclick(event, e) { // fixme: doesn't work yet
// these can't trigger on mousedown,
// since it could be a doubleclick
var pos = findItemPosition(e),
clickable, editable;
alert('singleclick')
if (pos > -1) {
if (!e.metaKey && !e.shiftKey && isSelected(pos)) {
alert('??')
if (self.selected.length > 1) {
// click on one of multiple selected items
alert('!!')
select(pos);
} else if (self.options.type == 'text' && self.hadFocus) {
$cell = findCell(e);
if ($cell) {
clickable = $cell.hasClass('OxClickable');
editable = $cell.hasClass('OxEditable') && !$cell.hasClass('OxEdit');
if (clickable || editable) {
// click on a clickable or editable cell
2011-02-09 17:56:35 +00:00
triggerClickEvent(clickable ? 'click' : 'edit', self.$items[pos], $cell);
}
}
}
}
}
}
function doubleclick(event, e) { // fixme: doesn't work yet
alert('doubleclick')
open();
}
function _mousedown(e) {
var pos = findItemPosition(e),
clickable, editable,
clickTimeout = false,
selectTimeout = false,
2011-02-09 17:56:35 +00:00
$element,
hadFocus = that.hasFocus();
2011-02-09 17:56:35 +00:00
//Ox.print('mousedown', pos)
that.gainFocus();
if (pos > -1) {
if (!self.clickTimeout) {
// click
2011-01-06 03:10:40 +00:00
if (e.metaKey) {
if (!isSelected(pos) && (self.options.max == -1 || self.options.max > self.selected.length)) {
addToSelection(pos);
} else if (isSelected(pos) && self.options.min < self.selected.length) {
deselect(pos);
}
} else if (e.shiftKey) {
if (self.options.max == -1) {
addAllToSelection(pos);
}
} else if (!isSelected(pos)) {
2011-02-07 18:57:05 +00:00
Ox.print('select', pos)
select(pos);
} else if (self.selected.length > 1) {
// this could be the first click
// of a double click on multiple items
selectTimeout = true;
} else if (self.options.type == 'text' && hadFocus) {
2011-02-09 17:56:35 +00:00
var $cell = findCell(e),
$element = $cell || self.$items[pos];
clickable = $element.hasClass('OxClickable');
editable = $element.hasClass('OxEditable') && !$element.hasClass('OxEdit');
if (clickable || editable) {
if (self.options.sortable && self.listLength > 1) {
clickTimeout = true;
} else {
!$cell && that.editItem(pos);
triggerClickEvent(clickable ? 'click' : 'edit', self.$items[pos], $cell);
}
}
}
self.clickTimeout = setTimeout(function() {
self.clickTimeout = 0;
if (selectTimeout) {
select(pos);
}
}, 250);
if (self.options.sortable && self.listLength > 1) {
self.dragTimeout = setTimeout(function() {
if (self.dragTimeout) {
dragItem(pos, e);
self.dragTimeout = 0;
}
}, 250);
$window.one('mouseup', function(e) {
if (self.dragTimeout) {
clearTimeout(self.dragTimeout);
self.dragTimeout = 0;
if (clickTimeout) {
2011-02-09 17:56:35 +00:00
triggerClickEvent(clickable ? 'click' : 'edit', self.$items[pos], $cell);
}
}
});
}
} else {
// dblclick
clearTimeout(self.clickTimeout);
self.clickTimeout = 0;
open();
}
2011-02-07 18:57:05 +00:00
} else if (!$(e.target).hasClass('OxToggle') && self.options.min == 0) {
selectNone();
}
}
2011-01-13 01:58:38 +00:00
function moveItem(startPos, stopPos) {
var $item = self.$items[startPos],
insert = startPos < stopPos ? 'insertAfter' : 'insertBefore';
$item.detach()[insert](self.$items[stopPos].$element); // fixme: why do we need .$element here?
2011-01-13 12:43:20 +00:00
//Ox.print('moveItem', startPos, stopPos, insert, self.ids);
2011-01-13 01:58:38 +00:00
var $item = self.$items.splice(startPos, 1)[0];
self.$items.splice(stopPos, 0, $item);
self.$items.forEach(function($item, pos) {
$item.data({position: pos});
});
self.selected = [stopPos];
2011-01-13 12:43:20 +00:00
//Ox.print('ids', self.ids, $.map(self.$items, function(v, i) { return v.data('id'); }));
2011-01-13 01:58:38 +00:00
}
2010-07-20 20:04:13 +00:00
function open() {
var ids = getSelectedIds();
ids.length && that.triggerEvent('open', {
ids: ids
2010-07-20 20:04:13 +00:00
});
}
2011-01-15 06:09:22 +00:00
function pasteItems() {
that.triggerEvent('paste', Ox.Clipboard.paste());
}
2010-07-20 20:04:13 +00:00
function preview() {
var ids = getSelectedIds();
if (ids.length) {
self.preview = !self.preview;
if (self.preview) {
that.triggerEvent('openpreview', {
ids: getSelectedIds()
});
} else {
that.triggerEvent('closepreview');
}
2010-07-20 20:04:13 +00:00
}
}
2010-06-28 09:16:36 +00:00
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) {
2011-01-13 12:43:20 +00:00
//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);
that.gainFocus();
2010-06-28 09:16:36 +00:00
}
2010-06-30 14:21:06 +00:00
function scrollPageDown() {
that.scrollBy(getHeight());
}
function scrollPageUp() {
that.scrollBy(-getHeight());
}
function scrollTo(value) {
2011-01-02 10:01:55 +00:00
that.animate(self.options.orientation == 'horizontal' ? {
scrollLeft: (self.listSize * value) + 'px'
} : {
scrollTop: (self.listSize * value) + 'px'
}, 0);
}
2011-01-02 10:01:55 +00:00
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) {
2010-09-06 23:44:37 +00:00
var itemHeight = self.options.itemHeight + self.itemMargin,
itemWidth = self.options.itemWidth + self.itemMargin,
positions = [],
scroll,
size;
2010-09-03 20:54:40 +00:00
if (self.options.orientation == 'horizontal') {
2011-01-03 12:01:38 +00:00
if (self.options.centered) {
2011-01-02 10:01:55 +00:00
that.animate({
2011-01-03 12:01:38 +00:00
scrollLeft: (self.listMargin / 2 + (pos + 0.5) * itemWidth - that.width() / 2) + 'px'
2011-01-02 10:01:55 +00:00
}, 0);
2011-01-03 12:01:38 +00:00
} else {
positions[0] = pos * itemWidth + self.listMargin / 2;
positions[1] = positions[0] + itemWidth + self.itemMargin / 2;
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);
}
2011-01-02 10:01:55 +00:00
}
2010-09-06 23:44:37 +00:00
} else {
positions[0] = (self.options.orientation == 'vertical' ? pos : getRow(pos)) * itemHeight;
positions[1] = positions[0] + itemHeight + (self.options.orientation == 'vertical' ? 0 : self.itemMargin);
2010-06-30 14:21:06 +00:00
scroll = that.scrollTop();
size = getHeight();
2011-01-02 10:01:55 +00:00
if (positions[0] < scroll || leftOrTopAlign) {
2010-06-30 14:21:06 +00:00
that.animate({
2010-09-03 20:54:40 +00:00
scrollTop: positions[0] + 'px'
2010-06-30 14:21:06 +00:00
}, 0);
} else if (positions[1] > scroll + size) {
that.animate({
2010-09-03 20:54:40 +00:00
scrollTop: (positions[1] - size) + 'px'
2010-06-30 14:21:06 +00:00
}, 0);
}
}
}
2010-06-25 15:55:25 +00:00
function select(pos) {
2010-06-30 09:02:13 +00:00
if (!isSelected(pos) || self.selected.length > 1) {
2010-06-25 15:55:25 +00:00
selectNone();
addToSelection(pos);
2011-01-03 12:01:38 +00:00
self.options.centered && scrollToPosition(pos);
2010-06-25 15:55:25 +00:00
}
}
2010-09-06 23:44:37 +00:00
function selectAbove() {
var pos = getAbove();
if (pos > -1) {
select(pos);
scrollToPosition(pos);
2010-09-06 23:44:37 +00:00
}
}
2010-06-25 15:55:25 +00:00
function selectAll() {
2011-01-15 06:09:22 +00:00
Ox.range(self.listLength).forEach(function(pos) {
addToSelection(pos);
2010-06-25 15:55:25 +00:00
});
}
2010-09-06 23:44:37 +00:00
function selectBelow() {
var pos = getBelow();
if (pos > -1) {
select(pos);
scrollToPosition(pos);
2010-09-06 23:44:37 +00:00
}
}
2010-06-25 15:55:25 +00:00
function selectNext() {
var pos = getNext();
if (pos > -1) {
select(pos);
scrollToPosition(pos);
2010-06-25 15:55:25 +00:00
}
}
function selectNone() {
$.each(self.$items, function(i, v) {
deselect(i);
});
}
function selectPrevious() {
var pos = getPrevious();
if (pos > -1) {
select(pos);
scrollToPosition(pos);
2010-06-25 15:55:25 +00:00
}
}
function selectQuery(str) {
$.each(self.$items, function(i, v) {
if (Ox.toLatin(v.title).toUpperCase().indexOf(str) == 0) {
select(i);
scrollToPosition(i);
2010-06-25 15:55:25 +00:00
return false;
}
});
}
2011-01-10 00:07:48 +00:00
function setSelected(ids) {
2011-01-13 21:48:39 +00:00
// fixme: can't use selectNone here,
// since it'd trigger a select event
$.each(self.$items, function(pos) {
if (isSelected(pos)) {
self.selected.splice(self.selected.indexOf(pos), 1);
!Ox.isUndefined(self.$items[pos]) &&
self.$items[pos].removeClass('OxSelected');
}
2011-01-10 00:07:48 +00:00
});
2011-01-13 21:48:39 +00:00
ids.forEach(function(id, i) {
var pos = getPositionById(id);
self.selected.push(pos);
!Ox.isUndefined(self.$items[pos]) &&
self.$items[pos].addClass('OxSelected');
2011-01-10 00:07:48 +00:00
});
}
2010-06-25 15:55:25 +00:00
function toggleSelection(pos) {
if (!isSelected(pos)) {
addToSelection(pos);
} else {
deselect(pos);
}
}
2011-02-09 17:56:35 +00:00
function triggerClickEvent(event, $item, $cell) {
// event can be 'click' or 'edit'
2011-02-09 17:56:35 +00:00
that.triggerEvent(event, $.extend({
id: $item.data('id')
}, $cell ? {
key: $cell.attr('class').split('OxColumn')[1].split(' ')[0].toLowerCase()
2011-02-09 17:56:35 +00:00
} : {}));
}
2010-07-17 08:46:27 +00:00
function triggerSelectEvent() {
2011-01-03 23:38:43 +00:00
var ids = self.options.selected = getSelectedIds();
2010-07-17 08:46:27 +00:00
setTimeout(function() {
2010-07-20 20:04:13 +00:00
var ids_ = getSelectedIds();
2011-02-25 10:23:33 +00:00
Ox.print('ids', ids, 'ids after 100 msec', ids_, Ox.isEqual(ids, ids_))
if (Ox.isEqual(ids, ids_)) {
2010-09-03 20:54:40 +00:00
that.triggerEvent('select', {
2010-07-17 08:46:27 +00:00
ids: ids
});
2010-09-03 20:54:40 +00:00
self.preview && that.triggerEvent('openpreview', {
2010-07-20 20:04:13 +00:00
ids: ids
});
2010-07-17 08:46:27 +00:00
} else {
Ox.print('select event not triggered after timeout');
2010-07-17 08:46:27 +00:00
}
}, 100);
}
2011-02-07 18:57:05 +00:00
function triggerToggleEvent(expanded) {
that.triggerEvent('toggle', {
expanded: expanded,
ids: getSelectedIds()
});
}
2010-06-25 15:55:25 +00:00
function unloadPage(page) {
2010-06-29 22:19:41 +00:00
if (page < 0 || page >= self.pages) {
return;
}
2011-01-13 12:43:20 +00:00
//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];
}
2010-06-25 15:55:25 +00:00
}
function unloadPages(page) {
unloadPage(page);
unloadPage(page - 1);
unloadPage(page + 1)
}
2010-02-10 09:59:59 +00:00
2011-02-07 18:57:05 +00:00
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 updatePositions() {
self.$items.forEach(function(item, pos) {
item.data('position', pos);
});
}
function updateQuery(ids) { // fixme: shouldn't this be setQuery?
// ids are the selcected ids
// (in case list is loaded with selection)
2011-02-25 10:23:33 +00:00
Ox.print('updateQuery', self.options)
2010-06-30 18:47:10 +00:00
clear();
2011-02-25 10:23:33 +00:00
self.requests.push(self.options.items({}, function(result) {
var keys = {};
2011-01-13 19:41:10 +00:00
that.triggerEvent('init', 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.max(Math.ceil(result.data.items / self.pageLength), 1),
pageWidth: self.options.orientation == 'vertical' ? 0 :
2011-01-02 10:01:55 +00:00
(self.options.itemWidth + self.itemMargin) *
(self.options.orientation == 'horizontal' ?
self.pageLength : self.rowLength),
pageHeight: self.options.orientation == 'horizontal' ? 0 :
2011-01-02 10:01:55 +00:00
Math.ceil(self.pageLength * (self.options.itemHeight +
self.itemMargin) / self.rowLength)
});
2011-01-02 10:01:55 +00:00
self.listSize = getListSize();
that.$content.css(
self.options.orientation == 'horizontal' ? 'width' : 'height',
self.listSize + 'px'
);
getPositions(ids);
2010-06-30 18:47:10 +00:00
}));
}
2010-06-30 18:47:10 +00:00
function updateSort() {
2011-02-25 10:23:33 +00:00
var key = self.options.sort[0].key,
operator = self.options.sort[0].operator;
2010-07-03 08:35:28 +00:00
if (self.listLength > 1) {
2011-02-25 10:23:33 +00:00
if (Ox.isArray(self.options.items)) {
self.options.items.sort(function(a, b) {
var ret = 0
if (a[key] < b[key]) {
return operator == '+' ? -1 : 1
} else if (a[key] > b[key]) {
return operator == '+' ? 1 : -1;
}
return ret;
});
loadItems();
} else {
clear(); // fixme: bad function name
getPositions();
}
2010-07-03 08:35:28 +00:00
}
2010-06-28 09:16:36 +00:00
}
2010-06-30 18:47:10 +00:00
self.onChange = function(key, value) {
2011-01-13 12:43:20 +00:00
//Ox.print('list onChange', key, value);
2011-02-25 10:23:33 +00:00
if (key == 'items') {
2010-06-30 18:47:10 +00:00
updateQuery();
2011-01-10 00:07:48 +00:00
} else if (key == 'selected') {
2011-02-25 10:23:33 +00:00
Ox.print('onChange selected', value)
2011-01-10 00:07:48 +00:00
setSelected(value);
2010-06-30 18:47:10 +00:00
}
};
2011-02-07 18:57:05 +00:00
that.addItems = function(pos, items) {
var $items = [],
2011-02-25 15:04:26 +00:00
length = items.length
first = self.$items.length == 0;
2011-02-07 18:57:05 +00:00
self.selected.forEach(function(v, i) {
if (v >= pos) {
self.selected[i] += length;
}
});
items.forEach(function(item, i) {
var $item;
$items.push($item = new Ox.ListItem({
construct: self.options.construct,
data: item,
draggable: self.options.draggable,
position: pos + i,
unique: self.options.unique
}));
if (i == 0) {
if (pos == 0) {
$item.insertBefore(self.$items[0]);
} else {
$item.insertAfter(self.$items[pos - 1]);
}
} else {
$item.insertAfter($items[i - 1]);
}
});
2011-02-25 15:04:26 +00:00
2011-02-07 18:57:05 +00:00
self.options.items.splice.apply(self.options.items, $.merge([pos, 0], items));
self.$items.splice.apply(self.$items, $.merge([pos, 0], $items));
2011-02-25 15:04:26 +00:00
if(first)
loadItems();
2011-02-07 18:57:05 +00:00
updatePositions();
2011-02-09 17:56:35 +00:00
}
that.editItem = function(pos) {
var $input,
item = self.options.items[pos],
2011-02-25 10:23:33 +00:00
$item = self.$items[pos],
width = $item.width(), // fixme: don't lookup in DOM
2011-02-09 17:56:35 +00:00
height = $item.height();
$item
2011-02-21 17:31:02 +00:00
.height(height + 8 + 16)
2011-02-09 17:56:35 +00:00
.empty()
.addClass('OxEdit');
2011-02-21 17:31:02 +00:00
2011-02-22 09:34:43 +00:00
$input = new Ox.ItemInput({
type: 'textarea',
value: item.value,
height: height,
width: width
}).bindEvent({
cancel: cancel,
save: submit
}).appendTo($item.$element);
/*
2011-02-21 17:31:02 +00:00
setTimeout(function() {
$input.gainFocus();
$input.focus();
});
2011-02-22 09:34:43 +00:00
*/
2011-02-21 17:31:02 +00:00
function cancel() {
$item.options('data', item);
//fixme: trigger event to reset i/o points
}
2011-02-22 09:34:43 +00:00
function submit(event, data) {
item.value = data.value;
2011-02-09 17:56:35 +00:00
//$input.loseFocus().remove();
// fixme: leaky, inputs remain in focus stack
$item.options('data', item);
that.triggerEvent('submit', item);
}
2011-02-07 18:57:05 +00:00
}
2011-01-10 00:07:48 +00:00
that.clearCache = function() { // fixme: was used by TextList resizeColumn, now probably no longer necessary
2010-06-30 18:47:10 +00:00
self.$pages = [];
2010-09-04 14:28:40 +00:00
return that;
};
2010-09-13 11:53:31 +00:00
that.closePreview = function() {
self.preview = false;
return that;
2010-09-13 11:53:31 +00:00
};
2011-01-15 06:09:22 +00:00
that.paste = function(data) {
pasteItems(data);
return that;
};
2011-01-13 19:41:10 +00:00
that.reloadList = function() {
updateQuery();
return that;
2011-01-15 06:09:22 +00:00
};
2011-01-13 19:41:10 +00:00
that.reloadPages = function() {
2011-01-13 12:43:20 +00:00
//Ox.print('---------------- list reload, page', self.page)
var page = self.page;
2010-09-04 14:28:40 +00:00
clear();
self.page = page
2010-09-04 14:28:40 +00:00
that.$content.empty();
loadPages(self.page);
return that;
2010-06-30 18:47:10 +00:00
};
2011-02-07 18:57:05 +00:00
that.removeItems = function(pos, length) {
2011-02-11 14:44:32 +00:00
/*
removeItems(ids)
or
removeItems(pos, length)
*/
if(!length) { //pos is list of ids
pos.forEach(function(id) {
var p = getPositionById(id);
that.removeItems(p, 1);
});
} else { //remove items from pos to pos+length
Ox.range(pos, pos + length).forEach(function(i) {
self.selected.indexOf(i) > -1 && deselect(i);
self.$items[i].remove();
});
self.options.items.splice(pos, length);
self.$items.splice(pos, length);
self.selected.forEach(function(v, i) {
if (v >= pos + length) {
self.selected[i] -= length;
}
});
updatePositions();
}
}
2011-02-07 18:57:05 +00:00
2011-01-03 12:01:38 +00:00
that.scrollToSelection = function() {
self.selected.length && scrollToPosition(self.selected[0]);
return that;
};
2011-01-03 12:01:38 +00:00
that.size = function() { // fixme: not a good function name
if (self.options.orientation == 'both') {
var rowLength = getRowLength(),
pageLength = self.pageLengthByRowLength[rowLength],
2011-01-13 01:58:38 +00:00
pos = getScrollPosition(),
2011-01-02 10:01:55 +00:00
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
2011-01-02 10:01:55 +00:00
self.listSize = getListSize();
self.pageHeight = getPageHeight();
$.each(self.$pages, function(i, $page) {
2010-12-22 20:28:27 +00:00
!Ox.isUndefined($page) && $page.css({
width: self.pageWidth + 'px',
top: (i * self.pageHeight + self.listMargin / 2) + 'px'
});
});
that.$content.css({
2011-01-02 10:01:55 +00:00
height: self.listSize + 'px'
});
2011-01-13 12:43:20 +00:00
//Ox.print('scrolling to', scroll)
scrollTo(scroll);
}
} else if (self.options.type == 'text') {
2011-01-13 12:43:20 +00:00
//Ox.print('that.size, type==text')
emptyFirstPage();
fillFirstPage();
}
return that;
}
2010-09-08 16:35:34 +00:00
that.sortList = function(key, operator) {
2011-02-25 10:23:33 +00:00
Ox.print('sortList', key, operator)
2010-06-28 09:16:36 +00:00
if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) {
2011-02-25 10:23:33 +00:00
self.options.sort[0] = {key: key, operator: operator};
2010-06-30 18:47:10 +00:00
updateSort();
2011-02-25 10:23:33 +00:00
that.triggerEvent('sort', self.options.sort[0]);
2010-06-28 09:16:36 +00:00
}
2010-09-04 14:28:40 +00:00
return that;
2010-06-28 09:16:36 +00:00
}
that.value = function(id, key, value) {
2011-01-13 01:58:38 +00:00
var pos = getPositionById(id),
$item = self.$items[pos],
data = $item.options('data'),
oldValue;
2011-01-15 06:09:22 +00:00
if (arguments.length == 1) {
return data;
} else if (arguments.length == 2) {
2011-01-13 01:58:38 +00:00
return data[key];
} else {
oldValue = data[key];
data[key] = value;
$item.options({data: data});
return that;
}
};
2010-02-10 09:59:59 +00:00
return that;
};
2011-02-22 09:34:43 +00:00
Ox.ItemInput = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
type: 'textarea',
value: '',
height: 300,
width: 100
})
.options(options || {}),
$input;
2011-02-25 10:23:33 +00:00
that.append(
$input = new Ox.Input({
2011-02-22 09:34:43 +00:00
height: self.options.height,
style: 'square',
type: self.options.type,
value: self.options.value,
width: self.options.width + 6
})
.bind({
mousedown: function(e) {
// keep mousedown from reaching list
e.stopPropagation();
}
2011-02-25 10:23:33 +00:00
})
)
2011-02-22 09:34:43 +00:00
.append(new Ox.Element()
.append(new Ox.Button({type: 'text', title: 'Cancel'})
.css('width', '42%')
.bindEvent({
'click': function() {
that.triggerEvent('cancel');
}
}))
.append(new Ox.Button({type: 'text', title: 'Save'})
.css('width', '42%')
.bindEvent({
'click': function() {
that.triggerEvent('save', {
value: $input.value()
});
}
}))
.css({
'margin-top': self.options.height-8,
'height': '16px',
'text-align': 'right',
})
);
Ox.print($input);
return that;
}
2010-02-10 09:59:59 +00:00
Ox.ListItem = function(options, self) {
2010-06-28 11:19:04 +00:00
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
construct: function() {},
data: {},
draggable: false,
2011-01-13 01:58:38 +00:00
position: 0,
unique: ''
2010-06-28 11:19:04 +00:00
})
.options(options || {});
2010-06-28 11:19:04 +00:00
2011-01-13 01:58:38 +00:00
constructItem();
2010-06-28 11:19:04 +00:00
2011-01-13 01:58:38 +00:00
function constructItem(update) {
var $element = self.options.construct(self.options.data)
2011-02-09 17:56:35 +00:00
.addClass('OxItem')
2011-01-13 01:58:38 +00:00
.attr({
draggable: self.options.draggable
})
.data({
id: self.options.data[self.options.unique],
position: self.options.position
});
if (update) {
that.$element.hasClass('OxSelected') && $element.addClass('OxSelected');
2011-01-13 01:58:38 +00:00
that.$element.replaceWith($element);
}
that.$element = $element;
}
self.onChange = function(key, value) {
if (key == 'data') {
constructItem(true);
}
}
2010-06-28 11:19:04 +00:00
return that;
2010-02-10 09:59:59 +00:00
};
2010-06-25 15:55:25 +00:00
Ox.ListPage = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
2010-09-03 20:54:40 +00:00
.addClass('OxPage');
2010-06-25 15:55:25 +00:00
return that;
};
Ox.TextList = function(options, self) {
2011-02-25 10:23:33 +00:00
// fixme: rename to TableList
2010-06-25 15:55:25 +00:00
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
columns: [],
2010-09-04 14:28:40 +00:00
columnsMovable: false,
columnsRemovable: false,
columnsResizable: false,
2011-01-06 03:10:40 +00:00
columnsVisible: false,
2010-09-05 14:24:22 +00:00
columnWidth: [40, 800],
2010-09-03 20:54:40 +00:00
id: '',
2011-02-25 10:23:33 +00:00
items: null, // function() {} {sort, range, keys, callback} or array
2011-01-02 10:01:55 +00:00
max: -1,
min: 0,
pageLength: 100,
2011-01-14 06:25:16 +00:00
scrollbarVisible: false,
2011-01-02 10:01:55 +00:00
selected: [],
2010-06-28 09:16:36 +00:00
sort: []
2010-06-25 15:55:25 +00:00
})
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxTextList');
2010-06-25 15:55:25 +00:00
2011-01-24 04:08:19 +00:00
Ox.print('Ox.TextList self.options', self.options)
2010-06-30 18:47:10 +00:00
$.each(self.options.columns, function(i, v) { // fixme: can this go into a generic ox.js function?
// fixme: and can't these just remain undefined?
if (Ox.isUndefined(v.align)) {
v.align = 'left';
}
2011-01-13 01:58:38 +00:00
if (Ox.isUndefined(v.clickable)) {
v.clickable = false;
}
if (Ox.isUndefined(v.editable)) {
v.editable = false;
}
2010-06-30 18:47:10 +00:00
if (Ox.isUndefined(v.unique)) {
v.unique = false;
}
if (Ox.isUndefined(v.visible)) {
v.visible = false;
}
if (v.unique) {
self.unique = v.id;
}
});
2010-06-25 15:55:25 +00:00
$.extend(self, {
2010-07-03 11:31:25 +00:00
columnPositions: [],
2011-01-15 06:09:22 +00:00
defaultColumnWidths: $.map(self.options.columns, function(v) {
2011-01-15 23:26:20 +00:00
return v.defaultWidth || v.width;
2011-01-15 06:09:22 +00:00
}),
2010-06-25 15:55:25 +00:00
itemHeight: 16,
page: 0,
pageLength: 100,
scrollLeft: 0,
2010-06-29 21:24:07 +00:00
selectedColumn: getColumnIndexById(self.options.sort[0].key),
2011-01-15 06:09:22 +00:00
visibleColumns: $.map(self.options.columns, function(v) {
2010-06-28 09:16:36 +00:00
return v.visible ? v : null;
})
2010-06-25 15:55:25 +00:00
});
2011-01-15 23:26:20 +00:00
// fixme: there might be a better way than passing both visible and position
self.options.columns.forEach(function(v) {
if (!Ox.isUndefined(v.position)) {
self.visibleColumns[v.position] = v;
}
})
2010-06-25 15:55:25 +00:00
$.extend(self, {
2010-09-05 21:36:51 +00:00
columnWidths: $.map(self.visibleColumns, function(v, i) {
return v.width;
}),
pageHeight: self.options.pageLength * self.itemHeight
2010-06-25 15:55:25 +00:00
});
self.format = {};
self.options.columns.forEach(function(v, i) {
if (v.format) {
self.format[v.id] = v.format;
}
});
2010-06-25 15:55:25 +00:00
// Head
2011-01-06 03:10:40 +00:00
if (self.options.columnsVisible) {
that.$bar = new Ox.Bar({
orientation: 'horizontal',
size: 16
}).appendTo(that);
that.$head = new Ox.Container()
.addClass('OxHead')
2011-01-14 09:54:28 +00:00
.css({
right: self.options.scrollbarVisible ? oxui.scrollbarSize + 'px' : 0
})
2011-01-06 03:10:40 +00:00
.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);
}
2010-07-24 01:32:08 +00:00
}
2010-06-25 15:55:25 +00:00
// Body
2010-06-28 09:16:36 +00:00
that.$body = new Ox.List({
2010-06-28 11:19:04 +00:00
construct: constructItem,
2010-06-30 09:27:02 +00:00
id: self.options.id,
2011-02-22 18:52:26 +00:00
items: self.options.items,
2010-06-28 09:16:36 +00:00
itemHeight: 16,
2011-02-25 10:23:33 +00:00
items: self.options.items,
2010-06-30 09:02:13 +00:00
itemWidth: getItemWidth(),
format: self.format, // fixme: not needed, happens in TextList
keys: $.map(self.visibleColumns, function(v) {
2010-06-28 11:19:04 +00:00
return v.id;
}),
2011-01-02 10:01:55 +00:00
max: self.options.max,
min: self.options.min,
pageLength: self.options.pageLength,
2011-01-15 06:09:22 +00:00
paste: self.options.paste,
2010-09-03 20:54:40 +00:00
orientation: 'vertical',
2011-01-02 10:01:55 +00:00
selected: self.options.selected,
2010-06-28 09:16:36 +00:00
sort: self.options.sort,
sortable: self.options.sortable,
2010-09-03 20:54:40 +00:00
type: 'text',
2010-06-30 18:47:10 +00:00
unique: self.unique
2011-01-02 10:01:55 +00:00
}, $.extend({}, self)) // pass event handler
2010-09-03 20:54:40 +00:00
.addClass('OxBody')
2011-01-06 03:10:40 +00:00
.css({
top: (self.options.columnsVisible ? 16 : 0) + 'px',
2011-01-14 06:25:16 +00:00
overflowY: (self.options.scrollbarVisible ? 'scroll' : 'hidden')
2011-01-06 03:10:40 +00:00
})
2010-06-28 09:16:36 +00:00
.scroll(function() {
var scrollLeft = $(this).scrollLeft();
if (scrollLeft != self.scrollLeft) {
self.scrollLeft = scrollLeft;
2011-01-06 03:10:40 +00:00
that.$head && that.$head.scrollLeft(scrollLeft);
2010-06-28 09:16:36 +00:00
}
})
2011-01-03 23:38:43 +00:00
.bindEvent({
edit: function(event, data) {
2011-01-13 19:41:10 +00:00
that.editCell(data.id, data.key);
},
2011-01-03 23:38:43 +00:00
select: function(event, data) {
self.options.selected = data.ids;
}
})
2010-06-28 09:16:36 +00:00
.appendTo(that);
that.$body.$content.css({
2010-09-03 20:54:40 +00:00
width: getItemWidth() + 'px'
2010-06-25 15:55:25 +00:00
});
2011-01-13 12:43:20 +00:00
//Ox.print('s.vC', self.visibleColumns)
2010-07-06 04:39:11 +00:00
2010-06-28 09:16:36 +00:00
function addColumn(id) {
2011-01-13 12:43:20 +00:00
//Ox.print('addColumn', id);
2011-01-15 23:26:20 +00:00
var column, ids,
2010-09-04 14:28:40 +00:00
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);
2010-09-04 14:28:40 +00:00
that.$head.$content.empty();
constructHead();
that.$body.options({
keys: $.map(self.visibleColumns, function(v, i) {
return v.id;
})
});
2011-01-13 19:41:10 +00:00
that.$body.reloadPages();
2010-09-04 14:28:40 +00:00
}
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;
2010-09-04 14:28:40 +00:00
}
});
}
2011-01-15 23:26:20 +00:00
triggerColumnChangeEvent();
2010-06-28 09:16:36 +00:00
}
2010-06-29 21:24:07 +00:00
function clickColumn(id) {
2011-02-25 10:23:33 +00:00
Ox.print('clickColumn', id);
2010-06-29 21:24:07 +00:00
var i = getColumnIndexById(id),
isSelected = self.options.sort[0].key == self.options.columns[i].id;
2010-09-08 16:35:34 +00:00
that.sortList(
2010-06-29 21:24:07 +00:00
self.options.columns[i].id, isSelected ?
2011-01-24 04:08:19 +00:00
(self.options.sort[0].operator == '+' ? '-' : '+') :
2010-06-29 21:24:07 +00:00
self.options.columns[i].operator
2010-06-29 16:28:22 +00:00
);
}
2010-09-04 14:28:40 +00:00
function constructHead() {
2010-09-05 22:26:30 +00:00
var offset = 0;
2010-09-04 14:28:40 +00:00
that.$titles = [];
2010-09-05 22:26:30 +00:00
self.columnOffsets = [];
2010-09-04 14:28:40 +00:00
$.each(self.visibleColumns, function(i, v) {
var $order, $resize, $left, $center, $right;
2010-09-05 22:26:30 +00:00
offset += self.columnWidths[i];
self.columnOffsets[i] = offset - self.columnWidths[i] / 2;
that.$titles[i] = new Ox.Element()
2010-09-04 14:28:40 +00:00
.addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
.css({
2010-09-05 21:36:51 +00:00
width: (self.columnWidths[i] - 9) + 'px',
2010-09-04 14:28:40 +00:00
textAlign: v.align
})
.html(v.title)
.bindEvent({
anyclick: function(event, e) {
2010-09-04 14:28:40 +00:00
clickColumn(v.id);
},
dragstart: function(event, e) {
dragstartColumn(v.id, e);
},
drag: function(event, e) {
dragColumn(v.id, e);
},
dragend: function(event, e) {
dragendColumn(v.id, e);
2010-09-04 14:28:40 +00:00
}
})
.appendTo(that.$head.$content.$element);
$order = $('<div>')
.addClass('OxOrder')
.html(oxui.symbols['triangle_' + (
2011-01-24 04:08:19 +00:00
v.operator == '+' ? 'up' : 'down'
2010-09-04 14:28:40 +00:00
)])
.click(function() {
$(this).prev().trigger('click')
})
.appendTo(that.$head.$content.$element);
$resize = new Ox.Element()
2010-09-04 14:28:40 +00:00
.addClass('OxResize')
.appendTo(that.$head.$content.$element);
if (self.options.columnsResizable) {
$resize.addClass('OxResizable')
.bindEvent({
doubleclick: function(event, e) {
resetColumn(v.id, e);
},
dragstart: function(event, e) {
dragstartResize(v.id, e);
},
drag: function(event, e) {
dragResize(v.id, e);
},
dragend: function(event, e) {
dragendResize(v.id, e);
}
});
}
$left = $('<div>').addClass('OxLeft').appendTo($resize.$element);
$center = $('<div>').addClass('OxCenter').appendTo($resize.$element);
$right = $('<div>').addClass('OxRight').appendTo($resize.$element);
2010-09-04 14:28:40 +00:00
});
that.$head.$content.css({
width: (Ox.sum(self.columnWidths) + 2) + 'px'
});
2011-01-13 12:43:20 +00:00
//Ox.print('s.sC', self.selectedColumn)
//Ox.print('s.cO', self.columnOffsets)
2010-09-04 14:28:40 +00:00
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'
});
}
}
2010-06-30 09:02:13 +00:00
function constructItem(data) {
2010-09-03 20:54:40 +00:00
var $item = $('<div>')
.addClass('OxTarget')
2010-06-25 15:55:25 +00:00
.css({
2010-09-04 14:28:40 +00:00
width: getItemWidth() + 'px'
2010-06-30 09:02:13 +00:00
});
2010-06-28 11:19:04 +00:00
$.each(self.visibleColumns, function(i, v) {
2011-01-13 01:58:38 +00:00
var clickable = Ox.isBoolean(v.clickable) ? v.clickable : v.clickable(data),
editable = Ox.isBoolean(v.editable) ? v.editable : v.editable(data),
$cell = $('<div>')
.addClass(
'OxCell OxColumn' + Ox.toTitleCase(v.id) +
2011-01-13 01:58:38 +00:00
(clickable ? ' OxClickable' : '') +
(editable ? ' OxEditable' : '')
)
2010-06-25 15:55:25 +00:00
.css({
2011-01-06 03:10:40 +00:00
width: (self.columnWidths[i] - (self.options.columnsVisible ? 9 : 8)) + 'px',
borderRightWidth: (self.options.columnsVisible ? 1 : 0) + 'px',
2010-06-25 15:55:25 +00:00
textAlign: v.align
})
.html(v.id in data ? formatValue(data[v.id], v.format) : '')
.appendTo($item);
2010-06-25 15:55:25 +00:00
});
function formatValue(value, format) {
2011-02-01 09:56:16 +00:00
if (value === null) {
value = '';
} else if (format) {
value = Ox.isObject(format) ?
Ox['format' + Ox.toTitleCase(format.type)]
.apply(this, $.merge([value], format.args)) :
format(value);
2011-02-01 09:56:16 +00:00
} else if (Ox.isArray(value)) {
value = value.join(', ');
}
return value;
}
//Math.random() < 0.01 && Ox.print('item', data, $item);
2010-06-25 15:55:25 +00:00
return $item;
}
function dragstartColumn(id, e) {
self.drag = {
startX: e.clientX,
startPos: getColumnPositionById(id)
}
$.extend(self.drag, {
stopPos: self.drag.startPos,
offsets: $.map(self.visibleColumns, function(v, i) {
return self.columnOffsets[i] - self.columnOffsets[self.drag.startPos]
})
});
2010-09-03 20:54:40 +00:00
$('.OxColumn' + Ox.toTitleCase(id)).css({
opacity: 0.25
2010-07-05 07:09:34 +00:00
});
that.$titles[self.drag.startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
2010-09-03 20:54:40 +00:00
cursor: 'move'
2010-07-03 11:31:25 +00:00
});
}
function dragColumn(id, e) {
var d = e.clientX - self.drag.startX,
pos = self.drag.stopPos;
$.each(self.drag.offsets, function(i, v) {
if (d < 0 && d < v) {
self.drag.stopPos = i;
return false;
} else if (d > 0 && d > v) {
self.drag.stopPos = i;
2010-07-03 11:31:25 +00:00
}
});
if (self.drag.stopPos != pos) {
moveColumn(id, self.drag.stopPos);
}
2010-07-03 11:31:25 +00:00
}
function dragendColumn(id, e) {
var column = self.visibleColumns.splice(self.drag.stopPos, 1)[0],
width = self.columnWidths.splice(self.drag.stopPos, 1)[0];
self.visibleColumns.splice(self.drag.stopPos, 0, column);
self.columnWidths.splice(self.drag.stopPos, 0, width);
2010-09-05 22:26:30 +00:00
that.$head.$content.empty();
constructHead();
2010-09-03 20:54:40 +00:00
$('.OxColumn' + Ox.toTitleCase(id)).css({
2010-07-05 07:09:34 +00:00
opacity: 1
});
that.$titles[self.drag.stopPos].removeClass('OxDrag').css({
2010-09-03 20:54:40 +00:00
cursor: 'pointer'
2010-07-03 11:31:25 +00:00
});
that.$body.clearCache();
2011-01-15 23:26:20 +00:00
triggerColumnChangeEvent();
2010-07-03 11:31:25 +00:00
}
function dragstartResize(id, e) {
var pos = getColumnPositionById(id);
self.drag = {
startX: e.clientX,
startWidth: self.columnWidths[pos]
};
}
function dragResize(id, e) {
var width = Ox.limit(
self.drag.startWidth - self.drag.startX + e.clientX,
self.options.columnWidth[0],
self.options.columnWidth[1]
);
resizeColumn(id, width);
}
function dragendResize(id, e) {
var pos = getColumnPositionById(id);
that.triggerEvent('columnresize', {
id: id,
width: self.columnWidths[pos]
});
}
function getCell(id, key) {
2011-01-15 06:09:22 +00:00
Ox.print('getCell', id, key)
var $item = getItem(id);
return $($item.find('.OxCell.OxColumn' + Ox.toTitleCase(key))[0]);
}
2010-06-29 21:24:07 +00:00
function getColumnIndexById(id) {
return Ox.getPositionById(self.options.columns, id);
2010-06-25 15:55:25 +00:00
}
2010-06-29 21:24:07 +00:00
function getColumnPositionById(id) {
return Ox.getPositionById(self.visibleColumns, id);
2010-06-29 21:24:07 +00:00
}
function getItem(id) {
2011-01-13 12:43:20 +00:00
//Ox.print('getItem', id)
var $item = null;
$.each(that.find('.OxItem'), function(i, v) {
$v = $(v);
if ($v.data('id') == id) {
$item = $v;
return false;
}
});
return $item;
}
2010-06-30 09:02:13 +00:00
function getItemWidth() {
2011-01-13 21:17:48 +00:00
return Math.max(
Ox.sum(self.columnWidths),
that.$element.width() -
2011-01-14 06:25:16 +00:00
(self.options.scrollbarVisible ? oxui.scrollbarSize : 0)
2011-01-13 21:17:48 +00:00
);
2010-09-04 14:28:40 +00:00
//return Ox.sum(self.columnWidths)
2010-06-30 09:02:13 +00:00
}
2010-07-03 11:31:25 +00:00
function moveColumn(id, pos) {
2010-09-05 22:26:30 +00:00
// fixme: column head should be one element, not three
2011-01-13 12:43:20 +00:00
//Ox.print('moveColumn', id, pos)
2010-07-03 11:31:25 +00:00
var startPos = getColumnPositionById(id),
stopPos = pos,
2010-09-03 20:54:40 +00:00
startClassName = '.OxColumn' + Ox.toTitleCase(id),
stopClassName = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
2010-09-05 22:26:30 +00:00
insert = startPos < stopPos ? 'insertAfter' : 'insertBefore'
2010-09-03 20:54:40 +00:00
$column = $('.OxTitle' + startClassName),
2010-07-03 11:31:25 +00:00
$order = $column.next(),
$resize = $order.next();
2011-01-13 12:43:20 +00:00
//Ox.print(startClassName, insert, stopClassName)
2010-09-05 22:26:30 +00:00
$column.detach()[insert](insert == 'insertAfter' ? $('.OxTitle' + stopClassName).next().next() : $('.OxTitle' + stopClassName));
2010-07-03 11:31:25 +00:00
$order.detach().insertAfter($column);
$resize.detach().insertAfter($order);
2010-09-03 20:54:40 +00:00
$.each(that.$body.find('.OxItem'), function(i, v) {
2010-07-03 11:31:25 +00:00
var $v = $(v);
2010-09-05 22:26:30 +00:00
$v.children(startClassName).detach()[insert]($v.children(stopClassName));
2010-07-03 11:31:25 +00:00
});
var 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);
2010-06-28 09:16:36 +00:00
}
function removeColumn(id) {
2011-01-13 12:43:20 +00:00
//Ox.print('removeColumn', id);
2010-09-04 14:28:40 +00:00
var className = '.OxColumn' + Ox.toTitleCase(id),
index = getColumnIndexById(id),
itemWidth,
2010-09-04 14:28:40 +00:00
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();
2010-09-04 14:28:40 +00:00
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();
2010-06-28 09:16:36 +00:00
}
function resetColumn(id) {
var width = self.defaultColumnWidths[getColumnIndexById(id)];
resizeColumn(id, width);
that.triggerEvent('columnresize', {
id: id,
width: width
});
2010-06-29 22:19:41 +00:00
}
2010-06-29 21:24:07 +00:00
function resizeColumn(id, width) {
var i = getColumnIndexById(id),
pos = getColumnPositionById(id);
2011-01-13 21:17:48 +00:00
self.options.columns[i].width = width;
2010-06-25 15:55:25 +00:00
self.columnWidths[pos] = width;
2011-01-13 21:17:48 +00:00
if (self.options.columnsVisible) {
that.$head.$content.css({
width: (Ox.sum(self.columnWidths) + 2) + 'px'
});
that.$titles[pos].css({
width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px'
});
}
that.find('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({
width: (width - (self.options.columnsVisible ? 9 : 8)) + 'px'
2010-06-25 15:55:25 +00:00
});
setWidth();
2010-06-25 15:55:25 +00:00
}
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
});
}
2010-06-29 21:24:07 +00:00
function toggleSelected(id) {
var pos = getColumnPositionById(id);
2010-07-07 12:36:12 +00:00
if (pos > -1) {
updateOrder(id);
2010-09-03 20:54:40 +00:00
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');
2010-07-07 12:36:12 +00:00
that.$titles[pos].css({
width: (
2010-09-03 20:54:40 +00:00
that.$titles[pos].width() + (that.$titles[pos].hasClass('OxSelected') ? -16 : 16)
) + 'px'
2010-07-07 12:36:12 +00:00
});
}
2010-06-25 15:55:25 +00:00
}
2011-01-15 23:26:20 +00:00
function triggerColumnChangeEvent() {
that.triggerEvent('columnchange', {
ids: $.map(self.visibleColumns, function(v, i) {
return v.id;
})
});
}
2010-06-29 21:24:07 +00:00
function updateOrder(id) {
var pos = getColumnPositionById(id);
2011-01-13 12:43:20 +00:00
//Ox.print(id, pos)
2010-06-29 17:39:21 +00:00
that.$titles[pos].next().html(oxui.symbols[
2011-01-24 04:08:19 +00:00
'triangle_' + (self.options.sort[0].operator == '+' ? 'up' : 'down')
2010-06-29 17:39:21 +00:00
]);
}
2010-06-30 18:47:10 +00:00
self.onChange = function(key, value) {
2011-02-25 10:23:33 +00:00
if (key == 'items') {
2011-01-03 23:38:43 +00:00
//alert('request set!!')
that.$body.options(key, value);
2011-01-15 06:09:22 +00:00
} else if (key == 'paste') {
that.$body.options(key, value);
2011-01-03 23:38:43 +00:00
} else if (key == 'selected') {
2010-06-30 18:47:10 +00:00
that.$body.options(key, value);
}
};
2011-01-13 19:41:10 +00:00
// fixme: doesn't work, doesn't return that
that.closePreview = that.$body.closePreview;
that.editCell = function(id, key) {
2011-02-25 10:23:33 +00:00
Ox.print('editCell', id, key)
2011-01-13 19:41:10 +00:00
var $item = getItem(id),
$cell = getCell(id, key),
$input,
html = $cell.html(),
index = getColumnIndexById(key),
column = self.options.columns[index],
2011-02-25 10:23:33 +00:00
width = column.width - self.options.columnsVisible;
2011-01-13 19:41:10 +00:00
$cell.empty()
.addClass('OxEdit')
.css({
width: width + 'px'
});
$input = new Ox.Input({
2011-02-25 10:23:33 +00:00
autovalidate: column.input ? column.input.autovalidate : null,
2011-01-13 19:41:10 +00:00
style: 'square',
value: html,
width: width
})
.bind({
mousedown: function(e) {
// keep mousedown from reaching list
e.stopPropagation();
}
})
.bindEvent({
blur: submit,
})
2011-02-25 10:23:33 +00:00
.appendTo($cell);
//.focusInput();
setTimeout($input.focusInput, 0); // fixme: strange
2011-01-13 19:41:10 +00:00
function submit() {
var value = $input.value();
//$input.loseFocus().remove();
// fixme: leaky, inputs remain in focus stack
$cell.removeClass('OxEdit')
.css({
width: (width - 8) + 'px'
})
.html(value)
that.triggerEvent('submit', {
id: id,
key: key,
value: value
});
}
}
that.gainFocus = function() {
that.$body.gainFocus();
return that;
};
that.loseFocus = function() {
that.$body.loseFocus();
return that;
}
2011-01-15 06:09:22 +00:00
that.paste = function(data) {
that.$body.paste();
return that;
};
2011-01-13 19:41:10 +00:00
that.reloadList = function() {
that.$body.reloadList();
return that;
2010-07-20 20:04:13 +00:00
};
that.resizeColumn = function(id, width) {
resizeColumn(id, width);
return that;
}
that.size = function() {
setWidth();
that.$body.size();
}
2010-09-08 16:35:34 +00:00
that.sortList = function(key, operator) {
2010-06-29 16:28:22 +00:00
var isSelected = key == self.options.sort[0].key;
2011-02-25 10:23:33 +00:00
self.options.sort = [{key: key, operator: operator}];
if (self.options.columnsVisible) {
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);
}
2010-06-25 15:55:25 +00:00
}
2010-09-08 16:35:34 +00:00
that.$body.sortList(self.options.sort[0].key, self.options.sort[0].operator);
return that;
2010-06-25 15:55:25 +00:00
};
that.value = function(id, key, value) {
// fixme: make this accept id, {k: v, ...}
var $item = getItem(id),
2011-01-15 06:09:22 +00:00
//$cell = getCell(id, key),
2011-01-13 01:58:38 +00:00
column = self.options.columns[getColumnIndexById(key)];
2011-01-15 06:09:22 +00:00
if (arguments.length == 1) {
return that.$body.value(id);
} else if (arguments.length == 2) {
2011-01-13 01:58:38 +00:00
return that.$body.value(id, key);
} else {
2011-01-13 01:58:38 +00:00
that.$body.value(id, key, value);
/*
$cell && $cell.html(column.format ? column.format(value) : value);
if (column.unique) {
that.$body.setId($item.data('id'), value);
$item.data({id: value});
}
2011-01-13 01:58:38 +00:00
*/
return that;
}
}
2010-06-25 15:55:25 +00:00
return that;
};
2011-02-07 18:57:05 +00:00
Ox.TreeList = function(options, self) {
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
2011-02-26 04:22:49 +00:00
data: null,
2011-02-07 18:57:05 +00:00
items: [],
max: -1,
min: 0,
selected: [],
width: 256
})
.options(options || {});
2011-02-26 04:22:49 +00:00
if (self.options.data) {
2011-02-28 10:03:01 +00:00
self.options.items = [];
Ox.print('d', self.options.data, 'i', self.options.items)
Ox.forEach(self.options.data, function(value, key) {
self.options.items.push(parseData(key, value));
});
Ox.print('d', self.options.data, 'i', self.options.items)
2011-02-26 04:22:49 +00:00
}
2011-02-07 18:57:05 +00:00
that.$element = new Ox.List({
construct: constructItem,
itemHeight: 16,
items: parseItems(),
itemWidth: self.options.width,
max: self.options.max,
min: self.options.min,
unique: 'id',
}, $.extend({}, self))
.addClass('OxTextList OxTreeList')
.css({
width: self.options.width + 'px'
})
.click(clickItem)
.bindEvent({
toggle: toggleItems
});
function clickItem(e) {
var $target = $(e.target),
$item, id, item;
if ($target.hasClass('OxToggle')) {
$item = $target.parent().parent();
id = $item.data('id');
item = getItemById(id);
toggleItem(item, !item.expanded)
}
}
function constructItem(data) {
var $item = $('<div>'),
padding = (data.level + !data.items) * 16 - 8;
if (data.level || !data.items) {
$('<div>')
.addClass('OxCell OxTarget')
.css({
width: padding + 'px',
})
.appendTo($item);
}
if (data.items) {
$('<div>')
.addClass('OxCell')
.css({
width: '8px',
})
.append(
// fixme: need Ox.Icon()
$('<img>')
.addClass('OxToggle')
.attr({
src: oxui.path + '/png/ox.ui.' + Ox.theme() + '/symbol' +
(data.expanded ? 'Collapse' : 'Expand') + '.png'
})
)
.appendTo($item);
}
$('<div>')
.addClass('OxCell OxTarget')
.css({
width: (self.options.width - padding - 32 + !data.items * 16) + 'px'
2011-02-07 18:57:05 +00:00
})
.html(data.title)
.appendTo($item);
return $item;
}
function getItemById(id, items, level) {
var items = items || self.options.items,
level = level || 0,
ret = null;
$.each(items, function(i, item) {
if (item.id == id) {
ret = $.extend(item, {
level: level
});
return false;
}
if (item.items) {
ret = getItemById(id, item.items, level + 1);
if (ret) {
return false;
}
}
});
return ret;
}
2011-02-26 04:22:49 +00:00
function parseData(key, value) {
2011-02-28 10:03:01 +00:00
Ox.print('parseData', key, value)
2011-02-26 04:22:49 +00:00
var ret = {
2011-02-28 10:03:01 +00:00
id: key,
title: key.toString().split('.').pop()
},
type = Ox.typeOf(value);
if (type == 'array' || type == 'object') {
ret.title += ': ' + Ox.toTitleCase(Ox.typeOf(value));
ret.items = Ox.map(Ox.sort(Ox.keys(value)), function(k) {
return parseData(key + '.' + k, value[k]);
2011-02-26 04:22:49 +00:00
});
} else {
2011-02-28 10:03:01 +00:00
ret.title += ': ' + (
type == 'function' ?
value.toString().split('{')[0] :
JSON.stringify(value)
)
2011-02-26 04:22:49 +00:00
}
return ret;
}
2011-02-07 18:57:05 +00:00
function parseItems(items, level) {
var items = items || self.options.items,
level = level || 0,
ret = [];
items.forEach(function(item, i) {
var item_ = $.extend({
level: level
}, item, item.items ? {
items: !!item.expanded ?
parseItems(item.items, level + 1) : []
} : {});
ret.push(item_);
item.items && $.merge(ret, item_.items);
});
return ret;
}
function toggleItem(item, expanded) {
var $img, $item, pos;
item.expanded = expanded;
$.each(that.$element.find('.OxItem'), function(i, v) {
var $item = $(v);
if ($item.data('id') == item.id) {
$img = $item.find('img');
pos = $item.data('position');
return false;
}
})
$img.attr({
src: oxui.path + '/png/ox.ui.' + Ox.theme() + '/symbol' +
(item.expanded ? 'Collapse' : 'Expand') + '.png'
});
item.expanded ?
that.$element.addItems(pos + 1, parseItems(item.items, item.level + 1)) :
that.$element.removeItems(pos + 1, parseItems(item.items, item.level + 1).length);
}
function toggleItems(event, data) {
data.ids.forEach(function(id, i) {
var item = getItemById(id);
if (item.items && data.expanded != !!item.expanded) {
toggleItem(item, data.expanded);
}
});
}
return that;
};
2010-07-24 01:32:08 +00:00
/*
============================================================================
Maps
============================================================================
*/
2011-02-25 10:23:33 +00:00
Ox.ListMap = function(options, self) {
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
addPlace: null,
height: 256,
labels: false,
places: null,
selected: [],
width: 256
})
.options(options || {})
.css({
width: self.options.width + 'px',
height: self.options.height + 'px'
});
self.columns = [
{
addable: false, // fixme: implement
id: 'id',
unique: true,
visible: false
},
{
editable: true,
id: 'name',
operator: '+',
removable: false,
title: 'Name',
visible: true,
width: 144
},
{
editable: true,
id: 'geoname',
removable: false,
operator: '+',
title: 'Geoname',
visible: true,
width: 192
},
{
format: function(value) {
return $('<img>')
.attr({
// fixme: not the right place to do these
src: '/static/oxjs/build/svg/' + (value || 'NTHH') + '.' + (value == 'RE' ? 'png' : 'svg')
})
.load(function() {
$(this).css({
width: '21px',
height: '14px',
padding: '1px 0 0 1px'
})
});
},
id: 'countryCode',
operator: '+',
title: 'Flag',
visible: true,
width: 48
},
2011-02-26 04:22:49 +00:00
{
align: 'right',
format: {type: 'area', args: [0]},
id: 'size',
operator: '-',
title: 'Size',
visible: true,
width: 128
},
2011-02-25 10:23:33 +00:00
{
align: 'right',
format: toFixed,
id: 'lat',
operator: '+',
title: 'Latitude',
visible: true,
width: 96
},
{
align: 'right',
format: toFixed,
id: 'lng',
operator: '+',
title: 'Longitude',
visible: true,
width: 96
},
{
align: 'right',
format: toFixed,
id: 'south',
operator: '+',
title: 'South',
2011-02-26 04:22:49 +00:00
visible: false,
2011-02-25 10:23:33 +00:00
width: 96
},
{
align: 'right',
id: 'west',
operator: '+',
title: 'West',
2011-02-26 04:22:49 +00:00
visible: false,
2011-02-25 10:23:33 +00:00
width: 96
},
{
align: 'right',
format: toFixed,
id: 'north',
operator: '+',
title: 'North',
2011-02-26 04:22:49 +00:00
visible: false,
2011-02-25 10:23:33 +00:00
width: 96
},
{
align: 'right',
format: toFixed,
id: 'east',
operator: '+',
title: 'East',
2011-02-26 04:22:49 +00:00
visible: false,
2011-02-25 10:23:33 +00:00
width: 96
},
{
id: 'user',
operator: '+',
title: 'User',
visible: false,
width: 96
},
{
format: 'date',
id: 'created',
2011-02-26 04:22:49 +00:00
operator: '-',
2011-02-25 10:23:33 +00:00
title: 'Date Created',
visible: false,
width: 96,
},
{
format: 'date',
id: 'modified',
2011-02-26 04:22:49 +00:00
operator: '-',
2011-02-25 10:23:33 +00:00
title: 'Date Modified',
visible: false,
width: 96,
2011-02-26 04:22:49 +00:00
},
{
align: 'right',
id: 'matches',
operator: '-',
title: 'Matches',
visible: false,
width: 96,
2011-02-25 10:23:33 +00:00
}
];
self.$toolbar = new Ox.Bar({
size: 24
});
self.$findElement = new Ox.FormElementGroup({
elements: [
self.$findSelect = new Ox.Select({
items: [
{id: 'all', title: 'Find: All'},
{id: 'name', title: 'Find: Name'},
{id: 'geoname', title: 'Find: Geoname'},
{id: 'country', title: 'Find: Country'}
],
overlap: 'right',
width: 128
}),
self.$findInput = new Ox.Input({
clear: true,
width: 192
})
]
})
.css({float: 'right', margin: '4px'})
.appendTo(self.$toolbar)
self.$list = new Ox.TextList({
columns: self.columns,
columnsRemovable: true,
columnsVisible: true,
items: self.options.places,
pageLength: 100,
scrollbarVisible: true,
sort: [
{key: 'name', operator: '+'}
]
})
.bindEvent({
2011-02-26 04:22:49 +00:00
'delete': removeItem,
2011-02-25 10:23:33 +00:00
init: initList,
load: function() {
that.triggerEvent('loadlist');
},
open: openItem,
select: selectItem
});
self.$statusbar = new Ox.Bar({
size: 24
});
self.$status = new Ox.Element()
.css({paddingTop: '4px', margin: 'auto', textAlign: 'center'})
.appendTo(self.$statusbar);
self.mapResize = [
Math.round(self.options.width * 0.25),
Math.round(self.options.width * 0.5),
Math.round(self.options.width * 0.75)
];
if (Ox.isArray(self.options.places)) {
init(self.options.places)
} else {
self.options.places({}, function(result) {
Ox.print('$$$$', result.data.items)
self.options.places({
keys: self.columns.map(function(column) {
return column.id
}),
range: [0, result.data.items]
}, function(result) {
Ox.print('DATA', result)
init(result.data.items);
});
});
}
function init(places) {
Ox.print('PLACES', places)
self.$map = new Ox.Map({
clickable: true,
height: self.options.height,
// fixme: place can still be string, and maybe shouldn't be array at all
places: places.map(function(place) {
return Ox.extend({}, place, {
name: place.name.length == 0 ? '' : place.name[0]
});
}),
statusbar: true,
toolbar: true,
width: self.mapResize[1],
zoombar: true
})
.bindEvent({
addplace: function(event, data) {
that.triggerEvent('addplace', data);
},
resize: function() {
self.$map.resizeMap();
},
select: selectPlace
});
that.$element.replaceWith(
that.$element = new Ox.SplitPanel({
elements: [
{
element: new Ox.SplitPanel({
elements: [
{
element: self.$toolbar,
size: 24
},
{
element: self.$list
},
{
element: self.$statusbar,
size: 24
}
],
orientation: 'vertical'
})
},
{
element: self.$map,
resizable: true,
resize: self.mapResize,
size: self.mapResize[1]
}
],
orientation: 'horizontal'
}).$element
);
}
function initList(event, data) {
self.$status.html(data.items + ' place' + (data.items == 1 ? '' : 's'))
}
function openItem(event, data) {
selectItem(event, data);
self.$map.zoomToPlace(data.ids[0]);
}
2011-02-26 04:22:49 +00:00
function removeItem(event, data) {
var id = data.ids[0];
that.triggerEvent('removeplace', {id: id});
self.$map.removePlace(id);
}
2011-02-25 10:23:33 +00:00
function selectItem(event, data) {
Ox.print('selectItem', data.ids[0])
self.$map.options({selected: data.ids.length ? data.ids[0] : ''});
}
function selectPlace(event, data) {
Ox.print('selectPlace', data.id)
data.id[0] != '_' && self.$list.options({
selected: data.id ? [data.id] : []
});
}
function toFixed(val) {
return val.toFixed(8);
}
self.onChange = function(key, value) {
if (key == 'selected') {
self.$list.options({selected: value});
}
}
that.focusList = function() {
self.$list.gainFocus();
return that;
}
that.reloadList = function() {
self.$list.reloadList();
return that;
}
that.resizeMap = function() {
Ox.print('Ox.ListMap.resizeMap()')
self.$map.resizeMap();
return that;
};
return that;
};
2010-07-24 01:32:08 +00:00
Ox.Map = function(options, self) {
var self = self || {}
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-07-24 01:32:08 +00:00
.defaults({
2010-11-28 15:06:47 +00:00
clickable: false,
2011-02-22 18:52:26 +00:00
height: 256,
labels: false,
2010-07-24 01:32:08 +00:00
places: [],
2011-02-25 10:23:33 +00:00
selected: null,
2011-02-22 18:52:26 +00:00
statusbar: false,
toolbar: false,
width: 256,
zoombar: false
2010-07-24 01:32:08 +00:00
})
2010-11-28 15:06:47 +00:00
.options(options || {})
2011-02-22 18:52:26 +00:00
.css({
width: self.options.width + 'px',
height: self.options.height + 'px'
})
2010-12-26 20:16:35 +00:00
.bindEvent({
2010-11-28 15:06:47 +00:00
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,
2011-02-25 10:23:33 +00:00
key_escape: function() {
selectPlace('');
}
2010-11-28 15:06:47 +00:00
});
2010-07-24 01:32:08 +00:00
2011-02-25 10:23:33 +00:00
self.resultPlace = null;
2011-02-22 18:52:26 +00:00
if (self.options.toolbar) {
self.$toolbar = new Ox.Bar({
size: 24
})
.appendTo(that);
self.$labelsButton = new Ox.Button({
title: 'Show Labels',
width: 80
})
.css({float: 'left', margin: '4px'})
.bindEvent({
click: toggleLabels
})
.appendTo(self.$toolbar)
self.$findInput = new Ox.Input({
clear: true,
placeholder: 'Find on Map',
width: 192
})
.css({float: 'right', margin: '4px'})
.bindEvent({
submit: submitFind
})
.appendTo(self.$toolbar)
}
2011-02-25 10:23:33 +00:00
2011-02-22 18:52:26 +00:00
self.$map = new Ox.Element('div')
.css({
width: self.options.width + 'px',
2011-02-25 10:23:33 +00:00
height: getMapHeight()
2011-02-22 18:52:26 +00:00
})
.appendTo(that);
2011-02-25 10:23:33 +00:00
2011-02-22 18:52:26 +00:00
if (self.options.zoombar) {
self.$zoombar = new Ox.Bar({
size: 16
})
.appendTo(that);
self.$zoomInput = new Ox.Range({
arrows: true,
max: 22,
size: self.options.width,
thumbSize: 32,
thumbValue: true
})
.bindEvent({
change: changeZoom
})
.appendTo(self.$zoombar)
}
2011-02-25 10:23:33 +00:00
2011-02-22 18:52:26 +00:00
if (self.options.statusbar) {
self.$statusbar = new Ox.Bar({
2011-02-25 10:23:33 +00:00
size: 24
2011-02-22 18:52:26 +00:00
})
2011-02-25 10:23:33 +00:00
.css({padding: '2px'})
2011-02-22 18:52:26 +00:00
.appendTo(that);
2011-02-25 10:23:33 +00:00
self.$placeNameInput = new Ox.Input({
placeholder: 'Name',
width: Math.floor((self.options.width - 96) / 2)
})
.css({float: 'left', margin: '2px'})
.appendTo(self.$statusbar);
self.$placeGeonameInput = new Ox.Input({
placeholder: 'Geoname',
width: Math.ceil((self.options.width - 96) / 2)
})
.css({float: 'left', margin: '2px'})
.appendTo(self.$statusbar)
self.$placeButton = new Ox.Button({
title: 'New Place',
width: 80
})
.css({float: 'left', margin: '2px'})
.bindEvent({
click: clickPlaceButton
})
2011-02-22 18:52:26 +00:00
.appendTo(self.$statusbar);
}
2010-12-22 17:58:39 +00:00
if (Ox.isUndefined(window.google)) {
2011-02-22 18:52:26 +00:00
googleCallback = function() {
Ox.print('googleCallback')
delete googleCallback;
initMap();
};
$.getScript('http://maps.google.com/maps/api/js?callback=googleCallback&sensor=false');
2010-12-22 17:58:39 +00:00
} else {
initMap();
}
2011-02-25 10:23:33 +00:00
function addNewPlace() {
var bounds = self.map.getBounds(),
center = self.map.getCenter(),
southwest = new google.maps.LatLngBounds(
bounds.getSouthWest(), center
).getCenter(),
northeast = new google.maps.LatLngBounds(
center, bounds.getNorthEast()
).getCenter(),
place = new Place({
countryCode: '',
geoname: '',
id: '_' + Ox.uid(), // fixme: stupid
name: '',
south: southwest.lat(),
west: southwest.lng(),
north: northeast.lat(),
east: northeast.lng()
});
addPlace(place);
selectPlace(place.name);
}
2011-02-22 18:52:26 +00:00
2011-02-25 10:23:33 +00:00
function addPlace(place) {
Ox.print('addPlace', place)
Ox.print('self.resultPlace', self.resultPlace)
self.resultPlace && self.resultPlace.remove();
if (place.id[0] == '_') {
self.resultPlace = place;
}
place.add();
2010-12-22 17:58:39 +00:00
}
2010-12-06 17:42:05 +00:00
2010-07-24 19:27:39 +00:00
function canContain(outerBounds, innerBounds) {
var outerSpan = outerBounds.toSpan(),
innerSpan = innerBounds.toSpan();
return outerSpan.lat() > innerSpan.lat() &&
outerSpan.lng() > innerSpan.lng();
}
2011-02-22 18:52:26 +00:00
function changeZoom(event, data) {
self.map.setZoom(data.value);
}
2011-02-25 10:23:33 +00:00
function clickMap(event) {
Ox.print('Ox.Map clickMap')
2010-11-28 15:06:47 +00:00
that.gainFocus();
if (self.options.clickable) {
2011-02-25 10:23:33 +00:00
getPlaceByLatLng(event.latLng, self.map.getBounds(), function(place) {
if (place) {
addPlace(place);
selectPlace(place.id);
2010-11-28 15:06:47 +00:00
}
});
}
2010-07-24 19:27:39 +00:00
}
2011-02-25 10:23:33 +00:00
function clickPlaceButton() {
if (self.$placeButton.options('title') == 'New Place') {
addNewPlace();
} else {
var place = getPlaceById(self.selected),
data = {
place: {}
};
data.place.name = self.$placeNameInput.value();
data.place.geoname = self.$placeGeonameInput.value();
data.place.countryCode = Ox.getCountryCode(data.place.geoname);
[
'lat', 'lng', 'south', 'west', 'north', 'east', 'size'
].forEach(function(key) {
data.place[key] = place[key];
});
that.triggerEvent('addplace', data)
}
2011-02-22 18:52:26 +00:00
}
2010-11-28 15:06:47 +00:00
function focusOnPlace() {
2011-02-25 10:23:33 +00:00
if (self.options.selected > -1) {
self.map.panTo(self.options.places[self.options.selected].center);
2010-11-28 15:06:47 +00:00
}
}
2011-02-25 10:23:33 +00:00
function getPlaceById(id) {
var place = Ox.getObjectById(self.places, id);
if (!place && self.resultPlace && self.resultPlace.id == id) {
place = self.resultPlace;
}
Ox.print('getPlaceById', id, place)
return place;
}
function getPlaceByLatLng(latlng, bounds, callback) {
2011-02-28 10:03:01 +00:00
Ox.print('ll b', latlng, bounds)
2010-07-24 19:27:39 +00:00
var callback = arguments.length == 3 ? callback : bounds,
bounds = arguments.length == 3 ? bounds : null;
2010-07-24 01:32:08 +00:00
self.geocoder.geocode({
2010-07-24 19:27:39 +00:00
latLng: latlng
2010-07-24 01:32:08 +00:00
}, function(results, status) {
2011-02-25 10:23:33 +00:00
Ox.print('results', results)
2010-07-24 19:27:39 +00:00
var length = results.length;
2010-07-24 01:32:08 +00:00
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
2010-07-24 19:27:39 +00:00
if (bounds) {
$.each(results.reverse(), function(i, result) {
if (
i == length - 1 ||
canContain(bounds, result.geometry.bounds || result.geometry.viewport)
) {
2011-02-25 10:23:33 +00:00
callback(Place(results[i]));
2010-07-24 19:27:39 +00:00
return false;
}
});
} else {
2011-02-25 10:23:33 +00:00
callback(Place(results[0]));
2010-07-24 19:27:39 +00:00
}
2010-07-24 01:32:08 +00:00
} else {
callback(null);
}
} else {
2011-01-13 12:43:20 +00:00
//Ox.print('geocode failed:', status);
2010-07-24 01:32:08 +00:00
callback(null);
}
});
}
2011-02-25 10:23:33 +00:00
function getPlaceByName(name, callback) {
2010-07-24 19:27:39 +00:00
self.geocoder.geocode({
address: name
}, function(results, status) {
2010-07-24 01:32:08 +00:00
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
2011-02-26 04:22:49 +00:00
Ox.print('GEOCODER RESULT', results[0])
2011-02-25 10:23:33 +00:00
callback(Place(results[0]));
2010-07-24 19:27:39 +00:00
} else {
callback(null);
2010-07-24 01:32:08 +00:00
}
2010-07-24 19:27:39 +00:00
} else {
2011-02-22 18:52:26 +00:00
Ox.print('geocode failed:', status);
2010-07-24 19:27:39 +00:00
callback(null);
2010-07-24 01:32:08 +00:00
}
});
}
2011-02-25 10:23:33 +00:00
function getMapHeight() {
return (
self.options.height -
self.options.statusbar * 24 -
self.options.toolbar * 24 -
self.options.zoombar * 16
) + 'px';
}
2011-02-22 18:52:26 +00:00
function getMapType() {
return self.options.labels ? 'HYBRID' : 'SATELLITE'
}
2010-11-28 15:06:47 +00:00
function getPositionByName(name) {
var position = -1;
$.each(self.options.places, function(i, place) {
if (place.name == name) {
position = i;
return false;
}
});
return position;
}
2010-07-24 01:32:08 +00:00
2011-02-25 10:23:33 +00:00
function initMap() {
self.geocoder = new google.maps.Geocoder();
self.places = [];
self.options.places.forEach(function(place, i) {
self.places[i] = Place(Ox.clone(place));
self.bounds = i == 0 ?
Ox.clone(self.places[i].bounds) :
self.bounds.union(self.places[i].bounds);
});
self.center = self.bounds ? self.bounds.getCenter() : new google.maps.LatLng(0, 0);
self.zoom = 1; // fixme: should depend on height
self.map = new google.maps.Map(self.$map.$element[0], {
center: self.center,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId[getMapType()],
zoom: self.zoom
});
if (self.bounds) {
self.map.fitBounds(self.bounds);
self.zoom = self.map.getZoom();
}
self.places.forEach(function(place) {
place.add(self.map);
});
google.maps.event.addListener(self.map, 'click', clickMap);
google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
google.maps.event.trigger(self.map, 'resize');
that.gainFocus();
that.triggerEvent('load');
}
2010-11-28 15:06:47 +00:00
function pan(x, y) {
self.map.panBy(x * 256, y * 256);
};
2010-07-24 01:32:08 +00:00
2011-02-25 10:23:33 +00:00
function removePlace(id) {
2010-07-24 19:27:39 +00:00
}
2010-11-28 15:06:47 +00:00
function reset() {
2011-01-13 12:43:20 +00:00
//Ox.print(self.map.getZoom(), self.zoom);
2010-11-28 15:06:47 +00:00
self.map.getZoom() == self.zoom ?
2011-02-25 10:23:33 +00:00
self.map.panTo(self.center) :
self.map.fitBounds(self.bounds);
2010-11-28 15:06:47 +00:00
}
2011-02-25 10:23:33 +00:00
function selectPlace(id) {
Ox.print('Ox.Map selectPlace()', id, self.selected)
var place;
if (id != self.selected) {
place = getPlaceById(self.selected);
place && place.deselect();
place = getPlaceById(id);
place && place.select();
}
self.options.selected = id;
self.selected = id;
setStatus();
2011-02-26 04:22:49 +00:00
that.triggerEvent('select', place);
/*
2011-02-25 10:23:33 +00:00
that.triggerEvent('select', {
id: self.options.selected
});
2011-02-26 04:22:49 +00:00
*/
2011-02-25 10:23:33 +00:00
};
function setStatus() {
Ox.print('setStatus()', self.options.selected)
var place;
if (self.options.statusbar) {
if (self.options.selected) {
place = getPlaceById(self.options.selected);
}
self.$placeNameInput.options({
value: self.options.selected ? place.name : ''
});
self.$placeGeonameInput.options({
value: self.options.selected ? place.geoname : ''
});
self.$placeButton.options({
title: self.options.selected ? 'Add Place' : 'New Place'
});
}
}
function submitFind(event, data) {
that.findPlace(data.value, function(place) {
setStatus(place);
});
}
2011-02-22 18:52:26 +00:00
function toggleLabels() {
self.options.labels = !self.options.labels
self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
self.$labelsButton.options({
title: self.$labelsButton.options('title') == 'Show Labels' ?
'Hide Labels' : 'Show Labels'
2010-09-03 08:47:40 +00:00
});
2010-07-24 01:32:08 +00:00
}
2010-11-28 15:06:47 +00:00
function zoom(z) {
self.map.setZoom(self.map.getZoom() + z);
}
2011-02-22 18:52:26 +00:00
function zoomChanged() {
var zoom = self.map.getZoom();
self.options.zoombar && self.$zoomInput.options({value: zoom});
that.triggerEvent('zoom', {
value: zoom
});
}
2010-11-28 15:06:47 +00:00
function zoomToPlace() {
2011-02-25 10:23:33 +00:00
if (self.options.selected > -1) {
self.map.fitBounds(self.options.places[self.options.selected].bounds);
2010-11-28 15:06:47 +00:00
}
}
function Marker(place) {
2010-07-24 01:32:08 +00:00
var listeners = {},
marker = new google.maps.Marker({
2010-11-28 15:06:47 +00:00
position: place.center,
title: place.name
2010-07-24 19:27:39 +00:00
}),
selected = false;
2011-02-25 10:23:33 +00:00
setOptions();
function click(event) {
Ox.print('click metaKey', event.metaKey, selected)
if (event.metaKey == selected) {
selected = !event.metaKey;
selectPlace(selected ? place.id : '');
}
2010-07-24 19:27:39 +00:00
}
function dblclick() {
2011-02-25 10:23:33 +00:00
Ox.print('####', place.bounds)
2010-11-28 15:06:47 +00:00
self.map.fitBounds(place.bounds);
2010-07-24 01:32:08 +00:00
}
2011-02-25 10:23:33 +00:00
function setOptions() {
marker.setOptions({
icon: oxui.path + 'png/ox.ui/marker' +
(place.id[0] == '_' ? 'Result' : '') +
(selected ? 'Selected' : '') + '.png'
});
2010-07-24 01:32:08 +00:00
}
return {
add: function() {
2011-02-25 10:23:33 +00:00
Ox.print('Marker.add()')
marker.setMap(self.map);
2010-07-24 19:27:39 +00:00
listeners = {
2010-09-03 20:54:40 +00:00
click: google.maps.event.addListener(marker, 'click', click),
dblclick: google.maps.event.addListener(marker, 'dblclick', dblclick),
2010-07-24 19:27:39 +00:00
};
},
deselect: function() {
2011-02-25 10:23:33 +00:00
selected = false;
setOptions();
2010-07-24 01:32:08 +00:00
},
remove: function() {
marker.setMap(null);
2010-07-24 19:27:39 +00:00
$.each(listeners, function(i, listener) {
google.maps.event.removeListener(listener);
});
},
select: function() {
2011-02-25 10:23:33 +00:00
selected = true;
setOptions();
2010-07-24 01:32:08 +00:00
}
};
2011-02-25 10:23:33 +00:00
};
2010-07-24 01:32:08 +00:00
2011-02-25 10:23:33 +00:00
function Place(place) {
var marker, polygon, selected;
if ('name' in place) {
// place object
//Ox.extend(place, place);
place.bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(place.south, place.west),
new google.maps.LatLng(place.north, place.east)
);
} else {
// geodata object
if (!place.geometry.bounds) {
Ox.print('NO BOUNDS, ONLY VIEWPORT')
}
Ox.extend(place, {
bounds: place.geometry.bounds || place.geometry.viewport,
countryCode: Ox.getCountryCode(place.formatted_address),
geoname: place.formatted_address,
id: '_' + Ox.uid(),
name: place.formatted_address.split(', ')[0]
});
Ox.extend(place, {
south: Ox.round(place.bounds.getSouthWest().lat(), 8),
west: Ox.round(place.bounds.getSouthWest().lng(), 8),
north: Ox.round(place.bounds.getNorthEast().lat(), 8),
east: Ox.round(place.bounds.getNorthEast().lng(), 8)
});
}
place.center = place.bounds.getCenter();
Ox.extend(place, {
lat: Ox.round(place.center.lat(), 8),
lng: Ox.round(place.center.lng(), 8),
size: Ox.getArea(
{lat: place.south, lng: place.west},
{lat: place.north, lng: place.east}
)
});
Ox.print('PLACE', place)
marker = Marker(place);
polygon = Polygon(place);
selected = false;
return Ox.extend(place, {
add: function() {
Ox.print('Place.add()', self.resultPlace)
marker.add();
},
deselect: function() {
selected = false;
marker.deselect();
polygon.remove();
},
remove: function() {
Ox.print('REMOVE!!!', selected)
if (place.id[0] == '_') {
self.resultPlace = null;
}
selected && polygon.remove();
marker.remove();
},
select: function() {
Ox.print('Place.select()')
selected = true;
marker.select();
polygon.add();
}
});
};
function Polygon(place) {
2010-07-24 01:32:08 +00:00
var listeners = {},
polygon = new google.maps.Polygon({
2011-02-25 10:23:33 +00:00
paths: [
new google.maps.LatLng(place.south, place.west),
new google.maps.LatLng(place.north, place.west),
new google.maps.LatLng(place.north, place.east),
new google.maps.LatLng(place.south, place.east),
new google.maps.LatLng(place.south, place.west)
]
2010-07-24 01:32:08 +00:00
}),
selected = false;
2010-07-24 19:27:39 +00:00
setOptions();
function click() {
selected = !selected;
setOptions();
}
2010-07-24 01:32:08 +00:00
function setOptions() {
2010-09-03 20:54:40 +00:00
var color = selected ? '#8080FF' : '#FFFFFF';
2010-07-24 01:32:08 +00:00
polygon.setOptions({
clickable: true,
fillColor: color,
fillOpacity: selected ? 0.1 : 0,
strokeColor: color,
strokeOpacity: 1,
strokeWeight: 2
});
}
return {
add: function() {
2011-02-25 10:23:33 +00:00
Ox.print('Polygon.add()')
2010-07-24 01:32:08 +00:00
polygon.setMap(self.map);
2010-09-03 20:54:40 +00:00
listeners.click = google.maps.event.addListener(polygon, 'click', click);
2010-07-24 01:32:08 +00:00
},
deselect: function() {
selected = false;
setOptions();
},
remove: function() {
polygon.setMap(null);
google.maps.event.removeListener(listeners.click);
},
select: function() {
selected = true;
setOptions();
2011-02-25 10:23:33 +00:00
}
2010-07-24 01:32:08 +00:00
};
}
2010-12-06 17:42:05 +00:00
function Rectangle(area) { // fixme: not used
2010-07-24 01:32:08 +00:00
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),
2010-07-24 19:27:39 +00:00
se: new google.maps.LatLng(lat.sw, lng.ne),
mw: new google.maps.LatLng(lat.mc, lng.sw),
2010-11-28 15:06:47 +00:00
me: new google.maps.LatLng(lat.mc, lng.ne),
2010-07-24 19:27:39 +00:00
nw: new google.maps.LatLng(lat.ne, lng.sw),
nc: new google.maps.LatLng(lat.ne, lng.mc),
2010-07-24 01:32:08 +00:00
});
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) {
2011-02-22 18:52:26 +00:00
if (key == 'places') {
2011-02-25 10:23:33 +00:00
loadPlaces();
} else if (key == 'selected') {
selectPlace(value);
2011-02-22 18:52:26 +00:00
} else if (key == 'type') {
2010-07-24 01:32:08 +00:00
}
};
2011-02-26 04:22:49 +00:00
that.removePlace = function(id) {
};
2011-02-25 10:23:33 +00:00
that.findPlace = function(name, callback) {
getPlaceByName(name, function(place) {
2010-12-06 17:42:05 +00:00
if (place) {
2011-02-25 10:23:33 +00:00
/*
self.marker = place.marker.add('yellow');
2010-09-03 08:47:40 +00:00
self.polygon && self.polygon.remove();
2010-12-06 17:42:05 +00:00
self.polygon = place.polygon.add();
2011-02-25 10:23:33 +00:00
*/
addPlace(place);
self.resultPlace = place;
selectPlace(place.id);
2010-12-06 17:42:05 +00:00
self.bounds = place.bounds;
2010-09-03 08:47:40 +00:00
self.map.fitBounds(self.bounds);
}
2010-12-06 17:42:05 +00:00
callback(place);
2010-09-03 08:47:40 +00:00
});
};
2011-02-25 10:23:33 +00:00
that.resizeMap = function() {
Ox.print('Ox.Map.resizeMap()');
2010-12-22 18:19:47 +00:00
var center = self.map.getCenter();
2011-02-25 10:23:33 +00:00
self.options.height = that.$element.height();
self.options.width = that.$element.width();
Ox.print(self.options.width, self.options.height)
self.$map.css({
height: getMapHeight() + 'px',
width: self.options.width + 'px'
});
2010-12-22 18:19:47 +00:00
google.maps.event.trigger(self.map, 'resize');
self.map.setCenter(center);
2011-02-25 10:23:33 +00:00
self.options.zoombar && self.$zoomInput.options({
size: self.options.width
});
2010-12-22 18:19:47 +00:00
}
2011-02-25 10:23:33 +00:00
that.zoomToPlace = function(id) {
Ox.print('zoomToPlace', id)
var place = getPlaceById(id);
self.bounds = place.bounds;
self.map.fitBounds(self.bounds);
};
2010-09-03 08:47:40 +00:00
that.zoom = function(value) {
self.map.setZoom(value);
};
2010-07-24 01:32:08 +00:00
return that;
};
2010-12-06 17:42:45 +00:00
/**
options
2010-07-24 01:32:08 +00:00
height image height (px)
2010-09-03 20:54:40 +00:00
places array of either names (''), points ([0, 0]),
2010-07-24 01:32:08 +00:00
or objects ({name, point, highlight})
2010-09-03 20:54:40 +00:00
type map type ('hybrid', 'roadmap', 'satellite', 'terrain')
2010-07-24 01:32:08 +00:00
width image width (px)
2010-12-06 17:42:45 +00:00
*/
Ox.MapImage = function(options, self) {
2010-07-24 01:32:08 +00:00
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('img', self)
2010-07-24 01:32:08 +00:00
.defaults({
height: 360,
2010-09-03 20:54:40 +00:00
markerColorHighlight: 'yellow',
markerColorNormal: 'blue',
2010-07-24 01:32:08 +00:00
places: [],
2010-09-03 20:54:40 +00:00
type: 'satellite',
2010-07-24 01:32:08 +00:00
width: 640
})
.options(options || {})
$.extend(self, {
markers: {
highlight: [],
normal: []
},
2010-09-03 20:54:40 +00:00
src: 'http://maps.google.com/maps/api/staticmap?sensor=false' +
'&size=' + self.options.width + 'x' + self.options.height +
'&maptype=' + self.options.type
2010-07-24 01:32:08 +00:00
});
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)) {
2010-09-03 20:54:40 +00:00
self.markers.normal.push(place.join(','));
2010-07-24 01:32:08 +00:00
} else {
2010-09-03 20:54:40 +00:00
self.markers[place.highlight ? 'highlight' : 'normal']
.push('point' in place ? place.point.join(',') : place.name)
2010-07-24 01:32:08 +00:00
}
});
$.each(self.markers, function(k, markers) {
if (markers.length) {
2010-09-03 20:54:40 +00:00
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('|')
2010-07-24 01:32:08 +00:00
}
});
} else {
2010-09-03 20:54:40 +00:00
self.src += '&center=0,0&zoom=2'
2010-07-24 01:32:08 +00:00
}
that.attr({
src: self.src
});
self.onChange = function(key, value) {
};
return that;
};
2010-01-07 20:21:07 +00:00
/*
============================================================================
2010-02-02 16:03:11 +00:00
Menus
============================================================================
*/
2010-12-06 17:42:45 +00:00
/**
*/
2010-02-02 16:03:11 +00:00
Ox.MainMenu = function(options, self) {
2010-02-07 15:01:22 +00:00
var self = self || {},
that = new Ox.Bar({}, self)
2010-02-08 09:35:24 +00:00
.defaults({
2010-02-19 10:24:02 +00:00
extras: [],
2010-02-08 09:35:24 +00:00
menus: [],
2010-09-03 20:54:40 +00:00
size: 'medium'
2010-02-08 09:35:24 +00:00
})
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxMainMenu Ox' + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large ... like toolbar
2010-02-08 09:35:24 +00:00
.click(click)
.mousemove(mousemove);
2010-02-07 15:01:22 +00:00
2010-02-08 09:35:24 +00:00
self.focused = false;
self.selected = -1;
that.menus = [];
2010-02-09 05:43:36 +00:00
that.titles = [];
2010-09-03 20:54:40 +00:00
that.layer = $('<div>').addClass('OxLayer');
2010-02-08 09:35:24 +00:00
2010-02-19 10:57:19 +00:00
$.each(self.options.menus, function(position, menu) {
2010-09-03 20:54:40 +00:00
that.titles[position] = $('<div>')
.addClass('OxTitle')
2010-02-08 09:35:24 +00:00
.html(menu.title)
2010-09-03 20:54:40 +00:00
.data('position', position)
2010-02-08 09:35:24 +00:00
.appendTo(that.$element);
that.menus[position] = new Ox.Menu($.extend(menu, {
2010-09-03 08:47:40 +00:00
element: that.titles[position],
mainmenu: that,
size: self.options.size
}))
2010-09-03 20:54:40 +00:00
.bindEvent({
hide: onHideMenu
});
2010-02-08 09:35:24 +00:00
});
2010-02-19 10:57:19 +00:00
if (self.options.extras.length) {
2010-09-03 20:54:40 +00:00
that.extras = $('<div>')
.addClass('OxExtras')
2010-02-19 10:57:19 +00:00
.appendTo(that.$element);
$.each(self.options.extras, function(position, extra) {
2010-02-20 08:29:03 +00:00
extra.css({
2010-09-03 20:54:40 +00:00
float: 'left' // fixme: need class!
2010-02-20 08:29:03 +00:00
}).appendTo(that.extras);
2010-02-19 10:57:19 +00:00
});
}
2010-02-08 09:35:24 +00:00
function click(event) {
var $target = $(event.target),
2010-09-03 20:54:40 +00:00
position = typeof $target.data('position') != 'undefined' ?
$target.data('position') : -1;
2010-02-09 05:43:36 +00:00
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;
2010-09-03 20:54:40 +00:00
that.titles[self.selected].addClass('OxSelected');
2010-02-09 05:43:36 +00:00
that.menus[self.selected].showMenu();
}
2010-02-08 09:35:24 +00:00
}
}
function mousemove(event) {
var $target = $(event.target),
2010-02-09 05:43:36 +00:00
focused,
2010-09-03 20:54:40 +00:00
position = typeof $target.data('position') != 'undefined' ?
$target.data('position') : -1;
2010-02-09 05:43:36 +00:00
if (self.focused && position != self.selected) {
if (position > -1) {
clickTitle(position);
2010-02-09 05:43:36 +00:00
} else {
focused = self.focused;
that.menus[self.selected].hideMenu();
self.focused = focused;
2010-02-08 10:17:00 +00:00
}
2010-02-08 09:35:24 +00:00
}
}
2010-02-09 05:43:36 +00:00
function onHideMenu() {
2010-02-09 12:20:23 +00:00
if (self.selected > -1) {
2010-09-03 20:54:40 +00:00
that.titles[self.selected].removeClass('OxSelected');
2010-02-09 12:20:23 +00:00
self.selected = -1;
}
2010-02-08 09:35:24 +00:00
self.focused = false;
}
self.onChange = function(key, value) {
};
2010-02-19 10:24:02 +00:00
that.addMenuAfter = function(id) {
2010-02-08 10:17:00 +00:00
};
2010-02-19 10:24:02 +00:00
that.addMenuBefore = function(id) {
2010-02-08 10:17:00 +00:00
};
2010-07-07 12:36:12 +00:00
that.checkItem = function(id) {
2010-09-03 20:54:40 +00:00
var ids = id.split('_'),
itemId = ids.pop(),
menuId = ids.join('_');
that.getMenu(menuId).checkItem(itemId);
2010-07-07 12:36:12 +00:00
};
2010-02-10 16:37:26 +00:00
that.disableItem = function(id) {
2010-07-13 22:38:53 +00:00
that.getItem(id).options({
disabled: true
});
2010-02-10 16:37:26 +00:00
};
that.enableItem = function(id) {
2010-07-13 22:38:53 +00:00
that.getItem(id).options({
disabled: false
});
2010-02-10 16:37:26 +00:00
};
2010-02-19 16:13:22 +00:00
that.getItem = function(id) {
2010-09-03 20:54:40 +00:00
var ids = id.split('_'),
2010-07-07 12:36:12 +00:00
item;
if (ids.length == 1) {
$.each(that.menus, function(i, menu) {
item = menu.getItem(id);
return !item;
});
} else {
2010-09-03 20:54:40 +00:00
item = that.getMenu(ids.shift()).getItem(ids.join('_'));
2010-07-07 12:36:12 +00:00
}
2011-01-13 12:43:20 +00:00
//Ox.print('getItem', id, item);
2010-02-19 16:13:22 +00:00
return item;
};
2010-09-03 20:54:40 +00:00
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('_'));
}
2011-01-13 12:43:20 +00:00
//Ox.print('getMenu', id, menu);
2010-09-03 20:54:40 +00:00
return menu;
};
2010-02-08 10:17:00 +00:00
that.removeMenu = function() {
};
2010-02-08 09:35:24 +00:00
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);
}
};
2010-07-07 12:36:12 +00:00
that.uncheckItem = function(id) {
2010-07-13 22:38:53 +00:00
that.getItem(id).options({
checked: false
});
2010-07-07 12:36:12 +00:00
};
2010-02-08 09:35:24 +00:00
return that;
};
2010-02-02 16:03:11 +00:00
2010-12-06 17:42:45 +00:00
/**
options
2010-09-03 08:47:40 +00:00
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
2010-09-03 20:54:40 +00:00
side open to 'bottom' or 'right'
size 'large', 'medium' or 'small'
2010-02-10 15:49:57 +00:00
events:
2010-09-03 08:47:40 +00:00
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
2010-12-06 17:42:45 +00:00
*/
Ox.Menu = function(options, self) {
2011-01-23 04:59:16 +00:00
2010-02-02 16:03:11 +00:00
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
2010-02-04 08:02:23 +00:00
element: null,
2010-09-03 20:54:40 +00:00
id: '',
2010-02-02 16:03:11 +00:00
items: [],
2010-02-08 09:35:24 +00:00
mainmenu: null,
2010-02-02 16:03:11 +00:00
offset: {
left: 0,
top: 0
},
2010-02-05 09:13:03 +00:00
parent: null,
2010-02-04 09:50:45 +00:00
selected: -1,
2010-09-03 20:54:40 +00:00
side: 'bottom',
size: 'medium',
2010-02-02 16:03:11 +00:00
})
2010-09-03 08:47:40 +00:00
.options(options || {})
2010-02-03 12:12:21 +00:00
.addClass(
2010-09-03 20:54:40 +00:00
'OxMenu Ox' + Ox.toTitleCase(self.options.side) +
' Ox' + Ox.toTitleCase(self.options.size)
2010-02-07 15:01:22 +00:00
)
.click(click)
.mouseenter(mouseenter)
.mouseleave(mouseleave)
2010-09-03 08:47:40 +00:00
.mousemove(mousemove)
2010-12-26 20:16:35 +00:00
.bindEvent({
2010-09-03 08:47:40 +00:00
key_up: selectPreviousItem,
key_down: selectNextItem,
key_left: selectSupermenu,
key_right: selectSubmenu,
key_escape: hideMenu,
key_enter: clickSelectedItem
}),
2010-09-03 20:54:40 +00:00
itemHeight = self.options.size == 'small' ? 12 : (self.options.size == 'medium' ? 16 : 20),
2010-02-18 14:24:17 +00:00
// menuHeight,
2010-02-07 15:01:22 +00:00
scrollSpeed = 1,
2010-02-05 14:59:24 +00:00
$item; // fixme: used?
2010-09-03 08:47:40 +00:00
// fixme: attach all private vars to self
2010-02-02 16:03:11 +00:00
// construct
2010-02-04 08:02:23 +00:00
that.items = [];
that.submenus = {};
2010-02-02 16:03:11 +00:00
that.$scrollbars = [];
2010-09-03 20:54:40 +00:00
that.$top = $('<div>')
.addClass('OxTop')
2010-02-02 16:03:11 +00:00
.appendTo(that.$element);
2010-09-03 20:54:40 +00:00
that.$scrollbars.up = constructScrollbar('up')
2010-02-02 16:03:11 +00:00
.appendTo(that.$element);
2010-09-03 20:54:40 +00:00
that.$container = $('<div>')
.addClass('OxContainer')
2010-02-02 16:03:11 +00:00
.appendTo(that.$element);
2010-09-03 20:54:40 +00:00
that.$content = $('<table>')
.addClass('OxContent')
2010-02-02 16:03:11 +00:00
.appendTo(that.$container);
2010-02-18 07:27:32 +00:00
constructItems(self.options.items);
2010-09-03 20:54:40 +00:00
that.$scrollbars.down = constructScrollbar('down')
2010-02-02 16:03:11 +00:00
.appendTo(that.$element);
2010-09-03 20:54:40 +00:00
that.$bottom = $('<div>')
.addClass('OxBottom')
2010-02-02 16:03:11 +00:00
.appendTo(that.$element);
2010-09-03 20:54:40 +00:00
that.$layer = $('<div>')
2010-12-26 20:16:35 +00:00
.addClass(self.options.mainmenu ? 'OxMainMenuLayer' : 'OxMenuLayer')
2010-09-03 08:47:40 +00:00
.click(click);
2010-02-02 16:03:11 +00:00
2010-02-05 09:13:03 +00:00
function click(event) {
2010-02-07 15:01:22 +00:00
var item,
2010-02-07 15:12:14 +00:00
position,
2010-09-03 08:47:40 +00:00
$target = $(event.target),
$parent = $target.parent();
// necessary for highlight
2010-09-03 20:54:40 +00:00
if ($parent.is('.OxCell')) {
2010-09-03 08:47:40 +00:00
$target = $parent;
$parent = $target.parent();
}
2010-09-03 20:54:40 +00:00
if ($target.is('.OxCell')) {
position = $parent.data('position');
2010-02-07 15:12:14 +00:00
item = that.items[position];
2010-09-03 20:54:40 +00:00
if (!item.options('disabled')) {
2010-02-07 15:12:14 +00:00
clickItem(position);
2010-02-09 12:20:23 +00:00
} else {
that.hideMenu();
2010-02-07 15:01:22 +00:00
}
2010-02-09 12:20:23 +00:00
} else {
that.hideMenu();
2010-02-05 09:13:03 +00:00
}
}
2010-02-07 15:12:14 +00:00
function clickItem(position) {
2010-09-03 08:47:40 +00:00
var item = that.items[position],
menu = self.options.mainmenu || self.options.parent || that,
2010-09-03 08:47:40 +00:00
toggled;
2010-09-04 14:28:40 +00:00
that.hideMenu();
2010-09-03 20:54:40 +00:00
if (!item.options('items').length) {
if (that.options('parent')) {
that.options('parent').hideMenu().triggerEvent('click');
2010-02-08 09:35:24 +00:00
}
2010-09-03 20:54:40 +00:00
if (item.options('checked') !== null) {
if (item.options('group')) {
2011-01-13 12:43:20 +00:00
//Ox.print('has group', item.options('group'))
2010-09-03 20:54:40 +00:00
toggled = self.optionGroups[item.options('group')].toggle(position);
2011-01-13 12:43:20 +00:00
//Ox.print('toggled', toggled)
2010-09-03 08:47:40 +00:00
if (toggled.length) {
$.each(toggled, function(i, pos) {
that.items[pos].toggleChecked();
});
2011-01-13 12:43:20 +00:00
//Ox.print('--triggering change event--');
menu.triggerEvent('change', {
2010-09-03 20:54:40 +00:00
id: item.options('group'),
checked: $.map(self.optionGroups[item.options('group')].checked(), function(v, i) {
2010-09-03 08:47:40 +00:00
return {
2010-09-03 20:54:40 +00:00
id: that.items[v].options('id'),
title: Ox.stripTags(that.items[v].options('title')[0])
};
2010-09-03 08:47:40 +00:00
})
});
}
} else {
item.toggleChecked();
menu.triggerEvent('change', {
2010-09-03 20:54:40 +00:00
checked: item.options('checked'),
id: item.options('id'),
title: Ox.stripTags(item.options('title')[0])
2010-09-03 08:47:40 +00:00
});
}
2010-02-09 12:20:23 +00:00
} else {
menu.triggerEvent('click', {
2010-09-03 20:54:40 +00:00
id: item.options('id'),
title: Ox.stripTags(item.options('title')[0])
2010-02-18 14:24:17 +00:00
});
2010-02-07 15:12:14 +00:00
}
2010-09-03 20:54:40 +00:00
if (item.options('title').length == 2) {
2010-02-07 15:12:14 +00:00
item.toggleTitle();
}
}
}
function clickSelectedItem() {
2010-02-09 05:43:36 +00:00
// called on key.enter
2010-02-04 09:50:45 +00:00
if (self.options.selected > -1) {
2010-02-07 15:12:14 +00:00
clickItem(self.options.selected);
2010-02-05 05:20:13 +00:00
} else {
that.hideMenu();
2010-02-04 09:50:45 +00:00
}
}
2010-02-18 07:27:32 +00:00
function constructItems(items) {
2010-09-03 08:47:40 +00:00
2010-02-18 07:27:32 +00:00
that.$content.empty();
2010-02-18 14:24:17 +00:00
scrollMenuUp();
2010-09-03 08:47:40 +00:00
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],
2010-09-03 20:54:40 +00:00
'min' in item ? item.min : 1,
'max' in item ? item.max : 1
2010-09-03 08:47:40 +00:00
);
}
});
items = Ox.flatten(items);
that.items = [];
2010-02-18 07:27:32 +00:00
$.each(items, function(i, item) {
var position;
2011-01-24 04:08:19 +00:00
if ('id' in item) {
2010-02-18 07:27:32 +00:00
that.items.push(new Ox.MenuItem($.extend(item, {
menu: that,
position: position = that.items.length
2010-09-03 20:54:40 +00:00
})).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
2010-02-18 07:27:32 +00:00
if (item.items) {
that.submenus[item.id] = new Ox.Menu({
element: that.items[position],
2010-09-03 20:54:40 +00:00
id: Ox.toCamelCase(self.options.id + '/' + item.id),
2010-02-18 07:27:32 +00:00
items: item.items,
mainmenu: self.options.mainmenu,
offset: {
left: 0,
top: -4
},
parent: that,
2010-09-03 20:54:40 +00:00
side: 'right',
2010-02-18 07:27:32 +00:00
size: self.options.size,
});
}
} else {
that.$content.append(constructSpace());
that.$content.append(constructLine());
that.$content.append(constructSpace());
}
});
2010-09-03 08:47:40 +00:00
2010-09-03 20:54:40 +00:00
if (!that.is(':hidden')) {
2010-02-18 14:24:17 +00:00
that.hideMenu();
that.showMenu();
}
2010-09-03 08:47:40 +00:00
2010-02-18 07:27:32 +00:00
}
2010-02-02 16:03:11 +00:00
function constructLine() {
2010-09-03 20:54:40 +00:00
return $('<tr>').append(
$('<td>', {
'class': 'OxLine',
2010-02-04 08:02:23 +00:00
colspan: 5
2010-02-03 12:12:21 +00:00
})
);
2010-02-02 16:03:11 +00:00
}
function constructScrollbar(direction) {
2010-02-05 14:59:24 +00:00
var interval,
2010-09-03 20:54:40 +00:00
speed = direction == 'up' ? -1 : 1;
return $('<div/>', {
'class': 'OxScrollbar Ox' + Ox.toTitleCase(direction),
html: oxui.symbols['triangle_' + direction],
2010-02-03 12:12:21 +00:00
click: function() { // fixme: do we need to listen to click event?
return false;
},
mousedown: function() {
scrollSpeed = 2;
return false;
},
mouseenter: function() {
2010-09-03 20:54:40 +00:00
var $otherScrollbar = that.$scrollbars[direction == 'up' ? 'down' : 'up'];
$(this).addClass('OxSelected');
if ($otherScrollbar.is(':hidden')) {
2010-02-03 12:12:21 +00:00
$otherScrollbar.show();
that.$container.height(that.$container.height() - itemHeight);
2010-09-03 20:54:40 +00:00
if (direction == 'down') {
2010-02-03 12:12:21 +00:00
that.$content.css({
2010-09-03 20:54:40 +00:00
top: -itemHeight + 'px'
2010-02-03 12:12:21 +00:00
});
}
}
2010-02-05 14:59:24 +00:00
scrollMenu(speed);
2010-02-03 12:12:21 +00:00
interval = setInterval(function() {
2010-02-05 14:59:24 +00:00
scrollMenu(speed);
2010-02-03 12:12:21 +00:00
}, 100);
},
mouseleave: function() {
2010-09-03 20:54:40 +00:00
$(this).removeClass('OxSelected');
2010-02-03 12:12:21 +00:00
clearInterval(interval);
},
mouseup: function() {
scrollSpeed = 1;
return false;
}
});
2010-02-02 16:03:11 +00:00
}
function constructSpace() {
2010-09-03 20:54:40 +00:00
return $('<tr>').append(
$('<td>', {
'class': 'OxSpace',
2010-02-04 08:02:23 +00:00
colspan: 5
2010-02-03 12:12:21 +00:00
})
);
2010-02-02 16:03:11 +00:00
}
function getElement(id) {
2010-02-05 09:13:03 +00:00
// fixme: needed?
2010-09-03 20:54:40 +00:00
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;
2010-02-02 16:03:11 +00:00
}
function hideMenu() {
// called on key_escape
that.hideMenu();
}
2010-02-05 05:20:13 +00:00
function isFirstEnabledItem() {
var ret = true;
$.each(that.items, function(i, item) {
2010-09-03 20:54:40 +00:00
if (i < self.options.selected && !item.options('disabled')) {
2010-02-05 05:20:13 +00:00
return ret = false;
}
});
return ret;
}
function isLastEnabledItem() {
var ret = true;
$.each(that.items, function(i, item) {
2010-09-03 20:54:40 +00:00
if (i > self.options.selected && !item.options('disabled')) {
2010-02-05 05:20:13 +00:00
return ret = false;
}
});
return ret;
}
2010-02-07 15:01:22 +00:00
function mouseenter() {
that.gainFocus();
}
function mouseleave() {
2010-09-03 20:54:40 +00:00
if (self.options.selected > -1 && !that.items[self.options.selected].options('items').length) {
2010-02-07 15:01:22 +00:00
selectItem(-1);
}
}
function mousemove(event) {
var item,
position,
$target = $(event.target);
2010-09-03 08:47:40 +00:00
$parent = $target.parent();
2010-09-03 20:54:40 +00:00
if ($parent.is('.OxCell')) {
2010-09-03 08:47:40 +00:00
$target = $parent;
$parent = $target.parent();
}
2010-09-03 20:54:40 +00:00
if ($target.is('.OxCell')) {
position = $parent.data('position');
2010-02-07 15:01:22 +00:00
item = that.items[position];
2010-09-03 20:54:40 +00:00
if (!item.options('disabled') && position != self.options.selected) {
2010-02-07 15:01:22 +00:00
selectItem(position);
}
} else {
mouseleave();
}
}
2010-02-03 12:12:21 +00:00
function scrollMenu(speed) {
var containerHeight = that.$container.height(),
contentHeight = that.$content.height(),
2010-09-03 20:54:40 +00:00
top = parseInt(that.$content.css('top')) || 0,
2010-02-03 12:12:21 +00:00
min = containerHeight - contentHeight + itemHeight,
max = 0;
top += speed * scrollSpeed * -itemHeight;
if (top <= min) {
top = min;
2010-09-03 20:54:40 +00:00
that.$scrollbars.down.hide().trigger('mouseleave');
2010-02-05 14:59:24 +00:00
that.$container.height(containerHeight + itemHeight);
2010-09-03 20:54:40 +00:00
that.items[that.items.length - 1].trigger('mouseover');
2010-02-03 12:12:21 +00:00
} else if (top >= max - itemHeight) {
top = max;
2010-09-03 20:54:40 +00:00
that.$scrollbars.up.hide().trigger('mouseleave');
2010-02-05 14:59:24 +00:00
that.$container.height(containerHeight + itemHeight);
2010-09-03 20:54:40 +00:00
that.items[0].trigger('mouseover');
2010-02-03 12:12:21 +00:00
}
that.$content.css({
2010-09-03 20:54:40 +00:00
top: top + 'px'
2010-02-03 12:12:21 +00:00
});
2010-02-02 16:03:11 +00:00
}
2010-02-05 17:37:15 +00:00
function scrollMenuUp() {
2010-09-03 20:54:40 +00:00
if (that.$scrollbars.up.is(':visible')) {
2010-02-05 17:37:15 +00:00
that.$content.css({
2010-09-03 20:54:40 +00:00
top: '0px'
2010-02-05 17:37:15 +00:00
});
that.$scrollbars.up.hide();
2010-09-03 20:54:40 +00:00
if (that.$scrollbars.down.is(':hidden')) {
2010-02-05 17:37:15 +00:00
that.$scrollbars.down.show();
} else {
that.$container.height(that.$container.height() + itemHeight);
}
}
}
2010-02-07 15:01:22 +00:00
function selectItem(position) {
var item;
if (self.options.selected > -1) {
2010-09-03 20:54:40 +00:00
//Ox.print('s.o.s', self.options.selected, that.items)
2010-02-18 14:24:17 +00:00
item = that.items[self.options.selected]
2010-09-03 20:54:40 +00:00
item.removeClass('OxSelected');
/* disabled
that.triggerEvent('deselect', {
id: item.options('id'),
title: Ox.stripTags(item.options('title')[0])
2010-09-03 08:47:40 +00:00
});
2010-09-03 20:54:40 +00:00
*/
2010-02-07 15:01:22 +00:00
}
if (position > -1) {
item = that.items[position];
$.each(that.submenus, function(id, submenu) {
2010-09-03 20:54:40 +00:00
if (!submenu.is(':hidden')) {
2010-02-07 15:01:22 +00:00
submenu.hideMenu();
return false;
}
});
2010-09-03 20:54:40 +00:00
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])
2010-09-03 08:47:40 +00:00
});
2010-09-03 20:54:40 +00:00
*/
2010-02-07 15:01:22 +00:00
}
2010-02-18 09:11:47 +00:00
self.options.selected = position;
2010-02-07 15:01:22 +00:00
}
2010-02-02 16:03:11 +00:00
function selectNextItem() {
2010-02-05 15:26:23 +00:00
var offset,
selected = self.options.selected;
2011-01-13 12:43:20 +00:00
//Ox.print('sNI', selected)
2010-02-05 05:20:13 +00:00
if (!isLastEnabledItem()) {
2010-02-05 17:37:15 +00:00
if (selected == -1) {
scrollMenuUp();
} else {
2010-09-03 20:54:40 +00:00
that.items[selected].removeClass('OxSelected');
2010-02-04 09:50:45 +00:00
}
2010-02-05 05:20:13 +00:00
do {
selected++;
2010-09-03 20:54:40 +00:00
} while (that.items[selected].options('disabled'))
2010-02-07 15:01:22 +00:00
selectItem(selected);
2010-02-05 15:26:23 +00:00
offset = that.items[selected].offset().top + itemHeight -
that.$container.offset().top - that.$container.height();
if (offset > 0) {
2010-09-03 20:54:40 +00:00
if (that.$scrollbars.up.is(':hidden')) {
2010-02-05 15:26:23 +00:00
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({
2010-09-03 20:54:40 +00:00
top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px'
2010-02-05 15:26:23 +00:00
});
}
}
}
2010-02-02 16:03:11 +00:00
}
function selectPreviousItem() {
2010-02-05 15:26:23 +00:00
var offset,
selected = self.options.selected;
2011-01-13 12:43:20 +00:00
//Ox.print('sPI', selected)
2010-02-05 17:37:15 +00:00
if (selected > - 1) {
if (!isFirstEnabledItem()) {
2010-09-03 20:54:40 +00:00
that.items[selected].removeClass('OxSelected');
2010-02-05 17:37:15 +00:00
do {
selected--;
2010-09-03 20:54:40 +00:00
} while (that.items[selected].options('disabled'))
2010-02-07 15:01:22 +00:00
selectItem(selected);
2010-02-05 15:26:23 +00:00
}
2010-02-05 17:37:15 +00:00
offset = that.items[selected].offset().top - that.$container.offset().top;
if (offset < 0) {
2010-09-03 20:54:40 +00:00
if (that.$scrollbars.down.is(':hidden')) {
2010-02-05 17:37:15 +00:00
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({
2010-09-03 20:54:40 +00:00
top: ((parseInt(that.$content.css('top')) || 0) - offset) + 'px'
2010-02-05 17:37:15 +00:00
});
2010-02-05 15:26:23 +00:00
}
}
2010-02-02 16:03:11 +00:00
}
2010-02-05 09:13:03 +00:00
function selectSubmenu() {
2011-01-13 12:43:20 +00:00
//Ox.print('selectSubmenu', self.options.selected)
2010-02-05 17:37:15 +00:00
if (self.options.selected > -1) {
2010-09-03 20:54:40 +00:00
var submenu = that.submenus[that.items[self.options.selected].options('id')];
2011-01-13 12:43:20 +00:00
//Ox.print('submenu', submenu, that.submenus);
2010-02-05 17:37:15 +00:00
if (submenu && submenu.hasEnabledItems()) {
submenu.gainFocus();
submenu.selectFirstItem();
2010-02-08 09:35:24 +00:00
} else if (self.options.mainmenu) {
self.options.mainmenu.selectNextMenu();
}
} else if (self.options.mainmenu) {
self.options.mainmenu.selectNextMenu();
2010-02-05 09:13:03 +00:00
}
}
function selectSupermenu() {
2011-01-13 12:43:20 +00:00
//Ox.print('selectSupermenu', self.options.selected)
2010-02-05 09:13:03 +00:00
if (self.options.parent) {
2010-09-03 20:54:40 +00:00
self.options.selected > -1 && that.items[self.options.selected].trigger('mouseleave');
scrollMenuUp();
2010-02-05 09:13:03 +00:00
self.options.parent.gainFocus();
2010-02-08 09:35:24 +00:00
} else if (self.options.mainmenu) {
self.options.mainmenu.selectPreviousMenu();
2010-02-05 09:13:03 +00:00
}
}
self.onChange = function(key, value) {
2010-09-03 20:54:40 +00:00
if (key == 'items') {
2010-02-18 07:27:32 +00:00
constructItems(value);
2010-09-03 20:54:40 +00:00
} else if (key == 'selected') {
that.$content.find('.OxSelected').removeClass('OxSelected');
2010-02-18 09:11:47 +00:00
selectItem(value);
2010-02-18 07:27:32 +00:00
}
2010-02-05 09:13:03 +00:00
}
2010-02-20 03:42:03 +00:00
that.addItem = function(item, position) {
};
2010-02-19 16:13:22 +00:00
that.addItemAfter = function(item, id) {
2010-02-08 10:17:00 +00:00
};
2010-02-19 16:13:22 +00:00
that.addItemBefore = function(item, id) {
2010-02-08 10:17:00 +00:00
};
2010-07-07 12:36:12 +00:00
that.checkItem = function(id) {
2010-09-03 20:54:40 +00:00
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
});
}
2010-07-07 12:36:12 +00:00
};
2010-02-10 16:37:26 +00:00
that.getItem = function(id) {
2010-09-08 16:35:34 +00:00
//Ox.print('id', id)
2010-09-03 20:54:40 +00:00
var ids = id.split('_'),
2010-07-07 12:36:12 +00:00
item;
if (ids.length == 1) {
$.each(that.items, function(i, v) {
2010-09-03 20:54:40 +00:00
if (v.options('id') == id) {
2010-07-07 12:36:12 +00:00
item = v;
return false;
}
});
if (!item) {
$.each(that.submenus, function(k, submenu) {
item = submenu.getItem(id);
return !item;
});
2010-02-10 20:02:58 +00:00
}
2010-07-07 12:36:12 +00:00
} else {
2010-09-03 20:54:40 +00:00
item = that.submenus[ids.shift()].getItem(ids.join('_'));
2010-07-07 12:36:12 +00:00
}
2010-02-19 16:13:22 +00:00
return item;
2010-02-10 16:37:26 +00:00
};
2010-09-03 20:54:40 +00:00
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('_'));
}
2011-01-13 12:43:20 +00:00
//Ox.print('getSubmenu', id, submenu);
2010-09-03 20:54:40 +00:00
return submenu;
}
2010-02-05 09:13:03 +00:00
that.hasEnabledItems = function() {
var ret = false;
$.each(that.items, function(i, item) {
2010-09-03 20:54:40 +00:00
if (!item.options('disabled')) {
2010-02-05 09:13:03 +00:00
return ret = true;
}
});
return ret;
};
2010-02-02 16:03:11 +00:00
that.hideMenu = function() {
2010-09-03 20:54:40 +00:00
if (that.is(':hidden')) {
return;
}
2010-02-04 08:02:23 +00:00
$.each(that.submenus, function(i, submenu) {
2010-09-03 20:54:40 +00:00
if (submenu.is(':visible')) {
2010-02-04 08:02:23 +00:00
submenu.hideMenu();
2010-02-03 12:12:21 +00:00
return false;
}
});
2010-02-08 09:39:15 +00:00
selectItem(-1);
2010-02-05 17:37:15 +00:00
scrollMenuUp();
2010-09-03 20:54:40 +00:00
that.$scrollbars.up.is(':visible') && that.$scrollbars.up.hide();
that.$scrollbars.down.is(':visible') && that.$scrollbars.down.hide();
2010-02-05 15:42:52 +00:00
if (self.options.parent) {
2010-09-03 20:54:40 +00:00
//self.options.element.removeClass('OxSelected');
self.options.parent.options({
selected: -1
});
2010-02-05 15:42:52 +00:00
}
2010-02-09 05:43:36 +00:00
that.hide()
.loseFocus()
2010-09-03 20:54:40 +00:00
.triggerEvent('hide');
2010-02-09 05:43:36 +00:00
that.$layer.hide();
2010-02-08 09:35:24 +00:00
return that;
2010-02-05 09:13:03 +00:00
};
2010-02-08 10:17:00 +00:00
that.removeItem = function() {
};
2010-02-05 09:13:03 +00:00
that.selectFirstItem = function() {
selectNextItem();
2010-02-02 16:03:11 +00:00
};
that.showMenu = function() {
2010-09-03 20:54:40 +00:00
if (!that.is(':hidden')) {
return;
}
2010-02-09 05:43:36 +00:00
if (!self.options.parent && !that.$layer.parent().length) {
that.$layer.appendTo($body);
}
2010-09-03 08:47:40 +00:00
that.parent().length == 0 && that.appendTo($body);
2010-02-18 14:42:53 +00:00
that.css({
2010-09-03 20:54:40 +00:00
left: '-1000px',
top: '-1000px',
2010-02-18 14:42:53 +00:00
}).show();
2010-02-04 08:02:23 +00:00
var offset = self.options.element.offset(),
width = self.options.element.outerWidth(),
height = self.options.element.outerHeight(),
2010-09-03 20:54:40 +00:00
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),
2010-02-18 14:42:53 +00:00
menuHeight = that.$content.outerHeight(); // fixme: why is outerHeight 0 when hidden?
2010-06-29 13:10:13 +00:00
menuMaxHeight = Math.floor($window.height() - top - 16);
2010-02-05 17:37:15 +00:00
if (self.options.parent) {
2010-02-18 14:24:17 +00:00
if (menuHeight > menuMaxHeight) {
2010-09-03 08:47:40 +00:00
top = Ox.limit(top - menuHeight + menuMaxHeight, self.options.parent.offset().top, top);
2010-02-18 14:24:17 +00:00
menuMaxHeight = Math.floor($window.height() - top - 16);
2010-02-05 17:37:15 +00:00
}
}
2010-02-18 14:42:53 +00:00
that.css({
2010-09-03 20:54:40 +00:00
left: left + 'px',
top: top + 'px'
2010-02-18 14:42:53 +00:00
});
2010-02-18 14:24:17 +00:00
if (menuHeight > menuMaxHeight) {
that.$container.height(menuMaxHeight - itemHeight - 8); // margin
2010-02-03 12:12:21 +00:00
that.$scrollbars.down.show();
2010-02-18 14:24:17 +00:00
} else {
that.$container.height(menuHeight);
2010-02-03 12:12:21 +00:00
}
2010-09-03 20:54:40 +00:00
if (!self.options.parent) {
2010-09-03 08:47:40 +00:00
that.gainFocus();
}
that.$layer.show();
2010-02-08 09:35:24 +00:00
return that;
2010-09-03 20:54:40 +00:00
//that.triggerEvent('show');
2010-02-02 16:03:11 +00:00
};
2010-02-03 12:12:21 +00:00
that.toggleMenu = function() {
2010-09-03 20:54:40 +00:00
that.is(':hidden') ? that.showMenu() : that.hideMenu();
2010-02-02 16:03:11 +00:00
};
return that;
2010-02-03 12:12:21 +00:00
};
2010-02-02 16:03:11 +00:00
Ox.MenuItem = function(options, self) {
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('tr', self)
2010-02-02 16:03:11 +00:00
.defaults({
2010-09-03 08:47:40 +00:00
bind: [], // fixme: what's this?
2010-02-04 08:02:23 +00:00
checked: null,
2010-02-02 16:03:11 +00:00
disabled: false,
2010-09-03 20:54:40 +00:00
group: '',
icon: '',
id: '',
2010-02-05 05:20:13 +00:00
items: [],
2010-09-03 20:54:40 +00:00
keyboard: '',
2010-02-03 12:12:21 +00:00
menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
2010-02-04 09:50:45 +00:00
position: 0,
2010-02-03 12:12:21 +00:00
title: [],
})
.options($.extend(options, {
keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
2011-02-22 18:52:26 +00:00
title: Ox.toArray(options.title || self.defaults.title)
2010-02-03 12:12:21 +00:00
}))
2010-09-03 20:54:40 +00:00
.addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : ''))
2011-01-24 04:08:19 +00:00
/*
2010-02-03 12:12:21 +00:00
.attr({
2010-09-03 20:54:40 +00:00
id: Ox.toCamelCase(self.options.menu.options('id') + '/' + self.options.id)
2010-02-03 12:12:21 +00:00
})
2011-01-24 04:08:19 +00:00
*/
2010-09-03 20:54:40 +00:00
.data('group', self.options.group); // fixme: why?
2010-02-03 12:12:21 +00:00
2010-09-03 08:47:40 +00:00
if (self.options.group && self.options.checked === null) {
self.options.checked = false;
}
2010-02-03 12:12:21 +00:00
// construct
that.append(
2010-09-03 20:54:40 +00:00
that.$status = $('<td>', {
'class': 'OxCell OxStatus',
html: self.options.checked ? oxui.symbols.check : ''
2010-02-03 12:12:21 +00:00
})
)
.append(
2010-09-03 20:54:40 +00:00
that.$icon = $('<td>', {
'class': 'OxCell OxIcon'
2010-02-02 16:03:11 +00:00
})
2010-02-03 12:12:21 +00:00
.append(self.options.icon ?
2010-09-03 20:54:40 +00:00
$('<img>', {
2010-02-04 08:02:23 +00:00
src: self.options.icon
2010-02-03 12:12:21 +00:00
}) : null
)
)
.append(
2010-09-03 20:54:40 +00:00
that.$title = $('<td>', {
'class': 'OxCell OxTitle',
2010-02-03 12:12:21 +00:00
html: self.options.title[0]
})
)
.append(
2010-09-03 20:54:40 +00:00
$('<td>', {
'class': 'OxCell OxModifiers',
2010-02-03 12:12:21 +00:00
html: $.map(self.options.keyboard.modifiers, function(modifier) {
2010-02-08 09:45:48 +00:00
return oxui.symbols[modifier];
2010-09-03 20:54:40 +00:00
}).join('')
2010-02-03 12:12:21 +00:00
})
)
.append(
2010-09-03 20:54:40 +00:00
$('<td>', {
'class': 'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key'),
2010-02-05 05:20:13 +00:00
html: self.options.items.length ? oxui.symbols.triangle_right :
2010-02-08 09:45:48 +00:00
oxui.symbols[self.options.keyboard.key] ||
self.options.keyboard.key.toUpperCase()
2010-02-03 12:12:21 +00:00
})
);
2010-02-03 12:12:21 +00:00
function parseKeyboard(str) {
2010-09-03 20:54:40 +00:00
var modifiers = str.split(' '),
2010-02-03 12:12:21 +00:00
key = modifiers.pop();
return {
modifiers: modifiers,
key: key
2010-07-05 17:01:42 +00:00
};
2010-02-03 12:12:21 +00:00
}
self.onChange = function(key, value) {
2010-09-03 20:54:40 +00:00
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') {
2011-02-22 18:52:26 +00:00
self.options.title = Ox.toArray(value);
2010-07-24 01:32:08 +00:00
that.$title.html(self.options.title[0]);
2010-02-03 12:12:21 +00:00
}
}
2010-02-10 16:37:26 +00:00
that.toggle = function() {
// toggle id and title
};
2010-02-03 12:12:21 +00:00
that.toggleChecked = function() {
2010-09-03 08:47:40 +00:00
that.options({
checked: !self.options.checked
});
2010-02-03 12:12:21 +00:00
};
that.toggleDisabled = function() {
};
that.toggleTitle = function() {
2011-01-13 12:43:20 +00:00
//Ox.print('s.o.t', self.options.title)
2010-02-03 12:12:21 +00:00
that.options({
2010-07-24 01:32:08 +00:00
title: self.options.title.reverse()
2010-02-10 16:37:26 +00:00
});
2010-02-03 12:12:21 +00:00
};
2010-02-02 16:03:11 +00:00
return that;
2010-02-03 12:12:21 +00:00
};
2010-02-02 16:03:11 +00:00
/*
============================================================================
2010-01-07 20:21:07 +00:00
Panels
============================================================================
*/
2010-12-06 17:42:45 +00:00
/**
2010-01-07 20:21:07 +00:00
*/
Ox.CollapsePanel = function(options, self) {
var self = self || {},
that = new Ox.Panel({}, self)
.defaults({
collapsed: false,
2011-01-14 09:54:28 +00:00
extras: [],
2010-11-28 15:06:47 +00:00
size: 16,
2010-09-03 20:54:40 +00:00
title: ''
2010-01-07 20:21:07 +00:00
})
.options(options)
2010-09-03 20:54:40 +00:00
.addClass('OxCollapsePanel'),
2011-01-14 09:54:28 +00:00
// fixme: the following should all be self.foo
2010-09-03 20:54:40 +00:00
title = self.options.collapsed ?
[{id: 'expand', title: 'expand'}, {id: 'collapse', title: 'collapse'}] :
[{id: 'collapse', title: 'collapse'}, {id: 'expand', title: 'expand'}],
2010-01-07 20:21:07 +00:00
$titlebar = new Ox.Bar({
2010-09-03 20:54:40 +00:00
orientation: 'horizontal',
2010-01-07 20:21:07 +00:00
size: self.options.size,
})
.dblclick(dblclickTitlebar)
.appendTo(that),
$switch = new Ox.Button({
2010-09-03 20:54:40 +00:00
style: 'symbol',
title: title,
type: 'image',
2010-01-07 20:21:07 +00:00
})
.click(toggleCollapsed)
.appendTo($titlebar),
$title = new Ox.Element()
2010-09-03 20:54:40 +00:00
.addClass('OxTitle')
2010-01-07 20:21:07 +00:00
.html(self.options.title/*.toUpperCase()*/)
2011-01-14 09:54:28 +00:00
.appendTo($titlebar),
$extras;
if (self.options.extras.length) {
$extras = new Ox.Element()
.addClass('OxExtras')
2010-01-07 20:21:07 +00:00
.appendTo($titlebar);
2011-01-14 09:54:28 +00:00
self.options.extras.forEach(function($extra) {
$extra.appendTo($extras);
});
2010-12-23 17:05:46 +00:00
}
2010-01-07 20:21:07 +00:00
that.$content = new Ox.Element()
2010-09-03 20:54:40 +00:00
.addClass('OxContent')
2010-01-07 20:21:07 +00:00
.appendTo(that);
// fixme: doesn't work, content still empty
// need to hide it if collapsed
if (self.options.collapsed) {
that.$content.css({
2010-09-03 20:54:40 +00:00
marginTop: -that.$content.height() + 'px'
2010-01-07 20:21:07 +00:00
});
2010-12-23 17:05:46 +00:00
}
2010-01-07 20:21:07 +00:00
function dblclickTitlebar(e) {
2010-09-03 20:54:40 +00:00
if (!$(e.target).hasClass('OxButton')) {
$switch.trigger('click');
2010-01-07 20:21:07 +00:00
}
}
function toggleCollapsed() {
2010-09-03 20:54:40 +00:00
var marginTop;
self.options.collapsed = !self.options.collapsed;
marginTop = self.options.collapsed ? -that.$content.height() : 0;
2010-01-07 20:21:07 +00:00
that.$content.animate({
2010-09-03 20:54:40 +00:00
marginTop: marginTop + 'px'
2010-01-07 20:21:07 +00:00
}, 200);
that.triggerEvent('toggle', {
collapsed: self.options.collapsed
});
2010-01-07 20:21:07 +00:00
}
2010-09-03 20:54:40 +00:00
self.onChange = function(key, value) {
if (key == 'collapsed') {
} else if (key == 'title') {
2010-01-07 20:21:07 +00:00
$title.html(self.options.title);
}
};
2011-01-15 06:09:22 +00:00
that.update = function() { // fixme: used anywhere?
2011-01-14 14:10:19 +00:00
self.options.collapsed && that.$content.css({
marginTop: -that.$content.height()
});
};
2010-01-07 20:21:07 +00:00
return that;
};
2010-12-06 17:42:45 +00:00
/**
2010-01-07 20:21:07 +00:00
*/
Ox.Panel = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
2010-09-03 20:54:40 +00:00
.addClass('OxPanel');
2010-01-07 20:21:07 +00:00
return that;
};
2011-03-03 23:16:49 +00:00
Ox.SplitPanel_ = function(options, self) {
2011-03-03 21:02:35 +00:00
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
elements: [],
orientation: 'horizontal'
})
.options(options)
.addClass(
2011-03-03 23:16:49 +00:00
'OxSplitPanel_ Ox' + Ox.toTitleCase(self.options.orientation)
2011-03-03 21:02:35 +00:00
);
Ox.extend(self, {
$separators: [],
clientXY: self.options.orientation == 'horizontal' ? 'clientX' : 'clientY',
dimensions: Ox.UI.DIMENSIONS[self.options.orientation],
edges: Ox.UI.EDGES[self.options.orientation]
});
self.options.elements.forEach(function(element, i) {
self.options.elements[i] = Ox.extend({
collapsible: false,
collapsed: false,
resizable: false,
resize: [],
size: 'auto'
}, element);
});
self.autoPercent = (100 - self.options.elements.reduce(function(val, element) {
return val + (Ox.endsWith(element.size, '%') ? parseFloat(element.size) : 0);
}, 0)) / self.options.elements.filter(function(element) {
return element.size == 'auto';
}).length + '%';
self.options.elements.forEach(function(element, i) {
var flex, index = i == 0 ? 0 : 1;
if (Ox.isNumber(element.size)) {
element.element.css(self.dimensions[0], element.size + 'px');
} else {
flex = (
element.size == 'auto' ? self.autoPercent : element.size
).replace('%', '');
element.element.css({
boxFlex: flex,
MozBoxFlex: flex,
WebkitBoxFlex: flex
});
}
element.element.appendTo(that);
if (element.collapsible || element.resizable) {
self.$separators.push(
Ox.Element()
.addClass('OxSeparator')
.bindEvent({
anyclick: function() {
that.toggle(i);
},
dragstart: function(event, e) {
dragstart(i, e);
},
drag: function(event, e) {
drag(i, e);
},
dragend: function(event, e) {
dragend(i, e);
},
})
.append($('<div>').addClass('OxSpace'))
.append($('<div>').addClass('OxLine'))
.append($('<div>').addClass('OxSpace'))
['insert' + (index ? 'Before' : 'After')](element.element)
);
}
});
function dragstart(pos, e) {
var element = self.options.elements[pos],
size = element.element[self.dimensions[0]]();
if (element.resizable && !element.collapsed) {
Ox.isString(element.size) && setPixels(pos);
self.drag = {
resize: Ox.isNumber(element.size) ?
element.resize : element.resize.map(function(v) {
return getPixelsByPercent(v);
}),
size: size,
startPos: e[self.clientXY],
startSize: size
};
Ox.print('self.drag', self.drag)
}
}
function drag(pos, e) {
var data = {},
element = self.options.elements[pos],
index = pos == 0 ? 0 : 1;
if (element.resizable && !element.collapsed) {
var d = e[self.clientXY] - self.drag.startPos,
size = Ox.limit(
self.drag.startSize + d * (index ? -1 : 1),
self.drag.resize[0],
self.drag.resize[element.resize.length - 1]
);
self.drag.resize.forEach(function(v) {
if (size >= v - 8 && size <= v + 8) {
size = v;
return false;
}
});
if (size != self.drag.size) {
self.drag.size = size;
data[self.dimensions[0]] = size;
element.element
.css(self.dimensions[0], size + 'px')
.triggerEvent('resize', data);
triggerEvents('resize', pos);
}
}
}
function dragend(pos, e) {
var data = {},
element = self.options.elements[pos];
if (element.resizable && !element.collapsed) {
Ox.isString(element.size) && setPercent(pos);
data[self.dimensions[0]] = self.drag.size
element.element.triggerEvent('resizeend', data);
triggerEvents('resizeend', pos);
}
}
function getPixelsByPercent(percent) {
return Math.round((
that[self.dimensions[0]]() -
self.options.elements.reduce(function(val, element) {
return val + Ox.isNumber(element.size) ?
element.element[self.dimensions[0]]() : 0;
}, 0) - self.$separators.length
) * parseFloat(percent) / 100);
}
function setPercent(pos) {
var element = self.options.elements[pos],
2011-03-03 21:26:17 +00:00
flex = (
element.size == 'auto' ? self.autoPercent : element.size
).replace('%', ''),
2011-03-03 21:02:35 +00:00
css = {
boxFlex: flex,
MozBoxFlex: flex,
WebkitBoxFlex: flex
};
css[self.dimensions[0]] = '';
2011-03-03 21:26:17 +00:00
Ox.print('setPercent', css)
2011-03-03 21:02:35 +00:00
element.element.css(css);
}
function setPixels(pos) {
var css = {
boxFlex: '',
MozBoxFlex: '',
WebkitBoxFlex: ''
},
element = self.options.elements[pos];
css[self.dimensions[0]] = element.element[self.dimensions[0]]() + 'px';
element.element.css(css);
}
function triggerEvents(event, pos) {
var data = {};
self.options.elements.forEach(function(element, i) {
if (i != pos && Ox.isString(element.size)) {
data[self.dimensions[0]] = element.element[self.dimensions[0]]();
element.element.triggerEvent(event, data);
}
});
}
2011-03-03 21:26:17 +00:00
that.replaceElement = function(pos, element) {
var $element = self.options.elements[pos].element;
$element.replaceWith(self.options.elements[pos].element = element);
if (Ox.isNumber(self.options.elements[pos].size)) {
setPixels(pos);
} else {
setPercent(pos);
}
return that;
};
that.resizeElement = function(pos, size) {
var element = self.options.elements[pos];
element.size = size;
if (Ox.isNumber(element.size)) {
setPixels(pos);
} else {
setPercent(pos);
}
}
2011-03-03 21:02:35 +00:00
that.toggle = function(pos) {
var css = {},
element = self.options.elements[pos],
flex,
index = pos == 0 ? 0 : 1,
size = element.element[self.dimensions[0]]();
if (element.collapsible) {
element.collapsed = !element.collapsed;
if (Ox.isString(element.size) && element.collapsed) {
setPixels(pos);
}
css['margin' + Ox.toTitleCase(self.edges[0][index])] =
element.collapsed ? -size : 0;
Ox.print('css', css);
that.animate(css, 250, function() {
if (Ox.isString(element.size) && !element.collapsed) {
setPercent(pos);
}
element.element.triggerEvent('toggle', {collapsed: element.collapsed});
triggerEvents('resize', pos);
});
}
}
return that;
};
2010-12-06 17:42:45 +00:00
/**
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
2010-01-07 20:21:07 +00:00
*/
2011-03-03 23:16:49 +00:00
Ox.SplitPanel = function(options, self) {
2010-01-07 20:21:07 +00:00
var self = self || {},
that = new Ox.Element({}, self) // fixme: Container
2010-01-07 20:21:07 +00:00
.defaults({
elements: [],
2010-09-03 20:54:40 +00:00
orientation: 'horizontal'
2010-01-07 20:21:07 +00:00
})
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxSplitPanel');
2010-07-17 08:46:27 +00:00
$.extend(self, {
dimensions: oxui.getDimensions(self.options.orientation),
edges: oxui.getEdges(self.options.orientation),
2010-09-17 16:37:11 +00:00
length: self.options.elements.length,
resizebarElements: [],
2010-09-17 16:37:11 +00:00
$resizebars: []
2010-07-17 08:46:27 +00:00
});
2010-07-06 18:28:58 +00:00
// create elements
2010-07-06 18:28:58 +00:00
that.$elements = [];
self.options.elements.forEach(function(v, i) {
2010-07-17 08:46:27 +00:00
self.options.elements[i] = $.extend({
collapsible: false,
collapsed: false,
resizable: false,
resize: [],
2010-09-03 20:54:40 +00:00
size: 'auto'
2010-07-17 08:46:27 +00:00
}, v);
2010-07-06 18:28:58 +00:00
that.$elements[i] = v.element
.css(self.edges[2], (parseInt(v.element.css(self.edges[2])) || 0) + 'px')
.css(self.edges[3], (parseInt(v.element.css(self.edges[3])) || 0) + 'px');
//alert(v.element.css(self.edges[3]))
2010-07-06 18:28:58 +00:00
});
// create resizebars
self.options.elements.forEach(function(v, i) {
2010-01-07 20:21:07 +00:00
//that.append(element)
2010-09-03 20:54:40 +00:00
//Ox.print('V: ', v, that.$elements[i])
var index = i == 0 ? 0 : 1;
2010-09-03 08:47:40 +00:00
that.$elements[i].appendTo(that.$element); // fixme: that.$content
2010-07-06 18:28:58 +00:00
if (v.collapsible || v.resizable) {
2011-01-13 12:43:20 +00:00
//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]);
2010-07-06 18:28:58 +00:00
}
2010-01-07 20:21:07 +00:00
});
2010-07-06 18:28:58 +00:00
self.options.elements.forEach(function(v, i) {
v.collapsed && that.css(
self.edges[i == 0 ? 0 : 1], -self.options.elements[i].size + 'px'
);
});
setSizes(true);
2010-09-17 16:37:11 +00:00
2010-07-07 07:18:38 +00:00
function getPositionById(id) {
var position = -1;
$.each(self.options.elements, function(i, element) {
2010-09-03 20:54:40 +00:00
if (element.element.options('id') == id) {
2010-07-17 08:46:27 +00:00
position = i;
2010-07-07 07:18:38 +00:00
return false;
}
});
2011-01-13 12:43:20 +00:00
//Ox.print('getPositionById', id, position);
2010-07-07 07:18:38 +00:00
return position;
}
2010-07-06 18:28:58 +00:00
function getSize(element) {
return element.size + (element.collapsible || element.resizable);
//return (element.size + (element.collapsible || element.resizable)) * !element.collapsed;
}
function getVisibleSize(element) {
return getSize(element) * !element.collapsed;
2010-07-06 18:28:58 +00:00
}
function setSizes(init) {
self.options.elements.forEach(function(v, i) {
// fixme: maybe we can add a conditional here, since init
// is about elements that are collapsed splitpanels
var edges = [
(init && parseInt(that.$elements[i].css(self.edges[0]))) || 0,
(init && parseInt(that.$elements[i].css(self.edges[1]))) || 0
];
2010-09-03 20:54:40 +00:00
v.size != 'auto' && that.$elements[i].css(self.dimensions[0], v.size + 'px');
2010-07-07 07:18:38 +00:00
if (i == 0) {
that.$elements[i].css(
self.edges[0], edges[0] + 'px'
);
2010-11-28 15:06:47 +00:00
that.$elements[i].css(
2010-09-03 20:54:40 +00:00
self.edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + 'px'
2010-07-07 07:18:38 +00:00
);
} else if (i == 1) {
2010-11-28 15:06:47 +00:00
that.$elements[i].css(
self.edges[0], self.options.elements[0].size == 'auto' ? 'auto' :
edges[0] + getSize(self.options.elements[0]) + 'px'
2010-07-07 07:18:38 +00:00
);
2010-09-03 20:54:40 +00:00
(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'
2010-07-07 07:18:38 +00:00
);
} else {
that.$elements[i].css(
self.edges[0], (self.options.elements[1].size == 'auto' || v.size == 'auto') ? 'auto' :
(getVisibleSize(self.options.elements[0]) + getVisibleSize(self.options.elements[1])) + 'px'
2010-11-28 15:06:47 +00:00
);
that.$elements[i].css(
self.edges[1], edges[1] + 'px'
2010-07-07 07:18:38 +00:00
);
}
2010-09-17 16:37:11 +00:00
if (v.collapsible || v.resizable) {
self.$resizebars[i == 0 ? 0 : 1].css(self.edges[i == 0 ? 0 : 1], v.size);
}
2010-07-07 07:18:38 +00:00
});
}
2010-07-17 08:46:27 +00:00
that.isCollapsed = function(id) {
2010-11-28 15:06:47 +00:00
var pos = Ox.isNumber(id) ? id : getPositionById(id);
return self.options.elements[pos].collapsed;
2010-07-17 08:46:27 +00:00
};
2011-01-03 12:01:38 +00:00
that.replace = function(id, element) { // fixme: should be replaceElement
2010-09-03 20:54:40 +00:00
// one can pass pos instead of id
var pos = Ox.isNumber(id) ? id : getPositionById(id);
2011-01-13 12:43:20 +00:00
//Ox.print('replace', pos, element);
//Ox.print('element', self.options.elements[pos].element, element)
2010-09-03 20:54:40 +00:00
that.$elements[pos] = element
.css(self.edges[2], (parseInt(element.css(self.edges[2])) || 0) + 'px')
.css(self.edges[3], (parseInt(element.css(self.edges[3])) || 0) + 'px');
//alert(element.css(self.edges[3]))
self.options.elements[pos].element.replaceWith(element.$element.$element || element.$element);
self.options.elements[pos].element = element;
2010-09-03 20:54:40 +00:00
setSizes();
self.$resizebars.forEach(function($resizebar, i) {
$resizebar.options({
elements: [
that.$elements[self.resizebarElements[i][0]],
that.$elements[self.resizebarElements[i][1]]
]
});
});
2011-01-13 12:43:20 +00:00
//Ox.print(self.options.elements[pos])
2010-12-29 06:50:40 +00:00
return that;
2010-09-03 20:54:40 +00:00
};
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]]
]
});
});
2010-12-29 06:50:40 +00:00
return that;
}
2010-11-25 10:05:50 +00:00
that.size = function(id, size) {
2010-07-07 07:18:38 +00:00
// one can pass pos instead of id
var pos = Ox.isNumber(id) ? id : getPositionById(id),
element = self.options.elements[pos];
2010-11-28 15:06:47 +00:00
if (arguments.length == 1) {
return element.element[self.dimensions[0]]() * !that.isCollapsed(pos);
2010-11-28 15:06:47 +00:00
} else {
element.size = size;
2010-11-28 15:06:47 +00:00
setSizes();
return that;
}
2010-07-07 07:18:38 +00:00
};
2010-07-17 08:46:27 +00:00
that.toggle = function(id) {
// one can pass pos instead of id
var pos = Ox.isNumber(id) ? id : getPositionById(id),
2010-11-28 15:06:47 +00:00
element = self.options.elements[pos],
value = parseInt(that.css(self.edges[pos == 0 ? 0 : 1])) +
element.element[self.dimensions[0]]() *
(element.collapsed ? 1 : -1),
2010-07-17 08:46:27 +00:00
animate = {};
2010-11-28 15:06:47 +00:00
animate[self.edges[pos == 0 ? 0 : 1]] = value;
that.animate(animate, 200, function() { // fixme: 250?
2011-01-03 14:00:28 +00:00
element.collapsed = !element.collapsed;
element.element.triggerEvent('toggle', {
'collapsed': element.collapsed
});
element = self.options.elements[pos == 0 ? 1 : pos - 1];
element.element.triggerEvent(
2010-11-28 15:06:47 +00:00
'resize',
2011-01-03 14:00:28 +00:00
element.element[self.dimensions[0]]()
2010-11-28 15:06:47 +00:00
);
2010-07-17 08:46:27 +00:00
});
};
that.updateSize = function(pos, size) {
// this is called from resizebar
var pos = pos == 0 ? 0 : self.options.elements.length - 1; // fixme: silly that 0 or 1 is passed, and not pos
self.options.elements[pos].size = size;
}
2010-01-07 20:21:07 +00:00
return that;
2010-07-06 18:28:58 +00:00
2010-01-07 20:21:07 +00:00
};
2010-02-10 16:37:26 +00:00
Ox.TabPanel = function(options, self) {
};
2010-02-20 08:29:03 +00:00
/*
============================================================================
Requests
============================================================================
*/
2010-01-27 12:30:00 +00:00
2010-12-06 17:42:45 +00:00
/**
2010-02-20 08:29:03 +00:00
*/
Ox.LoadingIcon = function(options, self) {
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('img', self)
2010-02-20 08:29:03 +00:00
.defaults({
2010-09-03 20:54:40 +00:00
size: 'medium'
2010-02-20 08:29:03 +00:00
})
.options(options || {})
.attr({
2010-09-03 20:54:40 +00:00
src: oxui.path + '/png/ox.ui.' + Ox.theme() + '/loading.png' // fixme: oxui.themePath needed?
2010-02-20 08:29:03 +00:00
})
.addClass(
2010-09-03 20:54:40 +00:00
'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size)
2010-02-20 08:29:03 +00:00
);
self.deg = 0;
2010-07-01 23:51:08 +00:00
self.interval = 0;
self.isRunning = false;
function clear() {
clearInterval(self.interval);
self.deg = 0;
self.interval = 0;
update();
}
2010-02-20 08:29:03 +00:00
function update() {
that.css({
2010-09-03 20:54:40 +00:00
MozTransform: 'rotate(' + self.deg + 'deg)',
WebkitTransform: 'rotate(' + self.deg + 'deg)'
2010-02-20 08:29:03 +00:00
});
}
that.start = function() {
2010-07-01 23:51:08 +00:00
self.isRunning = true;
clear();
that.animate({
opacity: 1
}, 250);
self.interval = setInterval(function() {
self.deg = (self.deg + 30) % 360;
update();
}, 83);
2010-09-03 08:47:40 +00:00
return that;
2010-02-20 08:29:03 +00:00
};
that.stop = function() {
2010-07-01 23:51:08 +00:00
that.animate({
opacity: 0
}, 250, function() {
self.isRunning && clear();
2010-07-01 23:51:08 +00:00
self.isRunning = false;
});
2010-09-03 08:47:40 +00:00
return that;
2010-02-20 08:29:03 +00:00
}
return that;
}
2010-12-06 17:42:45 +00:00
/**
2010-02-20 08:29:03 +00:00
Ox.Progressbar
*/
2010-01-27 12:30:00 +00:00
2010-09-17 22:10:07 +00:00
/*
============================================================================
Video
============================================================================
*/
Ox.AnnotationPanel = function(options, self) {
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
id: '',
2011-02-03 22:58:31 +00:00
items: [],
title: '',
type: 'text',
width: 0
})
.options(options || {});
self.selected = -1;
that.$element = new Ox.CollapsePanel({
collapsed: false,
2011-02-03 22:58:31 +00:00
extras: [
new Ox.Button({
id: 'add',
style: 'symbol',
title: 'Add',
type: 'image'
2011-02-11 14:44:32 +00:00
}).bindEvent({
click: function(event, data) {
that.triggerEvent('add', {value: ''});
}
2011-02-03 22:58:31 +00:00
})
],
size: 16,
title: self.options.title
})
2011-02-03 22:58:31 +00:00
.addClass('OxAnnotationPanel')
.bindEvent({
toggle: togglePanel
});
2011-02-03 22:58:31 +00:00
that.$content = that.$element.$content;
self.$annotations = new Ox.List({
construct: function(data) {
return new Ox.Element('div')
2011-02-09 17:56:35 +00:00
.addClass('OxAnnotation OxEditable OxTarget')
.html(Ox.parseHTML(data.value));
},
items: $.map(self.options.items, function(v, i) {
return {
2011-02-09 17:56:35 +00:00
id: v.id || i + '',
value: v.value
};
}),
unique: 'id'
})
.bindEvent({
2011-02-09 17:56:35 +00:00
open: function(event, data) {
2011-02-11 14:44:32 +00:00
if (data.ids.length == 1) {
var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
self.$annotations.editItem(pos);
}
},
'delete': function(event, data) {
that.triggerEvent('delete', data);
2011-02-09 17:56:35 +00:00
},
select: selectAnnotation,
submit: updateAnnotation
})
.appendTo(that.$content);
/*
2011-02-03 22:58:31 +00:00
self.$annotations = new Ox.Element('div')
.appendTo(that.$content);
self.$annotation = [];
2011-02-03 22:58:31 +00:00
self.options.items.forEach(function(item, i) {
self.$annotation[i] = new Ox.Element('div')
2011-02-03 22:58:31 +00:00
.addClass('OxAnnotation')
.html(item.value.replace(/\n/g, '<br/>'))
.click(function() {
clickAnnotation(i);
})
2011-02-03 22:58:31 +00:00
.appendTo(self.$annotations);
});
*/
2011-02-09 17:56:35 +00:00
function selectAnnotation(event, data) {
var item = Ox.getObjectById(self.options.items, data.ids[0]);
that.triggerEvent('select', {
2011-02-22 10:02:28 +00:00
'in': item['in'],
2011-02-22 09:34:43 +00:00
'out': item.out,
'layer': self.options.id
2011-02-09 17:56:35 +00:00
});
}
function updateAnnotation(event, data) {
var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value;
that.triggerEvent('submit', item);
}
function togglePanel() {
}
2011-02-11 14:44:32 +00:00
that.addItem = function(item) {
var pos = 0;
self.options.items.splice(pos, 0, item);
self.$annotations.addItems(pos, [item]);
self.$annotations.editItem(pos);
}
that.removeItems = function(ids) {
self.$annotations.removeItems(ids);
}
that.deselectItems = function() {
if(self.$annotations.options('selected'))
self.$annotations.options('selected',[]);
}
return that;
};
2011-01-17 21:12:17 +00:00
Ox.BlockTimeline = function(options, self) {
2010-09-17 22:10:07 +00:00
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)
.bindEvent({
drag: function(event, e) {
mousedown(e);
}
});
2010-09-17 22:10:07 +00:00
$.extend(self, {
$images: [],
$lines: [],
$markerPoint: [],
2011-02-09 17:56:35 +00:00
$selection: [],
2010-09-17 22:10:07 +00:00
$subtitles: [],
hasSubtitles: self.options.subtitles.length,
height: 16,
lines: Math.ceil(self.options.duration / self.options.width),
margin: 8
});
2010-11-25 10:05:50 +00:00
that.css({
2010-11-28 15:06:47 +00:00
width: (self.options.width + self.margin) + 'px',
2010-11-25 10:05:50 +00:00
height: ((self.height + self.margin) * self.lines + 4) + 'px'
});
2010-09-17 22:10:07 +00:00
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) {
2011-02-09 17:56:35 +00:00
// fixme: get URLs once, not once for every line
2010-09-17 22:10:07 +00:00
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>')
.addClass('OxTimelineSmallSubtitles')
2010-09-17 22:10:07 +00:00
.attr({
src: self.subtitlesImageURL
})
.css({
marginLeft: (-i * self.options.width) + 'px'
})
.appendTo(self.$lines[i].$element);
}
2011-02-09 17:56:35 +00:00
if (self.options.points[0] != self.options.points[1]) {
addSelection[i];
}
}
function addSelection(i) {
self.selectionImageURL = getSelectionImageURL();
self.$selection[i] && self.$selection[i].remove();
self.$selection[i] = $('<img>')
.addClass('OxTimelineSmallSelection')
.attr({
src: self.selectionImageURL
})
.css({
marginLeft: (-i * self.options.width) + 'px'
})
.appendTo(self.$lines[i].$element);
2010-09-17 22:10:07 +00:00
}
function getPosition(e) {
//FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
2010-09-17 22:16:42 +00:00
return (e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left);
2010-09-17 22:10:07 +00:00
}
2011-02-09 17:56:35 +00:00
function getSelectionImageURL() {
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,
points = $.map(self.options.points, function(v, i) {
return Math.round(v) + i;
}),
top = 0,
bottom = 18;
$.each(Ox.range(points[0], points[1]), function(i, x) {
$.each(Ox.range(top, bottom), function(i, y) {
var color = (y == top || y == bottom - 1) ? [255, 255, 255, 255] : [255, 255, 255, 64],
index = x * 4 + y * 4 * width;
data[index] = color[0];
data[index + 1] = color[1];
data[index + 2] = color[2];
data[index + 3] = color[3]
});
});
context.putImageData(imageData, 0, 0);
return canvas.toDataURL();
}
2010-09-17 22:10:07 +00:00
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) {
2011-02-09 17:56:35 +00:00
//var color = self.options.matches.indexOf(i) > -1 ? [255, 255, 0] : [255, 255, 255]
2011-02-22 10:02:28 +00:00
var inPoint = Math.round(v['in']),
2011-02-09 17:56:35 +00:00
outPoint = Math.round(v.out) + 1,
lines = v.value.split('\n').length,
bottom = 15,
top = bottom - lines - 2;
$.each(Ox.range(inPoint, outPoint), function(i, x) {
$.each(Ox.range(top, bottom), function(i, y) {
var color = (y == top || y == bottom - 1) ? [0, 0, 0] : [255, 255, 255],
index = x * 4 + y * 4 * width;
2010-09-17 22:10:07 +00:00
data[index] = color[0];
data[index + 1] = color[1];
data[index + 2] = color[2];
2011-02-09 17:56:35 +00:00
data[index + 3] = 128
2010-09-17 22:10:07 +00:00
});
});
});
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);
2011-01-13 12:43:20 +00:00
//Ox.print('loaded, images', loaded, images, $img[0])
2010-09-17 22:10:07 +00:00
if (++loaded == images) {
2011-01-13 12:43:20 +00:00
//Ox.print('callback', canvas.toDataURL().length)
2010-09-17 22:10:07 +00:00
callback(canvas.toDataURL());
}
});
});
}
function mousedown(e) {
var $target = $(e.target);
if (
$target.hasClass('OxTimelineSmallImage') ||
2011-02-09 17:56:35 +00:00
$target.hasClass('OxTimelineSmallSubtitles') ||
$target.hasClass('OxTimelineSmallSelection')
) {
2010-09-17 22:10:07 +00:00
self.options.position = getPosition(e);
setPosition();
that.triggerEvent('change', {
position: self.options.position
});
}
e.preventDefault();
}
function mouseleave(e) {
self.$tooltip && self.$tooltip.hide();
2010-09-17 22:10:07 +00:00
}
function mousemove(e) {
var $target = $(e.target),
position,
subtitle;
if (
$target.hasClass('OxTimelineSmallImage') ||
2011-02-09 17:56:35 +00:00
$target.hasClass('OxTimelineSmallSubtitles') ||
$target.hasClass('OxTimelineSmallSelection')
) {
2010-09-17 22:10:07 +00:00
position = getPosition(e),
subtitle = getSubtitle(position);
self.$tooltip = new Ox.Tooltip({
title: subtitle ?
'<span class=\'OxBright\'>' +
2011-01-28 09:31:12 +00:00
Ox.highlight(subtitle.value, self.options.find).replace(/\n/g, '<br/>') + '</span><br/>' +
2010-09-17 22:10:07 +00:00
Ox.formatDuration(subtitle['in'], 3) + ' - ' + Ox.formatDuration(subtitle['out'], 3) :
Ox.formatDuration(position, 3)
})
.css({
textAlign: 'center'
})
.show(e.clientX, e.clientY);
} else {
self.$tooltip && self.$tooltip.hide();
2010-09-17 22:10:07 +00:00
}
}
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) {
2011-02-09 17:56:35 +00:00
var position = Math.round(self.options.points[i]);
2010-09-17 22:10:07 +00:00
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);
2010-11-28 15:06:47 +00:00
that.css({
width: (self.options.width + self.margin) + 'px',
height: ((self.height + self.margin) * self.lines + 4) + 'px'
});
2010-09-17 22:10:07 +00:00
$.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);
}
2011-02-09 17:56:35 +00:00
function updateSelection() {
self.$lines.forEach(function($line, i) {
addSelection(i);
});
}
2010-09-17 22:10:07 +00:00
self.onChange = function(key, value) {
2011-01-13 12:43:20 +00:00
//Ox.print('onChange:', key, value)
2010-09-17 22:10:07 +00:00
if (key == 'points') {
2011-01-13 12:43:20 +00:00
//Ox.print('key', key, 'value', value)
2010-09-17 22:10:07 +00:00
setMarkerPoint(0);
setMarkerPoint(1);
2011-02-09 17:56:35 +00:00
updateSelection()
2010-09-17 22:10:07 +00:00
} else if (key == 'position') {
setPosition();
} else if (key == 'width') {
setWidth();
}
};
return that;
};
Ox.Flipbook = function(options, self) {
var self = self || {},
frame = $('<img>').css({
'position': 'absolute',
'width': '100%',
'height': 'auto'
})
.hide(),
icon = $('<img>').css({
'position': 'absolute',
'width': '100%',
'height': 'auto'
}),
frames = {},
timestamp = $('<div>').css({
'position': 'absolute',
'text-align': 'center',
'width': '100%',
})
.hide(),
that = new Ox.Element('div', self)
.defaults({
frames: {},
duration: 0,
icon: '',
})
.options(options || {})
.append(icon)
.append(frame)
.append(timestamp)
.mouseover(function() {
frame.show();
timestamp.show();
icon.hide();
})
.mousemove(function(event) {
var position = getPosition(event),
image = getFrame(position),
2011-02-25 20:13:31 +00:00
frameHeight = image?image.height:that.height();
frame.attr('src', image.src);
timestamp.html(Ox.formatDuration(position, 'short'));
var height = (that.height() - frameHeight)/2;
frame.css({'top': height + 'px'});
timestamp.css({'top': (frameHeight + height) + 'px'});
})
.mouseout(function() {
frame.hide();
timestamp.hide();
icon.show();
})
.mousedown(function(event) {
that.triggerEvent('click', {
'position': getPosition(event)
});
});
function getPosition(event) {
var position = Math.floor(event.clientX - that.offset().left);
position = (position / that.width()) * self.options.duration;
return position;
}
function getFrame(position) {
var frame;
$.each(frames, function(i, img) {
if(!frame || i <= position)
frame = img;
});
return frame;
}
function cacheFrames() {
$.each(self.options.frames, function(i, src) {
frames[i] = new Image();
frames[i].onload = function() {
frameHeight = frames[i].height / frames[i].width * that.width();
}
frames[i].src = src;
});
}
self.onChange = function(key, value) {
if (key == 'frames') {
cacheFrames();
} else if (key == 'icon') {
icon.attr('src', value);
}
}
if(options.icon)
icon.attr('src', options.icon);
cacheFrames();
return that;
};
2011-01-17 21:12:17 +00:00
Ox.LargeTimeline = function(options, self) {
2010-09-17 22:10:07 +00:00
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
cuts: [],
duration: 0,
find: '',
matches: [],
points: [0, 0],
position: 0,
2011-01-17 21:12:17 +00:00
style: 'default',
2010-09-17 22:10:07 +00:00
subtitles: [],
videoId: '',
width: 0
})
.options(options || {})
2011-01-17 21:12:17 +00:00
.addClass('OxTimelineLarge')
.mouseleave(mouseleave)
.mousemove(mousemove)
.bindEvent({
anyclick: click,
dragstart: dragstart,
drag: drag
});
2011-01-03 12:01:38 +00:00
2010-09-17 22:10:07 +00:00
$.extend(self, {
2011-01-17 21:12:17 +00:00
$cuts: [],
$markerPoint: [],
$subtitles: [],
$tiles: {},
$tooltip: new Ox.Tooltip(),
center: parseInt(self.options.width / 2),
element: that.$element[0],
fps: 25,
height: 64,
tileWidth: 1500
2010-09-17 22:10:07 +00:00
});
2011-01-17 21:12:17 +00:00
self.tiles = self.options.duration * self.fps / self.tileWidth;
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
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' : ''))
2010-09-17 22:10:07 +00:00
.css({
2011-01-17 21:12:17 +00:00
left: (v['in'] * self.fps) + 'px',
2011-02-09 17:56:35 +00:00
width: (((v['out'] - v['in']) * self.fps) - 2) + 'px'
2010-09-17 22:10:07 +00:00
})
2011-01-28 09:31:12 +00:00
.html(Ox.highlight(v.value, self.options.find))
2011-01-17 21:12:17 +00:00
.appendTo(self.$timeline)
});
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
$.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)
});
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self.$markerPosition = $('<img>')
.addClass('OxMarkerPosition')
.attr({
src: '/static/oxjs/build/png/ox.ui/videoMarkerPlay.png'
2010-09-17 22:10:07 +00:00
})
2011-01-17 21:12:17 +00:00
.appendTo(that.$element);
setMarker();
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
$.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);
2010-09-17 22:10:07 +00:00
});
2011-01-17 21:12:17 +00:00
setWidth();
setPosition();
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
function click(event, e) {
self.options.position = Ox.limit(
2011-02-09 17:56:35 +00:00
self.options.position + (e.clientX - that.$element.offset().left - self.center - 1) / self.fps,
2011-01-17 21:12:17 +00:00
0, self.options.duration
);
setPosition();
triggerChangeEvent();
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function dragstart(event, e) {
self.drag = {x: e.clientX};
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function drag(event, e) {
self.options.position = Ox.limit(
self.options.position + (self.drag.x - e.clientX) / self.fps,
0, self.options.duration
);
self.drag.x = e.clientX;
setPosition();
triggerChangeEvent();
}
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'
2010-09-17 22:10:07 +00:00
});
2011-01-17 21:12:17 +00:00
}
function setMarker() {
self.$markerPosition.css({
left: (self.center - 4) + 'px',
2010-09-17 22:10:07 +00:00
});
}
2011-01-17 21:12:17 +00:00
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 triggerChangeEvent() {
that.triggerEvent('change', {
position: self.options.position
});
}
function updateTooltip() {
2011-02-09 17:56:35 +00:00
// fixme: duplicated, need getPosition(e)
var position = self.options.position + (self.clientX - that.offset().left - self.center - 1) / self.fps;
2011-01-17 21:12:17 +00:00
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({
duration: 0,
find: '',
matches: [],
points: [0, 0],
position: 0,
subtitles: [],
videoId: '',
width: 0
})
.options(options || {})
.addClass('OxTimelineSmall')
.mousedown(mousedown)
.mouseleave(mouseleave)
.mousemove(mousemove)
.bindEvent({
drag: function(event, e) {
mousedown(e);
}
});
$.extend(self, {
$images: [],
$markerPoint: [],
$subtitles: [],
hasSubtitles: self.options.subtitles.length,
height: 16,
margin: 8
});
that.css({
width: (self.options.width + self.margin) + 'px',
height: (self.height + self.margin) + 'px'
});
self.$line = $('<img>')
.addClass('OxTimelineSmallImage')
2011-01-17 21:12:17 +00:00
.attr({
src: '/' + self.options.videoId + '/timelines/timeline.16.0.png'
})
.css({
position: 'absolute',
left: '4px',
top: '4px',
2011-01-17 21:12:17 +00:00
width: self.options.width,
height: '16px'
})
.appendTo(that.$element);
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 getPosition(e) {
return e.offsetX / self.options.width * self.options.duration;
2011-01-17 21:12:17 +00:00
}
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 mousedown(e) {
var $target = $(e.target);
if (
$target.hasClass('OxTimelineSmallImage') ||
$target.hasClass('OxTimelineSmallSubtitles')
) {
self.options.position = getPosition(e);
setPosition();
that.triggerEvent('change', {
position: self.options.position
});
}
e.preventDefault();
}
function mouseleave(e) {
self.$tooltip && self.$tooltip.hide();
}
function mousemove(e) {
var $target = $(e.target),
position,
subtitle;
if (
$target.hasClass('OxTimelineSmallImage') ||
$target.hasClass('OxTimelineSmallSubtitles')
) {
position = getPosition(e),
subtitle = getSubtitle(position);
self.$tooltip = new Ox.Tooltip({
title: subtitle ?
'<span class=\'OxBright\'>' +
2011-01-28 09:31:12 +00:00
Ox.highlight(subtitle.value, self.options.find).replace(/\n/g, '<br/>') + '</span><br/>' +
2011-01-17 21:12:17 +00:00
Ox.formatDuration(subtitle['in'], 3) + ' - ' + Ox.formatDuration(subtitle['out'], 3) :
Ox.formatDuration(position, 3)
})
.css({
textAlign: 'center'
})
.show(e.clientX, e.clientY);
} else {
self.$tooltip && self.$tooltip.hide();
}
}
function setMarker() {
self.$markerPosition
.css({
left: parseInt(
self.options.position / self.options.duration * self.options.width
) + 'px',
top: '2px',
2011-01-17 21:12:17 +00:00
});
}
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.$line.css({
width: self.options.width + 'px',
2011-01-17 21:12:17 +00:00
});
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;
};
2011-01-17 21:12:17 +00:00
Ox.VideoEditor = function(options, self) {
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
annotationsSize: 0,
2011-01-17 21:12:17 +00:00
cuts: [],
duration: 0,
find: '',
frameURL: function() {},
2011-02-08 00:00:01 +00:00
fps: 25, // fixme: doesn't get handed through to player
2011-01-17 21:12:17 +00:00
height: 0,
largeTimeline: true,
layers: [],
2011-01-17 21:12:17 +00:00
matches: [],
points: [0, 0],
position: 0,
posterFrame: 0,
showAnnotations: false,
2011-01-17 21:12:17 +00:00
subtitles: [],
videoHeight: 0,
videoId: '',
videoWidth: 0,
videoSize: 'small',
videoURL: '',
width: 0
})
.options(options || {})
.mousedown(function() {
that.gainFocus();
})
.bindEvent({
key_shift_0: function() {
movePositionBy(-self.options.position);
},
key_alt_left: function() {
},
key_alt_right: function() {
},
key_alt_shift_left: function() {
},
key_alt_shift_right: function() {
},
key_backslash: function() {
select('subtitle');
},
key_closebracket: function() {
movePositionTo('subtitle', 1);
},
key_comma: function() {
movePositionTo('cut', -1);
},
key_dot: function() {
movePositionTo('cut', 1);
},
key_down: function() {
movePositionBy(self.sizes.timeline[0].width);
},
key_i: function() {
setPoint('in');
},
key_left: function() {
movePositionBy(-1);
},
key_m: toggleMute,
key_o: function() {
setPoint('out');
},
key_openbracket: function() {
movePositionTo('subtitle', -1);
},
key_p: playInToOut,
key_right: function() {
movePositionBy(1);
},
key_s: function() {
// toggleSize
},
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_i: function() {
goToPoint('in');
},
key_shift_o: function() {
goToPoint('out');
},
key_shift_right: function() {
movePositionBy(0.04);
//movePositionBy(60);
},
key_shift_up: function() {
movePositionBy(-self.options.duration);
},
key_slash: function() {
select('cut');
},
key_space: togglePlay,
key_up: function() {
movePositionBy(-self.sizes.timeline[0].width);
}
});
2011-01-17 21:12:17 +00:00
$.extend(self, {
$player: [],
$timeline: [],
controlsHeight: 16,
margin: 8,
videoRatio: self.options.videoWidth / self.options.videoHeight
});
self.$editor = new Ox.Element()
.addClass('OxVideoEditor')
.click(function() {
that.gainFocus()
});
2011-01-17 21:12:17 +00:00
self.sizes = getSizes();
$.each(['play', 'in', 'out'], function(i, type) {
self.$player[i] = new Ox.VideoEditorPlayer({
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'
})
.bindEvent(type == 'play' ? {
playing: changePlayer,
togglesize: toggleSize
} : {
2011-01-17 21:12:17 +00:00
change: function() {
goToPoint(type);
},
set: function() {
setPoint(type);
}
})
.appendTo(self.$editor);
2011-01-17 21:12:17 +00:00
});
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(self.$editor);
2011-01-17 21:12:17 +00:00
self.$timeline[1] = new Ox.BlockTimeline({
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(self.$editor);
self.$annotations = new Ox.Element()
2011-02-03 22:58:31 +00:00
.css({
overflowY: 'auto'
})
.bindEvent({
resize: resizeAnnotations,
toggle: toggleAnnotations
});
self.$annotationPanel = [];
2011-01-17 21:12:17 +00:00
self.options.layers.forEach(function(layer, i) {
2011-02-03 22:58:31 +00:00
self.$annotationPanel[i] = new Ox.AnnotationPanel(
$.extend({
width: self.options.annotationSize
2011-02-09 17:56:35 +00:00
}, layer)
2011-02-03 22:58:31 +00:00
)
.bindEvent({
2011-02-11 14:44:32 +00:00
add: function(event, data) {
data.layer = layer.id;
2011-02-22 10:02:28 +00:00
data['in'] = self.options.points[0];
2011-02-11 14:44:32 +00:00
data.out = self.options.points[1];
that.triggerEvent('addAnnotation', data);
},
'delete': function(event, data) {
data.layer = layer.id;
that.triggerEvent('removeAnnotations', data);
},
select: function(event, data) {
self.options.layers.forEach(function(l, j) {
if(l.id != layer.id) {
self.$annotationPanel[j].deselectItems();
}
});
selectAnnotation(event, data);
},
2011-02-09 17:56:35 +00:00
submit: updateAnnotation
2011-02-11 14:44:32 +00:00
});
self.$annotationPanel[i]
.appendTo(self.$annotations);
});
that.$element = new Ox.SplitPanel({
elements: [
{
element: self.$editor
},
{
collapsed: !self.options.showAnnotations,
collapsible: true,
element: self.$annotations,
resizable: true,
resize: [192, 256, 320, 384],
size: self.options.annotationsSize
}
],
orientation: 'horizontal'
});
2011-01-17 21:12:17 +00:00
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 getPoints(type) {
var found = false,
points,
positions = [];
if (type == 'cut') {
positions = self.options.cuts;
} else if (type == 'match') {
// ...
} else if (type == 'subtitle') {
self.options.subtitles.forEach(function(v, i) {
2011-02-22 10:02:28 +00:00
positions.push(v['in']);
positions.push(v.out);
});
}
positions.indexOf(0) == -1 && positions.unshift(0);
positions.indexOf(self.options.duration) == -1 &&
positions.push(self.options.duration);
$.each(positions, function(i, v) {
if (v > self.options.position) {
points = [positions[i - 1], positions[i]];
found = true;
return false;
}
});
return points;
}
2011-01-17 21:12:17 +00:00
function getSizes(scrollbarIsVisible) {
//Ox.print('getSizes', scrollbarIsVisible)
var scrollbarWidth = oxui.scrollbarSize,
contentWidth = self.options.width -
(self.options.showAnnotations * self.options.annotationsSize) - 1 -
(scrollbarIsVisible ? scrollbarWidth : 0),
height,
2011-01-17 21:12:17 +00:00
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);
height = getHeight();
2011-01-17 21:12:17 +00:00
//Ox.print('lines', lines, getHeight(), self.options.height, (scrollbarIsVisible && getHeight() <= self.options.height) ? 'scroll' : 'auto')
self.$editor.css({
overflowY: (scrollbarIsVisible && height <= self.options.height) ? 'scroll' : 'auto'
2011-01-17 21:12:17 +00:00
});
return (!scrollbarIsVisible && height > self.options.height) ? getSizes(true) : size;
2011-01-17 21:12:17 +00:00
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 resizeAnnotations(event, data) {
self.options.annotationsSize = data;
setSizes();
}
2011-01-17 21:12:17 +00:00
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 selectAnnotation(event, data) {
2011-02-22 10:02:28 +00:00
self.options.position = data['in']
self.options.points = [data['in'], data.out];
setPosition();
setPoints();
}
2011-02-09 17:56:35 +00:00
function updateAnnotation(event, data) {
2011-02-22 10:02:28 +00:00
data['in'] = self.options.points[0];
2011-02-21 17:31:02 +00:00
data.out = self.options.points[1];
2011-02-09 17:56:35 +00:00
that.triggerEvent('updateAnnotation', data);
}
function select(type) {
self.options.points = getPoints(type);
setPoints();
}
2011-01-17 21:12:17 +00:00
function setPoint(point) {
self.options.points[point == 'in' ? 0 : 1] = self.options.position;
if (self.options.points[1] < self.options.points[0]) {
self.options.points[point == 'in' ? 1 : 0] = self.options.position;
}
setPoints();
}
function setPoints() {
2011-01-17 21:12:17 +00:00
$.each(self.$player, function(i, v) {
v.options($.extend({
2011-01-17 21:12:17 +00:00
points: self.options.points
}, i ? {
position: self.options.points[i - 1]
} : {}));
2011-01-17 21:12:17 +00:00
});
$.each(self.$timeline, function(i, v) {
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 toggleAnnotations(event, data) {
self.options.showAnnotations = !data.collapsed;
setSizes();
}
2011-01-17 21:12:17 +00:00
function toggleMute() {
self.$player[0].toggleMute();
}
function togglePlay() {
self.$player[0].togglePlay();
}
function toggleSize(event, data) {
self.options.videoSize = data.size
2011-01-17 21:12:17 +00:00
setSizes();
that.triggerEvent('togglesize', {
size: self.options.videoSize
});
2011-01-17 21:12:17 +00:00
}
self.onChange = function(key, value) {
if (key == 'width' || key == 'height') {
//Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height)
setSizes();
} else if (key == 'position') {
self.$player[0].position(value);
2011-01-17 21:12:17 +00:00
}
};
2011-02-11 14:44:32 +00:00
that.addAnnotation = function(layer, item) {
var i = Ox.getPositionById(self.options.layers, layer);
self.$annotationPanel[i].addItem(item);
}
that.removeAnnotations = function(layer, ids) {
var i = Ox.getPositionById(self.options.layers, layer);
self.$annotationPanel[i].removeItems(ids);
}
2011-01-17 21:12:17 +00:00
return that;
};
Ox.VideoEditorPlayer = function(options, self) {
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
2011-02-08 00:00:01 +00:00
duration: 0,
2011-01-17 21:12:17 +00:00
find: '',
height: 0,
points: [0, 0],
position: 0,
posterFrame: 0,
size: 'small',
2011-01-17 21:12:17 +00:00
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 = new Ox.VideoElement({
height: self.options.height,
paused: true,
points: self.options.points,
position: self.options.position,
url: self.options.url,
width: self.options.width
})
.bindEvent({
paused: paused,
playing: playing
})
.appendTo(that);
self.video = self.$video.$element[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: self.options.size == 'small' ? [
2011-01-17 21:12:17 +00:00
{id: 'large', title: 'grow'},
{id: 'small', title: 'shrink'}
] : [
{id: 'small', title: 'shrink'},
{id: 'large', title: 'grow'}
2011-01-17 21:12:17 +00:00
],
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();
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
}, 50);
} else {
setPosition();
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function getSubtitle() {
var subtitle = '';
$.each(self.options.subtitles, function(i, v) {
if (v['in'] <= self.options.position && v['out'] > self.options.position) {
2011-01-28 09:31:12 +00:00
subtitle = v.value;
2011-01-17 21:12:17 +00:00
return false;
2010-09-17 22:10:07 +00:00
}
2010-12-31 11:01:35 +00:00
});
2011-01-17 21:12:17 +00:00
return subtitle;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function goToPoint() {
2010-09-17 22:10:07 +00:00
that.triggerEvent('change', {
2011-01-17 21:12:17 +00:00
position: self.options.points[self.options.type == 'in' ? 0 : 1]
2010-09-17 22:10:07 +00:00
});
}
2011-01-17 21:12:17 +00:00
function paused(event, data) {
self.$playButton.toggleTitle();
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function playing(event, data) {
self.options.position = data.position;
setMarkers();
setSubtitle();
self.$positionInput.options({
value: Ox.formatDuration(self.options.position, 3)
});
that.triggerEvent('playing', {
2010-09-17 22:10:07 +00:00
position: self.options.position
});
}
2011-01-17 21:12:17 +00:00
function setHeight() {
that.css({
height: (self.options.height + 16) + 'px'
2010-09-17 22:10:07 +00:00
});
2011-01-17 21:12:17 +00:00
self.options.type == 'play' ? self.$video.options({
height: self.options.height
}) : self.$video.css({
height: self.options.height + 'px'
2010-09-17 22:10:07 +00:00
});
}
2011-01-17 21:12:17 +00:00
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();
2010-09-17 22:10:07 +00:00
});
2011-01-17 21:12:17 +00:00
})
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
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);
2010-09-17 22:10:07 +00:00
}
function setPosition() {
2011-02-08 00:00:01 +00:00
var position = Ox.limit(
self.options.position - (self.options.type == 'out' ? 0.01 : 0),
0, self.options.duration - 0.01
),
url;
2011-01-17 21:12:17 +00:00
if (self.options.type == 'play') {
self.$video.position(self.options.position);
} else {
self.$loadingIcon && self.$loadingIcon.stop();
2011-02-08 00:00:01 +00:00
url = self.options.url(position);
if (self.$video.attr('src') != url) {
2011-01-17 21:12:17 +00:00
self.$loadingIcon = new Ox.LoadingIcon()
.appendTo(that)
.start();
self.$video.attr({
2011-02-08 00:00:01 +00:00
src: url
2011-01-17 21:12:17 +00:00
})
.load(self.$loadingIcon.stop);
}
}
setMarkers();
setSubtitle();
self.$positionInput.options({
value: Ox.formatDuration(self.options.position, 3)
2010-09-17 22:10:07 +00:00
});
}
2011-01-17 21:12:17 +00:00
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)'
});
}
2011-01-17 21:12:17 +00:00
function setWidth() {
that.css({
width: self.options.width + 'px'
});
self.options.type == 'play' ? self.$video.options({
width: self.options.width
}) : self.$video.css({
width: self.options.width + 'px'
});
setSubtitleSize();
}
2010-09-17 22:10:07 +00:00
function toggleMute() {
2011-01-17 21:12:17 +00:00
self.$video.toggleMute();
2010-09-17 22:10:07 +00:00
}
function togglePlay() {
2011-01-17 21:12:17 +00:00
self.video.paused ? that.play() : that.pause();
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function toggleSize(event, data) {
self.options.size = data.id
2011-01-17 21:12:17 +00:00
that.triggerEvent('togglesize', {
size: self.options.size
2011-01-17 21:12:17 +00:00
});
}
2010-09-17 22:10:07 +00:00
self.onChange = function(key, value) {
2011-01-17 21:12:17 +00:00
if (key == 'height') {
setHeight();
} else if (key == 'points') {
setMarkers();
} else if (key == 'position') {
setPosition();
} else if (key == 'posterFrame') {
setMarkers();
} else if (key == 'width') {
setWidth();
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
}
that.mute = function() {
self.$video.mute();
return that;
};
that.pause = function() {
self.$video.pause();
return that;
};
that.play = function() {
self.$video.play();
return that;
};
that.playInToOut = function() {
self.$video.paused() && self.$playButton.toggleTitle();
self.$video.playInToOut();
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.unmute();
return that;
2010-09-17 22:10:07 +00:00
};
return that;
};
2011-01-17 21:12:17 +00:00
Ox.VideoElement = function(options, self) {
2010-09-17 22:10:07 +00:00
var self = self || {},
2011-01-17 21:12:17 +00:00
that = new Ox.Element('video', self)
2010-09-17 22:10:07 +00:00
.defaults({
2011-01-17 21:12:17 +00:00
fps: 25,
2010-09-17 22:10:07 +00:00
height: 0,
2011-01-17 21:12:17 +00:00
loop: false,
muted: false,
paused: false,
playInToOut: false,
2010-09-17 22:10:07 +00:00
points: [0, 0],
position: 0,
2011-01-17 21:12:17 +00:00
poster: '',
2010-09-17 22:10:07 +00:00
url: '',
width: 0
})
.options(options || {})
.attr({
2011-01-17 21:12:17 +00:00
poster: self.options.poster,
preload: 'auto',
src: self.options.url
})
.css({
height: self.options.height + 'px',
width: self.options.width + 'px'
})
2011-01-17 21:12:17 +00:00
.bind({
ended: ended,
loadedmetadata: function() {
self.video.currentTime = self.options.position;
}
2011-01-17 21:12:17 +00:00
});
$.extend(self, {
millisecondsPerFrame: 1000 / self.options.fps,
video: that.$element[0]
});
function ended() {
that.pause()
.triggerEvent('paused', {
position: self.options.position
});
}
function playing() {
var event = 'playing';
self.options.position = Math.round(self.video.currentTime * self.options.fps) / self.options.fps;
if (self.options.playInToOut && self.options.position >= self.options.points[1]) {
event = 'paused';
that.position(self.options.points[1]).pause();
}
that.triggerEvent(event, {
position: self.options.position
});
}
self.onChange = function(key, value) {
if (key == 'height') {
that.size(self.options.width, value);
} else if (key == 'muted') {
that[value ? 'mute' : 'unmute']();
} else if (key == 'paused') {
that[value ? 'pause' : 'play']();
} else if (key == 'points') {
that.points(value);
} else if (key == 'width') {
that.size(value, self.options.height);
}
};
that.mute = function() {
self.options.muted = true;
self.video.muted = true;
return that;
};
that.muted = function() {
return self.options.muted;
}
that.pause = function() {
self.options.paused = true;
self.options.playInToOut = false;
self.video.pause();
clearInterval(self.playInterval);
return that;
};
that.paused = function() {
return self.options.paused;
}
that.play = function() {
self.options.paused = false;
self.video.play();
self.playInterval = setInterval(playing, self.millisecondsPerFrame);
return that;
};
that.playInToOut = function() {
self.options.playInToOut = true;
that.position(self.options.points[0]);
self.options.paused && that.play();
return that;
};
that.points = function(points) {
self.options.points = points;
}
that.position = function(pos) {
if (arguments.length == 0) {
return self.video.currentTime;
} else {
self.options.position = pos;
self.video.currentTime = self.options.position;
return that;
}
};
that.size = function(width, height) {
// fixme: why options? use css!
if (arguments.length == 0) {
return {
width: self.options.width,
height: self.options.height
};
} else {
self.options.width = width;
self.options.height = height;
that.css({
width: width + 'px',
height: height + 'px'
});
return that;
}
};
that.toggleMute = function() {
self.video.muted = !self.video.muted;
return that;
}
that.togglePlay = function() {
self.options.paused = !self.options.paused;
that[self.options.paused ? 'pause' : 'play']();
}
that.unmute = function() {
self.video.muted = false;
return that;
};
return that;
};
Ox.VideoPanelPlayer = function(options, self) {
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
annotationsSize: 256,
duration: 0,
height: 0,
loop: false,
muted: false,
paused: false,
playInToOut: false,
points: [0, 0],
position: 0,
poster: '',
showAnnotations: true,
showControls: true,
subtitles: [],
2011-01-17 21:12:17 +00:00
videoHeight: 0,
videoSize: 'fit',
videoWidth: 0,
videoURL: '',
width: 0
})
.options(options || {})
.css({
height: self.options.height + 'px',
width: self.options.width + 'px'
})
2011-01-17 21:12:17 +00:00
.bindEvent({
resize: resizeElement,
key_shift_a: function() {
that.toggleAnnotations();
},
key_shift_c: function() {
that.toggleControls();
},
key_shift_s: function() {
that.toggleSize();
},
key_space: function() {
that.togglePlay();
}
2011-01-17 21:12:17 +00:00
});
2010-09-17 22:10:07 +00:00
$.extend(self, {
fullscreen: false,
videoCSS: getVideoCSS()
});
2011-01-17 21:12:17 +00:00
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self.$player = new Ox.Element()
.css({
overflowX: 'hidden',
overflowY: 'hidden'
})
.bind({
mousedown: that.gainFocus
})
2011-01-17 21:12:17 +00:00
.bindEvent({
resize: resizeVideo
});
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self.$video = new Ox.VideoElement({
height: self.videoCSS.height,
paused: true,
points: self.options.points,
position: self.options.position,
url: self.options.videoURL,
width: self.videoCSS.width
})
.css(self.videoCSS)
.bindEvent({
paused: paused,
playing: playing
})
.appendTo(self.$player);
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self.$controls = new Ox.Element()
.bindEvent({
toggle: toggleControls
2010-09-17 22:10:07 +00:00
});
2011-01-17 21:12:17 +00:00
self.$buttons = new Ox.Element()
2010-09-17 22:10:07 +00:00
.css({
2011-01-17 21:12:17 +00:00
float: 'left',
width: '16px',
margin: '4px'
2010-09-17 22:10:07 +00:00
})
2011-01-17 21:12:17 +00:00
.appendTo(self.$controls);
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self.$button = {
play: new Ox.Button({
id: 'play',
2010-09-17 22:10:07 +00:00
title: [
{id: 'play', title: 'play'},
{id: 'pause', title: 'pause'}
],
tooltip: ['Play', 'Pause'],
2011-01-17 21:12:17 +00:00
type: 'image'
2010-09-17 22:10:07 +00:00
})
2011-01-17 21:12:17 +00:00
.bindEvent({
click: self.$video.togglePlay
}),
mute: new Ox.Button({
id: 'mute',
2010-09-17 22:10:07 +00:00
title: [
{id: 'mute', title: 'mute'},
{id: 'unmute', title: 'unmute'}
],
tooltip: ['Mute', 'Unmute'],
2011-01-17 21:12:17 +00:00
type: 'image'
2010-09-17 22:10:07 +00:00
})
2011-01-17 21:12:17 +00:00
.bindEvent({
click: self.$video.toggleMute
2011-01-17 21:12:17 +00:00
}),
size: new Ox.Button({
id: 'size',
title: self.options.videoSize == 'fit' ? [
{id: 'fill', title: 'fill'},
{id: 'fit', title: 'fit'}
] : [
{id: 'fit', title: 'fit'},
{id: 'fill', title: 'fill'}
],
tooltip: self.options.videoSize == 'fit' ? [
'Fill Screen', 'Fit to Screen'
] : [
'Fit to Screen', 'Fill Screen'
],
2010-09-17 22:10:07 +00:00
type: 'image'
})
2011-01-17 21:12:17 +00:00
.bindEvent({
click: toggleSize
}),
fullscreen: new Ox.Button({
id: 'size',
title: [
{id: 'grow', title: 'grow'},
{id: 'shrink', title: 'shrink'}
],
tooltip: [
'Enter Fullscreen', 'Exit Fullscreen'
],
type: 'image'
})
.bindEvent({
click: toggleFullscreen
2010-09-17 22:10:07 +00:00
})
}
2011-01-17 21:12:17 +00:00
var i = 0;
$.each(self.$button, function(k, $button) {
$button.css({
position: 'absolute',
left: '8px',
top: (8 + i++ * 24) + 'px'
2010-09-17 22:10:07 +00:00
})
2011-01-17 21:12:17 +00:00
.appendTo(self.$buttons);
});
self.$timelines = new Ox.Element()
2010-09-17 22:10:07 +00:00
.css({
2011-01-17 21:12:17 +00:00
float: 'left',
margin: '4px'
2010-09-17 22:10:07 +00:00
})
2011-01-17 21:12:17 +00:00
.appendTo(self.$controls);
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self.$timeline = {
large: new Ox.LargeTimeline({
duration: self.options.duration,
position: self.options.position,
subtitles: self.options.subtitles,
2011-01-17 21:12:17 +00:00
videoId: self.options.videoId,
width: getTimelineWidth()
2011-01-17 21:12:17 +00:00
})
.css({
top: '4px'
})
.bindEvent({
change: changeLargeTimeline
2011-01-17 21:12:17 +00:00
}),
small: new Ox.SmallTimeline({
duration: self.options.duration,
position: self.options.position,
subtitles: self.options.subtitles,
2011-01-17 21:12:17 +00:00
videoId: self.options.videoId,
width: getTimelineWidth()
2011-01-17 21:12:17 +00:00
})
.css({
top: '76px'
})
.bindEvent({
change: changeSmallTimeline
2011-01-17 21:12:17 +00:00
})
};
$.each(self.$timeline, function(i, $timeline) {
$timeline.appendTo(self.$timelines);
2010-09-17 22:10:07 +00:00
});
2011-01-17 21:12:17 +00:00
self.$panel = new Ox.SplitPanel({
elements: [
{
element: self.$player
},
{
collapsed: !self.options.showControls,
collapsible: true,
element: self.$controls,
size: 104
}
],
orientation: 'vertical'
})
.bindEvent({
resize: resizePanel
2010-09-17 22:10:07 +00:00
});
2011-01-17 21:12:17 +00:00
self.$annotations = new Ox.Element()
.bindEvent({
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
toggle: toggleAnnotations
});
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
that.$element = new Ox.SplitPanel({
elements: [
{
element: self.$panel
},
{
collapsed: !self.options.showAnnotations,
collapsible: true,
element: self.$annotations,
resizable: true,
resize: [192, 256, 320, 384],
size: self.options.annotationsSize
}
],
orientation: 'horizontal'
2010-09-17 22:10:07 +00:00
});
2011-01-17 21:12:17 +00:00
function changeLargeTimeline(event, data) {
self.options.position = data.position;
self.$video.position(self.options.position);
self.$timeline.small.options({
position: self.options.position
});
}
function changeSmallTimeline(event, data) {
self.options.position = data.position;
self.$video.position(self.options.position);
self.$timeline.large.options({
position: self.options.position
});
}
2011-01-17 21:12:17 +00:00
function getPlayerHeight() {
return self.options.height -
self.options.showControls * 104 - 1;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function getPlayerWidth() {
return self.options.width -
(self.options.showAnnotations && !self.fullscreen) *
self.options.annotationsSize - 1;
}
function getTimelineWidth() {
return self.options.width -
(self.options.showAnnotations && !self.fullscreen) *
self.options.annotationsSize - 40
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function getVideoCSS() {
var width = getPlayerWidth(),
height = getPlayerHeight(),
ratio = width / height,
videoRatio = self.options.videoWidth / self.options.videoHeight,
isWide = ratio < videoRatio;
return self.options.videoSize == 'fit' ? {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
width: (isWide ? width : Math.round(height * videoRatio)) + 'px',
height: (isWide ? Math.round(width / videoRatio) : height) + 'px',
margin: 'auto'
} : {
width: (isWide ? Math.round(height * videoRatio) : width) + 'px',
height: (isWide ? height : Math.round(width / videoRatio)) + 'px',
margin: [
isWide ? '0' : Math.floor((height - width / videoRatio) / 2) + 'px',
isWide ? Math.ceil((width - height * videoRatio) / 2) + 'px' : '0',
isWide ? '0' : Math.ceil((height - width / videoRatio) / 2) + 'px',
isWide ? Math.floor((width - height * videoRatio) / 2) + 'px' : '0'
].join(' ')
};
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function paused() {
2010-09-17 22:10:07 +00:00
}
function playing(event, data) {
self.options.position = data.position;
self.$timeline.large.options({
position: self.options.position
});
self.$timeline.small.options({
position: self.options.position
});
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function resizeAnnotations(event, data) {
self.options.annotationsSize = data;
resizeVideoAndControls();
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function resizeendAnnotations(event, data) {
self.options.annotationsSize = data;
that.triggerEvent('change', {
annotationsSize: self.options.annotationsSize
2010-09-17 22:10:07 +00:00
});
}
function resizeControls() {
self.$timeline.large.options({
width: getTimelineWidth()
});
self.$timeline.small.options({
width: getTimelineWidth()
});
}
2011-01-17 21:12:17 +00:00
function resizeElement(event, data) {
// called on browser toggle
self.options.height = data;
resizeVideo();
}
function resizePanel(event, data) {
// called on annotations toggle
resizeVideoAndControls();
}
function resizeVideoAndControls() {
resizeVideo();
resizeControls();
}
2011-01-17 21:12:17 +00:00
function resizeVideo() {
self.videoCSS = getVideoCSS();
self.$video.css(self.videoCSS);
};
function toggleAnnotations(event, data) {
self.options.showAnnotations = !data.collapsed;
that.triggerEvent('change', {
showAnnotations: self.options.showAnnotations
2010-09-17 22:10:07 +00:00
});
2011-01-17 21:12:17 +00:00
}
function toggleControls(event, data) {
self.options.showControls = !data.collapsed;
that.triggerEvent('change', {
showControls: self.options.showControls
2010-09-17 22:10:07 +00:00
});
}
function toggleFullscreen() {
self.fullscreen = !self.fullscreen;
self.options.showAnnotations && that.$element.toggle(1);
self.fullscreen && self.options.showControls && self.$panel.toggle(1);
that.triggerEvent((self.fullscreen ? 'enter' : 'exit') + 'fullscreen', {});
}
2011-01-17 21:12:17 +00:00
function toggleSize() {
self.options.videoSize = self.options.videoSize == 'fit' ? 'fill' : 'fit';
resizeVideo();
2011-01-17 21:12:17 +00:00
that.triggerEvent('change', {
videoSize: self.options.videoSize
});
}
2010-09-17 22:10:07 +00:00
self.onChange = function(key, value) {
if (key == 'height') {
2011-01-17 21:12:17 +00:00
resizeVideo();
} else if (key == 'position') {
self.$video.position(value);
2010-09-17 22:10:07 +00:00
} else if (key == 'width') {
resizeVideoAndControls();
2010-09-17 22:10:07 +00:00
}
}
2011-01-17 21:12:17 +00:00
that.toggleAnnotations = function() {
that.$element.toggle(1);
//that.toggleAnnotations(null, !self.options.showAnnotations);
2010-09-17 22:10:07 +00:00
};
2011-01-17 21:12:17 +00:00
that.toggleControls = function() {
self.$panel.toggle(1);
//that.toggleControls(null, !self.options.showControls);
2010-09-17 22:10:07 +00:00
};
that.toggleMute = function() {
self.$button.mute.trigger('click');
};
that.togglePlay = function() {
self.$button.play.trigger('click');
};
that.toggleSize = function() {
self.$button.size.trigger('click');
}
2010-09-17 22:10:07 +00:00
return that;
2011-01-17 21:12:17 +00:00
}
2010-09-17 22:10:07 +00:00
2010-07-24 01:32:08 +00:00
/*
============================================================================
Miscellaneous
============================================================================
*/
2010-12-06 17:42:45 +00:00
/**
2010-07-24 01:32:08 +00:00
*/
Ox.Tooltip = function(options, self) {
var self = self || {},
2010-09-03 20:54:40 +00:00
that = new Ox.Element('div', self)
2010-07-24 01:32:08 +00:00
.defaults({
2010-09-03 20:54:40 +00:00
title: ''
2010-07-24 01:32:08 +00:00
})
.options(options || {})
2010-09-03 20:54:40 +00:00
.addClass('OxTooltip')
2010-09-03 08:47:40 +00:00
.html(self.options.title);
2010-07-24 01:32:08 +00:00
self.onChange = function(key, value) {
2010-09-03 20:54:40 +00:00
if (key == 'title') {
2010-07-24 01:32:08 +00:00
that.html(value);
}
};
that.hide = function() {
that.animate({
opacity: 0
2010-09-03 08:47:40 +00:00
}, 0, function() {
2010-07-24 01:32:08 +00:00
that.remove();
});
return that;
};
2010-09-03 08:47:40 +00:00
that.show = function(x, y) {
2010-07-24 01:32:08 +00:00
var left, top, width, height;
2010-09-03 20:54:40 +00:00
$('.OxTooltip').remove(); // fixme: don't use dom
2010-07-24 01:32:08 +00:00
that.appendTo($body);
width = that.width();
height = that.height();
2010-09-03 08:47:40 +00:00
left = Ox.limit(x - width / 2, 0, $document.width() - width);
top = y > $document.height() - height - 16 ? y - 32 : y + 16;
2010-07-24 01:32:08 +00:00
that.css({
2010-09-03 20:54:40 +00:00
left: left + 'px',
top: top + 'px'
2010-07-24 01:32:08 +00:00
})
.animate({
opacity: 1
2010-09-03 08:47:40 +00:00
}, 0);
2010-07-24 01:32:08 +00:00
return that;
};
return that;
};
2010-01-27 12:30:00 +00:00
2011-02-01 09:56:16 +00:00
/*
============================================================================
Pan.do/ra
============================================================================
*/
Ox.FilesView = function(options, self) {
var self = self || {},
that = new Ox.Element('div', self)
.defaults({
id: ''
})
.options(options || {});
self.$toolbar = new Ox.Bar({
size: 24
});
self.$orderButton = new Ox.Button({
title: 'Change Order of Users...'
})
.css({
float: 'left',
margin: '4px'
})
.appendTo(self.$toolbar);
self.$moveButton = new Ox.Button({
disabled: 'true',
title: 'Move Selected Files...'
})
.css({
float: 'right',
margin: '4px'
})
.appendTo(self.$toolbar);
self.$filesList = new Ox.TextList({
columns: [
{
align: 'left',
id: 'users',
operator: '+',
title: 'Users',
visible: true,
width: 120
},
{
align: 'left',
id: 'folder',
operator: '+',
title: 'Folder',
visible: true,
width: 180
},
{
align: 'left',
id: 'name',
operator: '+',
title: 'Name',
visible: true,
width: 360
},
{
align: 'left',
id: 'type',
operator: '+',
title: 'Type',
visible: true,
width: 60
},
{
align: 'right',
id: 'part',
operator: '+',
title: 'Part',
visible: true,
width: 60
},
{
align: 'right',
format: {type: 'value', args: ['B']},
id: 'size',
operator: '-',
title: 'Size',
visible: true,
width: 90
},
{
align: 'right',
format: {type: 'resolution', args: ['px']},
id: 'resolution',
operator: '-',
title: 'Resolution',
visible: true,
width: 90
},
{
align: 'right',
format: {type: 'duration', args: [0, 'short']},
id: 'duration',
operator: '-',
title: 'Duration',
visible: true,
width: 90
},
{
align: 'left',
id: 'oshash',
2011-02-01 09:56:16 +00:00
operator: '+',
title: 'Hash',
unique: true,
visible: false,
width: 120
},
{
align: 'left',
id: 'instances',
operator: '+',
title: 'Instances',
visible: false,
width: 120
}
],
columnsMovable: true,
columnsRemovable: true,
columnsResizable: true,
columnsVisible: true,
id: 'files',
2011-02-25 10:23:33 +00:00
items: function(data, callback) {
2011-02-01 09:56:16 +00:00
pandora.api.findFiles($.extend(data, {
query: {
conditions: [{
key: 'id',
value: self.options.id,
operator: '='
}]
}
}), callback);
},
scrollbarVisible: true,
sort: [{key: 'name', operator:'+'}]
})
.bindEvent({
open: openFiles,
select: selectFiles
});
self.$instancesList = new Ox.Element()
.html('No files selected');
that.$element = new Ox.SplitPanel({
elements: [
{
element: self.$toolbar,
size: 24
},
{
element: self.$filesList
},
{
element: self.$instancesList,
size: 80
}
],
orientation: 'vertical'
});
function openFiles(event, data) {
//alert(JSON.stringify(self.$filesList.value(data.ids[0], 'instances')))
}
function selectFiles(event, data) {
//alert(JSON.stringify(self.$filesList.value(data.ids[0], 'instances')))
}
return that;
};
})();