diff options
Diffstat (limited to 'module/web/static/js/views')
| -rw-r--r-- | module/web/static/js/views/abstract/itemView.js | 5 | ||||
| -rw-r--r-- | module/web/static/js/views/fileView.js | 12 | ||||
| -rw-r--r-- | module/web/static/js/views/packageView.js | 135 |
3 files changed, 102 insertions, 50 deletions
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 = $('<ul></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 = $('<ul></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 |