From ac58037d5dbc9d2ad8dc05cf609f90176aebb2b0 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sun, 19 Aug 2012 11:36:29 +0200 Subject: boilerplate for js code --- module/web/static/js/views/headerView.js | 76 +++++++++ module/web/static/js/views/mobile/my.js | 275 +++++++++++++++++++++++++++++++ 2 files changed, 351 insertions(+) create mode 100644 module/web/static/js/views/headerView.js create mode 100644 module/web/static/js/views/mobile/my.js (limited to 'module/web/static/js/views') diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js new file mode 100644 index 000000000..26f2ea706 --- /dev/null +++ b/module/web/static/js/views/headerView.js @@ -0,0 +1,76 @@ +define(['jquery', 'backbone', 'flot'], function($, Backbone){ + // Renders the header with all information + return Backbone.View.extend({ + + el: 'header', + + events: { + + }, + + initialize: function() { + this.$el.find("#globalprogress").progressbar({ value:37 }); + + var totalPoints = 100; + var data = []; + + function getRandomData() { + if (data.length > 0) + data = data.slice(1); + + // do a random walk + while (data.length < totalPoints) { + var prev = data.length > 0 ? data[data.length - 1] : 50; + var y = prev + Math.random() * 10 - 5; + if (y < 0) + y = 0; + if (y > 100) + y = 100; + data.push(y); + } + + // zip the generated y values with the x values + var res = []; + for (var i = 0; i < data.length; ++i) + res.push([i, data[i]]) + return res; + } + + var updateInterval = 1500; + + var speedgraph = $.plot(this.$el.find("#speedgraph"), [getRandomData()], { + series:{ + lines:{ show:true, lineWidth:2 }, + shadowSize:0, + color:"#fee247" + }, + 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 + } + }); + + function update() { + speedgraph.setData([ getRandomData() ]); + // since the axes don't change, we don't need to call plot.setupGrid() + speedgraph.draw(); + + setTimeout(update, updateInterval); + } + + update(); + + }, + + + render: function() { + } + }); +}); \ No newline at end of file diff --git a/module/web/static/js/views/mobile/my.js b/module/web/static/js/views/mobile/my.js new file mode 100644 index 000000000..41203e6c5 --- /dev/null +++ b/module/web/static/js/views/mobile/my.js @@ -0,0 +1,275 @@ +(function($) { + $.widget('mobile.tabbar', $.mobile.navbar, { + _create: function() { + // Set the theme before we call the prototype, which will + // ensure buttonMarkup() correctly grabs the inheritied theme. + // We default to the "a" swatch if none is found + var theme = this.element.jqmData('theme') || "a"; + this.element.addClass('ui-footer ui-footer-fixed ui-bar-' + theme); + + // Make sure the page has padding added to it to account for the fixed bar + this.element.closest('[data-role="page"]').addClass('ui-page-footer-fixed'); + + + // Call the NavBar _create prototype + $.mobile.navbar.prototype._create.call(this); + }, + + // Set the active URL for the Tab Bar, and highlight that button on the bar + setActive: function(url) { + // Sometimes the active state isn't properly cleared, so we reset it ourselves + this.element.find('a').removeClass('ui-btn-active ui-state-persist'); + this.element.find('a[href="' + url + '"]').addClass('ui-btn-active ui-state-persist'); + } + }); + + $(document).bind('pagecreate create', function(e) { + return $(e.target).find(":jqmData(role='tabbar')").tabbar(); + }); + + $(":jqmData(role='page')").live('pageshow', function(e) { + // Grab the id of the page that's showing, and select it on the Tab Bar on the page + var tabBar, id = $(e.target).attr('id'); + + tabBar = $.mobile.activePage.find(':jqmData(role="tabbar")'); + if(tabBar.length) { + tabBar.tabbar('setActive', '#' + id); + } + }); + +var attachEvents = function() { + var hoverDelay = $.mobile.buttonMarkup.hoverDelay, hov, foc; + + $( document ).bind( { + "vmousedown vmousecancel vmouseup vmouseover vmouseout focus blur scrollstart": function( event ) { + var theme, + $btn = $( closestEnabledButton( event.target ) ), + evt = event.type; + + if ( $btn.length ) { + theme = $btn.attr( "data-" + $.mobile.ns + "theme" ); + + if ( evt === "vmousedown" ) { + if ( $.support.touch ) { + hov = setTimeout(function() { + $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme ); + }, hoverDelay ); + } else { + $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme ); + } + } else if ( evt === "vmousecancel" || evt === "vmouseup" ) { + $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme ); + } else if ( evt === "vmouseover" || evt === "focus" ) { + if ( $.support.touch ) { + foc = setTimeout(function() { + $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme ); + }, hoverDelay ); + } else { + $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme ); + } + } else if ( evt === "vmouseout" || evt === "blur" || evt === "scrollstart" ) { + $btn.removeClass( "ui-btn-hover-" + theme + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme ); + if ( hov ) { + clearTimeout( hov ); + } + if ( foc ) { + clearTimeout( foc ); + } + } + } + }, + "focusin focus": function( event ){ + $( closestEnabledButton( event.target ) ).addClass( $.mobile.focusClass ); + }, + "focusout blur": function( event ){ + $( closestEnabledButton( event.target ) ).removeClass( $.mobile.focusClass ); + } + }); + + attachEvents = null; +}; + +$.fn.buttonMarkup = function( options ) { + var $workingSet = this; + + // Enforce options to be of type string + options = ( options && ( $.type( options ) == "object" ) )? options : {}; + for ( var i = 0; i < $workingSet.length; i++ ) { + var el = $workingSet.eq( i ), + e = el[ 0 ], + o = $.extend( {}, $.fn.buttonMarkup.defaults, { + icon: options.icon !== undefined ? options.icon : el.jqmData( "icon" ), + iconpos: options.iconpos !== undefined ? options.iconpos : el.jqmData( "iconpos" ), + theme: options.theme !== undefined ? options.theme : el.jqmData( "theme" ) || $.mobile.getInheritedTheme( el, "c" ), + inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ), + shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ), + corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ), + iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" ), + iconsize: options.iconsize !== undefined ? options.iconsize : el.jqmData( "iconsize" ), + mini: options.mini !== undefined ? options.mini : el.jqmData( "mini" ) + }, options ), + + // Classes Defined + innerClass = "ui-btn-inner", + textClass = "ui-btn-text", + buttonClass, iconClass, + // Button inner markup + buttonInner, + buttonText, + buttonIcon, + buttonElements; + + $.each(o, function(key, value) { + e.setAttribute( "data-" + $.mobile.ns + key, value ); + el.jqmData(key, value); + }); + + // Check if this element is already enhanced + buttonElements = $.data(((e.tagName === "INPUT" || e.tagName === "BUTTON") ? e.parentNode : e), "buttonElements"); + + if (buttonElements) { + e = buttonElements.outer; + el = $(e); + buttonInner = buttonElements.inner; + buttonText = buttonElements.text; + // We will recreate this icon below + $(buttonElements.icon).remove(); + buttonElements.icon = null; + } + else { + buttonInner = document.createElement( o.wrapperEls ); + buttonText = document.createElement( o.wrapperEls ); + } + buttonIcon = o.icon ? document.createElement( "span" ) : null; + + if ( attachEvents && !buttonElements) { + attachEvents(); + } + + // if not, try to find closest theme container + if ( !o.theme ) { + o.theme = $.mobile.getInheritedTheme( el, "c" ); + } + + buttonClass = "ui-btn ui-btn-up-" + o.theme; + buttonClass += o.inline ? " ui-btn-inline" : ""; + buttonClass += o.shadow ? " ui-shadow" : ""; + buttonClass += o.corners ? " ui-btn-corner-all" : ""; + + if ( o.mini !== undefined ) { + // Used to control styling in headers/footers, where buttons default to `mini` style. + buttonClass += o.mini ? " ui-mini" : " ui-fullsize"; + } + + if ( o.inline !== undefined ) { + // Used to control styling in headers/footers, where buttons default to `mini` style. + buttonClass += o.inline === false ? " ui-btn-block" : " ui-btn-inline"; + } + + + if ( o.icon ) { + o.icon = "ui-icon-" + o.icon; + o.iconpos = o.iconpos || "left"; + + iconClass = "ui-icon " + o.icon; + + if ( o.iconshadow ) { + iconClass += " ui-icon-shadow"; + } + + if ( o.iconsize ) { + iconClass += " ui-iconsize-" + o.iconsize; + } + } + + if ( o.iconpos ) { + buttonClass += " ui-btn-icon-" + o.iconpos; + + if ( o.iconpos == "notext" && !el.attr( "title" ) ) { + el.attr( "title", el.getEncodedText() ); + } + } + + innerClass += o.corners ? " ui-btn-corner-all" : ""; + + if ( o.iconpos && o.iconpos === "notext" && !el.attr( "title" ) ) { + el.attr( "title", el.getEncodedText() ); + } + + if ( buttonElements ) { + el.removeClass( buttonElements.bcls || "" ); + } + el.removeClass( "ui-link" ).addClass( buttonClass ); + + buttonInner.className = innerClass; + + buttonText.className = textClass; + if ( !buttonElements ) { + buttonInner.appendChild( buttonText ); + } + if ( buttonIcon ) { + buttonIcon.className = iconClass; + if ( !(buttonElements && buttonElements.icon) ) { + buttonIcon.appendChild( document.createTextNode("\u00a0") ); + buttonInner.appendChild( buttonIcon ); + } + } + + while ( e.firstChild && !buttonElements) { + buttonText.appendChild( e.firstChild ); + } + + if ( !buttonElements ) { + e.appendChild( buttonInner ); + } + + // Assign a structure containing the elements of this button to the elements of this button. This + // will allow us to recognize this as an already-enhanced button in future calls to buttonMarkup(). + buttonElements = { + bcls : buttonClass, + outer : e, + inner : buttonInner, + text : buttonText, + icon : buttonIcon + }; + + $.data(e, 'buttonElements', buttonElements); + $.data(buttonInner, 'buttonElements', buttonElements); + $.data(buttonText, 'buttonElements', buttonElements); + if (buttonIcon) { + $.data(buttonIcon, 'buttonElements', buttonElements); + } + } + + return this; +}; + +$.fn.buttonMarkup.defaults = { + corners: true, + shadow: true, + iconshadow: true, + iconsize: 18, + wrapperEls: "span" +}; + +function closestEnabledButton( element ) { + var cname; + + while ( element ) { + // Note that we check for typeof className below because the element we + // handed could be in an SVG DOM where className on SVG elements is defined to + // be of a different type (SVGAnimatedString). We only operate on HTML DOM + // elements, so we look for plain "string". + cname = ( typeof element.className === 'string' ) && (element.className + ' '); + if ( cname && cname.indexOf("ui-btn ") > -1 && cname.indexOf("ui-disabled ") < 0 ) { + break; + } + + element = element.parentNode; + } + + return element; +} + + +})(jQuery); -- cgit v1.2.3 From ca3c01063b2c1f3e8f5ed0ff6b63a1226ab084f0 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Tue, 21 Aug 2012 19:56:48 +0200 Subject: added jqueryui amd version --- module/web/static/js/views/headerView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'module/web/static/js/views') diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js index 26f2ea706..0c6447c3e 100644 --- a/module/web/static/js/views/headerView.js +++ b/module/web/static/js/views/headerView.js @@ -1,4 +1,4 @@ -define(['jquery', 'backbone', 'flot'], function($, Backbone){ +define(['jquery', 'backbone', 'flot', 'jqueryui/progressbar'], function($, Backbone){ // Renders the header with all information return Backbone.View.extend({ -- cgit v1.2.3 From cbd4f4b5375f89362733e10a9b98e5a74c2a5734 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Fri, 31 Aug 2012 23:25:26 +0200 Subject: first js models/views --- module/web/static/js/views/packageTreeView.js | 54 +++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 module/web/static/js/views/packageTreeView.js (limited to 'module/web/static/js/views') diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js new file mode 100644 index 000000000..79527b394 --- /dev/null +++ b/module/web/static/js/views/packageTreeView.js @@ -0,0 +1,54 @@ +define(['jquery', 'backbone', 'underscore', 'models/TreeCollection'], function($, Backbone, _, TreeCollection){ + + // Renders whole PackageView + return Backbone.View.extend({ + + el: '#content', + + events: { + + }, + + initialize: function() { + _.bindAll(this, 'render'); + + this.tree = new TreeCollection(); + + }, + + init: function() { + var self = this; + this.tree.fetch({success: function(){ + self.render(); + }}); + }, + + + render: function() { + + var packs = this.tree.get('packages'), + files = this.tree.get('files'), + html = 'Root: ' + this.tree.get('root').get('name') + '
'; + + html += 'Packages: ' + packs.size(); + html += '
    '; + + packs.each(function(pack){ + html += '
  • '+ pack.get('pid') + pack.get('name') + '
    • '; + }); + + html += '

Files: ' + files.size() + '
    '; + files.each(function(file){ + html += '
  • '+ file.get('fid') + file.get('name') + '
    • '; + }); + + html += '
'; + + + this.$el.html(html); + + return this; + } + + }); +}); \ No newline at end of file -- cgit v1.2.3 From a03ece96ae83e8fedb27fdb297c52a8e6b111d55 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sat, 1 Sep 2012 21:00:38 +0200 Subject: some functionality for the views --- module/web/static/js/views/fileView.js | 20 ++++ module/web/static/js/views/packageTreeView.js | 134 +++++++++++++++----------- module/web/static/js/views/packageView.js | 45 +++++++++ 3 files changed, 145 insertions(+), 54 deletions(-) create mode 100644 module/web/static/js/views/fileView.js create mode 100644 module/web/static/js/views/packageView.js (limited to 'module/web/static/js/views') diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js new file mode 100644 index 000000000..7db8112c8 --- /dev/null +++ b/module/web/static/js/views/fileView.js @@ -0,0 +1,20 @@ +define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) { + + // Renders single file item + return Backbone.View.extend({ + + tagName: 'li', + events: { + + }, + + initialize: function() { + }, + + render: function() { + this.$el.html(this.model.get('name')); + return this; + } + + }); +}); \ 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 79527b394..91768ec04 100644 --- a/module/web/static/js/views/packageTreeView.js +++ b/module/web/static/js/views/packageTreeView.js @@ -1,54 +1,80 @@ -define(['jquery', 'backbone', 'underscore', 'models/TreeCollection'], function($, Backbone, _, TreeCollection){ - - // Renders whole PackageView - return Backbone.View.extend({ - - el: '#content', - - events: { - - }, - - initialize: function() { - _.bindAll(this, 'render'); - - this.tree = new TreeCollection(); - - }, - - init: function() { - var self = this; - this.tree.fetch({success: function(){ - self.render(); - }}); - }, - - - render: function() { - - var packs = this.tree.get('packages'), - files = this.tree.get('files'), - html = 'Root: ' + this.tree.get('root').get('name') + '
'; - - html += 'Packages: ' + packs.size(); - html += '
    '; - - packs.each(function(pack){ - html += '
  • '+ pack.get('pid') + pack.get('name') + '
    • '; - }); - - html += '

Files: ' + files.size() + '
    '; - files.each(function(file){ - html += '
  • '+ file.get('fid') + file.get('name') + '
    • '; - }); - - html += '
'; - - - this.$el.html(html); - - return this; - } - - }); -}); \ No newline at end of file +define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/packageView', 'views/fileView'], + function($, Backbone, _, TreeCollection, packageView, fileView) { + + // Renders whole PackageView + return Backbone.View.extend({ + + el: '#content', + + events: { + 'click #add': 'addPackage', + 'keypress #name': 'addOnEnter' + }, + + initialize: function() { + _.bindAll(this, 'render'); + + this.tree = new TreeCollection(); + + }, + + init: function() { + var self = this; + this.tree.fetch({success: function() { + self.render(); + }}); + }, + + render: function() { + + this.$el.html("
"); + + var packs = this.tree.get('packages'), + files = this.tree.get('files'); + + this.$el.append($('Root: ' + this.tree.get('root').get('name') + ' ')); + this.$el.append($('')); + this.$el.append($(' Add
')); + + var ul = $('
    '); + packs.each(function(pack) { + ul.append(new packageView({model: pack}).render().el); + }); + + this.$el.append(ul); + this.$el.append($('
    Files: ' + files.size() + '
    ')); + + ul = $('
      '); + files.each(function(file) { + ul.append(new fileView({model: file}).render().el); + }); + + this.$el.append(ul); + + return this; + }, + + addOnEnter: function(e) { + if (e.keyCode != 13) return; + this.addPackage(e); + }, + + addPackage: function() { + var self = this; + var settings = { + data: { + name: '"' + $('#name').val() + '"', + links: '["some link"]' + }, + success: function() { + self.tree.fetch({success: function() { + self.render(); + }}); + } + }; + + $.ajax('api/addPackage', settings); + $('#name').val(''); + } + }); + }); \ No newline at end of file diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js new file mode 100644 index 000000000..a2e0abf31 --- /dev/null +++ b/module/web/static/js/views/packageView.js @@ -0,0 +1,45 @@ +define(['jquery', 'backbone', 'underscore', 'views/fileView'], function($, Backbone, _, fileView) { + + // Renders a single package item + return Backbone.View.extend({ + + tagName: 'li', + events: { + 'click .load': 'load', + 'click .delete': 'delete' + }, + + initialize: function() { + this.model.on('change', this.render, this); + this.model.on('remove', this.unrender, this); + }, + + render: function() { + this.$el.html('Package ' + this.model.get('pid') + ': ' + this.model.get('name')); + this.$el.append($(' Load')); + this.$el.append($(' Delete')); + + if (this.model.isLoaded()) { + var ul = $('
        '); + this.model.get('files').each(function(file) { + ul.append(new fileView({model: file}).render().el); + }); + this.$el.append(ul); + } + return this; + }, + + unrender: function() { + this.$el.remove(); + }, + + load: function() { + this.model.fetch(); + }, + + delete: function() { + this.model.destroy(); + } + + }); +}); \ No newline at end of file -- cgit v1.2.3 From 288b6190121618090107b3c0bb4f9e3539608d3b Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sun, 2 Sep 2012 19:22:48 +0200 Subject: modal dialog --- module/web/static/js/views/modal/modalView.js | 76 +++++++++++++++++++++++++++ module/web/static/js/views/packageTreeView.js | 3 -- module/web/static/js/views/packageView.js | 16 +++++- 3 files changed, 90 insertions(+), 5 deletions(-) create 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/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 $('

        Dialog

        '); + }, + + 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("
        "); 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($(' Load')); this.$el.append($(' Delete')); + this.$el.append($(' Show')); if (this.model.isLoaded()) { var 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(); } }); -- cgit v1.2.3 From 6a8303b004e1976739371431aa7358c672ad7313 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sun, 16 Sep 2012 21:45:10 +0200 Subject: added bootstrap --- module/web/static/js/views/headerView.js | 1 - module/web/static/js/views/modal/modalView.js | 24 ++++++++++++++++-------- module/web/static/js/views/packageView.js | 23 +++++++++++++---------- 3 files changed, 29 insertions(+), 19 deletions(-) (limited to 'module/web/static/js/views') diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js index 0c6447c3e..21b591a3d 100644 --- a/module/web/static/js/views/headerView.js +++ b/module/web/static/js/views/headerView.js @@ -9,7 +9,6 @@ define(['jquery', 'backbone', 'flot', 'jqueryui/progressbar'], function($, Backb }, initialize: function() { - this.$el.find("#globalprogress").progressbar({ value:37 }); var totalPoints = 100; var data = []; diff --git a/module/web/static/js/views/modal/modalView.js b/module/web/static/js/views/modal/modalView.js index efc0cc3cb..b20aab57d 100644 --- a/module/web/static/js/views/modal/modalView.js +++ b/module/web/static/js/views/modal/modalView.js @@ -1,11 +1,14 @@ -define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, _) { +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() { @@ -13,16 +16,15 @@ define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, }, render: function() { - this.$el.addClass('modal'); - this.$el.addClass('modal-closed'); - this.$el.append(this.renderContent()); + 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: 'modal-closed', + hideClass: 'hide', animations: { hide: function(subjects, internalCallback) { subjects.overlay.fadeOut(400, function() { @@ -35,7 +37,7 @@ define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, }); }}}, modal: { - hideClass: 'modal-closed', + hideClass: 'hide', animations: { hide: function(subjects, internalCallback) { subjects.modal.transition({opacity: 'hide', scale: 0.7}, 250, function() { @@ -53,7 +55,11 @@ define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, return this; }, renderContent: function() { - return $('

          Dialog

          '); + return $('

          Content!

          '); + }, + + getHeader: function() { + return 'Dialog'; }, show: function() { @@ -61,6 +67,8 @@ define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone, this.render(); this.dialog.trigger('show'); + + // TODO: set focus on first element }, hide: function() { diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js index b820b9ba8..171325d1f 100644 --- a/module/web/static/js/views/packageView.js +++ b/module/web/static/js/views/packageView.js @@ -1,5 +1,5 @@ -define(['jquery', 'backbone', 'underscore', 'views/fileView', 'views/modal/modalView'], - function($, Backbone, _, fileView, modalView) { +define(['jquery', 'backbone', 'underscore', 'views/fileView', 'utils/lazyRequire'], + function($, Backbone, _, fileView, lazyLoader) { // Renders a single package item return Backbone.View.extend({ @@ -8,10 +8,11 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView', 'views/modal/modal events: { 'click .load': 'load', 'click .delete': 'delete', - 'click .show': 'show' + 'click .show-dialog': 'show' }, modal: null, + requireOnce: lazyLoader.once(), initialize: function() { this.model.on('change', this.render, this); @@ -22,7 +23,7 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView', 'views/modal/modal this.$el.html('Package ' + this.model.get('pid') + ': ' + this.model.get('name')); this.$el.append($(' Load')); this.$el.append($(' Delete')); - this.$el.append($(' Show')); + this.$el.append($(' Show')); if (this.model.isLoaded()) { var ul = $('
            '); @@ -47,11 +48,13 @@ define(['jquery', 'backbone', 'underscore', 'views/fileView', 'views/modal/modal }, show: function() { - if (this.modal === null) - this.modal = new modalView(); - - this.modal.show(); - } - + 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 From 68f1510f5a6ab632db19fc63f29c0475de9feb9d Mon Sep 17 00:00:00 2001 From: RaNaN Date: Mon, 17 Sep 2012 15:46:42 +0200 Subject: nav + search bar for dashboard --- module/web/static/js/views/packageTreeView.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'module/web/static/js/views') diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js index e26924db2..30f159cf7 100644 --- a/module/web/static/js/views/packageTreeView.js +++ b/module/web/static/js/views/packageTreeView.js @@ -24,8 +24,6 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack }, render: function() { - this.$el.html("
            "); - var packs = this.tree.get('packages'), files = this.tree.get('files'); -- cgit v1.2.3