From 1e1b64539144006c59c7b705700fc7f34c7a26b1 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Wed, 20 Feb 2013 12:00:22 +0100
Subject: more animation for dashboard

---
 module/web/static/css/default/dashboard.less    |   5 +-
 module/web/static/css/default/style.less        |  11 +-
 module/web/static/js/default.js                 |  10 +-
 module/web/static/js/models/Package.js          |   1 +
 module/web/static/js/utils/animations.js        |  36 ++-----
 module/web/static/js/views/abstract/itemView.js |   3 +-
 module/web/static/js/views/actionbarView.js     |  28 +++++
 module/web/static/js/views/dashboardView.js     | 133 ++++++++++++++++++++++++
 module/web/static/js/views/packageTreeView.js   | 115 --------------------
 module/web/static/js/views/packageView.js       |  21 +---
 module/web/static/js/views/selectionView.js     |  59 ++++++++++-
 module/web/templates/default/dashboard.html     |  12 ++-
 12 files changed, 256 insertions(+), 178 deletions(-)
 create mode 100644 module/web/static/js/views/actionbarView.js
 create mode 100644 module/web/static/js/views/dashboardView.js
 delete mode 100644 module/web/static/js/views/packageTreeView.js

(limited to 'module/web')

diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index a582e7326..4d504fdc3 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -58,6 +58,8 @@
     position: absolute;
     height: @frame-bottom;
     line-height: @frame-bottom;
+    font-size: 12px;
+    text-align: center;
     border-radius: 0;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
@@ -66,6 +68,7 @@
     right: 0;
     margin-bottom: 0;
     background-image: none;
+    color: @light;
     background-color: @yellow;
   }
 
@@ -176,7 +179,7 @@
   width: 50%;
   font-weight: bold;
 
-  i {
+  .icon-file {
     cursor: move;
   }
 
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 7db464c92..3e2a42abf 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -333,8 +333,15 @@ header .logo {
   left: 50%;
   bottom: -28px;
   min-width: 15%;
-//  color: @dark;
-//  background-color: @light;
+
+  i {
+    cursor: pointer;
+
+    &:hover {
+      color: @yellow;
+    }
+  }
+
 }
 
 /*
diff --git a/module/web/static/js/default.js b/module/web/static/js/default.js
index bb9701935..afe624ff9 100644
--- a/module/web/static/js/default.js
+++ b/module/web/static/js/default.js
@@ -1,15 +1,15 @@
-define('default', ['require', 'jquery', 'app', 'views/headerView', 'views/packageTreeView'],
-    function(require, $, App, HeaderView, TreeView) {
+define('default', ['require', 'jquery', 'app', 'views/headerView', 'views/dashboardView'],
+    function(require, $, App, HeaderView, DashboardView) {
 
         App.init = function() {
             App.header = new HeaderView();
             App.header.render();
         };
 
-        App.initPackageTree = function() {
+        App.initDashboard = function() {
             $(function() {
-                App.treeView = new TreeView();
-                App.treeView.init();
+                App.dashboard = new DashboardView();
+                App.dashboard.init();
             });
         };
 
diff --git a/module/web/static/js/models/Package.js b/module/web/static/js/models/Package.js
index 7539b0673..24f04519e 100644
--- a/module/web/static/js/models/Package.js
+++ b/module/web/static/js/models/Package.js
@@ -17,6 +17,7 @@ define(['jquery', 'backbone', 'underscore', 'collections/FileList', 'require'],
                 added: -1,
                 tags: null,
                 status: -1,
+                shared: false,
                 packageorder: -1,
                 stats: null,
                 fids: null,
diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js
index 245614ea7..798f69358 100644
--- a/module/web/static/js/utils/animations.js
+++ b/module/web/static/js/utils/animations.js
@@ -28,13 +28,17 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
     // Shortcut to have a animation when element is added
     jQuery.fn.appendWithAnimation = function(element, animation) {
         var o = jQuery(this[0]);
+        element = jQuery(element);
+
         if (animation === true)
-            o.hide();
+            element.hide();
 
         o.append(element);
 
         if (animation === true)
-            o.fadeIn();
+            element.fadeIn();
+
+        element.calculateHeight();
 
         return this;
     };
@@ -69,34 +73,6 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
         return this;
     };
 
-    // 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._transit = jQuery.fn.transit;
 
     // Overriding transit plugin to support hide and show
diff --git a/module/web/static/js/views/abstract/itemView.js b/module/web/static/js/views/abstract/itemView.js
index 7740abe5e..1c14e7dc3 100644
--- a/module/web/static/js/views/abstract/itemView.js
+++ b/module/web/static/js/views/abstract/itemView.js
@@ -24,8 +24,7 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
             this.$el.slideDown();
         },
 
-
-        delete: function(e) {
+        deleteItem: function(e) {
             if(e)
                 e.stopPropagation();
             this.model.destroy();
diff --git a/module/web/static/js/views/actionbarView.js b/module/web/static/js/views/actionbarView.js
new file mode 100644
index 000000000..bdfb9ef7b
--- /dev/null
+++ b/module/web/static/js/views/actionbarView.js
@@ -0,0 +1,28 @@
+define(['jquery', 'backbone', 'underscore', 'app'],
+    function($, Backbone, _, App) {
+
+        // Renders the actionbar for the dashboard
+        return Backbone.View.extend({
+            el: 'ul.actionbar',
+
+            events: {
+            },
+
+            initialize: function() {
+
+                this.$('.search-query').typeahead({
+                    minLength: 2,
+                    source: this.getAutocompletion
+                });
+
+            },
+
+            render: function() {
+            },
+
+            getAutocompletion: function() {
+                return ["static", "autocompletion", "demo", "with", "some", "keywords",
+                    "a very long proposal for autocompletion"];
+            }
+        });
+    });
\ No newline at end of file
diff --git a/module/web/static/js/views/dashboardView.js b/module/web/static/js/views/dashboardView.js
new file mode 100644
index 000000000..7f2b9809a
--- /dev/null
+++ b/module/web/static/js/views/dashboardView.js
@@ -0,0 +1,133 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
+    'views/packageView', 'views/fileView', 'views/selectionView', 'views/actionbarView'],
+    function($, Backbone, _, App, TreeCollection, packageView, fileView, selectionView, actionbarView) {
+
+        // Renders whole dashboard
+        return Backbone.View.extend({
+
+            el: '#content',
+
+            events: {
+                'click #show_active': 'filter'
+            },
+
+            // <ul> holding the packages
+            packageUL: null,
+            // <ul> displaying the files
+            fileUL: null,
+            // Current open files
+            files: null,
+            // True when loading animation is running
+            isLoading: false,
+
+            initialize: function() {
+                var self = this;
+                this.tree = new TreeCollection();
+
+                var view = new selectionView(this.tree);
+                view = new actionbarView();
+
+                // When package is added we reload the data
+                App.vent.on('package:added', function() {
+                    console.log('Package tree caught, package:added event');
+                    self.tree.fetch();
+                });
+
+                // TODO file:added
+
+                App.vent.on('dashboard:loading', _.bind(this.loading, this));
+                App.vent.on('dashboard:contentReady', _.bind(this.contentReady, this));
+            },
+
+            init: function() {
+                var self = this;
+
+                // TODO: put in separated function
+                // TODO: order of elements?
+                // Init the tree and callback for package added
+                this.tree.fetch({success: function() {
+                    self.render();
+                    self.tree.get('packages').on('add', function(pack) {
+                        console.log('Package ' + pack.get('pid') + ' added to tree');
+                        self.appendPackage(pack, 0, true);
+
+                    });
+                }});
+            },
+
+            render: function() {
+                console.log('Render package list');
+                var packs = this.tree.get('packages');
+                this.files = this.tree.get('files');
+
+                this.packageUL = this.$('.package-list');
+                packs.each(_.bind(this.appendPackage, this));
+
+                this.fileUL = this.$('.file-list');
+                this.files.each(_.bind(this.appendFile, this));
+
+                return this;
+            },
+
+            // TODO sorting ?!
+            // Append a package to the list, index, animate it
+            appendPackage: function(pack, i, animation) {
+                var el = new packageView({model: pack}).render().el;
+                this.packageUL.appendWithAnimation(el, animation);
+            },
+
+            appendFile: function(file, i, animation) {
+                var el = new fileView({model: file}).render().el;
+                this.fileUL.appendWithAnimation(el, animation);
+            },
+
+            contentReady: function(files) {
+                this.files = files;
+                // show the files when no loading animation is running
+                if (!this.isLoading && this.files !== files)
+                    this.show();
+            },
+
+            loading: function(model) {
+                // nothing to load when it is already open
+                if (model && this.files === model.get('files'))
+                    return;
+
+                this.isLoading = true;
+                this.files = null;
+                var self = this;
+                // Render when the files are already set
+                this.fileUL.fadeOut({complete: function() {
+                    if (self.files)
+                        self.show();
+
+                    self.isLoading = false;
+                }});
+            },
+
+            failure: function() {
+                // TODO
+            },
+
+            show: function() {
+                this.fileUL.empty();
+                this.files.each(_.bind(this.appendFile, this));
+                this.fileUL.fadeIn();
+                App.vent.trigger('dashboard:show', this.files);
+            },
+
+            // TODO: remove this debug stuff
+            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/packageTreeView.js b/module/web/static/js/views/packageTreeView.js
deleted file mode 100644
index 41db0dc2c..000000000
--- a/module/web/static/js/views/packageTreeView.js
+++ /dev/null
@@ -1,115 +0,0 @@
-define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
-    'views/packageView', 'views/fileView', 'views/selectionView'],
-    function($, Backbone, _, App, TreeCollection, packageView, fileView, selectionView) {
-
-        // Renders whole PackageView
-        return Backbone.View.extend({
-
-            el: '#content',
-
-            events: {
-                'click #show_active': 'filter'
-            },
-
-            // <ul> holding the packages
-            packageUL: null,
-            // <ul> displaying the files
-            fileUL: null,
-            // current open model
-            opened: null,
-            // Current open files
-            files: null,
-
-            initialize: function() {
-                var self = this;
-                this.tree = new TreeCollection();
-
-                var view = new selectionView(this.tree);
-
-                // When package is added we reload the data
-                App.vent.on('package:added', function() {
-                    console.log('Package tree caught, package:added event');
-                    self.tree.fetch();
-                });
-
-                App.vent.on('dashboard:loading', _.bind(this.loading, this));
-                App.vent.on('dashboard:show', _.bind(this.show, this));
-            },
-
-            init: function() {
-                var self = this;
-
-                // TODO: put in separated function
-                // TODO: order of elements?
-                // Init the tree and callback for package added
-                this.tree.fetch({success: function() {
-                    self.render();
-                    self.tree.get('packages').on('add', function(pack) {
-                        console.log('Package ' + pack.get('pid') + ' added to tree');
-                        self.appendPackage(pack, 0, true);
-
-                    });
-                }});
-            },
-
-            render: function() {
-                var packs = this.tree.get('packages');
-                this.files = this.tree.get('files');
-
-                this.packageUL = this.$('.package-list');
-                packs.each(_.bind(this.appendPackage, this));
-
-                this.fileUL = this.$('.file-list');
-                this.files.each(_.bind(this.appendFile, this));
-
-                return this;
-            },
-
-            // TODO sorting ?!
-            // Append a package to the list, index, animate it
-            appendPackage: function(pack, i, animation) {
-                var el = new packageView({model: pack}).render().el;
-                this.packageUL.appendWithAnimation(el, animation);
-            },
-
-            appendFile: function(file, i, animation) {
-                var el = new fileView({model: file}).render().el;
-                this.fileUL.appendWithAnimation(el, animation);
-            },
-
-            loading: function(model) {
-                // nothing to load when it is already open
-//                if (this.opened === model)
-//                    return;
-                // TODO: do not rerender already opened
-                this.opened = model;
-                this.files = null;
-//                this.fileUL.fadeOut();
-                this.fileUL.empty();
-            },
-
-            failure: function() {
-                // TODO
-            },
-
-            show: function(files) {
-                this.files = files;
-                files.each(_.bind(this.appendFile, this));
-                this.fileUL.fadeIn();
-            },
-
-            // TODO: remove this debug stuff
-            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 38b335dc9..eb3edccd8 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -9,7 +9,7 @@ define(['jquery', 'app', 'views/abstract/itemView', 'underscore'],
             template: _.compile($("#template-package").html()),
             events: {
                 'click .package-name': 'open',
-                'click .iconf-trash': 'delete',
+                'click .iconf-trash': 'deleteItem',
                 'click .select': 'select'
             },
 
@@ -38,11 +38,12 @@ define(['jquery', 'app', 'views/abstract/itemView', 'underscore'],
 
             unrender: function() {
                 var self = this;
-                this.$el.zapOut(function() {
+                this.$el.slideUp(function() {
                     self.destroy();
                 });
 
                 // TODO: display other package
+                App.vent.trigger('dashboard:loading', null);
             },
 
 
@@ -50,27 +51,15 @@ define(['jquery', 'app', 'views/abstract/itemView', 'underscore'],
             // Toggle expanding of packages
             expand: function(e) {
                 e.preventDefault();
-                var self = this;
-
-                //  this assumes the ul was created after item was rendered
-                if (!this.expanded) {
-                    this.model.fetch({silent: true, success: function() {
-                        self.render(true);
-                        self.ul.animate({height: self.ul.data('height'), opacity: 'show'});
-                        self.expanded = true;
-                    }});
-                } else {
-                    this.expanded = false;
-                    this.ul.animate({height: 0, opacity: 'hide'});
-                }
             },
 
             open: function(e) {
+                e.preventDefault();
                 var self = this;
                 App.vent.trigger('dashboard:loading', this.model);
                 this.model.fetch({silent: true, success: function() {
                     console.log('Package ' + self.model.get('pid') + ' loaded');
-                    App.vent.trigger('dashboard:show', self.model.get('files'));
+                    App.vent.trigger('dashboard:contentReady', self.model.get('files'));
                 }});
             },
 
diff --git a/module/web/static/js/views/selectionView.js b/module/web/static/js/views/selectionView.js
index 5cb22b776..673753cba 100644
--- a/module/web/static/js/views/selectionView.js
+++ b/module/web/static/js/views/selectionView.js
@@ -6,6 +6,13 @@ define(['jquery', 'backbone', 'underscore', 'app'],
             el: '#selection-area',
             template: _.compile($("#template-select").html()),
 
+            events: {
+                'click .iconf-check': 'deselect',
+                'click .iconf-pause': 'pause',
+                'click .iconf-trash': 'trash',
+                'click .iconf-refresh': 'refresh'
+            },
+
             // available packages
             tree: null,
             // selected files
@@ -20,14 +27,26 @@ define(['jquery', 'backbone', 'underscore', 'app'],
                 App.vent.on('dashboard:show', _.bind(this.set_files, this));
                 App.vent.on('package:selection', _.bind(this.render, this));
                 App.vent.on('file:selection', _.bind(this.render, this));
+
+                // TODO
+//                this.tree.get('packages').on('delete', _.bind(this.render, this));
             },
 
-            render: function() {
-                var files = 0;
+            get_files: function() {
+                var files = [];
                 if (this.files)
-                    files = this.files.where({selected: true}).length;
+                    files = this.files.where({selected: true});
+
+                return files;
+            },
 
-                var packs = this.tree.get('packages').where({selected: true}).length;
+            get_packs: function() {
+                return this.tree.get('packages').where({selected: true});
+            },
+
+            render: function() {
+                var files = this.get_files().length;
+                var packs = this.get_packs().length;
 
                 if (files + packs > 0)
                     this.$el.html(this.template({files: files, packs: packs}));
@@ -44,6 +63,38 @@ define(['jquery', 'backbone', 'underscore', 'app'],
             set_files: function(files) {
                 this.files = files;
                 this.render();
+            },
+
+            deselect: function() {
+                this.get_files().map(function(file) {
+                    file.set('selected', false);
+                });
+
+                this.get_packs().map(function(pack) {
+                    pack.set('selected', false);
+                });
+
+                this.render();
+            },
+
+            pause: function() {
+                // TODO
+            },
+
+            trash: function() {
+                this.get_files().map(function(file) {
+                    file.destroy();
+                });
+
+                this.get_packs().map(function(pack) {
+                    pack.destroy();
+                });
+
+                this.render();
+            },
+
+            refresh: function() {
+                // TODO
             }
         });
     });
\ No newline at end of file
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index 2dc29a583..1d4412846 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block require %}
-    App.initPackageTree();
+    App.initDashboard();
 {% endblock %}
 
 {% block head %}
@@ -21,6 +21,7 @@
         <span class="package-name">
         <% name %>
         </span>
+
         <div class="package-frame">
             <div class="tag-area">
                 <span class="badge badge-success"><i class="iconf-tag"></i>video</span>
@@ -29,7 +30,11 @@
             <div class="package-indicator">
                 <i class="iconf-pause"></i>
                 <i class="iconf-refresh"></i>
+                <%= if shared %>
+                <i class="iconf-eye-open"></i>
+                <% else %>
                 <i class="iconf-eye-close"></i>
+                <%/if%>
                 <i class="iconf-trash"></i>
                 <i class="iconf-chevron-down"></i>
             </div>
@@ -75,11 +80,12 @@
         <%= if packs %>
         <% packs %> packages
         <%/if %>
-        selected
         <%= if files %>
         <% files %> files
         <%/if %>
+        selected
         &nbsp;|&nbsp;
+        <i class="iconf-pause"></i>&nbsp;
         <i class="iconf-trash"></i>&nbsp;
         <i class="iconf-refresh"></i>
     </script>
@@ -90,7 +96,7 @@
     <ul class="actionbar nav nav-pills span9">
         <li>
             <ul class="breadcrumb">
-                <li><a href="#">{{ _("Home") }}</a> <span class="divider">/</span></li>
+                <li><a href="#">{{ _("Local") }}</a> <span class="divider">/</span></li>
                 <li class="active">Data</li>
             </ul>
         </li>
-- 
cgit v1.2.3