pandora/static/js/preferencesDialog.js

266 lines
12 KiB
JavaScript
Raw Normal View History

2011-11-05 17:04:10 +00:00
'use strict';
2011-08-24 21:21:25 +00:00
pandora.ui.preferencesDialog = function() {
2013-08-08 11:15:23 +00:00
var isReloading = false,
tabs = [
{id: 'account', title: Ox._('Account')},
{id: 'appearance', title: Ox._('Appearance')},
2013-05-09 10:13:58 +00:00
{id: 'advanced', title: Ox._('Advanced')}
];
2015-04-20 08:13:56 +00:00
Ox.getObjectById(
tabs, pandora.user.ui.part.preferences || 'account'
).selected = true;
var $tabPanel = Ox.TabPanel({
2011-08-24 21:21:25 +00:00
content: function(id) {
2011-10-18 17:08:35 +00:00
var $content = Ox.Element()
.css({overflowY: 'auto'})
.append(
$('<img>')
.attr({src: '/static/png/icon.png'})
.css({
position: 'absolute',
left: '16px',
top: '16px',
width: '64px',
height: '64px'
})
2011-10-18 17:08:35 +00:00
);
if (id == 'account') {
2011-10-18 17:08:35 +00:00
$content.append(
Ox.Form({
items: [
Ox.Input({
disabled: true,
id: 'username',
2013-05-09 10:13:58 +00:00
label: Ox._('Username'),
2011-10-18 17:08:35 +00:00
labelWidth: 120,
value: pandora.user.username,
width: 320
}),
Ox.Input({
2011-10-22 14:50:53 +00:00
autovalidate: /.+/,
id: 'password',
2013-05-09 10:13:58 +00:00
label: Ox._('New Password'),
2011-10-22 14:50:53 +00:00
labelWidth: 120,
type: 'password',
validate: pandora.validateNewPassword,
width: 320
})
2019-07-22 09:11:25 +00:00
.attr({
autocomplete: 'new-password'
})
2011-10-22 14:50:53 +00:00
.bindEvent({
validate: function(data) {
data.valid && pandora.api.editPreferences({password: data.value});
}
}),
2011-10-18 17:08:35 +00:00
Ox.Input({
2011-10-22 14:50:53 +00:00
autovalidate: pandora.autovalidateEmail,
id: 'email',
2013-05-09 10:13:58 +00:00
label: Ox._('E-Mail Address'),
2011-10-22 14:50:53 +00:00
labelWidth: 120,
validate: pandora.validateNewEmail,
value: pandora.user.email,
width: 320
})
.bindEvent({
validate: function(data) {
if (data.valid && data.value != pandora.user.email) {
pandora.user.email = data.value;
pandora.api.editPreferences({email: data.value});
}
}
2011-10-24 10:04:41 +00:00
}),
Ox.Input({
disabled: true,
id: 'level',
2013-05-09 10:13:58 +00:00
label: Ox._('Level'),
2011-10-24 10:04:41 +00:00
labelWidth: 120,
value: Ox.toTitleCase(pandora.user.level),
width: 320
2011-12-22 15:48:48 +00:00
}),
].concat(
pandora.user.groups.length ? [
Ox.Input({
disabled: true,
id: 'groups',
label: Ox._('Groups'),
labelWidth: 120,
value: pandora.user.groups.join(', '),
width: 320
})
] : []
).concat([
2011-12-22 15:48:48 +00:00
Ox.Checkbox({
id: 'newsletter',
2013-05-09 10:13:58 +00:00
label: Ox._('Newsletter'),
2011-12-22 15:48:48 +00:00
labelWidth: 120,
2015-04-20 08:13:56 +00:00
title: pandora.user.newsletter
? Ox._('Subscribed')
: Ox._('Unsubscribed'),
2011-12-22 15:48:48 +00:00
value: pandora.user.newsletter,
width: 320
})
.bindEvent({
change: function(data) {
pandora.user.newsletter = data.value;
this.options({
2015-04-20 08:13:56 +00:00
title: pandora.user.newsletter
? Ox._('Subscribed')
: Ox._('Unsubscribed')
2011-12-22 15:48:48 +00:00
});
pandora.api.editPreferences({
newsletter: pandora.user.newsletter
});
}
})
])
2011-10-18 17:08:35 +00:00
})
.css({position: 'absolute', left: '96px', top: '16px'})
);
} else if (id == 'appearance') {
$content.append(
Ox.Form({
items: [
Ox.Select({
id: 'theme',
items: pandora.site.themes.map(function(theme) {
2015-04-20 08:13:56 +00:00
return {
id: theme,
title: Ox.Theme.getThemeData(theme).themeName
};
}),
label: Ox._('Theme'),
labelWidth: 120,
value: pandora.user.ui.theme,
width: 320
})
.bindEvent({
change: function(data) {
pandora.UI.set({theme: data.value});
pandora.setTheme(data.value);
}
}),
Ox.Select({
id: 'locale',
2014-04-01 14:23:33 +00:00
items: pandora.site.languages.map(function(locale) {
2015-04-20 08:13:56 +00:00
return {
id: locale,
title: Ox.LOCALE_NAMES[locale]
};
}),
label: Ox._('Language'),
labelWidth: 120,
value: pandora.user.ui.locale,
width: 320
})
.bindEvent({
change: function(data) {
pandora.UI.set({locale: data.value});
pandora.setLocale(data.value, function() {
2013-08-08 11:15:23 +00:00
isReloading = true;
$dialog.close();
pandora.$ui.appPanel.reload();
});
}
})
]
})
.css({position: 'absolute', left: '96px', top: '16px'})
);
} else if (id == 'advanced') {
2011-10-22 14:50:53 +00:00
$content.append(
Ox.Button({
2013-05-09 10:13:58 +00:00
title: Ox._('Reset UI Settings...'),
width: 160
2011-10-22 14:50:53 +00:00
})
.bindEvent({
click: function() {
pandora.$ui.resetUIDialog = pandora.ui.resetUIDialog().open();
2011-10-22 14:50:53 +00:00
}
})
2011-12-22 15:48:48 +00:00
.css({position: 'absolute', left: '96px', top: '16px'})
).append(
Ox.Button({
2013-05-09 10:13:58 +00:00
title: Ox._('Run Script on Load...'),
width: 160
})
.bindEvent({
click: function() {
2015-02-21 10:43:37 +00:00
pandora.$ui.scriptDialog = pandora.ui.scriptDialog().open();
}
})
.css({position: 'absolute', left: '96px', top: '40px'})
).append(
Ox.Button({
title: Ox._('Manage Cache...'),
2015-03-20 13:05:54 +00:00
disabled: !pandora.fs.enabled,
width: 160
})
.bindEvent({
click: function() {
pandora.$ui.cacheDialog = pandora.ui.cacheDialog().open();
}
})
.css({position: 'absolute', left: '96px', top: '64px'})
);
}
2011-10-18 17:08:35 +00:00
return $content;
2011-08-24 21:21:25 +00:00
},
tabs: tabs
})
.bindEvent({
change: function(data) {
pandora.UI.set({'part.preferences': data.selected});
}
}),
$dialog = Ox.Dialog({
buttons: [
2013-03-03 08:05:09 +00:00
Ox.Button({
id: 'signout',
2013-05-09 10:13:58 +00:00
title: Ox._('Sign Out...')
2013-03-03 08:05:09 +00:00
}).bindEvent({
click: function() {
pandora.UI.set({page: 'signout'});
}
}),
{},
Ox.Button({
id: 'done',
2013-05-09 10:13:58 +00:00
title: Ox._('Done')
}).bindEvent({
click: function() {
$dialog.close();
}
})
],
closeButton: true,
content: $tabPanel,
height: 192,
minHeight: 192,
minWidth: 432,
2013-05-09 10:13:58 +00:00
title: Ox._('Preferences'),
width: 432
})
.bindEvent({
close: function() {
2013-08-08 11:15:23 +00:00
if (pandora.user.ui.page == 'preferences' && !isReloading) {
pandora.UI.set({page: ''});
}
},
'pandora_part.preferences': function(data) {
if (pandora.user.ui.page == 'preferences') {
2015-04-20 08:13:56 +00:00
$tabPanel.select(
data.value == '' ? 'account' : data.value
);
}
}
});
2011-08-24 21:21:25 +00:00
return $dialog;
2011-10-29 17:46:46 +00:00
};