Removal of jQuery Mobile Slide Panel Menu.

js/controllers/fleet.controller.js

@@ -0,0 +1,35 @@
+define(["fuse", "jquery", "underscore", "collections/fleet.collection", "models/vehicle.model", "views/fleet.view", "views/vehicle.view", "views/findcar.view"], function(Fuse, $, _, FleetCollection, VehicleModel, FleetView, VehicleView, FindCarView) {
+    return Fuse.Controller.extend({
+
+        init: function() {
+            this.fleet = new FleetCollection(Fuse.FIXTURES.fleet);
+        },
+
+        showFleet: function() {
+            new FleetView({
+                collection: this.fleet
+            });
+        },
+
+        showVehicle: function(id) {
+            // retrieve the model by its id from our fleet collection.
+            this.vehicle = this.fleet.get(id);
+            new VehicleView({
+                model: this.vehicle
+            });
+        },
+
+        showFindCar: function() {
+            var args = arguments;
+            var hasId = typeof args[0] !== "undefined";
+            // if we were passed a vehicle id, 
+            // filter our vehicles collection down to just
+            // the vehicle with that id, otherwise show 
+            // the findcar view for all vehicles.
+            var collection = (hasId) ? this.fleet.filterById(args[0]) : this.fleet;
+            new FindCarView({
+                collection: collection
+            });
+        }
+    });
+});

js/fuse.js

@@ -25,14 +25,17 @@ define(["backbone", "jquery", "underscore", "vendor/google.maps", "text!template
             contentTemplate: _.template(contentTmpl),
 
             renderHeader: function() {
-                this.$el.prepend(this.headerTemplate({header: this.header}));
+                Fuse.log("Rendering header.");
+                this.$el.append(this.headerTemplate({header: this.header}));
             },
 
             renderFooter: function() {
+                Fuse.log("Rendering footer.");
                 this.$el.append(this.footerTemplate());
             },
 
             renderContent: function() {
+                Fuse.log("Rendering content.");
                 var tmplParams = {
                     content: this.content
                 };
@@ -60,23 +63,31 @@ define(["backbone", "jquery", "underscore", "vendor/google.maps", "text!template
                     this.model.on("change", this.render, this);
                 }
 
+                this.cleanup();
                 this.renderHeader();
                 this.renderContent();
                 this.renderFooter();
-                this.removeDups();
                 this.addToDOM();
                 this.showWhenReady();
+                // if there is a map configuration,
+                // setup the map with the provided configuration
+                // and show it when ready.
+                if (this.map) {
+                    this.showMapWhenReady();
+                }
                 this.enhance();
             },
 
-            removeDups: function() {
+            cleanup: function() {
+                Fuse.map.reset();
                 var targetElements = ["#" + this.el.id];
                 var dups = $(targetElements.join());
                 if (dups.length) {
-                    // reset the map back to its starting location.
-                    Fuse.map.reset();
-                    // detach keeps jQuery data and event handlers around 
-                    // while removing it from the DOM. 
+                    // remove the duplicate(s) from the DOM but don't throw
+                    // away their attached data or events.
+                    // note : detach() is needed because otherwise jQM starts to 
+                    // throw a very large and angry fit if you just go full throttle
+                    // and .remove() elements.
                     dups.detach();
                 }
             },
@@ -92,12 +103,15 @@ define(["backbone", "jquery", "underscore", "vendor/google.maps", "text!template
                 }); 
             },
 
-            enhance: function() {
-                // if there is a map configuration, configure the map with it.
-                if (!!this.map) {
+            showMapWhenReady: function() {
+                var configureMap = $.proxy(function() {
                     Fuse.map.configure(this.map);
-                }
+                }, this);
 
+                this.$el.on("pageshow", configureMap);
+            },
+
+            enhance: function() {
                 this.$el.attr("data-role", this.role);
                 this.$el.page();
 
@@ -119,7 +133,6 @@ define(["backbone", "jquery", "underscore", "vendor/google.maps", "text!template
             }
         }),
 
-        menuTemplate: _.template(menuTmpl),
         mapTemplate: _.template(mapTmpl),
 
         map: {
@@ -247,34 +260,6 @@ define(["backbone", "jquery", "underscore", "vendor/google.maps", "text!template
             }
         },
 
-        initMenu: function() {
-            this.log("Initializing menu.");
-            var __self__ = this;
-            // populate menu items.
-            var menu = this.menuTemplate({items: this.menu, vehicles: this.FIXTURES.vehicles});
-            $(document.body).append(menu);
-            // setup handler for menu.
-            $("#menu").on("tap", "a", function(e) {
-                var action = $(e.target).data("action");
-                if (action === "close") {
-                    $("#menu").panel("close");
-                } else {
-                    __self__.show($(e.target).data("action"));
-                }
-                e.handled = true;
-            });
-
-            // initialize the panel and listview widgets.
-            $("#menu").panel();
-            $("#menu ul").listview();
-            // setup toggle handler.
-            $(document).on("tap", "#open-menu", function(e) {
-                Fuse.log("opening menu...");
-                $("#menu").panel("open");
-                e.handled = true;
-            }); 
-        },
-
         initActionButtons: function() {
             var showPageFromButton = $.proxy(function(e) {
                 var $target = $(e.target);
@@ -331,8 +316,6 @@ define(["backbone", "jquery", "underscore", "vendor/google.maps", "text!template
         },
 
         init: function() {
-            // setup application menu.
-            this.initMenu();
             // setup the action buttons in the header and footer.
             this.initActionButtons();
             // add reusable map container to page.

js/main.js

@@ -1,8 +1,8 @@
-require(["fuse", "cloudos", "jquery", "routers/app.router", "routers/vehicles.router", "controllers/app.controller", "controllers/vehicles.controller", "jquerymobile", "tooltipster"], function(Fuse, CloudOS, $, AppRouter, VehiclesRouter, AppController, VehiclesController) {
+require(["fuse", "cloudos", "jquery", "routers/app.router", "routers/fleet.router", "controllers/app.controller", "controllers/fleet.controller", "jquerymobile", "tooltipster"], function(Fuse, CloudOS, $, AppRouter, FleetRouter, AppController, FleetController) {
 
 	// setup dummy data. Will eventually come from API obviously.
 	Fuse.FIXTURES = {
-		"vehicles": [{
+		"fleet": [{
 			"id": "VSPQ",
 			"default": 1,
 			"vin": "1FTFW1EV6AKA75407",
@@ -98,13 +98,13 @@ require(["fuse", "cloudos", "jquery", "routers/app.router", "routers/vehicles.ro
 	// intialize the routers.
 	Fuse.routers = {};
 	Fuse.routers.AppRouter = new AppRouter();
-	Fuse.routers.VehiclesRouter = new VehiclesRouter();
+	Fuse.routers.FleetRouter = new FleetRouter();
 	// initialize the controllers.
 	Fuse.routers.AppRouter.controller = new AppController();
-	Fuse.routers.VehiclesRouter.controller = new VehiclesController();
+	Fuse.routers.FleetRouter.controller = new FleetController();
 	// this is used for prefiltering Fuse.show() requests. Mainly for early-stage development and probably
 	// a good idea to remove later.
-	Fuse.routes = Object.keys(_.extend(Fuse.routers.AppRouter.routes, Fuse.routers.VehiclesRouter.routes));
+	Fuse.routes = Object.keys(_.extend(Fuse.routers.AppRouter.routes, Fuse.routers.FleetRouter.routes));
 	// remove this for production.
 	Fuse.logging = true;
 

js/routers/vehicles.router.js → js/routers/fleet.router.js

@@ -1,18 +1,18 @@
 define(["fuse", "jquery", "underscore"], function(Fuse, $, _) {
     return Fuse.Router.extend({
         routes: {
-            "fleet": "showVehicleList",
-            "fleet/:id": "showVehicleDetail",
+            "fleet": "showFleet",
+            "fleet/:id": "showVehicle",
             "findcar": "showFindCar",
             "findcar/:id": "showFindCar"
         },
 
-        showVehicleList: function() {
-        	this.controller.showVehicleList();
+        showFleet: function() {
+        	this.controller.showFleet();
         },
 
-        showVehicleDetail: function(id) {
-        	this.controller.showVehicleDetail(id);
+        showVehicle: function(id) {
+        	this.controller.showVehicle(id);
         },
 
         showFindCar: function() {

js/templates/vehicleItemtmpl.html → js/templates/fleetitemtmpl.html

@@ -1,4 +1,4 @@
-<a class="vehicle-item" data-vid="<%= id %>" >
+<a data-vid="<%= id %>" >
 	<img src="<%= icon %>">
 	<h1> <%= nickname %>
 		<% if (running) { %>

js/templates/fleettmpl.html

@@ -0,0 +1,5 @@
+<ul id = "fleet-items" data-role = "listview">
+	<% for (var i = 0; i < fleet.length; ++i) { %>
+		<%= fleet[i].outerHTML %>
+	<% } %>
+</ul>

js/templates/headertmpl.html

@@ -1,6 +1,5 @@
 <div class="fuse-header" data-role="header">
 	<h1><%= header %></h1>
-	<a id="open-menu" data-icon="bars" data-iconpos="notext" class="ui-btn-left">Menu</a>
 	<div class="fuse-header-container" class="ui-btn-right">
 		<a data-action="fleet"> 
 			<img src="style/images/car_icon_small.png" title="View your fleet.">

js/templates/menutmpl.html

@@ -1,13 +1,13 @@
-<div data-role="panel" id="menu" data-display="push" data-theme="b">
+<div data-role="panel" class="menu" data-display="reveal" data-theme="b">
 	<ul data-role="listview">
 		<li data-icon="back"><a data-action="close">Close</a></li>
 		<% for (var i = 0; i < items.length; ++i) { %>
 			<% if (items[i].action.toUpperCase() === "FLEET") { %>
 				<li id="menu-item-<%= items[i].action %>"><a data-action="<%= items[i].action %>"><%= items[i].text %></a>
-					<ul data-role="listview">
+					<ul class="fleet-menu" data-role="listview">
 						<!-- no easy way in jQM to automagically indent nested lists... -->
-						<% for (var j = 0; j < vehicles.length; ++j) { %>
-							<li id="vehicle-<%= vehicles[j].id %>" style="font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<%= vehicles[j].nickname %></li>
+						<% for (var j = 0; j < fleet.length; ++j) { %>
+							<li id="vehicle-<%= fleet[j].id %>" style="font-weight: bold;"><a data-action="fleet" data-vid="<%= fleet[j].id %>">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<%= fleet[j].nickname %></a></li>
 						<% } %>
 					</ul>
 				</li>

js/views/findcar.view.js

@@ -5,7 +5,7 @@ define(["fuse", "jquery", "underscore"], function(Fuse, $, _) {
 		contentClass: "fuse-map-container",
 		role: "page",
 		header: "Find Car",
-		transition: "slide",
+		transition: "flip",
 
 		initialize: function() {
 			this.map = {

js/views/vehicle.item.view.js → js/views/fleet.item.view.js

@@ -1,9 +1,9 @@
-define(["fuse", "jquery", "underscore", "text!templates/vehicleitemtmpl.html"], function(Fuse, $, _, vehicleItemTmpl) {
+define(["fuse", "jquery", "underscore", "text!templates/fleetitemtmpl.html"], function(Fuse, $, _, fleetItemTmpl) {
 	// represets an item in the vehicle list.
     return Fuse.View.extend({
         tagName: "li",
-        className: "vehicle",
-        template: _.template(vehicleItemTmpl),
+        className: "fleet-item",
+        template: _.template(fleetItemTmpl),
 
         initialize: function() {/* do nothing for now */},
 

js/views/fleet.view.js

@@ -0,0 +1,42 @@
+define(["backbone", "fuse", "jquery", "underscore", "views/fleet.item.view", "text!templates/fleettmpl.html"], function(Backbone, Fuse, $, _, FleetItemView, fleetTmpl) {
+    // the fleet view.
+    return Fuse.View.extend({
+        tagName: "div",
+        id: "fleet",
+        role: "page",
+        header: "Fleet",
+        transition: "fade",
+        fleetTemplate: _.template(fleetTmpl),
+        events: {
+            "tap .fleet-item > a": "showVehicle"
+        },
+
+        initialize: function() {
+            this.fleetItems = [];
+            this.render(); 
+        },
+
+        render: function() {
+            this.collection.each(function(vehicle) {
+                this.renderFleetItem(vehicle);
+            }, this);
+            this.content = this.fleetTemplate({fleet: this.fleetItems});
+            Fuse.View.prototype.render.call(this);
+        },
+
+        renderFleetItem: function(vehicle) {
+            var view = new FleetItemView({
+                model: vehicle
+            });
+            this.fleetItems.push(view.render().el);
+        },
+
+        showVehicle: function(e) {
+            var $target = $(e.target);
+            // get the vehicle id fo which we want to render a detail view.
+            var vid = $target.closest("a").attr("data-vid");
+            Fuse.show("fleet", {id: vid});
+            e.handled = true;
+        }
+    });
+});

js/views/vehicle.view.js

@@ -1,10 +1,10 @@
-define(["fuse", "jquery", "underscore", "models/vehicle.model", "text!templates/vehicledetailtmpl.html", "text!templates/infowindowtmpl.html"], function(Fuse, $, _, VehicleModel, vehicleDetailTmpl, infoWindowTmpl) {
+define(["fuse", "jquery", "underscore", "models/vehicle.model", "text!templates/vehicletmpl.html", "text!templates/infowindowtmpl.html"], function(Fuse, $, _, VehicleModel, vehicleTmpl, infoWindowTmpl) {
 	return Fuse.View.extend({
 		tagName: "div",
 		role: "page",
-		id: "vehicle-detail",
+		id: "vehicle",
 		transition: "slide",
-		template: _.template(vehicleDetailTmpl),
+		template: _.template(vehicleTmpl),
 		infoWindowTemplate: _.template(infoWindowTmpl),
 
 		initialize: function() {