forked from 0x2620/pandora
merge changes
This commit is contained in:
commit
aff6d748fb
6 changed files with 323 additions and 129 deletions
|
@ -72,7 +72,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
|
||||
|
|
|
@ -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 <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);
|
||||
});
|
||||
$('<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();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}());
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -6,7 +6,6 @@ pandora.ui.home = function() {
|
|||
|
||||
var that = $('<div>')
|
||||
.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),
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue