diff --git a/demos/form2/js/form.js b/demos/form2/js/form.js index 807929c7..25376516 100644 --- a/demos/form2/js/form.js +++ b/demos/form2/js/form.js @@ -811,23 +811,23 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() { options: { id: 'debug', inputs: [ - new Ox.Checkbox({ + Ox.Checkbox({ id: 'tttt', width: 16 }), - new Ox.FormElementGroup({ + Ox.FormElementGroup({ elements: [ - new Ox.Input({ + Ox.Input({ //overlap: "right", width: 64 }), - new Ox.Select({ + Ox.Select({ items: [ {id: "items", title: "items"}, - //{}, + {}, {id: "hours", title: "hours"}, {id: "days", title: "days"}, - //{}, + {}, {id: "GB", title: "GB"}, ], overlap: "left", @@ -837,11 +837,12 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() { float: "right", width: 128 }), - new Ox.Select({ + Ox.Select({ items: [ {id: "title", title: "Title"}, {id: "director", title: "Director"}, ], + value: 'title', width: 128 }) ], diff --git a/demos/form2/png/timeline.png b/demos/form2/png/timeline.png new file mode 100644 index 00000000..d8813cc1 Binary files /dev/null and b/demos/form2/png/timeline.png differ diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 8e88182b..c4089e33 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -2205,46 +2205,43 @@ Video position: absolute; } -.OxVideoPlayer .OxResolution { +.OxVideoPlayer .OxSettings { position: absolute; right: 0; bottom: 16px; - background: transparent; // fixme: needed?; display: none; } -.OxVideoPlayer .OxResolution > div { - width: 52px; +.OxVideoPlayer .OxSettings > div { + width: 64px; +} +.OxVideoPlayer .OxSettings > .OxItem { height: 16px; } -.OxVideoPlayer .OxResolution > div:first-child { +.OxVideoPlayer .OxSettings > .OxItem:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; } -.OxVideoPlayer .OxResolution > div > * { +.OxVideoPlayer .OxSettings > .OxItem > * { float: left; } -.OxVideoPlayer .OxResolution > div > div { - width: 36px; +.OxVideoPlayer .OxSettings > .OxItem > div { + width: 48px; height: 14px; padding-top: 2px; font-size: 9px; text-align: right; cursor: default; } -.OxVideoPlayer .OxResolution > div > img { +.OxVideoPlayer .OxSettings > .OxItem > img { width: 9px; height: 9px; padding: 3px 3px 4px 4px; } - - -.OxVideoPlayer .OxResolutionButton { - width: 32px; - height: 12px; - padding: 2px; - font-size: 9px; - text-align: center; - cursor: default; +.OxVideoPlayer .OxSettings > .OxLine { + height: 1px; +} +.OxVideoPlayer .OxSettings > .OxSpace { + height: 0; } .OxVideoPlayer .OxSubtitle { diff --git a/source/Ox.UI/js/Form/Ox.Button.js b/source/Ox.UI/js/Form/Ox.Button.js index 012e2932..c0d0bf11 100644 --- a/source/Ox.UI/js/Form/Ox.Button.js +++ b/source/Ox.UI/js/Form/Ox.Button.js @@ -47,10 +47,9 @@ Ox.Button = function(options, self) { values: [], width: 'auto' }) - .options(options ? Ox.extend(Ox.clone(options), { - // tooltip may be an array, so we can't pass it yet - tooltip: '' - }) : {}) + .options(Ox.isArray(options.tooltip) ? Ox.extend(Ox.clone(options), { + tooltip: options.tooltip[0] + }) : options || {}) .attr({ disabled: self.options.disabled, type: self.options.type == 'text' ? 'button' : 'image' @@ -87,19 +86,20 @@ Ox.Button = function(options, self) { setTitle(); - options.tooltip && that.options({ - tooltip: Ox.isArray(options.tooltip) - ? options.tooltip[self.value] - : options.tooltip - }); + if (Ox.isArray(options.tooltip)) { + self.options.tooltip = options.tooltip; + Ox.print('TOOLTIP', self.options.tooltip); + that.$tooltip.options({ + title: self.options.tooltip[self.value] + }); + } function click() { if (!self.options.disabled) { + that.triggerEvent('click'); if (self.options.values.length || self.options.selectable) { that.toggle(); that.triggerEvent('change', {value: self.options.value}); - } else { - that.triggerEvent('click'); } } } @@ -143,16 +143,16 @@ Ox.Button = function(options, self) { }; that.toggle = function() { - var index; if (self.options.values.length) { - index = 1 - Ox.getPositionById(self.options.values, self.options.value); - self.options.title = self.options.values[index].title; - self.options.value = self.options.values[index].id; + self.value = 1 - Ox.getPositionById(self.options.values, self.options.value); + Ox.print('S:O:', self.options, self.value) + self.options.title = self.options.values[self.value].title; + self.options.value = self.options.values[self.value].id; setTitle(); // fixme: if the tooltip is visible // we also need to call show() that.$tooltip && that.$tooltip.options({ - title: self.options.tooltips[index] + title: self.options.tooltip[self.value] }); } else { self.options.value = !self.options.value; diff --git a/source/Ox.UI/js/Form/Ox.Checkbox.js b/source/Ox.UI/js/Form/Ox.Checkbox.js index e3582ced..fddf7620 100644 --- a/source/Ox.UI/js/Form/Ox.Checkbox.js +++ b/source/Ox.UI/js/Form/Ox.Checkbox.js @@ -113,11 +113,6 @@ Ox.Checkbox = function(options, self) { } }; - // fixme: added for forms, duplicated, checked() shouldn't be neccessary - that.value = function() { - return self.options.checked; - } - return that; }; diff --git a/source/Ox.UI/js/Form/Ox.Form.js b/source/Ox.UI/js/Form/Ox.Form.js index 6f269d1c..33a22f33 100644 --- a/source/Ox.UI/js/Form/Ox.Form.js +++ b/source/Ox.UI/js/Form/Ox.Form.js @@ -45,7 +45,7 @@ Ox.Form = function(options, self) { self.itemIsValid[i] = data.valid; }); } else { - self.itemIsValid[i] = item.value().length > 0; + self.itemIsValid[i] = item.value !== ''; } self.itemIds[i] = item.options('id') || item.id; self.$items[i] = Ox.FormItem({element: item}).appendTo(that); diff --git a/source/Ox.UI/js/Form/Ox.OptionGroup.js b/source/Ox.UI/js/Form/Ox.OptionGroup.js index b3bb0c1a..8af9fe2c 100644 --- a/source/Ox.UI/js/Form/Ox.OptionGroup.js +++ b/source/Ox.UI/js/Form/Ox.OptionGroup.js @@ -37,7 +37,7 @@ Ox.OptionGroup = function(items, min, max, property) { function getNumber() { // returns the number of checked items return items.reduce(function(prev, curr) { - return prev + curr[property]; + return prev + !!curr[property]; }, 0); } diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index 9460af54..c9efbf4f 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -75,13 +75,15 @@ Ox.Select = function(options, self) { Ox.Log('Form', 'Ox.Select', self.options); self.options.items = self.options.items.map(function(item) { - return { + return Ox.isEmpty(item) ? item : { id: item.id || item, title: item.title || item, checked: Ox.toArray(self.options.value).indexOf(item.id || item) > -1 }; }); + Ox.Log('Form', 'S.O.V.', '"'+self.options.value+'"', JSON.stringify(self.options.items)) + self.optionGroup = new Ox.OptionGroup( self.options.items, self.options.min, @@ -91,6 +93,8 @@ Ox.Select = function(options, self) { self.options.items = self.optionGroup.init(); self.options.value = self.optionGroup.value(); + Ox.Log('Form', 'S.O.V.', '"'+self.options.value+'"', JSON.stringify(self.options.items)) + if (self.options.label) { self.$label = Ox.Label({ overlap: 'right', @@ -102,7 +106,6 @@ Ox.Select = function(options, self) { } if (self.options.type == 'text') { - Ox.Log('Form', 'S.O.V.', self.options.value) self.$title = $('
') .addClass('OxTitle') .css({ diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js index 3f8baff2..75b5297a 100644 --- a/source/Ox.UI/js/Menu/Ox.Menu.js +++ b/source/Ox.UI/js/Menu/Ox.Menu.js @@ -288,7 +288,7 @@ Ox.Menu = function(options, self) { that.items = []; items.forEach(function(item) { var position; - if (!Ox.isEmpty(item)) { + if ('id' in item) { that.items.push( Ox.MenuItem(Ox.extend(item, { maxWidth: self.options.maxWidth, diff --git a/source/Ox.UI/js/Panel/Ox.CollapsePanel.js b/source/Ox.UI/js/Panel/Ox.CollapsePanel.js index 01aed3d0..b00bfecf 100644 --- a/source/Ox.UI/js/Panel/Ox.CollapsePanel.js +++ b/source/Ox.UI/js/Panel/Ox.CollapsePanel.js @@ -26,36 +26,42 @@ Ox.CollapsePanel = function(options, self) { title: '' }) .options(options) - .addClass('OxCollapsePanel'), - // fixme: the following should all be self.foo - title = self.options.collapsed ? - [{id: 'expand', title: 'right'}, {id: 'collapse', title: 'down'}] : - [{id: 'collapse', title: 'down'}, {id: 'expand', title: 'right'}], - $titlebar = Ox.Bar({ - orientation: 'horizontal', - size: self.options.size, - }) - .dblclick(dblclickTitlebar) - .appendTo(that), - $switch = Ox.Button({ - style: 'symbol', - title: title, - type: 'image', - }) - .click(toggleCollapsed) - .appendTo($titlebar), - $title = Ox.Element() - .addClass('OxTitle') - .html(self.options.title/*.toUpperCase()*/) - .appendTo($titlebar), - $extras; + .addClass('OxCollapsePanel'); + + self.$titlebar = Ox.Bar({ + orientation: 'horizontal', + size: self.options.size, + }) + .bindEvent({ + doubleclick: doubleclickTitlebar + }) + .appendTo(that); + + self.$button = Ox.Button({ + style: 'symbol', + type: 'image', + value: self.options.collapsed ? 'expand' : 'collapse', + values: [ + {id: 'expand', title: 'right'}, + {id: 'collapse', title: 'down'} + ] + }) + .bindEvent({ + click: toggleCollapsed + }) + .appendTo(self.$titlebar); + + self.$title = Ox.Element() + .addClass('OxTitle') + .html(self.options.title) + .appendTo(self.$titlebar); if (self.options.extras.length) { - $extras = Ox.Element() + self.$extras = Ox.Element() .addClass('OxExtras') - .appendTo($titlebar); + .appendTo(self.$titlebar); self.options.extras.forEach(function($extra) { - $extra.appendTo($extras); + $extra.appendTo(self.$extras); }); } @@ -70,9 +76,9 @@ Ox.CollapsePanel = function(options, self) { }); } - function dblclickTitlebar(e) { + function doubleclickTitlebar(e) { if (!$(e.target).hasClass('OxButton')) { - $switch.trigger('click'); + self.$button.trigger('click'); } } @@ -94,9 +100,9 @@ Ox.CollapsePanel = function(options, self) { @*/ self.setOption = function(key, value) { if (key == 'collapsed') { - + self.$button.trigger('click'); } else if (key == 'title') { - $title.html(self.options.title); + self.$title.html(self.options.title); } }; diff --git a/source/Ox.UI/js/Panel/Ox.TabPanel.js b/source/Ox.UI/js/Panel/Ox.TabPanel.js index 9694867b..2b6e746f 100644 --- a/source/Ox.UI/js/Panel/Ox.TabPanel.js +++ b/source/Ox.UI/js/Panel/Ox.TabPanel.js @@ -17,7 +17,8 @@ Ox.TabPanel = function(options, self) { self.$tabs = Ox.ButtonGroup({ buttons: self.options.tabs, id: 'tabs', - selectable: true + selectable: true, + value: self.selected }) .bindEvent({ change: function(data) { diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 04fb84e3..6c3831d8 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -22,6 +22,7 @@ Ox.VideoEditor = function(options, self) { censored: [], cuts: [], duration: 0, + enableSubtitles: false, find: '', fps: 25, getFrameURL: null, @@ -181,6 +182,7 @@ Ox.VideoEditor = function(options, self) { duration: self.options.duration, enableMouse: true, enablePosition: true, + enableSubtitles: self.options.enableSubtitles, externalControls: true, find: self.options.find, height: self.sizes.player[i].height, @@ -221,6 +223,9 @@ Ox.VideoEditor = function(options, self) { that.triggerEvent('resolution', data); }, size: toggleSize, + subtitles: function(data) { + that.triggerEvent('subtitles', data); + }, volume: function(data) { that.triggerEvent('volume', data); } diff --git a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js index 7898d331..8710b334 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js @@ -19,6 +19,7 @@ Ox.VideoPanelPlayer = function(options, self) { annotationsSize: 256, censored: [], duration: 0, + enableSubtitles: false, find: '', fullscreen: false, height: 0, @@ -64,11 +65,12 @@ Ox.VideoPanelPlayer = function(options, self) { self.$video = Ox.VideoPlayer({ censored: self.options.censored, controlsTop: ['fullscreen', 'title', 'find'], - controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'resolution'], + controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'settings'], enableFind: true, enableKeyboard: true, enableMouse: true, enablePosition: true, + enableSubtitles: self.options.enableSubtitles, enableTimeline: true, find: self.options.find, fullscreen: self.options.fullscreen, @@ -111,6 +113,9 @@ Ox.VideoPanelPlayer = function(options, self) { scale: function(data) { that.triggerEvent('scale', data); }, + subtitles: function(data) { + that.triggerEvent('subtitles', data); + }, volume: function(data) { that.triggerEvent('volume', data); } diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 63668927..71d2d5b0 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -681,14 +681,17 @@ Video background-image: -o-linear-gradient(top, rgba(192, 192, 192, 0.75), rgba(255, 255, 255, 0.75)); background-image: -webkit-linear-gradient(top, rgba(192, 192, 192, 0.75), rgba(255, 255, 255, 0.75)); } -.OxThemeClassic .OxVideoPlayer .OxResolution > div { +.OxThemeClassic .OxVideoPlayer .OxSettings > div { background: rgba(224, 224, 224, 0.5); } -.OxThemeClassic .OxVideoPlayer .OxResolution > div.OxSelected { +.OxThemeClassic .OxVideoPlayer .OxSettings > div.OxSelected { background-image: -moz-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5)); background-image: -o-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5)); background-image: -webkit-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5)); } +.OxThemeClassic .OxVideoPlayer .OxSettings > div.OxLine { + background-color: rgba(192, 192, 192, 0.5); +} .OxThemeClassic .OxVideoPlayer .OxVolume { background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5)); diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 959e6c83..a6119700 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -682,14 +682,17 @@ Video background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(64, 64, 64, 0.75)); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(64, 64, 64, 0.75)); } -.OxThemeModern .OxVideoPlayer .OxResolution > div { - background: rgba(32, 32, 32, 0.5); +.OxThemeModern .OxVideoPlayer .OxSettings > div { + background-color: rgba(32, 32, 32, 0.5); } -.OxThemeModern .OxVideoPlayer .OxResolution > div.OxSelected { +.OxThemeModern .OxVideoPlayer .OxSettings > div.OxSelected { background-image: -moz-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5)); background-image: -o-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5)); background-image: -webkit-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5)); } +.OxThemeModern .OxVideoPlayer .OxSettings > div.OxLine { + background-color: rgba(64, 64, 64, 0.5); +} .OxThemeModern .OxVideoPlayer .OxVolume { background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5)); background-image: -o-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));