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/js/views/dashboardView.js | 133 ++++++++++++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 module/web/static/js/views/dashboardView.js

(limited to 'module/web/static/js/views/dashboardView.js')

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
-- 
cgit v1.2.3