self.setOption ~> that.update

This commit is contained in:
j 2012-05-28 19:35:41 +00:00
parent 9ee0742b53
commit 005d50c389
56 changed files with 919 additions and 933 deletions

View file

@ -40,6 +40,14 @@ Ox.Progressbar = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update({
cancelled: toggleCancelled,
paused: togglePaused,
progress: function() {
self.options.progress = Ox.limit(self.options.progress, 0, 1);
!self.options.paused && !self.options.cancelled && setProgress(true);
}
})
.addClass('OxProgressbar') .addClass('OxProgressbar')
.css({width: self.options.width - 2 + 'px'}); .css({width: self.options.width - 2 + 'px'});
@ -213,17 +221,6 @@ Ox.Progressbar = function(options, self) {
that.triggerEvent(self.options.paused ? 'pause' : 'resume'); that.triggerEvent(self.options.paused ? 'pause' : 'resume');
} }
self.setOption = function(key, value) {
if (key == 'cancelled') {
toggleCancelled();
} else if (key == 'paused') {
togglePaused();
} else if (key == 'progress') {
self.options.progress = Ox.limit(self.options.progress, 0, 1);
!self.options.paused && !self.options.cancelled && setProgress(true);
}
};
/*@ /*@
that.status <f> Returns time elapsed / remaining that.status <f> Returns time elapsed / remaining
() -> <o> status () -> <o> status

View file

@ -32,7 +32,13 @@ Ox.Resizebar = function(options, self) {
resize: [], resize: [],
size: 0 size: 0
}) })
.options(options || {}) // fixme: options function should be able to handle undefined, no need for || {} .options(options || {})
.update({
collapsed: function() {
that.css({cursor: getCursor()});
self.$tooltip && self.$tooltip.options({title: getTitle()});
}
})
.addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation)) .addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
.bindEvent({ .bindEvent({
// singleclick: toggle, // singleclick: toggle,
@ -189,13 +195,6 @@ Ox.Resizebar = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
if (key == 'collapsed') {
that.css({cursor: getCursor()});
self.$tooltip && self.$tooltip.options({title: getTitle()});
}
};
return that; return that;
}; };

View file

@ -44,6 +44,42 @@ Ox.Calendar = function(options, self) {
zoomOnlyWhenFocused: false zoomOnlyWhenFocused: false
}) })
.options(options || {}) .options(options || {})
.update({
date: function() {
// ...
},
events: function() {
self.options.events.forEach(function(event) {
event = getEventData(event);
});
self.$lines = [];
getLines();
renderCalendar();
if (self.options.selected) {
selectEvent(
getSelectedEvent() ? self.options.selected : ''
);
}
},
height: function() {
that.css({height: self.options.height + 'px'});
},
selected: function() {
var selected = self.options.selected;
// deselect would not work if self.options.selected was already empty
self.options.selected = 'FIXME: THIS IS A VERY UGLY HACK';
selectEvent(selected);
},
width: function() {
that.css({width: self.options.width + 'px'});
self.options.showZoombar && self.$zoomInput.options({size: self.options.width});
renderOverlay();
//getLines();
},
zoom: function() {
// ...
}
})
.addClass('OxCalendar') .addClass('OxCalendar')
/* /*
.css({ .css({
@ -1225,36 +1261,6 @@ Ox.Calendar = function(options, self) {
} }
} }
self.setOption = function(key, value) {
if (key == 'date') {
// ...
} else if (key == 'events') {
value.forEach(function(event) {
event = getEventData(event);
});
self.$lines = [];
getLines();
renderCalendar();
if (self.options.selected) {
selectEvent(
getSelectedEvent() ? self.options.selected : ''
);
}
} else if (key == 'height') {
that.css({height: self.options.height + 'px'});
} else if (key == 'selected') {
self.options.selected = 'FIXME: THIS IS A VERY UGLY HACK';
selectEvent(value);
} else if (key == 'width') {
that.css({width: self.options.width + 'px'});
self.options.showZoombar && self.$zoomInput.options({size: self.options.width});
renderOverlay();
//getLines();
} else if (key == 'zoom') {
}
};
/*@ /*@
that.addEvent <f> addEvent that.addEvent <f> addEvent
(event) -> <o> object (event) -> <o> object

View file

@ -28,6 +28,16 @@ Ox.ListCalendar = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update({
height: function() {
// fixme: should be .resizeList
self.$list.size();
self.$calendar.resizeCalendar();
},
width: function() {
self.$calendar.resizeCalendar();
}
})
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
height: self.options.height + 'px' height: self.options.height + 'px'
@ -807,16 +817,6 @@ Ox.ListCalendar = function(options, self) {
self.$list.options({items: events}); self.$list.options({items: events});
} }
self.setOption = function(key, value) {
if (key == 'height') {
// fixme: should be .resizeList
self.$list.size();
self.$calendar.resizeCalendar();
} else if (key == 'width') {
self.$calendar.resizeCalendar();
}
};
return that; return that;
}; };

View file

@ -44,7 +44,12 @@ Ox.DocPanel = function(options, self) {
selected: '', selected: '',
size: 256 size: 256
}) })
.options(options || {}); .options(options || {})
.update({
selected: function() {
selectItem(self.options.selected);
}
});
self.$list = Ox.Element(); self.$list = Ox.Element();
self.$page = Ox.Element(); self.$page = Ox.Element();
@ -185,12 +190,6 @@ Ox.DocPanel = function(options, self) {
: 0; : 0;
} }
self.setOption = function(key, value) {
if (key == 'selected') {
selectItem(value);
}
};
return that; return that;
}; };

View file

@ -22,6 +22,11 @@ Ox.ExamplePanel = function(options, self) {
size: 256 size: 256
}) })
.options(options || {}) .options(options || {})
.update({
selected: function() {
self.$list.options({selected: [self.options.selected]});
}
});
self.$list = Ox.Element(); self.$list = Ox.Element();
self.$page = Ox.Element(); self.$page = Ox.Element();
@ -122,12 +127,6 @@ Ox.ExamplePanel = function(options, self) {
that.triggerEvent('select', {id: id}); that.triggerEvent('select', {id: id});
} }
self.setOption = function(key, value) {
if (key == 'selected') {
self.$list.options({selected: [value]});
}
};
return that; return that;
}; };

View file

@ -71,14 +71,6 @@ Ox.App = function(options) {
}; };
} }
/*@
change <f> change key/value
(key, value) -> <u> currently not implemented
@*/
self.setOption = function(key, value) {
};
/*@ /*@
options <f> get/set options, see Ox.getset options <f> get/set options, see Ox.getset
() -> <o> get options () -> <o> get options

View file

@ -389,10 +389,10 @@ Ox.Element = function(options, self) {
() -> <obj> all options () -> <obj> all options
(key) -> <any> the value of option[key] (key) -> <any> the value of option[key]
(key, value) -> <obj> this element (key, value) -> <obj> this element
Sets options[key] to value and calls self.setOption(key, value) Sets options[key] to value and calls update(key, value)
if the key/value pair was added or modified if the key/value pair was added or modified
({key: value, ...}) -> <obj> this element ({key: value, ...}) -> <obj> this element
Sets multiple options and calls self.setOption(key, value) Sets multiple options and calls update(key, value)
for every key/value pair that was added or modified for every key/value pair that was added or modified
# Arguments # Arguments
key <str> the name of the option key <str> the name of the option

View file

@ -9,9 +9,7 @@ Ox.JQueryElement = function($element) {
//@ id <number> Unique id //@ id <number> Unique id
this.oxid = Ox.uid(); this.oxid = Ox.uid();
//@ $element <object> The jQuery-wrapped DOM element //@ $element <object> The jQuery-wrapped DOM element
this.$element = $element.data({ this.$element = $element.data({oxid: this.oxid});
oxid: this.oxid
});
//@ 0 <element> The DOM element (for compatibility with jQuery) //@ 0 <element> The DOM element (for compatibility with jQuery)
this[0] = this.$element[0]; this[0] = this.$element[0];
//@ length <number> 1 (for compatibility with jQuery) //@ length <number> 1 (for compatibility with jQuery)

View file

@ -30,6 +30,30 @@ Ox.ArrayEditable = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update({
highlight: function() {
self.$items.forEach(function($item) {
$item.options({highlight: self.options.highlight})
});
},
items: function() {
if (self.options.selected && getSelectedPosition() == -1) {
selectNone();
}
renderItems(true);
},
selected: function() {
selectItem(self.options.selected);
},
sort: renderItems,
width: function() {
var width = self.options.width;
that.css({width: width - 8 + 'px'}); // 2 x 4 px padding
self.options.type == 'textarea' && self.$items.forEach(function($item) {
$item.options({width: width})
});
}
})
.addClass('OxArrayEditable OxArrayEditable' + Ox.toTitleCase(self.options.type)) .addClass('OxArrayEditable OxArrayEditable' + Ox.toTitleCase(self.options.type))
.css({width: self.options.width - (self.options.type == 'input' ? 8 : 0) + 'px'}) // 2 x 4 px padding .css({width: self.options.width - (self.options.type == 'input' ? 8 : 0) + 'px'}) // 2 x 4 px padding
.bindEvent({ .bindEvent({
@ -318,28 +342,6 @@ Ox.ArrayEditable = function(options, self) {
} }
} }
self.setOption = function(key, value) {
if (key == 'highlight') {
self.$items.forEach(function($item) {
$item.options({highlight: value})
});
} else if (key == 'items') {
if (self.options.selected && getSelectedPosition() == -1) {
selectNone();
}
renderItems(true);
} else if (key == 'selected') {
selectItem(value);
} else if (key == 'sort') {
renderItems();
} else if (key == 'width') {
that.css({width: value - 8 + 'px'}); // 2 x 4 px padding
self.options.type == 'textarea' && self.$items.forEach(function($item) {
$item.options({width: value})
});
}
}
/*@ /*@
addItem <f> addItem addItem <f> addItem
(position, item) -> <o> add item at position (position, item) -> <o> add item at position

View file

@ -23,7 +23,11 @@ Ox.ArrayInput = function(options, self) {
value: [], value: [],
width: 256 width: 256
}) })
.options(options || {}); .options(options || {})
.update({
value: setValue,
width: setWidths
});
if (self.options.label) { if (self.options.label) {
self.$label = Ox.Label({ self.$label = Ox.Label({
@ -176,14 +180,6 @@ Ox.ArrayInput = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
if (key == 'value') {
setValue();
} else if (key == 'width') {
setWidths();
}
}
/*@ /*@
setErrors <f> setErrors setErrors <f> setErrors
(values) -> <u> set erros (values) -> <u> set erros

View file

@ -48,6 +48,29 @@ Ox.Button = function(options, self) {
.options(Ox.isArray(options.tooltip) ? Ox.extend(Ox.clone(options), { .options(Ox.isArray(options.tooltip) ? Ox.extend(Ox.clone(options), {
tooltip: options.tooltip[0] tooltip: options.tooltip[0]
}) : options || {}) }) : options || {})
.update({
disabled: function() {
that.attr({disabled: self.options.disabled}).toggleClass('OxDisabled');
self.options.disabled && that.$tooltip && that.$tooltip.hide();
},
//FIXME: check if this is still needed
tooltip: function() {
that.$tooltip.options({title: self.options.disabled});
},
title: setTitle,
value: function() {
if (self.options.values.length) {
self.options.title = Ox.getObjectById(
self.options.values, self.options.value
).title;
setTitle();
}
self.options.selectable && that.toggleClass('OxSelected');
},
width: function() {
that.$element.css({width: (self.options.width - 14) + 'px'});
}
})
.attr({ .attr({
disabled: self.options.disabled, disabled: self.options.disabled,
type: self.options.type == 'text' ? 'button' : 'image' type: self.options.type == 'text' ? 'button' : 'image'
@ -121,25 +144,6 @@ Ox.Button = function(options, self) {
} }
} }
self.setOption = function(key, value) {
if (key == 'disabled') {
that.attr({disabled: value}).toggleClass('OxDisabled');
value && that.$tooltip && that.$tooltip.hide();
} else if (key == 'tooltip') {
that.$tooltip.options({title: value});
} else if (key == 'title') {
setTitle();
} else if (key == 'value') {
if (self.options.values.length) {
self.options.title = Ox.getObjectById(self.options.values, value).title;
setTitle();
}
self.options.selectable && that.toggleClass('OxSelected');
} else if (key == 'width') {
that.$element.css({width: (value - 14) + 'px'});
}
};
/*@ /*@
toggle <f> toggle toggle <f> toggle
() -> <o> toggle button () -> <o> toggle button

View file

@ -30,6 +30,22 @@ Ox.ButtonGroup = function(options, self) {
value: options.max != 1 ? [] : '' value: options.max != 1 ? [] : ''
}) })
.options(options || {}) .options(options || {})
.update({
value: function() {
// fixme: this doesn't work in cases where
// multiple buttons can be selected
var position = Ox.getIndexById(
self.options.buttons, self.options.value
);
if (position > -1) {
self.$buttons[position].trigger('click');
} else if (self.options.min == 0) {
self.$buttons.forEach(function($button, i) {
$button.options('value') && $button.trigger('click');
});
}
}
})
.addClass('OxButtonGroup'); .addClass('OxButtonGroup');
self.options.buttons = self.options.buttons.map(function(button) { self.options.buttons = self.options.buttons.map(function(button) {
@ -99,21 +115,6 @@ Ox.ButtonGroup = function(options, self) {
} }
} }
self.setOption = function(key, value) {
if (key == 'value') {
// fixme: this doesn't work in cases where
// multiple buttons can be selected
var position = Ox.getIndexById(self.options.buttons, value);
if (position > -1) {
self.$buttons[position].trigger('click');
} else if (self.options.min == 0) {
self.$buttons.forEach(function($button, i) {
$button.options('value') && $button.trigger('click');
});
}
}
}
return that; return that;
}; };

View file

@ -34,6 +34,24 @@ Ox.Checkbox = function(options, self) {
width: 'auto' width: 'auto'
}) })
.options(options || {}) .options(options || {})
.update({
disabled: function() {
var disabled = self.options.disabled;
that.attr({disabled: disabled});
self.$button.options({disabled: disabled});
self.$title && self.$title.options({disabled: disabled});
},
title: function() {
self.$title.options({title: self.options.title});
},
value: function() {
self.$button.toggle();
},
width: function() {
that.css({width: self.options.width + 'px'});
self.$title && self.$title.options({width: getTitleWidth()});
}
})
.addClass('OxCheckbox' + ( .addClass('OxCheckbox' + (
self.options.overlap == 'none' self.options.overlap == 'none'
? '' : ' OxOverlap' + Ox.toTitleCase(self.options.overlap) ? '' : ' OxOverlap' + Ox.toTitleCase(self.options.overlap)
@ -98,21 +116,6 @@ Ox.Checkbox = function(options, self) {
- !!self.options.label * self.options.labelWidth; - !!self.options.label * self.options.labelWidth;
} }
self.setOption = function(key, value) {
if (key == 'disabled') {
that.attr({disabled: value});
self.$button.options({disabled: value});
self.$title && self.$title.options({disabled: value});
} else if (key == 'title') {
self.$title.options({title: value});
} else if (key == 'value') {
self.$button.toggle();
} else if (key == 'width') {
that.css({width: value + 'px'});
self.$title && self.$title.options({width: getTitleWidth()});
}
};
return that; return that;
}; };

View file

@ -34,6 +34,29 @@ Ox.Editable = function(options, self) {
type: 'input' type: 'input'
}) })
.options(options || {}) .options(options || {})
.update({
editing: function() {
if (self.options.editing) {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
} else {
submit();
}
},
height: function() {
setCSS({height: self.options.height + 'px'});
},
width: function() {
setCSS({width: self.options.width + 'px'});
},
highlight: function() {
self.$value.html(formatValue());
},
value: function() {
self.$value.html(formatValue());
}
})
.addClass('OxEditableElement' + (self.options.editable ? ' OxEditable' : '')) .addClass('OxEditableElement' + (self.options.editable ? ' OxEditable' : ''))
.on({ .on({
click: function() { click: function() {
@ -196,6 +219,12 @@ Ox.Editable = function(options, self) {
); );
} }
function setCSS(css) {
self.$test && self.$test.css(css);
self.$input && self.$input.css(css);
self.$input && self.$input.find(self.options.type).css(css);
}
function setSizes() { function setSizes() {
var height, width; var height, width;
self.$test.css({display: 'inline-block'}); self.$test.css({display: 'inline-block'});
@ -227,28 +256,6 @@ Ox.Editable = function(options, self) {
that.triggerEvent('submit', {value: self.options.value}); that.triggerEvent('submit', {value: self.options.value});
} }
self.setOption = function(key, value) {
if (key == 'editing') {
if (value) {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
} else {
submit();
}
} else if (key == 'height' || key == 'width') {
var css = {};
css[key] = value + 'px';
self.$test && self.$test.css(css);
self.$input && self.$input.css(css);
self.$input && self.$input.find(self.options.type).css(css);
} else if (key == 'highlight') {
self.$value.html(formatValue());
} else if (key == 'value') {
self.$value.html(formatValue());
}
};
that.css = function(css) { that.css = function(css) {
self.css = css; self.css = css;
that.$element.css(css); that.$element.css(css);

View file

@ -20,6 +20,15 @@ Ox.FileButton = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update({
disabled: function() {
self.$button.options({disabled: self.options.disabled});
self.$input[self.options.disabled ? 'hide' : 'show']();
},
title: function() {
self.$button.options({title: self.options.title});
}
})
.addClass('OxFileButton') .addClass('OxFileButton')
.css({width: self.options.width + 'px'}); .css({width: self.options.width + 'px'});
@ -98,15 +107,6 @@ Ox.FileButton = function(options, self) {
.appendTo(that); .appendTo(that);
} }
self.setOption = function(key, value) {
if (key == 'disabled') {
self.$button.options({disabled: value});
self.$input[value ? 'hide' : 'show']();
} else if (key == 'title') {
self.$button.options({title: value});
}
}
/*@ /*@
blurButton <f> blurButton blurButton <f> blurButton
@*/ @*/

View file

@ -27,6 +27,9 @@ Ox.FormElementGroup = function(options, self) {
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
.update({
value: setValue
})
.addClass('OxInputGroup'); .addClass('OxInputGroup');
if (Ox.isEmpty(self.options.value)) { if (Ox.isEmpty(self.options.value)) {
@ -97,12 +100,6 @@ Ox.FormElementGroup = function(options, self) {
} }
self.setOption = function(key, value) {
if (key == 'value') {
setValue();
}
};
/*@ /*@
replaceElement <f> replaceElement replaceElement <f> replaceElement
(pos, element) -> <u> replcae element at position (pos, element) -> <u> replcae element at position

View file

@ -99,6 +99,49 @@ Ox.Input = function(options, self) {
width: 128 width: 128
}) })
.options(options || {}) .options(options || {})
.update(function(key, value) {
var inputWidth;
if ([
'autocomplete', 'autocompleteReplace', 'autocompleteSelect', 'autovalidate'
].indexOf(key) > -1) {
if (self.options.autocomplete && self.options.autocompleteSelect) {
self.$autocompleteMenu = constructAutocompleteMenu();
}
self.bindKeyboard = self.options.autocomplete || self.options.autovalidate;
} else if (key == 'disabled') {
self.$input.attr({disabled: value});
} else if (key == 'height') {
that.css({height: value + 'px'});
self.$input.css({height: value - 6 + 'px'});
} else if (key == 'labelWidth') {
self.$label.options({width: value});
inputWidth = getInputWidth();
self.$input.css({
width: inputWidth + 'px'
});
self.hasPasswordPlaceholder && self.$placeholder.css({
width: inputWidth + 'px'
});
} else if (key == 'placeholder') {
setPlaceholder();
} else if (key == 'value') {
if (self.options.type == 'float' && self.options.decimals) {
self.options.value = self.options.value.toFixed(self.options.decimals);
}
self.$input.val(self.options.value);
that.is('.OxError') && that.removeClass('OxError');
setPlaceholder();
} else if (key == 'width') {
that.css({width: self.options.width + 'px'});
inputWidth = getInputWidth();
self.$input.css({
width: inputWidth + 'px'
});
self.hasPasswordPlaceholder && self.$placeholder.css({
width: inputWidth + 'px'
});
}
})
.addClass( .addClass(
'OxInput OxMedium Ox' + Ox.toTitleCase(self.options.style) /*+ ( 'OxInput OxMedium Ox' + Ox.toTitleCase(self.options.style) /*+ (
self.options.overlap != 'none' ? self.options.overlap != 'none' ?
@ -847,48 +890,6 @@ Ox.Input = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
var inputWidth;
if (['autocomplete', 'autocompleteReplace', 'autocompleteSelect', 'autovalidate'].indexOf(key) > -1) {
if (self.options.autocomplete && self.options.autocompleteSelect) {
self.$autocompleteMenu = constructAutocompleteMenu();
}
self.bindKeyboard = self.options.autocomplete || self.options.autovalidate;
} else if (key == 'disabled') {
self.$input.attr({disabled: value});
} else if (key == 'height') {
that.css({height: value + 'px'});
self.$input.css({height: value - 6 + 'px'});
} else if (key == 'labelWidth') {
self.$label.options({width: value});
inputWidth = getInputWidth();
self.$input.css({
width: inputWidth + 'px'
});
self.hasPasswordPlaceholder && self.$placeholder.css({
width: inputWidth + 'px'
});
} else if (key == 'placeholder') {
setPlaceholder();
} else if (key == 'value') {
if (self.options.type == 'float' && self.options.decimals) {
self.options.value = self.options.value.toFixed(self.options.decimals);
}
self.$input.val(self.options.value);
that.is('.OxError') && that.removeClass('OxError');
setPlaceholder();
} else if (key == 'width') {
that.css({width: self.options.width + 'px'});
inputWidth = getInputWidth();
self.$input.css({
width: inputWidth + 'px'
});
self.hasPasswordPlaceholder && self.$placeholder.css({
width: inputWidth + 'px'
});
}
};
/*@ /*@
blurInput <f> blurInput blurInput <f> blurInput
@*/ @*/

View file

@ -24,6 +24,9 @@ Ox.InputGroup = function(options, self) {
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
.update({
value: setValue
})
.addClass('OxInputGroup') .addClass('OxInputGroup')
.click(click); .click(click);
@ -136,12 +139,6 @@ Ox.InputGroup = function(options, self) {
that.triggerEvent('validate', data); that.triggerEvent('validate', data);
} }
self.setOption = function(key, value) {
if (key == 'value') {
setValue();
}
};
// fixme: is this used? // fixme: is this used?
that.getInputById = function(id) { that.getInputById = function(id) {
var input = null; var input = null;

View file

@ -19,13 +19,24 @@ Ox.Label = function(options, self) {
width: 'auto' width: 'auto'
}) })
.options(options || {}) .options(options || {})
.update({
title: function() {
that.html(self.options.title);
},
width: function() {
that.css({
width: self.options.width - (
self.options.style == 'rounded' ? 14 : 8
) + 'px'
});
}
})
.addClass( .addClass(
'OxLabel Ox' + Ox.toTitleCase(self.options.style) 'OxLabel Ox' + Ox.toTitleCase(self.options.style)
+ (self.options.disabled ? ' OxDisabled' : '') + (self.options.disabled ? ' OxDisabled' : '')
+ ( + (
self.options.overlap != 'none' self.options.overlap != 'none'
? ? ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''
' OxOverlap' + Ox.toTitleCase(self.options.overlap) : ''
) )
) )
.css(Ox.extend(self.options.width == 'auto' ? {} : { .css(Ox.extend(self.options.width == 'auto' ? {} : {
@ -37,18 +48,6 @@ Ox.Label = function(options, self) {
})) }))
.html(self.options.title); .html(self.options.title);
self.setOption = function(key, value) {
if (key == 'title') {
that.html(value);
} else if (key == 'width') {
that.css({
width: self.options.width - (
self.options.style == 'rounded' ? 14 : 8
) + 'px'
});
}
};
return that; return that;
}; };

View file

@ -25,6 +25,11 @@ Ox.ObjectArrayInput = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update({
value: function() {
setValue(self.options.value);
}
})
.addClass('OxObjectArrayInput'); .addClass('OxObjectArrayInput');
if (Ox.isEmpty(self.options.value)) { if (Ox.isEmpty(self.options.value)) {
@ -163,12 +168,6 @@ Ox.ObjectArrayInput = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
if (key == 'value') {
setValue(value);
}
};
return that; return that;
}; };

View file

@ -17,6 +17,11 @@ Ox.ObjectInput = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update({
value: function() {
setValue(self.options.value);
}
})
.addClass('OxObjectInput') .addClass('OxObjectInput')
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
@ -59,12 +64,6 @@ Ox.ObjectInput = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
if (key == 'value') {
setValue(value);
}
};
return that; return that;
}; };

View file

@ -50,6 +50,11 @@ Ox.Range = function(options, self) {
values: [] values: []
}) })
.options(options || {}) .options(options || {})
.update({
size: setSizes,
trackColors: setTrackColors,
value: setThumb
})
.addClass('OxRange') .addClass('OxRange')
.css({ .css({
width: self.options.size + 'px' width: self.options.size + 'px'
@ -280,16 +285,6 @@ Ox.Range = function(options, self) {
} }
} }
self.setOption = function(key, value) {
if (key == 'size') {
setSizes();
} else if (key == 'trackColors') {
setTrackColors();
} else if (key == 'value') {
setThumb();
}
}
return that; return that;
}; };

View file

@ -52,6 +52,33 @@ Ox.Select = function(options, self) {
}) })
// fixme: make default selection restorable // fixme: make default selection restorable
.options(options) .options(options)
.update({
labelWidth: function() {
self.$label.options({width: self.options.labelWidth});
self.$title.css({width: getTitleWidth() + 'px'});
},
title: function() {
if (self.options.type == 'text') {
self.$title.html(self.options.title);
} else {
self.$button.options({title: self.options.title});
}
},
width: function() {
that.css({width: self.options.width- 2 + 'px'});
self.$title.css({width: getTitleWidth() + 'px'});
},
value: function() {
var value = self.options.value;
if (self.options.type == 'text' && !self.options.title) {
self.$title.html(getItem(value).title);
}
value !== '' && Ox.makeArray(value).forEach(function(value) {
self.$menu.checkItem(value);
});
self.options.value = self.optionGroup.value();
}
})
.addClass( .addClass(
'OxSelect Ox' + Ox.toTitleCase(self.options.size) 'OxSelect Ox' + Ox.toTitleCase(self.options.size)
+ ' Ox' + Ox.toTitleCase(self.options.style) + ( + ' Ox' + Ox.toTitleCase(self.options.style) + (
@ -194,30 +221,6 @@ Ox.Select = function(options, self) {
self.$menu.showMenu(); self.$menu.showMenu();
} }
self.setOption = function(key, value) {
if (key == 'labelWidth') {
self.$label.options({width: value});
self.$title.css({width: getTitleWidth() + 'px'});
} else if (key == 'title') {
if (self.options.type == 'text') {
self.$title.html(value);
} else {
self.$button.options({title: value});
}
} else if (key == 'width') {
that.css({width: value - 2 + 'px'});
self.$title.css({width: getTitleWidth() + 'px'});
} else if (key == 'value') {
if (self.options.type == 'text' && !self.options.title) {
self.$title.html(getItem(value).title);
}
value !== '' && Ox.makeArray(value).forEach(function(value) {
self.$menu.checkItem(value);
});
self.options.value = self.optionGroup.value();
}
};
/*@ /*@
disableItem <f> disableItem disableItem <f> disableItem
@*/ @*/

View file

@ -1,5 +1,5 @@
'use strict'; 'use strict';
//FIXME: does not work without options
/*@ /*@
Ox.SelectInput <f:Ox.FormElementGroup> Select Input Ox.SelectInput <f:Ox.FormElementGroup> Select Input
([options[, self]]) -> <o> Select Input ([options[, self]]) -> <o> Select Input
@ -21,7 +21,7 @@ Ox.SelectInput = function(options, self) {
title: '', title: '',
value: options.max == 1 ? '' : [], value: options.max == 1 ? '' : [],
width: 384 width: 384
}, options) }, options || {})
}); });
self.other = self.options.items[self.options.items.length - 1].id; self.other = self.options.items[self.options.items.length - 1].id;
@ -74,7 +74,8 @@ Ox.SelectInput = function(options, self) {
}).indexOf(value) > -1 ? [value, ''] : [self.other, value]; }).indexOf(value) > -1 ? [value, ''] : [self.other, value];
}, },
width: self.options.width width: self.options.width
}); })
.update({value: setValue});
function getTitle() { function getTitle() {
var value = self.$select ? self.$select.value() : self.options.value; var value = self.$select ? self.$select.value() : self.options.value;
@ -118,12 +119,6 @@ Ox.SelectInput = function(options, self) {
self.$select.options({title: getTitle()}); self.$select.options({title: getTitle()});
} }
self.setOption = function(key, value) {
if (key == 'value') {
setValue();
}
};
/*@ /*@
value <f> get/set value value <f> get/set value
() -> value get value () -> value get value

View file

@ -34,6 +34,12 @@ Ox.Chart = function(options, self) {
width: 512 width: 512
}) })
.options(options || {}) .options(options || {})
.update({
width: function() {
self.$chart.empty();
renderChart();
}
})
.addClass('OxChart') .addClass('OxChart')
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
@ -266,13 +272,6 @@ Ox.Chart = function(options, self) {
return $element; return $element;
} }
self.setOption = function(key, value) {
if (key == 'width') {
self.$chart.empty();
renderChart();
}
}
return that; return that;
}; };

View file

@ -49,7 +49,19 @@ Ox.IconList = function(options, self) {
sort: [], sort: [],
unique: '' unique: ''
}) })
.options(options || {}); .options(options || {})
.update({
items: function() {
that.$element.options('items', self.options.items);
},
selected: function() {
that.$element.options('selected', self.options.selected);
},
sort: function() {
updateKeys();
that.$element.options('sort', self.options.sort);
}
});
if (self.options.fixedRatio) { if (self.options.fixedRatio) {
self.options.defaultRatio = self.options.fixedRatio; self.options.defaultRatio = self.options.fixedRatio;
@ -127,21 +139,6 @@ Ox.IconList = function(options, self) {
}); });
} }
/*@
setOption <f> set key/value
(key, value) -> <u> set key in options to value
@*/
self.setOption = function(key, value) {
if (key == 'items') {
that.$element.options(key, value);
} else if (key == 'selected') {
that.$element.options(key, value);
} else if (key == 'sort') {
updateKeys();
that.$element.options(key, value);
}
};
/*@ /*@
closePreview <f> close preview closePreview <f> close preview
() -> <o> the list () -> <o> the list

View file

@ -26,6 +26,30 @@ Ox.InfoList = function(options, self) {
unique: '' unique: ''
}) })
.options(options || {}) .options(options || {})
.update({
items: function() {
that.$element.options('items', self.options.items);
},
selected: function() {
that.$element.options('selected', self.options.selected);
},
sort: function() {
updateKeys();
that.$element.options('sort', self.options.sort);
},
width: function() {
var width = getItemWidth();
$('.OxInfoElement').each(function() {
var $parent = $(this).parent(),
id = parseInt(/OxId(.*?)$/.exec(this.className)[1]);
$parent.css({width: width - 144});
$parent.parent().css({width: width - 144});
$parent.parent().parent().css({width: width - 8});
Ox.Log('List', '@@@', this.className, id)
Ox.UI.elements[id].options({width: width - 152});
});
}
});
//Ox.print('INFO LIST FIND', self.options.find); //Ox.print('INFO LIST FIND', self.options.find);
@ -154,30 +178,8 @@ Ox.InfoList = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
if (key == 'items') {
that.$element.options(key, value);
} else if (key == 'selected') {
that.$element.options(key, value);
} else if (key == 'sort') {
updateKeys();
that.$element.options(key, value);
} else if (key == 'width') {
var width = getItemWidth();
$('.OxInfoElement').each(function() {
var $parent = $(this).parent(),
id = parseInt(/OxId(.*?)$/.exec(this.className)[1]);
$parent.css({width: width - 144});
$parent.parent().css({width: width - 144});
$parent.parent().parent().css({width: width - 8});
Ox.Log('List', '@@@', this.className, id)
Ox.UI.elements[id].options({width: width - 152});
});
}
};
/*@ /*@
closePreivew <f> closePreview closePreview <f> closePreview
@*/ @*/
that.closePreview = function() { that.closePreview = function() {
that.$element.closePreview(); that.$element.closePreview();

View file

@ -71,6 +71,38 @@ Ox.List = function(options, self) {
unique: '' unique: ''
}) })
.options(options || {}) .options(options || {})
.update({
items: function() {
if (Ox.isArray(self.options.items)) {
self.options.items = Ox.api(self.options.items, {
cache: true,
sort: self.options.sort,
sums: self.options.sums,
unique: self.options.unique
});
/*
self.listLength = self.options.items.length;
updateSelected();
updateSort();
*/
}
updateQuery();
},
selected: function() {
var previousSelected = self.selected;
setSelected(self.options.selected);
// fixme: the following was added in order
// to make text list find-as-you-type work,
// this may break other things
if (!self.isAsync && !Ox.isEqual(self.selected, previousSelected)) {
triggerSelectEvent(self.options.selected);
}
},
sort: function() {
//Ox.Log('List', '---sort---')
updateSort();
}
})
.scroll(scroll); .scroll(scroll);
self.options.sort = self.options.sort.map(function(sort) { self.options.sort = self.options.sort.map(function(sort) {
@ -1394,39 +1426,6 @@ Ox.List = function(options, self) {
//} //}
} }
self.setOption = function(key, value) {
//Ox.Log('List', 'list setOption', key, value);
var previousSelected;
if (key == 'items') {
if (Ox.isArray(value)) {
self.options.items = Ox.api(self.options.items, {
cache: true,
sort: self.options.sort,
sums: self.options.sums,
unique: self.options.unique
});
/*
self.listLength = value.length;
updateSelected();
updateSort();
*/
}
updateQuery();
} else if (key == 'selected') {
previousSelected = self.selected;
setSelected(value);
// fixme: the following was added in order
// to make text list find-as-you-type work,
// this may break other things
if (!self.isAsync && !Ox.isEqual(self.selected, previousSelected)) {
triggerSelectEvent(value);
}
} else if (key == 'sort') {
//Ox.Log('List', '---sort---')
updateSort();
}
};
/*@ /*@
addItems <f> add item to list addItems <f> add item to list
(pos, items) -> <u> add items to list at position (pos, items) -> <u> add items to list at position

View file

@ -25,7 +25,12 @@ Ox.ListItem = function(options, self) {
position: 0, position: 0,
unique: '' unique: ''
}) })
.options(options || {}); .options(options || {})
.update({
data: function() {
constructItem(true);
}
});
constructItem(); constructItem();
@ -42,12 +47,6 @@ Ox.ListItem = function(options, self) {
that.setElement($element); that.setElement($element);
} }
self.setOption = function(key, value) {
if (key == 'data') {
constructItem(true);
}
};
return that; return that;
}; };

View file

@ -69,6 +69,21 @@ Ox.TextList = function(options, self) {
sums: [] sums: []
}) })
.options(options || {}) .options(options || {})
.update({
items: function() {
that.$body.options('items', self.options.items);
},
paste: function() {
that.$body.options('paste', self.options.paste);
},
selected: function() {
that.$body.options('selected', self.options.selected);
},
sort: function() {
updateColumn();
that.$body.options('sort', self.options.sort);
}
})
.addClass('OxTextList') .addClass('OxTextList')
.bindEvent({ .bindEvent({
key_left: function() { key_left: function() {
@ -816,20 +831,6 @@ Ox.TextList = function(options, self) {
} }
} }
self.setOption = function(key, value) {
//Ox.Log('List', '---------------------------- TextList setOption', key, value)
if (key == 'items') {
that.$body.options(key, value);
} else if (key == 'paste') {
that.$body.options(key, value);
} else if (key == 'selected') {
that.$body.options(key, value);
} else if (key == 'sort') {
updateColumn();
that.$body.options(key, value);
}
};
that.addItem = function(item) { that.addItem = function(item) {
/* /*
self.options.items.push(item); self.options.items.push(item);

View file

@ -27,7 +27,20 @@ Ox.TreeList = function(options, self) {
selected: [], selected: [],
width: 'auto' width: 'auto'
}) })
.options(options || {}); .options(options || {})
.update({
data: function() {
// ...
},
selected: function() {
//self.$list.options({selected: self.options.selected});
selectItem({ids: self.options.selected});
self.$list.scrollToSelection();
},
width: function() {
// ...
}
});
if (self.options.data) { if (self.options.data) {
self.options.items = []; self.options.items = [];
@ -249,18 +262,6 @@ Ox.TreeList = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
if (key == 'data') {
// ...
} else if (key == 'selected') {
//self.$list.options({selected: value});
selectItem({ids: value});
self.$list.scrollToSelection();
} else if (key == 'width') {
// ...
}
};
/*@ /*@
gainFocus <f> gainFocus gainFocus <f> gainFocus
@*/ @*/

View file

@ -39,6 +39,18 @@ Ox.ListMap = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update({
height: function() {
self.$list.size();
self.$map.resizeMap();
},
selected: function() {
self.$list.options({selected: self.options.selected});
},
width: function() {
self.$map.resizeMap();
}
})
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
height: self.options.height + 'px' height: self.options.height + 'px'
@ -1119,20 +1131,6 @@ Ox.ListMap = function(options, self) {
}); });
} }
/*@
setOption <f> setOption
@*/
self.setOption = function(key, value) {
if (key == 'height') {
self.$list.size();
self.$map.resizeMap();
} else if (key == 'selected') {
self.$list.options({selected: value});
} else if (key == 'width') {
self.$map.resizeMap();
}
}
/*@ /*@
focusList <f> focusList focusList <f> focusList
@*/ @*/

View file

@ -114,6 +114,48 @@ Ox.Map = function(options, self) {
// fixme: width, height // fixme: width, height
}) })
.options(options || {}) .options(options || {})
.update({
find: function() {
self.$findInput
.value(self.options.find)
.triggerEvent('submit', {value: self.options.find});
},
height: function() {
that.$element.css({height: self.options.height + 'px'});
that.resizeMap();
},
places: function() {
addPlaces();
getMapBounds(function(mapBounds) {
if (mapBounds) {
self.map.fitBounds(mapBounds);
} else {
self.map.setZoom(self.minZoom);
self.map.setCenter(new google.maps.LatLng(0, 0));
}
// fixme: the following is just a guess
self.boundsChanged = true;
mapChanged();
});
if (self.options.selected) {
if (getSelectedPlace()) {
selectPlace(self.options.selected);
} else {
self.options.selected = '';
}
}
},
selected: function() {
selectPlace(self.options.selected || null);
},
type: function() {
// ...
},
width: function() {
that.$element.css({width: self.options.width + 'px'});
that.resizeMap();
}
})
.addClass('OxMap') .addClass('OxMap')
.bindEvent({ .bindEvent({
gainfocus: function() { gainfocus: function() {
@ -1402,41 +1444,6 @@ Ox.Map = function(options, self) {
place && self.map.fitBounds(place.bounds); place && self.map.fitBounds(place.bounds);
} }
self.setOption = function(key, value) {
if (key == 'find') {
self.$findInput
.value(self.options.find)
.triggerEvent('submit', {value: self.options.find});
} else if (key == 'height' || key == 'width') {
that.$element.css(key, value + 'px');
that.resizeMap();
} else if (key == 'places') {
addPlaces();
getMapBounds(function(mapBounds) {
if (mapBounds) {
self.map.fitBounds(mapBounds);
} else {
self.map.setZoom(self.minZoom);
self.map.setCenter(new google.maps.LatLng(0, 0));
}
// fixme: the following is just a guess
self.boundsChanged = true;
mapChanged();
});
if (self.options.selected) {
if (getSelectedPlace()) {
selectPlace(self.options.selected);
} else {
self.options.selected = '';
}
}
} else if (key == 'selected') {
selectPlace(value || null);
} else if (key == 'type') {
}
};
/*@ /*@
addPlace <f> addPlace addPlace <f> addPlace
(data) -> <u> add place to places (data) -> <u> add place to places

View file

@ -25,7 +25,7 @@ Ox.MapImage = function(options, self) {
type: 'satellite', type: 'satellite',
width: 640 width: 640
}) })
.options(options || {}) .options(options || {});
self.src = document.location.protocol self.src = document.location.protocol
+ '//maps.google.com/maps/api/staticmap?sensor=false' + + '//maps.google.com/maps/api/staticmap?sensor=false' +
@ -68,10 +68,6 @@ Ox.MapImage = function(options, self) {
}).join('') }).join('')
} }
self.setOption = function(key, value) {
};
return that; return that;
}; };

View file

@ -120,10 +120,6 @@ Ox.MainMenu = function(options, self) {
that.menus[position].remove(); that.menus[position].remove();
} }
self.setOption = function(key, value) {
};
that.addMenuAfter = function(id) { that.addMenuAfter = function(id) {
}; };

View file

@ -45,6 +45,15 @@ Ox.Menu = function(options, self) {
size: 'medium' // fixme: remove size: 'medium' // fixme: remove
}) })
.options(options || {}) .options(options || {})
.update({
items: function() {
renderItems(self.options.items);
},
selected: function() {
that.$content.find('.OxSelected').removeClass('OxSelected');
selectItem(self.options.selected);
}
})
.addClass( .addClass(
'OxMenu Ox' + Ox.toTitleCase(self.options.side) + 'OxMenu Ox' + Ox.toTitleCase(self.options.side) +
' Ox' + Ox.toTitleCase(self.options.size) ' Ox' + Ox.toTitleCase(self.options.size)
@ -567,15 +576,6 @@ Ox.Menu = function(options, self) {
} }
} }
self.setOption = function(key, value) {
if (key == 'items') {
renderItems(value);
} else if (key == 'selected') {
that.$content.find('.OxSelected').removeClass('OxSelected');
selectItem(value);
}
}
/*@ /*@
addItem <f> addItem <f>
@*/ @*/

View file

@ -34,6 +34,19 @@ Ox.MenuButton = function(options, self) {
width: 'auto' width: 'auto'
}) })
.options(options || {}) .options(options || {})
.update({
title: function() {
if (self.options.type == 'text') {
self.$title.html(self.options.title);
} else {
self.$button.options({title: self.options.title});
}
},
width: function() {
that.css({width: self.options.width - 2 + 'px'});
self.$title.css({width: self.options.width - 24 + 'px'});
}
})
.addClass( .addClass(
'OxSelect Ox' + Ox.toTitleCase(self.options.style) 'OxSelect Ox' + Ox.toTitleCase(self.options.style)
) )
@ -98,19 +111,6 @@ Ox.MenuButton = function(options, self) {
that.triggerEvent('show'); that.triggerEvent('show');
} }
self.setOption = function(key, value) {
if (key == 'title') {
if (self.options.type == 'text') {
self.$title.html(value);
} else {
self.$button.options({title: value});
}
} else if (key == 'width') {
that.css({width: value - 2 + 'px'});
self.$title.css({width: self.options.width - 24 + 'px'});
}
}
/*@ /*@
checkItem <f> checkItem checkItem <f> checkItem
(id) -> <o> check item with id (id) -> <o> check item with id

View file

@ -41,6 +41,18 @@ Ox.MenuItem = function(options, self) {
keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard), keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
title: Ox.makeArray(options.title || self.defaults.title) title: Ox.makeArray(options.title || self.defaults.title)
})) }))
.update({
checked: function() {
that.$status.html(self.options.checked ? Ox.UI.symbols.check : '')
},
disabled: function() {
that.toggleClass('OxDisabled');
},
title: function() {
self.options.title = Ox.makeArray(self.options.title);
that.$title.html(self.options.title[0]);
}
})
.addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : '')) .addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : ''))
/* /*
.attr({ .attr({
@ -124,20 +136,6 @@ Ox.MenuItem = function(options, self) {
}; };
} }
/*@
setOption <f> setOption
@*/
self.setOption = function(key, value) {
if (key == 'checked') {
that.$status.html(value ? Ox.UI.symbols.check : '')
} else if (key == 'disabled') {
that.toggleClass('OxDisabled');
} else if (key == 'title') {
self.options.title = Ox.makeArray(value);
that.$title.html(self.options.title[0]);
}
};
that.toggle = function() { that.toggle = function() {
// toggle id and title // toggle id and title
}; };

View file

@ -1,7 +1,7 @@
'use strict'; 'use strict';
/*@ /*@
Ox.CollapsePanel <f:Ox.Panel> CollapsePanel Object Ox.CollapsePanel <f:Ox.Element> CollapsePanel Object
([options[, self]]) -> <o> CollapsePanel Object ([options[, self]]) -> <o> CollapsePanel Object
options <o> Options object options <o> Options object
collapsed <b|false> collapsed state collapsed <b|false> collapsed state
@ -14,7 +14,7 @@ Ox.CollapsePanel <f:Ox.Panel> CollapsePanel Object
Ox.CollapsePanel = function(options, self) { Ox.CollapsePanel = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Panel({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
animate: true, animate: true,
collapsed: false, collapsed: false,
@ -23,7 +23,18 @@ Ox.CollapsePanel = function(options, self) {
title: '' title: ''
}) })
.options(options) .options(options)
.addClass('OxCollapsePanel'); .update({
collapsed: function() {
// will be toggled again in toggleCollapsed
self.options.collapsed = !self.options.collapsed;
self.$button.toggle();
toggleCollapsed();
},
title: function() {
self.$title.html(self.options.title);
}
})
.addClass('OxPanel OxCollapsePanel');
self.$titlebar = Ox.Bar({ self.$titlebar = Ox.Bar({
orientation: 'horizontal', orientation: 'horizontal',
@ -106,21 +117,6 @@ Ox.CollapsePanel = function(options, self) {
}); });
} }
/*@
setOption <f> setOption
(key, value) -> <u> set key to value
@*/
self.setOption = function(key, value) {
if (key == 'collapsed') {
// will be toggled again in toggleCollapsed
self.options.collapsed = !self.options.collapsed;
self.$button.toggle();
toggleCollapsed();
} else if (key == 'title') {
self.$title.html(self.options.title);
}
};
/*@ /*@
update <f> Update panel when in collapsed state update <f> Update panel when in collapsed state
@*/ @*/

View file

@ -1,15 +0,0 @@
'use strict';
/*@
Ox.Panel <f:Ox.Element> Panel Object
([options[, self]]) -> <f> Panel Object
options <o> Options object
self <o> shared private variable
@*/
Ox.Panel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.addClass('OxPanel');
return that;
};

View file

@ -39,7 +39,56 @@ Ox.AnnotationFolder = function(options, self) {
widgetSize: 256, widgetSize: 256,
width: 0 width: 0
}) })
.options(options || {}); .options(options || {})
.update(function(key, value) {
if (key == 'highlight') {
self.$annotations.options({highlight: value});
}
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
var item = Ox.getObjectById(self.options.items, self.options.selected);
item[key] = value;
item.duration = self.options.out - self.options['in'];
self.points = getPoints();
}
if (key == 'in') {
//fixme: array editable should support item updates while editing
self.options.range == 'selection' && updateAnnotations();
} else if (key == 'out') {
self.options.range == 'selection' && updateAnnotations();
} else if (key == 'position') {
if (self.options.range == 'position') {
crossesPoint() && updateAnnotations();
self.position = self.options.position;
}
} else if (key == 'range') {
updateAnnotations();
} else if (key == 'selected') {
if (value === '') {
self.editing = false;
}
if (value && self.options.collapsed) {
self.$panel.options({animate: false});
self.$panel.options({collapsed: false});
self.$panel.options({animate: true});
}
self.$annotations.options({selected: value});
} else if (key == 'sort') {
self.sort = getSort();
self.$annotations.options({sort: self.sort});
showWarnings();
} else if (key == 'users') {
updateAnnotations();
} else if (key == 'width') {
if (self.widget) {
self.$outer.options({width: self.options.width});
self.$inner.options({width: self.options.width});
self.$widget.options({width: self.options.width});
}
self.$annotations.options({
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width
});
}
});
if (self.options.selected) { if (self.options.selected) {
self.options.collapsed = false; self.options.collapsed = false;
@ -511,56 +560,6 @@ Ox.AnnotationFolder = function(options, self) {
} }
} }
self.setOption = function(key, value) {
if (key == 'highlight') {
self.$annotations.options({highlight: value});
}
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
var item = Ox.getObjectById(self.options.items, self.options.selected);
item[key] = value;
item.duration = self.options.out - self.options['in'];
self.points = getPoints();
}
if (key == 'in') {
//fixme: array editable should support item updates while editing
self.options.range == 'selection' && updateAnnotations();
} else if (key == 'out') {
self.options.range == 'selection' && updateAnnotations();
} else if (key == 'position') {
if (self.options.range == 'position') {
crossesPoint() && updateAnnotations();
self.position = self.options.position;
}
} else if (key == 'range') {
updateAnnotations();
} else if (key == 'selected') {
if (value === '') {
self.editing = false;
}
if (value && self.options.collapsed) {
self.$panel.options({animate: false});
self.$panel.options({collapsed: false});
self.$panel.options({animate: true});
}
self.$annotations.options({selected: value});
} else if (key == 'sort') {
self.sort = getSort();
self.$annotations.options({sort: self.sort});
showWarnings();
} else if (key == 'users') {
updateAnnotations();
} else if (key == 'width') {
if (self.widget) {
self.$outer.options({width: self.options.width});
self.$inner.options({width: self.options.width});
self.$widget.options({width: self.options.width});
}
self.$annotations.options({
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width
});
}
};
/*@ /*@
addItem <f> addItem addItem <f> addItem
@*/ @*/

View file

@ -46,6 +46,30 @@ Ox.AnnotationPanel = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update(function(key, value) {
if (key == 'highlight') {
self.$folder.forEach(function($folder) {
$folder.options({highlight: value});
});
} else if (['in', 'out', 'position'].indexOf(key) > -1) {
self.$folder.forEach(function($folder) {
$folder.options(key, value);
});
} else if (key == 'selected') {
self.options.editable && updateEditMenu();
if (value) {
getFolder(value).options({selected: value});
} else {
self.$folder.forEach(function($folder) {
$folder.options({selected: ''});
});
}
} else if (key == 'width') {
self.$folder.forEach(function($folder) {
$folder.options({width: self.options.width - Ox.UI.SCROLLBAR_SIZE});
});
}
})
.addClass('OxAnnotationPanel'); .addClass('OxAnnotationPanel');
self.editing = false; self.editing = false;
@ -458,31 +482,6 @@ Ox.AnnotationPanel = function(options, self) {
self.$editMenuButton[action]('delete'); self.$editMenuButton[action]('delete');
} }
self.setOption = function(key, value) {
if (key == 'highlight') {
self.$folder.forEach(function($folder) {
$folder.options({highlight: value});
});
} else if (['in', 'out', 'position'].indexOf(key) > -1) {
self.$folder.forEach(function($folder) {
$folder.options(key, value);
});
} else if (key == 'selected') {
self.options.editable && updateEditMenu();
if (value) {
getFolder(value).options({selected: value});
} else {
self.$folder.forEach(function($folder) {
$folder.options({selected: ''});
});
}
} else if (key == 'width') {
self.$folder.forEach(function($folder) {
$folder.options({width: self.options.width - Ox.UI.SCROLLBAR_SIZE});
});
}
};
/*@ /*@
addItem <f> add item addItem <f> add item
(layer, item) -> <o> add item to layer (layer, item) -> <o> add item to layer

View file

@ -25,6 +25,19 @@ Ox.BlockVideoTimeline = function(options, self) {
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
.update({
'in': function() {
self.options.showPointMarkers && setPoint('in');
},
out: function() {
self.options.showPointMarkers && setPoint('out');
},
position: setPositionMarker,
results: setResults,
subtitles: setSubtitles,
state: setState,
width: setWidth
})
.addClass('OxBlockVideoTimeline') .addClass('OxBlockVideoTimeline')
.css({ .css({
position: 'absolute' position: 'absolute'
@ -299,22 +312,6 @@ Ox.BlockVideoTimeline = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
if (key == 'in' || key == 'out') {
self.options.showPointMarkers && setPoint(key);
} else if (key == 'position') {
setPositionMarker();
} else if (key == 'results') {
setResults();
} else if (key == 'subtitles') {
setSubtitles();
} else if (key == 'state') {
setState();
} else if (key == 'width') {
setWidth();
}
};
return that; return that;
}; };

View file

@ -27,6 +27,18 @@ Ox.LargeVideoTimeline = function(options, self) {
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
.update({
find: setSubtitles,
'in': function() {
setPointMarker('in');
},
out: function() {
setPointMarker('out');
},
position: setPosition,
subtitles: setSubtitles,
width: setWidth
})
.addClass('OxLargeVideoTimeline') .addClass('OxLargeVideoTimeline')
.mouseleave(mouseleave) .mouseleave(mouseleave)
.mousemove(mousemove) .mousemove(mousemove)
@ -216,20 +228,6 @@ Ox.LargeVideoTimeline = function(options, self) {
} }
} }
self.setOption = function(key, value) {
if (key == 'find') {
setSubtitles();
} else if (key == 'in' || key == 'out') {
setPointMarker(key);
} else if (key == 'position') {
setPosition();
} else if (key == 'subtitles') {
setSubtitles();
} else if (key == 'width') {
setWidth();
}
};
return that; return that;
}; };

View file

@ -27,6 +27,39 @@ Ox.SmallVideoTimeline = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update({
duration: function() {
self.$image.options({duration: self.options.duration});
},
'in': function() {
self.$image.options({'in': self.options['in']});
self.options.mode == 'editor' && setPointMarker('in');
},
out: function() {
self.$image.options({out: self.options.out});
self.options.mode == 'editor' && setPointMarker('out');
},
paused: function() {
self.$positionMarker[
self.options.paused ? 'addClass' : 'removeClass'
]('OxPaused');
},
position: function() {
setPositionMarker();
},
results: function() {
self.$image.options({results: self.options.results});
},
state: function() {
self.$image.options({state: self.options.state});
},
subtitles: function() {
self.$image.options({subtitles: self.options.subtitles});
},
width: function() {
setWidth();
}
})
.addClass('OxSmallVideoTimeline') .addClass('OxSmallVideoTimeline')
.css(Ox.extend({ .css(Ox.extend({
width: self.options.width + 'px' width: self.options.width + 'px'
@ -214,32 +247,6 @@ Ox.SmallVideoTimeline = function(options, self) {
} }
} }
self.setOption = function(key, value) {
if (key == 'duration') {
self.$image.options({duration: value});
} else if (key == 'in') {
self.$image.options({'in': value});
self.options.mode == 'editor' && setPointMarker('in');
} else if (key == 'out') {
self.$image.options({out: value});
self.options.mode == 'editor' && setPointMarker('out');
} else if (key == 'paused') {
self.$positionMarker[
self.options.paused ? 'addClass' : 'removeClass'
]('OxPaused');
} else if (key == 'position') {
setPositionMarker();
} else if (key == 'results') {
self.$image.options({results: value});
} else if (key == 'state') {
self.$image.options({state: value});
} else if (key == 'subtitles') {
self.$image.options({subtitles: value});
} else if (key == 'width') {
setWidth();
}
};
return that; return that;
}; };

View file

@ -23,6 +23,50 @@ Ox.SmallVideoTimelineImage = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update({
'in': function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
out: function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
results: function() {
self.$results.attr({
src: getImageURL('results')
});
},
selection: function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
subtitles: function() {
self.$subtitles.attr({
src: getImageURL('subtitles')
});
},
state: function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
width: function() {
var width = self.options.width;
that.css({width: width + 'px'});
self.$results
.attr({src: getImageURL('results')})
.css({width: width + 'px'});
self.$selection
.attr({src: getImageURL('selection')})
.css({width: width + 'px'});
self.$subtitles.css({width: width + 'px'});
self.$timeline.css({width: width + 'px'});
}
})
.css({ .css({
position: 'absolute', position: 'absolute',
width: self.options.width + 'px' width: self.options.width + 'px'
@ -199,40 +243,6 @@ Ox.SmallVideoTimelineImage = function(options, self) {
} }
self.setOption = function(key, value) {
if (key == 'in' || key == 'out') {
self.$selection.attr({
src: getImageURL('selection')
});
} else if (key == 'results') {
self.$results.attr({
src: getImageURL('results')
});
} else if (key == 'selection') {
self.$selection.attr({
src: getImageURL('selection')
});
} else if (key == 'subtitles') {
self.$subtitles.attr({
src: getImageURL('subtitles')
});
} else if (key == 'state') {
self.$selection.attr({
src: getImageURL('selection')
});
} else if (key == 'width') {
that.css({width: value + 'px'});
self.$results
.attr({src: getImageURL('results')})
.css({width: value + 'px'});
self.$selection
.attr({src: getImageURL('selection')})
.css({width: value + 'px'});
self.$subtitles.css({width: value + 'px'});
self.$timeline.css({width: value + 'px'});
}
};
return that; return that;
}; };

View file

@ -65,6 +65,34 @@ Ox.VideoEditor = function(options, self) {
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
.update({
height: setSizes,
'in': function() {
setPoint('in', self.options['in']);
},
out: function() {
setPoint('out', self.options.out);
},
paused: function() {
self.$player[0].options({
paused: self.options.paused
});
},
position: function() {
setPosition(self.options.position);
},
selected: function() {
selectAnnotation(
self.options.selected
? Ox.getObjectById(self.annotations, self.options.selected)
: {id: ''}
);
},
showAnnotations: function() {
that.$element.toggle(1);
},
width: setSizes
})
.bindEvent({ .bindEvent({
key_0: toggleMuted, key_0: toggleMuted,
key_alt_left: function() { key_alt_left: function() {
@ -1389,26 +1417,6 @@ Ox.VideoEditor = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
if (key == 'height' || key == 'width') {
setSizes();
} else if (key == 'in' || key == 'out') {
setPoint(key, value);
} else if (key == 'paused') {
self.$player[0].options({
paused: value
});
} else if (key == 'position') {
setPosition(value);
} else if (key == 'selected') {
selectAnnotation(
value ? Ox.getObjectById(self.annotations, value) : {id: ''}
);
} else if (key == 'showAnnotations') {
that.$element.toggle(1);
}
};
/*@ /*@
addAnnotation <f> add annotation addAnnotation <f> add annotation
(layer, item) -> <o> add annotation to layer (layer, item) -> <o> add annotation to layer

View file

@ -27,6 +27,13 @@ Ox.VideoEditorPlayer = function(options, self) {
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
.update({
height: setHeight,
points: setMarkers,
position: setPosition,
posterFrame: setMarkers,
width: setWidth
})
.addClass('OxVideoPlayer') .addClass('OxVideoPlayer')
.css({ .css({
height: (self.options.height + 16) + 'px', height: (self.options.height + 16) + 'px',
@ -359,20 +366,6 @@ Ox.VideoEditorPlayer = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
if (key == 'height') {
setHeight();
} else if (key == 'points') {
setMarkers();
} else if (key == 'position') {
setPosition();
} else if (key == 'posterFrame') {
setMarkers();
} else if (key == 'width') {
setWidth();
}
}
/*@ /*@
mute <f> mute mute <f> mute
@*/ @*/

View file

@ -59,6 +59,41 @@ Ox.VideoPanel = function(options, self) {
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
.update({
fullscreen: function() {
self.$video.options({fullscreen: self.options.value});
},
height: function() {
self.$video.options({height: getPlayerHeight()});
},
'in': function() {
setPoint('in', self.options['in']);
},
out: function() {
setPoint('out', self.options.out);
},
paused: function() {
self.$video.options({paused: self.options.paused});
},
position: function() {
self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position});
self.$annotationPanel.options({position: self.options.position});
},
selected: function() {
self.$annotationPanel.options({selected: self.options.selected});
},
showAnnotations: function() {
that.$element.toggle(1);
},
showTimeline: function() {
self.$videoPanel.toggle(1);
},
width: function() {
self.$video.options({width: getPlayerWidth()});
self.$timeline.options({width: getTimelineWidth()});
}
})
.css({ .css({
height: self.options.height + 'px', height: self.options.height + 'px',
width: self.options.width + 'px' width: self.options.width + 'px'
@ -448,31 +483,6 @@ Ox.VideoPanel = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
if (key == 'fullscreen') {
self.$video.options({fullscreen: value});
} else if (key == 'height') {
self.$video.options({height: getPlayerHeight()});
} else if (key == 'in' || key == 'out') {
setPoint(key, value);
} else if (key == 'paused') {
self.$video.options({paused: value});
} else if (key == 'position') {
self.$video.options({position: value});
self.$timeline.options({position: value});
self.$annotationPanel.options({position: value});
} else if (key == 'selected') {
self.$annotationPanel.options({selected: value});
} else if (key == 'showAnnotations') {
that.$element.toggle(1);
} else if (key == 'showTimeline') {
self.$videoPanel.toggle(1);
} else if (key == 'width') {
self.$video.options({width: getPlayerWidth()});
self.$timeline.options({width: getTimelineWidth()});
}
}
// fixme: can these be removed? // fixme: can these be removed?
/*@ /*@

View file

@ -142,6 +142,52 @@ Ox.VideoPlayer = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update({
enableSubtitles: function() {
self.options.enableSubtitles = !self.options.enableSubtitles;
toggleSubtitles();
},
find: setSubtitleText,
fullscreen: function() {
self.options.fullscreen = !self.options.fullscreen;
toggleFullscreen();
},
height: setSizes,
'in': function() {
self.options.paused && setMarkers();
self.$timeline && self.$timeline.options('in', self.options['in']);
},
out: function() {
self.options.paused && setMarkers();
self.$timeline && self.$timeline.options('out', self.options.out);
},
muted: function() {
self.options.muted = !self.options.muted;
toggleMuted();
},
paused: function() {
self.options.paused = !self.options.paused;
togglePaused();
},
position: function() {
setPosition(self.options.position);
},
posterFrame: function() {
self.options.paused && setMarkers();
},
resolution: setResolution,
scaleToFill: function() {
self.options.scaleToFill = !self.options.scaleToFill;
toggleScale();
},
sizeIsLarge: function() {
self.$sizeButton.toggle();
},
volume: function() {
setVolume(self.options.volume);
},
width: setSizes
})
.addClass('OxVideoPlayer'); .addClass('OxVideoPlayer');
Ox.Log('VIDEO', 'VIDEO PLAYER OPTIONS', self.options) Ox.Log('VIDEO', 'VIDEO PLAYER OPTIONS', self.options)
@ -2356,42 +2402,6 @@ Ox.VideoPlayer = function(options, self) {
self.$volume.toggle(); self.$volume.toggle();
} }
self.setOption = function(key, value) {
if (key == 'enableSubtitles') {
self.options.enableSubtitles = !self.options.enableSubtitles;
toggleSubtitles();
} if (key == 'find') {
setSubtitleText();
} else if (key == 'fullscreen') {
self.options.fullscreen = !self.options.fullscreen;
toggleFullscreen();
} else if (key == 'height' || key == 'width') {
setSizes();
} else if (key == 'in' || key == 'out') {
self.options.paused && setMarkers();
self.$timeline && self.$timeline.options(key, value);
} else if (key == 'muted') {
self.options.muted = !self.options.muted;
toggleMuted();
} else if (key == 'paused') {
self.options.paused = !self.options.paused;
togglePaused();
} else if (key == 'position') {
setPosition(value);
} else if (key == 'posterFrame') {
self.options.paused && setMarkers();
} else if (key == 'resolution') {
setResolution();
} else if (key == 'scaleToFill') {
self.options.scaleToFill = !self.options.scaleToFill;
toggleScale();
} else if (key == 'sizeIsLarge') {
self.$sizeButton.toggle();
} else if (key == 'volume') {
setVolume(value);
}
};
/*@ /*@
changeVolume <f> change volume changeVolume <f> change volume
(num) -> <o> change volume (num) -> <o> change volume

View file

@ -22,6 +22,22 @@ Ox.VideoPreview = function(options, self) {
width: 256 width: 256
}) })
.options(options || {}) .options(options || {})
.update({
height: function() {
that.css({height: self.options.height + 'px'});
self.$frame.css(getFrameCSS());
},
position: function() {
self.$frame.attr({src: self.options.getFrame(self.options.position)});
},
width: function() {
that.css({width: self.options.width + 'px'});
stopLoading();
self.$frame.attr({src: self.options.getFrame()})
.css(getFrameCSS());
self.$timeline.css({width: self.options.width + 'px'});
}
})
.addClass('OxVideoPreview') .addClass('OxVideoPreview')
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
@ -149,21 +165,6 @@ Ox.VideoPreview = function(options, self) {
self.timeout && clearTimeout(self.timeout); self.timeout && clearTimeout(self.timeout);
} }
self.setOption = function(key, value) {
if (key == 'height') {
that.css({height: value + 'px'});
self.$frame.css(getFrameCSS());
} else if (key == 'position') {
self.$frame.attr({src: self.options.getFrame(value)});
} else if (key == 'width') {
that.css({width: value + 'px'});
stopLoading();
self.$frame.attr({src: self.options.getFrame()})
.css(getFrameCSS());
self.$timeline.css({width: value + 'px'});
}
}
return that; return that;
}; };

View file

@ -47,6 +47,25 @@ Ox.VideoTimelinePanel = function(options, self) {
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
.update({
height: function() {
self.$player.options({height: self.options.height});
},
paused: function() {
self.$player.options({
paused: self.options.paused
});
},
position: function() {
setPosition(self.options.position);
},
showAnnotations: function() {
that.$element.toggle(1);
},
width: function() {
self.$player.options({width: getPlayerWidth()});
}
})
.css({ .css({
height: self.options.height + 'px', height: self.options.height + 'px',
width: self.options.width + 'px' width: self.options.width + 'px'
@ -268,22 +287,6 @@ Ox.VideoTimelinePanel = function(options, self) {
}); });
} }
self.setOption = function(key, value) {
if (key == 'height') {
self.$player.options({height: value});
} else if (key == 'paused') {
self.$player.options({
paused: value
});
} else if (key == 'position') {
setPosition(value);
} else if (key == 'showAnnotations') {
that.$element.toggle(1);
} else if (key == 'width') {
self.$player.options({width: getPlayerWidth()});
}
};
/*@ /*@
toggleAnnotations <f> toggle annotations toggleAnnotations <f> toggle annotations
() -> <o> toggle annotations () -> <o> toggle annotations

View file

@ -37,7 +37,16 @@ Ox.VideoTimelinePlayer = function(options, self) {
volume: 1, volume: 1,
width: 0 width: 0
}) })
.options(options || {}); .options(options || {})
.update({
height: setHeight,
paused: function() {
self.options.paused = !self.options.paused;
togglePaused();
},
position: setPosition,
width: setWidth
});
self.fps = 25; self.fps = 25;
self.frame = self.options.position * self.fps; self.frame = self.options.position * self.fps;
@ -796,19 +805,6 @@ Ox.VideoTimelinePlayer = function(options, self) {
} }
} }
self.setOption = function(key, value) {
if (key == 'height') {
setHeight();
} else if (key == 'paused') {
self.options.paused = !self.options.paused;
togglePaused();
} else if (key == 'position') {
setPosition();
} else if (key == 'width') {
setWidth();
}
};
/*@ /*@
togglePaused <f> toggle paused togglePaused <f> toggle paused
() -> <o> toggle paused () -> <o> toggle paused

View file

@ -37,6 +37,27 @@ Ox.Dialog = function(options, self) {
width: 400 width: 400
}) })
.options(options || {}) .options(options || {})
.update({
buttons: setButtons,
content: setContent,
height: function() {
setMinAndMax();
setCSS({height: self.options.height});
},
title: function() {
self.$title.animate({
opacity: 0
}, 50, function() {
self.$title.html(self.options.title).animate({
opacity: 1
}, 50);
});
},
width: function() {
setMinAndMax();
setCSS({width: self.options.width});
}
})
.addClass('OxDialog') .addClass('OxDialog')
.bindEvent({ .bindEvent({
key_enter: function() { key_enter: function() {
@ -606,28 +627,6 @@ Ox.Dialog = function(options, self) {
Ox.Log('Window', 'sMM', self, window.innerHeight, maxRatio) Ox.Log('Window', 'sMM', self, window.innerHeight, maxRatio)
} }
self.setOption = function(key, value) {
if (key == 'buttons') {
setButtons();
} else if (key == 'content') {
setContent();
} else if (key == 'height') {
setMinAndMax();
setCSS({height: value});
} else if (key == 'title') {
self.$title.animate({
opacity: 0
}, 50, function() {
self.$title.html(value).animate({
opacity: 1
}, 50);
});
} else if (key == 'width') {
setMinAndMax();
setCSS({width: value});
}
};
/*@ /*@
close <f> close close <f> close
(callback) -> <o> close (callback) -> <o> close

View file

@ -31,12 +31,6 @@ Ox.Tooltip = function(options, self) {
opacity: 0 opacity: 0
}); });
self.setOption = function(key, value) {
if (key == 'title') {
}
};
/*@ /*@
hide <f> hide tooltip hide <f> hide tooltip
() -> <o> hide tooltip () -> <o> hide tooltip