From b100b443565d55773f5ac57a4633267e9c25244a Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 23 Oct 2011 14:25:23 +0000 Subject: [PATCH] add loading screen --- pandora/app/models.py | 2 +- static/js/init.js | 441 ++++++++++++++++++++++++---------- static/js/pandora/UI.js | 3 + static/js/pandora/appPanel.js | 2 +- static/js/pandora/home.js | 2 +- static/js/pandora/item.js | 2 +- 6 files changed, 323 insertions(+), 129 deletions(-) diff --git a/pandora/app/models.py b/pandora/app/models.py index bc5cbac6..ed50f097 100644 --- a/pandora/app/models.py +++ b/pandora/app/models.py @@ -71,7 +71,7 @@ def update_static(): print 'write', pandora_js with open(pandora_js, 'w') as f: - #data = ox.js.minify(data) + data = ox.js.minify(data) f.write(data) print 'write', pandora_json diff --git a/static/js/init.js b/static/js/init.js index 6901fd94..88912183 100644 --- a/static/js/init.js +++ b/static/js/init.js @@ -20,137 +20,138 @@ appPanel statusbar */ -// fixme: never set pandora.ui.videoPosition to 0 ... set to null a.k.a. delete -// fixme: sort=-director doesn't work -// fixme: clear items cache after login/logout +(function() { -Ox.load({ - UI: { - hideScreen: false, - loadImages: true, - showScreen: true, - theme: localStorage && localStorage.theme ? localStorage.theme : 'modern' - }, - Geo: {} -}, function(browserSupported) { - -// fixme: use Ox.extend() - - window.pandora = new Ox.App({url: '/api/'}).bindEvent({ - - load: function(data) { - - if (!browserSupported) { - return; - /* - $('.OxLoadingScreen') - .css({opacity: 0.9}) - .click($(this).remove); - */ - } - - Ox.extend(pandora, { - requests: {}, - ui: {} - }); - - loadResources(function() { - - Ox.print('Ox.App load', data); - - Ox.extend(pandora, { - $ui: { - body: $('body'), - document: $(document), - window: $(window) - .bind({ - resize: function() { - pandora.resizeWindow(); - }, - unload: function() { - pandora.unloadWindow(); - } - }) - }, - site: data.site, - user: data.user.level == 'guest' ? Ox.clone(data.site.user) : data.user - }); - - Ox.extend(pandora.site, { - clipKeys: Ox.map(data.site.clipKeys, function(key) { - return Ox.extend(key, { - operator: pandora.getSortOperator(key.id) - }); - }), - findKeys: Ox.map(data.site.itemKeys, function(key) { - return key.find ? key : null; - }), - itemsSection: pandora.site.itemName.plural.toLowerCase(), - sectionFolders: { - items: [ - {id: 'personal', title: 'Personal Lists'}, - {id: 'favorite', title: 'Favorite Lists', showBrowser: false}, - {id: 'featured', title: 'Featured Lists', showBrowser: false}, - {id: 'volumes', title: 'Local Volumes'} - ], - edits: [ - {id: 'personal', title: 'Personal Edits'}, - {id: 'favorite', title: 'Favorite Edits', showBrowser: false}, - {id: 'featured', title: 'Featured Edits', showBrowser: false} - ], - texts: [ - {id: 'personal', title: 'Personal Texts'}, - {id: 'favorite', title: 'Favorite Texts', showBrowser: false}, - {id: 'featured', title: 'Featured Texts', showBrowser: false} - ] - }, - sortKeys: Ox.map(pandora.site.itemKeys, function(key) { - return key.columnWidth ? Ox.extend(key, { - operator: pandora.getSortOperator(key.id) - }) : null; - }) - }); - - pandora.site.listSettings = {}; - Ox.map(pandora.site.user.ui, function(val, key) { - if (/^list[A-Z]/.test(key)) { - pandora.site.listSettings[key] = key[4].toLowerCase() + key.substr(5); - } - }); - - Ox.extend(pandora.user, { - sectionElement: 'buttons', - selectedMovies: [], // fixme: used for what? - videoFormat: Ox.UI.getVideoFormat(pandora.site.video.formats) - }); - - if (data.user.level == 'guest' && $.browser.mozilla) { - pandora.user.ui.theme = 'classic'; - } - - // set up url controller - - pandora.URL.init().parse(function() { - - Ox.UI.hideLoadingScreen(); - - Ox.Theme(pandora.user.ui.theme); - pandora.$ui.appPanel = pandora.ui.appPanel().display(); - Ox.Request.requests() && pandora.$ui.loadingIcon.start(); - pandora.$ui.body.ajaxStart(pandora.$ui.loadingIcon.start); - pandora.$ui.body.ajaxStop(pandora.$ui.loadingIcon.stop); - - pandora.site.sectionButtonsWidth = pandora.$ui.sectionButtons.width() + 8; - - }); + var debug = localStorage && localStorage.debug, + theme = localStorage && localStorage.theme || 'modern'; + loadImages(function(images) { + loadScreen(images); + if (debug) { + loadOxJS(function() { + loadOxUI(loadPandora); }); + } else { + loadOxUI(loadPandora); } }); - function loadResources(callback) { + function loadImages(callback) { + // Opera doesn't fire onload for SVGs, + // so we only wait for the PNG to load. + var images = {}; + images.logo = document.createElement('img'); + images.logo.onload = function() { + callback(images); + }; + images.logo.style.position = 'absolute'; + images.logo.style.left = 0; + images.logo.style.top = 0; + images.logo.style.right = 0; + images.logo.style.bottom = '160px'; + images.logo.style.width = '320px'; + images.logo.style.height = '160px'; + images.logo.style.margin = 'auto'; + images.logo.src = '/static/png/logo256.png'; + images.reflection = document.createElement('img'); + images.reflection.style.position = 'absolute'; + images.reflection.style.left = 0; + images.reflection.style.top = '160px'; + images.reflection.style.right = 0; + images.reflection.style.bottom = 0; + images.reflection.style.width = '320px'; + images.reflection.style.height = '160px'; + images.reflection.style.margin = 'auto'; + images.reflection.style.MozTransform = 'scaleY(-1)'; + images.reflection.style.OTransform = 'scaleY(-1)'; + images.reflection.style.WebkitTransform = 'scaleY(-1)'; + images.reflection.src = '/static/png/logo256.png'; + images.loadingIcon = document.createElement('img'); + images.loadingIcon.setAttribute('id', 'loadingIcon'); + images.loadingIcon.style.position = 'absolute'; + images.loadingIcon.style.left = 0; + images.loadingIcon.style.top = '80px'; + images.loadingIcon.style.right = 0; + images.loadingIcon.style.bottom = 0; + images.loadingIcon.style.width = '32px'; + images.loadingIcon.style.height = '32px'; + images.loadingIcon.style.margin = 'auto'; + images.loadingIcon.src = '/static/oxjs/' + (debug ? 'dev' : 'build') + + '/Ox.UI/themes/' + theme + '/svg/symbolLoadingAnimated.svg'; + } + + function loadScreen(images) { + var gradient = document.createElement('div'); + gradient.style.position = 'absolute'; + gradient.style.left = 0; + gradient.style.top = '160px'; + gradient.style.right = 0; + gradient.style.bottom = 0; + gradient.style.width = '320px'; + gradient.style.height = '160px'; + gradient.style.margin = 'auto'; + gradient.style.background = theme == 'classic' + ? '-moz-linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))' + : '-moz-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))'; + gradient.style.background = theme == 'classic' + ? '-o-linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))' + : '-o-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))'; + gradient.style.background = theme == 'classic' + ? '-webkit-linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))' + : '-webkit-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))'; + loadingScreen = document.createElement('div'); + loadingScreen.setAttribute('id', 'loadingScreen'); + loadingScreen.className = 'OxScreen'; + loadingScreen.style.position = 'absolute'; + loadingScreen.style.width = '100%'; + loadingScreen.style.height = '100%'; + loadingScreen.style.backgroundColor = theme == 'classic' + ? 'rgb(224, 224, 224)' : 'rgb(32, 32, 32)'; + loadingScreen.style.zIndex = '1001'; + Ox.print(images) + loadingScreen.appendChild(images.logo); + loadingScreen.appendChild(images.reflection); + loadingScreen.appendChild(gradient); + loadingScreen.appendChild(images.loadingIcon); + document.body.style.margin = 0; + document.body.appendChild(loadingScreen); + } + + function loadOxJS(callback) { + var script = document.createElement('script'); + script.onload = callback; + script.src = '/static/oxjs/dev/Ox.js'; + script.type = 'text/javascript'; + document.head.appendChild(script); + } + + function loadOxUI(callback) { + Ox.load({ + UI: { + theme: theme + }, + Geo: {} + }, callback) + } + + function loadPandora(browserSupported) { + window.pandora = Ox.App({url: '/api/'}).bindEvent({ + load: function(data) { + data.browserSupported = browserSupported; + Ox.extend(pandora, { + requests: {}, + ui: {} + }); + loadPandoraFiles(function() { + initPandora(data); + }); + } + }); + } + + function loadPandoraFiles(callback) { var prefix = '/static/'; - if(localStorage && localStorage.debug) { + if (localStorage && localStorage.debug) { Ox.getJSON(prefix + 'json/pandora.json', function(files) { var promises = []; files.forEach(function(file) { @@ -173,4 +174,194 @@ Ox.load({ } } -}); + function initPandora(data) { + + Ox.print('Ox.App load', data); + + Ox.extend(pandora, { + $ui: { + body: $('body'), + document: $(document), + window: $(window) + .bind({ + resize: function() { + pandora.resizeWindow(); + }, + unload: function() { + pandora.unloadWindow(); + } + }) + }, + site: data.site, + user: data.user.level == 'guest' ? Ox.clone(data.site.user) : data.user + }); + + Ox.extend(pandora.site, { + clipKeys: Ox.map(data.site.clipKeys, function(key) { + return Ox.extend(key, { + operator: pandora.getSortOperator(key.id) + }); + }), + findKeys: Ox.map(data.site.itemKeys, function(key) { + return key.find ? key : null; + }), + itemsSection: pandora.site.itemName.plural.toLowerCase(), + sectionFolders: { + items: [ + {id: 'personal', title: 'Personal Lists'}, + {id: 'favorite', title: 'Favorite Lists', showBrowser: false}, + {id: 'featured', title: 'Featured Lists', showBrowser: false}, + {id: 'volumes', title: 'Local Volumes'} + ], + edits: [ + {id: 'personal', title: 'Personal Edits'}, + {id: 'favorite', title: 'Favorite Edits', showBrowser: false}, + {id: 'featured', title: 'Featured Edits', showBrowser: false} + ], + texts: [ + {id: 'personal', title: 'Personal Texts'}, + {id: 'favorite', title: 'Favorite Texts', showBrowser: false}, + {id: 'featured', title: 'Featured Texts', showBrowser: false} + ] + }, + sortKeys: Ox.map(pandora.site.itemKeys, function(key) { + return key.columnWidth ? Ox.extend(key, { + operator: pandora.getSortOperator(key.id) + }) : null; + }) + }); + + pandora.site.listSettings = {}; + Ox.map(pandora.site.user.ui, function(val, key) { + if (/^list[A-Z]/.test(key)) { + pandora.site.listSettings[key] = key[4].toLowerCase() + key.substr(5); + } + }); + + Ox.extend(pandora.user, { + sectionElement: 'buttons', + selectedMovies: [], // fixme: used for what? + videoFormat: Ox.UI.getVideoFormat(pandora.site.video.formats) + }); + + if (data.user.level == 'guest' && $.browser.mozilla) { + pandora.user.ui.theme = 'classic'; + } + + // set up url controller + + pandora.URL.init().parse(function() { + + if (data.browserSupported) { + $('#loadingScreen').remove(); + } else { + loadBrowserMessage(); + } + + Ox.Theme(pandora.user.ui.theme); + pandora.$ui.appPanel = pandora.ui.appPanel().display(); + Ox.Request.requests() && pandora.$ui.loadingIcon.start(); + pandora.$ui.body.ajaxStart(pandora.$ui.loadingIcon.start); + pandora.$ui.body.ajaxStop(pandora.$ui.loadingIcon.stop); + + pandora.site.sectionButtonsWidth = pandora.$ui.sectionButtons.width() + 8; + + }); + + } + + function loadBrowserMessage() { + + var isMSIE = $.browser.msie, + browsers = Ox.merge( + isMSIE ? [{name: 'Chrome Frame', url: 'http://google.com/chromeframe/'}] : [], + [ + {name: 'Chrome', url: 'http://google.com/chrome/'}, + {name: 'Firefox', url: 'http://mozilla.org/firefox/'}, + {name: 'Safari', url: 'http://apple.com/safari/'} + ] + ), + images = browsers.map(function(browser) { + return Ox.PATH + 'Ox.UI/png/browser' + browser.name.replace(' ', '') + '128.png'; + }), + $loadingScreen = $('#loadingScreen'); + + loadImages(images, function() { + var html = pandora.site.site.name + + ' requires an up-to-date web browser. Please take a moment to ' + + ( + isMSIE + ? 'install ' + browsers[0].name + ' or ' + : '' + ) + + 'download ' + browsers.filter(function(browser) { + return browser.name != 'Chrome Frame'; + }).map(function(browser, i) { + return '' + browser.name + '' + + (i == 0 ? ', ' : i == 1 ? ' or ' : ''); + }).join('') + + '. Otherwise, proceed at your own risk.', + $message = $('
') + .css({ + position: 'absolute', + left: 0, + top: '160px', + right: 0, + bottom: 0, + width: '320px', + height: '160px', + margin: 'auto' + }), + $images = $('
') + .css({ + margin: '12px', + textAlign: 'center' + }) + .appendTo($message); + $('#loadingIcon').remove(); + $message.appendTo($loadingScreen); + browsers.forEach(function(browser) { + $('') + .attr({ + href: browser.url, + title: browser.name + }) + .append( + $('') + .attr({ + src: Ox.PATH + 'Ox.UI/png/browser' + browser.name.replace(' ', '') + '128.png' + }) + .css({width: '32px', height: '32px', margin: '4px'}) + ) + .appendTo($images); + }); + $('
') + .css({ + textAlign: 'center' + }) + .html(html) + .appendTo($message); + + }); + + function loadImages(images, callback) { + Ox.loadFile(images.shift(), function() { + if (images.length) { + loadImages(images, callback); + } else { + callback(); + } + }); + } + + pandora.proceed = function() { + $loadingScreen.animate({ + opacity: 0 + }, 1000, function() { + $loadingScreen.remove(); + }); + } + + } + +}()); diff --git a/static/js/pandora/UI.js b/static/js/pandora/UI.js index 6bb282a5..36a1200b 100644 --- a/static/js/pandora/UI.js +++ b/static/js/pandora/UI.js @@ -79,6 +79,9 @@ pandora.UI = (function() { var item = args['item'] || pandora.user.ui.item, list = pandora.user.ui._list || ''; Ox.print('item/list', item, list, '...', args['videoPoints.' + item]) + if (!pandora.user.ui.lists[list]) { + add['lists.' + that.encode(list)] = {}; + } Ox.forEach(args, function(val, key) { if (Object.keys(listSettings).indexOf(key) > -1) { // if applicable, copy setting to list setting diff --git a/static/js/pandora/appPanel.js b/static/js/pandora/appPanel.js index f00a82cc..5e6bf387 100644 --- a/static/js/pandora/appPanel.js +++ b/static/js/pandora/appPanel.js @@ -14,7 +14,7 @@ pandora.ui.appPanel = function() { }); that.display = function() { // fixme: move animation into Ox.App - var animate = $('#home').length == 0; + var animate = $('.OxScreen').length == 0; Ox.print('ANIMATE?', animate) animate && pandora.$ui.body.css({opacity: 0}); that.appendTo(pandora.$ui.body); diff --git a/static/js/pandora/home.js b/static/js/pandora/home.js index 3ad785a6..00f11e54 100644 --- a/static/js/pandora/home.js +++ b/static/js/pandora/home.js @@ -6,7 +6,6 @@ pandora.ui.home = function() { var that = $('
') .addClass('OxScreen') - .attr({id: 'home'}) .css({ position: 'absolute', width: '100%', @@ -26,6 +25,7 @@ pandora.ui.home = function() { margin: 'auto', opacity: 0, MozTransform: 'scaleY(-1)', + OTransform: 'scaleY(-1)', WebkitTransform: 'scaleY(-1)' }) .appendTo(that), diff --git a/static/js/pandora/item.js b/static/js/pandora/item.js index 6872d100..61c84398 100644 --- a/static/js/pandora/item.js +++ b/static/js/pandora/item.js @@ -149,7 +149,7 @@ pandora.ui.item = function() { // fixme: duplicated var clipsQuery = pandora.getClipsQuery(), isClipsQuery = !!clipsQuery.conditions.length; - // + // ... pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.player = Ox.VideoPanelPlayer({ annotationsSize: pandora.user.ui.annotationsSize, censored: censored,