0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

merging changes

Browse source
This commit is contained in:
rolux 2011-06-21 12:55:26 +02:00
commit 719ffc050a
68 changed files with 421 additions and 428 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
source/Ox.UI/js/Bar/Ox.Bar.js
View file

@ -10,8 +10,8 @@ Ox.Bar <f:Ox.Element> Bar
self <o> Shared private variable self <o> Shared private variable
@*/ @*/
Ox.Bar = function(options, self) { Ox.Bar = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
orientation: 'horizontal', orientation: 'horizontal',
size: 'medium' // can be int size: 'medium' // can be int

4
source/Ox.UI/js/Bar/Ox.Resizebar.js
View file

@ -20,8 +20,8 @@ Ox.Resizebar <f:Ox.Element> Resizebar
*/ */
Ox.Resizebar = function(options, self) { Ox.Resizebar = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
collapsed: false, collapsed: false,
collapsible: true, collapsible: true,

6
source/Ox.UI/js/Bar/Ox.Tabbar.js
View file

@ -13,8 +13,8 @@ Ox.Tabbar <f:Ox.Bar> Tabbar
*/ */
Ox.Tabbar = function(options, self) { Ox.Tabbar = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Bar({ var that = Ox.Bar({
size: 20 size: 20
}, self) }, self)
.defaults({ .defaults({
@ -30,7 +30,7 @@ Ox.Tabbar = function(options, self) {
selectable: true, selectable: true,
selected: self.options.selected, selected: self.options.selected,
size: 'medium', size: 'medium',
style: 'tab', style: 'tab'
}).appendTo(that); }).appendTo(that);
return that; return that;

4
source/Ox.UI/js/Bar/Ox.Toolbar.js
View file

@ -3,8 +3,8 @@
fixme: no need for this fixme: no need for this
*/ */
Ox.Toolbar = function(options, self) { Ox.Toolbar = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Bar({ var that = Ox.Bar({
size: Ox.UI.getBarSize(options.size) size: Ox.UI.getBarSize(options.size)
}, self); }, self);
return that; return that;

24
source/Ox.UI/js/Calendar/Ox.Calendar.js
View file

@ -28,7 +28,7 @@ Ox.Calendar <f:Ox.Element> Basic calendar object
Ox.Calendar = function(options, self) { Ox.Calendar = function(options, self) {
self = self || {}; self = self || {};
var that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
date: new Date(), date: new Date(),
events: [], events: [],
@ -338,7 +338,7 @@ Ox.Calendar = function(options, self) {
}) })
.appendTo(self.$toolbar); .appendTo(self.$toolbar);
self.$scalebar = new Ox.Element() self.$scalebar = Ox.Element()
.addClass('OxTimeline') .addClass('OxTimeline')
.css({ .css({
posision: 'absolute', posision: 'absolute',
@ -346,7 +346,7 @@ Ox.Calendar = function(options, self) {
}) })
.appendTo(that); .appendTo(that);
self.$container = new Ox.Element() self.$container = Ox.Element()
.addClass('OxCalendarContainer') .addClass('OxCalendarContainer')
.css({ .css({
top: '40px', top: '40px',
@ -367,15 +367,15 @@ Ox.Calendar = function(options, self) {
}) })
.appendTo(that); .appendTo(that);
self.$content = new Ox.Element() self.$content = Ox.Element()
.addClass('OxCalendarContent') .addClass('OxCalendarContent')
.appendTo(self.$container); .appendTo(self.$container);
self.$background = new Ox.Element() self.$background = Ox.Element()
.addClass('OxBackground') .addClass('OxBackground')
.appendTo(self.$content); .appendTo(self.$content);
self.$scrollbar = new Ox.Element() self.$scrollbar = Ox.Element()
.addClass('OxTimeline') .addClass('OxTimeline')
.css({ .css({
posision: 'absolute', posision: 'absolute',
@ -383,7 +383,7 @@ Ox.Calendar = function(options, self) {
}) })
.appendTo(that); .appendTo(that);
self.$zoombar = new Ox.Element() self.$zoombar = Ox.Element()
.css({ .css({
position: 'absolute', position: 'absolute',
bottom: 0, bottom: 0,
@ -391,7 +391,7 @@ Ox.Calendar = function(options, self) {
}) })
.appendTo(that); .appendTo(that);
self.$zoomInput = new Ox.Range({ self.$zoomInput = Ox.Range({
arrows: true, arrows: true,
max: self.maxZoom, max: self.maxZoom,
min: 0, min: 0,
@ -405,7 +405,7 @@ Ox.Calendar = function(options, self) {
}) })
.appendTo(self.$zoombar); .appendTo(self.$zoombar);
self.$tooltip = new Ox.Tooltip({ self.$tooltip = Ox.Tooltip({
animate: false animate: false
}) })
.css({ .css({
@ -547,7 +547,7 @@ Ox.Calendar = function(options, self) {
Ox.loop(-n, n + 1, function(i) { Ox.loop(-n, n + 1, function(i) {
if (u == 0 || Ox.mod(value + i, 2)) { if (u == 0 || Ox.mod(value + i, 2)) {
$elements.push( $elements.push(
new Ox.Element() Ox.Element()
.addClass( .addClass(
u == 0 ? 'line' : '' u == 0 ? 'line' : ''
) )
@ -599,7 +599,7 @@ Ox.Calendar = function(options, self) {
paddingLeft = 0; paddingLeft = 0;
width = getPosition(event.endTime, zoom) - left; width = getPosition(event.endTime, zoom) - left;
} }
return new Ox.Element() return Ox.Element()
.addClass('OxEvent' + .addClass('OxEvent' +
(event.type ? ' Ox' + Ox.toTitleCase(event.type) : '' ) + (event.type ? ' Ox' + Ox.toTitleCase(event.type) : '' ) +
(event.current ? ' OxCurrent' : '') + (event.current ? ' OxCurrent' : '') +
@ -869,7 +869,7 @@ Ox.Calendar = function(options, self) {
}); });
if (line == self.lineEvents.length) { if (line == self.lineEvents.length) {
self.lineEvents[line] = []; self.lineEvents[line] = [];
self.$lines[line] = new Ox.Element() self.$lines[line] = Ox.Element()
.addClass('OxLine') .addClass('OxLine')
.css({ .css({
top: (line * 16) + 'px' top: (line * 16) + 'px'

11
source/Ox.UI/js/Core/Ox.App.js
View file

@ -4,7 +4,6 @@
Ox.App <f> Basic application instance that communicates with a JSON API Ox.App <f> Basic application instance that communicates with a JSON API
() -> <f> App object () -> <f> App object
(options) -> <f> App object (options) -> <f> App object
(options, self) -> <f> App object
options <o> Options object options <o> Options object
timeout <n> request timeout timeout <n> request timeout
type <s> HTTP Request type, i.e. 'GET' or 'POST' type <s> HTTP Request type, i.e. 'GET' or 'POST'
@ -14,9 +13,7 @@ Ox.App <f> Basic application instance that communicates with a JSON API
@*/ @*/
Ox.App = (function() { Ox.App = function(options) {
return function(options) {
options = options || {}; options = options || {};
var self = { var self = {
@ -27,7 +24,7 @@ Ox.App = (function() {
}, options || {}), }, options || {}),
time: new Date() time: new Date()
}, },
that = new Ox.Element({}, self); that = Ox.Element({}, self);
that.api = { that.api = {
api: function(callback) { api: function(callback) {
@ -128,6 +125,4 @@ Ox.App = (function() {
return that; return that;
}; };
}());

4
source/Ox.UI/js/Core/Ox.Container.js
View file

@ -14,10 +14,10 @@ Ox.Container <f> Container (depricated)
@*/ @*/
Ox.Container = function(options, self) { Ox.Container = function(options, self) {
// fixme: to be deprecated // fixme: to be deprecated
var that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.options(options || {}) .options(options || {})
.addClass('OxContainer'); .addClass('OxContainer');
that.$content = new Ox.Element({}, self) // fixme: passing self twice?? that.$content = Ox.Element({}, self) // fixme: passing self twice??
.options(options || {}) .options(options || {})
.addClass('OxContent') .addClass('OxContent')
.appendTo(that); .appendTo(that);

14
source/Ox.UI/js/Core/Ox.Element.js
View file

@ -48,12 +48,10 @@ Ox.Element <function:Ox.JQueryElement> Basic UI element object
* <*> original event properties * <*> original event properties
@*/ @*/
Ox.Element = function() { Ox.Element = function(options, self) {
return function(options, self) {
/* /*
// allow for 'Ox.Element()' instead of 'new Ox.Element()' // allow for 'Ox.Element()' instead of 'Ox.Element()'
if (!(this instanceof arguments.callee)) { if (!(this instanceof arguments.callee)) {
return new arguments.callee(options, self); return new arguments.callee(options, self);
} }
@ -69,8 +67,8 @@ Ox.Element = function() {
if (Ox.isString(self.options)) { if (Ox.isString(self.options)) {
self.options = { self.options = {
element: self.options element: self.options
} };
}; }
// create event handler // create event handler
if (!self.$eventHandler) { if (!self.$eventHandler) {
self.$eventHandler = $('<div>'); self.$eventHandler = $('<div>');
@ -376,6 +374,4 @@ Ox.Element = function() {
return that; return that;
} };
}();

2
source/Ox.UI/js/Core/Ox.Keyboard.js
View file

@ -101,7 +101,7 @@
buffer = ''; buffer = '';
}, 1000); }, 1000);
Ox.print(ret) Ox.print(ret);
return ret; return ret;
} }

8
source/Ox.UI/js/Core/Ox.LoadingIcon.js
View file

@ -10,8 +10,8 @@ Ox.LoadingIcon <f:Ox.Element> Loading Icon Element
@*/ @*/
Ox.LoadingIcon = function(options, self) { Ox.LoadingIcon = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element('<img>', self) var that = Ox.Element('<img>', self)
.defaults({ .defaults({
size: 'medium' size: 'medium'
}) })
@ -42,6 +42,6 @@ Ox.LoadingIcon = function(options, self) {
opacity: 0 opacity: 0
}, 250); }, 250);
return that; return that;
} };
return that; return that;
} };

10
source/Ox.UI/js/Core/Ox.Request.js
View file

@ -135,10 +135,10 @@ Ox.Request = function(options) {
width: 768, width: 768,
height: 384 height: 384
}), }),
$dialog = new Ox.Dialog({ $dialog = Ox.Dialog({
title: 'Application Error', title: 'Application Error',
buttons: [ buttons: [
new Ox.Button({ Ox.Button({
title: 'Close' title: 'Close'
}) })
.bindEvent({ .bindEvent({
@ -186,10 +186,10 @@ Ox.Request = function(options) {
if (data.status.code < 500) { if (data.status.code < 500) {
callback(data); callback(data);
} else { } else {
var $dialog = new Ox.Dialog({ var $dialog = Ox.Dialog({
title: 'Application Error', title: 'Application Error',
buttons: [ buttons: [
new Ox.Button({ Ox.Button({
id: 'details', id: 'details',
title: 'Details' title: 'Details'
}) })
@ -200,7 +200,7 @@ Ox.Request = function(options) {
}); });
} }
}), }),
new Ox.Button({ Ox.Button({
id: 'close', id: 'close',
title: 'Close' title: 'Close'
}) })

16
source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js
View file

@ -18,7 +18,7 @@ Ox.SyntaxHighlighter <function> Syntax Highlighter
Ox.SyntaxHighlighter = function(options, self) { Ox.SyntaxHighlighter = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
lineLength: 0, lineLength: 0,
@ -61,9 +61,9 @@ Ox.SyntaxHighlighter = function(options, self) {
classNames = 'Ox' + Ox.toTitleCase(token.type); classNames = 'Ox' + Ox.toTitleCase(token.type);
if (self.options.showWhitespace && token.type == 'whitespace') { if (self.options.showWhitespace && token.type == 'whitespace') {
if (isAfterLinebreak() && hasIrregularSpaces()) { if (isAfterLinebreak() && hasIrregularSpaces()) {
classNames += ' OxLeading' classNames += ' OxLeading';
} else if (isBeforeLinebreak()) { } else if (isBeforeLinebreak()) {
classNames += ' OxTrailing' classNames += ' OxTrailing';
} }
} }
source += '<span class="' + classNames + '">' + source += '<span class="' + classNames + '">' +
@ -89,7 +89,7 @@ Ox.SyntaxHighlighter = function(options, self) {
lines = source.split('<br/>'); lines = source.split('<br/>');
that.empty(); that.empty();
if (self.options.showLineNumbers) { if (self.options.showLineNumbers) {
$lineNumbers = new Ox.Element() $lineNumbers = Ox.Element()
.addClass('OxLineNumbers') .addClass('OxLineNumbers')
.html( .html(
Ox.range(lines.length).map(function(line) { Ox.range(lines.length).map(function(line) {
@ -98,19 +98,19 @@ Ox.SyntaxHighlighter = function(options, self) {
) )
.appendTo(that); .appendTo(that);
} }
$source = new Ox.Element() $source = Ox.Element()
.addClass('OxSourceCode') .addClass('OxSourceCode')
.html(source) .html(source)
.appendTo(that); .appendTo(that);
if (self.options.lineLength) { if (self.options.lineLength) {
$line = new Ox.Element() $line = Ox.Element()
.css({ .css({
position: 'absolute', position: 'absolute',
top: '-1000px' top: '-1000px'
}) })
.html(Ox.repeat('&nbsp;', self.options.lineLength)) .html(Ox.repeat('&nbsp;', self.options.lineLength))
.appendTo(that), .appendTo(that);
width = $line.width() + 4; // add padding width = $line.width() + 4; // add padding
$line.removeElement(); $line.removeElement();
['moz', 'webkit'].forEach(function(browser) { ['moz', 'webkit'].forEach(function(browser) {
$source.css({ $source.css({

7
source/Ox.UI/js/Form/Ox.Button.js
View file

@ -24,8 +24,9 @@ Ox.Button <f:Ox.Element> Button Object
@*/ @*/
Ox.Button = function(options, self) { Ox.Button = function(options, self) {
var self = self || {},
that = new Ox.Element('<input>', self) self = self || {};
var that = Ox.Element('<input>', self)
.defaults({ .defaults({
disabled: false, disabled: false,
group: false, group: false,
@ -72,7 +73,7 @@ Ox.Button = function(options, self) {
if (self.options.tooltip) { if (self.options.tooltip) {
self.tooltips = Ox.isArray(self.options.tooltip) ? self.options.tooltip : [self.options.tooltip]; self.tooltips = Ox.isArray(self.options.tooltip) ? self.options.tooltip : [self.options.tooltip];
self.$tooltip = new Ox.Tooltip({ self.$tooltip = Ox.Tooltip({
title: self.tooltips[self.selectedTitle] title: self.tooltips[self.selectedTitle]
}); });
that.mouseenter(mouseenter) that.mouseenter(mouseenter)

4
source/Ox.UI/js/Form/Ox.ButtonGroup.js
View file

@ -16,8 +16,8 @@ Ox.ButtonGroup <f:Ox.Element> ButtonGroup Object
Ox.ButtonGroup = function(options, self) { Ox.ButtonGroup = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
buttons: [], buttons: [],
max: 1, max: 1,

8
source/Ox.UI/js/Form/Ox.Checkbox.js
View file

@ -17,8 +17,8 @@ Ox.Checkbox <f:Ox.Element> Checkbox Element
Ox.Checkbox = function(options, self) { Ox.Checkbox = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
disabled: false, disabled: false,
id: '', id: '',
@ -41,7 +41,7 @@ Ox.Checkbox = function(options, self) {
self.options.width != 'auto' && that.css({ self.options.width != 'auto' && that.css({
width: self.options.width + 'px' width: self.options.width + 'px'
}); });
self.$title = new Ox.Label({ self.$title = Ox.Label({
disabled: self.options.disabled, disabled: self.options.disabled,
id: self.options.id + 'Label', id: self.options.id + 'Label',
overlap: 'left', overlap: 'left',
@ -55,7 +55,7 @@ Ox.Checkbox = function(options, self) {
.appendTo(that); .appendTo(that);
} }
self.$button = new Ox.Button({ self.$button = Ox.Button({
disabled: self.options.disabled, disabled: self.options.disabled,
id: self.options.id + 'Button', id: self.options.id + 'Button',
title: [ title: [

6
source/Ox.UI/js/Form/Ox.CheckboxGroup.js
View file

@ -17,8 +17,8 @@ Ox.CheckboxGroup <f:Ox.Element> CheckboxGroup Object
Ox.CheckboxGroup = function(options, self) { Ox.CheckboxGroup = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
checkboxes: [], checkboxes: [],
max: 1, max: 1,
@ -45,7 +45,7 @@ Ox.CheckboxGroup = function(options, self) {
}); });
self.options.checkboxes.forEach(function(checkbox, position) { self.options.checkboxes.forEach(function(checkbox, position) {
var id = self.options.id + Ox.toTitleCase(checkbox.id) var id = self.options.id + Ox.toTitleCase(checkbox.id)
self.$checkboxes[position] = new Ox.Checkbox($.extend(checkbox, { self.$checkboxes[position] = Ox.Checkbox($.extend(checkbox, {
group: true, group: true,
id: id, id: id,
width: self.checkboxWidth[position] width: self.checkboxWidth[position]

14
source/Ox.UI/js/Form/Ox.ColorInput.js
View file

@ -11,18 +11,18 @@ Ox.ColorInput <f:Ox.InputGroup> ColorInput Element
@*/ @*/
Ox.ColorInput = function(options, self) { Ox.ColorInput = function(options, self) {
var self = $.extend(self || {}, { self = $.extend(self || {}, {
options: $.extend({ options: $.extend({
id: '', id: '',
value: '0, 0, 0' value: '0, 0, 0'
}, options) }, options)
}), });
that; var that;
self.values = self.options.value.split(', '); self.values = self.options.value.split(', ');
self.$inputs = []; self.$inputs = [];
['red', 'green', 'blue'].forEach(function(v, i) { ['red', 'green', 'blue'].forEach(function(v, i) {
self.$inputs[i] = new Ox.Input({ self.$inputs[i] = Ox.Input({
id: v, id: v,
max: 255, max: 255,
type: 'integer', type: 'integer',
@ -31,14 +31,14 @@ Ox.ColorInput = function(options, self) {
}) })
.bindEvent('autovalidate', change); .bindEvent('autovalidate', change);
}); });
self.$inputs[3] = new Ox.Label({ self.$inputs[3] = Ox.Label({
id: 'color', id: 'color',
width: 36 width: 36
}) })
.css({ .css({
background: 'rgb(' + self.options.value + ')' background: 'rgb(' + self.options.value + ')'
}); });
self.$inputs[4] = new Ox.ColorPicker({ self.$inputs[4] = Ox.ColorPicker({
id: 'picker' id: 'picker'
}) })
.bindEvent('change', function(event, data) { .bindEvent('change', function(event, data) {
@ -55,7 +55,7 @@ Ox.ColorInput = function(options, self) {
width: 16 // this is just a hack to make the InputGroup layout work width: 16 // this is just a hack to make the InputGroup layout work
}); });
that = new Ox.InputGroup({ that = Ox.InputGroup({
id: self.options.id, id: self.options.id,
inputs: self.$inputs, inputs: self.$inputs,
separators: [ separators: [

10
source/Ox.UI/js/Form/Ox.ColorPicker.js
View file

@ -14,8 +14,8 @@ Ox.ColorPicker <f:Ox.Element> ColorPicker Element
Ox.ColorPicker = function(options, self) { Ox.ColorPicker = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
id: '', id: '',
value: '0, 0, 0' value: '0, 0, 0'
@ -28,7 +28,7 @@ Ox.ColorPicker = function(options, self) {
self.values = self.options.value.split(', '); self.values = self.options.value.split(', ');
Ox.range(3).forEach(function(i) { Ox.range(3).forEach(function(i) {
self.$ranges[i] = new Ox.Range({ self.$ranges[i] = Ox.Range({
arrows: true, arrows: true,
id: self.options.id + Ox.toTitleCase(self.rgb[i]), id: self.options.id + Ox.toTitleCase(self.rgb[i]),
max: 255, max: 255,
@ -64,7 +64,7 @@ Ox.ColorPicker = function(options, self) {
} }
}); });
that = new Ox.Picker({ that = Ox.Picker({
element: that, element: that,
elementHeight: 46, elementHeight: 46,
elementWidth: 328, elementWidth: 328,
@ -97,7 +97,7 @@ Ox.ColorPicker = function(options, self) {
'rgb(' + $.map(Ox.range(3), function(v) { 'rgb(' + $.map(Ox.range(3), function(v) {
return v == index ? 255 : self.values[v]; return v == index ? 255 : self.values[v];
}).join(', ') + ')' }).join(', ') + ')'
] ];
} }
return that; return that;

16
source/Ox.UI/js/Form/Ox.DateInput.js
View file

@ -15,7 +15,8 @@ Ox.DateInput <f:Ox.Element> DateInput Element
@*/ @*/
Ox.DateInput = function(options, self) { Ox.DateInput = function(options, self) {
var self = $.extend(self || {}, { var that;
self = $.extend(self || {}, {
options: $.extend({ options: $.extend({
format: 'short', format: 'short',
value: Ox.formatDate(new Date(), '%F'), value: Ox.formatDate(new Date(), '%F'),
@ -27,8 +28,7 @@ Ox.DateInput = function(options, self) {
year: 48 year: 48
} }
}, options) }, options)
}), });
that;
$.extend(self, { $.extend(self, {
date: new Date(self.options.value.replace(/-/g, '/')), date: new Date(self.options.value.replace(/-/g, '/')),
@ -48,7 +48,7 @@ Ox.DateInput = function(options, self) {
}); });
self.$input = $.extend(self.options.weekday ? { self.$input = $.extend(self.options.weekday ? {
weekday: new Ox.Input({ weekday: Ox.Input({
autocomplete: self.weekdays, autocomplete: self.weekdays,
autocompleteReplace: true, autocompleteReplace: true,
autocompleteReplaceCorrect: true, autocompleteReplaceCorrect: true,
@ -58,7 +58,7 @@ Ox.DateInput = function(options, self) {
}) })
.bindEvent('autocomplete', changeWeekday), .bindEvent('autocomplete', changeWeekday),
} : {}, { } : {}, {
day: new Ox.Input({ day: Ox.Input({
autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth( autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth(
parseInt(Ox.formatDate(self.date, '%Y'), 10), parseInt(Ox.formatDate(self.date, '%Y'), 10),
parseInt(Ox.formatDate(self.date, '%m'), 10) parseInt(Ox.formatDate(self.date, '%m'), 10)
@ -73,7 +73,7 @@ Ox.DateInput = function(options, self) {
width: self.options.width.day width: self.options.width.day
}) })
.bindEvent('autocomplete', changeDay), .bindEvent('autocomplete', changeDay),
month: new Ox.Input({ month: Ox.Input({
autocomplete: self.options.format == 'short' ? $.map(Ox.range(1, 13), function(v, i) { autocomplete: self.options.format == 'short' ? $.map(Ox.range(1, 13), function(v, i) {
return Ox.pad(v, 2); return Ox.pad(v, 2);
}) : self.months, }) : self.months,
@ -85,7 +85,7 @@ Ox.DateInput = function(options, self) {
width: self.options.width.month width: self.options.width.month
}) })
.bindEvent('autocomplete', changeMonthOrYear), .bindEvent('autocomplete', changeMonthOrYear),
year: new Ox.Input({ year: Ox.Input({
autocomplete: $.map($.merge(Ox.range(1900, 3000), Ox.range(1000, 1900)), function(v, i) { autocomplete: $.map($.merge(Ox.range(1900, 3000), Ox.range(1000, 1900)), function(v, i) {
return v.toString(); return v.toString();
}), }),
@ -99,7 +99,7 @@ Ox.DateInput = function(options, self) {
.bindEvent('autocomplete', changeMonthOrYear) .bindEvent('autocomplete', changeMonthOrYear)
}); });
that = new Ox.InputGroup($.extend(self.options, { that = Ox.InputGroup($.extend(self.options, {
id: self.options.id, id: self.options.id,
inputs: $.merge(self.options.weekday ? [ inputs: $.merge(self.options.weekday ? [
self.$input.weekday self.$input.weekday

10
source/Ox.UI/js/Form/Ox.DateTimeInput.js
View file

@ -17,8 +17,8 @@ Ox.DateTimeInput <f:Ox.Element> DateTimeInput Element
Ox.DateTimeInput = function(options, self) { Ox.DateTimeInput = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
ampm: false, ampm: false,
format: 'short', format: 'short',
@ -31,15 +31,15 @@ Ox.DateTimeInput = function(options, self) {
self.values = self.options.value.split(' '); self.values = self.options.value.split(' ');
//Ox.print(self.values) //Ox.print(self.values)
that = new Ox.InputGroup({ that = Ox.InputGroup({
inputs: [ inputs: [
new Ox.DateInput({ Ox.DateInput({
format: self.options.format, format: self.options.format,
id: 'date', id: 'date',
value: self.values[0], value: self.values[0],
weekday: self.options.weekday weekday: self.options.weekday
}), }),
new Ox.TimeInput({ Ox.TimeInput({
ampm: self.options.ampm, ampm: self.options.ampm,
id: 'time', id: 'time',
value: self.values[1], value: self.values[1],

2
source/Ox.UI/js/Form/Ox.Filter.js
View file

@ -292,7 +292,7 @@ Ox.Filter = function(options, self) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos; subpos = Ox.isUndefined(subpos) ? -1 : subpos;
var isGroup = subpos == -1 && self.options.query.conditions[pos].conditions; var isGroup = subpos == -1 && self.options.query.conditions[pos].conditions;
return Ox.merge([ return Ox.merge([
new Ox.Button({ Ox.Button({
disabled: self.options.query.conditions.length == 1, disabled: self.options.query.conditions.length == 1,
id: 'remove', id: 'remove',
title: 'remove', title: 'remove',

8
source/Ox.UI/js/Form/Ox.Form.js
View file

@ -15,8 +15,8 @@ Ox.Form <f:Ox.Element> Form Object
Ox.Form = function(options, self) { Ox.Form = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
error: '', error: '',
id: '', id: '',
@ -38,7 +38,7 @@ Ox.Form = function(options, self) {
self.options.items.forEach(function(item, i) { self.options.items.forEach(function(item, i) {
self.itemIds[i] = item.options('id') || item.id; self.itemIds[i] = item.options('id') || item.id;
self.itemIsValid[i] = !!item.value().length; self.itemIsValid[i] = !!item.value().length;
that.append(self.$items[i] = new Ox.FormItem({element: item})); that.append(self.$items[i] = Ox.FormItem({element: item}));
item.bindEvent({ item.bindEvent({
/* /*
blur: function(event, data) { blur: function(event, data) {
@ -89,7 +89,7 @@ Ox.Form = function(options, self) {
that.addItem = function(pos, item) { that.addItem = function(pos, item) {
Ox.print('addItem', pos) Ox.print('addItem', pos)
self.options.items.splice(pos, 0, item); self.options.items.splice(pos, 0, item);
self.$items.splice(pos, 0, new Ox.FormItem({element: item})); self.$items.splice(pos, 0, Ox.FormItem({element: item}));
pos == 0 ? pos == 0 ?
self.$items[pos].insertBefore(self.$items[0]) : self.$items[pos].insertBefore(self.$items[0]) :
self.$items[pos].insertAfter(self.$items[pos - 1]); self.$items[pos].insertAfter(self.$items[pos - 1]);

4
source/Ox.UI/js/Form/Ox.FormElementGroup.js
View file

@ -16,8 +16,8 @@ Ox.FormElementGroup <f:Ox.Element> FormElementGroup Element
Ox.FormElementGroup = function(options, self) { Ox.FormElementGroup = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
id: '', id: '',
elements: [], elements: [],

10
source/Ox.UI/js/Form/Ox.FormItem.js
View file

@ -13,8 +13,8 @@ Ox.FormItem <f:Ox.Element> FormItem Element, wrap form element with an error mes
Ox.FormItem = function(options, self) { Ox.FormItem = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
element: null, element: null,
error: '', error: '',
@ -23,7 +23,7 @@ Ox.FormItem = function(options, self) {
.addClass('OxFormItem') .addClass('OxFormItem')
.append(self.options.element); .append(self.options.element);
self.$message = new Ox.Element() self.$message = Ox.Element()
.addClass('OxFormMessage') .addClass('OxFormMessage')
.appendTo(that); .appendTo(that);
@ -33,7 +33,7 @@ Ox.FormItem = function(options, self) {
@*/ @*/
that.setMessage = function(message) { that.setMessage = function(message) {
self.$message.html(message)[message !== '' ? 'show' : 'hide'](); self.$message.html(message)[message !== '' ? 'show' : 'hide']();
} };
/*@ /*@
value <f> get value value <f> get value
@ -45,4 +45,4 @@ Ox.FormItem = function(options, self) {
return that; return that;
} };

48
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -59,8 +59,8 @@ Ox.Input <f:Ox.Element> Input Element
Ox.Input = function(options, self) { Ox.Input = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
arrows: false, arrows: false,
arrowStep: 1, arrowStep: 1,
@ -133,7 +133,7 @@ Ox.Input = function(options, self) {
} }
if (self.options.label) { if (self.options.label) {
self.$label = new Ox.Label({ self.$label = Ox.Label({
overlap: 'right', overlap: 'right',
textAlign: 'right', textAlign: 'right',
title: self.options.label, title: self.options.label,
@ -152,7 +152,7 @@ Ox.Input = function(options, self) {
if (self.options.arrows) { if (self.options.arrows) {
self.arrows = []; self.arrows = [];
self.arrows[0] = [ self.arrows[0] = [
new Ox.Button({ Ox.Button({
overlap: 'right', overlap: 'right',
title: 'left', title: 'left',
type: 'image' type: 'image'
@ -164,7 +164,7 @@ Ox.Input = function(options, self) {
clickArrow(0); clickArrow(0);
}) })
.appendTo(that), .appendTo(that),
new Ox.Button({ Ox.Button({
overlap: 'left', overlap: 'left',
title: 'right', title: 'right',
type: 'image' type: 'image'
@ -187,7 +187,7 @@ Ox.Input = function(options, self) {
}); });
if (self.options.clear) { if (self.options.clear) {
self.$button = new Ox.Button({ self.$button = Ox.Button({
overlap: 'left', overlap: 'left',
title: 'close', title: 'close',
type: 'image' type: 'image'
@ -401,7 +401,7 @@ Ox.Input = function(options, self) {
} }
function constructAutocompleteMenu() { function constructAutocompleteMenu() {
var menu = new Ox.Menu({ var menu = Ox.Menu({
element: self.$input, element: self.$input,
id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?, id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
offset: { offset: {
@ -908,8 +908,8 @@ Ox.Input_ = function(options, self) {
events: events:
*/ */
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
autocomplete: null, autocomplete: null,
autocorrect: null, autocorrect: null,
@ -1066,7 +1066,7 @@ Ox.Input_ = function(options, self) {
self.options[self.keyName].forEach(function(key, keyPos) { self.options[self.keyName].forEach(function(key, keyPos) {
//Ox.print('keyPos key', keyPos, key) //Ox.print('keyPos key', keyPos, key)
if (self.keyName == 'label' && key.label.length == 1) { if (self.keyName == 'label' && key.label.length == 1) {
that.$key[keyPos] = new Ox.Label({ that.$key[keyPos] = Ox.Label({
overlap: 'right', overlap: 'right',
title: key.label[0].title, title: key.label[0].title,
width: self.options.labelWidth width: self.options.labelWidth
@ -1083,7 +1083,7 @@ Ox.Input_ = function(options, self) {
self.selectKeyId = self.options.id + Ox.toTitleCase(self.keyName) + self.selectKeyId = self.options.id + Ox.toTitleCase(self.keyName) +
(self.options[self.keyName].length == 1 ? '' : keyPos); (self.options[self.keyName].length == 1 ? '' : keyPos);
//Ox.print('three', self.selectedKey, keyPos, self.selectedKey[keyPos]); //Ox.print('three', self.selectedKey, keyPos, self.selectedKey[keyPos]);
that.$key[keyPos] = new Ox.Select({ that.$key[keyPos] = Ox.Select({
id: self.selectKeyId, id: self.selectKeyId,
items: $.map(key.label, function(value, valuePos) { items: $.map(key.label, function(value, valuePos) {
return { return {
@ -1107,7 +1107,7 @@ Ox.Input_ = function(options, self) {
} }
if (self.options.clear) { if (self.options.clear) {
that.$clear = new Ox.Button({ that.$clear = Ox.Button({
overlap: 'left', overlap: 'left',
title: 'close', title: 'close',
type: 'image' type: 'image'
@ -1120,7 +1120,7 @@ Ox.Input_ = function(options, self) {
} }
if (self.options.unit.length == 1) { if (self.options.unit.length == 1) {
that.$unit = new Ox.Label({ that.$unit = Ox.Label({
overlap: 'left', overlap: 'left',
title: self.options.unit[0].title, title: self.options.unit[0].title,
width: self.options.unitWidth width: self.options.unitWidth
@ -1134,7 +1134,7 @@ Ox.Input_ = function(options, self) {
.appendTo(that); .appendTo(that);
} else if (self.options.unit.length > 1) { } else if (self.options.unit.length > 1) {
self.selectUnitId = self.options.id + 'Unit'; self.selectUnitId = self.options.id + 'Unit';
that.$unit = new Ox.Select({ that.$unit = Ox.Select({
id: self.selectUnitId, id: self.selectUnitId,
items: $.map(self.options.unit, function(unit, i) { items: $.map(self.options.unit, function(unit, i) {
//Ox.print('unit', unit) //Ox.print('unit', unit)
@ -1159,7 +1159,7 @@ Ox.Input_ = function(options, self) {
that.$separator = []; that.$separator = [];
self.options.value.forEach(function(v, i) { self.options.value.forEach(function(v, i) {
if (i < self.values - 1) { if (i < self.values - 1) {
that.$separator[i] = new Ox.Label({ that.$separator[i] = Ox.Label({
textAlign: 'center', textAlign: 'center',
title: self.options.separator[i], title: self.options.separator[i],
width: self.options.separatorWidth[i] + 32 width: self.options.separatorWidth[i] + 32
@ -1185,7 +1185,7 @@ Ox.Input_ = function(options, self) {
//self.margin -= (i == 0 ? 16 : self.options.value[i - 1].width) //self.margin -= (i == 0 ? 16 : self.options.value[i - 1].width)
//Ox.print('v:', v, 'id:', id) //Ox.print('v:', v, 'id:', id)
if (self.options.type == 'select') { if (self.options.type == 'select') {
that.$input[i] = new Ox.Select({ that.$input[i] = Ox.Select({
id: v.id, id: v.id,
items: v.items, items: v.items,
width: v.width width: v.width
@ -1194,12 +1194,12 @@ Ox.Input_ = function(options, self) {
float: 'left' float: 'left'
}); });
} else if (self.options.type == 'range') { } else if (self.options.type == 'range') {
that.$input[i] = new Ox.Range(v) that.$input[i] = Ox.Range(v)
.css({ .css({
float: 'left' float: 'left'
}); });
} else { } else {
that.$input[i] = new Ox.InputElement({ that.$input[i] = Ox.InputElement({
autocomplete: self.options.autocomplete[id], autocomplete: self.options.autocomplete[id],
autocorrect: self.options.autocorrect[id], autocorrect: self.options.autocorrect[id],
autosuggest: self.options.autosuggest[id], autosuggest: self.options.autosuggest[id],
@ -1339,8 +1339,8 @@ Ox.Input_ = function(options, self) {
Ox.InputElement_ = function(options, self) { Ox.InputElement_ = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element( var that = Ox.Element(
options.type == 'textarea' ? 'textarea' : 'input', self options.type == 'textarea' ? 'textarea' : 'input', self
) )
.defaults({ .defaults({
@ -1388,7 +1388,7 @@ Ox.InputElement_ = function(options, self) {
if (self.options.autosuggest) { if (self.options.autosuggest) {
self.autosuggestId = self.options.id + 'Menu'; // fixme: we do this in other places ... are we doing it the same way? var name? self.autosuggestId = self.options.id + 'Menu'; // fixme: we do this in other places ... are we doing it the same way? var name?
self.$autosuggestMenu = new Ox.Menu({ self.$autosuggestMenu = Ox.Menu({
element: that.$element, element: that.$element,
id: self.autosuggestId, id: self.autosuggestId,
offset: { offset: {
@ -1663,8 +1663,8 @@ Ox.Range_ = function(options, self) {
/* /*
init init
*/ */
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
animate: false, animate: false,
arrows: false, arrows: false,
@ -1715,7 +1715,7 @@ Ox.Range_ = function(options, self) {
.click(clickArrowDec) .click(clickArrowDec)
.appendTo(that.$element); .appendTo(that.$element);
} }
var $track = new Ox.Element() var $track = Ox.Element()
.addClass('OxTrack') .addClass('OxTrack')
.mousedown(clickTrack) .mousedown(clickTrack)
.appendTo(that.$element); .appendTo(that.$element);

6
source/Ox.UI/js/Form/Ox.InputGroup.js
View file

@ -14,8 +14,8 @@ Ox.InputGroup <f:Ox.Element> InputGroup Object
@*/ @*/
Ox.InputGroup = function(options, self) { Ox.InputGroup = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
id: '', id: '',
inputs: [], inputs: [],
@ -42,7 +42,7 @@ Ox.InputGroup = function(options, self) {
self.options.separators.forEach(function(v, i) { self.options.separators.forEach(function(v, i) {
self.options.id == 'debug' && Ox.print('separator #' + i + ' ' + self.options.inputs[i].options('id') + ' ' + self.options.inputs[i].options('width')) self.options.id == 'debug' && Ox.print('separator #' + i + ' ' + self.options.inputs[i].options('id') + ' ' + self.options.inputs[i].options('width'))
self.$separator[i] = new Ox.Label({ self.$separator[i] = Ox.Label({
textAlign: 'center', textAlign: 'center',
title: v.title, title: v.title,
width: v.width + 32 width: v.width + 32

8
source/Ox.UI/js/Form/Ox.Label.js
View file

@ -9,8 +9,8 @@ Ox.Label <f:Ox.Element> Label Object
@*/ @*/
Ox.Label = function(options, self) { Ox.Label = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
disabled: false, disabled: false,
id: '', id: '',
@ -36,9 +36,9 @@ Ox.Label = function(options, self) {
if (key == 'title') { if (key == 'title') {
that.html(value); that.html(value);
} else if (key == 'width') { } else if (key == 'width') {
that.css({width: self.options.width - 14 + 'px'}) that.css({width: self.options.width - 14 + 'px'});
} }
} };
return that; return that;

9
source/Ox.UI/js/Form/Ox.OptionGroup.js
View file

@ -14,10 +14,9 @@ Ox.OptionGroup = function(items, min, max, property) {
/* /*
to be used by ButtonGroup, CheckboxGroup, Select and Menu to be used by ButtonGroup, CheckboxGroup, Select and Menu
*/ */
var length = items.length;
var property = property || 'checked' property = property || 'checked';
length = items.length, max = max == -1 ? length : max;
max = max == -1 ? length : max;
function getLastBefore(pos) { function getLastBefore(pos) {
// returns the position of the last checked item before position pos // returns the position of the last checked item before position pos
@ -47,7 +46,7 @@ Ox.OptionGroup = function(items, min, max, property) {
if (item[property]) { if (item[property]) {
num++; num++;
} }
}) });
return num; return num;
} }

18
source/Ox.UI/js/Form/Ox.Picker.js
View file

@ -16,8 +16,8 @@ Ox.Picker <f:Ox.Element> Picker Object
Ox.Picker = function(options, self) { Ox.Picker = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
element: null, element: null,
elementHeight: 128, elementHeight: 128,
@ -27,7 +27,7 @@ Ox.Picker = function(options, self) {
}) })
.options(options || {}); .options(options || {});
self.$selectButton = new Ox.Button({ self.$selectButton = Ox.Button({
overlap: self.options.overlap, overlap: self.options.overlap,
title: 'select', title: 'select',
type: 'image' type: 'image'
@ -35,7 +35,7 @@ Ox.Picker = function(options, self) {
.click(showMenu) .click(showMenu)
.appendTo(that); .appendTo(that);
self.$menu = new Ox.Element() self.$menu = Ox.Element()
.addClass('OxPicker') .addClass('OxPicker')
.css({ .css({
width: self.options.elementWidth + 'px', width: self.options.elementWidth + 'px',
@ -49,18 +49,18 @@ Ox.Picker = function(options, self) {
}) })
.appendTo(self.$menu); .appendTo(self.$menu);
self.$bar = new Ox.Bar({ self.$bar = Ox.Bar({
orientation: 'horizontal', orientation: 'horizontal',
size: 24 size: 24
}) })
.appendTo(self.$menu); .appendTo(self.$menu);
that.$label = new Ox.Label({ that.$label = Ox.Label({
width: self.options.elementWidth - 60 width: self.options.elementWidth - 60
}) })
.appendTo(self.$bar); .appendTo(self.$bar);
self.$doneButton = new Ox.Button({ self.$doneButton = Ox.Button({
title: 'Done', title: 'Done',
width: 48 width: 48
}) })
@ -81,7 +81,7 @@ Ox.Picker = function(options, self) {
WebkitBorderRadius: '8px' WebkitBorderRadius: '8px'
}); });
that.triggerEvent('hide'); that.triggerEvent('hide');
}; }
function showMenu() { function showMenu() {
var offset = that.offset(), var offset = that.offset(),
@ -101,7 +101,7 @@ Ox.Picker = function(options, self) {
}) })
.appendTo(Ox.UI.$body); .appendTo(Ox.UI.$body);
that.triggerEvent('show'); that.triggerEvent('show');
}; }
return that; return that;

13
source/Ox.UI/js/Form/Ox.PlaceInput.js
View file

@ -13,22 +13,21 @@ Ox.PlaceInput <f:Ox.FormElementGroup> PlaceInput Object
Ox.PlaceInput = function(options, self) { Ox.PlaceInput = function(options, self) {
var self = $.extend(self || {}, { var that;
self = $.extend(self || {}, {
options: $.extend({ options: $.extend({
id: '', id: '',
value: 'United States' value: 'United States'
}, options) }, options)
}), });
that; that = Ox.FormElementGroup({
that = new Ox.FormElementGroup({
id: self.options.id, id: self.options.id,
elements: [ elements: [
new Ox.Input({ Ox.Input({
id: 'input', id: 'input',
value: self.options.value value: self.options.value
}), }),
new Ox.PlacePicker({ Ox.PlacePicker({
id: 'picker', id: 'picker',
overlap: 'left', overlap: 'left',
value: self.options.value value: self.options.value

26
source/Ox.UI/js/Form/Ox.PlacePicker.js
View file

@ -13,21 +13,21 @@ Ox.PlacePicker <f:Ox.Element> PlacePicker Object
Ox.PlacePicker = function(options, self) { Ox.PlacePicker = function(options, self) {
var self = $.extend(self || {}, { var that;
self = $.extend(self || {}, {
options: $.extend({ options: $.extend({
id: '', id: '',
value: 'United States' value: 'United States'
}, options) }, options)
}), });
that;
self.$element = new Ox.Element() self.$element = Ox.Element()
.css({ .css({
width: '256px', width: '256px',
height: '192px' height: '192px'
}) })
.append( .append(
self.$topBar = new Ox.Bar({ self.$topBar = Ox.Bar({
size: 16 size: 16
}) })
.css({ .css({
@ -35,7 +35,7 @@ Ox.PlacePicker = function(options, self) {
WebkitBorderRadius: '0 8px 0 0' WebkitBorderRadius: '0 8px 0 0'
}) })
.append( .append(
self.$input = new Ox.Input({ self.$input = Ox.Input({
clear: true, clear: true,
id: self.options.id + 'Input', id: self.options.id + 'Input',
placeholder: 'Find', placeholder: 'Find',
@ -45,18 +45,18 @@ Ox.PlacePicker = function(options, self) {
) )
) )
.append( .append(
self.$container = new Ox.Element() self.$container = Ox.Element()
.css({ .css({
width: '256px', width: '256px',
height: '160px' height: '160px'
}) })
) )
.append( .append(
self.$bottomBar = new Ox.Bar({ self.$bottomBar = Ox.Bar({
size: 16 size: 16
}) })
.append( .append(
self.$range = new Ox.Range({ self.$range = Ox.Range({
arrows: true, arrows: true,
id: self.options.id + 'Range', id: self.options.id + 'Range',
max: 22, max: 22,
@ -83,7 +83,7 @@ Ox.PlacePicker = function(options, self) {
WebkitBorderRadius: 0 WebkitBorderRadius: 0
}); });
that = new Ox.Picker({ that = Ox.Picker({
element: self.$element, element: self.$element,
elementHeight: 192, elementHeight: 192,
elementWidth: 256, elementWidth: 256,
@ -93,7 +93,7 @@ Ox.PlacePicker = function(options, self) {
}, self) }, self)
.bindEvent('show', showPicker); .bindEvent('show', showPicker);
that.$label.bind('click', clickLabel) that.$label.bind('click', clickLabel);
self.map = false; self.map = false;
@ -118,7 +118,7 @@ Ox.PlacePicker = function(options, self) {
//Ox.print('findPlace', data); //Ox.print('findPlace', data);
self.$map.find(data.value, function(place) { self.$map.find(data.value, function(place) {
place && that.$label.html(place.geoname); place && that.$label.html(place.geoname);
}) });
} }
function onSelect(event, data) { function onSelect(event, data) {
@ -133,7 +133,7 @@ Ox.PlacePicker = function(options, self) {
function showPicker() { function showPicker() {
if (!self.map) { if (!self.map) {
self.$map = new Ox.Map({ self.$map = Ox.Map({
clickable: true, clickable: true,
id: self.options.id + 'Map', id: self.options.id + 'Map',
//places: [self.options.value] //places: [self.options.value]

10
source/Ox.UI/js/Form/Ox.Range.js
View file

@ -26,8 +26,8 @@ Ox.Range <f:Ox.Element> Range Object
Ox.Range = function(options, self) { Ox.Range = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
arrows: false, arrows: false,
arrowStep: 1, arrowStep: 1,
@ -66,7 +66,7 @@ Ox.Range = function(options, self) {
if (self.options.arrows) { if (self.options.arrows) {
self.$arrows = []; self.$arrows = [];
Ox.range(0, 2).forEach(function(i) { Ox.range(0, 2).forEach(function(i) {
self.$arrows[i] = new Ox.Button({ self.$arrows[i] = Ox.Button({
overlap: i == 0 ? 'right' : 'left', overlap: i == 0 ? 'right' : 'left',
title: self.options.arrowSymbols[i], title: self.options.arrowSymbols[i],
type: 'image' type: 'image'
@ -84,7 +84,7 @@ Ox.Range = function(options, self) {
}); });
} }
self.$track = new Ox.Element() self.$track = Ox.Element()
.addClass('OxTrack') .addClass('OxTrack')
.css($.extend({ .css($.extend({
width: (self.trackSize - 2) + 'px' width: (self.trackSize - 2) + 'px'
@ -235,7 +235,7 @@ Ox.Range = function(options, self) {
} }
function setValue(value, animate) { function setValue(value, animate) {
var value = Ox.limit(value, self.options.min, self.options.max); value = Ox.limit(value, self.options.min, self.options.max);
if (value != self.options.value) { if (value != self.options.value) {
//time = getTime(self.options.value, value); //time = getTime(self.options.value, value);
self.options.value = value; self.options.value = value;

12
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -24,8 +24,8 @@ Ox.Select <f:Ox.Element> Select Object
Ox.Select = function(options, self) { Ox.Select = function(options, self) {
// fixme: selected item needs attribute "checked", not "selected" ... that's strange // fixme: selected item needs attribute "checked", not "selected" ... that's strange
var self = self || {}, self = self || {};
that = new Ox.Element({ var that = Ox.Element({
tooltip: options.tooltip || '' tooltip: options.tooltip || ''
}, self) }, self)
.defaults({ .defaults({
@ -57,7 +57,7 @@ Ox.Select = function(options, self) {
key_down: showMenu key_down: showMenu
}); });
Ox.print('Ox.Select', self.options) Ox.print('Ox.Select', self.options);
$.extend(self, { $.extend(self, {
buttonId: self.options.id + 'Button', buttonId: self.options.id + 'Button',
@ -87,7 +87,7 @@ Ox.Select = function(options, self) {
// that.focus(); // that.focus();
}) })
.appendTo(that); .appendTo(that);
}; }
if (self.options.type == 'text') { if (self.options.type == 'text') {
self.$title = $('<div>') self.$title = $('<div>')
@ -105,7 +105,7 @@ Ox.Select = function(options, self) {
.appendTo(that.$element); .appendTo(that.$element);
} }
self.$button = new Ox.Button({ self.$button = Ox.Button({
id: self.buttonId, id: self.buttonId,
style: 'symbol', style: 'symbol',
title: 'select', title: 'select',
@ -114,7 +114,7 @@ Ox.Select = function(options, self) {
.bindEvent('click', showMenu) .bindEvent('click', showMenu)
.appendTo(that); .appendTo(that);
self.$menu = new Ox.Menu({ self.$menu = Ox.Menu({
element: self.$title || self.$button, element: self.$title || self.$button,
id: self.menuId, id: self.menuId,
items: [self.options.selectable ? { items: [self.options.selectable ? {

18
source/Ox.UI/js/Form/Ox.TimeInput.js
View file

@ -16,8 +16,8 @@ Ox.TimeInput <f:Ox.Element> TimeInput Object
Ox.TimeInput = function(options, self) { Ox.TimeInput = function(options, self) {
// fixme: seconds get set even if options.seconds is false // fixme: seconds get set even if options.seconds is false
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
ampm: false, ampm: false,
seconds: false, seconds: false,
@ -46,7 +46,7 @@ Ox.TimeInput = function(options, self) {
self.values = getValues(); self.values = getValues();
self.$input = { self.$input = {
hours: new Ox.Input({ hours: Ox.Input({
autocomplete: $.map(self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24), function(v) { autocomplete: $.map(self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24), function(v) {
return Ox.pad(v, 2); return Ox.pad(v, 2);
}), }),
@ -57,7 +57,7 @@ Ox.TimeInput = function(options, self) {
value: self.values.hours, value: self.values.hours,
width: 32//self.options.width.hours width: 32//self.options.width.hours
}), }),
minutes: new Ox.Input({ minutes: Ox.Input({
autocomplete: $.map(Ox.range(0, 60), function(v) { autocomplete: $.map(Ox.range(0, 60), function(v) {
return Ox.pad(v, 2); return Ox.pad(v, 2);
}), }),
@ -68,7 +68,7 @@ Ox.TimeInput = function(options, self) {
value: self.values.minutes, value: self.values.minutes,
width: 32//self.options.width.minutes width: 32//self.options.width.minutes
}), }),
seconds: new Ox.Input({ seconds: Ox.Input({
autocomplete: $.map(Ox.range(0, 60), function(v) { autocomplete: $.map(Ox.range(0, 60), function(v) {
return Ox.pad(v, 2); return Ox.pad(v, 2);
}), }),
@ -79,7 +79,7 @@ Ox.TimeInput = function(options, self) {
value: self.values.seconds, value: self.values.seconds,
width: 32//self.options.width.seconds width: 32//self.options.width.seconds
}), }),
milliseconds: new Ox.Input({ milliseconds: Ox.Input({
autocomplete: $.map(Ox.range(0, 1000), function(v) { autocomplete: $.map(Ox.range(0, 1000), function(v) {
return Ox.pad(v, 3); return Ox.pad(v, 3);
}), }),
@ -90,7 +90,7 @@ Ox.TimeInput = function(options, self) {
value: self.values.milliseconds, value: self.values.milliseconds,
width: 40//self.options.width.milliseconds width: 40//self.options.width.milliseconds
}), }),
ampm: new Ox.Input({ ampm: Ox.Input({
autocomplete: ['AM', 'PM'], autocomplete: ['AM', 'PM'],
autocompleteReplace: true, autocompleteReplace: true,
autocompleteReplaceCorrect: true, autocompleteReplaceCorrect: true,
@ -100,7 +100,7 @@ Ox.TimeInput = function(options, self) {
}) })
}; };
that = new Ox.InputGroup($.extend(self.options, { that = Ox.InputGroup($.extend(self.options, {
inputs: $.merge($.merge($.merge([ inputs: $.merge($.merge($.merge([
self.$input.hours, self.$input.hours,
self.$input.minutes, self.$input.minutes,
@ -169,7 +169,7 @@ Ox.TimeInput = function(options, self) {
if (key == 'value') { if (key == 'value') {
setValues(); setValues();
} }
} };
return that; return that;

6
source/Ox.UI/js/List/Ox.IconItem.js
View file

@ -20,8 +20,8 @@ Ox.IconItem = function(options, self) {
//Ox.print('IconItem', options, self) //Ox.print('IconItem', options, self)
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
height: 128, height: 128,
id: '', id: '',
@ -31,7 +31,7 @@ Ox.IconItem = function(options, self) {
width: 128, width: 128,
url: '' url: ''
}) })
.options(options || {}) .options(options || {});
$.extend(self, { $.extend(self, {
fontSize: self.options.size == 64 ? 6 : 9, fontSize: self.options.size == 64 ? 6 : 9,

19
source/Ox.UI/js/List/Ox.IconList.js
View file

@ -9,7 +9,8 @@ Ox.IconList <f:Ox.Element> IconList Object
draggable <b|true> can be dragged draggable <b|true> can be dragged
id <s|''> element id id <s|''> element id
item <f|null> called with data, sort, size, item <f|null> called with data, sort, size,
extends data with information needed for Ox.IconItem extends data with information needed for constructor
itemConstructor <f|Ox.IconItem> contructor used to create item
items <f|null> items array or callback function items <f|null> items array or callback function
keys <a|[]> available item keys keys <a|[]> available item keys
max <n|-1> maximum selected selected items max <n|-1> maximum selected selected items
@ -23,13 +24,14 @@ Ox.IconList <f:Ox.Element> IconList Object
Ox.IconList = function(options, self) { Ox.IconList = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
centerSelection: false, centerSelection: false,
draggable: true, draggable: true,
id: '', id: '',
item: null, item: null,
itemConstructor: Ox.IconItem,
items: null, items: null,
keys: [], keys: [],
max: -1, max: -1,
@ -46,7 +48,7 @@ Ox.IconList = function(options, self) {
itemWidth: self.options.size itemWidth: self.options.size
}); });
that.$element = new Ox.List({ that.$element = Ox.List({
centered: self.options.centered, centered: self.options.centered,
construct: constructItem, construct: constructItem,
draggable: self.options.draggable, draggable: self.options.draggable,
@ -55,10 +57,9 @@ Ox.IconList = function(options, self) {
items: self.options.items, items: self.options.items,
itemWidth: self.itemWidth, itemWidth: self.itemWidth,
keys: self.options.keys, keys: self.options.keys,
orientation: self.options.orientation,
keys: self.options.keys,
max: self.options.max, max: self.options.max,
min: self.options.min, min: self.options.min,
orientation: self.options.orientation,
selected: self.options.selected, selected: self.options.selected,
size: self.options.size, size: self.options.size,
sort: self.options.sort, sort: self.options.sort,
@ -81,7 +82,7 @@ Ox.IconList = function(options, self) {
self.options.item(data, self.options.sort, self.options.size) : self.options.item(data, self.options.sort, self.options.size) :
{height: 8, width: 5}, {height: 8, width: 5},
ratio = data.width / data.height; ratio = data.width / data.height;
return new Ox.IconItem($.extend(data, { return self.options.itemConstructor($.extend(data, {
height: Math.round(self.options.size / (ratio <= 1 ? 1 : ratio)), height: Math.round(self.options.size / (ratio <= 1 ? 1 : ratio)),
size: self.options.size, size: self.options.size,
width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio)) width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio))
@ -115,7 +116,7 @@ Ox.IconList = function(options, self) {
} else if (key == 'selected') { } else if (key == 'selected') {
that.$element.options(key, value); that.$element.options(key, value);
} }
} };
/*@ /*@
closePreview <f> close preview closePreview <f> close preview
@ -189,7 +190,7 @@ Ox.IconList = function(options, self) {
that.$element.value(id, key, value); that.$element.value(id, key, value);
return that; return that;
} }
} };
return that; return that;

15
source/Ox.UI/js/List/Ox.ItemInput.js
View file

@ -17,8 +17,8 @@ Ox.ItemInput <f:Ox.Element> ItemInput Object
Ox.ItemInput = function(options, self) { Ox.ItemInput = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
type: 'textarea', type: 'textarea',
value: '', value: '',
@ -27,7 +27,6 @@ Ox.ItemInput = function(options, self) {
}) })
.options(options || {}); .options(options || {});
self.$input = Ox.Input({ self.$input = Ox.Input({
changeOnKeypress: true, changeOnKeypress: true,
height: self.options.height, height: self.options.height,
@ -130,7 +129,7 @@ Ox.ItemInput = function(options, self) {
/* /*
that.append( that.append(
$input = new Ox.Input({ $input = Ox.Input({
height: self.options.height, height: self.options.height,
style: 'square', style: 'square',
type: self.options.type, type: self.options.type,
@ -144,15 +143,15 @@ Ox.ItemInput = function(options, self) {
} }
}) })
) )
.append(new Ox.Element() .append(Ox.Element()
.append(new Ox.Button({type: 'text', title: 'Cancel'}) .append(Ox.Button({type: 'text', title: 'Cancel'})
.css('width', '42%') .css('width', '42%')
.bindEvent({ .bindEvent({
'click': function() { 'click': function() {
that.triggerEvent('cancel'); that.triggerEvent('cancel');
} }
})) }))
.append(new Ox.Button({type: 'text', title: 'Save'}) .append(Ox.Button({type: 'text', title: 'Save'})
.css('width', '42%') .css('width', '42%')
.bindEvent({ .bindEvent({
'click': function() { 'click': function() {
@ -172,4 +171,4 @@ Ox.ItemInput = function(options, self) {
return that; return that;
} };

24
source/Ox.UI/js/List/Ox.List.js
View file

@ -41,8 +41,8 @@ Ox.List <f:Ox.Element> List Element
Ox.List = function(options, self) { Ox.List = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Container({}, self) var that = Ox.Container({}, self)
.defaults({ .defaults({
centered: false, centered: false,
construct: null, construct: null,
@ -274,11 +274,11 @@ Ox.List = function(options, self) {
function constructEmptyPage(page) { function constructEmptyPage(page) {
//Ox.print('cEP', page) //Ox.print('cEP', page)
var i, $page = new Ox.ListPage().css(getPageCSS(page)); var i, $page = Ox.ListPage().css(getPageCSS(page));
for (i = 0; i < getPageLength(page); i++ for (i = 0; i < getPageLength(page); i++
) { ) {
// fixme: why does chainging fail here? // fixme: why does chainging fail here?
new Ox.ListItem({ Ox.ListItem({
construct: self.options.construct construct: self.options.construct
}).appendTo($page); }).appendTo($page);
} }
@ -427,7 +427,7 @@ Ox.List = function(options, self) {
visibleItems = Math.ceil(height / self.options.itemHeight); visibleItems = Math.ceil(height / self.options.itemHeight);
if (self.listLength < visibleItems) { if (self.listLength < visibleItems) {
Ox.range(self.listLength, visibleItems).forEach(function(v) { Ox.range(self.listLength, visibleItems).forEach(function(v) {
var $item = new Ox.ListItem({ var $item = Ox.ListItem({
construct: self.options.construct, construct: self.options.construct,
}); });
$item.addClass('OxEmpty').removeClass('OxTarget'); $item.addClass('OxEmpty').removeClass('OxTarget');
@ -472,7 +472,7 @@ Ox.List = function(options, self) {
function getAbove() { function getAbove() {
var pos = -1; var pos = -1;
if (self.selected.length) { if (self.selected.length) {
pos = self.selected[self.selected.length - 1] - self.rowLength pos = self.selected[self.selected.length - 1] - self.rowLength;
if (pos < 0) { if (pos < 0) {
pos = -1; pos = -1;
} }
@ -543,7 +543,7 @@ Ox.List = function(options, self) {
} : { } : {
top: (page * self.pageHeight + self.listMargin / 2) + 'px', top: (page * self.pageHeight + self.listMargin / 2) + 'px',
width: self.pageWidth + 'px' width: self.pageWidth + 'px'
} };
} }
function getPageHeight() { function getPageHeight() {
@ -622,7 +622,7 @@ Ox.List = function(options, self) {
function getRowLength() { function getRowLength() {
return self.options.orientation == 'both' ? return self.options.orientation == 'both' ?
Math.floor((getWidth() - self.listMargin) / Math.floor((getWidth() - self.listMargin) /
(self.options.itemWidth + self.itemMargin)) : 1 (self.options.itemWidth + self.itemMargin)) : 1;
} }
function getScrollPosition() { function getScrollPosition() {
@ -703,10 +703,10 @@ Ox.List = function(options, self) {
sort: self.options.sort sort: self.options.sort
}, function(result) { }, function(result) {
var $emptyPage = Ox.clone(self.$pages[page]); var $emptyPage = Ox.clone(self.$pages[page]);
self.$pages[page] = new Ox.ListPage().css(getPageCSS(page)); self.$pages[page] = Ox.ListPage().css(getPageCSS(page));
result.data.items.forEach(function(v, i) { result.data.items.forEach(function(v, i) {
var pos = offset + i; var pos = offset + i;
self.$items[pos] = new Ox.ListItem({ self.$items[pos] = Ox.ListItem({
construct: self.options.construct, construct: self.options.construct,
data: v, data: v,
draggable: self.options.draggable, draggable: self.options.draggable,
@ -1342,7 +1342,7 @@ Ox.List = function(options, self) {
}); });
items.forEach(function(item, i) { items.forEach(function(item, i) {
var $item; var $item;
$items.push($item = new Ox.ListItem({ $items.push($item = Ox.ListItem({
construct: self.options.construct, construct: self.options.construct,
data: item, data: item,
draggable: self.options.draggable, draggable: self.options.draggable,
@ -1383,7 +1383,7 @@ Ox.List = function(options, self) {
.empty() .empty()
.addClass('OxEdit'); .addClass('OxEdit');
$input = new Ox.ItemInput({ $input = Ox.ItemInput({
type: 'textarea', type: 'textarea',
value: item.value, value: item.value,
height: height, height: height,

6
source/Ox.UI/js/List/Ox.ListItem.js
View file

@ -18,8 +18,8 @@ Ox.ListItem <f:Ox.Element> ListItem Object
Ox.ListItem = function(options, self) { Ox.ListItem = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
construct: function() {}, construct: function() {},
data: {}, data: {},
@ -52,7 +52,7 @@ Ox.ListItem = function(options, self) {
if (key == 'data') { if (key == 'data') {
constructItem(true); constructItem(true);
} }
} };
return that; return that;

4
source/Ox.UI/js/List/Ox.ListPage.js
View file

@ -8,8 +8,8 @@ Ox.ListPage <f:Ox.Element> ListPage Object
self <o> shared private variable self <o> shared private variable
@*/ @*/
Ox.ListPage = function(options, self) { Ox.ListPage = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.addClass('OxPage'); .addClass('OxPage');
return that; return that;
}; };

20
source/Ox.UI/js/List/Ox.TextList.js
View file

@ -39,8 +39,8 @@ Ox.TextList = function(options, self) {
// fixme: rename to TableList // fixme: rename to TableList
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
columns: [], columns: [],
columnsMovable: false, columnsMovable: false,
@ -114,7 +114,7 @@ Ox.TextList = function(options, self) {
if (!Ox.isUndefined(v.position)) { if (!Ox.isUndefined(v.position)) {
self.visibleColumns[v.position] = v; self.visibleColumns[v.position] = v;
} }
}) });
$.extend(self, { $.extend(self, {
columnWidths: $.map(self.visibleColumns, function(v, i) { columnWidths: $.map(self.visibleColumns, function(v, i) {
return v.width; return v.width;
@ -132,11 +132,11 @@ Ox.TextList = function(options, self) {
// Head // Head
if (self.options.columnsVisible) { if (self.options.columnsVisible) {
that.$bar = new Ox.Bar({ that.$bar = Ox.Bar({
orientation: 'horizontal', orientation: 'horizontal',
size: 16 size: 16
}).appendTo(that); }).appendTo(that);
that.$head = new Ox.Container() that.$head = Ox.Container()
.addClass('OxHead') .addClass('OxHead')
.css({ .css({
right: self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0 right: self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
@ -145,7 +145,7 @@ Ox.TextList = function(options, self) {
that.$head.$content.addClass('OxTitles'); that.$head.$content.addClass('OxTitles');
constructHead(); constructHead();
if (self.options.columnsRemovable) { if (self.options.columnsRemovable) {
that.$select = new Ox.Select({ that.$select = Ox.Select({
id: self.options.id + 'SelectColumns', id: self.options.id + 'SelectColumns',
items: $.map(self.options.columns, function(v, i) { items: $.map(self.options.columns, function(v, i) {
return { return {
@ -166,7 +166,7 @@ Ox.TextList = function(options, self) {
// Body // Body
that.$body = new Ox.List({ that.$body = Ox.List({
construct: constructItem, construct: constructItem,
id: self.options.id, id: self.options.id,
items: self.options.items, items: self.options.items,
@ -299,7 +299,7 @@ Ox.TextList = function(options, self) {
var $order, $resize, $left, $center, $right; var $order, $resize, $left, $center, $right;
offset += self.columnWidths[i]; offset += self.columnWidths[i];
self.columnOffsets[i] = offset - self.columnWidths[i] / 2; self.columnOffsets[i] = offset - self.columnWidths[i] / 2;
that.$titles[i] = new Ox.Element() that.$titles[i] = Ox.Element()
.addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id)) .addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
.css({ .css({
width: (self.columnWidths[i] - 9) + 'px', width: (self.columnWidths[i] - 9) + 'px',
@ -338,7 +338,7 @@ Ox.TextList = function(options, self) {
$(this).prev().trigger('click') $(this).prev().trigger('click')
}) })
.appendTo(that.$head.$content.$element); .appendTo(that.$head.$content.$element);
$resize = new Ox.Element() $resize = Ox.Element()
.addClass('OxResize') .addClass('OxResize')
.appendTo(that.$head.$content.$element); .appendTo(that.$head.$content.$element);
// if columns are resizable, bind click and drag events // if columns are resizable, bind click and drag events
@ -741,7 +741,7 @@ Ox.TextList = function(options, self) {
.css({ .css({
width: width + 'px' width: width + 'px'
}); });
$input = new Ox.Input({ $input = Ox.Input({
autovalidate: column.input ? column.input.autovalidate : null, autovalidate: column.input ? column.input.autovalidate : null,
style: 'square', style: 'square',
value: html, value: html,

20
source/Ox.UI/js/List/Ox.TreeList.js
View file

@ -19,8 +19,8 @@ Ox.TreeList = function(options, self) {
// fixme: expanding the last item should cause some scroll // fixme: expanding the last item should cause some scroll
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
data: null, data: null,
items: [], items: [],
@ -40,7 +40,7 @@ Ox.TreeList = function(options, self) {
//Ox.print('d', self.options.data, 'i', self.options.items) //Ox.print('d', self.options.data, 'i', self.options.items)
} }
that.$element = new Ox.List({ that.$element = Ox.List({
construct: constructItem, construct: constructItem,
itemHeight: 16, itemHeight: 16,
items: parseItems(), items: parseItems(),
@ -114,9 +114,9 @@ Ox.TreeList = function(options, self) {
} }
function getItemById(id, items, level) { function getItemById(id, items, level) {
var items = items || self.options.items, var ret = null;
level = level || 0, items = items || self.options.items;
ret = null; level = level || 0;
Ox.forEach(items, function(item) { Ox.forEach(items, function(item) {
if (item.id == id) { if (item.id == id) {
ret = $.extend(item, { ret = $.extend(item, {
@ -151,15 +151,15 @@ Ox.TreeList = function(options, self) {
type == 'function' ? type == 'function' ?
value.toString().split('{')[0] : value.toString().split('{')[0] :
JSON.stringify(value) JSON.stringify(value)
) );
} }
return ret; return ret;
} }
function parseItems(items, level) { function parseItems(items, level) {
var items = items || self.options.items, var ret = [];
level = level || 0, items = items || self.options.items;
ret = []; level = level || 0;
items.forEach(function(item, i) { items.forEach(function(item, i) {
var item_ = $.extend({ var item_ = $.extend({
level: level level: level

4
source/Ox.UI/js/Map/Ox.ListMap.js
View file

@ -16,8 +16,8 @@ Ox.ListMap <f:Ox.Element> ListMap Object
Ox.ListMap = function(options, self) { Ox.ListMap = function(options, self) {
var self = self || {}, self = self || {};
that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
addPlace: null, addPlace: null,
editPlace: null, editPlace: null,

38
source/Ox.UI/js/Map/Ox.Map.js
View file

@ -89,7 +89,7 @@ Ox.Map <function> Basic map object
Ox.Map = function(options, self) { Ox.Map = function(options, self) {
self = self || {}; self = self || {};
var that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
// fixme: isClickable? hasZoombar? // fixme: isClickable? hasZoombar?
clickable: false, clickable: false,
@ -155,7 +155,7 @@ Ox.Map = function(options, self) {
that.zoomToPlace(); that.zoomToPlace();
}, },
key_shift_equal: function() { key_shift_equal: function() {
zoom(2) zoom(2);
}, },
key_shift_left: function() { key_shift_left: function() {
pan(-2, 0); pan(-2, 0);
@ -182,7 +182,7 @@ Ox.Map = function(options, self) {
'id', 'name', 'alternativeNames', 'geoname', 'countryCode', 'type', 'id', 'name', 'alternativeNames', 'geoname', 'countryCode', 'type',
'lat', 'lng', 'south', 'west', 'north', 'east', 'area', 'lat', 'lng', 'south', 'west', 'north', 'east', 'area',
'editable' 'editable'
], ];
self.scaleMeters = [ self.scaleMeters = [
50000000, 20000000, 10000000, 50000000, 20000000, 10000000,
5000000, 2000000, 1000000, 5000000, 2000000, 1000000,
@ -200,7 +200,7 @@ Ox.Map = function(options, self) {
}); });
if (self.options.toolbar) { if (self.options.toolbar) {
self.$toolbar = new Ox.Bar({ self.$toolbar = Ox.Bar({
size: 24 size: 24
}) })
.appendTo(that); .appendTo(that);
@ -219,7 +219,7 @@ Ox.Map = function(options, self) {
.css({float: 'left', margin: '4px'}) .css({float: 'left', margin: '4px'})
.appendTo(self.$toolbar); .appendTo(self.$toolbar);
/* /*
self.$labelsButton = new Ox.Checkbox({ self.$labelsButton = Ox.Checkbox({
title: 'Labels', title: 'Labels',
width: 64 width: 64
}) })
@ -229,7 +229,7 @@ Ox.Map = function(options, self) {
}) })
.appendTo(self.$toolbar) .appendTo(self.$toolbar)
*/ */
self.$findInput = new Ox.Input({ self.$findInput = Ox.Input({
clear: true, clear: true,
placeholder: self.options.findPlaceholder, placeholder: self.options.findPlaceholder,
width: 192 width: 192
@ -241,7 +241,7 @@ Ox.Map = function(options, self) {
.appendTo(self.$toolbar) .appendTo(self.$toolbar)
} }
self.$map = new Ox.Element() self.$map = Ox.Element()
.css({ .css({
left: 0, left: 0,
top: self.options.toolbar * 24 + 'px', top: self.options.toolbar * 24 + 'px',
@ -251,7 +251,7 @@ Ox.Map = function(options, self) {
.appendTo(that); .appendTo(that);
if (self.options.zoombar) { if (self.options.zoombar) {
self.$zoombar = new Ox.Bar({ self.$zoombar = Ox.Bar({
size: 16 size: 16
}) })
.css({ .css({
@ -261,7 +261,7 @@ Ox.Map = function(options, self) {
} }
if (self.options.statusbar) { if (self.options.statusbar) {
self.$statusbar = new Ox.Bar({ self.$statusbar = Ox.Bar({
size: 24 size: 24
}) })
.css({ .css({
@ -275,21 +275,21 @@ Ox.Map = function(options, self) {
}) })
.css({float: 'left', margin: '4px 2px 4px 4px'}) .css({float: 'left', margin: '4px 2px 4px 4px'})
.appendTo(self.$statusbar.$element); .appendTo(self.$statusbar.$element);
self.$placeNameInput = new Ox.Input({ self.$placeNameInput = Ox.Input({
placeholder: 'Name', placeholder: 'Name',
width: 96 width: 96
}) })
//.css({position: 'absolute', left: 4, top: 4}) //.css({position: 'absolute', left: 4, top: 4})
.css({float: 'left', margin: '4px 2px 4px 2px'}) .css({float: 'left', margin: '4px 2px 4px 2px'})
.appendTo(self.$statusbar); .appendTo(self.$statusbar);
self.$placeGeonameInput = new Ox.Input({ self.$placeGeonameInput = Ox.Input({
placeholder: 'Geoname', placeholder: 'Geoname',
width: 96 width: 96
}) })
//.css({position: 'absolute', left: 104, top: 4}) //.css({position: 'absolute', left: 104, top: 4})
.css({float: 'left', margin: '4px 2px 4px 2px'}) .css({float: 'left', margin: '4px 2px 4px 2px'})
.appendTo(self.$statusbar); .appendTo(self.$statusbar);
self.$placeButton = new Ox.Button({ self.$placeButton = Ox.Button({
title: 'New Place', title: 'New Place',
width: 96 width: 96
}) })
@ -301,7 +301,7 @@ Ox.Map = function(options, self) {
} }
self.$navigationButtons = { self.$navigationButtons = {
'center': new Ox.Button({ 'center': Ox.Button({
title: 'close', title: 'close',
type: 'image' type: 'image'
}) })
@ -310,7 +310,7 @@ Ox.Map = function(options, self) {
left: '24px', left: '24px',
top: '24px' top: '24px'
}), }),
'east': new Ox.Button({ 'east': Ox.Button({
title: 'right', title: 'right',
type: 'image' type: 'image'
}) })
@ -319,7 +319,7 @@ Ox.Map = function(options, self) {
left: '44px', left: '44px',
top: '24px', top: '24px',
}), }),
'north': new Ox.Button({ 'north': Ox.Button({
title: 'up', title: 'up',
type: 'image' type: 'image'
}) })
@ -328,7 +328,7 @@ Ox.Map = function(options, self) {
left: '24px', left: '24px',
top: '4px', top: '4px',
}), }),
'south': new Ox.Button({ 'south': Ox.Button({
title: 'down', title: 'down',
type: 'image' type: 'image'
}) })
@ -337,7 +337,7 @@ Ox.Map = function(options, self) {
left: '24px', left: '24px',
top: '44px', top: '44px',
}), }),
'west': new Ox.Button({ 'west': Ox.Button({
title: 'left', title: 'left',
type: 'image' type: 'image'
}) })
@ -353,7 +353,7 @@ Ox.Map = function(options, self) {
}); });
}); });
self.$scaleLabel = new Ox.Label({ self.$scaleLabel = Ox.Label({
textAlign: 'center', textAlign: 'center',
title: '...' title: '...'
}) })
@ -488,7 +488,7 @@ Ox.Map = function(options, self) {
//Ox.print('constructZoomInput', self.minZoom, self.maxZoom) //Ox.print('constructZoomInput', self.minZoom, self.maxZoom)
if (self.options.zoombar) { if (self.options.zoombar) {
self.$zoomInput && self.$zoomInput.removeElement(); self.$zoomInput && self.$zoomInput.removeElement();
self.$zoomInput = new Ox.Range({ self.$zoomInput = Ox.Range({
arrows: true, arrows: true,
max: self.maxZoom, max: self.maxZoom,
min: self.minZoom, min: self.minZoom,

2
source/Ox.UI/js/Map/Ox.MapImage.js
View file

@ -17,7 +17,7 @@ Ox.MapImage <f:Ox.Element> MapImage Object
Ox.MapImage = function(options, self) { Ox.MapImage = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('<img>', self) that = Ox.Element('<img>', self)
.defaults({ .defaults({
height: 360, height: 360,
markerColorHighlight: 'yellow', markerColorHighlight: 'yellow',

6
source/Ox.UI/js/Map/Ox.MapRectangle.js
View file

@ -13,11 +13,11 @@ Ox.MapRectangle <f> MapRectangle Object
Ox.MapRectangle = function(options, self) { Ox.MapRectangle = function(options, self) {
var options = Ox.extend({ var that = this;
options = Ox.extend({
map: null, map: null,
place: null place: null
}, options), }, options);
that = this;
Ox.forEach(options, function(val, key) { Ox.forEach(options, function(val, key) {
that[key] = val; that[key] = val;

6
source/Ox.UI/js/Menu/Ox.MainMenu.js
View file

@ -14,8 +14,8 @@ Ox.MainMenu <f:Ox.Bar> MainMenu Object
Ox.MainMenu = function(options, self) { Ox.MainMenu = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Bar({}, self) var that = Ox.Bar({}, self)
.defaults({ .defaults({
extras: [], extras: [],
menus: [], menus: [],
@ -38,7 +38,7 @@ Ox.MainMenu = function(options, self) {
.html(menu.title) .html(menu.title)
.data('position', position) .data('position', position)
.appendTo(that.$element); .appendTo(that.$element);
that.menus[position] = new Ox.Menu($.extend(menu, { that.menus[position] = Ox.Menu($.extend(menu, {
element: that.titles[position], element: that.titles[position],
mainmenu: that, mainmenu: that,
size: self.options.size size: self.options.size

10
source/Ox.UI/js/Menu/Ox.Menu.js
View file

@ -27,9 +27,9 @@ Ox.Menu <f:Ox.Element> Menu Object
@*/ @*/
Ox.Menu = function(options, self) { Ox.Menu = function(options, self) {
Ox.print(options) Ox.print(options);
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
element: null, element: null,
id: '', id: '',
@ -199,12 +199,12 @@ Ox.print(options)
items.forEach(function(item) { items.forEach(function(item) {
var position; var position;
if ('id' in item) { if ('id' in item) {
that.items.push(new Ox.MenuItem($.extend(item, { that.items.push(Ox.MenuItem($.extend(item, {
menu: that, menu: that,
position: position = that.items.length position: position = that.items.length
})).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?; })).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
if (item.items) { if (item.items) {
that.submenus[item.id] = new Ox.Menu({ that.submenus[item.id] = Ox.Menu({
element: that.items[position], element: that.items[position],
id: Ox.toCamelCase(self.options.id + '/' + item.id), id: Ox.toCamelCase(self.options.id + '/' + item.id),
items: item.items, items: item.items,

6
source/Ox.UI/js/Menu/Ox.MenuItem.js
View file

@ -21,8 +21,8 @@ Ox.MenuItem <f:Ox.Element> MenuItem Object
Ox.MenuItem = function(options, self) { Ox.MenuItem = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element('<tr>', self) var that = Ox.Element('<tr>', self)
.defaults({ .defaults({
bind: [], // fixme: what's this? bind: [], // fixme: what's this?
checked: null, checked: null,
@ -113,7 +113,7 @@ Ox.MenuItem = function(options, self) {
self.options.title = Ox.toArray(value); self.options.title = Ox.toArray(value);
that.$title.html(self.options.title[0]); that.$title.html(self.options.title[0]);
} }
} };
that.toggle = function() { that.toggle = function() {
// toggle id and title // toggle id and title

15
source/Ox.UI/js/Panel/Ox.CollapsePanel.js
View file

@ -14,8 +14,9 @@ Ox.CollapsePanel <f:Ox.Panel> CollapsePanel Object
@*/ @*/
Ox.CollapsePanel = function(options, self) { Ox.CollapsePanel = function(options, self) {
var self = self || {},
that = new Ox.Panel({}, self) self = self || {};
var that = Ox.Panel({}, self)
.defaults({ .defaults({
collapsed: false, collapsed: false,
extras: [], extras: [],
@ -28,33 +29,33 @@ Ox.CollapsePanel = function(options, self) {
title = self.options.collapsed ? title = self.options.collapsed ?
[{id: 'expand', title: 'right'}, {id: 'collapse', title: 'down'}] : [{id: 'expand', title: 'right'}, {id: 'collapse', title: 'down'}] :
[{id: 'collapse', title: 'down'}, {id: 'expand', title: 'right'}], [{id: 'collapse', title: 'down'}, {id: 'expand', title: 'right'}],
$titlebar = new Ox.Bar({ $titlebar = Ox.Bar({
orientation: 'horizontal', orientation: 'horizontal',
size: self.options.size, size: self.options.size,
}) })
.dblclick(dblclickTitlebar) .dblclick(dblclickTitlebar)
.appendTo(that), .appendTo(that),
$switch = new Ox.Button({ $switch = Ox.Button({
style: 'symbol', style: 'symbol',
title: title, title: title,
type: 'image', type: 'image',
}) })
.click(toggleCollapsed) .click(toggleCollapsed)
.appendTo($titlebar), .appendTo($titlebar),
$title = new Ox.Element() $title = Ox.Element()
.addClass('OxTitle') .addClass('OxTitle')
.html(self.options.title/*.toUpperCase()*/) .html(self.options.title/*.toUpperCase()*/)
.appendTo($titlebar), .appendTo($titlebar),
$extras; $extras;
if (self.options.extras.length) { if (self.options.extras.length) {
$extras = new Ox.Element() $extras = Ox.Element()
.addClass('OxExtras') .addClass('OxExtras')
.appendTo($titlebar); .appendTo($titlebar);
self.options.extras.forEach(function($extra) { self.options.extras.forEach(function($extra) {
$extra.appendTo($extras); $extra.appendTo($extras);
}); });
} }
that.$content = new Ox.Element() that.$content = Ox.Element()
.addClass('OxContent') .addClass('OxContent')
.appendTo(that); .appendTo(that);
// fixme: doesn't work, content still empty // fixme: doesn't work, content still empty

4
source/Ox.UI/js/Panel/Ox.Panel.js
View file

@ -10,8 +10,8 @@ Ox.Panel <f:Ox.Element> Panel Object
@*/ @*/
Ox.Panel = function(options, self) { Ox.Panel = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.addClass('OxPanel'); .addClass('OxPanel');
return that; return that;
}; };

16
source/Ox.UI/js/Panel/Ox.SplitPanel.js
View file

@ -30,8 +30,8 @@ Ox.SplitPanel <f:Ox.Element> SpliPanel Object
*/ */
Ox.SplitPanel = function(options, self) { Ox.SplitPanel = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) // fixme: Container var that = Ox.Element({}, self) // fixme: Container
.defaults({ .defaults({
elements: [], elements: [],
orientation: 'horizontal' orientation: 'horizontal'
@ -72,7 +72,7 @@ Ox.SplitPanel = function(options, self) {
if (v.collapsible || v.resizable) { if (v.collapsible || v.resizable) {
//Ox.print('v.size', v.size) //Ox.print('v.size', v.size)
self.resizebarElements[index] = i < 2 ? [0, 1] : [1, 2]; self.resizebarElements[index] = i < 2 ? [0, 1] : [1, 2];
self.$resizebars[index] = new Ox.Resizebar({ self.$resizebars[index] = Ox.Resizebar({
collapsible: v.collapsible, collapsible: v.collapsible,
edge: self.edges[index], edge: self.edges[index],
elements: [ elements: [
@ -211,7 +211,7 @@ Ox.SplitPanel = function(options, self) {
}); });
}); });
return that; return that;
} };
that.size = function(id, size) { that.size = function(id, size) {
// one can pass pos instead of id // one can pass pos instead of id
@ -255,9 +255,9 @@ Ox.SplitPanel = function(options, self) {
that.updateSize = function(pos, size) { that.updateSize = function(pos, size) {
// this is called from resizebar // 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 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; self.options.elements[pos].size = size;
} };
return that; return that;
@ -265,8 +265,8 @@ Ox.SplitPanel = function(options, self) {
Ox.SplitPanel_ = function(options, self) { Ox.SplitPanel_ = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
elements: [], elements: [],
orientation: 'horizontal' orientation: 'horizontal'

18
source/Ox.UI/js/Video/Ox.AnnotationPanel.js
View file

@ -16,8 +16,8 @@ Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
Ox.AnnotationPanel = function(options, self) { Ox.AnnotationPanel = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
id: '', id: '',
items: [], items: [],
@ -29,10 +29,10 @@ Ox.AnnotationPanel = function(options, self) {
self.selected = -1; self.selected = -1;
that.$element = new Ox.CollapsePanel({ that.$element = Ox.CollapsePanel({
collapsed: false, collapsed: false,
extras: self.options.editable ? [ extras: self.options.editable ? [
new Ox.Button({ Ox.Button({
id: 'add', id: 'add',
style: 'symbol', style: 'symbol',
title: 'add', title: 'add',
@ -53,9 +53,9 @@ Ox.AnnotationPanel = function(options, self) {
}); });
that.$content = that.$element.$content; that.$content = that.$element.$content;
self.$annotations = new Ox.List({ self.$annotations = Ox.List({
construct: function(data) { construct: function(data) {
return new Ox.Element() return Ox.Element()
.addClass('OxAnnotation OxEditable OxTarget') .addClass('OxAnnotation OxEditable OxTarget')
.html(Ox.parseHTML(data.value)); .html(Ox.parseHTML(data.value));
}, },
@ -87,11 +87,11 @@ Ox.AnnotationPanel = function(options, self) {
.appendTo(that.$content); .appendTo(that.$content);
/* /*
self.$annotations = new Ox.Element() self.$annotations = Ox.Element()
.appendTo(that.$content); .appendTo(that.$content);
self.$annotation = []; self.$annotation = [];
self.options.items.forEach(function(item, i) { self.options.items.forEach(function(item, i) {
self.$annotation[i] = new Ox.Element() self.$annotation[i] = Ox.Element()
.addClass('OxAnnotation') .addClass('OxAnnotation')
.html(item.value.replace(/\n/g, '<br/>')) .html(item.value.replace(/\n/g, '<br/>'))
.click(function() { .click(function() {
@ -141,7 +141,7 @@ Ox.AnnotationPanel = function(options, self) {
that.deselectItems = function() { that.deselectItems = function() {
if(self.$annotations.options('selected')) if(self.$annotations.options('selected'))
self.$annotations.options('selected',[]); self.$annotations.options('selected',[]);
} };
return that; return that;

18
source/Ox.UI/js/Video/Ox.BlockTimeline.js
View file

@ -11,8 +11,8 @@ Ox.BlockTimeline <f:Ox.Element> BlockTimeline Object
Ox.BlockTimeline = function(options, self) { Ox.BlockTimeline = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
duration: 0, duration: 0,
find: '', find: '',
@ -40,7 +40,7 @@ Ox.BlockTimeline = function(options, self) {
$markerPoint: [], $markerPoint: [],
$selection: [], $selection: [],
$subtitles: [], $subtitles: [],
$tooltip: new Ox.Tooltip({ $tooltip: Ox.Tooltip({
animate: false animate: false
}).css({ }).css({
textAlign: 'center' textAlign: 'center'
@ -94,7 +94,7 @@ Ox.BlockTimeline = function(options, self) {
function addLine(i) { function addLine(i) {
// fixme: get URLs once, not once for every line // fixme: get URLs once, not once for every line
self.$lines[i] = new Ox.Element() self.$lines[i] = Ox.Element()
.css({ .css({
top: i * (self.height + self.margin) + 'px', top: i * (self.height + self.margin) + 'px',
width: self.options.width + 'px' width: self.options.width + 'px'
@ -108,7 +108,7 @@ Ox.BlockTimeline = function(options, self) {
.css({ .css({
marginLeft: (-i * self.options.width) + 'px' marginLeft: (-i * self.options.width) + 'px'
}) })
.appendTo(self.$lines[i].$element) .appendTo(self.$lines[i].$element);
if (self.hasSubtitles) { if (self.hasSubtitles) {
self.subtitlesImageURL = getSubtitlesImageURL(); self.subtitlesImageURL = getSubtitlesImageURL();
self.$subtitles[i] = $('<img>') self.$subtitles[i] = $('<img>')
@ -169,7 +169,7 @@ Ox.BlockTimeline = function(options, self) {
data[index] = color[0]; data[index] = color[0];
data[index + 1] = color[1]; data[index + 1] = color[1];
data[index + 2] = color[2]; data[index + 2] = color[2];
data[index + 3] = color[3] data[index + 3] = color[3];
}); });
}); });
context.putImageData(imageData, 0, 0); context.putImageData(imageData, 0, 0);
@ -213,7 +213,7 @@ Ox.BlockTimeline = function(options, self) {
data[index] = color[0]; data[index] = color[0];
data[index + 1] = color[1]; data[index + 1] = color[1];
data[index + 2] = color[2]; data[index + 2] = color[2];
data[index + 3] = 128 data[index + 3] = 128;
}); });
}); });
}); });
@ -278,7 +278,7 @@ Ox.BlockTimeline = function(options, self) {
$target.hasClass('OxTimelineSmallSubtitles') || $target.hasClass('OxTimelineSmallSubtitles') ||
$target.hasClass('OxTimelineSmallSelection') $target.hasClass('OxTimelineSmallSelection')
) { ) {
position = getPosition(e), position = getPosition(e);
subtitle = getSubtitle(position); subtitle = getSubtitle(position);
self.$tooltip.options({ self.$tooltip.options({
title: subtitle ? title: subtitle ?
@ -361,7 +361,7 @@ Ox.BlockTimeline = function(options, self) {
//Ox.print('key', key, 'value', value) //Ox.print('key', key, 'value', value)
setMarkerPoint(0); setMarkerPoint(0);
setMarkerPoint(1); setMarkerPoint(1);
updateSelection() updateSelection();
} else if (key == 'position') { } else if (key == 'position') {
setPosition(); setPosition();
} else if (key == 'width') { } else if (key == 'width') {

9
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -1,7 +1,8 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.BlockVideoTimeline = function(options, self) { Ox.BlockVideoTimeline = function(options, self) {
self = self || {}; self = self || {};
var that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
duration: 0, duration: 0,
find: '', find: '',
@ -32,7 +33,7 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$images = []; self.$images = [];
self.$interfaces = []; self.$interfaces = [];
self.$lines = []; self.$lines = [];
self.$tooltip = new Ox.Tooltip({ self.$tooltip = Ox.Tooltip({
animate: false animate: false
}).css({ }).css({
textAlign: 'center' textAlign: 'center'
@ -263,7 +264,7 @@ Ox.BlockVideoTimeline = function(options, self) {
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'in' || key == 'out') { if (key == 'in' || key == 'out') {
setPoint(key) setPoint(key);
} else if (key == 'position') { } else if (key == 'position') {
setPositionMarker(); setPositionMarker();
} else if (key == 'results') { } else if (key == 'results') {
@ -271,7 +272,7 @@ Ox.BlockVideoTimeline = function(options, self) {
} else if (key == 'width') { } else if (key == 'width') {
setWidth(); setWidth();
} }
} };
return that; return that;

6
source/Ox.UI/js/Video/Ox.Flipbook.js
View file

@ -3,8 +3,8 @@
Ox.Flipbook = function(options, self) { Ox.Flipbook = function(options, self) {
var self = self || {}, self = self || {};
frame = $('<img>').css({ var frame = $('<img>').css({
'position': 'absolute', 'position': 'absolute',
'width': '100%', 'width': '100%',
'height': 'auto' 'height': 'auto'
@ -22,7 +22,7 @@ Ox.Flipbook = function(options, self) {
'width': '100%' 'width': '100%'
}) })
.hide(), .hide(),
that = new Ox.Element({}, self) that = Ox.Element({}, self)
.defaults({ .defaults({
frames: {}, frames: {},
duration: 0, duration: 0,

14
source/Ox.UI/js/Video/Ox.LargeTimeline.js
View file

@ -11,8 +11,8 @@ Ox.LargeTimeline <f:Ox.Element> LargeTimeline Object
Ox.LargeTimeline = function(options, self) { Ox.LargeTimeline = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
cuts: [], cuts: [],
duration: 0, duration: 0,
@ -40,7 +40,7 @@ Ox.LargeTimeline = function(options, self) {
$markerPoint: [], $markerPoint: [],
$subtitles: [], $subtitles: [],
$tiles: {}, $tiles: {},
$tooltip: new Ox.Tooltip({ $tooltip: Ox.Tooltip({
animate: false animate: false
}), }),
center: parseInt(self.options.width / 2), center: parseInt(self.options.width / 2),
@ -55,7 +55,7 @@ Ox.LargeTimeline = function(options, self) {
.css({ .css({
left: self.center + 'px' left: self.center + 'px'
}) })
.appendTo(that.$element) .appendTo(that.$element);
self.options.subtitles.forEach(function(v, i) { self.options.subtitles.forEach(function(v, i) {
self.$subtitles[i] = $('<div>') self.$subtitles[i] = $('<div>')
@ -65,7 +65,7 @@ Ox.LargeTimeline = function(options, self) {
width: (((v['out'] - v['in']) * self.fps) - 2) + 'px' width: (((v['out'] - v['in']) * self.fps) - 2) + 'px'
}) })
.html(Ox.highlight(v.value, self.options.find, 'OxHighlight')) .html(Ox.highlight(v.value, self.options.find, 'OxHighlight'))
.appendTo(self.$timeline) .appendTo(self.$timeline);
}); });
self.options.cuts.forEach(function(v, i) { self.options.cuts.forEach(function(v, i) {
@ -77,7 +77,7 @@ Ox.LargeTimeline = function(options, self) {
.css({ .css({
left: (v * self.fps) + 'px' left: (v * self.fps) + 'px'
}) })
.appendTo(self.$timeline) .appendTo(self.$timeline);
}); });
self.$markerPosition = $('<img>') self.$markerPosition = $('<img>')
@ -124,7 +124,7 @@ Ox.LargeTimeline = function(options, self) {
} }
function getPosition(e) { function getPosition(e) {
return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps;
} }
function mouseleave(e) { function mouseleave(e) {

10
source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
View file

@ -11,8 +11,8 @@ Ox.LargeVideoTimeline <f:Ox.Element> LargeTimeline Object
Ox.LargeVideoTimeline = function(options, self) { Ox.LargeVideoTimeline = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
cuts: [], cuts: [],
duration: 0, duration: 0,
@ -41,7 +41,7 @@ Ox.LargeVideoTimeline = function(options, self) {
$cuts: [], $cuts: [],
$pointMarker: {}, $pointMarker: {},
$tiles: {}, $tiles: {},
$tooltip: new Ox.Tooltip({ $tooltip: Ox.Tooltip({
animate: false animate: false
}), }),
center: parseInt(self.options.width / 2), center: parseInt(self.options.width / 2),
@ -117,7 +117,7 @@ Ox.LargeVideoTimeline = function(options, self) {
} }
function getPosition(e) { function getPosition(e) {
return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps;
} }
function mouseleave(e) { function mouseleave(e) {
@ -182,7 +182,7 @@ Ox.LargeVideoTimeline = function(options, self) {
width: (((subtitle.out - subtitle['in']) * self.fps) - 2) + 'px' width: (((subtitle.out - subtitle['in']) * self.fps) - 2) + 'px'
}) })
.html(Ox.highlight(subtitle.text, self.options.find, 'OxHighlight')) .html(Ox.highlight(subtitle.text, self.options.find, 'OxHighlight'))
.appendTo(self.$timeline) .appendTo(self.$timeline);
}); });
} }

8
source/Ox.UI/js/Video/Ox.SmallTimeline.js
View file

@ -11,8 +11,8 @@ Ox.SmallTimeline <f:Ox.Element> SmallTimeline Object
Ox.SmallTimeline = function(options, self) { Ox.SmallTimeline = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
duration: 0, duration: 0,
find: '', find: '',
@ -38,7 +38,7 @@ Ox.SmallTimeline = function(options, self) {
$images: [], $images: [],
$markerPoint: [], $markerPoint: [],
$subtitles: [], $subtitles: [],
$tooltip: new Ox.Tooltip({ $tooltip: Ox.Tooltip({
animate: false animate: false
}).css({ }).css({
textAlign: 'center' textAlign: 'center'
@ -135,7 +135,7 @@ Ox.SmallTimeline = function(options, self) {
$target.hasClass('OxTimelineSmallImage') || $target.hasClass('OxTimelineSmallImage') ||
$target.hasClass('OxTimelineSmallSubtitles') $target.hasClass('OxTimelineSmallSubtitles')
) { ) {
position = getPosition(e), position = getPosition(e);
subtitle = getSubtitle(position); subtitle = getSubtitle(position);
self.$tooltip.options({ self.$tooltip.options({
title: subtitle ? title: subtitle ?

2
source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
View file

@ -215,7 +215,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
self.$subtitles.css({width: value + 'px'}); self.$subtitles.css({width: value + 'px'});
self.$timeline.css({width: value + 'px'}); self.$timeline.css({width: value + 'px'});
} }
} };
return that; return that;

60
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -11,8 +11,8 @@ Ox.VideoEditor <f:Ox.Element> VideoEditor Object
Ox.VideoEditor = function(options, self) { Ox.VideoEditor = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
annotationsSize: 0, annotationsSize: 0,
cuts: [], cuts: [],
@ -97,10 +97,10 @@ Ox.VideoEditor = function(options, self) {
// toggleSize // toggleSize
}, },
key_shift_comma: function() { key_shift_comma: function() {
movePositionTo('match', -1) movePositionTo('match', -1);
}, },
key_shift_dot: function() { key_shift_dot: function() {
movePositionTo('match', 1) movePositionTo('match', 1);
}, },
key_shift_down: function() { key_shift_down: function() {
movePositionBy(self.options.duration); movePositionBy(self.options.duration);
@ -143,7 +143,7 @@ Ox.VideoEditor = function(options, self) {
videoRatio: self.options.videoWidth / self.options.videoHeight videoRatio: self.options.videoWidth / self.options.videoHeight
}); });
self.words = [] self.words = [];
Ox.forEach(Ox.count(Ox.words(self.options.subtitles.map(function(subtitle) { Ox.forEach(Ox.count(Ox.words(self.options.subtitles.map(function(subtitle) {
return subtitle.text; return subtitle.text;
}).join(' '))), function(count, word) { }).join(' '))), function(count, word) {
@ -155,7 +155,7 @@ Ox.VideoEditor = function(options, self) {
return obj.word; return obj.word;
}); });
self.$editor = new Ox.Element() self.$editor = Ox.Element()
.addClass('OxVideoEditor') .addClass('OxVideoEditor')
.click(function(e) { .click(function(e) {
var $target = $(e.target); var $target = $(e.target);
@ -165,7 +165,7 @@ Ox.VideoEditor = function(options, self) {
self.sizes = getSizes(); self.sizes = getSizes();
['play', 'in', 'out'].forEach(function(type, i) { ['play', 'in', 'out'].forEach(function(type, i) {
self.$player[i] = new Ox.VideoPlayer({ self.$player[i] = Ox.VideoPlayer({
controlsBottom: type == 'play' ? controlsBottom: type == 'play' ?
['play', 'playInToOut', 'volume', 'size', 'space', 'position'] : ['play', 'playInToOut', 'volume', 'size', 'space', 'position'] :
['goto', 'set', 'space', 'position'], ['goto', 'set', 'space', 'position'],
@ -207,7 +207,7 @@ Ox.VideoEditor = function(options, self) {
.appendTo(self.$editor); .appendTo(self.$editor);
}); });
self.$timeline[0] = new Ox.LargeVideoTimeline({ self.$timeline[0] = Ox.LargeVideoTimeline({
cuts: self.options.cuts, cuts: self.options.cuts,
duration: self.options.duration, duration: self.options.duration,
find: self.options.find, find: self.options.find,
@ -228,7 +228,7 @@ Ox.VideoEditor = function(options, self) {
.bindEvent('position', changeTimelineLarge) .bindEvent('position', changeTimelineLarge)
.appendTo(self.$editor); .appendTo(self.$editor);
self.$timeline[1] = new Ox.BlockVideoTimeline({ self.$timeline[1] = Ox.BlockVideoTimeline({
cuts: self.options.cuts, cuts: self.options.cuts,
duration: self.options.duration, duration: self.options.duration,
find: self.options.find, find: self.options.find,
@ -249,14 +249,14 @@ Ox.VideoEditor = function(options, self) {
.bindEvent('position', changeTimelineSmall) .bindEvent('position', changeTimelineSmall)
.appendTo(self.$editor); .appendTo(self.$editor);
self.$annotations = new Ox.Element() self.$annotations = Ox.Element()
.css({ .css({
overflowY: 'auto' overflowY: 'auto'
}); });
self.$annotationPanel = []; self.$annotationPanel = [];
self.options.layers.forEach(function(layer, i) { self.options.layers.forEach(function(layer, i) {
self.$annotationPanel[i] = new Ox.AnnotationPanel( self.$annotationPanel[i] = Ox.AnnotationPanel(
$.extend({ $.extend({
width: self.options.annotationSize width: self.options.annotationSize
}, layer) }, layer)
@ -352,7 +352,7 @@ Ox.VideoEditor = function(options, self) {
.html(shortcut.action) .html(shortcut.action)
) )
); );
}) });
self.$videoMenuButton = Ox.Select({ self.$videoMenuButton = Ox.Select({
items: Ox.merge([ items: Ox.merge([
@ -401,7 +401,7 @@ Ox.VideoEditor = function(options, self) {
.appendTo(self.$videobar); .appendTo(self.$videobar);
self.$videoMenuButton.find('input').attr({ self.$videoMenuButton.find('input').attr({
src: Ox.UI.getImagePath('symbolSet.svg') src: Ox.UI.getImagePath('symbolSet.svg')
}) });
self.$selectButton = Ox.Button({ self.$selectButton = Ox.Button({
style: 'symbol', style: 'symbol',
@ -413,7 +413,7 @@ Ox.VideoEditor = function(options, self) {
click: function() { click: function() {
self.$menuButton.find('input').trigger('click') self.$menuButton.find('input').trigger('click')
} }
}) });
//.appendTo(self.$videobar); //.appendTo(self.$videobar);
@ -426,7 +426,7 @@ Ox.VideoEditor = function(options, self) {
change: function() { change: function() {
} }
}) });
//.appendTo(self.$videobar); //.appendTo(self.$videobar);
@ -441,7 +441,7 @@ Ox.VideoEditor = function(options, self) {
.css({float: 'left'}) .css({float: 'left'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
setPosition(self.options.posterFrame) setPosition(self.options.posterFrame);
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$videobar);
@ -517,7 +517,7 @@ Ox.VideoEditor = function(options, self) {
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$videobar);
self.$findInput.find('input').css({background: 'transparent'}) self.$findInput.find('input').css({background: 'transparent'});
self.$findButton = Ox.Button({ self.$findButton = Ox.Button({
//disabled: true, //disabled: true,
@ -531,7 +531,7 @@ Ox.VideoEditor = function(options, self) {
click: function() { click: function() {
} }
}) });
//.appendTo(self.$videobar); //.appendTo(self.$videobar);
self.$nextButton = Ox.Button({ self.$nextButton = Ox.Button({
@ -544,7 +544,7 @@ Ox.VideoEditor = function(options, self) {
.css({float: 'right'}) .css({float: 'right'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
setPosition(getNextPosition('result', 1)) setPosition(getNextPosition('result', 1));
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$videobar);
@ -559,7 +559,7 @@ Ox.VideoEditor = function(options, self) {
.css({float: 'right'}) .css({float: 'right'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
setPosition(getNextPosition('result', -1)) setPosition(getNextPosition('result', -1));
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$videobar);
@ -597,7 +597,7 @@ Ox.VideoEditor = function(options, self) {
.appendTo(self.$annotationsbar); .appendTo(self.$annotationsbar);
self.$annotationsMenuButton.find('input').attr({ self.$annotationsMenuButton.find('input').attr({
src: Ox.UI.getImagePath('symbolSet.svg') src: Ox.UI.getImagePath('symbolSet.svg')
}) });
that.$element = Ox.SplitPanel({ that.$element = Ox.SplitPanel({
@ -767,7 +767,7 @@ Ox.VideoEditor = function(options, self) {
top: self.margin / 2, top: self.margin / 2,
width: widths[i], width: widths[i],
height: Math.round(widths[1] / self.videoRatio) height: Math.round(widths[1] / self.videoRatio)
} };
width += widths[i]; width += widths[i];
}); });
} else { } else {
@ -775,32 +775,32 @@ Ox.VideoEditor = function(options, self) {
left: self.margin / 2, left: self.margin / 2,
top: self.margin / 2, top: self.margin / 2,
width: Math.round((contentWidth - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.videoRatio) * 2/3), 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[0].height = Math.round(size.player[0].width / self.videoRatio);
size.player[1] = { size.player[1] = {
left: size.player[0].left + size.player[0].width + self.margin, left: size.player[0].left + size.player[0].width + self.margin,
top: size.player[0].top, top: size.player[0].top,
width: contentWidth - 3 * self.margin - size.player[0].width width: contentWidth - 3 * self.margin - size.player[0].width
} };
size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio) size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio);
size.player[2] = { size.player[2] = {
left: size.player[1].left, left: size.player[1].left,
top: size.player[0].top + size.player[1].height + self.controlsHeight + self.margin, top: size.player[0].top + size.player[1].height + self.controlsHeight + self.margin,
width: size.player[1].width, width: size.player[1].width,
height: size.player[0].height - size.player[1].height - self.controlsHeight - self.margin height: size.player[0].height - size.player[1].height - self.controlsHeight - self.margin
} };
} }
size.timeline[0] = { size.timeline[0] = {
left: self.margin / 2, left: self.margin / 2,
top: size.player[0].height + self.controlsHeight + 1.5 * self.margin, top: size.player[0].height + self.controlsHeight + 1.5 * self.margin,
width: contentWidth - 2 * self.margin, width: contentWidth - 2 * self.margin,
height: 64 height: 64
} };
size.timeline[1] = { size.timeline[1] = {
left: size.timeline[0].left, left: size.timeline[0].left,
top: size.timeline[0].top + size.timeline[0].height + self.margin, top: size.timeline[0].top + size.timeline[0].height + self.margin,
width: size.timeline[0].width width: size.timeline[0].width
} };
lines = Math.ceil(self.options.duration / size.timeline[1].width); lines = Math.ceil(self.options.duration / size.timeline[1].width);
height = getHeight(); height = getHeight();
self.$editor.css({ self.$editor.css({
@ -1000,12 +1000,12 @@ Ox.VideoEditor = function(options, self) {
that.addAnnotation = function(layer, item) { that.addAnnotation = function(layer, item) {
var i = Ox.getPositionById(self.options.layers, layer); var i = Ox.getPositionById(self.options.layers, layer);
self.$annotationPanel[i].addItem(item); self.$annotationPanel[i].addItem(item);
} };
that.removeAnnotations = function(layer, ids) { that.removeAnnotations = function(layer, ids) {
var i = Ox.getPositionById(self.options.layers, layer); var i = Ox.getPositionById(self.options.layers, layer);
self.$annotationPanel[i].removeItems(ids); self.$annotationPanel[i].removeItems(ids);
} };
return that; return that;

26
source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js
View file

@ -11,8 +11,8 @@ Ox.VideoEditorPlayer <f:Ox.Element> VideoEditorPlayer Object
Ox.VideoEditorPlayer = function(options, self) { Ox.VideoEditorPlayer = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
duration: 0, duration: 0,
find: '', find: '',
@ -36,7 +36,7 @@ Ox.VideoEditorPlayer = function(options, self) {
self.controlsHeight = 16; self.controlsHeight = 16;
if (self.options.type == 'play') { if (self.options.type == 'play') {
self.$video = new Ox.VideoElement({ self.$video = Ox.VideoElement({
height: self.options.height, height: self.options.height,
paused: true, paused: true,
points: self.options.points, points: self.options.points,
@ -112,7 +112,7 @@ Ox.VideoEditorPlayer = function(options, self) {
}); });
}); });
self.$controls = new Ox.Bar({ self.$controls = Ox.Bar({
size: self.controlsHeight size: self.controlsHeight
}) })
.css({ .css({
@ -122,7 +122,7 @@ Ox.VideoEditorPlayer = function(options, self) {
if (self.options.type == 'play') { if (self.options.type == 'play') {
// fixme: $buttonPlay etc. ? // fixme: $buttonPlay etc. ?
self.$playButton = new Ox.Button({ self.$playButton = Ox.Button({
id: self.options.id + 'Play', id: self.options.id + 'Play',
title: [ title: [
{id: 'play', title: 'play'}, {id: 'play', title: 'play'},
@ -133,7 +133,7 @@ Ox.VideoEditorPlayer = function(options, self) {
}) })
.bindEvent('click', togglePlay) .bindEvent('click', togglePlay)
.appendTo(self.$controls); .appendTo(self.$controls);
self.$playInToOutButton = new Ox.Button({ self.$playInToOutButton = Ox.Button({
id: self.options.id + 'PlayInToOut', id: self.options.id + 'PlayInToOut',
title: 'PlayInToOut', title: 'PlayInToOut',
tooltip: 'Play In to Out', tooltip: 'Play In to Out',
@ -143,7 +143,7 @@ Ox.VideoEditorPlayer = function(options, self) {
that.playInToOut(); that.playInToOut();
}) })
.appendTo(self.$controls); .appendTo(self.$controls);
self.$muteButton = new Ox.Button({ self.$muteButton = Ox.Button({
id: self.options.id + 'Mute', id: self.options.id + 'Mute',
title: [ title: [
{id: 'mute', title: 'mute'}, {id: 'mute', title: 'mute'},
@ -154,7 +154,7 @@ Ox.VideoEditorPlayer = function(options, self) {
}) })
.bindEvent('click', toggleMute) .bindEvent('click', toggleMute)
.appendTo(self.$controls); .appendTo(self.$controls);
self.$sizeButton = new Ox.Button({ self.$sizeButton = Ox.Button({
id: self.options.id + 'Size', id: self.options.id + 'Size',
title: self.options.size == 'small' ? [ title: self.options.size == 'small' ? [
{id: 'large', title: 'grow'}, {id: 'large', title: 'grow'},
@ -169,7 +169,7 @@ Ox.VideoEditorPlayer = function(options, self) {
.bindEvent('click', toggleSize) .bindEvent('click', toggleSize)
.appendTo(self.$controls); .appendTo(self.$controls);
} else { } else {
self.$goToPointButton = new Ox.Button({ self.$goToPointButton = Ox.Button({
id: self.options.id + 'GoTo' + Ox.toTitleCase(self.options.type), id: self.options.id + 'GoTo' + Ox.toTitleCase(self.options.type),
title: 'GoTo' + Ox.toTitleCase(self.options.type), title: 'GoTo' + Ox.toTitleCase(self.options.type),
tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point', tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point',
@ -177,7 +177,7 @@ Ox.VideoEditorPlayer = function(options, self) {
}) })
.bindEvent('click', goToPoint) .bindEvent('click', goToPoint)
.appendTo(self.$controls); .appendTo(self.$controls);
self.$setPointButton = new Ox.Button({ self.$setPointButton = Ox.Button({
id: self.options.id + 'Set' + Ox.toTitleCase(self.options.type), id: self.options.id + 'Set' + Ox.toTitleCase(self.options.type),
title: 'Set' + Ox.toTitleCase(self.options.type), title: 'Set' + Ox.toTitleCase(self.options.type),
tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point', tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point',
@ -187,7 +187,7 @@ Ox.VideoEditorPlayer = function(options, self) {
.appendTo(self.$controls); .appendTo(self.$controls);
} }
self.$positionInput = new Ox.TimeInput({ self.$positionInput = Ox.TimeInput({
milliseconds: true, milliseconds: true,
seconds: true, seconds: true,
value: Ox.formatDuration(self.options.position, 3) value: Ox.formatDuration(self.options.position, 3)
@ -220,7 +220,7 @@ Ox.VideoEditorPlayer = function(options, self) {
}); });
if (self.options.type == 'play') { if (self.options.type == 'play') {
self.$loadingIcon = new Ox.LoadingIcon() self.$loadingIcon = Ox.LoadingIcon()
.appendTo(that) .appendTo(that)
.start(); .start();
self.loadingInterval = setInterval(function() { self.loadingInterval = setInterval(function() {
@ -309,7 +309,7 @@ Ox.VideoEditorPlayer = function(options, self) {
self.$loadingIcon && self.$loadingIcon.stop(); self.$loadingIcon && self.$loadingIcon.stop();
url = self.options.url(position); url = self.options.url(position);
if (self.$video.attr('src') != url) { if (self.$video.attr('src') != url) {
self.$loadingIcon = new Ox.LoadingIcon() self.$loadingIcon = Ox.LoadingIcon()
.appendTo(that) .appendTo(that)
.start(); .start();
self.$video.attr({ self.$video.attr({

6
source/Ox.UI/js/Video/Ox.VideoElement.js
View file

@ -2,8 +2,8 @@
Ox.VideoElement = function(options, self) { Ox.VideoElement = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element('<video>', self) var that = Ox.Element('<video>', self)
.defaults({ .defaults({
fps: 25, fps: 25,
height: 0, height: 0,
@ -42,7 +42,7 @@ Ox.VideoElement = function(options, self) {
self.video.currentTime = self.options.position; self.video.currentTime = self.options.position;
that.triggerEvent('loadedmetadata', { that.triggerEvent('loadedmetadata', {
video: self.video video: self.video
}) });
}, },
progress: function() { progress: function() {
that.triggerEvent('progress', { that.triggerEvent('progress', {

32
source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js
View file

@ -11,8 +11,8 @@ Ox.VideoPanelPlayer <f:Ox.Element> VideoPanelPlayer Object
Ox.VideoPanelPlayer = function(options, self) { Ox.VideoPanelPlayer = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
annotationsSize: 256, annotationsSize: 256,
duration: 0, duration: 0,
@ -60,7 +60,7 @@ Ox.VideoPanelPlayer = function(options, self) {
}); });
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS])) //alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
self.$player = new Ox.Element() self.$player = Ox.Element()
.css({ .css({
overflowX: 'hidden', overflowX: 'hidden',
overflowY: 'hidden' overflowY: 'hidden'
@ -72,7 +72,7 @@ Ox.VideoPanelPlayer = function(options, self) {
resize: resizeVideo resize: resizeVideo
}); });
self.$video = new Ox.VideoElement({ self.$video = Ox.VideoElement({
height: self.videoCSS.height, height: self.videoCSS.height,
paused: true, paused: true,
points: self.options.points, points: self.options.points,
@ -87,12 +87,12 @@ Ox.VideoPanelPlayer = function(options, self) {
}) })
.appendTo(self.$player); .appendTo(self.$player);
self.$controls = new Ox.Element() self.$controls = Ox.Element()
.bindEvent({ .bindEvent({
toggle: toggleControls toggle: toggleControls
}); });
self.$buttons = new Ox.Element() self.$buttons = Ox.Element()
.css({ .css({
float: 'left', float: 'left',
width: '16px', width: '16px',
@ -101,7 +101,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.appendTo(self.$controls); .appendTo(self.$controls);
self.$button = { self.$button = {
play: new Ox.Button({ play: Ox.Button({
id: 'play', id: 'play',
title: [ title: [
{id: 'play', title: 'play'}, {id: 'play', title: 'play'},
@ -113,7 +113,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.bindEvent({ .bindEvent({
click: self.$video.togglePlay click: self.$video.togglePlay
}), }),
mute: new Ox.Button({ mute: Ox.Button({
id: 'mute', id: 'mute',
title: [ title: [
{id: 'mute', title: 'mute'}, {id: 'mute', title: 'mute'},
@ -125,7 +125,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.bindEvent({ .bindEvent({
click: self.$video.toggleMute click: self.$video.toggleMute
}), }),
size: new Ox.Button({ size: Ox.Button({
id: 'size', id: 'size',
title: self.options.videoSize == 'fit' ? [ title: self.options.videoSize == 'fit' ? [
{id: 'fill', title: 'fill'}, {id: 'fill', title: 'fill'},
@ -144,7 +144,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.bindEvent({ .bindEvent({
click: toggleSize click: toggleSize
}), }),
fullscreen: new Ox.Button({ fullscreen: Ox.Button({
id: 'size', id: 'size',
title: [ title: [
{id: 'grow', title: 'grow'}, {id: 'grow', title: 'grow'},
@ -169,7 +169,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.appendTo(self.$buttons); .appendTo(self.$buttons);
}); });
self.$timelines = new Ox.Element() self.$timelines = Ox.Element()
.css({ .css({
float: 'left', float: 'left',
margin: '4px' margin: '4px'
@ -177,7 +177,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.appendTo(self.$controls); .appendTo(self.$controls);
self.$timeline = { self.$timeline = {
large: new Ox.LargeTimeline({ large: Ox.LargeTimeline({
duration: self.options.duration, duration: self.options.duration,
position: self.options.position, position: self.options.position,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
@ -190,7 +190,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.bindEvent({ .bindEvent({
change: changeLargeTimeline change: changeLargeTimeline
}), }),
small: new Ox.SmallTimeline({ small: Ox.SmallTimeline({
duration: self.options.duration, duration: self.options.duration,
position: self.options.position, position: self.options.position,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
@ -208,7 +208,7 @@ Ox.VideoPanelPlayer = function(options, self) {
$timeline.appendTo(self.$timelines); $timeline.appendTo(self.$timelines);
}); });
self.$panel = new Ox.SplitPanel({ self.$panel = Ox.SplitPanel({
elements: [ elements: [
{ {
element: self.$player element: self.$player
@ -226,14 +226,14 @@ Ox.VideoPanelPlayer = function(options, self) {
resize: resizePanel resize: resizePanel
}); });
self.$annotations = new Ox.Element() self.$annotations = Ox.Element()
.bindEvent({ .bindEvent({
resize: resizeAnnotations, resize: resizeAnnotations,
resizeend: resizeendAnnotations, resizeend: resizeendAnnotations,
toggle: toggleAnnotations toggle: toggleAnnotations
}); });
that.$element = new Ox.SplitPanel({ that.$element = Ox.SplitPanel({
elements: [ elements: [
{ {
element: self.$panel element: self.$panel

28
source/Ox.UI/js/Window/Ox.Dialog.js
View file

@ -13,8 +13,8 @@ Ox.Dialog = function(options, self) {
// fixme: dialog should be derived from a generic draggable // fixme: dialog should be derived from a generic draggable
// fixme: buttons should have a close attribute, or the dialog a close id // fixme: buttons should have a close attribute, or the dialog a close id
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
title: '', title: '',
buttons: [], buttons: [],
@ -43,9 +43,9 @@ Ox.Dialog = function(options, self) {
$.extend(self, { $.extend(self, {
initialWidth: self.options.width, initialWidth: self.options.width,
initialHeight: self.options.height initialHeight: self.options.height
}) });
that.$titlebar = new Ox.Bar({ that.$titlebar = Ox.Bar({
size: 'medium' size: 'medium'
}) })
.addClass('OxTitleBar') .addClass('OxTitleBar')
@ -57,12 +57,12 @@ Ox.Dialog = function(options, self) {
drag: drag drag: drag
}); });
that.$title = new Ox.Element() that.$title = Ox.Element()
.addClass('OxTitle') .addClass('OxTitle')
.html(self.options.title) .html(self.options.title)
.appendTo(that.$titlebar); .appendTo(that.$titlebar);
that.$content = new Ox.Element() that.$content = Ox.Element()
.addClass('OxContent') .addClass('OxContent')
.css({ .css({
padding: self.options.padding + 'px', padding: self.options.padding + 'px',
@ -71,14 +71,14 @@ Ox.Dialog = function(options, self) {
.append(self.options.content) .append(self.options.content)
.appendTo(that); .appendTo(that);
that.$buttonsbar = new Ox.Bar({}) that.$buttonsbar = Ox.Bar({})
.addClass('OxButtonsBar') .addClass('OxButtonsBar')
.appendTo(that); .appendTo(that);
loadButtons(); loadButtons();
//that.$buttons[0].focus(); //that.$buttons[0].focus();
that.$layer = new Ox.Element() // fixme: Layer widget that would handle click? that.$layer = Ox.Element() // fixme: Layer widget that would handle click?
.addClass('OxLayer') .addClass('OxLayer')
.mousedown(mousedownLayer) .mousedown(mousedownLayer)
.mouseup(mouseupLayer); .mouseup(mouseupLayer);
@ -224,7 +224,7 @@ Ox.Dialog = function(options, self) {
.appendTo(that.$buttonsbar); .appendTo(that.$buttonsbar);
}); });
if (self.options.resizable) { if (self.options.resizable) {
that.$resize = new Ox.Element() that.$resize = Ox.Element()
.addClass('OxResize') .addClass('OxResize')
.dblclick(reset) .dblclick(reset)
.bindEvent({ .bindEvent({
@ -304,7 +304,7 @@ Ox.Dialog = function(options, self) {
}, 100); }, 100);
}); });
} }
} };
that.center = function() { that.center = function() {
@ -323,14 +323,14 @@ Ox.Dialog = function(options, self) {
that.removeElement(); that.removeElement();
callback(); callback();
}); });
Ox.UI.$window.unbind('mouseup', mouseupLayer) Ox.UI.$window.unbind('mouseup', mouseupLayer);
return that; return that;
}; };
that.content = function($element) { that.content = function($element) {
that.$content.empty().append($element); that.$content.empty().append($element);
return that; return that;
} };
that.disable = function() { that.disable = function() {
// to be used on submit of form, like login // to be used on submit of form, like login
@ -369,7 +369,7 @@ Ox.Dialog = function(options, self) {
reset(); reset();
// fixme: the following line prevents preview-style dialog // fixme: the following line prevents preview-style dialog
that.gainFocus(); that.gainFocus();
Ox.UI.$window.bind('mouseup', mouseupLayer) Ox.UI.$window.bind('mouseup', mouseupLayer);
//Ox.print('after open') //Ox.print('after open')
return that; return that;
}; };
@ -391,7 +391,7 @@ Ox.Dialog = function(options, self) {
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
callback(); callback();
}); });
} };
return that; return that;

4
source/Ox.UI/js/Window/Ox.Tooltip.js
View file

@ -11,8 +11,8 @@ Ox.Tooltip <f:Ox.Element> Tooltip Object
Ox.Tooltip = function(options, self) { Ox.Tooltip = function(options, self) {
var self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
animate: true, animate: true,
title: '' title: ''

6
source/Ox.UI/js/Window/Ox.Window.js
View file

@ -15,8 +15,8 @@ Ox.Window <f:Ox.Element> Window object
@*/ @*/
Ox.Window = function(options, self) { Ox.Window = function(options, self) {
self = self || {}, self = self || {};
that = new Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
draggable: true, draggable: true,
fullscreenable: true, // fixme: silly name fullscreenable: true, // fixme: silly name
@ -25,7 +25,7 @@ Ox.Window = function(options, self) {
scaleable: true, scaleable: true,
width: 400 width: 400
}) })
.options(options || {}) .options(options || {});
self.center = function() { self.center = function() {

1
source/Ox.js
View file

@ -746,6 +746,7 @@ Ox.map = function(obj, fn) {
var isObject = Ox.isObject(obj), var isObject = Ox.isObject(obj),
ret = isObject ? {} : []; ret = isObject ? {} : [];
Ox.forEach(obj, function(val, key) { Ox.forEach(obj, function(val, key) {
var v;
if ((v = fn(val, key)) !== null) { if ((v = fn(val, key)) !== null) {
ret[isObject ? key : ret.length] = v; ret[isObject ? key : ret.length] = v;
} }