added app object + event aggegator

8 files changed, 228 insertions, 364 deletions

diff --git a/module/web/static/js/app.build.js b/module/web/static/js/app.build.js
index ad40b02b6..c2a775981 100644
--- a/module/web/static/js/app.build.js
+++ b/module/web/static/js/app.build.js
@@ -5,7 +5,7 @@
   dir: "../js-optimized",
 
   // Tells Require.js to look at desktop.js for all shim and path configurations
-  mainConfigFile: 'default.js',
+  mainConfigFile: 'config.js',
 
   // Modules to be optimized:
   modules: [
diff --git a/module/web/static/js/app.js b/module/web/static/js/app.js
new file mode 100644
index 000000000..e846f3e0a
--- /dev/null
+++ b/module/web/static/js/app.js
@@ -0,0 +1,34 @@
+/* 
+ *  Global Application Object
+ *  Contains all necessary logic shared across views
+ */
+/*jslint browser: true*/
+define([
+
+    // Libraries.
+    'jquery',
+    'underscore',
+    'backbone',
+    'utils/initHB',
+    'utils/animations',
+    'utils/lazyRequire',
+    'wreqr',
+    'bootstrap'
+
+], function($, _, Backbone, Handlebars) {
+    'use strict';
+
+    var Application = function(options){
+        this.vent = new Backbone.Wreqr.EventAggregator();
+        _.extend(this, options);
+    };
+
+    _.extend(Application.prototype, Backbone.Events, {
+
+
+    });
+
+
+    // Returns the app object to be available to other modules through require.js.
+    return new Application();
+});
\ No newline at end of file
diff --git a/module/web/static/js/config.js b/module/web/static/js/config.js
new file mode 100644
index 000000000..0ab06a3e5
--- /dev/null
+++ b/module/web/static/js/config.js
@@ -0,0 +1,37 @@
+// Sets the require.js configuration for your application.
+require.config({
+
+    // XXX: To many dots in file breaks dependencies
+    paths: {
+
+        jquery: "libs/jquery-1.8.3",
+        jqueryui: "libs/jqueryui",
+        flot: "libs/jquery.flot-1.1",
+        transit: "libs/jquery.transit-0.9.9",
+        omniwindow: "libs/jquery.omniwindow",
+        bootstrap: "libs/bootstrap-2.2.2",
+
+        underscore: "libs/lodash-1.0.rc3",
+        backbone: "libs/backbone-0.9.9",
+        wreqr: "libs/backbone.wreqr-0.1.0",
+        handlebars: "libs/Handlebars-1.0rc1",
+
+        // Plugins
+        text: "libs/text-2.0.3",
+        tpl: "../../templates"
+
+    },
+
+    // Sets the configuration for your third party scripts that are not AMD compatible
+    shim: {
+
+        "backbone": {
+            deps: ["underscore", "jquery"],
+            exports: "Backbone"  //attaches "Backbone" to the window object
+        },
+        "flot": ["jquery"],
+        "transit": ["jquery"],
+        "omniwindow": ["jquery"],
+        "bootstrap": ["jquery"]
+    } // end Shim Configuration
+});
\ No newline at end of file
diff --git a/module/web/static/js/default.js b/module/web/static/js/default.js
index 782c97ac2..c82ae3299 100644
--- a/module/web/static/js/default.js
+++ b/module/web/static/js/default.js
@@ -1,57 +1,17 @@
-// Sets the require.js configuration for your application.
-// Note: Config needs to be duplicated for mobile.js
-require.config({
+define('default', ['jquery', 'app', 'views/headerView', 'views/packageTreeView'],
+    function($, App, HeaderView, TreeView) {
 
-    // XXX: To many dots in file breaks dependencies
-    paths: {
-
-        jquery: "libs/jquery-1.8.3",
-        jqueryui: "libs/jqueryui",
-        flot: "libs/jquery.flot-1.1",
-        transit: "libs/jquery.transit-0.9.9",
-        omniwindow: "libs/jquery.omniwindow",
-        bootstrap: "libs/bootstrap-2.2.2",
-
-        underscore: "libs/lodash-1.0.rc3",
-        backbone: "libs/backbone-0.9.9",
-        handlebars: "libs/Handlebars-1.0rc1",
-
-        // Plugins
-        text: "libs/text-2.0.3",
-        tpl: "../../templates"
-
-    },
-
-    // Sets the configuration for your third party scripts that are not AMD compatible
-    shim: {
-
-        "backbone": {
-            deps: ["underscore", "jquery"],
-            exports: "Backbone"  //attaches "Backbone" to the window object
-        },
-        "flot": ["jquery"],
-        "transit": ["jquery"],
-        "omniwindow": ["jquery"],
-        "bootstrap": ["jquery"]
-    }, // end Shim Configuration
-});
-
-define('default', ['jquery', 'backbone', 'utils/initHB',
-    'routers/defaultRouter', 'views/headerView', 'views/packageTreeView',
-    'utils/animations', 'utils/lazyRequire', 'bootstrap'],
-    function($, Backbone, Handlebars, DefaultRouter, HeaderView, TreeView) {
-
-        var init = function() {
+        App.init = function() {
             var view = new HeaderView();
             view.render();
         };
 
-        var initPackageTree = function() {
+        App.initPackageTree = function() {
             $(function() {
                 var view = new TreeView();
                 view.init();
             });
         };
 
-        return {"init": init, "initPackageTree": initPackageTree};
+        return App;
     });
\ No newline at end of file
diff --git a/module/web/static/js/libs/backbone.wreqr-0.1.0.js b/module/web/static/js/libs/backbone.wreqr-0.1.0.js
new file mode 100644
index 000000000..d1526c76b
--- /dev/null
+++ b/module/web/static/js/libs/backbone.wreqr-0.1.0.js
@@ -0,0 +1,150 @@
+// Backbone.Wreqr, v0.1.0
+// Copyright (c)2012 Derick Bailey, Muted Solutions, LLC.
+// Distributed under MIT license
+// http://github.com/marionettejs/backbone.wreqr
+(function (root, factory) {
+  if (typeof exports === 'object') {
+
+    var underscore = require('underscore');
+    var backbone = require('backbone');
+
+    module.exports = factory(underscore, backbone);
+
+  } else if (typeof define === 'function' && define.amd) {
+
+    define(['underscore', 'backbone'], factory);
+
+  } 
+}(this, function (_, Backbone) {
+  "option strict";
+
+  Backbone.Wreqr = (function(Backbone, Marionette, _){
+    "option strict";
+    var Wreqr = {};
+  
+    // Handlers
+    // --------
+    // A registry of functions to call, given a name
+    
+    Wreqr.Handlers = (function(Backbone, _){
+      "option strict";
+      
+      // Constructor
+      // -----------
+    
+      var Handlers = function(){
+        "use strict";
+        this._handlers = {};
+      };
+    
+      Handlers.extend = Backbone.Model.extend;
+    
+      // Instance Members
+      // ----------------
+    
+      _.extend(Handlers.prototype, {
+    
+        // Add a handler for the given name, with an
+        // optional context to run the handler within
+        addHandler: function(name, handler, context){
+          var config = {
+            callback: handler,
+            context: context
+          };
+    
+          this._handlers[name] = config;
+        },
+    
+        // Get the currently registered handler for
+        // the specified name. Throws an exception if
+        // no handler is found.
+        getHandler: function(name){
+          var config = this._handlers[name];
+    
+          if (!config){
+            throw new Error("Handler not found for '" + name + "'");
+          }
+    
+          return function(){
+            var args = Array.prototype.slice.apply(arguments);
+            return config.callback.apply(config.context, args);
+          };
+        },
+    
+        // Remove a handler for the specified name
+        removeHandler: function(name){
+          delete this._handlers[name];
+        },
+    
+        // Remove all handlers from this registry
+        removeAllHandlers: function(){
+          this._handlers = {};
+        }
+      });
+    
+      return Handlers;
+    })(Backbone, _);
+    
+    // Wreqr.Commands
+    // --------------
+    //
+    // A simple command pattern implementation. Register a command
+    // handler and execute it.
+    Wreqr.Commands = (function(Wreqr){
+      "option strict";
+    
+      return Wreqr.Handlers.extend({
+        execute: function(){
+          var name = arguments[0];
+          var args = Array.prototype.slice.call(arguments, 1);
+    
+          this.getHandler(name).apply(this, args);
+        }
+      });
+    
+    })(Wreqr);
+    
+    // Wreqr.RequestResponse
+    // ---------------------
+    //
+    // A simple request/response implementation. Register a
+    // request handler, and return a response from it
+    Wreqr.RequestResponse = (function(Wreqr){
+      "option strict";
+    
+      return Wreqr.Handlers.extend({
+        request: function(){
+          var name = arguments[0];
+          var args = Array.prototype.slice.call(arguments, 1);
+    
+          return this.getHandler(name).apply(this, args);
+        }
+      });
+    
+    })(Wreqr);
+    
+    // Event Aggregator
+    // ----------------
+    // A pub-sub object that can be used to decouple various parts
+    // of an application through event-driven architecture.
+    
+    Wreqr.EventAggregator = (function(Backbone, _){
+      "option strict";
+      var EA = function(){};
+    
+      // Copy the `extend` function used by Backbone's classes
+      EA.extend = Backbone.Model.extend;
+    
+      // Copy the basic Backbone.Events on to the event aggregator
+      _.extend(EA.prototype, Backbone.Events);
+    
+      return EA;
+    })(Backbone, _);
+    
+  
+    return Wreqr;
+  })(Backbone, Backbone.Marionette, _);
+  
+  return Backbone.Wreqr; 
+
+}));
diff --git a/module/web/static/js/mobile.js b/module/web/static/js/mobile.js
deleted file mode 100644
index 75450cc89..000000000
--- a/module/web/static/js/mobile.js
+++ /dev/null
@@ -1,42 +0,0 @@
-// Sets the require.js configuration for your application.
-require.config({
-
-    paths:{
-
-        jquery:"libs/jquery-1.8.0",
-        jqueryui:"libs/jqueryui",
-        flot:"libs/jquery.flot.min",
-        transit:"libs/jquery.transit-0.1.3",
-        fastClick:"libs/jquery.fastClick-0.2",
-        omniwindow: "libs/jquery.omniwindow",
-
-        underscore:"libs/lodash-0.7.0",
-        backbone:"libs/backbone-0.9.2",
-
-        // Require.js Plugins
-        text:"plugins/text-2.0.3"
-
-    },
-
-  // Sets the configuration for your third party scripts that are not AMD compatible
-  shim: {
-
-      "backbone": {
-          deps: ["underscore", "jquery"],
-          exports: "Backbone"  //attaches "Backbone" to the window object
-      },
-      transit: ["jquery"],
-      fastClick: ["jquery"]
-
-  } // end Shim Configuration
-  
-});
-
-define('mobile', ['routers/mobileRouter', 'transit', 'fastClick'], function(Mobile) {
-
-    var init = function(){
-        var router = new Mobile();
-    };
-
-    return {"init":init};
-});
diff --git a/module/web/static/js/views/mobile/my.js b/module/web/static/js/views/mobile/my.js
deleted file mode 100644
index 41203e6c5..000000000
--- a/module/web/static/js/views/mobile/my.js
+++ /dev/null
@@ -1,275 +0,0 @@
-(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/templates/default/base.html b/module/web/templates/default/base.html
index 1ae95b127..cd66734f0 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -16,7 +16,7 @@
     {% endblock %}

 

     <script src="/static/js/libs/less-1.3.0.min.js" type="text/javascript"></script>

-    <script type="text/javascript" data-main="static/js/default" src="/static/js/libs/require-2.1.2.js"></script>

+    <script type="text/javascript" data-main="static/js/config" src="/static/js/libs/require-2.1.2.js"></script>

     <script>

         require(['default'], function(App) {

             App.init();