From 6e0413b2e036b8fff997bcd1d6017681cdd91cfd Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sat, 22 Dec 2012 20:32:58 +0100 Subject: improved modal dialogs, added one for link grabber --- module/web/static/js/views/abstract/modalView.js | 83 ++++++++++++++++++++++++ module/web/static/js/views/fileView.js | 4 +- module/web/static/js/views/headerView.js | 44 ++++++++----- module/web/static/js/views/linkGrabberModal.js | 21 ++++++ module/web/static/js/views/modal/modalView.js | 82 ----------------------- module/web/static/js/views/packageView.js | 27 ++------ 6 files changed, 139 insertions(+), 122 deletions(-) create mode 100644 module/web/static/js/views/abstract/modalView.js create mode 100644 module/web/static/js/views/linkGrabberModal.js delete mode 100644 module/web/static/js/views/modal/modalView.js (limited to 'module/web/static/js/views') diff --git a/module/web/static/js/views/abstract/modalView.js b/module/web/static/js/views/abstract/modalView.js new file mode 100644 index 000000000..56c060a42 --- /dev/null +++ b/module/web/static/js/views/abstract/modalView.js @@ -0,0 +1,83 @@ +define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, _) { + + return Backbone.View.extend({ + + events: { + 'click .btn-close': 'hide', + 'click .close': 'hide' + }, + + template: null, + dialog: null, + + initialize: function() { + var self = this; + if (this.template === null) { + require(['text!tpl/default/modal.html'], function(template) { + self.template = template; + }); + } + + }, + + render: function() { + this.$el.html(this.template({ content: this.renderContent().html()})); + this.$el.addClass('modal hide'); + this.$el.css({opacity: 0, scale: 0.7}); + $("body").append(this.el); + + this.dialog = this.$el.omniWindow({ + overlay: { + selector: '#modal-overlay', + hideClass: 'hide', + animations: { + hide: function(subjects, internalCallback) { + subjects.overlay.transition({opacity: 'hide', delay: 100}, 300, function() { + internalCallback(subjects); + }); + }, + show: function(subjects, internalCallback) { + subjects.overlay.fadeIn(300); + internalCallback(subjects); + }}}, + modal: { + hideClass: 'hide', + animations: { + hide: function(subjects, internalCallback) { + subjects.modal.transition({opacity: 'hide', scale: 0.7}, 300); + internalCallback(subjects); + }, + + show: function(subjects, internalCallback) { + subjects.modal.transition({opacity: 'show', scale: 1, delay: 100}, 300, function() { + internalCallback(subjects); + }); + }} + }}); + + return this; + }, + renderContent: function() { + return $('

Content!

'); + }, + + show: function() { + if (this.dialog === null) + this.render(); + + this.dialog.trigger('show'); + + // TODO: set focus on first element + }, + + 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/fileView.js b/module/web/static/js/views/fileView.js index 85b40a413..b37d4aefa 100644 --- a/module/web/static/js/views/fileView.js +++ b/module/web/static/js/views/fileView.js @@ -1,4 +1,4 @@ -define(['jquery', 'backbone', 'underscore', 'handlebars'], function($, Backbone, _, HB) { +define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) { // Renders single file item return Backbone.View.extend({ @@ -6,7 +6,7 @@ define(['jquery', 'backbone', 'underscore', 'handlebars'], function($, Backbone, tagName: 'li', className: 'file-view', // template: _.template($("#template-file").html()), - template: HB.compile($("#template-file").html()), + template: _.compile($("#template-file").html()), events: { }, diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js index 6a4ac270d..9f7dda044 100644 --- a/module/web/static/js/views/headerView.js +++ b/module/web/static/js/views/headerView.js @@ -1,13 +1,16 @@ -define(['jquery', 'backbone', 'flot'], function($, Backbone){ +define(['jquery', 'backbone', 'flot'], function($, Backbone) { // Renders the header with all information return Backbone.View.extend({ el: 'header', events: { - + 'click .btn-grabber': 'open_grabber' }, + // Will hold the link grabber + grabber: null, + initialize: function() { var totalPoints = 100; @@ -38,21 +41,21 @@ define(['jquery', 'backbone', 'flot'], function($, Backbone){ var updateInterval = 1500; var speedgraph = $.plot(this.$el.find("#speedgraph"), [getRandomData()], { - series:{ - lines:{ show:true, lineWidth:2 }, - shadowSize:0, - color:"#fee247" + series: { + lines: { show: true, lineWidth: 2 }, + shadowSize: 0, + color: "#fee247" }, - xaxis:{ ticks:[], mode:"time" }, - yaxis:{ ticks:[], min:0, autoscaleMargin:0.1 }, - grid:{ - show:true, + xaxis: { ticks: [], mode: "time" }, + yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 }, + grid: { + show: true, // borderColor: "#757575", - borderColor:"white", - borderWidth:1, - labelMargin:0, - axisMargin:0, - minBorderMargin:0 + borderColor: "white", + borderWidth: 1, + labelMargin: 0, + axisMargin: 0, + minBorderMargin: 0 } }); @@ -68,8 +71,17 @@ define(['jquery', 'backbone', 'flot'], function($, Backbone){ }, - render: function() { + }, + + open_grabber: function() { + var self = this; + _.requireOnce(['views/linkGrabberModal'], function(modalView) { + if (self.grabber === null) + self.grabber = new modalView(); + + self.grabber.show(); + }); } }); }); \ No newline at end of file diff --git a/module/web/static/js/views/linkGrabberModal.js b/module/web/static/js/views/linkGrabberModal.js new file mode 100644 index 000000000..b5c91baa6 --- /dev/null +++ b/module/web/static/js/views/linkGrabberModal.js @@ -0,0 +1,21 @@ +define(['jquery', 'underscore', 'views/abstract/modalView', 'text!tpl/default/linkgrabber.html'], + function($, _, modalView, template) { + + return modalView.extend({ + + events: { + }, + + template: _.compile(template), + + initialize: function() { + // Inherit parent events + this.events = _.extend({}, modalView.prototype.events,this.events); + }, + + renderContent: function() { + return $('

Content!

'); + } + + }); +}); \ 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 deleted file mode 100644 index 1de32668d..000000000 --- a/module/web/static/js/views/modal/modalView.js +++ /dev/null @@ -1,82 +0,0 @@ -define(['jquery', 'backbone', 'underscore', 'text!tpl/default/modal.html', 'omniwindow'], function($, Backbone, _, template) { - - return Backbone.View.extend({ - - events: { - 'click .btn-close': 'hide', - 'click .close': 'hide' - }, - - template: _.template(template), - - dialog: null, - - initialize: function() { - - }, - - render: function() { - this.$el.html(this.template({ content: this.renderContent().html(), header: this.getHeader()})); - this.$el.addClass('modal hide'); - this.$el.css({opacity: 0, scale: 0.7}); - $("body").append(this.el); - - this.dialog = this.$el.omniWindow({ - overlay: { - selector: '#modal-overlay', - hideClass: 'hide', - animations: { - hide: function(subjects, internalCallback) { - subjects.overlay.transition({opacity: 'hide', delay: 100}, 300, function() { - internalCallback(subjects); - }); - }, - show: function(subjects, internalCallback) { - subjects.overlay.fadeIn(300); - internalCallback(subjects); - }}}, - modal: { - hideClass: 'hide', - animations: { - hide: function(subjects, internalCallback) { - subjects.modal.transition({opacity: 'hide', scale: 0.7}, 300); - internalCallback(subjects); - }, - - show: function(subjects, internalCallback) { - subjects.modal.transition({opacity: 'show', scale: 1, delay: 100}, 300, function() { - internalCallback(subjects); - }); - }} - }}); - - return this; - }, - renderContent: function() { - return $('

Content!

'); - }, - - getHeader: function() { - return 'Dialog'; - }, - - show: function() { - if (this.dialog === null) - this.render(); - - this.dialog.trigger('show'); - - // TODO: set focus on first element - }, - - 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/packageView.js b/module/web/static/js/views/packageView.js index 7cccc9bf4..efbf6b76e 100644 --- a/module/web/static/js/views/packageView.js +++ b/module/web/static/js/views/packageView.js @@ -1,22 +1,17 @@ -define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView', 'utils/lazyRequire', 'handlebars'], - function($, itemView, _, fileView, lazyLoader, HB) { +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: _.template($("#template-package").html()), - template: HB.compile($("#template-package").html()), + template: _.compile($("#template-package").html()), events: { 'click .package-header': 'load', - 'click .delete': 'delete', - 'click .show-dialog': 'show_dialog' + 'click .delete': 'delete' }, - modal: null, - requireOnce: lazyLoader.once(), - initialize: function() { this.model.on('filter:added', this.hide, this); this.model.on('filter:removed', this.show, this); @@ -48,18 +43,6 @@ define(['jquery', 'views/abstract/itemView', 'underscore', 'views/fileView', 'ut this.$el.zapOut(function() { self.destroy(); }); - }, - - show_dialog: function(e) { - console.log(e); - e.stopPropagation(); - var self = this; - this.requireOnce(['views/modal/modalView'], function(modalView){ - if (self.modal === null) - self.modal = new modalView(); - - self.modal.show(); - }); - } + } }); }); \ No newline at end of file -- cgit v1.2.3