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: {
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
})
],

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;
}
.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 {

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

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

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

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

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

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

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);
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 = $('<div>')
.addClass('OxTitle')
.css({

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

@ -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,

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

@ -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({
.addClass('OxCollapsePanel');
self.$titlebar = Ox.Bar({
orientation: 'horizontal',
size: self.options.size,
})
.dblclick(dblclickTitlebar)
.appendTo(that),
$switch = Ox.Button({
style: 'symbol',
title: title,
type: 'image',
.bindEvent({
doubleclick: doubleclickTitlebar
})
.click(toggleCollapsed)
.appendTo($titlebar),
$title = Ox.Element()
.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/*.toUpperCase()*/)
.appendTo($titlebar),
$extras;
.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);
}
};

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

@ -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) {

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

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

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

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

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

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