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
@*/
Ox.Bar = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
orientation: 'horizontal',
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
collapsed: false,
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) {
var self = self || {},
that = new Ox.Bar({
self = self || {};
var that = Ox.Bar({
size: 20
}, self)
.defaults({
@ -30,7 +30,7 @@ Ox.Tabbar = function(options, self) {
selectable: true,
selected: self.options.selected,
size: 'medium',
style: 'tab',
style: 'tab'
}).appendTo(that);
return that;

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

@ -3,8 +3,8 @@
fixme: no need for this
*/
Ox.Toolbar = function(options, self) {
var self = self || {},
that = new Ox.Bar({
self = self || {};
var that = Ox.Bar({
size: Ox.UI.getBarSize(options.size)
}, self);
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) {
self = self || {};
var that = new Ox.Element({}, self)
var that = Ox.Element({}, self)
.defaults({
date: new Date(),
events: [],
@ -338,7 +338,7 @@ Ox.Calendar = function(options, self) {
})
.appendTo(self.$toolbar);
self.$scalebar = new Ox.Element()
self.$scalebar = Ox.Element()
.addClass('OxTimeline')
.css({
posision: 'absolute',
@ -346,7 +346,7 @@ Ox.Calendar = function(options, self) {
})
.appendTo(that);
self.$container = new Ox.Element()
self.$container = Ox.Element()
.addClass('OxCalendarContainer')
.css({
top: '40px',
@ -367,15 +367,15 @@ Ox.Calendar = function(options, self) {
})
.appendTo(that);
self.$content = new Ox.Element()
self.$content = Ox.Element()
.addClass('OxCalendarContent')
.appendTo(self.$container);
self.$background = new Ox.Element()
self.$background = Ox.Element()
.addClass('OxBackground')
.appendTo(self.$content);
self.$scrollbar = new Ox.Element()
self.$scrollbar = Ox.Element()
.addClass('OxTimeline')
.css({
posision: 'absolute',
@ -383,7 +383,7 @@ Ox.Calendar = function(options, self) {
})
.appendTo(that);
self.$zoombar = new Ox.Element()
self.$zoombar = Ox.Element()
.css({
position: 'absolute',
bottom: 0,
@ -391,7 +391,7 @@ Ox.Calendar = function(options, self) {
})
.appendTo(that);
self.$zoomInput = new Ox.Range({
self.$zoomInput = Ox.Range({
arrows: true,
max: self.maxZoom,
min: 0,
@ -405,7 +405,7 @@ Ox.Calendar = function(options, self) {
})
.appendTo(self.$zoombar);
self.$tooltip = new Ox.Tooltip({
self.$tooltip = Ox.Tooltip({
animate: false
})
.css({
@ -547,7 +547,7 @@ Ox.Calendar = function(options, self) {
Ox.loop(-n, n + 1, function(i) {
if (u == 0 || Ox.mod(value + i, 2)) {
$elements.push(
new Ox.Element()
Ox.Element()
.addClass(
u == 0 ? 'line' : ''
)
@ -599,7 +599,7 @@ Ox.Calendar = function(options, self) {
paddingLeft = 0;
width = getPosition(event.endTime, zoom) - left;
}
return new Ox.Element()
return Ox.Element()
.addClass('OxEvent' +
(event.type ? ' Ox' + Ox.toTitleCase(event.type) : '' ) +
(event.current ? ' OxCurrent' : '') +
@ -869,7 +869,7 @@ Ox.Calendar = function(options, self) {
});
if (line == self.lineEvents.length) {
self.lineEvents[line] = [];
self.$lines[line] = new Ox.Element()
self.$lines[line] = Ox.Element()
.addClass('OxLine')
.css({
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
() -> <f> App object
(options) -> <f> App object
(options, self) -> <f> App object
options <o> Options object
timeout <n> request timeout
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() {
return function(options) {
Ox.App = function(options) {
options = options || {};
var self = {
@ -27,7 +24,7 @@ Ox.App = (function() {
}, options || {}),
time: new Date()
},
that = new Ox.Element({}, self);
that = Ox.Element({}, self);
that.api = {
api: function(callback) {
@ -128,6 +125,4 @@ Ox.App = (function() {
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) {
// fixme: to be deprecated
var that = new Ox.Element({}, self)
var that = Ox.Element({}, self)
.options(options || {})
.addClass('OxContainer');
that.$content = new Ox.Element({}, self) // fixme: passing self twice??
that.$content = Ox.Element({}, self) // fixme: passing self twice??
.options(options || {})
.addClass('OxContent')
.appendTo(that);

12
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
@*/
Ox.Element = function() {
return function(options, self) {
Ox.Element = 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)) {
return new arguments.callee(options, self);
}
@ -69,8 +67,8 @@ Ox.Element = function() {
if (Ox.isString(self.options)) {
self.options = {
element: self.options
}
};
}
// create event handler
if (!self.$eventHandler) {
self.$eventHandler = $('<div>');
@ -376,6 +374,4 @@ Ox.Element = function() {
return that;
}
}();
};

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

@ -101,7 +101,7 @@
buffer = '';
}, 1000);
Ox.print(ret)
Ox.print(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) {
var self = self || {},
that = new Ox.Element('<img>', self)
self = self || {};
var that = Ox.Element('<img>', self)
.defaults({
size: 'medium'
})
@ -42,6 +42,6 @@ Ox.LoadingIcon = function(options, self) {
opacity: 0
}, 250);
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,
height: 384
}),
$dialog = new Ox.Dialog({
$dialog = Ox.Dialog({
title: 'Application Error',
buttons: [
new Ox.Button({
Ox.Button({
title: 'Close'
})
.bindEvent({
@ -186,10 +186,10 @@ Ox.Request = function(options) {
if (data.status.code < 500) {
callback(data);
} else {
var $dialog = new Ox.Dialog({
var $dialog = Ox.Dialog({
title: 'Application Error',
buttons: [
new Ox.Button({
Ox.Button({
id: 'details',
title: 'Details'
})
@ -200,7 +200,7 @@ Ox.Request = function(options) {
});
}
}),
new Ox.Button({
Ox.Button({
id: 'close',
title: 'Close'
})

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

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

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) {
var self = self || {},
that = new Ox.Element('<input>', self)
self = self || {};
var that = Ox.Element('<input>', self)
.defaults({
disabled: false,
group: false,
@ -72,7 +73,7 @@ Ox.Button = function(options, self) {
if (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]
});
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
buttons: [],
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
disabled: false,
id: '',
@ -41,7 +41,7 @@ Ox.Checkbox = function(options, self) {
self.options.width != 'auto' && that.css({
width: self.options.width + 'px'
});
self.$title = new Ox.Label({
self.$title = Ox.Label({
disabled: self.options.disabled,
id: self.options.id + 'Label',
overlap: 'left',
@ -55,7 +55,7 @@ Ox.Checkbox = function(options, self) {
.appendTo(that);
}
self.$button = new Ox.Button({
self.$button = Ox.Button({
disabled: self.options.disabled,
id: self.options.id + 'Button',
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
checkboxes: [],
max: 1,
@ -45,7 +45,7 @@ Ox.CheckboxGroup = function(options, self) {
});
self.options.checkboxes.forEach(function(checkbox, position) {
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,
id: id,
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) {
var self = $.extend(self || {}, {
self = $.extend(self || {}, {
options: $.extend({
id: '',
value: '0, 0, 0'
}, options)
}),
that;
});
var that;
self.values = self.options.value.split(', ');
self.$inputs = [];
['red', 'green', 'blue'].forEach(function(v, i) {
self.$inputs[i] = new Ox.Input({
self.$inputs[i] = Ox.Input({
id: v,
max: 255,
type: 'integer',
@ -31,14 +31,14 @@ Ox.ColorInput = function(options, self) {
})
.bindEvent('autovalidate', change);
});
self.$inputs[3] = new Ox.Label({
self.$inputs[3] = Ox.Label({
id: 'color',
width: 36
})
.css({
background: 'rgb(' + self.options.value + ')'
});
self.$inputs[4] = new Ox.ColorPicker({
self.$inputs[4] = Ox.ColorPicker({
id: 'picker'
})
.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
});
that = new Ox.InputGroup({
that = Ox.InputGroup({
id: self.options.id,
inputs: self.$inputs,
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
id: '',
value: '0, 0, 0'
@ -28,7 +28,7 @@ Ox.ColorPicker = function(options, self) {
self.values = self.options.value.split(', ');
Ox.range(3).forEach(function(i) {
self.$ranges[i] = new Ox.Range({
self.$ranges[i] = Ox.Range({
arrows: true,
id: self.options.id + Ox.toTitleCase(self.rgb[i]),
max: 255,
@ -64,7 +64,7 @@ Ox.ColorPicker = function(options, self) {
}
});
that = new Ox.Picker({
that = Ox.Picker({
element: that,
elementHeight: 46,
elementWidth: 328,
@ -97,7 +97,7 @@ Ox.ColorPicker = function(options, self) {
'rgb(' + $.map(Ox.range(3), function(v) {
return v == index ? 255 : self.values[v];
}).join(', ') + ')'
]
];
}
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) {
var self = $.extend(self || {}, {
var that;
self = $.extend(self || {}, {
options: $.extend({
format: 'short',
value: Ox.formatDate(new Date(), '%F'),
@ -27,8 +28,7 @@ Ox.DateInput = function(options, self) {
year: 48
}
}, options)
}),
that;
});
$.extend(self, {
date: new Date(self.options.value.replace(/-/g, '/')),
@ -48,7 +48,7 @@ Ox.DateInput = function(options, self) {
});
self.$input = $.extend(self.options.weekday ? {
weekday: new Ox.Input({
weekday: Ox.Input({
autocomplete: self.weekdays,
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
@ -58,7 +58,7 @@ Ox.DateInput = function(options, self) {
})
.bindEvent('autocomplete', changeWeekday),
} : {}, {
day: new Ox.Input({
day: Ox.Input({
autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth(
parseInt(Ox.formatDate(self.date, '%Y'), 10),
parseInt(Ox.formatDate(self.date, '%m'), 10)
@ -73,7 +73,7 @@ Ox.DateInput = function(options, self) {
width: self.options.width.day
})
.bindEvent('autocomplete', changeDay),
month: new Ox.Input({
month: Ox.Input({
autocomplete: self.options.format == 'short' ? $.map(Ox.range(1, 13), function(v, i) {
return Ox.pad(v, 2);
}) : self.months,
@ -85,7 +85,7 @@ Ox.DateInput = function(options, self) {
width: self.options.width.month
})
.bindEvent('autocomplete', changeMonthOrYear),
year: new Ox.Input({
year: Ox.Input({
autocomplete: $.map($.merge(Ox.range(1900, 3000), Ox.range(1000, 1900)), function(v, i) {
return v.toString();
}),
@ -99,7 +99,7 @@ Ox.DateInput = function(options, self) {
.bindEvent('autocomplete', changeMonthOrYear)
});
that = new Ox.InputGroup($.extend(self.options, {
that = Ox.InputGroup($.extend(self.options, {
id: self.options.id,
inputs: $.merge(self.options.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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
ampm: false,
format: 'short',
@ -31,15 +31,15 @@ Ox.DateTimeInput = function(options, self) {
self.values = self.options.value.split(' ');
//Ox.print(self.values)
that = new Ox.InputGroup({
that = Ox.InputGroup({
inputs: [
new Ox.DateInput({
Ox.DateInput({
format: self.options.format,
id: 'date',
value: self.values[0],
weekday: self.options.weekday
}),
new Ox.TimeInput({
Ox.TimeInput({
ampm: self.options.ampm,
id: 'time',
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;
var isGroup = subpos == -1 && self.options.query.conditions[pos].conditions;
return Ox.merge([
new Ox.Button({
Ox.Button({
disabled: self.options.query.conditions.length == 1,
id: '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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
error: '',
id: '',
@ -38,7 +38,7 @@ Ox.Form = function(options, self) {
self.options.items.forEach(function(item, i) {
self.itemIds[i] = item.options('id') || item.id;
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({
/*
blur: function(event, data) {
@ -89,7 +89,7 @@ Ox.Form = function(options, self) {
that.addItem = function(pos, item) {
Ox.print('addItem', pos)
self.options.items.splice(pos, 0, item);
self.$items.splice(pos, 0, new Ox.FormItem({element: item}));
self.$items.splice(pos, 0, Ox.FormItem({element: item}));
pos == 0 ?
self.$items[pos].insertBefore(self.$items[0]) :
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
id: '',
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
element: null,
error: '',
@ -23,7 +23,7 @@ Ox.FormItem = function(options, self) {
.addClass('OxFormItem')
.append(self.options.element);
self.$message = new Ox.Element()
self.$message = Ox.Element()
.addClass('OxFormMessage')
.appendTo(that);
@ -33,7 +33,7 @@ Ox.FormItem = function(options, self) {
@*/
that.setMessage = function(message) {
self.$message.html(message)[message !== '' ? 'show' : 'hide']();
}
};
/*@
value <f> get value
@ -45,4 +45,4 @@ Ox.FormItem = function(options, self) {
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
arrows: false,
arrowStep: 1,
@ -133,7 +133,7 @@ Ox.Input = function(options, self) {
}
if (self.options.label) {
self.$label = new Ox.Label({
self.$label = Ox.Label({
overlap: 'right',
textAlign: 'right',
title: self.options.label,
@ -152,7 +152,7 @@ Ox.Input = function(options, self) {
if (self.options.arrows) {
self.arrows = [];
self.arrows[0] = [
new Ox.Button({
Ox.Button({
overlap: 'right',
title: 'left',
type: 'image'
@ -164,7 +164,7 @@ Ox.Input = function(options, self) {
clickArrow(0);
})
.appendTo(that),
new Ox.Button({
Ox.Button({
overlap: 'left',
title: 'right',
type: 'image'
@ -187,7 +187,7 @@ Ox.Input = function(options, self) {
});
if (self.options.clear) {
self.$button = new Ox.Button({
self.$button = Ox.Button({
overlap: 'left',
title: 'close',
type: 'image'
@ -401,7 +401,7 @@ Ox.Input = function(options, self) {
}
function constructAutocompleteMenu() {
var menu = new Ox.Menu({
var menu = Ox.Menu({
element: self.$input,
id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
offset: {
@ -908,8 +908,8 @@ Ox.Input_ = function(options, self) {
events:
*/
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
autocomplete: null,
autocorrect: null,
@ -1066,7 +1066,7 @@ Ox.Input_ = function(options, self) {
self.options[self.keyName].forEach(function(key, keyPos) {
//Ox.print('keyPos key', keyPos, key)
if (self.keyName == 'label' && key.label.length == 1) {
that.$key[keyPos] = new Ox.Label({
that.$key[keyPos] = Ox.Label({
overlap: 'right',
title: key.label[0].title,
width: self.options.labelWidth
@ -1083,7 +1083,7 @@ Ox.Input_ = function(options, self) {
self.selectKeyId = self.options.id + Ox.toTitleCase(self.keyName) +
(self.options[self.keyName].length == 1 ? '' : keyPos);
//Ox.print('three', self.selectedKey, keyPos, self.selectedKey[keyPos]);
that.$key[keyPos] = new Ox.Select({
that.$key[keyPos] = Ox.Select({
id: self.selectKeyId,
items: $.map(key.label, function(value, valuePos) {
return {
@ -1107,7 +1107,7 @@ Ox.Input_ = function(options, self) {
}
if (self.options.clear) {
that.$clear = new Ox.Button({
that.$clear = Ox.Button({
overlap: 'left',
title: 'close',
type: 'image'
@ -1120,7 +1120,7 @@ Ox.Input_ = function(options, self) {
}
if (self.options.unit.length == 1) {
that.$unit = new Ox.Label({
that.$unit = Ox.Label({
overlap: 'left',
title: self.options.unit[0].title,
width: self.options.unitWidth
@ -1134,7 +1134,7 @@ Ox.Input_ = function(options, self) {
.appendTo(that);
} else if (self.options.unit.length > 1) {
self.selectUnitId = self.options.id + 'Unit';
that.$unit = new Ox.Select({
that.$unit = Ox.Select({
id: self.selectUnitId,
items: $.map(self.options.unit, function(unit, i) {
//Ox.print('unit', unit)
@ -1159,7 +1159,7 @@ Ox.Input_ = function(options, self) {
that.$separator = [];
self.options.value.forEach(function(v, i) {
if (i < self.values - 1) {
that.$separator[i] = new Ox.Label({
that.$separator[i] = Ox.Label({
textAlign: 'center',
title: self.options.separator[i],
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)
//Ox.print('v:', v, 'id:', id)
if (self.options.type == 'select') {
that.$input[i] = new Ox.Select({
that.$input[i] = Ox.Select({
id: v.id,
items: v.items,
width: v.width
@ -1194,12 +1194,12 @@ Ox.Input_ = function(options, self) {
float: 'left'
});
} else if (self.options.type == 'range') {
that.$input[i] = new Ox.Range(v)
that.$input[i] = Ox.Range(v)
.css({
float: 'left'
});
} else {
that.$input[i] = new Ox.InputElement({
that.$input[i] = Ox.InputElement({
autocomplete: self.options.autocomplete[id],
autocorrect: self.options.autocorrect[id],
autosuggest: self.options.autosuggest[id],
@ -1339,8 +1339,8 @@ Ox.Input_ = function(options, self) {
Ox.InputElement_ = function(options, self) {
var self = self || {},
that = new Ox.Element(
self = self || {};
var that = Ox.Element(
options.type == 'textarea' ? 'textarea' : 'input', self
)
.defaults({
@ -1388,7 +1388,7 @@ Ox.InputElement_ = function(options, self) {
if (self.options.autosuggest) {
self.autosuggestId = self.options.id + 'Menu'; // fixme: we do this in other places ... are we doing it the same way? var name?
self.$autosuggestMenu = new Ox.Menu({
self.$autosuggestMenu = Ox.Menu({
element: that.$element,
id: self.autosuggestId,
offset: {
@ -1663,8 +1663,8 @@ Ox.Range_ = function(options, self) {
/*
init
*/
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
animate: false,
arrows: false,
@ -1715,7 +1715,7 @@ Ox.Range_ = function(options, self) {
.click(clickArrowDec)
.appendTo(that.$element);
}
var $track = new Ox.Element()
var $track = Ox.Element()
.addClass('OxTrack')
.mousedown(clickTrack)
.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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
id: '',
inputs: [],
@ -42,7 +42,7 @@ Ox.InputGroup = function(options, self) {
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.$separator[i] = new Ox.Label({
self.$separator[i] = Ox.Label({
textAlign: 'center',
title: v.title,
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
disabled: false,
id: '',
@ -36,9 +36,9 @@ Ox.Label = function(options, self) {
if (key == 'title') {
that.html(value);
} else if (key == 'width') {
that.css({width: self.options.width - 14 + 'px'})
}
that.css({width: self.options.width - 14 + 'px'});
}
};
return that;

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

@ -14,9 +14,8 @@ Ox.OptionGroup = function(items, min, max, property) {
/*
to be used by ButtonGroup, CheckboxGroup, Select and Menu
*/
var property = property || 'checked'
length = items.length,
var length = items.length;
property = property || 'checked';
max = max == -1 ? length : max;
function getLastBefore(pos) {
@ -47,7 +46,7 @@ Ox.OptionGroup = function(items, min, max, property) {
if (item[property]) {
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
element: null,
elementHeight: 128,
@ -27,7 +27,7 @@ Ox.Picker = function(options, self) {
})
.options(options || {});
self.$selectButton = new Ox.Button({
self.$selectButton = Ox.Button({
overlap: self.options.overlap,
title: 'select',
type: 'image'
@ -35,7 +35,7 @@ Ox.Picker = function(options, self) {
.click(showMenu)
.appendTo(that);
self.$menu = new Ox.Element()
self.$menu = Ox.Element()
.addClass('OxPicker')
.css({
width: self.options.elementWidth + 'px',
@ -49,18 +49,18 @@ Ox.Picker = function(options, self) {
})
.appendTo(self.$menu);
self.$bar = new Ox.Bar({
self.$bar = Ox.Bar({
orientation: 'horizontal',
size: 24
})
.appendTo(self.$menu);
that.$label = new Ox.Label({
that.$label = Ox.Label({
width: self.options.elementWidth - 60
})
.appendTo(self.$bar);
self.$doneButton = new Ox.Button({
self.$doneButton = Ox.Button({
title: 'Done',
width: 48
})
@ -81,7 +81,7 @@ Ox.Picker = function(options, self) {
WebkitBorderRadius: '8px'
});
that.triggerEvent('hide');
};
}
function showMenu() {
var offset = that.offset(),
@ -101,7 +101,7 @@ Ox.Picker = function(options, self) {
})
.appendTo(Ox.UI.$body);
that.triggerEvent('show');
};
}
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) {
var self = $.extend(self || {}, {
var that;
self = $.extend(self || {}, {
options: $.extend({
id: '',
value: 'United States'
}, options)
}),
that;
that = new Ox.FormElementGroup({
});
that = Ox.FormElementGroup({
id: self.options.id,
elements: [
new Ox.Input({
Ox.Input({
id: 'input',
value: self.options.value
}),
new Ox.PlacePicker({
Ox.PlacePicker({
id: 'picker',
overlap: 'left',
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) {
var self = $.extend(self || {}, {
var that;
self = $.extend(self || {}, {
options: $.extend({
id: '',
value: 'United States'
}, options)
}),
that;
});
self.$element = new Ox.Element()
self.$element = Ox.Element()
.css({
width: '256px',
height: '192px'
})
.append(
self.$topBar = new Ox.Bar({
self.$topBar = Ox.Bar({
size: 16
})
.css({
@ -35,7 +35,7 @@ Ox.PlacePicker = function(options, self) {
WebkitBorderRadius: '0 8px 0 0'
})
.append(
self.$input = new Ox.Input({
self.$input = Ox.Input({
clear: true,
id: self.options.id + 'Input',
placeholder: 'Find',
@ -45,18 +45,18 @@ Ox.PlacePicker = function(options, self) {
)
)
.append(
self.$container = new Ox.Element()
self.$container = Ox.Element()
.css({
width: '256px',
height: '160px'
})
)
.append(
self.$bottomBar = new Ox.Bar({
self.$bottomBar = Ox.Bar({
size: 16
})
.append(
self.$range = new Ox.Range({
self.$range = Ox.Range({
arrows: true,
id: self.options.id + 'Range',
max: 22,
@ -83,7 +83,7 @@ Ox.PlacePicker = function(options, self) {
WebkitBorderRadius: 0
});
that = new Ox.Picker({
that = Ox.Picker({
element: self.$element,
elementHeight: 192,
elementWidth: 256,
@ -93,7 +93,7 @@ Ox.PlacePicker = function(options, self) {
}, self)
.bindEvent('show', showPicker);
that.$label.bind('click', clickLabel)
that.$label.bind('click', clickLabel);
self.map = false;
@ -118,7 +118,7 @@ Ox.PlacePicker = function(options, self) {
//Ox.print('findPlace', data);
self.$map.find(data.value, function(place) {
place && that.$label.html(place.geoname);
})
});
}
function onSelect(event, data) {
@ -133,7 +133,7 @@ Ox.PlacePicker = function(options, self) {
function showPicker() {
if (!self.map) {
self.$map = new Ox.Map({
self.$map = Ox.Map({
clickable: true,
id: self.options.id + 'Map',
//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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
arrows: false,
arrowStep: 1,
@ -66,7 +66,7 @@ Ox.Range = function(options, self) {
if (self.options.arrows) {
self.$arrows = [];
Ox.range(0, 2).forEach(function(i) {
self.$arrows[i] = new Ox.Button({
self.$arrows[i] = Ox.Button({
overlap: i == 0 ? 'right' : 'left',
title: self.options.arrowSymbols[i],
type: 'image'
@ -84,7 +84,7 @@ Ox.Range = function(options, self) {
});
}
self.$track = new Ox.Element()
self.$track = Ox.Element()
.addClass('OxTrack')
.css($.extend({
width: (self.trackSize - 2) + 'px'
@ -235,7 +235,7 @@ Ox.Range = function(options, self) {
}
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) {
//time = getTime(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) {
// fixme: selected item needs attribute "checked", not "selected" ... that's strange
var self = self || {},
that = new Ox.Element({
self = self || {};
var that = Ox.Element({
tooltip: options.tooltip || ''
}, self)
.defaults({
@ -57,7 +57,7 @@ Ox.Select = function(options, self) {
key_down: showMenu
});
Ox.print('Ox.Select', self.options)
Ox.print('Ox.Select', self.options);
$.extend(self, {
buttonId: self.options.id + 'Button',
@ -87,7 +87,7 @@ Ox.Select = function(options, self) {
// that.focus();
})
.appendTo(that);
};
}
if (self.options.type == 'text') {
self.$title = $('<div>')
@ -105,7 +105,7 @@ Ox.Select = function(options, self) {
.appendTo(that.$element);
}
self.$button = new Ox.Button({
self.$button = Ox.Button({
id: self.buttonId,
style: 'symbol',
title: 'select',
@ -114,7 +114,7 @@ Ox.Select = function(options, self) {
.bindEvent('click', showMenu)
.appendTo(that);
self.$menu = new Ox.Menu({
self.$menu = Ox.Menu({
element: self.$title || self.$button,
id: self.menuId,
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) {
// fixme: seconds get set even if options.seconds is false
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
ampm: false,
seconds: false,
@ -46,7 +46,7 @@ Ox.TimeInput = function(options, self) {
self.values = getValues();
self.$input = {
hours: new Ox.Input({
hours: Ox.Input({
autocomplete: $.map(self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24), function(v) {
return Ox.pad(v, 2);
}),
@ -57,7 +57,7 @@ Ox.TimeInput = function(options, self) {
value: self.values.hours,
width: 32//self.options.width.hours
}),
minutes: new Ox.Input({
minutes: Ox.Input({
autocomplete: $.map(Ox.range(0, 60), function(v) {
return Ox.pad(v, 2);
}),
@ -68,7 +68,7 @@ Ox.TimeInput = function(options, self) {
value: self.values.minutes,
width: 32//self.options.width.minutes
}),
seconds: new Ox.Input({
seconds: Ox.Input({
autocomplete: $.map(Ox.range(0, 60), function(v) {
return Ox.pad(v, 2);
}),
@ -79,7 +79,7 @@ Ox.TimeInput = function(options, self) {
value: self.values.seconds,
width: 32//self.options.width.seconds
}),
milliseconds: new Ox.Input({
milliseconds: Ox.Input({
autocomplete: $.map(Ox.range(0, 1000), function(v) {
return Ox.pad(v, 3);
}),
@ -90,7 +90,7 @@ Ox.TimeInput = function(options, self) {
value: self.values.milliseconds,
width: 40//self.options.width.milliseconds
}),
ampm: new Ox.Input({
ampm: Ox.Input({
autocomplete: ['AM', 'PM'],
autocompleteReplace: 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([
self.$input.hours,
self.$input.minutes,
@ -169,7 +169,7 @@ Ox.TimeInput = function(options, self) {
if (key == 'value') {
setValues();
}
}
};
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)
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
height: 128,
id: '',
@ -31,7 +31,7 @@ Ox.IconItem = function(options, self) {
width: 128,
url: ''
})
.options(options || {})
.options(options || {});
$.extend(self, {
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
id <s|''> element id
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
keys <a|[]> available item keys
max <n|-1> maximum selected selected items
@ -23,13 +24,14 @@ Ox.IconList <f:Ox.Element> IconList Object
Ox.IconList = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
centerSelection: false,
draggable: true,
id: '',
item: null,
itemConstructor: Ox.IconItem,
items: null,
keys: [],
max: -1,
@ -46,7 +48,7 @@ Ox.IconList = function(options, self) {
itemWidth: self.options.size
});
that.$element = new Ox.List({
that.$element = Ox.List({
centered: self.options.centered,
construct: constructItem,
draggable: self.options.draggable,
@ -55,10 +57,9 @@ Ox.IconList = function(options, self) {
items: self.options.items,
itemWidth: self.itemWidth,
keys: self.options.keys,
orientation: self.options.orientation,
keys: self.options.keys,
max: self.options.max,
min: self.options.min,
orientation: self.options.orientation,
selected: self.options.selected,
size: self.options.size,
sort: self.options.sort,
@ -81,7 +82,7 @@ Ox.IconList = function(options, self) {
self.options.item(data, self.options.sort, self.options.size) :
{height: 8, width: 5},
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)),
size: self.options.size,
width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio))
@ -115,7 +116,7 @@ Ox.IconList = function(options, self) {
} else if (key == 'selected') {
that.$element.options(key, value);
}
}
};
/*@
closePreview <f> close preview
@ -189,7 +190,7 @@ Ox.IconList = function(options, self) {
that.$element.value(id, key, value);
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
type: 'textarea',
value: '',
@ -27,7 +27,6 @@ Ox.ItemInput = function(options, self) {
})
.options(options || {});
self.$input = Ox.Input({
changeOnKeypress: true,
height: self.options.height,
@ -130,7 +129,7 @@ Ox.ItemInput = function(options, self) {
/*
that.append(
$input = new Ox.Input({
$input = Ox.Input({
height: self.options.height,
style: 'square',
type: self.options.type,
@ -144,15 +143,15 @@ Ox.ItemInput = function(options, self) {
}
})
)
.append(new Ox.Element()
.append(new Ox.Button({type: 'text', title: 'Cancel'})
.append(Ox.Element()
.append(Ox.Button({type: 'text', title: 'Cancel'})
.css('width', '42%')
.bindEvent({
'click': function() {
that.triggerEvent('cancel');
}
}))
.append(new Ox.Button({type: 'text', title: 'Save'})
.append(Ox.Button({type: 'text', title: 'Save'})
.css('width', '42%')
.bindEvent({
'click': function() {
@ -172,4 +171,4 @@ Ox.ItemInput = function(options, self) {
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) {
var self = self || {},
that = new Ox.Container({}, self)
self = self || {};
var that = Ox.Container({}, self)
.defaults({
centered: false,
construct: null,
@ -274,11 +274,11 @@ Ox.List = function(options, self) {
function constructEmptyPage(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++
) {
// fixme: why does chainging fail here?
new Ox.ListItem({
Ox.ListItem({
construct: self.options.construct
}).appendTo($page);
}
@ -427,7 +427,7 @@ Ox.List = function(options, self) {
visibleItems = Math.ceil(height / self.options.itemHeight);
if (self.listLength < visibleItems) {
Ox.range(self.listLength, visibleItems).forEach(function(v) {
var $item = new Ox.ListItem({
var $item = Ox.ListItem({
construct: self.options.construct,
});
$item.addClass('OxEmpty').removeClass('OxTarget');
@ -472,7 +472,7 @@ Ox.List = function(options, self) {
function getAbove() {
var pos = -1;
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) {
pos = -1;
}
@ -543,7 +543,7 @@ Ox.List = function(options, self) {
} : {
top: (page * self.pageHeight + self.listMargin / 2) + 'px',
width: self.pageWidth + 'px'
}
};
}
function getPageHeight() {
@ -622,7 +622,7 @@ Ox.List = function(options, self) {
function getRowLength() {
return self.options.orientation == 'both' ?
Math.floor((getWidth() - self.listMargin) /
(self.options.itemWidth + self.itemMargin)) : 1
(self.options.itemWidth + self.itemMargin)) : 1;
}
function getScrollPosition() {
@ -703,10 +703,10 @@ Ox.List = function(options, self) {
sort: self.options.sort
}, function(result) {
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) {
var pos = offset + i;
self.$items[pos] = new Ox.ListItem({
self.$items[pos] = Ox.ListItem({
construct: self.options.construct,
data: v,
draggable: self.options.draggable,
@ -1342,7 +1342,7 @@ Ox.List = function(options, self) {
});
items.forEach(function(item, i) {
var $item;
$items.push($item = new Ox.ListItem({
$items.push($item = Ox.ListItem({
construct: self.options.construct,
data: item,
draggable: self.options.draggable,
@ -1383,7 +1383,7 @@ Ox.List = function(options, self) {
.empty()
.addClass('OxEdit');
$input = new Ox.ItemInput({
$input = Ox.ItemInput({
type: 'textarea',
value: item.value,
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
construct: function() {},
data: {},
@ -52,7 +52,7 @@ Ox.ListItem = function(options, self) {
if (key == 'data') {
constructItem(true);
}
}
};
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
@*/
Ox.ListPage = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.addClass('OxPage');
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
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
columns: [],
columnsMovable: false,
@ -114,7 +114,7 @@ Ox.TextList = function(options, self) {
if (!Ox.isUndefined(v.position)) {
self.visibleColumns[v.position] = v;
}
})
});
$.extend(self, {
columnWidths: $.map(self.visibleColumns, function(v, i) {
return v.width;
@ -132,11 +132,11 @@ Ox.TextList = function(options, self) {
// Head
if (self.options.columnsVisible) {
that.$bar = new Ox.Bar({
that.$bar = Ox.Bar({
orientation: 'horizontal',
size: 16
}).appendTo(that);
that.$head = new Ox.Container()
that.$head = Ox.Container()
.addClass('OxHead')
.css({
right: self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
@ -145,7 +145,7 @@ Ox.TextList = function(options, self) {
that.$head.$content.addClass('OxTitles');
constructHead();
if (self.options.columnsRemovable) {
that.$select = new Ox.Select({
that.$select = Ox.Select({
id: self.options.id + 'SelectColumns',
items: $.map(self.options.columns, function(v, i) {
return {
@ -166,7 +166,7 @@ Ox.TextList = function(options, self) {
// Body
that.$body = new Ox.List({
that.$body = Ox.List({
construct: constructItem,
id: self.options.id,
items: self.options.items,
@ -299,7 +299,7 @@ Ox.TextList = function(options, self) {
var $order, $resize, $left, $center, $right;
offset += self.columnWidths[i];
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))
.css({
width: (self.columnWidths[i] - 9) + 'px',
@ -338,7 +338,7 @@ Ox.TextList = function(options, self) {
$(this).prev().trigger('click')
})
.appendTo(that.$head.$content.$element);
$resize = new Ox.Element()
$resize = Ox.Element()
.addClass('OxResize')
.appendTo(that.$head.$content.$element);
// if columns are resizable, bind click and drag events
@ -741,7 +741,7 @@ Ox.TextList = function(options, self) {
.css({
width: width + 'px'
});
$input = new Ox.Input({
$input = Ox.Input({
autovalidate: column.input ? column.input.autovalidate : null,
style: 'square',
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
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
data: null,
items: [],
@ -40,7 +40,7 @@ Ox.TreeList = function(options, self) {
//Ox.print('d', self.options.data, 'i', self.options.items)
}
that.$element = new Ox.List({
that.$element = Ox.List({
construct: constructItem,
itemHeight: 16,
items: parseItems(),
@ -114,9 +114,9 @@ Ox.TreeList = function(options, self) {
}
function getItemById(id, items, level) {
var items = items || self.options.items,
level = level || 0,
ret = null;
var ret = null;
items = items || self.options.items;
level = level || 0;
Ox.forEach(items, function(item) {
if (item.id == id) {
ret = $.extend(item, {
@ -151,15 +151,15 @@ Ox.TreeList = function(options, self) {
type == 'function' ?
value.toString().split('{')[0] :
JSON.stringify(value)
)
);
}
return ret;
}
function parseItems(items, level) {
var items = items || self.options.items,
level = level || 0,
ret = [];
var ret = [];
items = items || self.options.items;
level = level || 0;
items.forEach(function(item, i) {
var item_ = $.extend({
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) {
var self = self || {},
that = Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
addPlace: 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) {
self = self || {};
var that = new Ox.Element({}, self)
var that = Ox.Element({}, self)
.defaults({
// fixme: isClickable? hasZoombar?
clickable: false,
@ -155,7 +155,7 @@ Ox.Map = function(options, self) {
that.zoomToPlace();
},
key_shift_equal: function() {
zoom(2)
zoom(2);
},
key_shift_left: function() {
pan(-2, 0);
@ -182,7 +182,7 @@ Ox.Map = function(options, self) {
'id', 'name', 'alternativeNames', 'geoname', 'countryCode', 'type',
'lat', 'lng', 'south', 'west', 'north', 'east', 'area',
'editable'
],
];
self.scaleMeters = [
50000000, 20000000, 10000000,
5000000, 2000000, 1000000,
@ -200,7 +200,7 @@ Ox.Map = function(options, self) {
});
if (self.options.toolbar) {
self.$toolbar = new Ox.Bar({
self.$toolbar = Ox.Bar({
size: 24
})
.appendTo(that);
@ -219,7 +219,7 @@ Ox.Map = function(options, self) {
.css({float: 'left', margin: '4px'})
.appendTo(self.$toolbar);
/*
self.$labelsButton = new Ox.Checkbox({
self.$labelsButton = Ox.Checkbox({
title: 'Labels',
width: 64
})
@ -229,7 +229,7 @@ Ox.Map = function(options, self) {
})
.appendTo(self.$toolbar)
*/
self.$findInput = new Ox.Input({
self.$findInput = Ox.Input({
clear: true,
placeholder: self.options.findPlaceholder,
width: 192
@ -241,7 +241,7 @@ Ox.Map = function(options, self) {
.appendTo(self.$toolbar)
}
self.$map = new Ox.Element()
self.$map = Ox.Element()
.css({
left: 0,
top: self.options.toolbar * 24 + 'px',
@ -251,7 +251,7 @@ Ox.Map = function(options, self) {
.appendTo(that);
if (self.options.zoombar) {
self.$zoombar = new Ox.Bar({
self.$zoombar = Ox.Bar({
size: 16
})
.css({
@ -261,7 +261,7 @@ Ox.Map = function(options, self) {
}
if (self.options.statusbar) {
self.$statusbar = new Ox.Bar({
self.$statusbar = Ox.Bar({
size: 24
})
.css({
@ -275,21 +275,21 @@ Ox.Map = function(options, self) {
})
.css({float: 'left', margin: '4px 2px 4px 4px'})
.appendTo(self.$statusbar.$element);
self.$placeNameInput = new Ox.Input({
self.$placeNameInput = Ox.Input({
placeholder: 'Name',
width: 96
})
//.css({position: 'absolute', left: 4, top: 4})
.css({float: 'left', margin: '4px 2px 4px 2px'})
.appendTo(self.$statusbar);
self.$placeGeonameInput = new Ox.Input({
self.$placeGeonameInput = Ox.Input({
placeholder: 'Geoname',
width: 96
})
//.css({position: 'absolute', left: 104, top: 4})
.css({float: 'left', margin: '4px 2px 4px 2px'})
.appendTo(self.$statusbar);
self.$placeButton = new Ox.Button({
self.$placeButton = Ox.Button({
title: 'New Place',
width: 96
})
@ -301,7 +301,7 @@ Ox.Map = function(options, self) {
}
self.$navigationButtons = {
'center': new Ox.Button({
'center': Ox.Button({
title: 'close',
type: 'image'
})
@ -310,7 +310,7 @@ Ox.Map = function(options, self) {
left: '24px',
top: '24px'
}),
'east': new Ox.Button({
'east': Ox.Button({
title: 'right',
type: 'image'
})
@ -319,7 +319,7 @@ Ox.Map = function(options, self) {
left: '44px',
top: '24px',
}),
'north': new Ox.Button({
'north': Ox.Button({
title: 'up',
type: 'image'
})
@ -328,7 +328,7 @@ Ox.Map = function(options, self) {
left: '24px',
top: '4px',
}),
'south': new Ox.Button({
'south': Ox.Button({
title: 'down',
type: 'image'
})
@ -337,7 +337,7 @@ Ox.Map = function(options, self) {
left: '24px',
top: '44px',
}),
'west': new Ox.Button({
'west': Ox.Button({
title: 'left',
type: 'image'
})
@ -353,7 +353,7 @@ Ox.Map = function(options, self) {
});
});
self.$scaleLabel = new Ox.Label({
self.$scaleLabel = Ox.Label({
textAlign: 'center',
title: '...'
})
@ -488,7 +488,7 @@ Ox.Map = function(options, self) {
//Ox.print('constructZoomInput', self.minZoom, self.maxZoom)
if (self.options.zoombar) {
self.$zoomInput && self.$zoomInput.removeElement();
self.$zoomInput = new Ox.Range({
self.$zoomInput = Ox.Range({
arrows: true,
max: self.maxZoom,
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) {
var self = self || {},
that = new Ox.Element('<img>', self)
that = Ox.Element('<img>', self)
.defaults({
height: 360,
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) {
var options = Ox.extend({
var that = this;
options = Ox.extend({
map: null,
place: null
}, options),
that = this;
}, options);
Ox.forEach(options, function(val, key) {
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) {
var self = self || {},
that = new Ox.Bar({}, self)
self = self || {};
var that = Ox.Bar({}, self)
.defaults({
extras: [],
menus: [],
@ -38,7 +38,7 @@ Ox.MainMenu = function(options, self) {
.html(menu.title)
.data('position', position)
.appendTo(that.$element);
that.menus[position] = new Ox.Menu($.extend(menu, {
that.menus[position] = Ox.Menu($.extend(menu, {
element: that.titles[position],
mainmenu: that,
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.print(options)
var self = self || {},
that = new Ox.Element({}, self)
Ox.print(options);
self = self || {};
var that = Ox.Element({}, self)
.defaults({
element: null,
id: '',
@ -199,12 +199,12 @@ Ox.print(options)
items.forEach(function(item) {
var position;
if ('id' in item) {
that.items.push(new Ox.MenuItem($.extend(item, {
that.items.push(Ox.MenuItem($.extend(item, {
menu: that,
position: position = that.items.length
})).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
if (item.items) {
that.submenus[item.id] = new Ox.Menu({
that.submenus[item.id] = Ox.Menu({
element: that.items[position],
id: Ox.toCamelCase(self.options.id + '/' + item.id),
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) {
var self = self || {},
that = new Ox.Element('<tr>', self)
self = self || {};
var that = Ox.Element('<tr>', self)
.defaults({
bind: [], // fixme: what's this?
checked: null,
@ -113,7 +113,7 @@ Ox.MenuItem = function(options, self) {
self.options.title = Ox.toArray(value);
that.$title.html(self.options.title[0]);
}
}
};
that.toggle = function() {
// 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) {
var self = self || {},
that = new Ox.Panel({}, self)
self = self || {};
var that = Ox.Panel({}, self)
.defaults({
collapsed: false,
extras: [],
@ -28,33 +29,33 @@ Ox.CollapsePanel = function(options, self) {
title = self.options.collapsed ?
[{id: 'expand', title: 'right'}, {id: 'collapse', title: 'down'}] :
[{id: 'collapse', title: 'down'}, {id: 'expand', title: 'right'}],
$titlebar = new Ox.Bar({
$titlebar = Ox.Bar({
orientation: 'horizontal',
size: self.options.size,
})
.dblclick(dblclickTitlebar)
.appendTo(that),
$switch = new Ox.Button({
$switch = Ox.Button({
style: 'symbol',
title: title,
type: 'image',
})
.click(toggleCollapsed)
.appendTo($titlebar),
$title = new Ox.Element()
$title = Ox.Element()
.addClass('OxTitle')
.html(self.options.title/*.toUpperCase()*/)
.appendTo($titlebar),
$extras;
if (self.options.extras.length) {
$extras = new Ox.Element()
$extras = Ox.Element()
.addClass('OxExtras')
.appendTo($titlebar);
self.options.extras.forEach(function($extra) {
$extra.appendTo($extras);
});
}
that.$content = new Ox.Element()
that.$content = Ox.Element()
.addClass('OxContent')
.appendTo(that);
// 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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.addClass('OxPanel');
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) {
var self = self || {},
that = new Ox.Element({}, self) // fixme: Container
self = self || {};
var that = Ox.Element({}, self) // fixme: Container
.defaults({
elements: [],
orientation: 'horizontal'
@ -72,7 +72,7 @@ Ox.SplitPanel = function(options, self) {
if (v.collapsible || v.resizable) {
//Ox.print('v.size', v.size)
self.resizebarElements[index] = i < 2 ? [0, 1] : [1, 2];
self.$resizebars[index] = new Ox.Resizebar({
self.$resizebars[index] = Ox.Resizebar({
collapsible: v.collapsible,
edge: self.edges[index],
elements: [
@ -211,7 +211,7 @@ Ox.SplitPanel = function(options, self) {
});
});
return that;
}
};
that.size = function(id, size) {
// one can pass pos instead of id
@ -255,9 +255,9 @@ Ox.SplitPanel = function(options, self) {
that.updateSize = function(pos, size) {
// this is called from resizebar
var pos = pos == 0 ? 0 : self.options.elements.length - 1; // fixme: silly that 0 or 1 is passed, and not pos
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;
}
};
return that;
@ -265,8 +265,8 @@ Ox.SplitPanel = function(options, self) {
Ox.SplitPanel_ = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
elements: [],
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
id: '',
items: [],
@ -29,10 +29,10 @@ Ox.AnnotationPanel = function(options, self) {
self.selected = -1;
that.$element = new Ox.CollapsePanel({
that.$element = Ox.CollapsePanel({
collapsed: false,
extras: self.options.editable ? [
new Ox.Button({
Ox.Button({
id: 'add',
style: 'symbol',
title: 'add',
@ -53,9 +53,9 @@ Ox.AnnotationPanel = function(options, self) {
});
that.$content = that.$element.$content;
self.$annotations = new Ox.List({
self.$annotations = Ox.List({
construct: function(data) {
return new Ox.Element()
return Ox.Element()
.addClass('OxAnnotation OxEditable OxTarget')
.html(Ox.parseHTML(data.value));
},
@ -87,11 +87,11 @@ Ox.AnnotationPanel = function(options, self) {
.appendTo(that.$content);
/*
self.$annotations = new Ox.Element()
self.$annotations = Ox.Element()
.appendTo(that.$content);
self.$annotation = [];
self.options.items.forEach(function(item, i) {
self.$annotation[i] = new Ox.Element()
self.$annotation[i] = Ox.Element()
.addClass('OxAnnotation')
.html(item.value.replace(/\n/g, '<br/>'))
.click(function() {
@ -141,7 +141,7 @@ Ox.AnnotationPanel = function(options, self) {
that.deselectItems = function() {
if(self.$annotations.options('selected'))
self.$annotations.options('selected',[]);
}
};
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
duration: 0,
find: '',
@ -40,7 +40,7 @@ Ox.BlockTimeline = function(options, self) {
$markerPoint: [],
$selection: [],
$subtitles: [],
$tooltip: new Ox.Tooltip({
$tooltip: Ox.Tooltip({
animate: false
}).css({
textAlign: 'center'
@ -94,7 +94,7 @@ Ox.BlockTimeline = function(options, self) {
function addLine(i) {
// fixme: get URLs once, not once for every line
self.$lines[i] = new Ox.Element()
self.$lines[i] = Ox.Element()
.css({
top: i * (self.height + self.margin) + 'px',
width: self.options.width + 'px'
@ -108,7 +108,7 @@ Ox.BlockTimeline = function(options, self) {
.css({
marginLeft: (-i * self.options.width) + 'px'
})
.appendTo(self.$lines[i].$element)
.appendTo(self.$lines[i].$element);
if (self.hasSubtitles) {
self.subtitlesImageURL = getSubtitlesImageURL();
self.$subtitles[i] = $('<img>')
@ -169,7 +169,7 @@ Ox.BlockTimeline = function(options, self) {
data[index] = color[0];
data[index + 1] = color[1];
data[index + 2] = color[2];
data[index + 3] = color[3]
data[index + 3] = color[3];
});
});
context.putImageData(imageData, 0, 0);
@ -213,7 +213,7 @@ Ox.BlockTimeline = function(options, self) {
data[index] = color[0];
data[index + 1] = color[1];
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('OxTimelineSmallSelection')
) {
position = getPosition(e),
position = getPosition(e);
subtitle = getSubtitle(position);
self.$tooltip.options({
title: subtitle ?
@ -361,7 +361,7 @@ Ox.BlockTimeline = function(options, self) {
//Ox.print('key', key, 'value', value)
setMarkerPoint(0);
setMarkerPoint(1);
updateSelection()
updateSelection();
} else if (key == 'position') {
setPosition();
} 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) {
self = self || {};
var that = new Ox.Element({}, self)
var that = Ox.Element({}, self)
.defaults({
duration: 0,
find: '',
@ -32,7 +33,7 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$images = [];
self.$interfaces = [];
self.$lines = [];
self.$tooltip = new Ox.Tooltip({
self.$tooltip = Ox.Tooltip({
animate: false
}).css({
textAlign: 'center'
@ -263,7 +264,7 @@ Ox.BlockVideoTimeline = function(options, self) {
self.setOption = function(key, value) {
if (key == 'in' || key == 'out') {
setPoint(key)
setPoint(key);
} else if (key == 'position') {
setPositionMarker();
} else if (key == 'results') {
@ -271,7 +272,7 @@ Ox.BlockVideoTimeline = function(options, self) {
} else if (key == 'width') {
setWidth();
}
}
};
return that;

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

@ -3,8 +3,8 @@
Ox.Flipbook = function(options, self) {
var self = self || {},
frame = $('<img>').css({
self = self || {};
var frame = $('<img>').css({
'position': 'absolute',
'width': '100%',
'height': 'auto'
@ -22,7 +22,7 @@ Ox.Flipbook = function(options, self) {
'width': '100%'
})
.hide(),
that = new Ox.Element({}, self)
that = Ox.Element({}, self)
.defaults({
frames: {},
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
cuts: [],
duration: 0,
@ -40,7 +40,7 @@ Ox.LargeTimeline = function(options, self) {
$markerPoint: [],
$subtitles: [],
$tiles: {},
$tooltip: new Ox.Tooltip({
$tooltip: Ox.Tooltip({
animate: false
}),
center: parseInt(self.options.width / 2),
@ -55,7 +55,7 @@ Ox.LargeTimeline = function(options, self) {
.css({
left: self.center + 'px'
})
.appendTo(that.$element)
.appendTo(that.$element);
self.options.subtitles.forEach(function(v, i) {
self.$subtitles[i] = $('<div>')
@ -65,7 +65,7 @@ Ox.LargeTimeline = function(options, self) {
width: (((v['out'] - v['in']) * self.fps) - 2) + 'px'
})
.html(Ox.highlight(v.value, self.options.find, 'OxHighlight'))
.appendTo(self.$timeline)
.appendTo(self.$timeline);
});
self.options.cuts.forEach(function(v, i) {
@ -77,7 +77,7 @@ Ox.LargeTimeline = function(options, self) {
.css({
left: (v * self.fps) + 'px'
})
.appendTo(self.$timeline)
.appendTo(self.$timeline);
});
self.$markerPosition = $('<img>')
@ -124,7 +124,7 @@ Ox.LargeTimeline = function(options, self) {
}
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) {

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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
cuts: [],
duration: 0,
@ -41,7 +41,7 @@ Ox.LargeVideoTimeline = function(options, self) {
$cuts: [],
$pointMarker: {},
$tiles: {},
$tooltip: new Ox.Tooltip({
$tooltip: Ox.Tooltip({
animate: false
}),
center: parseInt(self.options.width / 2),
@ -117,7 +117,7 @@ Ox.LargeVideoTimeline = function(options, self) {
}
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) {
@ -182,7 +182,7 @@ Ox.LargeVideoTimeline = function(options, self) {
width: (((subtitle.out - subtitle['in']) * self.fps) - 2) + 'px'
})
.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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
duration: 0,
find: '',
@ -38,7 +38,7 @@ Ox.SmallTimeline = function(options, self) {
$images: [],
$markerPoint: [],
$subtitles: [],
$tooltip: new Ox.Tooltip({
$tooltip: Ox.Tooltip({
animate: false
}).css({
textAlign: 'center'
@ -135,7 +135,7 @@ Ox.SmallTimeline = function(options, self) {
$target.hasClass('OxTimelineSmallImage') ||
$target.hasClass('OxTimelineSmallSubtitles')
) {
position = getPosition(e),
position = getPosition(e);
subtitle = getSubtitle(position);
self.$tooltip.options({
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.$timeline.css({width: value + 'px'});
}
}
};
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
annotationsSize: 0,
cuts: [],
@ -97,10 +97,10 @@ Ox.VideoEditor = function(options, self) {
// toggleSize
},
key_shift_comma: function() {
movePositionTo('match', -1)
movePositionTo('match', -1);
},
key_shift_dot: function() {
movePositionTo('match', 1)
movePositionTo('match', 1);
},
key_shift_down: function() {
movePositionBy(self.options.duration);
@ -143,7 +143,7 @@ Ox.VideoEditor = function(options, self) {
videoRatio: self.options.videoWidth / self.options.videoHeight
});
self.words = []
self.words = [];
Ox.forEach(Ox.count(Ox.words(self.options.subtitles.map(function(subtitle) {
return subtitle.text;
}).join(' '))), function(count, word) {
@ -155,7 +155,7 @@ Ox.VideoEditor = function(options, self) {
return obj.word;
});
self.$editor = new Ox.Element()
self.$editor = Ox.Element()
.addClass('OxVideoEditor')
.click(function(e) {
var $target = $(e.target);
@ -165,7 +165,7 @@ Ox.VideoEditor = function(options, self) {
self.sizes = getSizes();
['play', 'in', 'out'].forEach(function(type, i) {
self.$player[i] = new Ox.VideoPlayer({
self.$player[i] = Ox.VideoPlayer({
controlsBottom: type == 'play' ?
['play', 'playInToOut', 'volume', 'size', 'space', 'position'] :
['goto', 'set', 'space', 'position'],
@ -207,7 +207,7 @@ Ox.VideoEditor = function(options, self) {
.appendTo(self.$editor);
});
self.$timeline[0] = new Ox.LargeVideoTimeline({
self.$timeline[0] = Ox.LargeVideoTimeline({
cuts: self.options.cuts,
duration: self.options.duration,
find: self.options.find,
@ -228,7 +228,7 @@ Ox.VideoEditor = function(options, self) {
.bindEvent('position', changeTimelineLarge)
.appendTo(self.$editor);
self.$timeline[1] = new Ox.BlockVideoTimeline({
self.$timeline[1] = Ox.BlockVideoTimeline({
cuts: self.options.cuts,
duration: self.options.duration,
find: self.options.find,
@ -249,14 +249,14 @@ Ox.VideoEditor = function(options, self) {
.bindEvent('position', changeTimelineSmall)
.appendTo(self.$editor);
self.$annotations = new Ox.Element()
self.$annotations = Ox.Element()
.css({
overflowY: 'auto'
});
self.$annotationPanel = [];
self.options.layers.forEach(function(layer, i) {
self.$annotationPanel[i] = new Ox.AnnotationPanel(
self.$annotationPanel[i] = Ox.AnnotationPanel(
$.extend({
width: self.options.annotationSize
}, layer)
@ -352,7 +352,7 @@ Ox.VideoEditor = function(options, self) {
.html(shortcut.action)
)
);
})
});
self.$videoMenuButton = Ox.Select({
items: Ox.merge([
@ -401,7 +401,7 @@ Ox.VideoEditor = function(options, self) {
.appendTo(self.$videobar);
self.$videoMenuButton.find('input').attr({
src: Ox.UI.getImagePath('symbolSet.svg')
})
});
self.$selectButton = Ox.Button({
style: 'symbol',
@ -413,7 +413,7 @@ Ox.VideoEditor = function(options, self) {
click: function() {
self.$menuButton.find('input').trigger('click')
}
})
});
//.appendTo(self.$videobar);
@ -426,7 +426,7 @@ Ox.VideoEditor = function(options, self) {
change: function() {
}
})
});
//.appendTo(self.$videobar);
@ -441,7 +441,7 @@ Ox.VideoEditor = function(options, self) {
.css({float: 'left'})
.bindEvent({
click: function() {
setPosition(self.options.posterFrame)
setPosition(self.options.posterFrame);
}
})
.appendTo(self.$videobar);
@ -517,7 +517,7 @@ Ox.VideoEditor = function(options, self) {
}
})
.appendTo(self.$videobar);
self.$findInput.find('input').css({background: 'transparent'})
self.$findInput.find('input').css({background: 'transparent'});
self.$findButton = Ox.Button({
//disabled: true,
@ -531,7 +531,7 @@ Ox.VideoEditor = function(options, self) {
click: function() {
}
})
});
//.appendTo(self.$videobar);
self.$nextButton = Ox.Button({
@ -544,7 +544,7 @@ Ox.VideoEditor = function(options, self) {
.css({float: 'right'})
.bindEvent({
click: function() {
setPosition(getNextPosition('result', 1))
setPosition(getNextPosition('result', 1));
}
})
.appendTo(self.$videobar);
@ -559,7 +559,7 @@ Ox.VideoEditor = function(options, self) {
.css({float: 'right'})
.bindEvent({
click: function() {
setPosition(getNextPosition('result', -1))
setPosition(getNextPosition('result', -1));
}
})
.appendTo(self.$videobar);
@ -597,7 +597,7 @@ Ox.VideoEditor = function(options, self) {
.appendTo(self.$annotationsbar);
self.$annotationsMenuButton.find('input').attr({
src: Ox.UI.getImagePath('symbolSet.svg')
})
});
that.$element = Ox.SplitPanel({
@ -767,7 +767,7 @@ Ox.VideoEditor = function(options, self) {
top: self.margin / 2,
width: widths[i],
height: Math.round(widths[1] / self.videoRatio)
}
};
width += widths[i];
});
} else {
@ -775,32 +775,32 @@ Ox.VideoEditor = function(options, self) {
left: self.margin / 2,
top: self.margin / 2,
width: Math.round((contentWidth - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.videoRatio) * 2/3),
}
};
size.player[0].height = Math.round(size.player[0].width / self.videoRatio);
size.player[1] = {
left: size.player[0].left + size.player[0].width + self.margin,
top: size.player[0].top,
width: contentWidth - 3 * self.margin - size.player[0].width
}
size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio)
};
size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio);
size.player[2] = {
left: size.player[1].left,
top: size.player[0].top + size.player[1].height + self.controlsHeight + self.margin,
width: size.player[1].width,
height: size.player[0].height - size.player[1].height - self.controlsHeight - self.margin
}
};
}
size.timeline[0] = {
left: self.margin / 2,
top: size.player[0].height + self.controlsHeight + 1.5 * self.margin,
width: contentWidth - 2 * self.margin,
height: 64
}
};
size.timeline[1] = {
left: size.timeline[0].left,
top: size.timeline[0].top + size.timeline[0].height + self.margin,
width: size.timeline[0].width
}
};
lines = Math.ceil(self.options.duration / size.timeline[1].width);
height = getHeight();
self.$editor.css({
@ -1000,12 +1000,12 @@ Ox.VideoEditor = function(options, self) {
that.addAnnotation = function(layer, item) {
var i = Ox.getPositionById(self.options.layers, layer);
self.$annotationPanel[i].addItem(item);
}
};
that.removeAnnotations = function(layer, ids) {
var i = Ox.getPositionById(self.options.layers, layer);
self.$annotationPanel[i].removeItems(ids);
}
};
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
duration: 0,
find: '',
@ -36,7 +36,7 @@ Ox.VideoEditorPlayer = function(options, self) {
self.controlsHeight = 16;
if (self.options.type == 'play') {
self.$video = new Ox.VideoElement({
self.$video = Ox.VideoElement({
height: self.options.height,
paused: true,
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
})
.css({
@ -122,7 +122,7 @@ Ox.VideoEditorPlayer = function(options, self) {
if (self.options.type == 'play') {
// fixme: $buttonPlay etc. ?
self.$playButton = new Ox.Button({
self.$playButton = Ox.Button({
id: self.options.id + 'Play',
title: [
{id: 'play', title: 'play'},
@ -133,7 +133,7 @@ Ox.VideoEditorPlayer = function(options, self) {
})
.bindEvent('click', togglePlay)
.appendTo(self.$controls);
self.$playInToOutButton = new Ox.Button({
self.$playInToOutButton = Ox.Button({
id: self.options.id + 'PlayInToOut',
title: 'PlayInToOut',
tooltip: 'Play In to Out',
@ -143,7 +143,7 @@ Ox.VideoEditorPlayer = function(options, self) {
that.playInToOut();
})
.appendTo(self.$controls);
self.$muteButton = new Ox.Button({
self.$muteButton = Ox.Button({
id: self.options.id + 'Mute',
title: [
{id: 'mute', title: 'mute'},
@ -154,7 +154,7 @@ Ox.VideoEditorPlayer = function(options, self) {
})
.bindEvent('click', toggleMute)
.appendTo(self.$controls);
self.$sizeButton = new Ox.Button({
self.$sizeButton = Ox.Button({
id: self.options.id + 'Size',
title: self.options.size == 'small' ? [
{id: 'large', title: 'grow'},
@ -169,7 +169,7 @@ Ox.VideoEditorPlayer = function(options, self) {
.bindEvent('click', toggleSize)
.appendTo(self.$controls);
} else {
self.$goToPointButton = new Ox.Button({
self.$goToPointButton = Ox.Button({
id: self.options.id + 'GoTo' + Ox.toTitleCase(self.options.type),
title: 'GoTo' + Ox.toTitleCase(self.options.type),
tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point',
@ -177,7 +177,7 @@ Ox.VideoEditorPlayer = function(options, self) {
})
.bindEvent('click', goToPoint)
.appendTo(self.$controls);
self.$setPointButton = new Ox.Button({
self.$setPointButton = Ox.Button({
id: self.options.id + 'Set' + Ox.toTitleCase(self.options.type),
title: 'Set' + Ox.toTitleCase(self.options.type),
tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point',
@ -187,7 +187,7 @@ Ox.VideoEditorPlayer = function(options, self) {
.appendTo(self.$controls);
}
self.$positionInput = new Ox.TimeInput({
self.$positionInput = Ox.TimeInput({
milliseconds: true,
seconds: true,
value: Ox.formatDuration(self.options.position, 3)
@ -220,7 +220,7 @@ Ox.VideoEditorPlayer = function(options, self) {
});
if (self.options.type == 'play') {
self.$loadingIcon = new Ox.LoadingIcon()
self.$loadingIcon = Ox.LoadingIcon()
.appendTo(that)
.start();
self.loadingInterval = setInterval(function() {
@ -309,7 +309,7 @@ Ox.VideoEditorPlayer = function(options, self) {
self.$loadingIcon && self.$loadingIcon.stop();
url = self.options.url(position);
if (self.$video.attr('src') != url) {
self.$loadingIcon = new Ox.LoadingIcon()
self.$loadingIcon = Ox.LoadingIcon()
.appendTo(that)
.start();
self.$video.attr({

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

@ -2,8 +2,8 @@
Ox.VideoElement = function(options, self) {
var self = self || {},
that = new Ox.Element('<video>', self)
self = self || {};
var that = Ox.Element('<video>', self)
.defaults({
fps: 25,
height: 0,
@ -42,7 +42,7 @@ Ox.VideoElement = function(options, self) {
self.video.currentTime = self.options.position;
that.triggerEvent('loadedmetadata', {
video: self.video
})
});
},
progress: function() {
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
annotationsSize: 256,
duration: 0,
@ -60,7 +60,7 @@ Ox.VideoPanelPlayer = function(options, self) {
});
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
self.$player = new Ox.Element()
self.$player = Ox.Element()
.css({
overflowX: 'hidden',
overflowY: 'hidden'
@ -72,7 +72,7 @@ Ox.VideoPanelPlayer = function(options, self) {
resize: resizeVideo
});
self.$video = new Ox.VideoElement({
self.$video = Ox.VideoElement({
height: self.videoCSS.height,
paused: true,
points: self.options.points,
@ -87,12 +87,12 @@ Ox.VideoPanelPlayer = function(options, self) {
})
.appendTo(self.$player);
self.$controls = new Ox.Element()
self.$controls = Ox.Element()
.bindEvent({
toggle: toggleControls
});
self.$buttons = new Ox.Element()
self.$buttons = Ox.Element()
.css({
float: 'left',
width: '16px',
@ -101,7 +101,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.appendTo(self.$controls);
self.$button = {
play: new Ox.Button({
play: Ox.Button({
id: 'play',
title: [
{id: 'play', title: 'play'},
@ -113,7 +113,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.bindEvent({
click: self.$video.togglePlay
}),
mute: new Ox.Button({
mute: Ox.Button({
id: 'mute',
title: [
{id: 'mute', title: 'mute'},
@ -125,7 +125,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.bindEvent({
click: self.$video.toggleMute
}),
size: new Ox.Button({
size: Ox.Button({
id: 'size',
title: self.options.videoSize == 'fit' ? [
{id: 'fill', title: 'fill'},
@ -144,7 +144,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.bindEvent({
click: toggleSize
}),
fullscreen: new Ox.Button({
fullscreen: Ox.Button({
id: 'size',
title: [
{id: 'grow', title: 'grow'},
@ -169,7 +169,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.appendTo(self.$buttons);
});
self.$timelines = new Ox.Element()
self.$timelines = Ox.Element()
.css({
float: 'left',
margin: '4px'
@ -177,7 +177,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.appendTo(self.$controls);
self.$timeline = {
large: new Ox.LargeTimeline({
large: Ox.LargeTimeline({
duration: self.options.duration,
position: self.options.position,
subtitles: self.options.subtitles,
@ -190,7 +190,7 @@ Ox.VideoPanelPlayer = function(options, self) {
.bindEvent({
change: changeLargeTimeline
}),
small: new Ox.SmallTimeline({
small: Ox.SmallTimeline({
duration: self.options.duration,
position: self.options.position,
subtitles: self.options.subtitles,
@ -208,7 +208,7 @@ Ox.VideoPanelPlayer = function(options, self) {
$timeline.appendTo(self.$timelines);
});
self.$panel = new Ox.SplitPanel({
self.$panel = Ox.SplitPanel({
elements: [
{
element: self.$player
@ -226,14 +226,14 @@ Ox.VideoPanelPlayer = function(options, self) {
resize: resizePanel
});
self.$annotations = new Ox.Element()
self.$annotations = Ox.Element()
.bindEvent({
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
toggle: toggleAnnotations
});
that.$element = new Ox.SplitPanel({
that.$element = Ox.SplitPanel({
elements: [
{
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: buttons should have a close attribute, or the dialog a close id
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
title: '',
buttons: [],
@ -43,9 +43,9 @@ Ox.Dialog = function(options, self) {
$.extend(self, {
initialWidth: self.options.width,
initialHeight: self.options.height
})
});
that.$titlebar = new Ox.Bar({
that.$titlebar = Ox.Bar({
size: 'medium'
})
.addClass('OxTitleBar')
@ -57,12 +57,12 @@ Ox.Dialog = function(options, self) {
drag: drag
});
that.$title = new Ox.Element()
that.$title = Ox.Element()
.addClass('OxTitle')
.html(self.options.title)
.appendTo(that.$titlebar);
that.$content = new Ox.Element()
that.$content = Ox.Element()
.addClass('OxContent')
.css({
padding: self.options.padding + 'px',
@ -71,14 +71,14 @@ Ox.Dialog = function(options, self) {
.append(self.options.content)
.appendTo(that);
that.$buttonsbar = new Ox.Bar({})
that.$buttonsbar = Ox.Bar({})
.addClass('OxButtonsBar')
.appendTo(that);
loadButtons();
//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')
.mousedown(mousedownLayer)
.mouseup(mouseupLayer);
@ -224,7 +224,7 @@ Ox.Dialog = function(options, self) {
.appendTo(that.$buttonsbar);
});
if (self.options.resizable) {
that.$resize = new Ox.Element()
that.$resize = Ox.Element()
.addClass('OxResize')
.dblclick(reset)
.bindEvent({
@ -304,7 +304,7 @@ Ox.Dialog = function(options, self) {
}, 100);
});
}
}
};
that.center = function() {
@ -323,14 +323,14 @@ Ox.Dialog = function(options, self) {
that.removeElement();
callback();
});
Ox.UI.$window.unbind('mouseup', mouseupLayer)
Ox.UI.$window.unbind('mouseup', mouseupLayer);
return that;
};
that.content = function($element) {
that.$content.empty().append($element);
return that;
}
};
that.disable = function() {
// to be used on submit of form, like login
@ -369,7 +369,7 @@ Ox.Dialog = function(options, self) {
reset();
// fixme: the following line prevents preview-style dialog
that.gainFocus();
Ox.UI.$window.bind('mouseup', mouseupLayer)
Ox.UI.$window.bind('mouseup', mouseupLayer);
//Ox.print('after open')
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
callback();
});
}
};
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) {
var self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
animate: true,
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) {
self = self || {},
that = new Ox.Element({}, self)
self = self || {};
var that = Ox.Element({}, self)
.defaults({
draggable: true,
fullscreenable: true, // fixme: silly name
@ -25,7 +25,7 @@ Ox.Window = function(options, self) {
scaleable: true,
width: 400
})
.options(options || {})
.options(options || {});
self.center = function() {

1
source/Ox.js
View file

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