pandora/static/js/pandora.js

392 lines
14 KiB
JavaScript
Raw Normal View History

2011-07-29 18:37:11 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-11-03 01:52:15 +00:00
2011-11-05 16:51:20 +00:00
'use strict';
2011-09-27 14:14:40 +00:00
/*
---- UI Tree ----
appPanel
mainMenu
mainPanel
leftPanel
sectionbar
folders
info
rightPanel
toolbar
contentPanel
browser <-- should be filters or browser
list or item
statusbar <-- make part of content panel
2011-09-27 14:14:40 +00:00
*/
2011-10-23 14:25:23 +00:00
(function() {
2011-05-25 19:42:45 +00:00
2011-11-03 01:52:15 +00:00
window.onerror = function(error, url, line) {
try {
pandora.api.log({
text: error,
url: url,
line: line
});
} catch(e) {}
};
2011-12-30 20:47:40 +00:00
var debug = localStorage && localStorage['pandora.debug'],
theme = localStorage && localStorage['Ox.theme']
&& JSON.parse(localStorage['Ox.theme']) || 'modern';
2011-05-25 19:42:45 +00:00
2011-10-23 14:25:23 +00:00
loadImages(function(images) {
loadScreen(images);
if (debug) {
loadOxJS(function() {
loadOxUI(loadPandora);
});
} else {
loadOxUI(loadPandora);
}
});
2011-09-03 15:25:32 +00:00
2011-10-23 14:25:23 +00:00
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';
}
2011-09-09 23:05:20 +00:00
2011-10-23 14:25:23 +00:00
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))';
2011-10-27 18:47:52 +00:00
var loadingScreen = document.createElement('div');
2011-10-23 14:25:23 +00:00
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';
loadingScreen.appendChild(images.logo);
loadingScreen.appendChild(images.reflection);
loadingScreen.appendChild(gradient);
loadingScreen.appendChild(images.loadingIcon);
document.body.style.margin = 0;
document.body.appendChild(loadingScreen);
}
2011-09-18 21:18:05 +00:00
2011-10-23 14:25:23 +00:00
function loadOxJS(callback) {
var script = document.createElement('script');
script.onload = callback;
script.src = '/static/oxjs/dev/Ox.js';
script.type = 'text/javascript';
2011-10-29 17:46:46 +00:00
document.head.appendChild(script);
2011-10-23 14:25:23 +00:00
}
2011-10-23 14:25:23 +00:00
function loadOxUI(callback) {
Ox.load({
UI: {
theme: theme
},
Geo: {}
}, callback);
2011-10-23 14:25:23 +00:00
}
2011-10-23 14:25:23 +00:00
function loadPandora(browserSupported) {
2011-12-30 20:47:40 +00:00
window.pandora = Ox.App({
name: 'pandora',
url: '/api/',
}).bindEvent({
2011-10-23 14:25:23 +00:00
load: function(data) {
data.browserSupported = browserSupported;
Ox.extend(pandora, {
requests: {},
ui: {}
2011-09-09 23:05:20 +00:00
});
2011-10-23 14:25:23 +00:00
loadPandoraFiles(function() {
initPandora(data);
2011-12-30 20:47:40 +00:00
if (pandora.localStorage('local')) {
var url = pandora.localStorage('local');
2011-12-27 06:54:49 +00:00
window.pandora.local = Ox.API({
2011-12-30 20:47:40 +00:00
'url': url + '/api/'
2011-12-27 06:54:49 +00:00
}, function() {
2011-12-30 20:47:40 +00:00
pandora.site.site.videoprefix = url;
2011-12-27 06:54:49 +00:00
});
}
});
2011-10-23 14:25:23 +00:00
}
});
}
2011-10-23 14:25:23 +00:00
function loadPandoraFiles(callback) {
2011-10-23 02:29:20 +00:00
var prefix = '/static/';
2011-12-30 20:47:40 +00:00
if (localStorage && localStorage['pandora.debug']) {
2011-10-23 02:29:20 +00:00
Ox.getJSON(prefix + 'json/pandora.json', function(files) {
var promises = [];
files.forEach(function(file) {
var dfd = new $.Deferred();
promises.push(dfd.promise());
Ox.loadFile(prefix + file, function() {
dfd.resolve();
});
2011-05-25 19:42:45 +00:00
});
2011-10-23 02:29:20 +00:00
$.when.apply(null, promises)
.done(function() {
callback();
})
.fail(function() {
throw new Error('File not found.');
});
2011-09-09 23:05:20 +00:00
});
2011-10-23 02:29:20 +00:00
} else {
2011-11-03 10:50:05 +00:00
Ox.loadFile(prefix + 'js/pandora.min.js', callback);
2011-10-23 02:29:20 +00:00
}
2011-09-09 23:05:20 +00:00
}
2011-10-23 14:25:23 +00:00
function initPandora(data) {
2011-11-04 15:54:42 +00:00
Ox.Log('', 'Ox.App load', data);
2011-10-23 14:25:23 +00:00
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
2011-10-23 14:25:23 +00:00
});
// make sure all valid ui settings are present
pandora.user.ui = Ox.extend(
Ox.clone(pandora.site.user.ui), pandora.user.ui
);
// make sure no invalid ui settings are present
Object.keys(pandora.user.ui).forEach(function(key) {
if (Ox.isUndefined(pandora.site.user.ui[key])) {
delete pandora.user.ui[key];
}
});
2011-10-23 14:25:23 +00:00
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},
2011-10-29 17:46:46 +00:00
{id: 'featured', title: 'Featured Edits', showBrowser: false}
2011-10-23 14:25:23 +00:00
],
texts: [
{id: 'personal', title: 'Personal Texts'},
{id: 'favorite', title: 'Favorite Texts', showBrowser: false},
2011-10-29 17:46:46 +00:00
{id: 'featured', title: 'Featured Texts', showBrowser: false}
]
2011-10-23 14:25:23 +00:00
},
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)
});
// set up url controller
pandora.URL.init().parse(function() {
if (data.browserSupported) {
$('#loadingScreen').remove();
} else {
loadBrowserMessage();
}
Ox.Theme(pandora.user.ui.theme);
2011-10-29 17:46:46 +00:00
pandora.$ui.appPanel = pandora.ui.appPanel().display();
2011-10-23 14:25:23 +00:00
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;
});
2011-10-29 17:46:46 +00:00
2011-10-23 14:25:23 +00:00
}
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 <a href="' + browsers[0].url + '">' + browsers[0].name + '</a> or '
: ''
)
+ 'download ' + browsers.filter(function(browser) {
return browser.name != 'Chrome Frame';
}).map(function(browser, i) {
return '<a href="' + browser.url + '">' + browser.name + '</a>'
+ (i == 0 ? ', ' : i == 1 ? ' or ' : '');
}).join('')
+ '. Otherwise, <a href="javascript:pandora.proceed()">proceed</a> at your own risk.',
$message = $('<div>')
.css({
position: 'absolute',
left: 0,
top: '160px',
right: 0,
bottom: 0,
width: '320px',
height: '160px',
margin: 'auto'
}),
$images = $('<div>')
.css({
margin: '12px',
textAlign: 'center'
})
.appendTo($message);
$('#loadingIcon').remove();
$message.appendTo($loadingScreen);
browsers.forEach(function(browser) {
$('<a>')
.attr({
href: browser.url,
title: browser.name
})
.append(
$('<img>')
.attr({
src: Ox.PATH + 'Ox.UI/png/browser' + browser.name.replace(' ', '') + '128.png'
})
.css({width: '32px', height: '32px', margin: '4px'})
)
.appendTo($images);
2011-10-29 17:46:46 +00:00
});
2011-10-23 14:25:23 +00:00
$('<div>')
.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();
});
}
}
}());