diff --git a/source/Ox.UI/js/Bar/Ox.Progressbar.js b/source/Ox.UI/js/Bar/Ox.Progressbar.js index 09116c94..6c3c37ae 100644 --- a/source/Ox.UI/js/Bar/Ox.Progressbar.js +++ b/source/Ox.UI/js/Bar/Ox.Progressbar.js @@ -40,6 +40,14 @@ Ox.Progressbar = function(options, self) { width: 256 }) .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') .css({width: self.options.width - 2 + 'px'}); @@ -213,17 +221,6 @@ Ox.Progressbar = function(options, self) { 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 Returns time elapsed / remaining () -> status diff --git a/source/Ox.UI/js/Bar/Ox.Resizebar.js b/source/Ox.UI/js/Bar/Ox.Resizebar.js index 7548576e..db08df5e 100644 --- a/source/Ox.UI/js/Bar/Ox.Resizebar.js +++ b/source/Ox.UI/js/Bar/Ox.Resizebar.js @@ -32,7 +32,13 @@ Ox.Resizebar = function(options, self) { resize: [], 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)) .bindEvent({ // 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; }; diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index b50bfdff..1e96d11b 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js @@ -44,6 +44,42 @@ Ox.Calendar = function(options, self) { zoomOnlyWhenFocused: false }) .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') /* .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 addEvent (event) -> object diff --git a/source/Ox.UI/js/Calendar/Ox.ListCalendar.js b/source/Ox.UI/js/Calendar/Ox.ListCalendar.js index 892be08a..9c73656e 100644 --- a/source/Ox.UI/js/Calendar/Ox.ListCalendar.js +++ b/source/Ox.UI/js/Calendar/Ox.ListCalendar.js @@ -28,6 +28,16 @@ Ox.ListCalendar = function(options, self) { width: 256 }) .options(options || {}) + .update({ + height: function() { + // fixme: should be .resizeList + self.$list.size(); + self.$calendar.resizeCalendar(); + }, + width: function() { + self.$calendar.resizeCalendar(); + } + }) .css({ width: self.options.width + 'px', height: self.options.height + 'px' @@ -807,16 +817,6 @@ Ox.ListCalendar = function(options, self) { 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; }; diff --git a/source/Ox.UI/js/Code/Ox.DocPanel.js b/source/Ox.UI/js/Code/Ox.DocPanel.js index e7b44f88..f77a26bb 100644 --- a/source/Ox.UI/js/Code/Ox.DocPanel.js +++ b/source/Ox.UI/js/Code/Ox.DocPanel.js @@ -44,7 +44,12 @@ Ox.DocPanel = function(options, self) { selected: '', size: 256 }) - .options(options || {}); + .options(options || {}) + .update({ + selected: function() { + selectItem(self.options.selected); + } + }); self.$list = Ox.Element(); self.$page = Ox.Element(); @@ -185,12 +190,6 @@ Ox.DocPanel = function(options, self) { : 0; } - self.setOption = function(key, value) { - if (key == 'selected') { - selectItem(value); - } - }; - return that; }; diff --git a/source/Ox.UI/js/Code/Ox.ExamplePanel.js b/source/Ox.UI/js/Code/Ox.ExamplePanel.js index 2cf36c9d..75be9dc6 100644 --- a/source/Ox.UI/js/Code/Ox.ExamplePanel.js +++ b/source/Ox.UI/js/Code/Ox.ExamplePanel.js @@ -22,6 +22,11 @@ Ox.ExamplePanel = function(options, self) { size: 256 }) .options(options || {}) + .update({ + selected: function() { + self.$list.options({selected: [self.options.selected]}); + } + }); self.$list = Ox.Element(); self.$page = Ox.Element(); @@ -122,12 +127,6 @@ Ox.ExamplePanel = function(options, self) { that.triggerEvent('select', {id: id}); } - self.setOption = function(key, value) { - if (key == 'selected') { - self.$list.options({selected: [value]}); - } - }; - return that; }; diff --git a/source/Ox.UI/js/Core/Ox.App.js b/source/Ox.UI/js/Core/Ox.App.js index c99329c9..18843609 100644 --- a/source/Ox.UI/js/Core/Ox.App.js +++ b/source/Ox.UI/js/Core/Ox.App.js @@ -71,14 +71,6 @@ Ox.App = function(options) { }; } - /*@ - change change key/value - (key, value) -> currently not implemented - @*/ - self.setOption = function(key, value) { - - }; - /*@ options get/set options, see Ox.getset () -> get options diff --git a/source/Ox.UI/js/Core/Ox.Element.js b/source/Ox.UI/js/Core/Ox.Element.js index d1d9fde9..396093e1 100644 --- a/source/Ox.UI/js/Core/Ox.Element.js +++ b/source/Ox.UI/js/Core/Ox.Element.js @@ -389,10 +389,10 @@ Ox.Element = function(options, self) { () -> all options (key) -> the value of option[key] (key, value) -> 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 ({key: value, ...}) -> 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 # Arguments key the name of the option diff --git a/source/Ox.UI/js/Core/Ox.JQueryElement.js b/source/Ox.UI/js/Core/Ox.JQueryElement.js index ae297b89..63be2d29 100644 --- a/source/Ox.UI/js/Core/Ox.JQueryElement.js +++ b/source/Ox.UI/js/Core/Ox.JQueryElement.js @@ -9,9 +9,7 @@ Ox.JQueryElement = function($element) { //@ id Unique id this.oxid = Ox.uid(); //@ $element The jQuery-wrapped DOM element - this.$element = $element.data({ - oxid: this.oxid - }); + this.$element = $element.data({oxid: this.oxid}); //@ 0 The DOM element (for compatibility with jQuery) this[0] = this.$element[0]; //@ length 1 (for compatibility with jQuery) diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js index d2c39904..4dc738e0 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js +++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js @@ -30,6 +30,30 @@ Ox.ArrayEditable = function(options, self) { width: 256 }) .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)) .css({width: self.options.width - (self.options.type == 'input' ? 8 : 0) + 'px'}) // 2 x 4 px padding .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 addItem (position, item) -> add item at position diff --git a/source/Ox.UI/js/Form/Ox.ArrayInput.js b/source/Ox.UI/js/Form/Ox.ArrayInput.js index 9a6d5b0e..5f49a7e3 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayInput.js +++ b/source/Ox.UI/js/Form/Ox.ArrayInput.js @@ -23,7 +23,11 @@ Ox.ArrayInput = function(options, self) { value: [], width: 256 }) - .options(options || {}); + .options(options || {}) + .update({ + value: setValue, + width: setWidths + }); if (self.options.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 setErrors (values) -> set erros diff --git a/source/Ox.UI/js/Form/Ox.Button.js b/source/Ox.UI/js/Form/Ox.Button.js index 09d96264..437e5d73 100644 --- a/source/Ox.UI/js/Form/Ox.Button.js +++ b/source/Ox.UI/js/Form/Ox.Button.js @@ -48,6 +48,29 @@ Ox.Button = function(options, self) { .options(Ox.isArray(options.tooltip) ? Ox.extend(Ox.clone(options), { tooltip: options.tooltip[0] }) : 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({ disabled: self.options.disabled, 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 toggle () -> toggle button diff --git a/source/Ox.UI/js/Form/Ox.ButtonGroup.js b/source/Ox.UI/js/Form/Ox.ButtonGroup.js index 44eddc66..c03d190d 100644 --- a/source/Ox.UI/js/Form/Ox.ButtonGroup.js +++ b/source/Ox.UI/js/Form/Ox.ButtonGroup.js @@ -30,6 +30,22 @@ Ox.ButtonGroup = function(options, self) { value: options.max != 1 ? [] : '' }) .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'); 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; }; diff --git a/source/Ox.UI/js/Form/Ox.Checkbox.js b/source/Ox.UI/js/Form/Ox.Checkbox.js index 1a854fa1..41eeff77 100644 --- a/source/Ox.UI/js/Form/Ox.Checkbox.js +++ b/source/Ox.UI/js/Form/Ox.Checkbox.js @@ -34,6 +34,24 @@ Ox.Checkbox = function(options, self) { width: 'auto' }) .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' + ( self.options.overlap == 'none' ? '' : ' OxOverlap' + Ox.toTitleCase(self.options.overlap) @@ -98,21 +116,6 @@ Ox.Checkbox = function(options, self) { - !!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; }; diff --git a/source/Ox.UI/js/Form/Ox.Editable.js b/source/Ox.UI/js/Form/Ox.Editable.js index a38a6085..711c6a17 100644 --- a/source/Ox.UI/js/Form/Ox.Editable.js +++ b/source/Ox.UI/js/Form/Ox.Editable.js @@ -34,6 +34,29 @@ Ox.Editable = function(options, self) { type: 'input' }) .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' : '')) .on({ 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() { var height, width; self.$test.css({display: 'inline-block'}); @@ -227,28 +256,6 @@ Ox.Editable = function(options, self) { 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) { self.css = css; that.$element.css(css); diff --git a/source/Ox.UI/js/Form/Ox.FileButton.js b/source/Ox.UI/js/Form/Ox.FileButton.js index f175de60..1858f6dd 100644 --- a/source/Ox.UI/js/Form/Ox.FileButton.js +++ b/source/Ox.UI/js/Form/Ox.FileButton.js @@ -20,6 +20,15 @@ Ox.FileButton = function(options, self) { width: 256 }) .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') .css({width: self.options.width + 'px'}); @@ -98,15 +107,6 @@ Ox.FileButton = function(options, self) { .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 blurButton @*/ diff --git a/source/Ox.UI/js/Form/Ox.FormElementGroup.js b/source/Ox.UI/js/Form/Ox.FormElementGroup.js index bd09f674..3393ad12 100644 --- a/source/Ox.UI/js/Form/Ox.FormElementGroup.js +++ b/source/Ox.UI/js/Form/Ox.FormElementGroup.js @@ -27,6 +27,9 @@ Ox.FormElementGroup = function(options, self) { width: 0 }) .options(options || {}) + .update({ + value: setValue + }) .addClass('OxInputGroup'); 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 replaceElement (pos, element) -> replcae element at position diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js index b39fea36..9a6d82b1 100644 --- a/source/Ox.UI/js/Form/Ox.Input.js +++ b/source/Ox.UI/js/Form/Ox.Input.js @@ -99,6 +99,49 @@ Ox.Input = function(options, self) { width: 128 }) .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( 'OxInput OxMedium Ox' + Ox.toTitleCase(self.options.style) /*+ ( 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 blurInput @*/ diff --git a/source/Ox.UI/js/Form/Ox.InputGroup.js b/source/Ox.UI/js/Form/Ox.InputGroup.js index 6786fbcd..6efde985 100644 --- a/source/Ox.UI/js/Form/Ox.InputGroup.js +++ b/source/Ox.UI/js/Form/Ox.InputGroup.js @@ -24,6 +24,9 @@ Ox.InputGroup = function(options, self) { width: 0 }) .options(options || {}) + .update({ + value: setValue + }) .addClass('OxInputGroup') .click(click); @@ -136,12 +139,6 @@ Ox.InputGroup = function(options, self) { that.triggerEvent('validate', data); } - self.setOption = function(key, value) { - if (key == 'value') { - setValue(); - } - }; - // fixme: is this used? that.getInputById = function(id) { var input = null; diff --git a/source/Ox.UI/js/Form/Ox.Label.js b/source/Ox.UI/js/Form/Ox.Label.js index 365f5243..43b40055 100644 --- a/source/Ox.UI/js/Form/Ox.Label.js +++ b/source/Ox.UI/js/Form/Ox.Label.js @@ -9,45 +9,44 @@ Ox.Label = function(options, self) { self = self || {}; var that = Ox.Element({}, self) - .defaults({ - disabled: false, - id: '', - overlap: 'none', - textAlign: 'left', - style: 'rounded', - title: '', - width: 'auto' - }) - .options(options || {}) - .addClass( - 'OxLabel Ox' + Ox.toTitleCase(self.options.style) - + (self.options.disabled ? ' OxDisabled' : '') - + ( - self.options.overlap != 'none' - ? - ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '' - ) + .defaults({ + disabled: false, + id: '', + overlap: 'none', + textAlign: 'left', + style: 'rounded', + title: '', + width: 'auto' + }) + .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( + 'OxLabel Ox' + Ox.toTitleCase(self.options.style) + + (self.options.disabled ? ' OxDisabled' : '') + + ( + self.options.overlap != 'none' + ? ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '' ) - .css(Ox.extend(self.options.width == 'auto' ? {} : { - width: self.options.width - ( - self.options.style == 'rounded' ? 14 : 8 - ) + 'px' - }, { - textAlign: self.options.textAlign - })) - .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' - }); - } - }; + ) + .css(Ox.extend(self.options.width == 'auto' ? {} : { + width: self.options.width - ( + self.options.style == 'rounded' ? 14 : 8 + ) + 'px' + }, { + textAlign: self.options.textAlign + })) + .html(self.options.title); return that; diff --git a/source/Ox.UI/js/Form/Ox.ObjectArrayInput.js b/source/Ox.UI/js/Form/Ox.ObjectArrayInput.js index 5553c6b3..bded78ae 100644 --- a/source/Ox.UI/js/Form/Ox.ObjectArrayInput.js +++ b/source/Ox.UI/js/Form/Ox.ObjectArrayInput.js @@ -25,6 +25,11 @@ Ox.ObjectArrayInput = function(options, self) { width: 256 }) .options(options || {}) + .update({ + value: function() { + setValue(self.options.value); + } + }) .addClass('OxObjectArrayInput'); 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; }; diff --git a/source/Ox.UI/js/Form/Ox.ObjectInput.js b/source/Ox.UI/js/Form/Ox.ObjectInput.js index bc584a12..2cc7c227 100644 --- a/source/Ox.UI/js/Form/Ox.ObjectInput.js +++ b/source/Ox.UI/js/Form/Ox.ObjectInput.js @@ -17,6 +17,11 @@ Ox.ObjectInput = function(options, self) { width: 256 }) .options(options || {}) + .update({ + value: function() { + setValue(self.options.value); + } + }) .addClass('OxObjectInput') .css({ 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; }; diff --git a/source/Ox.UI/js/Form/Ox.Range.js b/source/Ox.UI/js/Form/Ox.Range.js index e7049ef9..b8649803 100644 --- a/source/Ox.UI/js/Form/Ox.Range.js +++ b/source/Ox.UI/js/Form/Ox.Range.js @@ -50,6 +50,11 @@ Ox.Range = function(options, self) { values: [] }) .options(options || {}) + .update({ + size: setSizes, + trackColors: setTrackColors, + value: setThumb + }) .addClass('OxRange') .css({ 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; }; diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index c5232589..b83bac43 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -52,6 +52,33 @@ Ox.Select = function(options, self) { }) // fixme: make default selection restorable .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( 'OxSelect Ox' + Ox.toTitleCase(self.options.size) + ' Ox' + Ox.toTitleCase(self.options.style) + ( @@ -194,30 +221,6 @@ Ox.Select = function(options, self) { 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 disableItem @*/ diff --git a/source/Ox.UI/js/Form/Ox.SelectInput.js b/source/Ox.UI/js/Form/Ox.SelectInput.js index ac5334f9..9c5d8124 100644 --- a/source/Ox.UI/js/Form/Ox.SelectInput.js +++ b/source/Ox.UI/js/Form/Ox.SelectInput.js @@ -1,5 +1,5 @@ 'use strict'; - +//FIXME: does not work without options /*@ Ox.SelectInput Select Input ([options[, self]]) -> Select Input @@ -21,7 +21,7 @@ Ox.SelectInput = function(options, self) { title: '', value: options.max == 1 ? '' : [], width: 384 - }, options) + }, options || {}) }); self.other = self.options.items[self.options.items.length - 1].id; @@ -58,23 +58,24 @@ Ox.SelectInput = function(options, self) { setValue(); that = Ox.FormElementGroup({ - elements: [ - self.$select, - self.$input - ], - id: self.options.id, - join: function(value) { - return value[value[0] == self.other ? 1 : 0] - }, - split: function(value) { - return Ox.filter(self.options.items, function(item, i) { - return i < item.length - 1; - }).map(function(item) { - return item.id; - }).indexOf(value) > -1 ? [value, ''] : [self.other, value]; - }, - width: self.options.width - }); + elements: [ + self.$select, + self.$input + ], + id: self.options.id, + join: function(value) { + return value[value[0] == self.other ? 1 : 0] + }, + split: function(value) { + return Ox.filter(self.options.items, function(item, i) { + return i < item.length - 1; + }).map(function(item) { + return item.id; + }).indexOf(value) > -1 ? [value, ''] : [self.other, value]; + }, + width: self.options.width + }) + .update({value: setValue}); function getTitle() { 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.setOption = function(key, value) { - if (key == 'value') { - setValue(); - } - }; - /*@ value get/set value () -> value get value diff --git a/source/Ox.UI/js/List/Ox.Chart.js b/source/Ox.UI/js/List/Ox.Chart.js index 42e841b6..fae0639c 100644 --- a/source/Ox.UI/js/List/Ox.Chart.js +++ b/source/Ox.UI/js/List/Ox.Chart.js @@ -34,6 +34,12 @@ Ox.Chart = function(options, self) { width: 512 }) .options(options || {}) + .update({ + width: function() { + self.$chart.empty(); + renderChart(); + } + }) .addClass('OxChart') .css({ width: self.options.width + 'px', @@ -266,13 +272,6 @@ Ox.Chart = function(options, self) { return $element; } - self.setOption = function(key, value) { - if (key == 'width') { - self.$chart.empty(); - renderChart(); - } - } - return that; }; diff --git a/source/Ox.UI/js/List/Ox.IconList.js b/source/Ox.UI/js/List/Ox.IconList.js index 802e87d1..d6ce07a2 100644 --- a/source/Ox.UI/js/List/Ox.IconList.js +++ b/source/Ox.UI/js/List/Ox.IconList.js @@ -49,7 +49,19 @@ Ox.IconList = function(options, self) { sort: [], 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) { self.options.defaultRatio = self.options.fixedRatio; @@ -127,21 +139,6 @@ Ox.IconList = function(options, self) { }); } - /*@ - setOption set key/value - (key, value) -> 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 close preview () -> the list diff --git a/source/Ox.UI/js/List/Ox.InfoList.js b/source/Ox.UI/js/List/Ox.InfoList.js index aa983bcf..cd963b6f 100644 --- a/source/Ox.UI/js/List/Ox.InfoList.js +++ b/source/Ox.UI/js/List/Ox.InfoList.js @@ -26,6 +26,30 @@ Ox.InfoList = function(options, self) { unique: '' }) .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); @@ -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 closePreview + closePreview closePreview @*/ that.closePreview = function() { that.$element.closePreview(); diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js index 8abedaba..ef3bcb66 100644 --- a/source/Ox.UI/js/List/Ox.List.js +++ b/source/Ox.UI/js/List/Ox.List.js @@ -71,6 +71,38 @@ Ox.List = function(options, self) { unique: '' }) .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); 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 add item to list (pos, items) -> add items to list at position diff --git a/source/Ox.UI/js/List/Ox.ListItem.js b/source/Ox.UI/js/List/Ox.ListItem.js index b716fbd1..12a3cad4 100644 --- a/source/Ox.UI/js/List/Ox.ListItem.js +++ b/source/Ox.UI/js/List/Ox.ListItem.js @@ -25,7 +25,12 @@ Ox.ListItem = function(options, self) { position: 0, unique: '' }) - .options(options || {}); + .options(options || {}) + .update({ + data: function() { + constructItem(true); + } + }); constructItem(); @@ -42,12 +47,6 @@ Ox.ListItem = function(options, self) { that.setElement($element); } - self.setOption = function(key, value) { - if (key == 'data') { - constructItem(true); - } - }; - return that; }; diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js index eab27f15..c7494c52 100644 --- a/source/Ox.UI/js/List/Ox.TextList.js +++ b/source/Ox.UI/js/List/Ox.TextList.js @@ -69,6 +69,21 @@ Ox.TextList = function(options, self) { sums: [] }) .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') .bindEvent({ 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) { /* self.options.items.push(item); diff --git a/source/Ox.UI/js/List/Ox.TreeList.js b/source/Ox.UI/js/List/Ox.TreeList.js index 6114bfcc..3b292486 100644 --- a/source/Ox.UI/js/List/Ox.TreeList.js +++ b/source/Ox.UI/js/List/Ox.TreeList.js @@ -27,7 +27,20 @@ Ox.TreeList = function(options, self) { selected: [], 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) { 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 gainFocus @*/ diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index 45a464c4..ad72c504 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/source/Ox.UI/js/Map/Ox.ListMap.js @@ -39,6 +39,18 @@ Ox.ListMap = function(options, self) { width: 256 }) .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({ width: self.options.width + 'px', height: self.options.height + 'px' @@ -1119,20 +1131,6 @@ Ox.ListMap = function(options, self) { }); } - /*@ - setOption 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 focusList @*/ diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 8a6b695e..931ce304 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -114,6 +114,48 @@ Ox.Map = function(options, self) { // fixme: width, height }) .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') .bindEvent({ gainfocus: function() { @@ -1402,41 +1444,6 @@ Ox.Map = function(options, self) { 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 addPlace (data) -> add place to places diff --git a/source/Ox.UI/js/Map/Ox.MapImage.js b/source/Ox.UI/js/Map/Ox.MapImage.js index 45a6e8d2..d7ec47df 100644 --- a/source/Ox.UI/js/Map/Ox.MapImage.js +++ b/source/Ox.UI/js/Map/Ox.MapImage.js @@ -25,7 +25,7 @@ Ox.MapImage = function(options, self) { type: 'satellite', width: 640 }) - .options(options || {}) + .options(options || {}); self.src = document.location.protocol + '//maps.google.com/maps/api/staticmap?sensor=false' + @@ -68,10 +68,6 @@ Ox.MapImage = function(options, self) { }).join('') } - self.setOption = function(key, value) { - - }; - return that; }; diff --git a/source/Ox.UI/js/Menu/Ox.MainMenu.js b/source/Ox.UI/js/Menu/Ox.MainMenu.js index fc5eeb31..823fba47 100644 --- a/source/Ox.UI/js/Menu/Ox.MainMenu.js +++ b/source/Ox.UI/js/Menu/Ox.MainMenu.js @@ -120,10 +120,6 @@ Ox.MainMenu = function(options, self) { that.menus[position].remove(); } - self.setOption = function(key, value) { - - }; - that.addMenuAfter = function(id) { }; diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js index 6107be32..f622551c 100644 --- a/source/Ox.UI/js/Menu/Ox.Menu.js +++ b/source/Ox.UI/js/Menu/Ox.Menu.js @@ -45,6 +45,15 @@ Ox.Menu = function(options, self) { size: 'medium' // fixme: remove }) .options(options || {}) + .update({ + items: function() { + renderItems(self.options.items); + }, + selected: function() { + that.$content.find('.OxSelected').removeClass('OxSelected'); + selectItem(self.options.selected); + } + }) .addClass( 'OxMenu Ox' + Ox.toTitleCase(self.options.side) + ' 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 @*/ diff --git a/source/Ox.UI/js/Menu/Ox.MenuButton.js b/source/Ox.UI/js/Menu/Ox.MenuButton.js index 331eadee..7d23ab9b 100644 --- a/source/Ox.UI/js/Menu/Ox.MenuButton.js +++ b/source/Ox.UI/js/Menu/Ox.MenuButton.js @@ -34,6 +34,19 @@ Ox.MenuButton = function(options, self) { width: 'auto' }) .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( 'OxSelect Ox' + Ox.toTitleCase(self.options.style) ) @@ -98,19 +111,6 @@ Ox.MenuButton = function(options, self) { 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 checkItem (id) -> check item with id diff --git a/source/Ox.UI/js/Menu/Ox.MenuItem.js b/source/Ox.UI/js/Menu/Ox.MenuItem.js index 17e307f3..1191b882 100644 --- a/source/Ox.UI/js/Menu/Ox.MenuItem.js +++ b/source/Ox.UI/js/Menu/Ox.MenuItem.js @@ -41,6 +41,18 @@ Ox.MenuItem = function(options, self) { keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard), 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' : '')) /* .attr({ @@ -124,20 +136,6 @@ Ox.MenuItem = function(options, self) { }; } - /*@ - setOption 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() { // toggle id and title }; diff --git a/source/Ox.UI/js/Panel/Ox.CollapsePanel.js b/source/Ox.UI/js/Panel/Ox.CollapsePanel.js index 8327a342..f7f48053 100644 --- a/source/Ox.UI/js/Panel/Ox.CollapsePanel.js +++ b/source/Ox.UI/js/Panel/Ox.CollapsePanel.js @@ -1,7 +1,7 @@ 'use strict'; /*@ -Ox.CollapsePanel CollapsePanel Object +Ox.CollapsePanel CollapsePanel Object ([options[, self]]) -> CollapsePanel Object options Options object collapsed collapsed state @@ -14,7 +14,7 @@ Ox.CollapsePanel CollapsePanel Object Ox.CollapsePanel = function(options, self) { self = self || {}; - var that = Ox.Panel({}, self) + var that = Ox.Element({}, self) .defaults({ animate: true, collapsed: false, @@ -23,7 +23,18 @@ Ox.CollapsePanel = function(options, self) { title: '' }) .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({ orientation: 'horizontal', @@ -106,21 +117,6 @@ Ox.CollapsePanel = function(options, self) { }); } - /*@ - setOption setOption - (key, value) -> 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 Update panel when in collapsed state @*/ diff --git a/source/Ox.UI/js/Panel/Ox.Panel.js b/source/Ox.UI/js/Panel/Ox.Panel.js deleted file mode 100644 index 98d83f48..00000000 --- a/source/Ox.UI/js/Panel/Ox.Panel.js +++ /dev/null @@ -1,15 +0,0 @@ -'use strict'; - -/*@ -Ox.Panel Panel Object - ([options[, self]]) -> Panel Object - options Options object - self shared private variable -@*/ - -Ox.Panel = function(options, self) { - self = self || {}; - var that = Ox.Element({}, self) - .addClass('OxPanel'); - return that; -}; diff --git a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js index 382b76dc..a40050ba 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js @@ -39,7 +39,56 @@ Ox.AnnotationFolder = function(options, self) { widgetSize: 256, 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) { 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 addItem @*/ diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index d384f291..959c39aa 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -46,6 +46,30 @@ Ox.AnnotationPanel = function(options, self) { width: 256 }) .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'); self.editing = false; @@ -458,31 +482,6 @@ Ox.AnnotationPanel = function(options, self) { 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 add item (layer, item) -> add item to layer diff --git a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js index ad8f21e3..0a88a23a 100644 --- a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js @@ -25,6 +25,19 @@ Ox.BlockVideoTimeline = function(options, self) { width: 0 }) .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') .css({ 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; }; diff --git a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js index d3ac4dae..dcf74045 100644 --- a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js @@ -27,6 +27,18 @@ Ox.LargeVideoTimeline = function(options, self) { width: 0 }) .options(options || {}) + .update({ + find: setSubtitles, + 'in': function() { + setPointMarker('in'); + }, + out: function() { + setPointMarker('out'); + }, + position: setPosition, + subtitles: setSubtitles, + width: setWidth + }) .addClass('OxLargeVideoTimeline') .mouseleave(mouseleave) .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; }; diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js index 42fefd63..6aa55403 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js @@ -27,6 +27,39 @@ Ox.SmallVideoTimeline = function(options, self) { width: 256 }) .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') .css(Ox.extend({ 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; }; diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js index 2282c3fb..749d0069 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js @@ -23,6 +23,50 @@ Ox.SmallVideoTimelineImage = function(options, self) { width: 256 }) .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({ position: 'absolute', 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; }; diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 5287d485..8ed169c5 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -65,6 +65,34 @@ Ox.VideoEditor = function(options, self) { width: 0 }) .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({ key_0: toggleMuted, 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 add annotation (layer, item) -> add annotation to layer diff --git a/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js b/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js index ad3ac4ce..f7e1b2b8 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js @@ -27,6 +27,13 @@ Ox.VideoEditorPlayer = function(options, self) { width: 0 }) .options(options || {}) + .update({ + height: setHeight, + points: setMarkers, + position: setPosition, + posterFrame: setMarkers, + width: setWidth + }) .addClass('OxVideoPlayer') .css({ 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 mute @*/ diff --git a/source/Ox.UI/js/Video/Ox.VideoPanel.js b/source/Ox.UI/js/Video/Ox.VideoPanel.js index 4e65cbef..33bd4149 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPanel.js +++ b/source/Ox.UI/js/Video/Ox.VideoPanel.js @@ -59,6 +59,41 @@ Ox.VideoPanel = function(options, self) { width: 0 }) .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({ height: self.options.height + '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? /*@ diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 997351b5..9b23e755 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -142,6 +142,52 @@ Ox.VideoPlayer = function(options, self) { width: 256 }) .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'); Ox.Log('VIDEO', 'VIDEO PLAYER OPTIONS', self.options) @@ -2356,42 +2402,6 @@ Ox.VideoPlayer = function(options, self) { 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 change volume (num) -> change volume diff --git a/source/Ox.UI/js/Video/Ox.VideoPreview.js b/source/Ox.UI/js/Video/Ox.VideoPreview.js index 811fe6fe..3d2b5fcb 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPreview.js +++ b/source/Ox.UI/js/Video/Ox.VideoPreview.js @@ -22,6 +22,22 @@ Ox.VideoPreview = function(options, self) { width: 256 }) .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') .css({ width: self.options.width + 'px', @@ -149,21 +165,6 @@ Ox.VideoPreview = function(options, self) { 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; }; diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js index 09d2132f..7c892d1e 100644 --- a/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js +++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js @@ -47,6 +47,25 @@ Ox.VideoTimelinePanel = function(options, self) { width: 0 }) .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({ height: self.options.height + '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 toggle annotations () -> toggle annotations diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js index 2b259c32..ff125307 100644 --- a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js @@ -37,7 +37,16 @@ Ox.VideoTimelinePlayer = function(options, self) { volume: 1, 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.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 toggle paused () -> toggle paused diff --git a/source/Ox.UI/js/Window/Ox.Dialog.js b/source/Ox.UI/js/Window/Ox.Dialog.js index 30af93bf..c6fac176 100644 --- a/source/Ox.UI/js/Window/Ox.Dialog.js +++ b/source/Ox.UI/js/Window/Ox.Dialog.js @@ -37,6 +37,27 @@ Ox.Dialog = function(options, self) { width: 400 }) .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') .bindEvent({ key_enter: function() { @@ -606,28 +627,6 @@ Ox.Dialog = function(options, self) { 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 close (callback) -> close diff --git a/source/Ox.UI/js/Window/Ox.Tooltip.js b/source/Ox.UI/js/Window/Ox.Tooltip.js index 01384089..dada6f03 100644 --- a/source/Ox.UI/js/Window/Ox.Tooltip.js +++ b/source/Ox.UI/js/Window/Ox.Tooltip.js @@ -31,12 +31,6 @@ Ox.Tooltip = function(options, self) { opacity: 0 }); - self.setOption = function(key, value) { - if (key == 'title') { - - } - }; - /*@ hide hide tooltip () -> hide tooltip