decentral1se/pandora
1
0
Fork 0
forked from 0x2620/pandora
Code Issues Pull requests Projects Releases Wiki Activity

add pad.ma home screen

Browse source
This commit is contained in:
rolux 2012-02-15 09:23:30 +00:00
parent 52b10e6f14
commit aa5976273e
5 changed files with 437 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
pandora/itemlist/views.py
View file

@ -95,7 +95,7 @@ def findLists(request):
def is_featured_condition(x): def is_featured_condition(x):
return x['key'] == 'status' and \ return x['key'] == 'status' and \
x['value'] == 'featured' and \ x['value'] == 'featured' and \
x['operator'] == '=' x['operator'] in ('=', '==')
is_featured = len(filter(is_featured_condition, data['query'].get('conditions', []))) > 0 is_featured = len(filter(is_featured_condition, data['query'].get('conditions', []))) > 0
if is_section_request: if is_section_request:

73
static/js/pandora.js
View file

@ -52,42 +52,45 @@ appPanel
var images = {}; var images = {};
images.logo = document.createElement('img'); images.logo = document.createElement('img');
images.logo.onload = function() { images.logo.onload = function() {
var ratio = images.logo.width / images.logo.height,
width = 320,
height = width / ratio;
images.logo.style.position = 'absolute';
images.logo.style.left = 0;
images.logo.style.top = 0;
images.logo.style.right = 0;
images.logo.style.bottom = height + 'px';
images.logo.style.width = width + 'px';
images.logo.style.height = height + 'px';
images.logo.style.margin = 'auto';
images.reflection = document.createElement('img');
images.reflection.style.position = 'absolute';
images.reflection.style.left = 0;
images.reflection.style.top = height + 'px';
images.reflection.style.right = 0;
images.reflection.style.bottom = 0;
images.reflection.style.width = width + 'px';
images.reflection.style.height = height + 'px';
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';
callback(images); 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.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) { function loadScreen(images) {
@ -136,9 +139,7 @@ appPanel
function loadOxUI(callback) { function loadOxUI(callback) {
Ox.load({ Ox.load({
UI: { UI: {theme: theme},
theme: theme
},
Geo: {} Geo: {}
}, callback); }, callback);
} }

28
static/js/pandora/embedDialog.js
View file

@ -18,15 +18,14 @@ pandora.ui.embedDialog = function(data) {
], ],
closeButton: true, closeButton: true,
content: content, content: content,
height: height, height: 120,
keys: { keys: {
'escape': 'close' 'escape': 'close'
}, },
maximizeButton: true, maximizeButton: true,
minHeight: height, removeOnClose: true,
minWidth: width,
title: 'Embed Video', title: 'Embed Video',
width: width width: 600
}) })
.bindEvent({ .bindEvent({
close: function(data) { close: function(data) {
@ -45,7 +44,24 @@ pandora.ui.embedDialog = function(data) {
}); });
return url + query.join('&'); return url + query.join('&');
} }
content.html('To embed this video you need unicorns... or try this code:<br>'); content.html('To embed this video use this code on your page:<br>');
content.append($('<textarea>').css({width:"100%", height:"100%"}).val('<iframe width="'+width+'" height="'+height+'" src="'+constructUrl(data)+'" frameborder="0" allowfullscreen></iframe>')); content.append(
$('<textarea>')
.css({
width: '520px',
margin: '16px',
height: '100%'
}).val(
'<iframe width="' + width
+ '" height="' + height
+ '" src="' + constructUrl(data)
+ '" frameborder="0" allowfullscreen></iframe>'
).bind({
click: function() {
this.focus();
this.select();
}
})
);
return that; return that;
}; };

443
static/js/pandora/home.padma.js
View file

@ -4,7 +4,8 @@
pandora.ui.home = function() { pandora.ui.home = function() {
var that = $('<div>') var self = {},
that = $('<div>')
.addClass('OxScreen') .addClass('OxScreen')
.css({ .css({
position: 'absolute', position: 'absolute',
@ -13,35 +14,44 @@ pandora.ui.home = function() {
opacity: 0, opacity: 0,
zIndex: 1000 zIndex: 1000
}), }),
$box = $('<div>')
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
width: '560px',
margin: window.innerHeight / 2 - 80 + 'px auto 0 auto'
})
.appendTo(that),
$reflectionImage = $('<img>') $reflectionImage = $('<img>')
.attr({src: '/static/png/logo256.png'}) .attr({src: '/static/png/logo256.png'})
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: '160px', top: '80px',
right: 0, right: 0,
bottom: 0, bottom: 0,
width: '320px', width: '320px',
margin: 'auto', margin: '0 auto 0 auto',
opacity: 0,
MozTransform: 'scaleY(-1)', MozTransform: 'scaleY(-1)',
OTransform: 'scaleY(-1)', OTransform: 'scaleY(-1)',
WebkitTransform: 'scaleY(-1)' WebkitTransform: 'scaleY(-1)'
}) })
.appendTo(that), .appendTo($box),
$reflectionGradient = $('<div>') $reflectionGradient = $('<div>')
.addClass('OxReflection') .addClass('OxReflection')
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: '160px', top: '80px',
right: 0, right: 0,
bottom: 0,
width: '320px', width: '320px',
height: '160px', height: '160px',
margin: 'auto', margin: '0 auto 0 auto',
}) })
.appendTo(that), .appendTo($box),
$logo = $('<img>') $logo = $('<img>')
.attr({ .attr({
id: 'logo', id: 'logo',
@ -50,11 +60,9 @@ pandora.ui.home = function() {
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: 0,
right: 0, right: 0,
bottom: '160px', width: '320px',
width: window.innerWidth + 'px', margin: '0 auto 0 auto',
margin: 'auto',
cursor: 'pointer' cursor: 'pointer'
}) })
.bind({ .bind({
@ -62,17 +70,17 @@ pandora.ui.home = function() {
$browseButton.triggerEvent('click'); $browseButton.triggerEvent('click');
} }
}) })
.appendTo(that), .appendTo($box),
$findInput = Ox.Input({ $findInput = Ox.Input({
width: 156 width: 252
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: '48px', top: '104px',
right: '164px', right: '260px',
bottom: 0, bottom: 0,
margin: 'auto', margin: '0 auto 0 auto',
opacity: 0 opacity: 0
}) })
.click(function(e) { .click(function(e) {
@ -88,18 +96,18 @@ pandora.ui.home = function() {
} }
} }
}) })
.appendTo(that), .appendTo($box),
$findButton = Ox.Button({ $findButton = Ox.Button({
title: 'Find', title: 'Find',
width: 74 width: 122
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
left: '82px', left: '130px',
top: '48px', top: '104px',
right: 0, right: 0,
bottom: 0, bottom: 0,
margin: 'auto', margin: '0 auto 0 auto',
opacity: 0 opacity: 0
}) })
.bindEvent({ .bindEvent({
@ -121,18 +129,18 @@ pandora.ui.home = function() {
}); });
} }
}) })
.appendTo(that), .appendTo($box),
$browseButton = Ox.Button({ $browseButton = Ox.Button({
title: 'Browse', title: 'Browse',
width: 74 width: 122
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
left: '246px', left: '390px',
top: '48px', top: '104px',
right: 0, right: 0,
bottom: 0, bottom: 0,
margin: 'auto', margin: '0 auto 0 auto',
opacity: 0 opacity: 0
}) })
.bindEvent({ .bindEvent({
@ -141,18 +149,18 @@ pandora.ui.home = function() {
that.fadeOutScreen(); that.fadeOutScreen();
} }
}) })
.appendTo(that), .appendTo($box),
$signupButton = Ox.Button({ $signupButton = Ox.Button({
title: 'Sign Up', title: 'Sign Up',
width: 74 width: 122
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: '112px', top: '144px',
right: '246px', right: '390px',
bottom: 0, bottom: 0,
margin: 'auto', margin: '0 auto 0 auto',
opacity: 0 opacity: 0
}) })
.bindEvent({ .bindEvent({
@ -163,15 +171,15 @@ pandora.ui.home = function() {
}), }),
$signinButton = Ox.Button({ $signinButton = Ox.Button({
title: 'Sign In', title: 'Sign In',
width: 74 width: 122
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: '112px', top: '144px',
right: '82px', right: '130px',
bottom: 0, bottom: 0,
margin: 'auto', margin: '0 auto 0 auto',
opacity: 0 opacity: 0
}) })
.bindEvent({ .bindEvent({
@ -182,15 +190,15 @@ pandora.ui.home = function() {
}), }),
$preferencesButton = Ox.Button({ $preferencesButton = Ox.Button({
title: 'Preferences', title: 'Preferences',
width: 156 width: 252
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: '112px', top: '144px',
right: '164px', right: '260px',
bottom: 0, bottom: 0,
margin: 'auto', margin: '0 auto 0 auto',
opacity: 0 opacity: 0
}) })
.bindEvent({ .bindEvent({
@ -201,15 +209,15 @@ pandora.ui.home = function() {
}), }),
$aboutButton = Ox.Button({ $aboutButton = Ox.Button({
title: 'About ' + pandora.site.site.name, title: 'About ' + pandora.site.site.name,
width: 156 width: 252
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
left: '164px', left: '260px',
top: '112px', top: '144px',
right: 0, right: 0,
bottom: 0, bottom: 0,
margin: 'auto', margin: '0 auto 0 auto',
opacity: 0 opacity: 0
}) })
.bindEvent({ .bindEvent({
@ -218,61 +226,362 @@ pandora.ui.home = function() {
that.fadeOutScreen(); that.fadeOutScreen();
} }
}) })
.appendTo(that), .appendTo($box),
$text = $('<div>') $lists = $('<div>')
.html('Pad.ma is an online archive of densely text-annotated video material, primarily footage and not finished films. The entire collection is searchable and viewable online, and is free to download for non-commercial use.') .attr({id: 'lists'})
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: '176px', top: '184px',
right: 0, right: 0,
bottom: 0, bottom: 0,
width: '360px', width: '560px',
height: '16px', margin: '0 auto 0 auto',
margin: 'auto', opacity: 0
opacity: 0,
textAlign: 'center'
}) })
.appendTo(that); .appendTo($box);
if (pandora.user.level == 'guest') { if (pandora.user.level == 'guest') {
$signupButton.appendTo(that); $signupButton.appendTo($box);
$signinButton.appendTo(that); $signinButton.appendTo($box);
} else { } else {
$preferencesButton.appendTo(that); $preferencesButton.appendTo($box);
}
function hideLists() {
$lists.empty();
}
function showLists() {
pandora.api.findLists({
query: {
conditions: [{key: 'status', value: 'featured', operator: '=='}],
operator: '&'
},
keys: ['user', 'name', 'description'],
sort: [{key: 'position', operator: '+'}]
}, function(result) {
var lists = result.data.items,
items = 8, mouse = false, position = 0, selected = 0,
color = Ox.Theme() == 'classic'
? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)',
$label, $icon, $text,
$listsBox, $listsContainer, $listsContent, $list = [],
$previousButton, $nextButton;
if (lists.length) {
$label = Ox.Label({
textAlign: 'center',
title: '<b>Featured List' + (lists.length >= items ? 's' : '') + '</b>',
width: 512
})
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
margin: '0 auto 0 auto'
})
.appendTo($lists);
$text = Ox.Label({
width: 386
})
.addClass('OxSelectable')
.css({
position: 'absolute',
left: '24px',
top: '24px',
right: 0,
height: '104px',
borderTopLeftRadius: '32px',
borderBottomLeftRadius: '32px',
padding: '8px 8px 8px 130px',
overflowY: 'auto',
textOverflow: 'ellipsis',
whiteSpace: 'normal'
})
.html(
'<b>' + lists[selected].name + '</b><br><br>'
+ lists[selected].description
)
.appendTo($lists);
$icon = Ox.Element({
element: '<img>',
tooltip: 'View List'
})
.attr({
src: '/list/' + lists[selected].user + ':'
+ lists[selected].name + '/icon256.jpg'
})
.css({
position: 'absolute',
left: 0,
top: '24px',
right: '390px',
width: '122px',
height: '122px',
borderRadius: '32px',
margin: '0 auto 0 auto',
cursor: 'pointer'
})
.bindEvent({
anyclick: function() {
openList(selected);
}
})
.appendTo($lists);
if (lists.length >= items) {
$listsBox = $('<div>')
.css({
position: 'absolute',
left: 0,
top: '150px',
right: 0,
height: '65px', // 4+57+4
width: '560px', // 16+8+512+8+16
margin: '0 auto 0 auto'
})
.appendTo($lists);
$listsContainer = $('<div>')
.css({
position: 'absolute',
left: '20px',
right: '20px',
height: '65px',
width: '520px',
overflow: 'hidden'
})
.appendTo($listsBox);
$listsContent = $('<div>')
.css({
position: 'absolute',
width: lists.length * 65 + 'px',
height: '65px'
})
.appendTo($listsContainer);
if (lists.length > items) {
$previousButton = Ox.Button({
title: 'left',
type: 'image'
})
.addClass(position > 0 ? 'visible' : '')
.css({
position: 'absolute',
left: 0,
top: '25px',
opacity: 0
})
.hide()
.bindEvent({
mousedown: function() {
scrollToPosition(position - 1, true);
},
mouserepeat: function() {
scrollToPosition(position - 1, false);
}
})
.appendTo($listsBox);
$nextButton = Ox.Button({
title: 'right',
type: 'image'
})
.addClass(position < lists.length - 1 ? 'visible' : '')
.css({
position: 'absolute',
right: 0,
top: '25px',
opacity: 0
})
.hide()
.bindEvent({
mousedown: function() {
scrollToPosition(position + 1, true);
},
mouserepeat: function() {
scrollToPosition(position + 1, false);
}
})
.appendTo($listsBox);
$listsBox.bind({
mouseenter: function() {
mouse = true;
$('.visible').show().stop().animate({
opacity: 1
}, 250);
},
mouseleave: function() {
mouse = false;
$('.visible').stop().animate({
opacity: 0
}, 250, function() {
$(this).hide();
});
}
});
self.keydown = function(e) {
var focused = Ox.Focus.focused(),
key = Ox.KEYS[e.keyCode];
if (
focused === null
|| !Ox.UI.elements[focused].hasClass('OxInput')
) {
if (key == 'left' && selected > 0) {
selectList(selected - 1);
} else if (key == 'up' && selected > 0) {
selectList(0);
} else if (key == 'right' && selected < lists.length - 1) {
selectList(selected + 1);
} else if (key == 'down' && selected < lists.length - 1) {
selectList(lists.length - 1);
}
}
}
Ox.$document.bind({keydown: self.keydown});
}
lists.forEach(function(list, i) {
$list[i] = Ox.Element({
element: '<img>',
tooltip: list.name
})
.attr({
src: '/list/' + list.user + ':'
+ list.name + '/icon256.jpg'
})
.css({
float: 'left',
width: '57px',
height: '57px',
borderRadius: '16px',
margin: '4px',
boxShadow: i == selected
? '0 0 2px ' + color : '',
cursor: 'pointer'
})
.bindEvent({
doubleclick: function() {
openList(i);
},
singleclick: function() {
selectList(i);
}
})
.appendTo($listsContent);
});
}
$lists.animate({opacity: 1}, 250);
}
function openList(i) {
that.fadeOutScreen();
pandora.UI.set({
page: '',
find: {
conditions: [{
key: 'list',
value: lists[i].user + ':'
+ lists[i].name,
operator: '=='
}],
operator: '&'
}
});
}
function scrollToPosition(i, animate) {
if (i >= 0 && i <= lists.length - items && i != position) {
position = i;
$listsContent.stop().animate({
left: (position * -65) + 'px'
}, animate ? 250 : 0, function() {
if (position == 0) {
$previousButton.removeClass('visible').stop().animate({
opacity: 0
}, 250, function() {
$previousButton.hide();
});
} else {
$previousButton.addClass('visible');
}
if (position == lists.length - items) {
$nextButton.removeClass('visible').stop().animate({
opacity: 0
}, 250, function() {
$nextButton.hide();
});;
} else {
$nextButton.addClass('visible');
}
if (mouse) {
$listsBox.trigger('mouseenter');
}
});
}
}
function selectList(i) {
if (i >= 0 && i <= lists.length - 1 && i != selected) {
$list[selected].css({
boxShadow: 'none'
});
selected = i;
$list[selected].css({
boxShadow: '0 0 2px ' + color
});
if (selected < position) {
scrollToPosition(selected, true);
} else if (selected > position + items - 1) {
scrollToPosition(selected - items + 1, true);
}
$icon.attr({
src: '/list/' + lists[selected].user + ':'
+ lists[selected].name + '/icon256.jpg'
});
$text.html(
'<b>' + lists[selected].name + '</b><br><br>'
+ lists[selected].description
);
}
}
});
} }
that.fadeInScreen = function() { that.fadeInScreen = function() {
$box.css({marginTop: '80px'});
that.appendTo(Ox.UI.$body).animate({opacity: 1}, 500, function() { that.appendTo(Ox.UI.$body).animate({opacity: 1}, 500, function() {
that.find(':not(#logo)').animate({opacity: 1}, 250, function() { that.find('*').animate({opacity: 1}, 250, function() {
$findInput.focusInput(true); $findInput.focusInput(true);
showLists();
}); });
}); });
$logo.animate({width: '320px'}, 500);
return that; return that;
}; };
that.fadeOutScreen = function() { that.fadeOutScreen = function() {
that.find(':not(#logo)').hide(); hideLists();
$logo.animate({width: window.innerWidth + 'px'}, 500); that.find('*').hide();
that.animate({opacity: 0}, 500, function() { that.animate({opacity: 0}, 250, function() {
that.remove(); that.remove();
}); });
self.keydown && Ox.$document.unbind({keydown: self.keydown});
return that; return that;
}; };
that.hideScreen = function() { that.hideScreen = function() {
hideLists();
that.hide().remove(); that.hide().remove();
that.find(':not(#logo)').css({opacity: 0}); that.find('*').css({opacity: 0});
$logo.css({width: window.innerWidth + 'px'}); $logo.css({width: window.innerWidth + 'px'});
self.keydown && Ox.$document.unbind({keydown: self.keydown});
return that; return that;
}; };
that.showScreen = function() { that.showScreen = function() {
$logo.css({width: '320px'});
that.find(':not(#logo)').css({opacity: 1});
that.css({opacity: 1}).appendTo(Ox.UI.$body); that.css({opacity: 1}).appendTo(Ox.UI.$body);
$findInput.focusInput(true); $box.animate({
marginTop: '80px'
}, 250, function() {
that.find(':not(#lists)').animate({opacity: 1}, 250);
$findInput.focusInput(true);
showLists();
});
return that; return that;
}; };

2
static/js/pandora/importAnnotations.js
View file

@ -4,7 +4,7 @@
pandora.ui.importAnnotations = function(data) { pandora.ui.importAnnotations = function(data) {
var content = Ox.Element().css({margin: '16px'}), var content = Ox.Element().css({margin: '16px'}),
file, file,
height = 240, height = 180,
width = 640, width = 640,
that = Ox.Dialog({ that = Ox.Dialog({
buttons: [ buttons: [