From b18fa59e40ebe9c03f81d49cf53a85bc728de8a7 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sun, 23 Dec 2012 20:10:01 +0100 Subject: proper selecting, expanding and rendering of packageViews --- module/web/static/js/models/Package.js | 21 +++- module/web/static/js/models/TreeCollection.js | 20 ++-- module/web/static/js/views/abstract/itemView.js | 5 - module/web/static/js/views/fileView.js | 12 ++- module/web/static/js/views/packageView.js | 135 ++++++++++++++++-------- 5 files changed, 128 insertions(+), 65 deletions(-) (limited to 'module/web/static/js') diff --git a/module/web/static/js/models/Package.js b/module/web/static/js/models/Package.js index 64b066dbc..7539b0673 100644 --- a/module/web/static/js/models/Package.js +++ b/module/web/static/js/models/Package.js @@ -22,7 +22,9 @@ define(['jquery', 'backbone', 'underscore', 'collections/FileList', 'require'], fids: null, pids: null, files: null, // Collection - packs: null // Collection + packs: null, // Collection + + selected: false // For Checkbox }, // Model Constructor @@ -51,16 +53,25 @@ define(['jquery', 'backbone', 'underscore', 'collections/FileList', 'require'], return Backbone.Model.prototype.destroy.call(this, options); }, - parse: function(resp, xhr) { + parse: function(resp) { // Package is loaded from tree collection if (_.has(resp, 'root')) { - resp.root.files = new FileList(_.values(resp.files)); + if(!this.has('files')) + resp.root.files = new FileList(_.values(resp.files)); + else + this.get('files').update(_.values(resp.files)); + // circular dependencies needs to be avoided var PackageList = require('collections/PackageList'); - resp.root.packs = new PackageList(_.values(resp.packages)); + + if (!this.has('packs')) + resp.root.packs = new PackageList(_.values(resp.packages)); + else + this.get('packs').update(_.values(resp.packages)); + return resp.root; } - return Backbone.model.prototype.fetch.call(this, resp, xhr); + return Backbone.model.prototype.parse.call(this, resp); }, // Package data is complete when it contains collection for containing files or packs diff --git a/module/web/static/js/models/TreeCollection.js b/module/web/static/js/models/TreeCollection.js index 27d2cefce..5949415c2 100644 --- a/module/web/static/js/models/TreeCollection.js +++ b/module/web/static/js/models/TreeCollection.js @@ -27,20 +27,20 @@ define(['jquery', 'backbone', 'underscore', 'models/Package', 'collections/FileL }, // Parse the response and updates the collections - parse: function(resp, xhr) { - if (this.get('packages') === null) - this.set('packages', new PackageList(_.values(resp.packages))); + parse: function(resp) { + var ret = {}; + if (!this.has('packages')) + ret.packages = new PackageList(_.values(resp.packages)); else - this.packages.update(_.values(resp.packages)); + this.get('files').update(_.values(resp.packages)); - if (this.get('files') === null) - this.set('files', new FileList(_.values(resp.files))); + if (!this.has('files')) + ret.files = new FileList(_.values(resp.files)); else - this.files.update(_.values(resp.files)); + this.get('files').update(_.values(resp.files)); - return { - root: new Package(resp.root) - }; + ret.root = new Package(resp.root); + return ret; } }); diff --git a/module/web/static/js/views/abstract/itemView.js b/module/web/static/js/views/abstract/itemView.js index a8cb14e7d..77c6bb5e4 100644 --- a/module/web/static/js/views/abstract/itemView.js +++ b/module/web/static/js/views/abstract/itemView.js @@ -24,11 +24,6 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) { this.$el.zapIn(); }, - load: function(e) { - if(e) - e.stopPropagation(); - this.model.fetch(); - }, delete: function(e) { if(e) diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js index f020a69d4..7e8f899a9 100644 --- a/module/web/static/js/views/fileView.js +++ b/module/web/static/js/views/fileView.js @@ -1,7 +1,8 @@ -define(['jquery', 'backbone', 'underscore', 'app'], function($, Backbone, _, App) { +define(['jquery', 'backbone', 'underscore', 'app', 'views/abstract/itemView'], + function($, Backbone, _, App, ItemView) { // Renders single file item - return Backbone.View.extend({ + return ItemView.extend({ tagName: 'li', className: 'file-view', @@ -12,6 +13,13 @@ define(['jquery', 'backbone', 'underscore', 'app'], function($, Backbone, _, App }, initialize: function() { + this.model.on('change', this.render, this); + this.model.on('remove', this.destroy, this); + }, + + onDestroy: function() { + this.model.off('change', this.render); + this.model.off('remove', this.destroy); }, render: function() { diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js index 154e7af77..17b6bc06f 100644 --- a/module/web/static/js/views/packageView.js +++ b/module/web/static/js/views/packageView.js @@ -1,48 +1,97 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView'], function($, itemView, _, fileView) { - // Renders a single package item - return itemView.extend({ - - tagName: 'li', - className: 'package-view', - template: _.compile($("#template-package").html()), - events: { - 'click .package-row.first': 'load', - 'click .delete': 'delete' - }, - - 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.model.off('filter:added', this.hide); // TODO - }, - - render: function() { - - // TODO: on expanding don't re-render - this.$el.html(this.template(this.model.toJSON())); - - if (this.model.isLoaded()) { - var ul = $(''); - this.model.get('files').each(function(file) { - ul.append(new fileView({model: file}).render().el); + // Renders a single package item + return itemView.extend({ + + tagName: 'li', + className: 'package-view', + template: _.compile($("#template-package").html()), + events: { + 'click .package-row .name': 'expand', + 'click .delete': 'delete', + 'click .checkbox': 'select' + }, + + // File views visible + expanded: false, + + 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.model.off('filter:added', this.hide); // TODO + }, + + // 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 + var ul = this.$('ul'); + if (!ul.length && this.model.isLoaded()) { + console.log('Rendered content of package ' + this.model.get('pid')); + ul = $(''); + + if(!this.expanded) + ul.hide(); + + this.model.get('files').each(function(file) { + ul.append(new fileView({model: file}).render().el); + }); + this.$el.append(ul); + } + return this; + }, + + unrender: function() { + var self = this; + this.$el.zapOut(function() { + self.destroy(); }); - this.$el.append(ul); + + // TODO destroy the fileViews ? + }, + + // TODO: animation + // Toggle expanding of packages + expand: function(e) { + e.preventDefault(); + var self = this; + + if (!this.expanded) { + this.model.fetch({silent: true, success: function() { + self.render(true); + self.$('ul').show(); + self.expanded = true; + }}); + } else { + this.expanded = false; + this.$('ul').hide(); + } + }, + + select: function(e) { + e.preventDefault(); + var checked = this.$('.checkbox').hasClass('checked'); + // toggle class immediately, so no re-render needed + this.model.set('checked', !checked, {silent: true}); + this.$('.checkbox').toggleClass('checked'); } - return this; - }, - - unrender: function() { - var self = this; - this.$el.zapOut(function() { - self.destroy(); - }); - } - }); -}); \ No newline at end of file + + }); + }); \ No newline at end of file -- cgit v1.2.3