added some animations, code for show/hiding items

10 files changed, 172 insertions, 32 deletions

diff --git a/module/web/setup_app.py b/module/web/setup_app.py
new file mode 100644
index 000000000..adbd361a7
--- /dev/null
+++ b/module/web/setup_app.py
@@ -0,0 +1,13 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+from bottle import route, request, response, HTTPError
+
+from webinterface import PYLOAD, PROJECT_DIR, SETUP, env
+from utils import render_to_response
+
+
+@route("/setup")
+def setup():
+
+    return render_to_response('setup.html')
\ No newline at end of file
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 203135e97..a22f29999 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -292,7 +292,7 @@ footer h2 {
     margin-bottom: 5px;

 }

 

-#dash-nav li > a {

+#dash-nav > li > a {

     margin-top: 5px;

 }

 

@@ -315,4 +315,9 @@ footer h2 {
 #dash-nav input, #dash-nav button {

     padding-top: 2px;

     padding-bottom: 2px;

+}

+

+#dash-nav .dropdown-menu i {

+  margin-top: 4px;

+  padding-right: 5px;

 }
\ No newline at end of file
diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js
index 9b1448f61..18360c526 100644
--- a/module/web/static/js/utils/animations.js
+++ b/module/web/static/js/utils/animations.js
@@ -10,9 +10,58 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
         };
     });
 
+    // TODO: sloppy chaining
+    // in functions not possible without previous out
+
+    jQuery.fn.zapIn = function(speed, easing, callback) {
+        var height = this.data('height') || '100%';
+        this.transition({
+            height: height,
+            scale: [1, 1],
+            opacity: 'show'
+        }, speed, easing, callback);
+
+    };
+
+    jQuery.fn.zapOut = function(speed, easing, callback) {
+        if (!this.data('height')) {
+            var height = this.height();
+            this.css({height: height});
+            this.data('height', height)
+        }
+        this.transition({
+            height: '0px',
+            scale: [1, 0],
+            opacity: 'hide'
+        }, speed, easing, callback);
+
+    };
+
+    jQuery.fn.slideIn = function(speed, easing, callback) {
+        var height = this.data('height') || '100%';
+        this.transition({
+            height: height,
+            opacity: 'show'
+        }, speed, easing, callback);
+
+    };
+
+    jQuery.fn.slideOut = function(speed, easing, callback) {
+        if (!this.data('height')) {
+            var height = this.height();
+            this.css({height: height, overflow: 'hidden'});
+            this.data('height', height)
+        }
+        this.transition({
+            height: '0px',
+            opacity: 'hide'
+        }, speed, easing, callback);
+
+    };
+
     jQuery.fn._transit = jQuery.fn.transit;
 
-    // Over riding transit plugin to support hide and show
+    // Overriding transit plugin to support hide and show
     // Props retains it properties across multiple calls, therefore props.show value is introduced
     jQuery.fn.transit = jQuery.fn.transition = function(props, duration, easing, callback) {
         var self = this;
@@ -23,7 +72,9 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
 
             callback = function() {
                 self.css({display: 'none'});
-                if (typeof cb === 'function') { cb.apply(self); }
+                if (typeof cb === 'function') {
+                    cb.apply(self);
+                }
             };
         } else if (props && (props.opacity === 'show' || (props.opacity === 1 && props.show === true))) {
             props.opacity = 1;
diff --git a/module/web/static/js/views/abstract/itemView.js b/module/web/static/js/views/abstract/itemView.js
new file mode 100644
index 000000000..993764d3e
--- /dev/null
+++ b/module/web/static/js/views/abstract/itemView.js
@@ -0,0 +1,36 @@
+define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
+
+    // A view that is meant for temporary displaying
+    // All events must be unbound in onDestroy
+    return Backbone.View.extend({
+
+        tagName: 'li',
+        destroy: function() {
+            this.undelegateEvents();
+            this.unbind();
+            if (this.onDestroy){
+                this.onDestroy();
+            }
+            this.$el.removeData().unbind();
+            this.remove();
+        },
+
+
+        hide: function() {
+            this.$el.zapOut();
+        },
+
+        show: function() {
+            this.$el.zapIn();
+        },
+
+        load: function() {
+            this.model.fetch();
+        },
+
+        delete: function() {
+            this.model.destroy();
+        }
+
+    });
+});
\ No newline at end of file
diff --git a/module/web/static/js/views/modal/modalView.js b/module/web/static/js/views/modal/modalView.js
index 297808ead..05cb39c33 100644
--- a/module/web/static/js/views/modal/modalView.js
+++ b/module/web/static/js/views/modal/modalView.js
@@ -44,7 +44,7 @@ define(['jquery', 'backbone', 'underscore', 'text!tpl/default/modal.html', 'omni
                         },
 
                         show: function(subjects, internalCallback) {
-                            subjects.modal.transition({opacity: 'show', scale: 1}, 400, function() {
+                            subjects.modal.transition({opacity: 'show', scale: 1, delay: 100}, 300, function() {
                                 internalCallback(subjects);
                             });
                         }}
diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js
index 3cef27601..3329c9582 100644
--- a/module/web/static/js/views/packageTreeView.js
+++ b/module/web/static/js/views/packageTreeView.js
@@ -4,11 +4,12 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack
         // Renders whole PackageView
         return Backbone.View.extend({
 
-            el: '#dashboard',
+            el: '#content',
 
             events: {
                 'click #add': 'addPackage',
-                'keypress #name': 'addOnEnter'
+                'keypress #name': 'addOnEnter',
+                'click #show_active': 'filter'
             },
 
             initialize: function() {
@@ -25,27 +26,29 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack
 
             render: function() {
                 var packs = this.tree.get('packages'),
-                    files = this.tree.get('files');
+                    files = this.tree.get('files'),
+                    el = this.$('#dashboard');
 
-                this.$el.empty()
-                this.$el.append($('<span>Root: ' + this.tree.get('root').get('name') + ' </span>'));
-                this.$el.append($('<input id="name" type="text" size="20">'));
-                this.$el.append($('<a id="add" href="#"> Add</a><br>'));
+                el.empty();
+                el.append($('<span>Root: ' + this.tree.get('root').get('name') + ' </span>'));
+                el.append($('<input id="name" type="text" size="20">'));
+                el.append($('<a id="add" href="#"> Add</a><br>'));
 
                 var ul = $('<ul></ul>');
                 packs.each(function(pack) {
                     ul.append(new packageView({model: pack}).render().el);
                 });
 
-                this.$el.append(ul);
-                this.$el.append($('<br> Files: ' + files.size() + '<br>'));
+                el.append(ul);
+                el.append($('<br> Files: ' + files.size() + '<br>'));
 
                 ul = $('<ul></ul>');
                 files.each(function(file) {
                     ul.append(new fileView({model: file}).render().el);
                 });
 
-                this.$el.append(ul);
+                el.append(ul);
+                $('#name').focus();
 
                 return this;
             },
@@ -55,7 +58,7 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack
                 this.addPackage(e);
             },
 
-            addPackage: function() {
+            addPackage: function(e) {
                 var self = this;
                 var settings = {
                     type: 'POST',
@@ -72,6 +75,20 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack
 
                 $.ajax('api/addPackage', settings);
                 $('#name').val('');
+            },
+
+            toggle: false,
+
+            filter: function(e) {
+                var self = this;
+                this.tree.get('packages').each(function(item){
+                    if(!self.toggle)
+                       item.trigger('filter:added');
+                    else
+                        item.trigger('filter:removed');
+
+                });
+                self.toggle ^= true;
             }
         });
     });
\ No newline at end of file
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js
index 171325d1f..1fbcd0613 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -1,24 +1,30 @@
-define(['jquery', 'backbone', 'underscore', 'views/fileView', 'utils/lazyRequire'],
-    function($, Backbone, _, fileView, lazyLoader) {
+define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView', 'utils/lazyRequire'],
+    function($, itemView, _, fileView, lazyLoader) {
 
     // Renders a single package item
-    return Backbone.View.extend({
+    return itemView.extend({
 
         tagName: 'li',
         events: {
             'click .load': 'load',
             'click .delete': 'delete',
-            'click .show-dialog': 'show'
+            'click .show-dialog': 'show_dialog'
         },
 
         modal: null,
         requireOnce: lazyLoader.once(),
 
         initialize: function() {
+            this.model.on('filter:added', this.hide, this);
+            this.model.on('filter:removed', this.show, this);
             this.model.on('change', this.render, this);
             this.model.on('remove', this.unrender, this);
         },
 
+        onDestroy: function() {
+            this.modal.off('filter:added', this.hide); // TODO
+        },
+
         render: function() {
             this.$el.html('Package ' + this.model.get('pid') + ': ' + this.model.get('name'));
             this.$el.append($('<a class="load" href="#"> Load</a>'));
@@ -36,18 +42,13 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView', 'utils/lazyRequire
         },
 
         unrender: function() {
-            this.$el.remove();
-        },
-
-        load: function() {
-            this.model.fetch();
-        },
-
-        delete: function() {
-            this.model.destroy();
+            var self = this;
+            this.$el.zapOut(function() {
+                self.destroy();
+            });
         },
 
-        show: function() {
+        show_dialog: function() {
             var self = this;
             this.requireOnce(['views/modal/modalView'], function(modalView){
                 if (self.modal === null)
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index adcc6dc71..f6c6513aa 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -33,8 +33,8 @@
                 <b class="caret"></b>

             </a>

             <ul class="dropdown-menu">

-                <li><a>Audio</a></li>

-                <li><a>Video</a></li>

+                <li><a><i class="icon-ok"></i>&nbsp;Audio</a></li>

+                <li><a><i class="icon-remove"></i>&nbsp;Video</a></li>

                 <li><a>Archive</a></li>

             </ul>

         </li>

@@ -58,7 +58,7 @@
             <a>Unfinished</a>

         </li>

         <li class="active" style="float: right;">

-            <a>All</a>

+            <a href="#" id="show_active">All</a>

         </li>

     </ul>

     <div id="dashboard">

diff --git a/module/web/templates/default/setup.html b/module/web/templates/default/setup.html
new file mode 100644
index 000000000..e5c9f4b8c
--- /dev/null
+++ b/module/web/templates/default/setup.html
@@ -0,0 +1,16 @@
+{% extends 'default/base.html' %}
+{% block title %}
+    {{_("Setup")}} - {{ super()}}
+{% endblock %}
+
+{% block content %}
+    <div class="hero-unit">
+        <h1>You did it!</h1>
+        <p>pyLoad is running and ready for configuration.</p>
+        <p>
+            <a class="btn btn-primary btn-large">
+                Go on
+            </a>
+        </p>
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/module/web/webinterface.py b/module/web/webinterface.py
index 196825bfb..4438c36bb 100644
--- a/module/web/webinterface.py
+++ b/module/web/webinterface.py
@@ -120,6 +120,7 @@ if PREFIX:
     web = PrefixMiddleware(web, prefix=PREFIX)
 
 import pyload_app
+import setup_app
 import cnl_app
 import api_app