From fbe84282c79d41bdcfdc6bcb1dbb6b14753374d1 Mon Sep 17 00:00:00 2001 From: j Date: Tue, 4 Jul 2017 08:32:54 +0000 Subject: [PATCH] new home --- static/js/home.amp.js | 244 +++++++++++++++++++++++++----------------- 1 file changed, 146 insertions(+), 98 deletions(-) diff --git a/static/js/home.amp.js b/static/js/home.amp.js index f747288..e926928 100644 --- a/static/js/home.amp.js +++ b/static/js/home.amp.js @@ -4,17 +4,67 @@ pandora.ui.home = function() { - var that = $('
') + var self = {}, + + that = $('
') .addClass('OxScreen') .css({ position: 'absolute', width: '100%', height: '100%', opacity: 0, + overflowY: 'auto', zIndex: 1001 }), - $logo = $('') - .addClass('logo') + + $box = $('
') + .css({ + position: 'absolute', + left: 0, + top: '80px', + right: 0, + width: '560px', + margin: '0 auto 0 auto' + }) + .appendTo(that), + + $reflectionImage = $('') + .attr({src: '/static/png/logo.png'}) + .css({ + position: 'absolute', + left: 0, + top: '80px', + right: 0, + bottom: 0, + width: '160px', + height: 'auto', + margin: '0 auto 0 auto', + MozTransform: 'scaleY(-1)', + MsTransform: 'scaleY(-1)', + OTransform: 'scaleY(-1)', + WebkitTransform: 'scaleY(-1)' + }) + .appendTo($box), + + $reflectionGradient = $('
') + .addClass('OxReflection') + .css({ + position: 'absolute', + left: 0, + top: '80px', + right: 0, + width: '160px', + height: '160px', + margin: '0 auto 0 auto', + }) + .appendTo($box), + + $logo = Ox.Element({ + element: '', + tooltip: function() { + return Ox._('Enter {0}', [pandora.site.site.name]); + } + }) .attr({ id: 'logo', src: '/static/png/logo.png' @@ -22,29 +72,29 @@ pandora.ui.home = function() { .css({ position: 'absolute', left: 0, - top: 0, right: 0, - bottom: '160px', - width: window.innerWidth + 'px', - margin: 'auto', + width: '160px', + height: 'auto', + margin: '0 auto 0 auto', cursor: 'pointer' }) - .on({ - click: function() { + .bindEvent({ + anyclick: function() { $browseButton.triggerEvent('click'); } }) - .appendTo(that), + .appendTo($box), + $findInput = Ox.Input({ - width: 156 + width: 252 }) .css({ position: 'absolute', left: 0, - top: '48px', - right: '164px', + top: '104px', + right: '260px', bottom: 0, - margin: 'auto', + margin: '0 auto 0 auto', opacity: 0 }) .on({ @@ -62,18 +112,19 @@ pandora.ui.home = function() { } } }) - .appendTo(that), + .appendTo($box), + $findButton = Ox.Button({ title: Ox._('Find'), - width: 74 + width: 122 }) .css({ position: 'absolute', - left: '82px', - top: '48px', + left: '130px', + top: '104px', right: 0, bottom: 0, - margin: 'auto', + margin: '0 auto 0 auto', opacity: 0 }) .bindEvent({ @@ -81,10 +132,6 @@ pandora.ui.home = function() { var folder = pandora.getListData().folder, value = $findInput.value(); folder && pandora.$ui.folderList[folder].options({selected: []}); - if (pandora.user.ui.section == 'items') { - pandora.$ui.findSelect.value('*'); - pandora.$ui.findInput.value(value); - } that.fadeOutScreen(); pandora.UI.set({ page: '', @@ -96,20 +143,23 @@ pandora.ui.home = function() { }, section: 'items' }); + pandora.$ui.findSelect && pandora.$ui.findSelect.value('*'); + pandora.$ui.findInput && pandora.$ui.findInput.value(value); } }) - .appendTo(that), + .appendTo($box), + $browseButton = Ox.Button({ title: Ox._('Browse'), - width: 74 + width: 122 }) .css({ position: 'absolute', - left: '246px', - top: '48px', + left: '390px', + top: '104px', right: 0, bottom: 0, - margin: 'auto', + margin: '0 auto 0 auto', opacity: 0 }) .bindEvent({ @@ -121,19 +171,19 @@ pandora.ui.home = function() { that.fadeOutScreen(); } }) - .appendTo(that), + .appendTo($box), + + $footer = Ox.Element().css({ + clear: 'both', + height: '64px', + paddingTop: '12px' + }), + $signupButton = Ox.Button({ title: Ox._('Sign Up'), - width: 74 + width: 122 }) .css({ - position: 'absolute', - left: 0, - top: '112px', - right: '246px', - bottom: 0, - margin: 'auto', - opacity: 0 }) .bindEvent({ click: function() { @@ -141,18 +191,13 @@ pandora.ui.home = function() { that.fadeOutScreen(); } }), + $signinButton = Ox.Button({ title: Ox._('Sign In'), - width: 74 + width: 122 }) .css({ - position: 'absolute', - left: 0, - top: '112px', - right: '82px', - bottom: 0, - margin: 'auto', - opacity: 0 + marginLeft: '8px', }) .bindEvent({ click: function() { @@ -160,18 +205,12 @@ pandora.ui.home = function() { that.fadeOutScreen(); } }), + $preferencesButton = Ox.Button({ title: Ox._('Preferences'), - width: 156 + width: 252 }) .css({ - position: 'absolute', - left: 0, - top: '112px', - right: '164px', - bottom: 0, - margin: 'auto', - opacity: 0 }) .bindEvent({ click: function() { @@ -179,89 +218,98 @@ pandora.ui.home = function() { that.fadeOutScreen(); } }), + $aboutButton = Ox.Button({ - title: Ox._('{0}', [pandora.site.site.name]), - width: 156 + title: Ox._('About {0}', [pandora.site.site.name]), + width: 252 }) .css({ - position: 'absolute', - left: '164px', - top: '112px', - right: 0, - bottom: 0, - margin: 'auto', - opacity: 0 + marginLeft: '8px' }) .bindEvent({ click: function() { pandora.UI.set({page: 'about'}); that.fadeOutScreen(); } - }) - .appendTo(that), - $text = $('
') - .html(Ox._( - 'pan.do/ra. \u2620 2007-{0} 0x2620. All Open Source.', - [Ox.formatDate(new Date(), '%Y')] - )).css({ + }), + + $features = $('
') + .attr({id: 'lists'}) + .css({ position: 'absolute', left: 0, - top: '176px', + top: '152px', right: 0, bottom: 0, - width: '360px', - height: '16px', - margin: 'auto', - opacity: 0, - textAlign: 'center' + width: '512px', + margin: '0 auto 0 auto', + opacity: 0 }) - .appendTo(that); + .appendTo($box); if (pandora.user.level == 'guest') { - $signupButton.appendTo(that); - $signinButton.appendTo(that); + $signupButton.appendTo($footer); + $signinButton.appendTo($footer); } else { - $preferencesButton.appendTo(that); + $preferencesButton.appendTo($footer); + } + $aboutButton.appendTo($footer); + + function showFeatures() { + pandora.api.getHomeItems({active: true}, function(result) { + var items = result.data.items.filter(pandora.isCompleteHomeItem), + $texts; + $features.empty(); + if (items.length) { + $texts = Ox.Element().appendTo($features); + items.forEach(function(item) { + var $item = pandora.renderHomeItem({ + data: item + }).appendTo($texts); + }); + } else { + $features.css({ + top: '132px' + }); + } + $features.append($footer); + $features.animate({opacity: 1}, 250); + }); } that.fadeInScreen = function() { that.appendTo(Ox.$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); + showFeatures(); }); }); - $logo.animate({width: '320px'}, 500); return that; }; that.fadeOutScreen = function() { - that.find(':not(#logo)').hide(); - $logo.animate({width: window.innerWidth + 'px'}, 500); + $('.OxTooltip').remove(); that.animate({opacity: 0}, 500, function() { that.remove(); }); pandora.$ui.tv && pandora.$ui.tv.unmute().find('.OxControls.OxVolume').hide(); - return that; - }; - - that.hideScreen = function() { - that.hide().remove(); - that.find(':not(#logo)').css({opacity: 0}); - $logo.css({width: window.innerWidth + 'px'}); + self.keydown && Ox.$document.off({keydown: self.keydown}); return that; }; that.showScreen = function(callback) { - var $elements = that.find(':not(.logo)'), count = 0; - $logo.css({width: '320px'}); + var $elements = that.find('*'), count = 0; + $box.css({top: window.innerHeight / 2 - 80 + 'px'}); that.css({opacity: 1}).appendTo(Ox.$body); - that.find(':not(#logo)').css({opacity: 1}); - $elements.animate({opacity: 1}, 500, function() { - if (callback && ++count == $elements.length) { - callback(); - } - }); $findInput.focusInput(true); + $box.animate({top: '80px'}, 500, function() { + $elements.animate({opacity: 1}, 250, function() { + if (++count == $elements.length) { + showFeatures(); + callback && callback(); + } + }); + }); return that; };