1
0
Fork 0
forked from 0x2620/oxjs

various improvements in OxJS and OxUI

This commit is contained in:
rolux 2011-04-29 14:40:51 +02:00
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') {
} else if (key == 'zoom') {

View file

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

View file

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

View file

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

View file

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

View file

@ -14,7 +14,7 @@ Ox.Button = function(options, self) {
*/
var self = self || {},
that = new Ox.Element('input', self)
that = new Ox.Element('<input>', self)
.defaults({
disabled: 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') {
that.attr({
disabled: value ? 'disabled' : ''

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -2,7 +2,7 @@
Ox.FormElementGroup = function(options, self) {
var self = self || {},
that = new Ox.Element('div', self)
that = new Ox.Element({}, self)
.defaults({
id: '',
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) {
var self = self || {},
that = new Ox.Element('div', self)
that = new Ox.Element({}, self)
.defaults({
element: null,
error: '',

View file

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

View file

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

View file

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

View file

@ -9,7 +9,7 @@ Ox.PlacePicker = function(options, self) {
}),
that;
self.$element = new Ox.Element('div')
self.$element = new Ox.Element({})
.css({
width: '256px',
height: '192px'
@ -33,7 +33,7 @@ Ox.PlacePicker = function(options, self) {
)
)
.append(
self.$container = new Ox.Element('div')
self.$container = new Ox.Element({})
.css({
width: '256px',
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') {
setSizes();
} 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
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({
id: '',
items: [],
@ -126,7 +126,7 @@ Ox.Select = function(options, self) {
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') {
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') {
that.$element.options(key, value);
} 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);
if (key == 'items') {
updateQuery();

View file

@ -31,7 +31,7 @@ Ox.ListItem = function(options, self) {
that.$element = $element;
}
self.onChange = function(key, value) {
self.setOption = function(key, value) {
if (key == 'data') {
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') {
//alert('request set!!')
that.$body.options(key, value);

View file

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

View file

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

View file

@ -3,7 +3,7 @@
Ox.Map = function(options, self) {
self = self || {};
var that = new Ox.Element('div', self)
var that = new Ox.Element({}, self)
.defaults({
// fixme: isClickable? hasZoombar?
clickable: false,
@ -131,7 +131,7 @@ Ox.Map = function(options, self) {
.appendTo(self.$toolbar)
}
self.$map = new Ox.Element('div')
self.$map = new Ox.Element({})
.css({
left: 0,
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') {
resizeMap();
} else */if (key == 'places') {

View file

@ -11,7 +11,7 @@ Ox.MapImage = function(options, self) {
*/
var self = self || {},
that = new Ox.Element('img', self)
that = new Ox.Element('<img>', self)
.defaults({
height: 360,
markerColorHighlight: 'yellow',
@ -59,7 +59,7 @@ Ox.MapImage = function(options, self) {
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.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') {
constructItems(value);
} else if (key == 'selected') {

View file

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

View file

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

View file

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

View file

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

View file

@ -2,7 +2,7 @@
Ox.BlockTimeline = function(options, self) {
var self = self || {},
that = new Ox.Element('div', self)
that = new Ox.Element({}, self)
.defaults({
cuts: [],
duration: 0,
@ -85,7 +85,7 @@ Ox.BlockTimeline = function(options, self) {
function addLine(i) {
// fixme: get URLs once, not once for every line
self.$lines[i] = new Ox.Element('div')
self.$lines[i] = new Ox.Element({})
.css({
top: i * (self.height + self.margin) + '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)
if (key == 'points') {
//Ox.print('key', key, 'value', value)

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -2,7 +2,7 @@
Ox.VideoEditor = function(options, self) {
var self = self || {},
that = new Ox.Element('div', self)
that = new Ox.Element({}, self)
.defaults({
annotationsSize: 0,
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') {
//Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height)
setSizes();

View file

@ -4,7 +4,7 @@ Ox.Dialog = function(options, self) {
// fixme: dialog should be derived from a generic draggable
// fixme: buttons should have a close attribute, or the dialog a close id
var self = self || {},
that = new Ox.Element('div', self)
that = new Ox.Element({}, self)
.defaults({
title: '',
buttons: [],
@ -264,7 +264,7 @@ Ox.Dialog = function(options, self) {
});
}
self.onChange = function(key, value) {
self.setOption = function(key, value) {
if (key == 'buttons') {
loadButtons();
/*

View file

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

View file

@ -2,7 +2,7 @@
Ox.Window = function(options, self) {
self = self || {},
that = new Ox.Element('div', self)
that = new Ox.Element({}, self)
.defaults({
draggable: true,
fullscreenable: true, // fixme: silly name
@ -25,7 +25,7 @@ Ox.Window = function(options, self) {
};
self.onChange = function() {
self.setOption = function() {
};