use new form element syntax
This commit is contained in:
parent
d80019a17c
commit
215f1f6c1b
11 changed files with 56 additions and 90 deletions
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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') {
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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: [
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue