0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

self.setOption ~> that.update

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

19
source/Ox.UI/js/Bar/Ox.Progressbar.js
View file

@ -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 <f> Returns time elapsed / remaining
() -> <o> status

15
source/Ox.UI/js/Bar/Ox.Resizebar.js
View file

@ -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;
};

66
source/Ox.UI/js/Calendar/Ox.Calendar.js
View file

@ -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 <f> addEvent
(event) -> <o> object

20
source/Ox.UI/js/Calendar/Ox.ListCalendar.js
View file

@ -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;
};

13
source/Ox.UI/js/Code/Ox.DocPanel.js
View file

@ -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;
};

11
source/Ox.UI/js/Code/Ox.ExamplePanel.js
View file

@ -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;
};

8
source/Ox.UI/js/Core/Ox.App.js
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
() -> <o> get options

4
source/Ox.UI/js/Core/Ox.Element.js
View file

@ -389,10 +389,10 @@ Ox.Element = function(options, self) {
() -> <obj> all options
(key) -> <any> the value of option[key]
(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
({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
# Arguments
key <str> the name of the option

4
source/Ox.UI/js/Core/Ox.JQueryElement.js
View file

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

46
source/Ox.UI/js/Form/Ox.ArrayEditable.js
View file

@ -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 <f> addItem
(position, item) -> <o> add item at position

14
source/Ox.UI/js/Form/Ox.ArrayInput.js
View file

@ -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 <f> setErrors
(values) -> <u> set erros

42
source/Ox.UI/js/Form/Ox.Button.js
View file

@ -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 <f> toggle
() -> <o> toggle button

31
source/Ox.UI/js/Form/Ox.ButtonGroup.js
View file

@ -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;
};

33
source/Ox.UI/js/Form/Ox.Checkbox.js
View file

@ -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;
};

51
source/Ox.UI/js/Form/Ox.Editable.js
View file

@ -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);

18
source/Ox.UI/js/Form/Ox.FileButton.js
View file

@ -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 <f> blurButton
@*/

9
source/Ox.UI/js/Form/Ox.FormElementGroup.js
View file

@ -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 <f> replaceElement
(pos, element) -> <u> replcae element at position

85
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -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 <f> blurInput
@*/

9
source/Ox.UI/js/Form/Ox.InputGroup.js
View file

@ -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;

75
source/Ox.UI/js/Form/Ox.Label.js
View file

@ -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;

11
source/Ox.UI/js/Form/Ox.ObjectArrayInput.js
View file

@ -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;
};

11
source/Ox.UI/js/Form/Ox.ObjectInput.js
View file

@ -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;
};

15
source/Ox.UI/js/Form/Ox.Range.js
View file

@ -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;
};

51
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -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 <f> disableItem
@*/

45
source/Ox.UI/js/Form/Ox.SelectInput.js
View file

@ -1,5 +1,5 @@
'use strict';
//FIXME: does not work without options
/*@
Ox.SelectInput <f:Ox.FormElementGroup> Select Input
([options[, self]]) -> <o> 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 <f> get/set value
() -> value get value

13
source/Ox.UI/js/List/Ox.Chart.js
View file

@ -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;
};

29
source/Ox.UI/js/List/Ox.IconList.js
View file

@ -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 <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
() -> <o> the list

48
source/Ox.UI/js/List/Ox.InfoList.js
View file

@ -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 <f> closePreview
closePreview <f> closePreview
@*/
that.closePreview = function() {
that.$element.closePreview();

65
source/Ox.UI/js/List/Ox.List.js
View file

@ -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 <f> add item to list
(pos, items) -> <u> add items to list at position

13
source/Ox.UI/js/List/Ox.ListItem.js
View file

@ -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;
};

29
source/Ox.UI/js/List/Ox.TextList.js
View file

@ -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);

27
source/Ox.UI/js/List/Ox.TreeList.js
View file

@ -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 <f> gainFocus
@*/

26
source/Ox.UI/js/Map/Ox.ListMap.js
View file

@ -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 <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
@*/

77
source/Ox.UI/js/Map/Ox.Map.js
View file

@ -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 <f> addPlace
(data) -> <u> add place to places

6
source/Ox.UI/js/Map/Ox.MapImage.js
View file

@ -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;
};

4
source/Ox.UI/js/Menu/Ox.MainMenu.js
View file

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

18
source/Ox.UI/js/Menu/Ox.Menu.js
View file

@ -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 <f>
@*/

26
source/Ox.UI/js/Menu/Ox.MenuButton.js
View file

@ -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 <f> checkItem
(id) -> <o> check item with id

26
source/Ox.UI/js/Menu/Ox.MenuItem.js
View file

@ -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 <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() {
// toggle id and title
};

32
source/Ox.UI/js/Panel/Ox.CollapsePanel.js
View file

@ -1,7 +1,7 @@
'use strict';
/*@
Ox.CollapsePanel <f:Ox.Panel> CollapsePanel Object
Ox.CollapsePanel <f:Ox.Element> CollapsePanel Object
([options[, self]]) -> <o> CollapsePanel Object
options <o> Options object
collapsed <b|false> collapsed state
@ -14,7 +14,7 @@ Ox.CollapsePanel <f:Ox.Panel> 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 <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
@*/

15
source/Ox.UI/js/Panel/Ox.Panel.js
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;
};

101
source/Ox.UI/js/Video/Ox.AnnotationFolder.js
View file

@ -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 <f> addItem
@*/

49
source/Ox.UI/js/Video/Ox.AnnotationPanel.js
View file

@ -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 <f> add item
(layer, item) -> <o> add item to layer

29
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -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;
};

26
source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
View file

@ -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;
};

59
source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
View file

@ -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;
};

78
source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
View file

@ -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;
};

48
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -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 <f> add annotation
(layer, item) -> <o> add annotation to layer

21
source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js
View file

@ -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 <f> mute
@*/

60
source/Ox.UI/js/Video/Ox.VideoPanel.js
View file

@ -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?
/*@

82
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -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 <f> change volume
(num) -> <o> change volume

31
source/Ox.UI/js/Video/Ox.VideoPreview.js
View file

@ -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;
};

35
source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js
View file

@ -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 <f> toggle annotations
() -> <o> toggle annotations

24
source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js
View file

@ -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 <f> toggle paused
() -> <o> toggle paused

43
source/Ox.UI/js/Window/Ox.Dialog.js
View file

@ -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 <f> close
(callback) -> <o> close

6
source/Ox.UI/js/Window/Ox.Tooltip.js
View file

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