use new form element syntax, continued
This commit is contained in:
parent
cfb8d4f6a4
commit
8528b05368
9 changed files with 73 additions and 53 deletions
|
@ -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
|
||||||
},
|
},
|
||||||
|
|
|
@ -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));
|
||||||
|
|
|
@ -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: [
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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});
|
||||||
},
|
},
|
||||||
|
|
|
@ -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' }
|
||||||
]
|
]
|
||||||
)};
|
)};
|
||||||
};
|
};
|
||||||
|
|
|
@ -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
|
||||||
})
|
}),
|
||||||
]
|
|
||||||
})
|
|
||||||
.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 {
|
|
||||||
$content.append(
|
|
||||||
Ox.Checkbox({
|
Ox.Checkbox({
|
||||||
checked: pandora.user.newsletter,
|
|
||||||
id: 'newsletter',
|
id: 'newsletter',
|
||||||
label: 'Newsletter',
|
label: 'Newsletter',
|
||||||
labelWidth: 80,
|
labelWidth: 120,
|
||||||
title: pandora.user.newsletter ? 'Subscribed' : 'Unsubscribed',
|
title: pandora.user.newsletter ? 'Subscribed' : 'Unsubscribed',
|
||||||
width: 240
|
value: pandora.user.newsletter,
|
||||||
|
width: 320
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
change: function(data) {
|
change: function(data) {
|
||||||
this.options({
|
|
||||||
title: this.options('title') == 'Subscribed' ? 'Unsubscribed' : 'Subscribed'
|
|
||||||
});
|
|
||||||
pandora.user.newsletter = data.value;
|
pandora.user.newsletter = data.value;
|
||||||
|
this.options({
|
||||||
|
title: pandora.user.newsletter ? 'Subscribed' : 'Unsubscribed'
|
||||||
|
});
|
||||||
pandora.api.editPreferences({
|
pandora.api.editPreferences({
|
||||||
newsletter: pandora.user.newsletter
|
newsletter: pandora.user.newsletter
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
]
|
||||||
|
})
|
||||||
.css({position: 'absolute', left: '96px', top: '16px'})
|
.css({position: 'absolute', left: '96px', top: '16px'})
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
$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;
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
|
@ -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({
|
||||||
|
|
Loading…
Reference in a new issue