better integration of home, about, preferences, login, etc, and support for /item/position urls
This commit is contained in:
parent
2ae3edb488
commit
9eacf537fb
11 changed files with 402 additions and 322 deletions
|
@ -424,7 +424,8 @@
|
|||
{"id": "player", "title": "Player"},
|
||||
{"id": "timeline", "title": "Timeline"},
|
||||
{"id": "map", "title": "Map"},
|
||||
{"id": "calendar", "title": "Calendar"}
|
||||
{"id": "calendar", "title": "Calendar"},
|
||||
{"id": "files", "title": "Files"}
|
||||
],
|
||||
"layers": [
|
||||
{
|
||||
|
@ -537,6 +538,7 @@
|
|||
"showAnnotations": true,
|
||||
"showControls": true,
|
||||
"showGroups": true,
|
||||
"showHome": true,
|
||||
"showInfo": true,
|
||||
"showMovies": true,
|
||||
"showFolder": {
|
||||
|
|
|
@ -23,7 +23,7 @@ Ox.load('Geo', function() {
|
|||
window.pandora = new Ox.App({url: '/api/'}).bindEvent({
|
||||
|
||||
load: function(event, data) {
|
||||
$.extend(pandora, {
|
||||
Ox.extend(pandora, {
|
||||
requests: {},
|
||||
ui: {}
|
||||
});
|
||||
|
@ -32,7 +32,7 @@ Ox.load('Geo', function() {
|
|||
|
||||
Ox.UI.hideLoadingScreen();
|
||||
|
||||
$.extend(pandora, {
|
||||
Ox.extend(pandora, {
|
||||
$ui: {
|
||||
body: $('body'),
|
||||
document: $(document),
|
||||
|
@ -41,9 +41,9 @@ Ox.load('Geo', function() {
|
|||
.unload(unloadWindow)
|
||||
},
|
||||
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) {
|
||||
return key.find ? key : null;
|
||||
}),
|
||||
|
@ -75,10 +75,7 @@ Ox.load('Geo', function() {
|
|||
return key.columnWidth ? key : null;
|
||||
})
|
||||
});
|
||||
pandora.site.itemViews.push(
|
||||
{id: 'files', title: 'Files', admin: 'true'}
|
||||
);
|
||||
$.extend(pandora.user, {
|
||||
Ox.extend(pandora.user, {
|
||||
infoRatio: 16 / 9,
|
||||
sectionElement: 'buttons',
|
||||
selectedMovies: [],
|
||||
|
|
|
@ -4,6 +4,14 @@
|
|||
pandora.URL = (function() {
|
||||
|
||||
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) {
|
||||
Ox.print('URL', url)
|
||||
document.location = decodeURIComponent(url.substr(5));
|
||||
|
@ -15,11 +23,27 @@ pandora.URL = (function() {
|
|||
item: ''
|
||||
});
|
||||
},
|
||||
'^(|about|archives|faq|help|license|home|news|preferences|software|terms|tour)$': function(url) {
|
||||
pandora.UI.set({
|
||||
section: 'site',
|
||||
sitePage: url || 'home'
|
||||
});
|
||||
'^(about|faq|home|news|software|terms|tour)$': function(url) {
|
||||
pandora.$ui.siteDialog = pandora.ui.siteDialog(url).open();
|
||||
pandora.Query.updateGroups();
|
||||
},
|
||||
'^(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) {
|
||||
var split = url.split('/'),
|
||||
|
@ -53,18 +77,40 @@ pandora.URL = (function() {
|
|||
},
|
||||
'^[0-9A-Z]': function(url) {
|
||||
var split = url.split('/'),
|
||||
length = split.length,
|
||||
item = split[0],
|
||||
view = new RegExp(
|
||||
'^(' + $.map(pandora.site.itemViews, function(v) {
|
||||
return v.id;
|
||||
}).join('|') + ')$'
|
||||
).exec(split[1]);
|
||||
view = view ? view[0] : pandora.user.ui.itemView;
|
||||
'^(' + $.map(pandora.site.itemViews, function(v) {
|
||||
return v.id;
|
||||
}).join('|') + ')$'
|
||||
).exec(split[1]),
|
||||
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({
|
||||
section: 'items',
|
||||
item: item,
|
||||
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) +
|
||||
document.location.search +
|
||||
document.location.hash;
|
||||
$.each(regexps, function(re, fn) {
|
||||
Ox.forEach(regexps, function(fn, re) {
|
||||
//Ox.print(url, 're', re)
|
||||
re = new RegExp(re);
|
||||
if (re.test(url)) {
|
||||
|
@ -106,6 +152,16 @@ pandora.URL = (function() {
|
|||
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() {
|
||||
var oldUserUI = Ox.clone(pandora.user.ui);
|
||||
Ox.Request.cancel();
|
||||
|
|
|
@ -102,14 +102,14 @@ pandora.getVideoPartsAndPoints = function(durations, points) {
|
|||
return ret;
|
||||
};
|
||||
|
||||
pandora.login = function(data) {
|
||||
pandora.signin = function(data) {
|
||||
pandora.user = data.user;
|
||||
pandora.Query.updateGroups();
|
||||
Ox.Theme(pandora.user.ui.theme);
|
||||
pandora.$ui.appPanel.reload();
|
||||
};
|
||||
|
||||
pandora.logout = function(data) {
|
||||
pandora.signout = function(data) {
|
||||
pandora.user = data.user;
|
||||
pandora.Query.updateGroups();
|
||||
Ox.Theme(pandora.site.user.ui.theme);
|
||||
|
|
|
@ -22,28 +22,28 @@ pandora.ui.accountDialogOptions = function(action, value) {
|
|||
//Ox.print('ACTION', action)
|
||||
pandora.$ui.accountForm && pandora.$ui.accountForm.removeElement();
|
||||
var buttons = {
|
||||
login: ['register', 'reset'],
|
||||
register: ['login'],
|
||||
reset: ['login'],
|
||||
resetAndLogin: []
|
||||
signin: ['signup', 'reset'],
|
||||
signup: ['signin'],
|
||||
reset: ['signin'],
|
||||
resetAndSignin: []
|
||||
},
|
||||
buttonTitle = {
|
||||
login: 'Login',
|
||||
register: 'Register',
|
||||
signin: 'Sign In',
|
||||
signup: 'Sign Up',
|
||||
reset: 'Reset Password',
|
||||
resetAndLogin: 'Reset Password and Login'
|
||||
resetAndSignin: 'Reset Password and Sign In'
|
||||
},
|
||||
dialogText = {
|
||||
login: 'To login 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.',
|
||||
signin: 'To sign in to your account, please enter your username and password.',
|
||||
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.',
|
||||
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 = {
|
||||
login: 'Login',
|
||||
register: 'Register',
|
||||
signin: 'Sign In',
|
||||
signup: 'Sign Up',
|
||||
reset: 'Reset Password',
|
||||
resetAndLogin: 'Reset Password'
|
||||
resetAndSignin: 'Reset Password'
|
||||
};
|
||||
function button(type) {
|
||||
if (type == 'cancel') {
|
||||
|
@ -115,10 +115,10 @@ pandora.ui.accountForm = function(action, value) {
|
|||
});
|
||||
}
|
||||
var items = {
|
||||
'login': ['username', 'password'],
|
||||
'register': ['newUsername', 'password', 'email'],
|
||||
'signin': ['username', 'password'],
|
||||
'signup': ['newUsername', 'password', 'email'],
|
||||
'reset': ['usernameOrEmail'],
|
||||
'resetAndLogin': ['oldUsername', 'newPassword', 'code']
|
||||
'resetAndSignin': ['oldUsername', 'newPassword', 'code']
|
||||
},
|
||||
$items = $.map(items[action], function(v) {
|
||||
return item(v, value);
|
||||
|
@ -127,38 +127,39 @@ pandora.ui.accountForm = function(action, value) {
|
|||
id: 'accountForm' + Ox.toTitleCase(action),
|
||||
items: $items,
|
||||
submit: function(data, callback) {
|
||||
if (action == 'login') {
|
||||
if (action == 'signin') {
|
||||
pandora.api.signin(data, function(result) {
|
||||
if (!result.data.errors) {
|
||||
pandora.$ui.accountDialog.close();
|
||||
pandora.login(result.data);
|
||||
pandora.signin(result.data);
|
||||
} else {
|
||||
callback([{id: 'password', message: 'Incorrect password'}]);
|
||||
}
|
||||
});
|
||||
} else if (action == 'register') {
|
||||
} else if (action == 'signup') {
|
||||
pandora.api.signup(data, function(result) {
|
||||
if (!result.data.errors) {
|
||||
pandora.$ui.accountDialog.close();
|
||||
pandora.login(result.data);
|
||||
pandora.signin(result.data);
|
||||
pandora.ui.accountWelcomeDialog().open();
|
||||
} else {
|
||||
callback([{id: 'password', message: result.data.errors.toString()}]); // fixme
|
||||
}
|
||||
});
|
||||
} else if (action == 'reset') {
|
||||
Ox.print('DATA???', data)
|
||||
var usernameOrEmail = data.usernameOrEmail,
|
||||
key = usernameOrEmail[0].id;
|
||||
key = usernameOrEmail[0];
|
||||
data = {};
|
||||
data[key] = usernameOrEmail[1];
|
||||
pandora.api.requestToken(data, function(result) {
|
||||
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 {
|
||||
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) {
|
||||
if (!result.data.errors) {
|
||||
pandora.$ui.accountDialog.close();
|
||||
|
@ -302,7 +303,7 @@ pandora.ui.accountForm = function(action, value) {
|
|||
return that;
|
||||
};
|
||||
|
||||
pandora.ui.accountLogoutDialog = function() {
|
||||
pandora.ui.accountSignoutDialog = function() {
|
||||
var that = Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
|
@ -310,15 +311,15 @@ pandora.ui.accountLogoutDialog = function() {
|
|||
title: 'Cancel'
|
||||
}).bindEvent('click', function() {
|
||||
that.close();
|
||||
pandora.$ui.mainMenu.getItem('loginlogout').toggleTitle();
|
||||
pandora.$ui.mainMenu.getItem('signinsignout').toggleTitle();
|
||||
}),
|
||||
Ox.Button({
|
||||
id: 'logout',
|
||||
title: 'Logout'
|
||||
id: 'signout',
|
||||
title: 'Sign Out'
|
||||
}).bindEvent('click', function() {
|
||||
that.close();
|
||||
pandora.api.signout({}, function(result) {
|
||||
pandora.logout(result.data);
|
||||
pandora.signout(result.data);
|
||||
});
|
||||
})
|
||||
],
|
||||
|
@ -331,12 +332,12 @@ pandora.ui.accountLogoutDialog = function() {
|
|||
.append(
|
||||
Ox.Element()
|
||||
.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,
|
||||
height: 128,
|
||||
keys: {enter: 'logout', escape: 'cancel'},
|
||||
title: 'Logout',
|
||||
keys: {enter: 'signout', escape: 'cancel'},
|
||||
title: 'Sign Out',
|
||||
width: 304
|
||||
});
|
||||
return that;
|
||||
|
@ -350,6 +351,7 @@ pandora.ui.accountWelcomeDialog = function() {
|
|||
title: 'Preferences...'
|
||||
}).bindEvent('click', function() {
|
||||
that.close();
|
||||
pandora.$ui.preferencesDialog = pandora.ui.preferencesDialog().open();
|
||||
}),
|
||||
{},
|
||||
Ox.Button({
|
||||
|
|
|
@ -14,9 +14,11 @@ pandora.ui.appPanel = function() {
|
|||
});
|
||||
that.display = function() {
|
||||
// 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);
|
||||
pandora.$ui.body.animate({opacity: 1}, 1000);
|
||||
animate && pandora.$ui.body.animate({opacity: 1}, 1000);
|
||||
return that;
|
||||
}
|
||||
that.reload = function() {
|
||||
|
|
264
static/js/pandora/ui/home.js
Normal file
264
static/js/pandora/ui/home.js
Normal 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;
|
||||
|
||||
};
|
|
@ -1,5 +1,7 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
|
||||
// fixme: remove
|
||||
|
||||
pandora.ui.homePage = function() {
|
||||
|
||||
var that = Ox.Element()
|
||||
|
|
|
@ -28,8 +28,8 @@ pandora.ui.mainMenu = function() {
|
|||
{ id: 'preferences', title: 'Preferences...', disabled: isGuest, keyboard: 'control ,' },
|
||||
{ id: 'archives', title: 'Archives...', disabled: isGuest },
|
||||
{},
|
||||
{ id: 'register', title: 'Register...', disabled: !isGuest },
|
||||
{ id: 'loginlogout', title: isGuest ? 'Login...' : 'Logout...' }
|
||||
{ id: 'signup', title: 'Sign Up...', disabled: !isGuest },
|
||||
{ id: 'signinsignout', title: isGuest ? 'Sign In...' : 'Sign Out...' }
|
||||
] },
|
||||
{ id: 'listMenu', title: 'List', items: [
|
||||
{ id: 'history', title: 'History', items: [
|
||||
|
@ -201,267 +201,21 @@ pandora.ui.mainMenu = function() {
|
|||
}
|
||||
},
|
||||
click: function(event, data) {
|
||||
if (data.id == 'about') {
|
||||
var tabs = [
|
||||
{id: 'about', title: 'About', selected: true},
|
||||
{id: 'news', title: 'News'},
|
||||
{id: 'tour', title: 'Take a Tour'},
|
||||
{id: 'faq', title: 'Frequently Asked Questions'},
|
||||
{id: 'tos', title: 'Terms of Service'},
|
||||
{id: 'contact', title: 'Contact'},
|
||||
{id: 'software', title: 'Software'}
|
||||
];
|
||||
var $tabPanel = Ox.TabPanel({
|
||||
content: function(id) {
|
||||
return Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
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();
|
||||
if (data.id == 'home') {
|
||||
pandora.$ui.home = pandora.ui.home().fadeInScreen();
|
||||
} else if (['about', 'news', 'tour', 'faq', 'tos', 'contact', 'software'].indexOf(data.id) > -1) {
|
||||
pandora.$ui.siteDialog = pandora.ui.siteDialog(data.id).open();
|
||||
pandora.URL.push(data.id);
|
||||
} else if (data.id == 'preferences') {
|
||||
pandora.$ui.preferencesDialog = pandora.ui.preferencesDialog().open();
|
||||
} else if (data.id == 'signup') {
|
||||
pandora.$ui.accountDialog = pandora.ui.accountDialog('signup').open();
|
||||
} else if (data.id == 'signinsignout') {
|
||||
pandora.$ui.accountDialog = (
|
||||
pandora.user.level == 'guest'
|
||||
? pandora.ui.accountDialog('signin')
|
||||
: pandora.ui.accountSignoutDialog()
|
||||
).open();
|
||||
} else if (data.id == 'stills') {
|
||||
var id = pandora.user.ui.item || pandora.user.ui.listItem;
|
||||
pandora.$ui.postersDialog = pandora.ui.framesDialog(id).open();
|
||||
|
|
|
@ -7,9 +7,7 @@ pandora.ui.viewSelect = function() {
|
|||
checked: pandora.user.ui.lists[pandora.user.ui.list].listView == view.id,
|
||||
title: 'View ' + view.title
|
||||
});
|
||||
}) : pandora.site.itemViews.filter(function(view) {
|
||||
return !view.admin || pandora.user.level == 'admin';
|
||||
}).map(function(view) {
|
||||
}) : pandora.site.itemViews.map(function(view) {
|
||||
return $.extend($.extend({}, view), {
|
||||
checked: pandora.user.ui.itemView == view.id,
|
||||
title: 'View: ' + view.title
|
||||
|
|
|
@ -41,5 +41,8 @@
|
|||
"js/pandora/ui/videoPreview.js",
|
||||
"js/pandora/ui/editor.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"
|
||||
]
|
||||
|
|
Loading…
Reference in a new issue