From c8bee03f8c0ca82c3981724e5bc661f630d9ab7e Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Tue, 19 Feb 2013 22:13:10 +0100
Subject: integrated new package view

---
 module/web/static/js/utils/animations.js      | 69 ++++++++++++++++++---------
 module/web/static/js/views/fileView.js        | 11 ++++-
 module/web/static/js/views/headerView.js      |  7 ++-
 module/web/static/js/views/packageTreeView.js | 67 ++++++++++++++++----------
 module/web/static/js/views/packageView.js     | 64 ++++++++++---------------
 module/web/static/js/views/selectionView.js   | 49 +++++++++++++++++++
 6 files changed, 179 insertions(+), 88 deletions(-)
 create mode 100644 module/web/static/js/views/selectionView.js

(limited to 'module/web/static/js')

diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js
index 657bd2bec..245614ea7 100644
--- a/module/web/static/js/utils/animations.js
+++ b/module/web/static/js/utils/animations.js
@@ -4,6 +4,7 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
     // Important function to have slide animations
     jQuery.fn.appendWithHeight = function(element, hide) {
         var o = jQuery(this[0]);
+        element = jQuery(element);
 
         // TODO: additionally it could be placed out of viewport first
         // The real height can only be retrieved when element is on DOM and display:true
@@ -24,6 +25,50 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
         return this;
     };
 
+    // Shortcut to have a animation when element is added
+    jQuery.fn.appendWithAnimation = function(element, animation) {
+        var o = jQuery(this[0]);
+        if (animation === true)
+            o.hide();
+
+        o.append(element);
+
+        if (animation === true)
+            o.fadeIn();
+
+        return this;
+    };
+
+    // calculate the height and write it to data, better used on invisible elements
+    jQuery.fn.calculateHeight = function() {
+        var o = jQuery(this[0]);
+        var height = o.height();
+        if (!height) {
+            var display = o.css('display');
+            o.css('visibility', 'hidden');
+            o.show();
+            height = o.height();
+
+            o.css('display', display);
+            o.css('visibility', '');
+        }
+
+        o.data('height', height);
+        return this;
+    };
+
+    jQuery.fn.slideOut = function() {
+        var o = jQuery(this[0]);
+        o.animate({height: o.data('height'), opacity: 'show'});
+        return this;
+    };
+
+    jQuery.fn.slideIn = function() {
+        var o = jQuery(this[0]);
+        o.animate({height: 0, opacity: 'hide'});
+        return this;
+    };
+
     // TODO: sloppy chaining
     //
     // in functions not possible without previous out
@@ -42,7 +87,7 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
         if (!this.data('height')) {
             var height = this.height();
             this.css({height: height});
-            this.data('height', height)
+            this.data('height', height);
         }
         this.transition({
             height: '0px',
@@ -52,28 +97,6 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
 
     };
 
-    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;
 
     // Overriding transit plugin to support hide and show
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index 7e8f899a9..86f7b33d2 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -9,7 +9,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'],
 //        template: _.template($("#template-file").html()),
         template: _.compile($("#template-file").html()),
         events: {
-
+            'click .checkbox': 'select'
         },
 
         initialize: function() {
@@ -25,6 +25,15 @@ define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'],
         render: function() {
             this.$el.html(this.template(this.model.toJSON()));
             return this;
+        },
+
+        select: function(e) {
+            e.preventDefault();
+            var checked = this.$('.checkbox').hasClass('checked');
+            // toggle class immediately, so no re-render needed
+            this.model.set('selected', !checked, {silent: true});
+            this.$('.checkbox').toggleClass('checked');
+            App.vent.trigger('file:selection');
         }
 
     });
diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js
index 7effcf79d..43c66b99f 100644
--- a/module/web/static/js/views/headerView.js
+++ b/module/web/static/js/views/headerView.js
@@ -1,4 +1,4 @@
-define(['jquery', 'backbone', 'flot'], function($, Backbone) {
+define(['jquery', 'underscore', 'backbone', 'flot'], function($, _, Backbone) {
     // Renders the header with all information
     return Backbone.View.extend({
 
@@ -12,9 +12,14 @@ define(['jquery', 'backbone', 'flot'], function($, Backbone) {
 
         // Will hold the link grabber
         grabber: null,
+        notifications: null,
+        selections: null,
 
         initialize: function() {
 
+            this.notifications = this.$('#notification-area').calculateHeight();
+            this.selections = this.$('#selection-area').calculateHeight();
+
             var totalPoints = 100;
             var data = [];
 
diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js
index 8791a93f2..41db0dc2c 100644
--- a/module/web/static/js/views/packageTreeView.js
+++ b/module/web/static/js/views/packageTreeView.js
@@ -1,5 +1,6 @@
-define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'views/packageView', 'views/fileView'],
-    function($, Backbone, _, App, TreeCollection, packageView, fileView) {
+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({
@@ -12,17 +13,27 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'vie
 
             // <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() {
@@ -37,29 +48,19 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'vie
                         console.log('Package ' + pack.get('pid') + ' added to tree');
                         self.appendPackage(pack, 0, true);
 
-                    })
+                    });
                 }});
             },
 
             render: function() {
-                var packs = this.tree.get('packages'),
-                    files = this.tree.get('files'),
-                    el = this.$('#dashboard');
-
-                el.empty();
+                var packs = this.tree.get('packages');
+                this.files = this.tree.get('files');
 
-                this.packageUL = $('<ul></ul>');
+                this.packageUL = this.$('.package-list');
                 packs.each(_.bind(this.appendPackage, this));
 
-                el.append(this.packageUL);
-                el.append($('<br> Files: ' + files.size() + '<br>'));
-
-                var ul = $('<ul></ul>');
-                files.each(function(file) {
-                    ul.append(new fileView({model: file}).render().el);
-                });
-
-                el.append(ul);
+                this.fileUL = this.$('.file-list');
+                this.files.each(_.bind(this.appendFile, this));
 
                 return this;
             },
@@ -68,19 +69,37 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'vie
             // Append a package to the list, index, animate it
             appendPackage: function(pack, i, animation) {
                 var el = new packageView({model: pack}).render().el;
-                if (animation == true)
-                    $(el).hide();
+                this.packageUL.appendWithAnimation(el, animation);
+            },
 
-                this.packageUL.append(el);
+            appendFile: function(file, i, animation) {
+                var el = new fileView({model: file}).render().el;
+                this.fileUL.appendWithAnimation(el, animation);
+            },
 
-                if (animation == true)
-                    $(el).fadeIn();
+            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) {
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js
index 2c1541c7f..38b335dc9 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -1,5 +1,5 @@
-define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
-    function($, itemView, _, fileView) {
+define(['jquery', 'app', 'views/abstract/itemView', 'underscore'],
+    function($, App, itemView, _) {
 
         // Renders a single package item
         return itemView.extend({
@@ -8,14 +8,14 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
             className: 'package-view',
             template: _.compile($("#template-package").html()),
             events: {
-                'click .package-row .name': 'expand',
-                'click .btn-remove': 'delete',
-                'click .checkbox': 'select'
+                'click .package-name': 'open',
+                'click .iconf-trash': 'delete',
+                'click .select': 'select'
             },
 
+            // Ul for child packages (unused)
             ul: null,
-
-            // File views visible
+            // Currently unused
             expanded: false,
 
             initialize: function() {
@@ -30,34 +30,9 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
             },
 
             // Render everything, optional only the fileViews
-            render: function(fileOnly) {
-                var container = this.$('.package-header');
-                if (!container.length)
-                    this.$el.html(this.template(this.model.toJSON()));
-                else if (!fileOnly)
-                    container.replaceWith(this.template(this.model.toJSON()));
-
-                // TODO: could be done in template
-                if (this.model.get('checked'))
-                    this.$('.checkbox').addClass('checked');
-                else
-                    this.$('.checkbox').removeClass('checked');
-
-                // Only create this views a single time
-                if (!this.ul && this.model.isLoaded()) {
-                    console.log('Rendered content of package ' + this.model.get('pid'));
-                    var ul = $('<ul></ul>');
-                    ul.addClass('file-items');
+            render: function() {
+                this.$el.html(this.template(this.model.toJSON()));
 
-                    this.model.get('files').each(function(file) {
-                        ul.append(new fileView({model: file}).render().el);
-                    });
-
-                    // Hide the element when not expanded
-                    this.$el.appendWithHeight(ul, !this.expanded);
-
-                    this.ul = ul;
-                }
                 return this;
             },
 
@@ -67,9 +42,11 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
                     self.destroy();
                 });
 
-                // TODO destroy the fileViews ?
+                // TODO: display other package
             },
 
+
+            // TODO
             // Toggle expanding of packages
             expand: function(e) {
                 e.preventDefault();
@@ -88,13 +65,22 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'],
                 }
             },
 
+            open: function(e) {
+                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'));
+                }});
+            },
+
             select: function(e) {
                 e.preventDefault();
-                var checked = this.$('.checkbox').hasClass('checked');
+                var checked = this.$('.select').hasClass('iconf-check');
                 // toggle class immediately, so no re-render needed
-                this.model.set('checked', !checked, {silent: true});
-                this.$('.checkbox').toggleClass('checked');
+                this.model.set('selected', !checked, {silent: true});
+                this.$('.select').toggleClass('iconf-check').toggleClass('iconf-check-empty');
+                App.vent.trigger('package:selection');
             }
-
         });
     });
\ No newline at end of file
diff --git a/module/web/static/js/views/selectionView.js b/module/web/static/js/views/selectionView.js
new file mode 100644
index 000000000..5cb22b776
--- /dev/null
+++ b/module/web/static/js/views/selectionView.js
@@ -0,0 +1,49 @@
+define(['jquery', 'backbone', 'underscore', 'app'],
+    function($, Backbone, _, App) {
+
+        // Renders context actions for selection packages and files
+        return Backbone.View.extend({
+            el: '#selection-area',
+            template: _.compile($("#template-select").html()),
+
+            // available packages
+            tree: null,
+            // selected files
+            files: null,
+            // needed to know when slide down
+            current: 0,
+
+            initialize: function(tree) {
+                this.tree = tree;
+                this.files = tree.get('files');
+
+                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));
+            },
+
+            render: function() {
+                var files = 0;
+                if (this.files)
+                    files = this.files.where({selected: true}).length;
+
+                var packs = this.tree.get('packages').where({selected: true}).length;
+
+                if (files + packs > 0)
+                    this.$el.html(this.template({files: files, packs: packs}));
+
+                if (files + packs > 0 && this.current === 0)
+                    this.$el.slideOut();
+                else if (files + packs === 0 && this.current > 0)
+                    this.$el.slideIn();
+
+                this.current = files + packs;
+
+            },
+
+            set_files: function(files) {
+                this.files = files;
+                this.render();
+            }
+        });
+    });
\ No newline at end of file
-- 
cgit v1.2.3