From aa5976273e902208890aa5587580f7db21619a0f Mon Sep 17 00:00:00 2001
From: rolux <rolux@rollux.org>
Date: Wed, 15 Feb 2012 09:23:30 +0000
Subject: [PATCH] add pad.ma home screen

---
 pandora/itemlist/views.py              |   2 +-
 static/js/pandora.js                   |  73 ++--
 static/js/pandora/embedDialog.js       |  28 +-
 static/js/pandora/home.padma.js        | 443 +++++++++++++++++++++----
 static/js/pandora/importAnnotations.js |   2 +-
 5 files changed, 437 insertions(+), 111 deletions(-)

diff --git a/pandora/itemlist/views.py b/pandora/itemlist/views.py
index f9f8b46fe..352355456 100644
--- a/pandora/itemlist/views.py
+++ b/pandora/itemlist/views.py
@@ -95,7 +95,7 @@ def findLists(request):
     def is_featured_condition(x):
         return x['key'] == 'status' and \
                x['value'] == 'featured' and \
-               x['operator'] == '='
+               x['operator'] in ('=', '==')
     is_featured = len(filter(is_featured_condition, data['query'].get('conditions', []))) > 0 
 
     if is_section_request:
diff --git a/static/js/pandora.js b/static/js/pandora.js
index e3582c62f..b76eefd49 100644
--- a/static/js/pandora.js
+++ b/static/js/pandora.js
@@ -52,42 +52,45 @@ appPanel
         var images = {};
         images.logo = document.createElement('img');
         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);
         };
-        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.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) {
@@ -136,9 +139,7 @@ appPanel
 
     function loadOxUI(callback) {
         Ox.load({
-            UI: {
-                theme: theme
-            },
+            UI: {theme: theme},
             Geo: {}
         }, callback);
     }
diff --git a/static/js/pandora/embedDialog.js b/static/js/pandora/embedDialog.js
index 996673204..b63a088fa 100644
--- a/static/js/pandora/embedDialog.js
+++ b/static/js/pandora/embedDialog.js
@@ -18,15 +18,14 @@ pandora.ui.embedDialog = function(data) {
             ],
             closeButton: true,
             content: content,
-            height: height,
+            height: 120,
             keys: {
                 'escape': 'close'
             },
             maximizeButton: true,
-            minHeight: height,
-            minWidth: width,
+            removeOnClose: true,
             title: 'Embed Video',
-            width: width
+            width: 600 
         })
         .bindEvent({
             close: function(data) {
@@ -45,7 +44,24 @@ pandora.ui.embedDialog = function(data) {
         });
         return url + query.join('&');
     }
-    content.html('To embed this video you need unicorns... or try this code:<br>');
-    content.append($('<textarea>').css({width:"100%", height:"100%"}).val('<iframe width="'+width+'" height="'+height+'" src="'+constructUrl(data)+'" frameborder="0" allowfullscreen></iframe>'));
+    content.html('To embed this video use this code on your page:<br>');
+    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;
 };
diff --git a/static/js/pandora/home.padma.js b/static/js/pandora/home.padma.js
index b1cb71517..1d9f3c3a3 100644
--- a/static/js/pandora/home.padma.js
+++ b/static/js/pandora/home.padma.js
@@ -4,7 +4,8 @@
 
 pandora.ui.home = function() {
 
-    var that = $('<div>')
+    var self = {},
+        that = $('<div>')
             .addClass('OxScreen')
             .css({
                 position: 'absolute',
@@ -13,35 +14,44 @@ pandora.ui.home = function() {
                 opacity: 0,
                 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>')
             .attr({src: '/static/png/logo256.png'})
             .css({
                 position: 'absolute',
                 left: 0,
-                top: '160px',
+                top: '80px',
                 right: 0,
                 bottom: 0,
                 width: '320px',
-                margin: 'auto',
-                opacity: 0,
+                margin: '0 auto 0 auto',
                 MozTransform: 'scaleY(-1)',
                 OTransform: 'scaleY(-1)',
                 WebkitTransform: 'scaleY(-1)'
             })
-            .appendTo(that),
+            .appendTo($box),
         $reflectionGradient = $('<div>')
             .addClass('OxReflection')
             .css({
                 position: 'absolute',
                 left: 0,
-                top: '160px',
+                top: '80px',
                 right: 0,
-                bottom: 0,
                 width: '320px',
                 height: '160px',
-                margin: 'auto',
+                margin: '0 auto 0 auto',
             })
-            .appendTo(that),
+            .appendTo($box),
         $logo = $('<img>')
             .attr({
                 id: 'logo',
@@ -50,11 +60,9 @@ pandora.ui.home = function() {
             .css({
                 position: 'absolute',
                 left: 0,
-                top: 0,
                 right: 0,
-                bottom: '160px',
-                width: window.innerWidth + 'px',
-                margin: 'auto',
+                width: '320px',
+                margin: '0 auto 0 auto',
                 cursor: 'pointer'
             })
             .bind({
@@ -62,17 +70,17 @@ pandora.ui.home = 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
             })
             .click(function(e) {
@@ -88,18 +96,18 @@ pandora.ui.home = function() {
                     }
                 }
             })
-            .appendTo(that),
+            .appendTo($box),
         $findButton = Ox.Button({
                 title: '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({
@@ -121,18 +129,18 @@ pandora.ui.home = function() {
                     });
                 }
             })
-            .appendTo(that),
+            .appendTo($box),
         $browseButton = Ox.Button({
                 title: '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({
@@ -141,18 +149,18 @@ pandora.ui.home = function() {
                     that.fadeOutScreen();
                 }
             })
-            .appendTo(that),
+            .appendTo($box),
         $signupButton = Ox.Button({
                 title: 'Sign Up',
-                width: 74
+                width: 122
             })
             .css({
                 position: 'absolute',
                 left: 0,
-                top: '112px',
-                right: '246px',
+                top: '144px',
+                right: '390px',
                 bottom: 0,
-                margin: 'auto',
+                margin: '0 auto 0 auto',
                 opacity: 0
             })
             .bindEvent({
@@ -163,15 +171,15 @@ pandora.ui.home = function() {
             }),
         $signinButton = Ox.Button({
                 title: 'Sign In',
-                width: 74
+                width: 122
             })
             .css({
                 position: 'absolute',
                 left: 0,
-                top: '112px',
-                right: '82px',
+                top: '144px',
+                right: '130px',
                 bottom: 0,
-                margin: 'auto',
+                margin: '0 auto 0 auto',
                 opacity: 0
             })
             .bindEvent({
@@ -182,15 +190,15 @@ pandora.ui.home = function() {
             }),
         $preferencesButton = Ox.Button({
                 title: 'Preferences',
-                width: 156
+                width: 252
             })
             .css({
                 position: 'absolute',
                 left: 0,
-                top: '112px',
-                right: '164px',
+                top: '144px',
+                right: '260px',
                 bottom: 0,
-                margin: 'auto',
+                margin: '0 auto 0 auto',
                 opacity: 0
             })
             .bindEvent({
@@ -201,15 +209,15 @@ pandora.ui.home = function() {
             }),
         $aboutButton = Ox.Button({
                 title: 'About ' + pandora.site.site.name,
-                width: 156
+                width: 252
             })
             .css({
                 position: 'absolute',
-                left: '164px',
-                top: '112px',
+                left: '260px',
+                top: '144px',
                 right: 0,
                 bottom: 0,
-                margin: 'auto',
+                margin: '0 auto 0 auto',
                 opacity: 0
             })
             .bindEvent({
@@ -218,61 +226,362 @@ pandora.ui.home = function() {
                     that.fadeOutScreen();
                 }
             })
-            .appendTo(that),
-        $text = $('<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.')
+            .appendTo($box),
+        $lists = $('<div>')
+            .attr({id: 'lists'})
             .css({
                 position: 'absolute',
                 left: 0,
-                top: '176px',
+                top: '184px',
                 right: 0,
                 bottom: 0,
-                width: '360px',
-                height: '16px',
-                margin: 'auto',
-                opacity: 0,
-                textAlign: 'center'
+                width: '560px',
+                margin: '0 auto 0 auto',
+                opacity: 0
             })
-            .appendTo(that);
+            .appendTo($box);
 
     if (pandora.user.level == 'guest') {
-        $signupButton.appendTo(that);
-        $signinButton.appendTo(that);
+        $signupButton.appendTo($box);
+        $signinButton.appendTo($box);
     } 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() {
+        $box.css({marginTop: '80px'});
         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);
+                showLists();
             });
         });
-        $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() {
+        hideLists();
+        that.find('*').hide();
+        that.animate({opacity: 0}, 250, function() {
             that.remove();
         });
+        self.keydown && Ox.$document.unbind({keydown: self.keydown});
         return that;
     };
 
     that.hideScreen = function() {
+        hideLists();
         that.hide().remove();
-        that.find(':not(#logo)').css({opacity: 0});
+        that.find('*').css({opacity: 0});
         $logo.css({width: window.innerWidth + 'px'});
+        self.keydown && Ox.$document.unbind({keydown: self.keydown});
         return that;
     };
 
     that.showScreen = function() {
-        $logo.css({width: '320px'});
-        that.find(':not(#logo)').css({opacity: 1});
         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;
     };
 
diff --git a/static/js/pandora/importAnnotations.js b/static/js/pandora/importAnnotations.js
index fedb466f7..32b0341a4 100644
--- a/static/js/pandora/importAnnotations.js
+++ b/static/js/pandora/importAnnotations.js
@@ -4,7 +4,7 @@
 pandora.ui.importAnnotations = function(data) {
     var content = Ox.Element().css({margin: '16px'}),
         file,
-        height = 240,
+        height = 180,
         width = 640,
         that = Ox.Dialog({
             buttons: [