diff options
Diffstat (limited to 'module/web/static/js')
| -rw-r--r-- | module/web/static/js/utils/animations.js | 55 | ||||
| -rw-r--r-- | module/web/static/js/views/abstract/itemView.js | 36 | ||||
| -rw-r--r-- | module/web/static/js/views/modal/modalView.js | 2 | ||||
| -rw-r--r-- | module/web/static/js/views/packageTreeView.js | 39 | ||||
| -rw-r--r-- | module/web/static/js/views/packageView.js | 29 |
5 files changed, 133 insertions, 28 deletions
diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js index 9b1448f61..18360c526 100644 --- a/module/web/static/js/utils/animations.js +++ b/module/web/static/js/utils/animations.js @@ -10,9 +10,58 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) { }; }); + // 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.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; - // Over riding transit plugin to support hide and show + // Overriding transit plugin to support hide and show // Props retains it properties across multiple calls, therefore props.show value is introduced jQuery.fn.transit = jQuery.fn.transition = function(props, duration, easing, callback) { var self = this; @@ -23,7 +72,9 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) { callback = function() { self.css({display: 'none'}); - if (typeof cb === 'function') { cb.apply(self); } + if (typeof cb === 'function') { + cb.apply(self); + } }; } else if (props && (props.opacity === 'show' || (props.opacity === 1 && props.show === true))) { props.opacity = 1; diff --git a/module/web/static/js/views/abstract/itemView.js b/module/web/static/js/views/abstract/itemView.js new file mode 100644 index 000000000..993764d3e --- /dev/null +++ b/module/web/static/js/views/abstract/itemView.js @@ -0,0 +1,36 @@ +define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) { + + // A view that is meant for temporary displaying + // All events must be unbound in onDestroy + return Backbone.View.extend({ + + tagName: 'li', + destroy: function() { + this.undelegateEvents(); + this.unbind(); + if (this.onDestroy){ + this.onDestroy(); + } + this.$el.removeData().unbind(); + this.remove(); + }, + + + hide: function() { + this.$el.zapOut(); + }, + + show: function() { + this.$el.zapIn(); + }, + + load: function() { + this.model.fetch(); + }, + + delete: function() { + this.model.destroy(); + } + + }); +});
\ No newline at end of file diff --git a/module/web/static/js/views/modal/modalView.js b/module/web/static/js/views/modal/modalView.js index 297808ead..05cb39c33 100644 --- a/module/web/static/js/views/modal/modalView.js +++ b/module/web/static/js/views/modal/modalView.js @@ -44,7 +44,7 @@ define(['jquery', 'backbone', 'underscore', 'text!tpl/default/modal.html', 'omni }, show: function(subjects, internalCallback) { - subjects.modal.transition({opacity: 'show', scale: 1}, 400, function() { + subjects.modal.transition({opacity: 'show', scale: 1, delay: 100}, 300, function() { internalCallback(subjects); }); }} diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js index 3cef27601..3329c9582 100644 --- a/module/web/static/js/views/packageTreeView.js +++ b/module/web/static/js/views/packageTreeView.js @@ -4,11 +4,12 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack // Renders whole PackageView return Backbone.View.extend({ - el: '#dashboard', + el: '#content', events: { 'click #add': 'addPackage', - 'keypress #name': 'addOnEnter' + 'keypress #name': 'addOnEnter', + 'click #show_active': 'filter' }, initialize: function() { @@ -25,27 +26,29 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack render: function() { var packs = this.tree.get('packages'), - files = this.tree.get('files'); + files = this.tree.get('files'), + el = this.$('#dashboard'); - this.$el.empty() - this.$el.append($('<span>Root: ' + this.tree.get('root').get('name') + ' </span>')); - this.$el.append($('<input id="name" type="text" size="20">')); - this.$el.append($('<a id="add" href="#"> Add</a><br>')); + el.empty(); + el.append($('<span>Root: ' + this.tree.get('root').get('name') + ' </span>')); + el.append($('<input id="name" type="text" size="20">')); + el.append($('<a id="add" href="#"> Add</a><br>')); var ul = $('<ul></ul>'); packs.each(function(pack) { ul.append(new packageView({model: pack}).render().el); }); - this.$el.append(ul); - this.$el.append($('<br> Files: ' + files.size() + '<br>')); + el.append(ul); + el.append($('<br> Files: ' + files.size() + '<br>')); ul = $('<ul></ul>'); files.each(function(file) { ul.append(new fileView({model: file}).render().el); }); - this.$el.append(ul); + el.append(ul); + $('#name').focus(); return this; }, @@ -55,7 +58,7 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack this.addPackage(e); }, - addPackage: function() { + addPackage: function(e) { var self = this; var settings = { type: 'POST', @@ -72,6 +75,20 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack $.ajax('api/addPackage', settings); $('#name').val(''); + }, + + 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 171325d1f..1fbcd0613 100644 --- a/module/web/static/js/views/packageView.js +++ b/module/web/static/js/views/packageView.js @@ -1,24 +1,30 @@ -define(['jquery', 'backbone', 'underscore', 'views/fileView', 'utils/lazyRequire'], - function($, Backbone, _, fileView, lazyLoader) { +define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView', 'utils/lazyRequire'], + function($, itemView, _, fileView, lazyLoader) { // Renders a single package item - return Backbone.View.extend({ + return itemView.extend({ tagName: 'li', events: { 'click .load': 'load', 'click .delete': 'delete', - 'click .show-dialog': 'show' + 'click .show-dialog': 'show_dialog' }, modal: null, requireOnce: lazyLoader.once(), 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.modal.off('filter:added', this.hide); // TODO + }, + render: function() { this.$el.html('Package ' + this.model.get('pid') + ': ' + this.model.get('name')); this.$el.append($('<a class="load" href="#"> Load</a>')); @@ -36,18 +42,13 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView', 'utils/lazyRequire }, unrender: function() { - this.$el.remove(); - }, - - load: function() { - this.model.fetch(); - }, - - delete: function() { - this.model.destroy(); + var self = this; + this.$el.zapOut(function() { + self.destroy(); + }); }, - show: function() { + show_dialog: function() { var self = this; this.requireOnce(['views/modal/modalView'], function(modalView){ if (self.modal === null) |