From 22f4d8441d2a8333a05c39f5f0a9a8fd18e28426 Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 10 Jul 2013 09:34:40 +0200 Subject: [PATCH] update 0xdb and pad.ma home screens (fixes #1310) --- static/js/pandora/home.0xdb.js | 11 ++ static/js/pandora/home.padma.js | 261 ++++++++++++++++++++------------ 2 files changed, 171 insertions(+), 101 deletions(-) diff --git a/static/js/pandora/home.0xdb.js b/static/js/pandora/home.0xdb.js index a0e8e06f5..91711cc0c 100644 --- a/static/js/pandora/home.0xdb.js +++ b/static/js/pandora/home.0xdb.js @@ -13,6 +13,7 @@ pandora.ui.home = function() { opacity: 0, zIndex: 1001 }), + $reflectionImage = $('') .addClass('logo') .attr({src: '/static/png/logo.png'}) @@ -30,6 +31,7 @@ pandora.ui.home = function() { WebkitTransform: 'scaleY(-1)' }) .appendTo(that), + $reflectionGradient = $('
') .addClass('OxReflection logo') .css({ @@ -44,6 +46,7 @@ pandora.ui.home = function() { margin: 'auto', }) .appendTo(that), + $logo = $('') .addClass('logo') .attr({ @@ -66,6 +69,7 @@ pandora.ui.home = function() { } }) .appendTo(that), + $findInput = Ox.Input({ width: 156 }) @@ -92,6 +96,7 @@ pandora.ui.home = function() { } }) .appendTo(that), + $findButton = Ox.Button({ title: Ox._('Find'), width: 74 @@ -125,6 +130,7 @@ pandora.ui.home = function() { } }) .appendTo(that), + $browseButton = Ox.Button({ title: Ox._('Browse'), width: 74 @@ -147,6 +153,7 @@ pandora.ui.home = function() { } }) .appendTo(that), + $signupButton = Ox.Button({ title: Ox._('Sign Up'), width: 74 @@ -166,6 +173,7 @@ pandora.ui.home = function() { that.fadeOutScreen(); } }), + $signinButton = Ox.Button({ title: Ox._('Sign In'), width: 74 @@ -185,6 +193,7 @@ pandora.ui.home = function() { that.fadeOutScreen(); } }), + $preferencesButton = Ox.Button({ title: Ox._('Preferences'), width: 156 @@ -204,6 +213,7 @@ pandora.ui.home = function() { that.fadeOutScreen(); } }), + $aboutButton = Ox.Button({ title: Ox._('About {0}', [pandora.site.site.name]), width: 156 @@ -224,6 +234,7 @@ pandora.ui.home = function() { } }) .appendTo(that), + $text = $('
') .html(Ox._( 'A Movie Database. \u2620 2007-{0} 0x2620. All Open Source.', diff --git a/static/js/pandora/home.padma.js b/static/js/pandora/home.padma.js index bb43cd866..0a7e69503 100644 --- a/static/js/pandora/home.padma.js +++ b/static/js/pandora/home.padma.js @@ -5,6 +5,7 @@ pandora.ui.home = function() { var self = {}, + that = $('
') .addClass('OxScreen') .css({ @@ -15,6 +16,7 @@ pandora.ui.home = function() { overflowY: 'auto', zIndex: 1001 }), + $box = $('
') .css({ position: 'absolute', @@ -25,6 +27,7 @@ pandora.ui.home = function() { margin: '0 auto 0 auto' }) .appendTo(that), + $reflectionImage = $('') .attr({src: '/static/png/logo.png'}) .css({ @@ -40,6 +43,7 @@ pandora.ui.home = function() { WebkitTransform: 'scaleY(-1)' }) .appendTo($box), + $reflectionGradient = $('
') .addClass('OxReflection') .css({ @@ -52,6 +56,7 @@ pandora.ui.home = function() { margin: '0 auto 0 auto', }) .appendTo($box), + $logo = Ox.Element({ element: '', tooltip: Ox._('Enter {0}', [pandora.site.site.name]) @@ -74,6 +79,7 @@ pandora.ui.home = function() { } }) .appendTo($box), + $findInput = Ox.Input({ width: 252 }) @@ -100,6 +106,7 @@ pandora.ui.home = function() { } }) .appendTo($box), + $findButton = Ox.Button({ title: Ox._('Find'), width: 122 @@ -133,6 +140,7 @@ pandora.ui.home = function() { } }) .appendTo($box), + $browseButton = Ox.Button({ title: Ox._('Browse'), width: 122 @@ -155,6 +163,7 @@ pandora.ui.home = function() { } }) .appendTo($box), + $signupButton = Ox.Button({ title: Ox._('Sign Up'), width: 122 @@ -174,6 +183,7 @@ pandora.ui.home = function() { that.fadeOutScreen(); } }), + $signinButton = Ox.Button({ title: Ox._('Sign In'), width: 122 @@ -193,6 +203,7 @@ pandora.ui.home = function() { that.fadeOutScreen(); } }), + $preferencesButton = Ox.Button({ title: Ox._('Preferences'), width: 252 @@ -212,6 +223,7 @@ pandora.ui.home = function() { that.fadeOutScreen(); } }), + $aboutButton = Ox.Button({ title: Ox._('About {0}', [pandora.site.site.name]), width: 252 @@ -232,7 +244,8 @@ pandora.ui.home = function() { } }) .appendTo($box), - $lists = $('
') + + $features = $('
') .attr({id: 'lists'}) .css({ position: 'absolute', @@ -253,30 +266,56 @@ pandora.ui.home = function() { $preferencesButton.appendTo($box); } - function showLists() { - pandora.api.findLists({ - query: { - conditions: [{key: 'status', value: 'featured', operator: '=='}], - operator: '&' + function showFeatures() { + var $space, + featured = {}, + find = { + query: { + conditions: [{key: 'status', value: 'featured', operator: '=='}], + operator: '&' + }, + keys: ['description', 'modified', 'name', 'user'], + sort: [{key: 'position', operator: '+'}] }, - keys: ['user', 'name', 'description', 'modified'], - sort: [{key: 'position', operator: '+'}] - }, function(result) { - var lists = result.data.items, - counter = 0, items = 8, mouse = false, position = 0, selected = 0, - color = Ox.Theme() == 'oxlight' ? 'rgb(32, 32, 32)' - : Ox.Theme() == 'oxmedium' ? 'rgb(144, 144, 144)' - : 'rgb(224, 224, 224)', + items, lists, texts; + pandora.api.findLists(find, function(result) { + lists = result.data.items.length; + items = result.data.items.map(function(item) { + return Ox.extend(item, {type: 'list'}); + }); + pandora.api.findTexts(find, function(result) { + texts = result.data.items.length + items = items.concat(result.data.items.map(function(item) { + return Ox.extend(item, {type: 'text'}); + })); + $features.empty(); + show(); + return; + if (featured.lists.length) { + top += 24; + } + show('texts'); + }); + }); + function show() { + var counter = 0, max = 8, mouse = false, position = 0, selected = 0, + color = Ox.Theme() == 'oxlight' ? 'rgb(0, 0, 0)' + : Ox.Theme() == 'oxmedium' ? 'rgb(0, 0, 0)' + : 'rgb(255, 255, 255)', $label, $icon, $text, - $listsBox, $listsContainer, $listsContent, - $listBox = [], $listIcon = [], - $previousButton, $nextButton, - $space; - $lists.empty(); - if (lists.length) { + $featuresBox, $featuresContainer, $featuresContent, + $featureBox = [], $featureIcon = [], + $previousButton, $nextButton; + if (items.length) { $label = Ox.Label({ textAlign: 'center', - title: '' + Ox.formatCount(lists.length, 'Featured List') + '', + title: '' + Ox._('Featured ' + ( + lists == 1 && texts == 0 ? 'List' + : lists == 0 && texts == 1 ? 'Text' + : texts == 0 ? 'Lists' + : lists == 0 ? 'Texts' + : 'Lists and Texts' + )) + '', width: 512 }) .css({ @@ -287,7 +326,7 @@ pandora.ui.home = function() { bottom: 0, margin: '0 auto 0 auto' }) - .appendTo($lists); + .appendTo($features); $text = Ox.Label({ width: 386 }) @@ -306,18 +345,16 @@ pandora.ui.home = function() { whiteSpace: 'normal' }) .html( - '' + Ox.encodeHTMLEntities(lists[selected].name) + '

' - + lists[selected].description + getHTML(items[selected]) ) - .appendTo($lists); + .appendTo($features); pandora.createLinks($text); $icon = Ox.Element({ element: '', - tooltip: Ox._('View List') + tooltip: getTooltip(items[selected]) }) .attr({ - src: '/list/' + lists[selected].user + ':' - + lists[selected].name + '/icon256.jpg?' + lists[selected].modified + src: getImageURL(items[selected]) }) .css({ position: 'absolute', @@ -332,12 +369,12 @@ pandora.ui.home = function() { }) .bindEvent({ anyclick: function() { - openList(selected); + openItem(selected); } }) - .appendTo($lists); - if (lists.length > 1) { - $listsBox = $('
') + .appendTo($features); + if (items.length > 1) { + $featuresBox = $('
') .css({ position: 'absolute', left: 0, @@ -347,8 +384,8 @@ pandora.ui.home = function() { width: '560px', // 16+8+512+8+16 margin: '0 auto 0 auto' }) - .appendTo($lists); - $listsContainer = $('
') + .appendTo($features); + $featuresContainer = $('
') .css({ position: 'absolute', left: '20px', @@ -357,18 +394,18 @@ pandora.ui.home = function() { width: '520px', overflow: 'hidden' }) - .appendTo($listsBox); - $listsContent = $('
') + .appendTo($featuresBox); + $featuresContent = $('
') .css({ position: 'absolute', - width: lists.length * 65 + 'px', + width: items.length * 65 + 'px', height: '65px', - marginLeft: lists.length < items - ? (items - lists.length) * 65 / 2 + 'px' + marginLeft: items.length < max + ? (max - items.length) * 65 / 2 + 'px' : 0 }) - .appendTo($listsContainer); - if (lists.length > items) { + .appendTo($featuresContainer); + if (items.length > max) { $previousButton = Ox.Button({ title: 'left', type: 'image' @@ -393,12 +430,12 @@ pandora.ui.home = function() { } } }) - .appendTo($listsBox); + .appendTo($featuresBox); $nextButton = Ox.Button({ title: 'right', type: 'image' }) - .addClass(position < lists.length - 1 ? 'visible' : '') + .addClass(position < items.length - 1 ? 'visible' : '') .css({ position: 'absolute', right: 0, @@ -418,8 +455,8 @@ pandora.ui.home = function() { } } }) - .appendTo($listsBox); - $listsBox.on({ + .appendTo($featuresBox); + $featuresBox.on({ mouseenter: function() { mouse = true; $('.visible').show().stop().animate({ @@ -441,27 +478,8 @@ pandora.ui.home = function() { } }); } - 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.on({keydown: self.keydown}); - lists.forEach(function(list, i) { - $listBox[i] = $('
') + items.forEach(function(item, i) { + $featureBox[i] = $('
') .css({ float: 'left', width: '57px', @@ -471,14 +489,14 @@ pandora.ui.home = function() { borderRadius: '16px', boxShadow: '0 0 2px ' + (i == selected ? color : 'transparent') }) - .appendTo($listsContent); - $listIcon[i] = Ox.Element({ + .appendTo($featuresContent); + $featureIcon[i] = Ox.Element({ element: '', - tooltip: Ox.encodeHTMLEntities(list.name) + tooltip: (lists && texts ? Ox._(Ox.toTitleCase(item.type)) + ': ' : '') + + Ox.encodeHTMLEntities(item.name) }) .attr({ - src: '/list/' + list.user + ':' - + list.name + '/icon256.jpg?' + list.modified + src: getImageURL(item) }) .css({ width: '57px', @@ -488,47 +506,87 @@ pandora.ui.home = function() { }) .bindEvent({ doubleclick: function() { - openList(i); + openItem(i); }, singleclick: function() { - selectList(i); + selectItem(i); } }) - .appendTo($listBox[i]); + .appendTo($featureBox[i]); }); + 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) { + selectItem(selected - 1); + } else if (key == 'up' && selected > 0) { + selectItem(0); + } else if (key == 'right' && selected < items.length - 1) { + selectItem(selected + 1); + } else if (key == 'down' && selected < items.length - 1) { + selectItem(items.length - 1); + } + } + }; + Ox.$document.on({keydown: self.keydown}); } $space = $('
') .css({ position: 'absolute', - top: lists.length == 0 ? '0px' - : lists.length == 1 ? '150px' + top: items.length == 0 ? '0px' + : items.length == 1 ? '150px' : '215px', width: '560px', height: '80px' }) - .appendTo($lists); - $lists.animate({opacity: 1}, 250); + .appendTo($features); + $features.animate({opacity: 1}, 250); } - function openList(i) { + + function getHTML(item) { + return '' + + (lists && texts ? Ox._(Ox.toTitleCase(item.type)) + ': ' : '') + + Ox.encodeHTMLEntities(item.name) + '

' + + item.description; + } + + function getImageURL(item) { + return '/' + item.type + '/' + item.user + + ':' + item.name + '/icon256.jpg?' + item.modified; + } + + function getTooltip(item) { + return Ox._('View {0}', [Ox._(Ox.toTitleCase(item.type))]) + } + + function openItem(i) { that.fadeOutScreen(); - pandora.UI.set({ - page: '', - item: '', + pandora.UI.set(Ox.extend({ + section: items[i].type == 'list' ? 'items' : 'texts', + page: '' + }, items[i].type == 'list' ? { find: { conditions: [{ key: 'list', - value: lists[i].user + ':' - + lists[i].name, + value: items[i].user + ':' + + items[i].name, operator: '==' }], operator: '&' } - }); + } : { + text: items[i].user + ':' + items[i].name + })); } + function scrollToPosition(i, animate) { - if (i >= 0 && i <= lists.length - items && i != position) { + if (i >= 0 && i <= items.length - max && i != position) { position = i; - $listsContent.stop().animate({ + $featuresContent.stop().animate({ left: (position * -65) + 'px' }, animate ? 250 : 0, function() { if (position == 0) { @@ -540,7 +598,7 @@ pandora.ui.home = function() { } else { $previousButton.addClass('visible'); } - if (position == lists.length - items) { + if (position == items.length - max) { $nextButton.removeClass('visible').stop().animate({ opacity: 0 }, 250, function() { @@ -550,37 +608,38 @@ pandora.ui.home = function() { $nextButton.addClass('visible'); } if (mouse) { - $listsBox.trigger('mouseenter'); + $featuresBox.trigger('mouseenter'); } }); } } - function selectList(i) { - if (i >= 0 && i <= lists.length - 1 && i != selected) { - $listBox[selected].css({ + + function selectItem(i) { + if (i >= 0 && i <= items.length - 1 && i != selected) { + $featureBox[selected].css({ boxShadow: 'none' }); selected = i; - $listBox[selected].css({ + $featureBox[selected].css({ boxShadow: '0 0 2px ' + color }); if (selected < position) { scrollToPosition(selected, true); - } else if (selected > position + items - 1) { - scrollToPosition(selected - items + 1, true); + } else if (selected > position + max - 1) { + scrollToPosition(selected - max + 1, true); } $icon.attr({ - src: '/list/' + lists[selected].user + ':' - + lists[selected].name + '/icon256.jpg?' + lists[selected].modified + src: getImageURL(items[selected]) + }).options({ + tooltip: getTooltip(items[selected]) }); $text.html( - '' + Ox.encodeHTMLEntities(lists[selected].name) + '

' - + lists[selected].description + getHTML(items[selected]) ); } } - }); - + + } } that.fadeInScreen = function() {