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