use new form element syntax

This commit is contained in:
rolux 2011-12-22 12:54:20 +05:30
parent d80019a17c
commit 215f1f6c1b
11 changed files with 56 additions and 90 deletions

View file

@ -51,12 +51,10 @@ Ox.Progressbar = function(options, self) {
if (self.options.showPauseButton) { if (self.options.showPauseButton) {
self.$pauseButton = Ox.Button({ self.$pauseButton = Ox.Button({
style: 'symbol', style: 'symbol',
title: [
{id: 'pause', title: 'pause', selected: !self.options.paused},
{id: 'resume', title: 'redo', selected: self.options.paused}
],
tooltip: ['Pause', 'Resume'], tooltip: ['Pause', 'Resume'],
type: 'image' type: 'image',
value: !self.options.paused ? 'pause' : 'resume',
values: ['pause', 'resume']
}) })
.bindEvent({ .bindEvent({
click: togglePaused click: togglePaused

View file

@ -248,7 +248,7 @@ Ox.Element = function(options, self) {
if (self.options.tooltip) { if (self.options.tooltip) {
if (Ox.isString(self.options.tooltip)) { if (Ox.isString(self.options.tooltip)) {
that.$tooltip = Ox.Tooltip({ that.$tooltip = Ox.Tooltip({
title: self.options.tooltip, title: self.options.tooltip
}); });
that.bind({ that.bind({
mouseenter: mouseenter mouseenter: mouseenter

View file

@ -8,7 +8,7 @@ Ox.ItemInput <f:Ox.Element> ItemInput Object
(options) -> <f> ItemInput Object (options) -> <f> ItemInput Object
(options, self) -> <f> ItemInput Object (options, self) -> <f> ItemInput Object
options <o> Options object options <o> Options object
type <s|textarea> can be textare type <s|textarea> can be textarea
value <s> default value value <s> default value
height <n|300> height height <n|300> height
width <n|100> width width <n|100> width

View file

@ -564,8 +564,6 @@ Ox.Map = function(options, self) {
addPlaceToMap(); addPlaceToMap();
} else if (title == 'Add Place') { } else if (title == 'Add Place') {
addPlaceToPlaces(); addPlaceToPlaces();
} else if (title == 'Remove Place') {
} }
} }

View file

@ -17,7 +17,7 @@ Ox.TabPanel = function(options, self) {
self.$tabs = Ox.ButtonGroup({ self.$tabs = Ox.ButtonGroup({
buttons: self.options.tabs, buttons: self.options.tabs,
id: 'tabs', id: 'tabs',
selectable: true, selectable: true
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {

View file

@ -493,9 +493,9 @@ Ox.VideoEditor = function(options, self) {
.css({float: 'left'}) .css({float: 'left'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
self.$goToPosterButton.toggleDisabled(); self.$goToPosterButton.toggleOption('disabled');
self.$setPosterButton.toggleDisabled(); self.$setPosterButton.toggleOption('disabled');
self.$unlockPosterButton.toggleTitle(); self.$unlockPosterButton.toggle();
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$videobar);
@ -512,7 +512,7 @@ Ox.VideoEditor = function(options, self) {
.css({float: 'left'}) .css({float: 'left'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
self.$setPosterButton.toggleDisabled(); self.$setPosterButton.toggleOption('disabled');
} }
}) })
.appendTo(self.$videobar); .appendTo(self.$videobar);
@ -632,9 +632,6 @@ Ox.VideoEditor = function(options, self) {
}) })
.css({float: 'left'}) .css({float: 'left'})
.appendTo(self.$annotationsbar); .appendTo(self.$annotationsbar);
self.$annotationsMenuButton.find('input').attr({
src: Ox.UI.getImageURL('symbolSet')
});
that.$element = Ox.SplitPanel({ that.$element = Ox.SplitPanel({
elements: [ elements: [

View file

@ -126,12 +126,9 @@ Ox.VideoEditorPlayer = function(options, self) {
// fixme: $buttonPlay etc. ? // fixme: $buttonPlay etc. ?
self.$playButton = Ox.Button({ self.$playButton = Ox.Button({
id: self.options.id + 'Play', id: self.options.id + 'Play',
title: [
{id: 'play', title: 'play'},
{id: 'pause', title: 'pause'}
],
tooltip: ['Play', 'Pause'], tooltip: ['Play', 'Pause'],
type: 'image' type: 'image',
values: ['play', 'pause']
}) })
.bindEvent('click', togglePlay) .bindEvent('click', togglePlay)
.appendTo(self.$controls); .appendTo(self.$controls);
@ -147,26 +144,21 @@ Ox.VideoEditorPlayer = function(options, self) {
.appendTo(self.$controls); .appendTo(self.$controls);
self.$muteButton = Ox.Button({ self.$muteButton = Ox.Button({
id: self.options.id + 'Mute', id: self.options.id + 'Mute',
title: [
{id: 'mute', title: 'mute'},
{id: 'unmute', title: 'unmute'}
],
tooltip: ['Mute', 'Unmute'], tooltip: ['Mute', 'Unmute'],
type: 'image' type: 'image',
values: ['mute', 'unmute']
}) })
.bindEvent('click', toggleMute) .bindEvent('click', toggleMute)
.appendTo(self.$controls); .appendTo(self.$controls);
self.$sizeButton = Ox.Button({ self.$sizeButton = Ox.Button({
id: self.options.id + 'Size', id: self.options.id + 'Size',
title: self.options.size == 'small' ? [
{id: 'large', title: 'grow'},
{id: 'small', title: 'shrink'}
] : [
{id: 'small', title: 'shrink'},
{id: 'large', title: 'grow'}
],
tooltip: ['Larger', 'Smaller'], tooltip: ['Larger', 'Smaller'],
type: 'image' type: 'image',
value: self.options.size,
values: [
{id: 'small', title: 'grow'},
{id: 'large', title: 'shrink'}
]
}) })
.bindEvent('click', toggleSize) .bindEvent('click', toggleSize)
.appendTo(self.$controls); .appendTo(self.$controls);
@ -254,7 +246,7 @@ Ox.VideoEditorPlayer = function(options, self) {
} }
function paused() { function paused() {
self.$playButton.toggleTitle(); self.$playButton.toggle();
} }
function playing(data) { function playing(data) {
@ -412,7 +404,7 @@ Ox.VideoEditorPlayer = function(options, self) {
playInToOut <f> playInToOut playInToOut <f> playInToOut
@*/ @*/
that.playInToOut = function() { that.playInToOut = function() {
self.$video.paused() && self.$playButton.toggleTitle(); self.$video.paused() && self.$playButton.toggle();
self.$video.playInToOut(); self.$video.playInToOut();
return that; return that;
}; };

View file

@ -536,12 +536,10 @@ Ox.VideoPlayer = function(options, self) {
self.$fullscreenButton = Ox.Button({ self.$fullscreenButton = Ox.Button({
style: 'symbol', style: 'symbol',
title: [
{id: 'grow', title: 'grow', selected: !self.options.fullscreen},
{id: 'shrink', title: 'shrink', selected: self.options.fullscreen}
],
tooltip: ['Enter Fullscreen', 'Exit Fullscreen'], tooltip: ['Enter Fullscreen', 'Exit Fullscreen'],
type: 'image' type: 'image',
value: self.options.fullscreen ? 'shrink' : 'grow'
values: ['grow', 'shrink']
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -567,12 +565,10 @@ Ox.VideoPlayer = function(options, self) {
self.$muteButton = Ox.Button({ self.$muteButton = Ox.Button({
style: 'symbol', style: 'symbol',
title: [
{id: 'mute', title: 'mute', selected: !self.options.muted},
{id: 'unmute', title: 'unmute', selected: self.options.muted}
],
tooltip: ['Mute', 'Unmute'], tooltip: ['Mute', 'Unmute'],
type: 'image' type: 'image',
value: self.options.muted ? 'unmute' : 'mute',
values: ['mute', 'unmute']
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -601,12 +597,10 @@ Ox.VideoPlayer = function(options, self) {
self.$playButton = Ox.Button({ self.$playButton = Ox.Button({
style: 'symbol', style: 'symbol',
// FIXME: this is retarded, fix Ox.Button // FIXME: this is retarded, fix Ox.Button
title: [
{id: 'play', title: 'play', selected: self.options.paused},
{id: 'pause', title: 'pause', selected: !self.options.paused}
],
tooltip: ['Play', 'Pause'], tooltip: ['Play', 'Pause'],
type: 'image' type: 'image',
value: self.options.paused ? 'play' : 'pause',
values: ['play', 'pause']
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -729,9 +723,9 @@ Ox.VideoPlayer = function(options, self) {
self.$resolution.children().each(function() { self.$resolution.children().each(function() {
var $this = $(this); var $this = $(this);
$this.children()[1].src = $this.children()[1].src =
$this.data('resolution') == resolution ? $this.data('resolution') == resolution
Ox.UI.getImageURL('symbolCheck') : ? Ox.UI.getImageURL('symbolCheck')
Ox.UI.PATH + 'png/transparent.png' : Ox.UI.PATH + 'png/transparent.png'
}); });
self.$resolutionButton.html(resolution + 'p'); self.$resolutionButton.html(resolution + 'p');
self.options.resolution = resolution self.options.resolution = resolution
@ -770,12 +764,10 @@ Ox.VideoPlayer = function(options, self) {
self.$scaleButton = Ox.Button({ self.$scaleButton = Ox.Button({
style: 'symbol', style: 'symbol',
title: [
{id: 'fill', title: 'fill', selected: !self.options.scaleToFill},
{id: 'fit', title: 'fit', selected: self.options.scaleToFill}
],
tooltip: ['Scale to Fill', 'Scale to Fit'], tooltip: ['Scale to Fill', 'Scale to Fit'],
type: 'image' type: 'image',
value: self.options.scaleToFill ? 'fit' : 'fill',
values: ['fill', 'fit']
}) })
.bindEvent('click', function() { .bindEvent('click', function() {
toggleScale('button'); toggleScale('button');
@ -799,12 +791,10 @@ Ox.VideoPlayer = function(options, self) {
self.$sizeButton = Ox.Button({ self.$sizeButton = Ox.Button({
style: 'symbol', style: 'symbol',
title: [
{id: 'grow', title: 'grow', selected: !self.options.sizeIsLarge},
{id: 'shrink', title: 'shrink', selected: self.options.sizeIsLarge}
],
tooltip: ['Larger', 'Smaller'], tooltip: ['Larger', 'Smaller'],
type: 'image' type: 'image',
value: self.options.sizeIsLarge ? 'shrink' : 'grow',
values: ['grow', 'shrink']
}) })
.bindEvent('click', toggleSize) .bindEvent('click', toggleSize)
.appendTo(self['$controls' + titleCase]); .appendTo(self['$controls' + titleCase]);
@ -1002,12 +992,10 @@ Ox.VideoPlayer = function(options, self) {
self.$muteButton = Ox.Button({ self.$muteButton = Ox.Button({
style: 'symbol', style: 'symbol',
title: [
{id: 'mute', title: 'mute', selected: !self.options.muted},
{id: 'unmute', title: 'unmute', selected: self.options.muted}
],
tooltip: ['Mute', 'Unmute'], tooltip: ['Mute', 'Unmute'],
type: 'image' type: 'image'
value: self.options.muted ? 'unmute' : 'mute',
values: ['mute', 'unmute']
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -1601,9 +1589,7 @@ Ox.VideoPlayer = function(options, self) {
} else if (self.options.paused && self.playOnLoad) { } else if (self.options.paused && self.playOnLoad) {
togglePaused('button'); togglePaused('button');
} }
self.$playButton && self.$playButton.options({ self.$playButton && self.$playButton.options({disabled: false});
disabled: false
});
hideLoadingIcon(); hideLoadingIcon();
if (self.options.showIcon || self.options.showIconOnLoad) { if (self.options.showIcon || self.options.showIconOnLoad) {
@ -1803,9 +1789,7 @@ Ox.VideoPlayer = function(options, self) {
self.loadedMetadata = false; self.loadedMetadata = false;
showLoadingIcon(); showLoadingIcon();
self.$video.src(self.options.video[self.options.resolution]); self.$video.src(self.options.video[self.options.resolution]);
self.$playButton && self.$playButton.options({ self.$playButton && self.$playButton.options({disabled: true});
disabled: true
});
that.triggerEvent('resolution', { that.triggerEvent('resolution', {
resolution: self.options.resolution resolution: self.options.resolution
}); });
@ -2119,7 +2103,7 @@ Ox.VideoPlayer = function(options, self) {
}); });
} }
if (self.$fullscreenButton && from != 'button') { if (self.$fullscreenButton && from != 'button') {
self.$fullscreenButton.toggleTitle(); self.$fullscreenButton.toggle();
} }
that.triggerEvent('fullscreen', { that.triggerEvent('fullscreen', {
fullscreen: self.options.fullscreen fullscreen: self.options.fullscreen
@ -2135,7 +2119,7 @@ Ox.VideoPlayer = function(options, self) {
self.$video.volume(1); self.$video.volume(1);
} }
if (self.$muteButton && from != 'button') { if (self.$muteButton && from != 'button') {
self.$muteButton.toggleTitle(); self.$muteButton.toggle();
} }
self.$volumeButton && self.$volumeButton.attr({ self.$volumeButton && self.$volumeButton.attr({
src: getVolumeImageURL() src: getVolumeImageURL()
@ -2182,7 +2166,7 @@ Ox.VideoPlayer = function(options, self) {
self.options.showMarkers && hideMarkers(); self.options.showMarkers && hideMarkers();
} }
if (self.$playButton && from != 'button') { if (self.$playButton && from != 'button') {
self.$playButton.toggleTitle(); self.$playButton.toggle();
} }
that.triggerEvent('paused', { that.triggerEvent('paused', {
paused: self.options.paused paused: self.options.paused
@ -2206,7 +2190,7 @@ Ox.VideoPlayer = function(options, self) {
self.$video.animate(self.videoCSS, 250); self.$video.animate(self.videoCSS, 250);
self.$poster && self.$poster.animate(self.videoCSS, 250); self.$poster && self.$poster.animate(self.videoCSS, 250);
if (self.$scaleButton && from != 'button') { if (self.$scaleButton && from != 'button') {
self.$scaleButton.toggleTitle(); self.$scaleButton.toggle();
} }
if (self.$posterMarker) { if (self.$posterMarker) {
self.posterMarkerCSS = getPosterMarkerCSS(); self.posterMarkerCSS = getPosterMarkerCSS();

View file

@ -95,11 +95,8 @@ Ox.Dialog = function(options, self) {
if (self.options.maximizeButton) { if (self.options.maximizeButton) {
self.$maximizeButton = Ox.Button({ self.$maximizeButton = Ox.Button({
title: [ type: 'image',
{id: 'add', title: 'add'}, values: ['add', 'remove']
{id: 'remove', title: 'remove'}
],
type: 'image'
}) })
.css({ .css({
top: '4px', top: '4px',
@ -344,7 +341,7 @@ Ox.Dialog = function(options, self) {
}; };
decenter(); decenter();
if (self.maximized) { if (self.maximized) {
self.$maximizeButton.toggleTitle(); self.$maximizeButton.toggle();
self.maximized = false; self.maximized = false;
} }
that.wrap(self.$box); that.wrap(self.$box);
@ -658,7 +655,7 @@ Ox.Dialog = function(options, self) {
callback && callback(); callback && callback();
}); });
if (self.maximized) { if (self.maximized) {
self.$maximizeButton.toggleTitle(); self.$maximizeButton.toggle();
self.maximized = false; self.maximized = false;
} }
if (self.options.focus) { if (self.options.focus) {

View file

@ -716,10 +716,10 @@ Miscellaneous
================================================================================ ================================================================================
*/ */
.OxThemeClassic .OxSelectable.OxSelected { .OxThemeClassic .OxSelectableElement.OxSelected {
background: rgb(224, 224, 224); background: rgb(224, 224, 224);
} }
.OxThemeClassic .OxSelectable.OxSelected.OxFocus { .OxThemeClassic .OxSelectableElement.OxSelected.OxFocus {
background: rgb(208, 208, 208); background: rgb(208, 208, 208);
} }

View file

@ -741,10 +741,10 @@ Miscellaneous
================================================================================ ================================================================================
*/ */
.OxThemeModern .OxSelectable.OxSelected { .OxThemeModern .OxSelectableElement.OxSelected {
background: rgb(48, 48, 48); background: rgb(48, 48, 48);
} }
.OxThemeModern .OxSelectable.OxSelected.OxFocus { .OxThemeModern .OxSelectableElement.OxSelected.OxFocus {
background: rgb(64, 64, 64); background: rgb(64, 64, 64);
} }