From 04cf317e805418c1497d261000078c60690bd9e7 Mon Sep 17 00:00:00 2001 From: pandora Date: Sun, 20 Sep 2015 17:49:37 +0100 Subject: [PATCH] add home --- static/js/home.mdr.js | 300 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 300 insertions(+) create mode 100644 static/js/home.mdr.js diff --git a/static/js/home.mdr.js b/static/js/home.mdr.js new file mode 100644 index 0000000..8509fc3 --- /dev/null +++ b/static/js/home.mdr.js @@ -0,0 +1,300 @@ +// vim: et:ts=4:sw=4:sts=4:ft=javascript + +'use strict'; + +pandora.ui.home = function() { + + var that = $('
') + .addClass('OxScreen') + .css({ + position: 'absolute', + width: '100%', + height: '100%', + opacity: 0, + zIndex: 1001 + }), + $reflectionImage = $('') + .addClass('logo') + .attr({src: '/static/png/logo.png'}) + .css({ + position: 'absolute', + left: 0, + top: '320px', + right: 0, + bottom: 0, + width: '320px', + margin: 'auto', + opacity: 0, + MozTransform: 'scaleY(-1)', + OTransform: 'scaleY(-1)', + WebkitTransform: 'scaleY(-1)' + }) + .appendTo(that), + $reflectionGradient = $('
') + .addClass('OxReflection logo') + .css({ + position: 'absolute', + left: 0, + top: '320px', + right: 0, + bottom: 0, + width: '322px', + height: '322px', + margin: 'auto', + }) + .appendTo(that), + $logo = $('') + .addClass('logo') + .attr({ + id: 'logo', + src: '/static/png/logo.png' + }) + .css({ + position: 'absolute', + left: 0, + top: 0, + right: 0, + bottom: '320px', + width: window.innerWidth + 'px', + margin: 'auto', + cursor: 'pointer' + }) + .on({ + click: function() { + $browseButton.triggerEvent('click'); + } + }) + .appendTo(that), + $findInput = Ox.Input({ + width: 156 + }) + .css({ + position: 'absolute', + left: 0, + top: '48px', + right: '164px', + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .on({ + click: function(e) { + // fixme: why? + e.stopPropagation(); + } + }) + .bindEvent({ + submit: function(data) { + if (data.value) { + $findButton.triggerEvent('click'); + } else { + $browseButton.triggerEvent('click'); + } + } + }) + .appendTo(that), + $findButton = Ox.Button({ + title: Ox._('Find'), + width: 74 + }) + .css({ + position: 'absolute', + left: '82px', + top: '48px', + right: 0, + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .bindEvent({ + click: 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: '', + find: { + conditions: value === '' + ? [] + : [{key: '*', value: value, operator: '='}], + operator: '&' + }, + section: 'items' + }); + } + }) + .appendTo(that), + $browseButton = Ox.Button({ + title: Ox._('Browse'), + width: 74 + }) + .css({ + position: 'absolute', + left: '246px', + top: '48px', + right: 0, + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .bindEvent({ + click: function() { + pandora.UI.set({ + page: pandora.user.ui.page == 'home' ? '' : pandora.user.ui.page, + section: 'items' + }); + that.fadeOutScreen(); + } + }) + .appendTo(that), + $signupButton = Ox.Button({ + title: Ox._('Sign Up'), + width: 74 + }) + .css({ + position: 'absolute', + left: 0, + top: '112px', + right: '246px', + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .bindEvent({ + click: function() { + pandora.UI.set({page: 'signup'}); + that.fadeOutScreen(); + } + }), + $signinButton = Ox.Button({ + title: Ox._('Sign In'), + width: 74 + }) + .css({ + position: 'absolute', + left: 0, + top: '112px', + right: '82px', + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .bindEvent({ + click: function() { + pandora.UI.set({page :'signin'}); + that.fadeOutScreen(); + } + }), + $preferencesButton = Ox.Button({ + title: Ox._('Preferences'), + width: 156 + }) + .css({ + position: 'absolute', + left: 0, + top: '112px', + right: '164px', + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .bindEvent({ + click: function() { + pandora.UI.set({page: 'preferences'}); + that.fadeOutScreen(); + } + }), + $aboutButton = Ox.Button({ + title: Ox._('About {0}', [pandora.site.site.name]), + width: 156 + }) + .css({ + position: 'absolute', + left: '164px', + top: '112px', + right: 0, + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .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({ + position: 'absolute', + left: 0, + top: '176px', + right: 0, + bottom: 0, + width: '360px', + height: '16px', + margin: 'auto', + opacity: 0, + textAlign: 'center' + }) + .appendTo(that); + + if (pandora.user.level == 'guest') { + $signupButton.appendTo(that); + $signinButton.appendTo(that); + } else { + $preferencesButton.appendTo(that); + } + + that.fadeInScreen = function() { + that.appendTo(Ox.$body).animate({opacity: 1}, 500, function() { + that.find(':not(#logo)').animate({opacity: 1}, 250, function() { + $findInput.focusInput(true); + }); + }); + $logo.animate({width: '320px'}, 500); + return that; + }; + + that.fadeOutScreen = function() { + that.find(':not(#logo)').hide(); + $logo.animate({width: window.innerWidth + 'px'}, 500); + 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'}); + return that; + }; + + that.showScreen = function(callback) { + var $elements = that.find(':not(.logo)'), count = 0; + $logo.css({width: '320px'}); + 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); + return that; + }; + + return that; + +};