From c851db9d058ee29bc5da244471897905eeb70738 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Wed, 24 Aug 2011 21:04:13 +0000 Subject: [PATCH] better integration of home, about, preferences, login, etc, and support for /item/position urls --- pandora/0xdb.json | 4 +- static/js/pandora.js | 13 +- static/js/pandora/URL.js | 78 ++++++-- static/js/pandora/pandora.js | 4 +- static/js/pandora/ui/account.js | 64 +++---- static/js/pandora/ui/appPanel.js | 6 +- static/js/pandora/ui/home.js | 264 +++++++++++++++++++++++++++ static/js/pandora/ui/homePage.js | 2 + static/js/pandora/ui/menu.js | 280 ++--------------------------- static/js/pandora/ui/viewSelect.js | 4 +- static/json/pandora.json | 5 +- 11 files changed, 402 insertions(+), 322 deletions(-) create mode 100644 static/js/pandora/ui/home.js diff --git a/pandora/0xdb.json b/pandora/0xdb.json index b1e847b..777251c 100644 --- a/pandora/0xdb.json +++ b/pandora/0xdb.json @@ -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": { diff --git a/static/js/pandora.js b/static/js/pandora.js index 7b653b0..a1de4e1 100644 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -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: [], diff --git a/static/js/pandora/URL.js b/static/js/pandora/URL.js index fcca951..7fb45b3 100644 --- a/static/js/pandora/URL.js +++ b/static/js/pandora/URL.js @@ -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(); diff --git a/static/js/pandora/pandora.js b/static/js/pandora/pandora.js index 2e407e9..75f6803 100644 --- a/static/js/pandora/pandora.js +++ b/static/js/pandora/pandora.js @@ -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); diff --git a/static/js/pandora/ui/account.js b/static/js/pandora/ui/account.js index 8c65bac..08518d6 100644 --- a/static/js/pandora/ui/account.js +++ b/static/js/pandora/ui/account.js @@ -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({ diff --git a/static/js/pandora/ui/appPanel.js b/static/js/pandora/ui/appPanel.js index 7e05f77..f00a82c 100644 --- a/static/js/pandora/ui/appPanel.js +++ b/static/js/pandora/ui/appPanel.js @@ -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() { diff --git a/static/js/pandora/ui/home.js b/static/js/pandora/ui/home.js new file mode 100644 index 0000000..aa91b05 --- /dev/null +++ b/static/js/pandora/ui/home.js @@ -0,0 +1,264 @@ +// vim: et:ts=4:sw=4:sts=4:ft=javascript + +pandora.ui.home = function() { + + var that = $('