diff options
Diffstat (limited to 'module/web/static/js')
| -rw-r--r-- | module/web/static/js/default.js | 4 | ||||
| -rw-r--r-- | module/web/static/js/utils/animations.js | 36 | ||||
| -rw-r--r-- | module/web/static/js/views/modal/modalView.js | 76 | ||||
| -rw-r--r-- | module/web/static/js/views/packageTreeView.js | 3 | ||||
| -rw-r--r-- | module/web/static/js/views/packageView.js | 16 |
5 files changed, 129 insertions, 6 deletions
diff --git a/module/web/static/js/default.js b/module/web/static/js/default.js index bed397712..d4330da81 100644 --- a/module/web/static/js/default.js +++ b/module/web/static/js/default.js @@ -8,6 +8,7 @@ require.config({ jquery:"libs/jquery-1.8.0", jqueryui:"libs/jqueryui", flot:"libs/jquery.flot.min", + transit:"libs/jquery.transit-0.1.3", omniwindow: "libs/jquery.omniwindow", underscore:"libs/lodash-0.5.2", @@ -26,12 +27,13 @@ require.config({ exports:"Backbone" //attaches "Backbone" to the window object }, "flot" : ["jquery"], + "transit" : ["jquery"], "omniwindow" : ["jquery"] } // end Shim Configuration }); -define('default', ['jquery', 'backbone', 'routers/defaultRouter', 'views/headerView', 'views/packageTreeView'], +define('default', ['jquery', 'backbone', 'routers/defaultRouter', 'views/headerView', 'views/packageTreeView', 'utils/animations'], function ($, Backbone, DefaultRouter, HeaderView, TreeView) { diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js new file mode 100644 index 000000000..9b1448f61 --- /dev/null +++ b/module/web/static/js/utils/animations.js @@ -0,0 +1,36 @@ +define(['jquery', 'underscore', 'transit'], function(jQuery, _) { + + // Overwrite common animations with transitions + jQuery.each({ + fadeIn: { opacity: "show" }, + fadeOut: { opacity: "hide" } + }, function(name, props) { + jQuery.fn[ name ] = function(speed, easing, callback) { + return this.transition(props, speed, easing, callback); + }; + }); + + jQuery.fn._transit = jQuery.fn.transit; + + // Over riding 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; + var cb = callback; + if (props && (props.opacity === 'hide' || (props.opacity === 0 && props.show === true))) { + props.opacity = 0; + props.show = true; + + callback = function() { + self.css({display: 'none'}); + if (typeof cb === 'function') { cb.apply(self); } + }; + } else if (props && (props.opacity === 'show' || (props.opacity === 1 && props.show === true))) { + props.opacity = 1; + props.show = true; + this.css({display: 'block'}); + } + + return this._transit(props, duration, easing, callback); + }; +});
\ 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 new file mode 100644 index 000000000..efc0cc3cb --- /dev/null +++ b/module/web/static/js/views/modal/modalView.js @@ -0,0 +1,76 @@ +define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, _) { + + return Backbone.View.extend({ + + events: { + + }, + + dialog: null, + + initialize: function() { + + }, + + render: function() { + this.$el.addClass('modal'); + this.$el.addClass('modal-closed'); + this.$el.append(this.renderContent()); + this.$el.css({opacity: 0, scale: 0.7}); + $("body").append(this.el); + + this.dialog = this.$el.omniWindow({ + overlay: { + selector: '#modal-overlay', + hideClass: 'modal-closed', + animations: { + hide: function(subjects, internalCallback) { + subjects.overlay.fadeOut(400, function() { + internalCallback(subjects); + }); + }, + show: function(subjects, internalCallback) { + subjects.overlay.fadeIn(250, function() { + internalCallback(subjects); + }); + }}}, + modal: { + hideClass: 'modal-closed', + animations: { + hide: function(subjects, internalCallback) { + subjects.modal.transition({opacity: 'hide', scale: 0.7}, 250, function() { + internalCallback(subjects); + }); + }, + + show: function(subjects, internalCallback) { + subjects.modal.transition({opacity: 'show', scale: 1}, 250, function() { + internalCallback(subjects); + }); + }} + }}); + + return this; + }, + renderContent: function() { + return $('<h1>Dialog</h1>'); + }, + + show: function() { + if (this.dialog === null) + this.render(); + + this.dialog.trigger('show'); + }, + + hide: function() { + this.dialog.trigger('hide'); + }, + + destroy: function() { + this.$el.remove(); + this.dialog = null; + } + + }); +});
\ No newline at end of file diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js index 91768ec04..e26924db2 100644 --- a/module/web/static/js/views/packageTreeView.js +++ b/module/web/static/js/views/packageTreeView.js @@ -12,8 +12,6 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack }, initialize: function() { - _.bindAll(this, 'render'); - this.tree = new TreeCollection(); }, @@ -26,7 +24,6 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack }, render: function() { - this.$el.html("<br>"); var packs = this.tree.get('packages'), diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js index a2e0abf31..b820b9ba8 100644 --- a/module/web/static/js/views/packageView.js +++ b/module/web/static/js/views/packageView.js @@ -1,4 +1,5 @@ -define(['jquery', 'backbone', 'underscore', 'views/fileView'], function($, Backbone, _, fileView) { +define(['jquery', 'backbone', 'underscore', 'views/fileView', 'views/modal/modalView'], + function($, Backbone, _, fileView, modalView) { // Renders a single package item return Backbone.View.extend({ @@ -6,9 +7,12 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView'], function($, Backb tagName: 'li', events: { 'click .load': 'load', - 'click .delete': 'delete' + 'click .delete': 'delete', + 'click .show': 'show' }, + modal: null, + initialize: function() { this.model.on('change', this.render, this); this.model.on('remove', this.unrender, this); @@ -18,6 +22,7 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView'], function($, Backb this.$el.html('Package ' + this.model.get('pid') + ': ' + this.model.get('name')); this.$el.append($('<a class="load" href="#"> Load</a>')); this.$el.append($('<a class="delete" href="#"> Delete</a>')); + this.$el.append($('<a class="show" href="#"> Show</a>')); if (this.model.isLoaded()) { var ul = $('<ul></ul>'); @@ -39,6 +44,13 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView'], function($, Backb delete: function() { this.model.destroy(); + }, + + show: function() { + if (this.modal === null) + this.modal = new modalView(); + + this.modal.show(); } }); |