0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

better integration of home, about, preferences, login, etc, and support for /item/position urls

Browse source
This commit is contained in:
rolux 2011-08-24 21:04:13 +00:00
parent 2ae3edb488
commit 9eacf537fb
11 changed files with 402 additions and 322 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
pandora/0xdb.json
View file

@ -424,7 +424,8 @@
{"id": "player", "title": "Player"}, {"id": "player", "title": "Player"},
{"id": "timeline", "title": "Timeline"}, {"id": "timeline", "title": "Timeline"},
{"id": "map", "title": "Map"}, {"id": "map", "title": "Map"},
{"id": "calendar", "title": "Calendar"} {"id": "calendar", "title": "Calendar"},
{"id": "files", "title": "Files"}
], ],
"layers": [ "layers": [
{ {
@ -537,6 +538,7 @@
"showAnnotations": true, "showAnnotations": true,
"showControls": true, "showControls": true,
"showGroups": true, "showGroups": true,
"showHome": true,
"showInfo": true, "showInfo": true,
"showMovies": true, "showMovies": true,
"showFolder": { "showFolder": {

13
static/js/pandora.js
View file

@ -23,7 +23,7 @@ Ox.load('Geo', function() {
window.pandora = new Ox.App({url: '/api/'}).bindEvent({ window.pandora = new Ox.App({url: '/api/'}).bindEvent({
load: function(event, data) { load: function(event, data) {
$.extend(pandora, { Ox.extend(pandora, {
requests: {}, requests: {},
ui: {} ui: {}
}); });
@ -32,7 +32,7 @@ Ox.load('Geo', function() {
Ox.UI.hideLoadingScreen(); Ox.UI.hideLoadingScreen();
$.extend(pandora, { Ox.extend(pandora, {
$ui: { $ui: {
body: $('body'), body: $('body'),
document: $(document), document: $(document),
@ -41,9 +41,9 @@ Ox.load('Geo', function() {
.unload(unloadWindow) .unload(unloadWindow)
}, },
site: data.site, site: data.site,
user: data.user.level == 'guest' ? $.extend({}, data.site.user) : data.user user: data.user.level == 'guest' ? Ox.extend({}, data.site.user) : data.user
}); });
$.extend(pandora.site, { Ox.extend(pandora.site, {
findKeys: $.map(data.site.itemKeys, function(key, i) { findKeys: $.map(data.site.itemKeys, function(key, i) {
return key.find ? key : null; return key.find ? key : null;
}), }),
@ -75,10 +75,7 @@ Ox.load('Geo', function() {
return key.columnWidth ? key : null; return key.columnWidth ? key : null;
}) })
}); });
pandora.site.itemViews.push( Ox.extend(pandora.user, {
{id: 'files', title: 'Files', admin: 'true'}
);
$.extend(pandora.user, {
infoRatio: 16 / 9, infoRatio: 16 / 9,
sectionElement: 'buttons', sectionElement: 'buttons',
selectedMovies: [], selectedMovies: [],

72
static/js/pandora/URL.js
View file

@ -4,6 +4,14 @@
pandora.URL = (function() { pandora.URL = (function() {
var regexps = { var regexps = {
'^(|home)$': function(url) {
if (url == 'home' || pandora.user.ui.showHome) {
//$('.OxLoadingScreen').stop().remove();
pandora.$ui.home = pandora.ui.home().showScreen();
pandora.user.ui.showHome = false;
}
pandora.Query.updateGroups();
},
'^\\?url=': function(url) { '^\\?url=': function(url) {
Ox.print('URL', url) Ox.print('URL', url)
document.location = decodeURIComponent(url.substr(5)); document.location = decodeURIComponent(url.substr(5));
@ -15,11 +23,27 @@ pandora.URL = (function() {
item: '' item: ''
}); });
}, },
'^(|about|archives|faq|help|license|home|news|preferences|software|terms|tour)$': function(url) { '^(about|faq|home|news|software|terms|tour)$': function(url) {
pandora.UI.set({ pandora.$ui.siteDialog = pandora.ui.siteDialog(url).open();
section: 'site', pandora.Query.updateGroups();
sitePage: url || 'home' },
}); '^(signin|signout|signup)$': function(url) {
if ((url == 'signout') == (pandora.user.level != 'guest')) {
pandora.$ui.accountDialog = (
pandora.user.level == 'guest'
? pandora.ui.accountDialog(url)
: pandora.ui.accountSignoutDialog()
).open();
}
pandora.Query.updateGroups();
},
'^preferences$': function() {
pandora.$ui.preferencesDialog = pandora.ui.preferencesDialog().open();
pandora.Query.updateGroups();
},
'^help$': function() {
pandora.$ui.helpDialog = pandora.ui.helpDialog().open();
pandora.Query.updateGroups();
}, },
'^admin': function(url) { '^admin': function(url) {
var split = url.split('/'), var split = url.split('/'),
@ -53,18 +77,40 @@ pandora.URL = (function() {
}, },
'^[0-9A-Z]': function(url) { '^[0-9A-Z]': function(url) {
var split = url.split('/'), var split = url.split('/'),
length = split.length,
item = split[0], item = split[0],
view = new RegExp( view = new RegExp(
'^(' + $.map(pandora.site.itemViews, function(v) { '^(' + $.map(pandora.site.itemViews, function(v) {
return v.id; return v.id;
}).join('|') + ')$' }).join('|') + ')$'
).exec(split[1]); ).exec(split[1]),
view = view ? view[0] : pandora.user.ui.itemView; position = length > 1
? /[\d\.:-]+/.exec(split[length - 1])
: null;
view = view ? view[0]
: position ? pandora.user.ui.videoView
: pandora.user.ui.itemView;
pandora.UI.set({ pandora.UI.set({
section: 'items', section: 'items',
item: item, item: item,
itemView: view itemView: view
}); });
Ox.print('POSITION', position)
if (position) {
split[length - 1] = position[0].split('-').map(function(point, i) {
// fixme: this is duplicated, see Ox.VideoPlayer() parsePositionInput()
var parts = point.split(':').reverse();
while (parts.length > 3) {
parts.pop();
}
point = parts.reduce(function(prev, curr, i) {
return prev + (parseFloat(curr) || 0) * Math.pow(60, i);
}, 0);
i == 0 && pandora.UI.set(['videoPosition', item].join('|'), point);
return Ox.formatDuration(point);
}).join('-');
pandora.URL.replace(split.join('/'))
}
} }
}; };
@ -85,7 +131,7 @@ pandora.URL = (function() {
var url = document.location.pathname.substr(1) + var url = document.location.pathname.substr(1) +
document.location.search + document.location.search +
document.location.hash; document.location.hash;
$.each(regexps, function(re, fn) { Ox.forEach(regexps, function(fn, re) {
//Ox.print(url, 're', re) //Ox.print(url, 're', re)
re = new RegExp(re); re = new RegExp(re);
if (re.test(url)) { if (re.test(url)) {
@ -106,6 +152,16 @@ pandora.URL = (function() {
history.pushState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url); history.pushState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url);
}, },
replace: function(title, url) {
if (arguments.length == 1) { // fixme: remove later
url = title;
}
if (url[0] != '/') {
url = '/' + url;
}
history.replaceState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url);
},
update: function() { update: function() {
var oldUserUI = Ox.clone(pandora.user.ui); var oldUserUI = Ox.clone(pandora.user.ui);
Ox.Request.cancel(); Ox.Request.cancel();

4
static/js/pandora/pandora.js
View file

@ -102,14 +102,14 @@ pandora.getVideoPartsAndPoints = function(durations, points) {
return ret; return ret;
}; };
pandora.login = function(data) { pandora.signin = function(data) {
pandora.user = data.user; pandora.user = data.user;
pandora.Query.updateGroups(); pandora.Query.updateGroups();
Ox.Theme(pandora.user.ui.theme); Ox.Theme(pandora.user.ui.theme);
pandora.$ui.appPanel.reload(); pandora.$ui.appPanel.reload();
}; };
pandora.logout = function(data) { pandora.signout = function(data) {
pandora.user = data.user; pandora.user = data.user;
pandora.Query.updateGroups(); pandora.Query.updateGroups();
Ox.Theme(pandora.site.user.ui.theme); Ox.Theme(pandora.site.user.ui.theme);

64
static/js/pandora/ui/account.js
View file

@ -22,28 +22,28 @@ pandora.ui.accountDialogOptions = function(action, value) {
//Ox.print('ACTION', action) //Ox.print('ACTION', action)
pandora.$ui.accountForm && pandora.$ui.accountForm.removeElement(); pandora.$ui.accountForm && pandora.$ui.accountForm.removeElement();
var buttons = { var buttons = {
login: ['register', 'reset'], signin: ['signup', 'reset'],
register: ['login'], signup: ['signin'],
reset: ['login'], reset: ['signin'],
resetAndLogin: [] resetAndSignin: []
}, },
buttonTitle = { buttonTitle = {
login: 'Login', signin: 'Sign In',
register: 'Register', signup: 'Sign Up',
reset: 'Reset Password', reset: 'Reset Password',
resetAndLogin: 'Reset Password and Login' resetAndSignin: 'Reset Password and Sign In'
}, },
dialogText = { dialogText = {
login: 'To login to your account, please enter your username and password.', signin: 'To sign in to your account, please enter your username and password.',
register: 'To create a new account, please choose a username and password, and enter your e-mail address.', signup: 'To sign up for an account, please choose a username and password, and enter your e-mail address.',
reset: 'To reset your password, please enter either your username or your e-mail address.', reset: 'To reset your password, please enter either your username or your e-mail address.',
resetAndLogin: 'To login to your account, please choose a new password, and enter the code that we have just e-mailed to you.' resetAndSignin: 'To sign in to your account, please choose a new password, and enter the code that we have just e-mailed to you.'
}, },
dialogTitle = { dialogTitle = {
login: 'Login', signin: 'Sign In',
register: 'Register', signup: 'Sign Up',
reset: 'Reset Password', reset: 'Reset Password',
resetAndLogin: 'Reset Password' resetAndSignin: 'Reset Password'
}; };
function button(type) { function button(type) {
if (type == 'cancel') { if (type == 'cancel') {
@ -115,10 +115,10 @@ pandora.ui.accountForm = function(action, value) {
}); });
} }
var items = { var items = {
'login': ['username', 'password'], 'signin': ['username', 'password'],
'register': ['newUsername', 'password', 'email'], 'signup': ['newUsername', 'password', 'email'],
'reset': ['usernameOrEmail'], 'reset': ['usernameOrEmail'],
'resetAndLogin': ['oldUsername', 'newPassword', 'code'] 'resetAndSignin': ['oldUsername', 'newPassword', 'code']
}, },
$items = $.map(items[action], function(v) { $items = $.map(items[action], function(v) {
return item(v, value); return item(v, value);
@ -127,38 +127,39 @@ pandora.ui.accountForm = function(action, value) {
id: 'accountForm' + Ox.toTitleCase(action), id: 'accountForm' + Ox.toTitleCase(action),
items: $items, items: $items,
submit: function(data, callback) { submit: function(data, callback) {
if (action == 'login') { if (action == 'signin') {
pandora.api.signin(data, function(result) { pandora.api.signin(data, function(result) {
if (!result.data.errors) { if (!result.data.errors) {
pandora.$ui.accountDialog.close(); pandora.$ui.accountDialog.close();
pandora.login(result.data); pandora.signin(result.data);
} else { } else {
callback([{id: 'password', message: 'Incorrect password'}]); callback([{id: 'password', message: 'Incorrect password'}]);
} }
}); });
} else if (action == 'register') { } else if (action == 'signup') {
pandora.api.signup(data, function(result) { pandora.api.signup(data, function(result) {
if (!result.data.errors) { if (!result.data.errors) {
pandora.$ui.accountDialog.close(); pandora.$ui.accountDialog.close();
pandora.login(result.data); pandora.signin(result.data);
pandora.ui.accountWelcomeDialog().open(); pandora.ui.accountWelcomeDialog().open();
} else { } else {
callback([{id: 'password', message: result.data.errors.toString()}]); // fixme callback([{id: 'password', message: result.data.errors.toString()}]); // fixme
} }
}); });
} else if (action == 'reset') { } else if (action == 'reset') {
Ox.print('DATA???', data)
var usernameOrEmail = data.usernameOrEmail, var usernameOrEmail = data.usernameOrEmail,
key = usernameOrEmail[0].id; key = usernameOrEmail[0];
data = {}; data = {};
data[key] = usernameOrEmail[1]; data[key] = usernameOrEmail[1];
pandora.api.requestToken(data, function(result) { pandora.api.requestToken(data, function(result) {
if (!result.data.errors) { if (!result.data.errors) {
pandora.$ui.accountDialog.options(ui.accountDialogOptions('resetAndLogin', result.data.username)); pandora.$ui.accountDialog.options(pandora.ui.accountDialogOptions('resetAndSignin', result.data.username));
} else { } else {
callback([{id: 'usernameOrEmail', message: 'Unknown ' + (key == 'username' ? 'username' : 'e-mail address')}]) callback([{id: 'usernameOrEmail', message: 'Unknown ' + (key == 'username' ? 'username' : 'e-mail address')}])
} }
}); });
} else if (action == 'resetAndLogin') { } else if (action == 'resetAndSignin') {
pandora.api.resetPassword(data, function(result) { pandora.api.resetPassword(data, function(result) {
if (!result.data.errors) { if (!result.data.errors) {
pandora.$ui.accountDialog.close(); pandora.$ui.accountDialog.close();
@ -302,7 +303,7 @@ pandora.ui.accountForm = function(action, value) {
return that; return that;
}; };
pandora.ui.accountLogoutDialog = function() { pandora.ui.accountSignoutDialog = function() {
var that = Ox.Dialog({ var that = Ox.Dialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
@ -310,15 +311,15 @@ pandora.ui.accountLogoutDialog = function() {
title: 'Cancel' title: 'Cancel'
}).bindEvent('click', function() { }).bindEvent('click', function() {
that.close(); that.close();
pandora.$ui.mainMenu.getItem('loginlogout').toggleTitle(); pandora.$ui.mainMenu.getItem('signinsignout').toggleTitle();
}), }),
Ox.Button({ Ox.Button({
id: 'logout', id: 'signout',
title: 'Logout' title: 'Sign Out'
}).bindEvent('click', function() { }).bindEvent('click', function() {
that.close(); that.close();
pandora.api.signout({}, function(result) { pandora.api.signout({}, function(result) {
pandora.logout(result.data); pandora.signout(result.data);
}); });
}) })
], ],
@ -331,12 +332,12 @@ pandora.ui.accountLogoutDialog = function() {
.append( .append(
Ox.Element() Ox.Element()
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'}) .css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html('Are you sure you want to logout?') .html('Are you sure you want to sign out?')
), ),
fixedSize: true, fixedSize: true,
height: 128, height: 128,
keys: {enter: 'logout', escape: 'cancel'}, keys: {enter: 'signout', escape: 'cancel'},
title: 'Logout', title: 'Sign Out',
width: 304 width: 304
}); });
return that; return that;
@ -350,6 +351,7 @@ pandora.ui.accountWelcomeDialog = function() {
title: 'Preferences...' title: 'Preferences...'
}).bindEvent('click', function() { }).bindEvent('click', function() {
that.close(); that.close();
pandora.$ui.preferencesDialog = pandora.ui.preferencesDialog().open();
}), }),
{}, {},
Ox.Button({ Ox.Button({

6
static/js/pandora/ui/appPanel.js
View file

@ -14,9 +14,11 @@ pandora.ui.appPanel = function() {
}); });
that.display = function() { that.display = function() {
// fixme: move animation into Ox.App // fixme: move animation into Ox.App
pandora.$ui.body.css({opacity: 0}); var animate = $('#home').length == 0;
Ox.print('ANIMATE?', animate)
animate && pandora.$ui.body.css({opacity: 0});
that.appendTo(pandora.$ui.body); that.appendTo(pandora.$ui.body);
pandora.$ui.body.animate({opacity: 1}, 1000); animate && pandora.$ui.body.animate({opacity: 1}, 1000);
return that; return that;
} }
that.reload = function() { that.reload = function() {

264
static/js/pandora/ui/home.js Normal file
View file

@ -0,0 +1,264 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
pandora.ui.home = function() {
var that = $('<div>')
.attr({id: 'home'})
.css({
position: 'absolute',
width: '100%',
height: '100%',
background: 'rgb(32, 32, 32)',
opacity: 0,
zIndex: 1000
}),
$reflectionImage = $('<img>')
.attr({src: '/static/png/logo256.png'})
.css({
position: 'absolute',
left: 0,
top: '160px',
right: 0,
bottom: 0,
width: '320px',
margin: 'auto',
opacity: 0,
MozTransform: 'scaleY(-1)',
WebkitTransform: 'scaleY(-1)'
})
.appendTo(that),
$reflectionGradient = $('<div>')
.css({
position: 'absolute',
left: 0,
top: '160px',
right: 0,
bottom: 0,
width: '320px',
height: '160px',
margin: 'auto',
backgroundImage: '-webkit-linear-gradient(top, rgba(32, 32, 32, 0.8), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))'
})
.appendTo(that),
$logo = $('<img>')
.attr({
id: 'logo',
src: '/static/png/logo256.png'
})
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: '160px',
width: window.innerWidth + 'px',
margin: 'auto',
cursor: 'pointer'
})
.bind({
click: function() {
that.fadeOutScreen();
}
})
.appendTo(that),
$findInput = Ox.Input({
width: 156
})
.css({
position: 'absolute',
left: 0,
top: '48px',
right: '164px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.click(function(e) {
// fixme: why?
e.stopPropagation();
})
.bindEvent({
submit: function(data) {
pandora.URL.set('/?find=' + data.value);
that.fadeOutScreen();
}
})
.appendTo(that),
$findButton = Ox.Button({
title: 'Find',
width: 74
})
.css({
position: 'absolute',
left: '82px',
top: '48px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
pandora.URL.set('/?find=' + $findInput.value());
that.fadeOutScreen();
}
})
.appendTo(that),
$browseButton = Ox.Button({
title: 'Browse',
width: 74
})
.css({
position: 'absolute',
left: '246px',
top: '48px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
that.fadeOutScreen();
}
})
.appendTo(that),
$signupButton = Ox.Button({
title: 'Sign Up',
width: 74
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '246px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
pandora.URL.set('/signup');
that.fadeOutScreen();
}
}),
$signinButton = Ox.Button({
title: 'Sign In',
width: 74
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '82px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
pandora.URL.set('/signin');
that.fadeOutScreen();
}
}),
$preferencesButton = Ox.Button({
title: 'Preferences',
width: 156
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '164px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
pandora.URL.set('/preferences');
that.fadeOutScreen();
}
}),
$aboutButton = Ox.Button({
title: 'About ' + pandora.site.site.name,
width: 156
})
.css({
position: 'absolute',
left: '164px',
top: '112px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.bindEvent({
click: function() {
pandora.URL.set('/about');
that.fadeOutScreen();
}
})
.appendTo(that),
$text = $('<div>')
.html('A Movie Database. \u2620 2007-2011 0x2620. All Open Source.')
.css({
position: 'absolute',
left: 0,
top: '176px',
right: 0,
bottom: 0,
width: '360px',
height: '16px',
margin: 'auto',
opacity: 0,
textAlign: 'center'
})
.appendTo(that);
if (pandora.user.level == 'guest') {
$signupButton.appendTo(that);
$signinButton.appendTo(that);
} else {
$preferencesButton.appendTo(that);
}
that.fadeInScreen = function() {
Ox.print('FADE IN SCREEN')
that.appendTo(Ox.UI.$body).animate({opacity: 1}, 500, function() {
that.find(':not(#logo)').animate({opacity: 1}, 250, function() {
$findInput.focusInput();
});
});
$logo.animate({width: '320px'}, 500);
return that;
};
that.fadeOutScreen = function() {
that.find(':not(#logo)').hide();
$logo.animate({width: window.innerWidth + 'px'}, 500);
that.animate({opacity: 0}, 500, function() {
that.remove();
});
return that;
};
that.hideScreen = function() {
that.hide().remove();
that.find(':not(#logo)').css({opacity: 0});
$logo.css({width: window.innerWidth + 'px'});
return that;
};
that.showScreen = function() {
Ox.print('SHOW SCREEN')
$logo.css({width: '320px'});
that.find(':not(#logo)').css({opacity: 1});
that.css({opacity: 1}).appendTo(Ox.UI.$body);
$findInput.focusInput();
return that;
};
return that;
};

2
static/js/pandora/ui/homePage.js
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
// fixme: remove
pandora.ui.homePage = function() { pandora.ui.homePage = function() {
var that = Ox.Element() var that = Ox.Element()

280
static/js/pandora/ui/menu.js
View file

@ -28,8 +28,8 @@ pandora.ui.mainMenu = function() {
{ id: 'preferences', title: 'Preferences...', disabled: isGuest, keyboard: 'control ,' }, { id: 'preferences', title: 'Preferences...', disabled: isGuest, keyboard: 'control ,' },
{ id: 'archives', title: 'Archives...', disabled: isGuest }, { id: 'archives', title: 'Archives...', disabled: isGuest },
{}, {},
{ id: 'register', title: 'Register...', disabled: !isGuest }, { id: 'signup', title: 'Sign Up...', disabled: !isGuest },
{ id: 'loginlogout', title: isGuest ? 'Login...' : 'Logout...' } { id: 'signinsignout', title: isGuest ? 'Sign In...' : 'Sign Out...' }
] }, ] },
{ id: 'listMenu', title: 'List', items: [ { id: 'listMenu', title: 'List', items: [
{ id: 'history', title: 'History', items: [ { id: 'history', title: 'History', items: [
@ -201,267 +201,21 @@ pandora.ui.mainMenu = function() {
} }
}, },
click: function(event, data) { click: function(event, data) {
if (data.id == 'about') { if (data.id == 'home') {
var tabs = [ pandora.$ui.home = pandora.ui.home().fadeInScreen();
{id: 'about', title: 'About', selected: true}, } else if (['about', 'news', 'tour', 'faq', 'tos', 'contact', 'software'].indexOf(data.id) > -1) {
{id: 'news', title: 'News'}, pandora.$ui.siteDialog = pandora.ui.siteDialog(data.id).open();
{id: 'tour', title: 'Take a Tour'}, pandora.URL.push(data.id);
{id: 'faq', title: 'Frequently Asked Questions'}, } else if (data.id == 'preferences') {
{id: 'tos', title: 'Terms of Service'}, pandora.$ui.preferencesDialog = pandora.ui.preferencesDialog().open();
{id: 'contact', title: 'Contact'}, } else if (data.id == 'signup') {
{id: 'software', title: 'Software'} pandora.$ui.accountDialog = pandora.ui.accountDialog('signup').open();
]; } else if (data.id == 'signinsignout') {
var $tabPanel = Ox.TabPanel({ pandora.$ui.accountDialog = (
content: function(id) { pandora.user.level == 'guest'
return Ox.SplitPanel({ ? pandora.ui.accountDialog('signin')
elements: [ : pandora.ui.accountSignoutDialog()
{ ).open();
element: Ox.Element()
.css({padding: '16px'})
.append(
$('<img>')
.attr({src: '/static/png/logo256.png'})
.css({width: '128px'})
),
size: 144
},
{
element: Ox.Element()
.css({padding: '16px', overflowY: 'auto'})
.html(Ox.repeat(Ox.getObjectById(tabs, id).title + ' ', 200))
}
],
orientation: 'horizontal'
});
},
tabs: tabs
})
.bindEvent({
change: function(data) {
$dialog.options({
title: Ox.getObjectById(tabs, data.selected).title
});
}
});
var $dialog = Ox.Dialog({
buttons: [
Ox.Button({
id: 'close',
title: 'Close'
}).bindEvent({
click: function() {
$dialog.close();
}
})
],
//closeButton: true,
content: $tabPanel,
height: Math.round((window.innerHeight - 24) * 0.75),
//maximizeButton: true,
minHeight: 256,
minWidth: 640,
title: 'About',
width: Math.round(window.innerWidth * 0.75),
}).open();
} else if (data.id == 'home') {
var $screen = $('<div>')
.attr({id: 'screen'})
.css({
position: 'absolute',
width: '100%',
height: '100%',
background: 'rgb(32, 32, 32)',
opacity: 0,
zIndex: 1000
})
.appendTo(Ox.UI.$body),
$reflectionImage = $('<img>')
.attr({
src: '/static/png/logo256.png'
})
.css({
position: 'absolute',
left: 0,
top: '160px',
right: 0,
bottom: 0,
width: '320px',
margin: 'auto',
opacity: 0,
MozTransform: 'scaleY(-1)',
WebkitTransform: 'scaleY(-1)'
})
.appendTo($screen),
$reflectionGradient = $('<div>')
.css({
position: 'absolute',
left: 0,
top: '160px',
right: 0,
bottom: 0,
width: '320px',
height: '160px',
margin: 'auto',
backgroundImage: '-webkit-linear-gradient(top, rgba(32, 32, 32, 0.8), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))'
})
.appendTo($screen),
$logo = $('<img>')
.attr({
id: 'logo',
src: '/static/png/logo256.png'
})
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: '160px',
width: window.innerWidth + 'px',
margin: 'auto'
})
.bind({
click: function() {
$screen.find(':not(#logo)').remove();
$logo.animate({
width: window.innerWidth + 'px'
}, 500)
$screen.animate({opacity: 0}, 500, function() {
$screen.remove();
});
}
})
.appendTo($screen),
$input = Ox.Input({
width: 156
})
.css({
position: 'absolute',
left: 0,
top: '48px',
right: '164px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.click(function(e) {
e.stopPropagation();
})
.appendTo($screen)
.focusInput(),
$findButton = Ox.Button({
title: 'Find',
width: 74
})
.css({
position: 'absolute',
left: '82px',
top: '48px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen),
$browseButton = Ox.Button({
title: 'Browse',
width: 74
})
.css({
position: 'absolute',
left: '246px',
top: '48px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen),
$signupButton = Ox.Button({
title: 'Sign Up',
width: 74
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '246px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen),
$signinButton = Ox.Button({
title: 'Sign In',
width: 74
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '82px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen),
$aboutButton = Ox.Button({
title: 'About ' + pandora.site.site.name,
width: 156
})
.css({
position: 'absolute',
left: '164px',
top: '112px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen),
$text = $('<div>')
.html('A Movie Database. \u2620 2007-2011 0x2620. All Open Source.')
.css({
position: 'absolute',
left: 0,
top: '176px',
right: 0,
bottom: 0,
width: '360px',
height: '16px',
margin: 'auto',
opacity: 0,
textAlign: 'center'
})
.appendTo($screen)
$screen.animate({opacity: 1}, 500, function() {
$screen.find(':not(#logo)').animate({opacity: 1}, 250)
});
$logo.animate({width: '320px'}, 500);
/*
var $dialog = Ox.Dialog({
buttons: [
Ox.Button({
id: 'close',
title: 'Close'
}).bindEvent({
click: function() {
$dialog.close();
}
})
],
height: 498,
id: 'home',
keys: {enter: 'close', escape: 'close'},
title: pandora.site.site.name,
width: 800
}).open();
*/
} else if (data.id == 'register') {
pandora.$ui.accountDialog = pandora.ui.accountDialog('register').open();
} else if (data.id == 'loginlogout') {
pandora.$ui.accountDialog = (pandora.user.level == 'guest' ?
pandora.ui.accountDialog('login') : pandora.ui.accountLogoutDialog()).open();
} else if (data.id == 'stills') { } else if (data.id == 'stills') {
var id = pandora.user.ui.item || pandora.user.ui.listItem; var id = pandora.user.ui.item || pandora.user.ui.listItem;
pandora.$ui.postersDialog = pandora.ui.framesDialog(id).open(); pandora.$ui.postersDialog = pandora.ui.framesDialog(id).open();

4
static/js/pandora/ui/viewSelect.js
View file

@ -7,9 +7,7 @@ pandora.ui.viewSelect = function() {
checked: pandora.user.ui.lists[pandora.user.ui.list].listView == view.id, checked: pandora.user.ui.lists[pandora.user.ui.list].listView == view.id,
title: 'View ' + view.title title: 'View ' + view.title
}); });
}) : pandora.site.itemViews.filter(function(view) { }) : pandora.site.itemViews.map(function(view) {
return !view.admin || pandora.user.level == 'admin';
}).map(function(view) {
return $.extend($.extend({}, view), { return $.extend($.extend({}, view), {
checked: pandora.user.ui.itemView == view.id, checked: pandora.user.ui.itemView == view.id,
title: 'View: ' + view.title title: 'View: ' + view.title

5
static/json/pandora.json
View file

@ -41,5 +41,8 @@
"js/pandora/ui/videoPreview.js", "js/pandora/ui/videoPreview.js",
"js/pandora/ui/editor.js", "js/pandora/ui/editor.js",
"js/pandora/ui/infoView.js", "js/pandora/ui/infoView.js",
"js/pandora/ui/mediaView.js" "js/pandora/ui/mediaView.js",
"js/pandora/ui/home.js",
"js/pandora/ui/preferencesDialog.js",
"js/pandora/ui/siteDialog.js"
] ]