various improvements in OxJS and OxUI

This commit is contained in:
rolux 2011-04-29 14:40:51 +02:00
parent 74b9a25387
commit 7380595c7e
48 changed files with 184 additions and 161 deletions

View file

@ -697,7 +697,7 @@ Ox.Calendar = function(options, self) {
} }
} }
self.onChange = function(key, val) { self.setOption = function(key, val) {
if (key == 'date') { if (key == 'date') {
} else if (key == 'zoom') { } else if (key == 'zoom') {

View file

@ -6,10 +6,10 @@
Ox.Container = function(options, self) { Ox.Container = function(options, self) {
// fixme: to be deprecated // fixme: to be deprecated
var that = new Ox.Element('div', self) var that = new Ox.Element({}, self)
.options(options || {}) .options(options || {})
.addClass('OxContainer'); .addClass('OxContainer');
that.$content = new Ox.Element('div', self) that.$content = new Ox.Element({}, self)
.options(options || {}) .options(options || {})
.addClass('OxContent') .addClass('OxContent')
.appendTo(that); .appendTo(that);

View file

@ -16,24 +16,33 @@ Ox.Element = function() {
return function(options, self) { return function(options, self) {
/*
// allow for 'Ox.Element()' instead of 'new Ox.Element()'
if (!(this instanceof arguments.callee)) { if (!(this instanceof arguments.callee)) {
return new arguments.callee(options, self); return new arguments.callee(options, self);
} }
*/
// create private object
self = self || {}; self = self || {};
// create defaults and options objects
self.defaults = {};
self.options = options || {}; self.options = options || {};
// allow for Ox.Element('tagname', self) // allow for Ox.TestElement('<tagname>')
if (typeof self.options == 'string') { // or Ox.TestElement('cssSelector')
if (Ox.isString(self.options)) {
self.options = { self.options = {
element: self.options element: self.options
}; }
} };
// create event handler
if (!self.$eventHandler) { if (!self.$eventHandler) {
self.$eventHandler = $('<div>'); self.$eventHandler = $('<div>');
} }
// create public object
var that = new Ox.JQueryElement( var that = new Ox.JQueryElement(
$('<' + (self.options.element || 'div') + '>') $(self.options.element || '<div>')
) )
.mousedown(mousedown); .mousedown(mousedown);
@ -149,16 +158,13 @@ Ox.Element = function() {
} }
*/ */
self.onChange = function() { self.setOption = function() {
// self.onChange(key, value) // self.setOptions(key, value)
// is called when an option changes // is called when an option changes
// (to be implemented by widget) // (to be implemented by widget)
// fixme: rename to self.setOption
}; };
that._leakSelf = function() { // fixme: remove that._self = self; // fixme: remove
return self;
}
that.bindEvent = function() { that.bindEvent = function() {
/*** /***
@ -190,13 +196,9 @@ Ox.Element = function() {
}; };
that.defaults = function(defaults) { that.defaults = function(defaults) {
/*** // sets the default options
sets the default options
Usage
that.defaults({key0: value0, key1: value1, ...})
***/
self.defaults = defaults; self.defaults = defaults;
delete self.options; // fixme: hackish fix for that = Ox.Foo({...}, self).defaults({...}).options({...}) self.options = defaults;
return that; return that;
}; };
@ -223,45 +225,21 @@ Ox.Element = function() {
return that; return that;
}; };
that.options = function() { // fixme: use Ox.getset that.options = function() {
/*** /*
get or set options that.options()
Usage returns self.options
that.options() returns self.options that.options(key)
that.options('foo') returns self.options.foo returns self.options.key
that.options('foo', x) sets self.options.foo, that.options(key, val)
returns that sets self.options.key to val, calls self.setOption(key, val)
that.options({foo: x, bar: y}) sets self.options.foo if the key has been added or its val has changed, returns that
and self.options.bar, that.options({keyA: valA, keyB: valB})
returns that sets self.options.keyA to valA and self.options.keyB to valB,
***/ calls self.setOptions(key, val) for every key/value pair
var args, that has been added or modified, returns that
length = arguments.length, */
oldOptions, return Ox.getset(self.options, arguments, self.setOption, that);
ret;
if (length == 0) {
// options()
ret = self.options;
} else if (length == 1 && typeof arguments[0] == 'string') {
// options(str)
ret = self.options ? self.options[arguments[0]] : options[arguments[0]];
} else {
// options (str, val) or options({str: val, ...})
// translate (str, val) to ({str: val})
args = Ox.makeObject.apply(that, arguments || {});
oldOptions = $.extend({}, self.options);
// if options have not been set, extend defaults,
// otherwise, extend options
//self.options = $.extend(self.options, self.options ? {} : self.defaults, args);
self.options = $.extend({}, self.defaults, self.options, args);
//self.options = $.extend(self.options || self.defaults, args);
Ox.forEach(args, function(val, key) {
// key == 'id' && id && Ox.Event.changeId(id, value);
/*!Ox.equals(value, oldOptions[key]) &&*/ self.onChange(key, val);
});
ret = that;
}
return ret;
}; };
that.removeElement = function() { that.removeElement = function() {

View file

@ -1,7 +1,7 @@
// vim: et:ts=4:sw=4:sts=4:ft=js // vim: et:ts=4:sw=4:sts=4:ft=js
Ox.LoadingIcon = function(options, self) { Ox.LoadingIcon = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('img', self) that = new Ox.Element('<img>', self)
.defaults({ .defaults({
size: 'medium' size: 'medium'
}) })

View file

@ -7,7 +7,7 @@
Ox.SyntaxHighlighter = function(options, self) { Ox.SyntaxHighlighter = function(options, self) {
self = self || {}; self = self || {};
var that = new Ox.Element('div', self) var that = new Ox.Element({}, self)
.defaults({ .defaults({
height: 40, height: 40,
lineLength: 80, //@ number of characters per line lineLength: 80, //@ number of characters per line
@ -128,7 +128,7 @@ Ox.SyntaxHighlighter = function(options, self) {
return str; return str;
} }
self.onChange = function() { self.setOption = function() {
}; };

View file

@ -14,7 +14,7 @@ Ox.Button = function(options, self) {
*/ */
var self = self || {}, var self = self || {},
that = new Ox.Element('input', self) that = new Ox.Element('<input>', self)
.defaults({ .defaults({
disabled: false, disabled: false,
group: false, group: false,
@ -117,7 +117,7 @@ Ox.Button = function(options, self) {
} }
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'disabled') { if (key == 'disabled') {
that.attr({ that.attr({
disabled: value ? 'disabled' : '' disabled: value ? 'disabled' : ''

View file

@ -19,7 +19,7 @@ Ox.Checkbox = function(options, self) {
*/ */
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
disabled: false, disabled: false,
id: '', id: '',
@ -85,7 +85,7 @@ Ox.Checkbox = function(options, self) {
!self.options.disabled && self.$button.trigger('click'); !self.options.disabled && self.$button.trigger('click');
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'checked') { if (key == 'checked') {
that.toggleChecked(); that.toggleChecked();
} }

View file

@ -13,7 +13,7 @@ Ox.CheckboxGroup = function(options, self) {
*/ */
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
checkboxes: [], checkboxes: [],
max: 1, max: 1,

View file

@ -2,7 +2,7 @@
Ox.ColorPicker = function(options, self) { Ox.ColorPicker = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
id: '', id: '',
value: '0, 0, 0' value: '0, 0, 0'

View file

@ -8,7 +8,7 @@ Ox.Filter = function(options, self) {
***/ ***/
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
findKeys: [], findKeys: [],
query: { query: {

View file

@ -5,7 +5,7 @@ Ox.Form = function(options, self) {
*/ */
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
error: '', error: '',
id: '', id: '',

View file

@ -2,7 +2,7 @@
Ox.FormElementGroup = function(options, self) { Ox.FormElementGroup = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
id: '', id: '',
elements: [], elements: [],
@ -49,7 +49,7 @@ Ox.FormElementGroup = function(options, self) {
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
}; };

View file

@ -2,7 +2,7 @@
Ox.FormItem = function(options, self) { Ox.FormItem = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
element: null, element: null,
error: '', error: '',

View file

@ -56,7 +56,7 @@ Ox.Input = function(options, self) {
*/ */
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
arrows: false, arrows: false,
arrowStep: 1, arrowStep: 1,
@ -701,7 +701,7 @@ Ox.Input = function(options, self) {
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
var inputWidth, val; var inputWidth, val;
if (['autocomplete', 'autocompleteReplace', 'autocompleteSelect', 'autovalidate'].indexOf(key) > -1) { if (['autocomplete', 'autocompleteReplace', 'autocompleteSelect', 'autovalidate'].indexOf(key) > -1) {
if (self.options.autocomplete && self.options.autocompleteSelect) { if (self.options.autocomplete && self.options.autocompleteSelect) {
@ -806,7 +806,7 @@ Ox.Input_ = function(options, self) {
*/ */
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
autocomplete: null, autocomplete: null,
autocorrect: null, autocorrect: null,
@ -1217,7 +1217,7 @@ Ox.Input_ = function(options, self) {
); );
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'height') { if (key == 'height') {
height(value); height(value);
} else if (key == 'width') { } else if (key == 'width') {
@ -1537,7 +1537,7 @@ Ox.InputElement_ = function(options, self) {
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'placeholder') { if (key == 'placeholder') {
that.$element.hasClass('OxPlaceholder') && that.$element.val(value); that.$element.hasClass('OxPlaceholder') && that.$element.val(value);
} else if (key == 'value') { } else if (key == 'value') {
@ -1753,7 +1753,7 @@ Ox.Range_ = function(options, self) {
shared functions shared functions
*/ */
self.onChange = function(key, value) { self.setOption = function(key, value) {
} }

View file

@ -9,7 +9,7 @@ Ox.InputGroup = function(options, self) {
***/ ***/
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
id: '', id: '',
inputs: [], inputs: [],

View file

@ -2,7 +2,7 @@
Ox.Label = function(options, self) { Ox.Label = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
disabled: false, disabled: false,
id: '', id: '',
@ -24,7 +24,7 @@ Ox.Label = function(options, self) {
})) }))
.html(self.options.title); .html(self.options.title);
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'title') { if (key == 'title') {
that.html(value); that.html(value);
} }

View file

@ -2,7 +2,7 @@
Ox.Picker = function(options, self) { Ox.Picker = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
element: null, element: null,
elementHeight: 128, elementHeight: 128,
@ -20,7 +20,7 @@ Ox.Picker = function(options, self) {
.click(showMenu) .click(showMenu)
.appendTo(that); .appendTo(that);
self.$menu = new Ox.Element('div') self.$menu = new Ox.Element({})
.addClass('OxPicker') .addClass('OxPicker')
.css({ .css({
width: self.options.elementWidth + 'px', width: self.options.elementWidth + 'px',

View file

@ -9,7 +9,7 @@ Ox.PlacePicker = function(options, self) {
}), }),
that; that;
self.$element = new Ox.Element('div') self.$element = new Ox.Element({})
.css({ .css({
width: '256px', width: '256px',
height: '192px' height: '192px'
@ -33,7 +33,7 @@ Ox.PlacePicker = function(options, self) {
) )
) )
.append( .append(
self.$container = new Ox.Element('div') self.$container = new Ox.Element({})
.css({ .css({
width: '256px', width: '256px',
height: '160px' height: '160px'

View file

@ -234,7 +234,7 @@ Ox.Range = function(options, self) {
} }
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'size') { if (key == 'size') {
setSizes(); setSizes();
} else if (key == 'trackColors') { } else if (key == 'trackColors') {

View file

@ -3,7 +3,7 @@ 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 || {}, var self = self || {},
that = new Ox.Element('div', self) // fixme: do we use 'div', or {}, or '', by default? that = new Ox.Element({}, self) // fixme: do we use 'div', or {}, or '', by default?
.defaults({ .defaults({
id: '', id: '',
items: [], items: [],
@ -126,7 +126,7 @@ Ox.Select = function(options, self) {
self.$menu.showMenu(); self.$menu.showMenu();
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
}; };

View file

@ -142,7 +142,7 @@ Ox.TimeInput = function(options, self) {
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'value') { if (key == 'value') {
setValues(); setValues();
} }

View file

@ -81,7 +81,7 @@ Ox.IconList = function(options, self) {
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'items') { if (key == 'items') {
that.$element.options(key, value); that.$element.options(key, value);
} else if (key == 'paste') { } else if (key == 'paste') {

View file

@ -1209,7 +1209,7 @@ Ox.List = function(options, self) {
} }
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
//Ox.print('list onChange', key, value); //Ox.print('list onChange', key, value);
if (key == 'items') { if (key == 'items') {
updateQuery(); updateQuery();

View file

@ -31,7 +31,7 @@ Ox.ListItem = function(options, self) {
that.$element = $element; that.$element = $element;
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'data') { if (key == 'data') {
constructItem(true); constructItem(true);
} }

View file

@ -584,7 +584,7 @@ Ox.TextList = function(options, self) {
]); ]);
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'items') { if (key == 'items') {
//alert('request set!!') //alert('request set!!')
that.$body.options(key, value); that.$body.options(key, value);

View file

@ -2,7 +2,7 @@
Ox.TreeList = function(options, self) { Ox.TreeList = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
data: null, data: null,
items: [], items: [],
@ -186,7 +186,7 @@ Ox.TreeList = function(options, self) {
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'data') { if (key == 'data') {
} }

View file

@ -2,7 +2,7 @@
Ox.ListMap = function(options, self) { Ox.ListMap = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
addPlace: null, addPlace: null,
height: 256, height: 256,
@ -336,7 +336,7 @@ Ox.ListMap = function(options, self) {
return val.toFixed(8); return val.toFixed(8);
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
Ox.print('ONCHANGE') Ox.print('ONCHANGE')
if (key == 'height' || key == 'width') { if (key == 'height' || key == 'width') {
Ox.print('ONCHANGE...') Ox.print('ONCHANGE...')

View file

@ -3,7 +3,7 @@
Ox.Map = function(options, self) { Ox.Map = function(options, self) {
self = self || {}; self = self || {};
var that = new Ox.Element('div', self) var that = new Ox.Element({}, self)
.defaults({ .defaults({
// fixme: isClickable? hasZoombar? // fixme: isClickable? hasZoombar?
clickable: false, clickable: false,
@ -131,7 +131,7 @@ Ox.Map = function(options, self) {
.appendTo(self.$toolbar) .appendTo(self.$toolbar)
} }
self.$map = new Ox.Element('div') self.$map = new Ox.Element({})
.css({ .css({
left: 0, left: 0,
top: self.options.toolbar * 24 + 'px', top: self.options.toolbar * 24 + 'px',
@ -847,7 +847,7 @@ Ox.Map = function(options, self) {
} }
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
/*if (key == 'height' || key == 'width') { /*if (key == 'height' || key == 'width') {
resizeMap(); resizeMap();
} else */if (key == 'places') { } else */if (key == 'places') {

View file

@ -11,7 +11,7 @@ Ox.MapImage = function(options, self) {
*/ */
var self = self || {}, var self = self || {},
that = new Ox.Element('img', self) that = new Ox.Element('<img>', self)
.defaults({ .defaults({
height: 360, height: 360,
markerColorHighlight: 'yellow', markerColorHighlight: 'yellow',
@ -59,7 +59,7 @@ Ox.MapImage = function(options, self) {
src: self.src src: self.src
}); });
self.onChange = function(key, value) { self.setOption = function(key, value) {
}; };

View file

@ -94,7 +94,7 @@ Ox.MainMenu = function(options, self) {
self.focused = false; self.focused = false;
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
}; };

View file

@ -515,7 +515,7 @@ Ox.Menu = function(options, self) {
} }
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'items') { if (key == 'items') {
constructItems(value); constructItems(value);
} else if (key == 'selected') { } else if (key == 'selected') {

View file

@ -2,7 +2,7 @@
Ox.MenuItem = function(options, self) { Ox.MenuItem = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('tr', self) that = new Ox.Element('<tr>', self)
.defaults({ .defaults({
bind: [], // fixme: what's this? bind: [], // fixme: what's this?
checked: null, checked: null,
@ -81,7 +81,7 @@ Ox.MenuItem = function(options, self) {
}; };
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'checked') { if (key == 'checked') {
that.$status.html(value ? Ox.UI.symbols.check : '') that.$status.html(value ? Ox.UI.symbols.check : '')
} else if (key == 'disabled') { } else if (key == 'disabled') {

View file

@ -68,7 +68,7 @@ Ox.CollapsePanel = function(options, self) {
collapsed: self.options.collapsed collapsed: self.options.collapsed
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'collapsed') { if (key == 'collapsed') {
} else if (key == 'title') { } else if (key == 'title') {

View file

@ -250,7 +250,7 @@ Ox.SplitPanel = function(options, self) {
Ox.SplitPanel_ = function(options, self) { Ox.SplitPanel_ = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
elements: [], elements: [],
orientation: 'horizontal' orientation: 'horizontal'

View file

@ -2,7 +2,7 @@
Ox.AnnotationPanel = function(options, self) { Ox.AnnotationPanel = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
id: '', id: '',
items: [], items: [],
@ -39,7 +39,7 @@ Ox.AnnotationPanel = function(options, self) {
self.$annotations = new Ox.List({ self.$annotations = new Ox.List({
construct: function(data) { construct: function(data) {
return new Ox.Element('div') return new Ox.Element({})
.addClass('OxAnnotation OxEditable OxTarget') .addClass('OxAnnotation OxEditable OxTarget')
.html(Ox.parseHTML(data.value)); .html(Ox.parseHTML(data.value));
}, },
@ -68,11 +68,11 @@ Ox.AnnotationPanel = function(options, self) {
.appendTo(that.$content); .appendTo(that.$content);
/* /*
self.$annotations = new Ox.Element('div') self.$annotations = new 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('div') self.$annotation[i] = new Ox.Element({})
.addClass('OxAnnotation') .addClass('OxAnnotation')
.html(item.value.replace(/\n/g, '<br/>')) .html(item.value.replace(/\n/g, '<br/>'))
.click(function() { .click(function() {

View file

@ -2,7 +2,7 @@
Ox.BlockTimeline = function(options, self) { Ox.BlockTimeline = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
cuts: [], cuts: [],
duration: 0, duration: 0,
@ -85,7 +85,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('div') self.$lines[i] = new 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'
@ -345,7 +345,7 @@ Ox.BlockTimeline = function(options, self) {
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
//Ox.print('onChange:', key, value) //Ox.print('onChange:', key, value)
if (key == 'points') { if (key == 'points') {
//Ox.print('key', key, 'value', value) //Ox.print('key', key, 'value', value)

View file

@ -10,7 +10,7 @@ Pan.do/ra
Ox.FilesView = function(options, self) { Ox.FilesView = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
id: '' id: ''
}) })

View file

@ -22,7 +22,7 @@ Ox.Flipbook = function(options, self) {
'width': '100%' 'width': '100%'
}) })
.hide(), .hide(),
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
frames: {}, frames: {},
duration: 0, duration: 0,
@ -85,7 +85,7 @@ Ox.Flipbook = function(options, self) {
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'frames') { if (key == 'frames') {
cacheFrames(); cacheFrames();
} else if (key == 'icon') { } else if (key == 'icon') {

View file

@ -2,7 +2,7 @@
Ox.LargeTimeline = function(options, self) { Ox.LargeTimeline = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
cuts: [], cuts: [],
duration: 0, duration: 0,
@ -197,7 +197,7 @@ Ox.LargeTimeline = function(options, self) {
} }
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'points') { if (key == 'points') {
setMarkerPoint(0); setMarkerPoint(0);
setMarkerPoint(1); setMarkerPoint(1);

View file

@ -2,7 +2,7 @@
Ox.SmallTimeline = function(options, self) { Ox.SmallTimeline = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
duration: 0, duration: 0,
find: '', find: '',
@ -174,7 +174,7 @@ Ox.SmallTimeline = function(options, self) {
setMarkerPoint(1); setMarkerPoint(1);
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
//Ox.print('onChange:', key, value) //Ox.print('onChange:', key, value)
if (key == 'points') { if (key == 'points') {
//Ox.print('key', key, 'value', value) //Ox.print('key', key, 'value', value)

View file

@ -3,7 +3,7 @@
Ox.VideoEditorPlayer = function(options, self) { Ox.VideoEditorPlayer = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
duration: 0, duration: 0,
find: '', find: '',
@ -360,7 +360,7 @@ Ox.VideoEditorPlayer = function(options, self) {
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'height') { if (key == 'height') {
setHeight(); setHeight();
} else if (key == 'points') { } else if (key == 'points') {

View file

@ -2,7 +2,7 @@
Ox.VideoElement = function(options, self) { Ox.VideoElement = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('video', self) that = new Ox.Element('<video>', self)
.defaults({ .defaults({
fps: 25, fps: 25,
height: 0, height: 0,
@ -57,7 +57,7 @@ Ox.VideoElement = function(options, self) {
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'height') { if (key == 'height') {
that.size(self.options.width, value); that.size(self.options.width, value);
} else if (key == 'muted') { } else if (key == 'muted') {

View file

@ -2,7 +2,7 @@
Ox.VideoPanelPlayer = function(options, self) { Ox.VideoPanelPlayer = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
annotationsSize: 256, annotationsSize: 256,
duration: 0, duration: 0,
@ -385,7 +385,7 @@ Ox.VideoPanelPlayer = function(options, self) {
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'height') { if (key == 'height') {
resizeVideo(); resizeVideo();
} else if (key == 'position') { } else if (key == 'position') {

View file

@ -2,7 +2,7 @@
Ox.VideoEditor = function(options, self) { Ox.VideoEditor = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
annotationsSize: 0, annotationsSize: 0,
cuts: [], cuts: [],
@ -565,7 +565,7 @@ Ox.VideoEditor = function(options, self) {
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'width' || key == 'height') { if (key == 'width' || key == 'height') {
//Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height) //Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height)
setSizes(); setSizes();

View file

@ -4,7 +4,7 @@ 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 || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
title: '', title: '',
buttons: [], buttons: [],
@ -264,7 +264,7 @@ Ox.Dialog = function(options, self) {
}); });
} }
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'buttons') { if (key == 'buttons') {
loadButtons(); loadButtons();
/* /*

View file

@ -2,7 +2,7 @@
Ox.Tooltip = function(options, self) { Ox.Tooltip = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element('div', self) that = new Ox.Element({}, self)
.defaults({ .defaults({
animate: true, animate: true,
title: '' title: ''
@ -15,7 +15,7 @@ Ox.Tooltip = function(options, self) {
opacity: 0 opacity: 0
}); });
self.onChange = function(key, value) { self.setOption = function(key, value) {
if (key == 'title') { if (key == 'title') {
that.html(value); that.html(value);
} }

View file

@ -2,7 +2,7 @@
Ox.Window = function(options, self) { Ox.Window = function(options, self) {
self = self || {}, self = self || {},
that = new Ox.Element('div', self) that = new 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) {
}; };
self.onChange = function() { self.setOption = function() {
}; };

View file

@ -47,6 +47,11 @@ Ox.MONTHS = [
Ox.SHORT_MONTHS = Ox.MONTHS.map(function(val) { Ox.SHORT_MONTHS = Ox.MONTHS.map(function(val) {
return val.substr(0, 3); return val.substr(0, 3);
}); });
Ox.PATH = Array.prototype.slice.apply(
document.getElementsByTagName('script')
).filter(function(element) {
return /Ox\.js$/.test(element.src);
})[0].src.replace('Ox.js', '');
Ox.PREFIXES = ['K', 'M', 'G', 'T', 'P']; Ox.PREFIXES = ['K', 'M', 'G', 'T', 'P'];
Ox.SYMBOLS = { Ox.SYMBOLS = {
DOLLAR: '\u0024', DOLLAR: '\u0024',
@ -143,12 +148,6 @@ Ox.getset = function(obj, args, callback, context) {
return ret; return ret;
} }
Ox.PATH = Array.prototype.slice.apply(
document.getElementsByTagName('script')
).filter(function(element) {
return /Ox\.js$/.test(element.src);
})[0].src.replace('Ox.js', '');
Ox.load = function(module, options, callback) { Ox.load = function(module, options, callback) {
/*** /***
loads Ox modules loads Ox modules
@ -244,12 +243,15 @@ Ox.loadJSON = function(url, callback) {
Ox.print = function() { Ox.print = function() {
/* /*
like console.log, but prepends timestamp and name of the caller function
*/ */
if (window.console) { if (window.console) {
var args = Ox.makeArray(arguments), var args = Ox.makeArray(arguments),
date = new Date; date = new Date();
args.unshift(Ox.formatDate(date, '%H:%M:%S') + '.' + args.unshift(
(Ox.pad(+date % 1000, 3))); Ox.formatDate(date, '%H:%M:%S.') + (+date).toString().substr(-3),
arguments.callee.caller.name || '(anonymous)'
);
window.console.log.apply(window.console, args); window.console.log.apply(window.console, args);
} }
}; };
@ -582,6 +584,23 @@ Ox.keys = function(obj) {
return keys.sort(); return keys.sort();
}; };
Ox.last = function(arr, val) {
/***
>>> Ox.last([1, 2, 3])
3
>>> Ox.last([1, 2, 3], 4)
[1, 2, 4]
***/
var ret;
if (arguments.length == 1) {
ret = arr[arr.length - 1];
} else {
arr[arr.length - 1] = val;
ret = arr;
}
return ret;
};
Ox.len = function(obj) { Ox.len = function(obj) {
/* /*
>>> Ox.len([1, 2, 3]) >>> Ox.len([1, 2, 3])
@ -663,6 +682,7 @@ Ox.map = function(obj, fn) {
>>> Ox.map([,], function(v, i) { return i; }) >>> Ox.map([,], function(v, i) { return i; })
[0] [0]
*/ */
// fixme: return null to filter out is a bit esoteric
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) {
@ -791,13 +811,16 @@ Ox.sort = function(arr) {
['9', '10', 'a', 'B'] ['9', '10', 'a', 'B']
*/ */
var len, matches = {}, sort = {}; var len, matches = {}, sort = {};
// find leading numbers
arr.forEach(function(val, i) { arr.forEach(function(val, i) {
var match = /^\d+/(val); var match = /^\d+/(val);
matches[val] = match ? match[0] : ''; matches[val] = match ? match[0] : '';
}); });
// get length of longest leading number
len = Ox.max(Ox.map(matches, function(val) { len = Ox.max(Ox.map(matches, function(val) {
return val.length; return val.length;
})); }));
// pad leading numbers, and make lower case
arr.forEach(function(val) { arr.forEach(function(val) {
sort[val] = ( sort[val] = (
matches[val] ? matches[val] ?
@ -884,6 +907,7 @@ Ox.values = function(obj) {
>>> Ox.values([1,]) >>> Ox.values([1,])
[1] [1]
*/ */
// fixme: why doesn't this use map?
var values = []; var values = [];
Ox.forEach(obj, function(val) { Ox.forEach(obj, function(val) {
values.push(val); values.push(val);
@ -2562,6 +2586,10 @@ Ox.contains = function(str, chr) {
false false
>>> Ox.contains("foobar", "bar") >>> Ox.contains("foobar", "bar")
true true
>>> Ox.contains(['foo', 'bar'], 'foo')
true
// fixme: rename to Ox.has or Ox.isIn?
// then it'd become convenient for arrays
*/ */
return str.indexOf(chr) > -1; return str.indexOf(chr) > -1;
}; };
@ -2571,7 +2599,7 @@ Ox.endsWith = function(str, sub) {
>>> Ox.endsWith("foobar", "bar") >>> Ox.endsWith("foobar", "bar")
true true
*/ */
return str.toString().substr(-sub.length) === sub; return new RegExp(sub + '$').test(str);
}; };
Ox.highlight = function(txt, str) { Ox.highlight = function(txt, str) {
@ -2590,11 +2618,15 @@ Ox.isValidEmail = function(str) {
true true
>>> Ox.isValidEmail("foo@bar") >>> Ox.isValidEmail("foo@bar")
false false
>>> Ox.isValidEmail("foo@bar..com")
false
*/ */
return !!/^[0-9A-Z\.\+\-_]+@(?:[0-9A-Z\-]+\.)+[A-Z]{2,6}$/i(str); return !!/^[0-9A-Z\.\+\-_]+@(?:[0-9A-Z\-]+\.)+[A-Z]{2,6}$/i(str);
} }
Ox.pad = function(str, len, pad, pos) { Ox.pad = function(str, len, pad, pos) {
// fixme: slighly obscure signature
// fixme: weird for negative numbers
/* /*
>>> Ox.pad(1, 2) >>> Ox.pad(1, 2)
"01" "01"
@ -2608,24 +2640,34 @@ Ox.pad = function(str, len, pad, pos) {
"456abc" "456abc"
*/ */
str = str.toString().substr(0, len); str = str.toString().substr(0, len);
pad = Ox.repeat(pad || "0", len - str.length); pad = Ox.repeat(pad || '0', len - str.length);
pos = pos || "left"; pos = pos || 'left';
str = pos == "left" ? pad + str : str + pad; str = pos == 'left' ? pad + str : str + pad;
str = pos == "left" ? str = pos == 'left' ?
str.substr(str.length - len, str.length) : str.substr(str.length - len, str.length) :
str.substr(0, len); str.substr(0, len);
return str; return str;
}; };
Ox.repeat = function(str, num) { Ox.repeat = function(obj, num) {
/* /*
fixme: make this work for arrays, like in python works for arrays, numbers and strings
>>> Ox.repeat(1, 3) >>> Ox.repeat(1, 3)
"111" "111"
>>> Ox.repeat("foo", 3) >>> Ox.repeat("foo", 3)
"foofoofoo" "foofoofoo"
>>> Ox.repeat([1, 2], 3)
[1, 2, 1, 2, 1, 2]
*/ */
return num >= 1 ? new Array(num + 1).join(str.toString()) : ''; var ret;
if (Ox.isArray(obj)) {
ret = num >= 1 ? Ox.map(Ox.range(obj.length * num), function(v, i) {
return obj[i % obj.length]
}) : [];
} else {
ret = num >= 1 ? new Array(num + 1).join(obj.toString()) : '';
}
return ret;
}; };
Ox.reverse = function(str) { Ox.reverse = function(str) {
@ -2640,8 +2682,11 @@ Ox.startsWith = function(str, sub) {
/* /*
>>> Ox.startsWith("foobar", "foo") >>> Ox.startsWith("foobar", "foo")
true true
// fixme:
// !!(/^sub/(str)) is shorter than
// Ox.startsWith(str, sub) anyway
*/ */
return str.toString().substr(0, sub.length) === sub; return new RegExp('^' + sub).test(str);
}; };
Ox.stripTags = function(str) { Ox.stripTags = function(str) {
@ -2656,7 +2701,7 @@ Ox.substr = function(str, start, stop) {
/*** /***
Ox.substr behaves like str[start:stop] in Python Ox.substr behaves like str[start:stop] in Python
(or like str.substring() with negative values for stop) (or like str.substring() with negative values for stop)
not implemented // fixme: needed?
>>> Ox.substr('foobar', 1) >>> Ox.substr('foobar', 1)
"oobar" "oobar"
>>> Ox.substr('foobar', -1) >>> Ox.substr('foobar', -1)
@ -2704,12 +2749,11 @@ Ox.toDashes = function(str) {
Ox.tokenize = (function() { Ox.tokenize = (function() {
// see https://github.com/mozilla/narcissus/blob/master/lib/jslex.js // see https://github.com/mozilla/narcissus/blob/master/lib/jslex.js
// and https://developer.mozilla.org/en/JavaScript/Reference
var identifier = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_', var identifier = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_',
// see https://developer.mozilla.org/en/JavaScript/Reference/Reserved_Words
linebreak = '\n\r', linebreak = '\n\r',
number = '0123456789', number = '0123456789',
// see https://developer.mozilla.org/en/JavaScript/Reference
operator = [ operator = [
// arithmetic // arithmetic
'+', '-', '*', '/', '%', '++', '--', '+', '-', '*', '/', '%', '++', '--',
@ -2837,7 +2881,8 @@ Ox.tokenize = (function() {
'RangeError', 'ReferenceError', 'RegExp', 'RangeError', 'ReferenceError', 'RegExp',
'String', 'SyntaxError', 'String', 'SyntaxError',
'TypeError', 'TypeError',
'undefined', 'URIError' 'undefined', 'URIError',
'window'
], ],
property: [ property: [
// Function // Function
@ -2980,7 +3025,6 @@ Ox.tokenize = (function() {
}()); }());
Ox.toSlashes = function(str) { Ox.toSlashes = function(str) {
/* /*
>>> Ox.toSlashes("fooBarBaz") >>> Ox.toSlashes("fooBarBaz")
@ -3018,7 +3062,7 @@ Ox.toUnderscores = function(str) {
}); });
}; };
Ox.trim = function(str) { // is in jQuery Ox.trim = function(str) { // is in jQuery, and in JavaScript itself
/* /*
Ox.trim(" foo ") Ox.trim(" foo ")
"foo" "foo"
@ -3082,6 +3126,7 @@ Ox.words = function(str) {
} }
Ox.wordwrap = function(str, len, sep, bal, spa) { Ox.wordwrap = function(str, len, sep, bal, spa) {
// fixme: bad API, sep/bal/spa should be in options object
/* /*
>>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 25, "<br/>") >>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 25, "<br/>")
"Anticonstitutionellement, <br/>Paris s'eveille" "Anticonstitutionellement, <br/>Paris s'eveille"