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

use new form element syntax, continued

Browse source
This commit is contained in:
rlx 2011-12-22 15:47:46 +00:00
parent e47305c93f
commit 02f53a57c1
15 changed files with 107 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
demos/form2/js/form.js
View file

@ -811,23 +811,23 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
options: { options: {
id: 'debug', id: 'debug',
inputs: [ inputs: [
new Ox.Checkbox({ Ox.Checkbox({
id: 'tttt', id: 'tttt',
width: 16 width: 16
}), }),
new Ox.FormElementGroup({ Ox.FormElementGroup({
elements: [ elements: [
new Ox.Input({ Ox.Input({
//overlap: "right", //overlap: "right",
width: 64 width: 64
}), }),
new Ox.Select({ Ox.Select({
items: [ items: [
{id: "items", title: "items"}, {id: "items", title: "items"},
//{}, {},
{id: "hours", title: "hours"}, {id: "hours", title: "hours"},
{id: "days", title: "days"}, {id: "days", title: "days"},
//{}, {},
{id: "GB", title: "GB"}, {id: "GB", title: "GB"},
], ],
overlap: "left", overlap: "left",
@ -837,11 +837,12 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
float: "right", float: "right",
width: 128 width: 128
}), }),
new Ox.Select({ Ox.Select({
items: [ items: [
{id: "title", title: "Title"}, {id: "title", title: "Title"},
{id: "director", title: "Director"}, {id: "director", title: "Director"},
], ],
value: 'title',
width: 128 width: 128
}) })
], ],

BIN
demos/form2/png/timeline.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

33
source/Ox.UI/css/Ox.UI.css
View file

@ -2205,46 +2205,43 @@ Video
position: absolute; position: absolute;
} }
.OxVideoPlayer .OxResolution { .OxVideoPlayer .OxSettings {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 16px; bottom: 16px;
background: transparent; // fixme: needed?;
display: none; display: none;
} }
.OxVideoPlayer .OxResolution > div { .OxVideoPlayer .OxSettings > div {
width: 52px; width: 64px;
}
.OxVideoPlayer .OxSettings > .OxItem {
height: 16px; height: 16px;
} }
.OxVideoPlayer .OxResolution > div:first-child { .OxVideoPlayer .OxSettings > .OxItem:first-child {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
} }
.OxVideoPlayer .OxResolution > div > * { .OxVideoPlayer .OxSettings > .OxItem > * {
float: left; float: left;
} }
.OxVideoPlayer .OxResolution > div > div { .OxVideoPlayer .OxSettings > .OxItem > div {
width: 36px; width: 48px;
height: 14px; height: 14px;
padding-top: 2px; padding-top: 2px;
font-size: 9px; font-size: 9px;
text-align: right; text-align: right;
cursor: default; cursor: default;
} }
.OxVideoPlayer .OxResolution > div > img { .OxVideoPlayer .OxSettings > .OxItem > img {
width: 9px; width: 9px;
height: 9px; height: 9px;
padding: 3px 3px 4px 4px; padding: 3px 3px 4px 4px;
} }
.OxVideoPlayer .OxSettings > .OxLine {
height: 1px;
.OxVideoPlayer .OxResolutionButton { }
width: 32px; .OxVideoPlayer .OxSettings > .OxSpace {
height: 12px; height: 0;
padding: 2px;
font-size: 9px;
text-align: center;
cursor: default;
} }
.OxVideoPlayer .OxSubtitle { .OxVideoPlayer .OxSubtitle {

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

@ -47,10 +47,9 @@ Ox.Button = function(options, self) {
values: [], values: [],
width: 'auto' width: 'auto'
}) })
.options(options ? Ox.extend(Ox.clone(options), { .options(Ox.isArray(options.tooltip) ? Ox.extend(Ox.clone(options), {
// tooltip may be an array, so we can't pass it yet tooltip: options.tooltip[0]
tooltip: '' }) : options || {})
}) : {})
.attr({ .attr({
disabled: self.options.disabled, disabled: self.options.disabled,
type: self.options.type == 'text' ? 'button' : 'image' type: self.options.type == 'text' ? 'button' : 'image'
@ -87,19 +86,20 @@ Ox.Button = function(options, self) {
setTitle(); setTitle();
options.tooltip && that.options({ if (Ox.isArray(options.tooltip)) {
tooltip: Ox.isArray(options.tooltip) self.options.tooltip = options.tooltip;
? options.tooltip[self.value] Ox.print('TOOLTIP', self.options.tooltip);
: options.tooltip that.$tooltip.options({
title: self.options.tooltip[self.value]
}); });
}
function click() { function click() {
if (!self.options.disabled) { if (!self.options.disabled) {
that.triggerEvent('click');
if (self.options.values.length || self.options.selectable) { if (self.options.values.length || self.options.selectable) {
that.toggle(); that.toggle();
that.triggerEvent('change', {value: self.options.value}); that.triggerEvent('change', {value: self.options.value});
} else {
that.triggerEvent('click');
} }
} }
} }
@ -143,16 +143,16 @@ Ox.Button = function(options, self) {
}; };
that.toggle = function() { that.toggle = function() {
var index;
if (self.options.values.length) { if (self.options.values.length) {
index = 1 - Ox.getPositionById(self.options.values, self.options.value); self.value = 1 - Ox.getPositionById(self.options.values, self.options.value);
self.options.title = self.options.values[index].title; Ox.print('S:O:', self.options, self.value)
self.options.value = self.options.values[index].id; self.options.title = self.options.values[self.value].title;
self.options.value = self.options.values[self.value].id;
setTitle(); setTitle();
// fixme: if the tooltip is visible // fixme: if the tooltip is visible
// we also need to call show() // we also need to call show()
that.$tooltip && that.$tooltip.options({ that.$tooltip && that.$tooltip.options({
title: self.options.tooltips[index] title: self.options.tooltip[self.value]
}); });
} else { } else {
self.options.value = !self.options.value; self.options.value = !self.options.value;

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

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

2
source/Ox.UI/js/Form/Ox.Form.js
View file

@ -45,7 +45,7 @@ Ox.Form = function(options, self) {
self.itemIsValid[i] = data.valid; self.itemIsValid[i] = data.valid;
}); });
} else { } else {
self.itemIsValid[i] = item.value().length > 0; self.itemIsValid[i] = item.value !== '';
} }
self.itemIds[i] = item.options('id') || item.id; self.itemIds[i] = item.options('id') || item.id;
self.$items[i] = Ox.FormItem({element: item}).appendTo(that); self.$items[i] = Ox.FormItem({element: item}).appendTo(that);

2
source/Ox.UI/js/Form/Ox.OptionGroup.js
View file

@ -37,7 +37,7 @@ Ox.OptionGroup = function(items, min, max, property) {
function getNumber() { function getNumber() {
// returns the number of checked items // returns the number of checked items
return items.reduce(function(prev, curr) { return items.reduce(function(prev, curr) {
return prev + curr[property]; return prev + !!curr[property];
}, 0); }, 0);
} }

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

@ -75,13 +75,15 @@ Ox.Select = function(options, self) {
Ox.Log('Form', 'Ox.Select', self.options); Ox.Log('Form', 'Ox.Select', self.options);
self.options.items = self.options.items.map(function(item) { self.options.items = self.options.items.map(function(item) {
return { return Ox.isEmpty(item) ? item : {
id: item.id || item, id: item.id || item,
title: item.title || item, title: item.title || item,
checked: Ox.toArray(self.options.value).indexOf(item.id || item) > -1 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.optionGroup = new Ox.OptionGroup(
self.options.items, self.options.items,
self.options.min, self.options.min,
@ -91,6 +93,8 @@ Ox.Select = function(options, self) {
self.options.items = self.optionGroup.init(); self.options.items = self.optionGroup.init();
self.options.value = self.optionGroup.value(); self.options.value = self.optionGroup.value();
Ox.Log('Form', 'S.O.V.', '"'+self.options.value+'"', JSON.stringify(self.options.items))
if (self.options.label) { if (self.options.label) {
self.$label = Ox.Label({ self.$label = Ox.Label({
overlap: 'right', overlap: 'right',
@ -102,7 +106,6 @@ Ox.Select = function(options, self) {
} }
if (self.options.type == 'text') { if (self.options.type == 'text') {
Ox.Log('Form', 'S.O.V.', self.options.value)
self.$title = $('<div>') self.$title = $('<div>')
.addClass('OxTitle') .addClass('OxTitle')
.css({ .css({

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

@ -288,7 +288,7 @@ Ox.Menu = function(options, self) {
that.items = []; that.items = [];
items.forEach(function(item) { items.forEach(function(item) {
var position; var position;
if (!Ox.isEmpty(item)) { if ('id' in item) {
that.items.push( that.items.push(
Ox.MenuItem(Ox.extend(item, { Ox.MenuItem(Ox.extend(item, {
maxWidth: self.options.maxWidth, maxWidth: self.options.maxWidth,

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

@ -26,36 +26,42 @@ Ox.CollapsePanel = function(options, self) {
title: '' title: ''
}) })
.options(options) .options(options)
.addClass('OxCollapsePanel'), .addClass('OxCollapsePanel');
// fixme: the following should all be self.foo
title = self.options.collapsed ? self.$titlebar = Ox.Bar({
[{id: 'expand', title: 'right'}, {id: 'collapse', title: 'down'}] :
[{id: 'collapse', title: 'down'}, {id: 'expand', title: 'right'}],
$titlebar = Ox.Bar({
orientation: 'horizontal', orientation: 'horizontal',
size: self.options.size, size: self.options.size,
}) })
.dblclick(dblclickTitlebar) .bindEvent({
.appendTo(that), doubleclick: doubleclickTitlebar
$switch = Ox.Button({
style: 'symbol',
title: title,
type: 'image',
}) })
.click(toggleCollapsed) .appendTo(that);
.appendTo($titlebar),
$title = Ox.Element() 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') .addClass('OxTitle')
.html(self.options.title/*.toUpperCase()*/) .html(self.options.title)
.appendTo($titlebar), .appendTo(self.$titlebar);
$extras;
if (self.options.extras.length) { if (self.options.extras.length) {
$extras = Ox.Element() self.$extras = Ox.Element()
.addClass('OxExtras') .addClass('OxExtras')
.appendTo($titlebar); .appendTo(self.$titlebar);
self.options.extras.forEach(function($extra) { 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')) { 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) { self.setOption = function(key, value) {
if (key == 'collapsed') { if (key == 'collapsed') {
self.$button.trigger('click');
} else if (key == 'title') { } else if (key == 'title') {
$title.html(self.options.title); self.$title.html(self.options.title);
} }
}; };

3
source/Ox.UI/js/Panel/Ox.TabPanel.js
View file

@ -17,7 +17,8 @@ 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,
value: self.selected
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {

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

@ -22,6 +22,7 @@ Ox.VideoEditor = function(options, self) {
censored: [], censored: [],
cuts: [], cuts: [],
duration: 0, duration: 0,
enableSubtitles: false,
find: '', find: '',
fps: 25, fps: 25,
getFrameURL: null, getFrameURL: null,
@ -181,6 +182,7 @@ Ox.VideoEditor = function(options, self) {
duration: self.options.duration, duration: self.options.duration,
enableMouse: true, enableMouse: true,
enablePosition: true, enablePosition: true,
enableSubtitles: self.options.enableSubtitles,
externalControls: true, externalControls: true,
find: self.options.find, find: self.options.find,
height: self.sizes.player[i].height, height: self.sizes.player[i].height,
@ -221,6 +223,9 @@ Ox.VideoEditor = function(options, self) {
that.triggerEvent('resolution', data); that.triggerEvent('resolution', data);
}, },
size: toggleSize, size: toggleSize,
subtitles: function(data) {
that.triggerEvent('subtitles', data);
},
volume: function(data) { volume: function(data) {
that.triggerEvent('volume', data); that.triggerEvent('volume', data);
} }

7
source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js
View file

@ -19,6 +19,7 @@ Ox.VideoPanelPlayer = function(options, self) {
annotationsSize: 256, annotationsSize: 256,
censored: [], censored: [],
duration: 0, duration: 0,
enableSubtitles: false,
find: '', find: '',
fullscreen: false, fullscreen: false,
height: 0, height: 0,
@ -64,11 +65,12 @@ Ox.VideoPanelPlayer = function(options, self) {
self.$video = Ox.VideoPlayer({ self.$video = Ox.VideoPlayer({
censored: self.options.censored, censored: self.options.censored,
controlsTop: ['fullscreen', 'title', 'find'], controlsTop: ['fullscreen', 'title', 'find'],
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'resolution'], controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'settings'],
enableFind: true, enableFind: true,
enableKeyboard: true, enableKeyboard: true,
enableMouse: true, enableMouse: true,
enablePosition: true, enablePosition: true,
enableSubtitles: self.options.enableSubtitles,
enableTimeline: true, enableTimeline: true,
find: self.options.find, find: self.options.find,
fullscreen: self.options.fullscreen, fullscreen: self.options.fullscreen,
@ -111,6 +113,9 @@ Ox.VideoPanelPlayer = function(options, self) {
scale: function(data) { scale: function(data) {
that.triggerEvent('scale', data); that.triggerEvent('scale', data);
}, },
subtitles: function(data) {
that.triggerEvent('subtitles', data);
},
volume: function(data) { volume: function(data) {
that.triggerEvent('volume', data); that.triggerEvent('volume', data);
} }

7
source/Ox.UI/themes/classic/css/classic.css
View file

@ -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: -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)); 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); 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: -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: -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)); 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 { .OxThemeClassic .OxVideoPlayer .OxVolume {
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5)); 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)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));

9
source/Ox.UI/themes/modern/css/modern.css
View file

@ -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: -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)); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(64, 64, 64, 0.75));
} }
.OxThemeModern .OxVideoPlayer .OxResolution > div { .OxThemeModern .OxVideoPlayer .OxSettings > div {
background: rgba(32, 32, 32, 0.5); 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: -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: -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)); 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 { .OxThemeModern .OxVideoPlayer .OxVolume {
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5)); 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)); background-image: -o-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));