diff options
Diffstat (limited to 'module/web/static/js/views')
-rw-r--r-- | module/web/static/js/views/fileView.js | 20 | ||||
-rw-r--r-- | module/web/static/js/views/headerView.js | 75 | ||||
-rw-r--r-- | module/web/static/js/views/mobile/my.js | 275 | ||||
-rw-r--r-- | module/web/static/js/views/modal/modalView.js | 84 | ||||
-rw-r--r-- | module/web/static/js/views/packageTreeView.js | 75 | ||||
-rw-r--r-- | module/web/static/js/views/packageView.js | 60 |
6 files changed, 589 insertions, 0 deletions
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/headerView.js b/module/web/static/js/views/headerView.js new file mode 100644 index 000000000..21b591a3d --- /dev/null +++ b/module/web/static/js/views/headerView.js @@ -0,0 +1,75 @@ +define(['jquery', 'backbone', 'flot', 'jqueryui/progressbar'], function($, Backbone){ + // Renders the header with all information + return Backbone.View.extend({ + + el: 'header', + + events: { + + }, + + initialize: function() { + + 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); 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..b20aab57d --- /dev/null +++ b/module/web/static/js/views/modal/modalView.js @@ -0,0 +1,84 @@ +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.fadeOut(400, function() { + internalCallback(subjects); + }); + }, + show: function(subjects, internalCallback) { + subjects.overlay.fadeIn(250, function() { + internalCallback(subjects); + }); + }}}, + modal: { + hideClass: 'hide', + 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>Content!</h1>'); + }, + + 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/packageTreeView.js b/module/web/static/js/views/packageTreeView.js new file mode 100644 index 000000000..30f159cf7 --- /dev/null +++ b/module/web/static/js/views/packageTreeView.js @@ -0,0 +1,75 @@ +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() { + 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'); + + 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>')); + + 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>')); + + ul = $('<ul></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..171325d1f --- /dev/null +++ b/module/web/static/js/views/packageView.js @@ -0,0 +1,60 @@ +define(['jquery', 'backbone', 'underscore', 'views/fileView', 'utils/lazyRequire'], + function($, Backbone, _, fileView, lazyLoader) { + + // Renders a single package item + return Backbone.View.extend({ + + tagName: 'li', + events: { + 'click .load': 'load', + 'click .delete': 'delete', + 'click .show-dialog': 'show' + }, + + modal: null, + requireOnce: lazyLoader.once(), + + 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($('<a class="load" href="#"> Load</a>')); + this.$el.append($('<a class="delete" href="#"> Delete</a>')); + this.$el.append($('<a class="show-dialog" href="#"> Show</a>')); + + if (this.model.isLoaded()) { + var ul = $('<ul></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(); + }, + + show: function() { + 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 |