use new form element syntax, continued

This commit is contained in:
rolux 2011-12-22 15:48:48 +00:00
parent cfb8d4f6a4
commit 8528b05368
9 changed files with 73 additions and 53 deletions

View file

@ -586,6 +586,7 @@
}, },
"user": { "user": {
"level": "guest", "level": "guest",
"newsletter": true,
"ui": { "ui": {
"annotationsSize": 256, "annotationsSize": 256,
"clipsColumns": 2, "clipsColumns": 2,
@ -648,6 +649,7 @@
"videoScale": "fit", "videoScale": "fit",
"videoMuted": false, "videoMuted": false,
"videoSize": "small", "videoSize": "small",
"videoSubtitles": true,
"videoView": "video", "videoView": "video",
"videoVolume": 1 "videoVolume": 1
}, },

View file

@ -73,7 +73,7 @@ pandora.ui.accountDialogOptions = function(action, value) {
id: type, id: type,
title: buttonTitle[type] + '...' title: buttonTitle[type] + '...'
}).bindEvent('click', function() { }).bindEvent('click', function() {
if (['signin', 'signup'].indexOf(type) > -1) { if (['signin', 'signup'].indexOf(type) > -1 && type != pandora.user.ui.page) {
pandora.UI.set({page: type}); pandora.UI.set({page: type});
} else { } else {
pandora.$ui.accountDialog.options(pandora.ui.accountDialogOptions(type)); pandora.$ui.accountDialog.options(pandora.ui.accountDialogOptions(type));

View file

@ -1,5 +1,7 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript // vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict'; 'use strict';
pandora.ui.appPanel = function() { pandora.ui.appPanel = function() {
var that = Ox.SplitPanel({ var that = Ox.SplitPanel({
elements: [ elements: [

View file

@ -8,15 +8,15 @@ pandora.ui.folderBrowserBar = function(id) {
elements: [ elements: [
pandora.$ui.findListSelect[id] = Ox.Select({ pandora.$ui.findListSelect[id] = Ox.Select({
items: [ items: [
{id: 'user', title: 'Find: User', checked: true}, {id: 'user', title: 'Find: User'},
{id: 'list', title: 'Find: List'} {id: 'name', title: 'Find: List'}
], ],
overlap: 'right', overlap: 'right',
type: 'image' type: 'image'
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
var key = data.value == 'user' ? 'user' : 'name', var key = data.value,
value = pandora.$ui.findListInput[id].value(); value = pandora.$ui.findListInput[id].value();
value && updateList(key, value); value && updateList(key, value);
pandora.$ui.findListInput[id].options({ pandora.$ui.findListInput[id].options({
@ -32,7 +32,7 @@ pandora.ui.folderBrowserBar = function(id) {
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
var key = pandora.$ui.findListSelect[id].value() == 'user' ? 'user' : 'name', var key = pandora.$ui.findListSelect[id].value(),
value = data.value; value = data.value;
updateList(key, value); updateList(key, value);
} }

View file

@ -123,6 +123,7 @@ pandora.ui.item = function() {
censored: videoOptions.censored, censored: videoOptions.censored,
cuts: result.data.cuts || [], cuts: result.data.cuts || [],
duration: result.data.duration, duration: result.data.duration,
enableSubtitles: pandora.user.ui.videoSubtitles,
find: pandora.user.ui.itemFind.conditions[0] find: pandora.user.ui.itemFind.conditions[0]
? pandora.user.ui.itemFind.conditions[0].value : '', ? pandora.user.ui.itemFind.conditions[0].value : '',
getTimelineImageURL: function(i) { getTimelineImageURL: function(i) {
@ -168,6 +169,9 @@ pandora.ui.item = function() {
scale: function(data) { scale: function(data) {
pandora.UI.set('videoScale', data.scale); pandora.UI.set('videoScale', data.scale);
}, },
subtitles: function(data) {
pandora.UI.set('videoSubtitles', data.subtitles);
},
toggleannotations: function(data) { toggleannotations: function(data) {
pandora.UI.set('showAnnotations', data.showAnnotations); pandora.UI.set('showAnnotations', data.showAnnotations);
}, },
@ -192,6 +196,7 @@ pandora.ui.item = function() {
censored: videoOptions.censored, censored: videoOptions.censored,
cuts: result.data.cuts || [], cuts: result.data.cuts || [],
duration: result.data.duration, duration: result.data.duration,
enableSubtitles: pandora.user.ui.videoSubtitles,
find: pandora.user.ui.itemFind.conditions[0] find: pandora.user.ui.itemFind.conditions[0]
? pandora.user.ui.itemFind.conditions[0].value : '', ? pandora.user.ui.itemFind.conditions[0].value : '',
getFrameURL: function(position) { getFrameURL: function(position) {
@ -255,6 +260,9 @@ pandora.ui.item = function() {
resolution: function(data) { resolution: function(data) {
pandora.UI.set('videoResolution', data.resolution); pandora.UI.set('videoResolution', data.resolution);
}, },
subtitles: function(data) {
pandora.UI.set('videoSubtitles', data.subtitles);
},
togglesize: function(data) { togglesize: function(data) {
pandora.UI.set({videoSize: data.size}); pandora.UI.set({videoSize: data.size});
}, },

View file

@ -228,7 +228,7 @@ pandora.ui.mainMenu = function() {
click: function(data) { click: function(data) {
if ([ if ([
'home', 'about', 'news', 'tour', 'faq', 'terms', 'rights', 'contact', 'software', 'home', 'about', 'news', 'tour', 'faq', 'terms', 'rights', 'contact', 'software',
'signup', 'signin', 'signout', 'preferences', 'help' 'signup', 'signin', 'signout', 'preferences', 'tv', 'help'
].indexOf(data.id) > -1) { ].indexOf(data.id) > -1) {
pandora.UI.set({page: data.id}); pandora.UI.set({page: data.id});
} else if ([ } else if ([
@ -332,6 +332,11 @@ pandora.ui.mainMenu = function() {
pandora.UI.set({page: 'help'}); pandora.UI.set({page: 'help'});
} }
}, },
key_control_space: function() {
if (!pandora.hasDialogOrScreen()) {
pandora.UI.set({page: 'tv'});
}
},
key_control_w: function() { key_control_w: function() {
if (!pandora.hasDialogOrScreen()) { if (!pandora.hasDialogOrScreen()) {
if (ui.item) { if (ui.item) {
@ -461,6 +466,8 @@ pandora.ui.mainMenu = function() {
{ id: 'duplicatelist', title: 'Duplicate Selected List', disabled: isGuest || !pandora.user.ui._list, keyboard: 'control d' }, { id: 'duplicatelist', title: 'Duplicate Selected List', disabled: isGuest || !pandora.user.ui._list, keyboard: 'control d' },
{ id: 'editlist', title: 'Edit Selected List...', disabled: isGuest || !pandora.user.ui._list, keyboard: 'control e' }, { id: 'editlist', title: 'Edit Selected List...', disabled: isGuest || !pandora.user.ui._list, keyboard: 'control e' },
{ id: 'deletelist', title: 'Delete Selected List...', disabled: isGuest || !pandora.user.ui._list, keyboard: 'delete' }, { id: 'deletelist', title: 'Delete Selected List...', disabled: isGuest || !pandora.user.ui._list, keyboard: 'delete' },
{},
{ id: 'tv', title: 'TV', keyboard: 'control space' }
] ]
)}; )};
}; };

View file

@ -4,7 +4,7 @@ pandora.ui.preferencesDialog = function() {
var tabs = [ var tabs = [
{id: 'account', title: 'Account', selected: true}, {id: 'account', title: 'Account', selected: true},
{id: 'settings', title: 'Settings'} {id: 'advanced', title: 'Advanced'}
]; ];
var $tabPanel = Ox.TabPanel({ var $tabPanel = Ox.TabPanel({
content: function(id) { content: function(id) {
@ -65,50 +65,36 @@ pandora.ui.preferencesDialog = function() {
labelWidth: 120, labelWidth: 120,
value: Ox.toTitleCase(pandora.user.level), value: Ox.toTitleCase(pandora.user.level),
width: 320 width: 320
}) }),
Ox.Checkbox({
id: 'newsletter',
label: 'Newsletter',
labelWidth: 120,
title: pandora.user.newsletter ? 'Subscribed' : 'Unsubscribed',
value: pandora.user.newsletter,
width: 320
})
.bindEvent({
change: function(data) {
pandora.user.newsletter = data.value;
this.options({
title: pandora.user.newsletter ? 'Subscribed' : 'Unsubscribed'
});
pandora.api.editPreferences({
newsletter: pandora.user.newsletter
});
}
})
] ]
}) })
.css({position: 'absolute', left: '96px', top: '16px'}) .css({position: 'absolute', left: '96px', top: '16px'})
.bindEvent({
change: function(data) {
return;
var preferences = {};
preferences[data.id] = data.data.value;
pandora.api.editPreferences(preferences, function(result) {
if (data.id == 'email') {
pandora.user.email = data.data.value;
}
});
}
})
); );
} else { } else {
$content.append(
Ox.Checkbox({
checked: pandora.user.newsletter,
id: 'newsletter',
label: 'Newsletter',
labelWidth: 80,
title: pandora.user.newsletter ? 'Subscribed' : 'Unsubscribed',
width: 240
})
.bindEvent({
change: function(data) {
this.options({
title: this.options('title') == 'Subscribed' ? 'Unsubscribed' : 'Subscribed'
});
pandora.user.newsletter = data.value;
pandora.api.editPreferences({
newsletter: pandora.user.newsletter
});
}
})
.css({position: 'absolute', left: '96px', top: '16px'})
);
$content.append( $content.append(
Ox.Button({ Ox.Button({
title: 'Reset UI Settings', title: 'Reset UI Settings',
width: 150 width: 120
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -116,7 +102,7 @@ pandora.ui.preferencesDialog = function() {
pandora.$ui.appPanel.reload(); pandora.$ui.appPanel.reload();
} }
}) })
.css({position: 'absolute', left: '96px', top: '46px'}) .css({position: 'absolute', left: '96px', top: '16px'})
); );
} }
return $content; return $content;

View file

@ -23,9 +23,10 @@ pandora.ui.tv = function() {
$player && $player.remove(); $player && $player.remove();
$player = Ox.VideoPlayer({ $player = Ox.VideoPlayer({
censored: videoOptions.censored, censored: videoOptions.censored,
controlsBottom: ['volume', 'scale', 'timeline', 'position', 'resolution'], controlsBottom: ['volume', 'scale', 'timeline', 'position', 'settings'],
controlsTop: ['close', 'title'], controlsTop: ['close', 'title'],
duration: result.data.duration, duration: result.data.duration,
enableSubtitles: pandora.user.ui.videoSubtitles,
fullscreen: true, fullscreen: true,
logo: pandora.site.tv.showLogo ? '/static/png/logo256.png' : '', logo: pandora.site.tv.showLogo ? '/static/png/logo256.png' : '',
position: result.data.position, position: result.data.position,
@ -48,9 +49,23 @@ pandora.ui.tv = function() {
.bindEvent({ .bindEvent({
close: that.fadeOutScreen, close: that.fadeOutScreen,
ended: play, ended: play,
muted: function(data) {
pandora.UI.set('videoMuted', data.muted);
},
resolution: function(data) { resolution: function(data) {
pandora.UI.set('videoResolution', data.resolution); pandora.UI.set('videoResolution', data.resolution);
} },
scale: function(data) {
pandora.UI.set('videoScale', data.scale);
},
subtitles: function(data) {
pandora.UI.set('videoSubtitles', data.subtitles);
},
volume: function(data) {
pandora.UI.set('videoVolume', data.volume);
},
// FIXME: does not work
key_escape: that.fadeOutScreen
}) })
.appendTo(that); .appendTo(that);
}); });

View file

@ -10,8 +10,8 @@ pandora.ui.usersDialog = function() {
numberOfUsers = 0, numberOfUsers = 0,
$guestsCheckbox = Ox.Checkbox({ $guestsCheckbox = Ox.Checkbox({
checked: true, title: 'Show Guests',
title: 'Show Guests' value: true
}) })
.css({float: 'left', margin: '4px'}) .css({float: 'left', margin: '4px'})
.bindEvent({ .bindEvent({
@ -20,7 +20,7 @@ pandora.ui.usersDialog = function() {
$findSelect = Ox.Select({ $findSelect = Ox.Select({
items: [ items: [
{id: 'all', title: 'Find: All', checked: true}, {id: 'all', title: 'Find: All'},
{id: 'username', title: 'Find: Username'}, {id: 'username', title: 'Find: Username'},
{id: 'email', title: 'Find: E-Mail-Address'} {id: 'email', title: 'Find: E-Mail-Address'}
], ],
@ -453,11 +453,11 @@ pandora.ui.usersDialog = function() {
return Ox.Form({ return Ox.Form({
items: [ items: [
Ox.Checkbox({ Ox.Checkbox({
checked: !user.disabled,
id: 'status', id: 'status',
label: 'Status', label: 'Status',
labelWidth: 80, labelWidth: 80,
title: !user.disabled ? 'Enabled' : 'Disabled', title: !user.disabled ? 'Enabled' : 'Disabled',
value: !user.disabled,
width: formWidth - 16 width: formWidth - 16
}) })
.bindEvent({ .bindEvent({
@ -496,21 +496,21 @@ pandora.ui.usersDialog = function() {
id: 'level', id: 'level',
items: Ox.map(pandora.site.userLevels, function(level, i) { items: Ox.map(pandora.site.userLevels, function(level, i) {
return i ? { return i ? {
checked: level == user.level,
id: level, id: level,
title: Ox.toTitleCase(level) title: Ox.toTitleCase(level)
} : null; } : null;
}), }),
label: 'Level', label: 'Level',
labelWidth: 80, labelWidth: 80,
value: user.level,
width: formWidth - 16 width: formWidth - 16
}), }),
Ox.Checkbox({ Ox.Checkbox({
checked: user.newsletter,
id: 'newsletter', id: 'newsletter',
label: 'Newsletter', label: 'Newsletter',
labelWidth: 80, labelWidth: 80,
title: user.newsletter ? 'Subscribed' : 'Unsubscribed', title: user.newsletter ? 'Subscribed' : 'Unsubscribed',
value: user.newsletter,
width: formWidth - 16 width: formWidth - 16
}) })
.bindEvent({ .bindEvent({
@ -632,9 +632,9 @@ pandora.ui.usersDialog = function() {
} }
}), }),
Ox.Checkbox({ Ox.Checkbox({
checked: false,
id: 'receipt', id: 'receipt',
title: 'Send a receipt to ' + pandora.user.email, title: 'Send a receipt to ' + pandora.user.email,
value: false,
width: formWidth - 16 width: formWidth - 16
}), }),
Ox.Button({ Ox.Button({