diff options
Diffstat (limited to 'module/web/static/js')
| -rw-r--r-- | module/web/static/js/default.js | 10 | ||||
| -rw-r--r-- | module/web/static/js/models/Package.js | 1 | ||||
| -rw-r--r-- | module/web/static/js/utils/animations.js | 36 | ||||
| -rw-r--r-- | module/web/static/js/views/abstract/itemView.js | 3 | ||||
| -rw-r--r-- | module/web/static/js/views/actionbarView.js | 28 | ||||
| -rw-r--r-- | module/web/static/js/views/dashboardView.js (renamed from module/web/static/js/views/packageTreeView.js) | 246 | ||||
| -rw-r--r-- | module/web/static/js/views/packageView.js | 21 | ||||
| -rw-r--r-- | module/web/static/js/views/selectionView.js | 59 |
8 files changed, 233 insertions, 171 deletions
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/packageTreeView.js b/module/web/static/js/views/dashboardView.js index 41db0dc2c..7f2b9809a 100644 --- a/module/web/static/js/views/packageTreeView.js +++ b/module/web/static/js/views/dashboardView.js @@ -1,115 +1,133 @@ -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;
- }
- });
+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/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 |