diff --git a/static/js/pandora/ui/homePage.js b/static/js/pandora/ui/homePage.js new file mode 100644 index 00000000..6d872471 --- /dev/null +++ b/static/js/pandora/ui/homePage.js @@ -0,0 +1,78 @@ +// vim: et:ts=4:sw=4:sts=4:ft=js + +pandora.ui.homePage = function() { + + var that = Ox.Element() + .css({padding: '8px'}); + + var $left = $('
') + .css({ + float: 'left', + margin: '8px', + background: 'black' + }) + .html('left') + .appendTo(that.$element), + $center = $('
') + .css({ + float: 'left', + margin: '8px' + }) + .appendTo(that.$element), + $right = $('
') + .css({ + float: 'left', + margin: '8px', + background: 'black' + }) + .html('right') + .appendTo(that.$element), + $logo = $('') + .attr({src: '/static/png/logo256.png'}) + .appendTo($center); + // fixme: duplicated + $select = Ox.Select({ + id: 'select', + items: $.merge($.map(pandora.site.findKeys, + function(key, i) { + return { + id: key.id, + title: 'Find: ' + key.title + }; + }), [{}, { + id: 'advanced', + title: 'Find: Advanced' + }]), + overlap: 'right', + width: 112 + }) + $input = Ox.Input({}) + .bindEvent({ + change: function() { + + } + }); + $findElement = Ox.FormElementGroup({ + elements: [$select, $input], + }) + .css({marginTop: '16px'}) + .appendTo($center); + $center = $('
') + .css({marginTop: '16px'}) + .html('center') + .appendTo($center); + + that.resize = function() { + var size = Ox.divideInt(window.innerWidth - pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1 - 64, 3); + $left.css({width: size[0] + 'px'}); + $center.css({width: size[1] + 'px'}); + $logo.css({width: size[1] + 'px'}); + $input.options({width: size[1] - 112}); + $right.css({width: size[2] + 'px'}); + }; + + that.resize(); + + return that; + +} diff --git a/static/js/pandora/ui/menu.js b/static/js/pandora/ui/menu.js index 9feee71d..bbecb589 100644 --- a/static/js/pandora/ui/menu.js +++ b/static/js/pandora/ui/menu.js @@ -207,6 +207,181 @@ pandora.ui.mainMenu = function() { title: 'About' }).open(); } else if (data.id == 'home') { + var $screen = $('
') + .attr({id: 'screen'}) + .css({ + position: 'absolute', + width: '100%', + height: '100%', + background: 'rgb(32, 32, 32)', + opacity: 0, + zIndex: 1000 + }) + .appendTo(Ox.UI.$body), + $reflectionImage = $('') + .attr({ + src: '/static/png/logo256.png' + }) + .css({ + position: 'absolute', + left: 0, + top: '160px', + right: 0, + bottom: 0, + width: '320px', + margin: 'auto', + opacity: 0, + MozTransform: 'scaleY(-1)', + WebkitTransform: 'scaleY(-1)' + }) + .appendTo($screen), + $reflectionGradient = $('
') + .css({ + position: 'absolute', + left: 0, + top: '160px', + right: 0, + bottom: 0, + width: '320px', + height: '160px', + margin: 'auto', + backgroundImage: '-webkit-linear-gradient(top, rgba(32, 32, 32, 0.8), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))' + }) + .appendTo($screen), + $logo = $('') + .attr({ + id: 'logo', + src: '/static/png/logo256.png' + }) + .css({ + position: 'absolute', + left: 0, + top: 0, + right: 0, + bottom: '160px', + width: window.innerWidth + 'px', + margin: 'auto' + }) + .bind({ + click: function() { + $screen.find(':not(#logo)').remove(); + $logo.animate({ + width: window.innerWidth + 'px' + }, 500) + $screen.animate({opacity: 0}, 500, function() { + $screen.remove(); + }); + } + }) + .appendTo($screen), + $input = Ox.Input({ + width: 156 + }) + .css({ + position: 'absolute', + left: 0, + top: '48px', + right: '164px', + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .click(function(e) { + e.stopPropagation(); + }) + .appendTo($screen) + .focusInput(), + $findButton = Ox.Button({ + title: 'Find', + width: 74 + }) + .css({ + position: 'absolute', + left: '82px', + top: '48px', + right: 0, + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .appendTo($screen), + $browseButton = Ox.Button({ + title: 'Browse', + width: 74 + }) + .css({ + position: 'absolute', + left: '246px', + top: '48px', + right: 0, + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .appendTo($screen), + $signupButton = Ox.Button({ + title: 'Sign Up', + width: 74 + }) + .css({ + position: 'absolute', + left: 0, + top: '112px', + right: '246px', + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .appendTo($screen), + $signinButton = Ox.Button({ + title: 'Sign In', + width: 74 + }) + .css({ + position: 'absolute', + left: 0, + top: '112px', + right: '82px', + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .appendTo($screen), + $aboutButton = Ox.Button({ + title: 'About ' + pandora.site.site.name, + width: 156 + }) + .css({ + position: 'absolute', + left: '164px', + top: '112px', + right: 0, + bottom: 0, + margin: 'auto', + opacity: 0 + }) + .appendTo($screen), + $text = $('
') + .html('A Movie Database. \u2620 2007-2011 0x2620. All Open Source.') + .css({ + position: 'absolute', + left: 0, + top: '176px', + right: 0, + bottom: 0, + width: '360px', + height: '16px', + margin: 'auto', + opacity: 0, + textAlign: 'center' + }) + .appendTo($screen) + $screen.animate({opacity: 1}, 500, function() { + $screen.find(':not(#logo)').animate({opacity: 1}, 250) + }); + $logo.animate({width: '320px'}, 500); + + /* var $dialog = new Ox.Dialog({ buttons: [ new Ox.Button({ @@ -224,6 +399,7 @@ pandora.ui.mainMenu = function() { title: pandora.site.site.name, width: 800 }).open(); + */ } else if (data.id == 'register') { pandora.$ui.accountDialog = pandora.ui.accountDialog('register').open(); } else if (data.id == 'loginlogout') { diff --git a/static/js/pandora/ui/rightPanel.js b/static/js/pandora/ui/rightPanel.js index 0a7eba18..3759998a 100644 --- a/static/js/pandora/ui/rightPanel.js +++ b/static/js/pandora/ui/rightPanel.js @@ -2,16 +2,20 @@ pandora.ui.rightPanel = function() { var that; if (pandora.user.ui.section == 'site') { - that = new Ox.Element() - .html(pandora.user.ui.sitePage) - .bindEvent({ - resize: function(event, data) { - - } - }); + if (pandora.user.ui.sitePage == 'home') { + that = pandora.ui.homePage() + .bindEvent({ + resize: function(data) { + that.resize(); + } + }); + } else { + that = new Ox.Element() + .css({padding: '8px'}); pandora.api.getPage(pandora.user.ui.sitePage, function(result) { - that.html(result.data.body).css({'overflow-y':'auto'}); + that.html(result.data.body).css({overflowY: 'auto'}); }); + } } else if (pandora.user.ui.section == 'items') { that = new Ox.SplitPanel({ elements: [ diff --git a/static/json/pandora.json b/static/json/pandora.json index 9da403b4..6be50046 100644 --- a/static/json/pandora.json +++ b/static/json/pandora.json @@ -5,6 +5,7 @@ "js/pandora/autovalidate.js", "js/pandora/UI.js", "js/pandora/ui/info.js", + "js/pandora/ui/homePage.js", "js/pandora/ui/rightPanel.js", "js/pandora/ui/folderBrowserList.js", "js/pandora/ui/group.js", diff --git a/static/png/icon.16.png b/static/png/icon.16.png index 00dfb035..87623749 100644 Binary files a/static/png/icon.16.png and b/static/png/icon.16.png differ diff --git a/static/png/logo1024.png b/static/png/logo1024.png new file mode 100644 index 00000000..d5571528 Binary files /dev/null and b/static/png/logo1024.png differ diff --git a/static/png/logo256.png b/static/png/logo256.png new file mode 100644 index 00000000..ce3e7202 Binary files /dev/null and b/static/png/logo256.png differ