More viewport and push state modifications...

index.html

@@ -88,13 +88,13 @@
 
 	<div class="ui-layout-center" class="loading"></div>
 
-	<div class="ui-layout-south row-fluid" id="wrapperFooter">
+	<div class="ui-layout-south row-fluid">
 		<div id="wrapperFooterLeft" class="span4 row-fluid">
 			<div class="span2">
-				<button class="btn btn-mini btn-inverse" type="button" data-toggle="side-bar"><i class="icon-chevron-left icon-white"></i></button>
+				<button class="btn btn-mini btn-inverse" type="button" data-target="sidebar"><i class="icon-chevron-left icon-white"></i></button>
 			</div>
-			<button class="btn btn-mini btn-inverse" type="button" data-toggle="button"><i class="icon-random icon-white"></i></button>
+			<button class="btn btn-mini btn-inverse" type="button" data-target="random"><i class="icon-random icon-white"></i></button>
-			<button class="btn btn-mini btn-inverse" type="button" data-toggle="button"><i class="icon-retweet icon-white"></i></button>
+			<button class="btn btn-mini btn-inverse" type="button" data-target="repeat"><i class="icon-retweet icon-white"></i></button>
 		</div>
 		<div id="wrapperFooterCenter" class="span4">
 			<span class="list-count">0</span>&nbsp;items
@@ -113,7 +113,7 @@
 					<li><a tabindex="-1" href="#">Separated link</a></li>
 				</ul>
 			</div> -->
-			<button class="btn btn-mini btn btn-inverse" type="button" data-target="modalAboutDaapr"><i class="icon-question-sign icon-white"></i></button>
+			<button class="btn btn-mini btn btn-inverse" type="button" data-target="about"><i class="icon-question-sign icon-white"></i></button>
 		</div>
 	</div>
 
@@ -134,43 +134,6 @@
 		<li><a href="javascript:void(0);">Genre</a></li>
 	</ul>
 
-	<script type="text/html" id="_tmplModalServerLogin">
-		<div id="modalServerLogin">
-			<div class="overlay"></div>
-			<div class="modal" data-show="true" tabindex="-1" role="dialog" aria-hidden="true">
-				<div class="modal-body" style="font-size: 1.2em">
-					<form>
-						<fieldset>
-							<legend>{{dmap_itemname}} login</legend>
-							<p>
-								<input type="text" class="input-large" placeholder="Login">
-							</p>
-							<p>
-								<input type="password" class="input-large" placeholder="Password">
-							</p>
-							<!--label class="checkbox">
-							<input type="checkbox"> Remember me
-							</label-->
-						</fieldset>
-					</form>
-				</div>
-				<div class="modal-footer">
-					<button class="btn btn-mini" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i>&nbsp;Cancel</button>
-					<button class="btn btn-mini btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-ok"></i>&nbsp;Login</button>
-				</div>
-			</div>
-		</div>
-	</script>
-
-	<script type="text/html" id="_tmplModalServerLoading">
-		<div id="modalServerLoading">
-			<div class="overlay"></div>
-			<div class="modal">
-
-			</div>
-		</div>
-	</script>
-
 	<!-- Underscore Templates -->
 	<script type="text/html" id="_tmplPlayerView">
 		<div class="daaprPlayerTitleIndicator">{{dmap_itemname}}</div>

resources/js/app.js

@@ -27,9 +27,11 @@ define([
 	, "collections/playlist"
 
 	, "views/client"
+	, "views/list"
 
 	, "text!../templates/app/modal-loading.html"
 	, "text!../templates/app/modal-login.html"
+	, "text!../templates/app/modal-about.html"
 ],
 function(
 _
@@ -51,29 +53,37 @@ _
 , PlaylistCollection
 
 , ClientView
+, ListView
 
 , tmplModalLoading
 , tmplModalLogin
+, tmplModalAbout
 ) {
 	"use strict";
 
 	var App		= Backbone.Router.extend({
 		routes: {
-			"playlist":					"_routerActionPlaylist"
+			"about":					"_routerActionAbout"
+			, "playlist":				"_routerActionPlaylist"
 			, "servers/:server":		"_routerActionClient"
 			, "playlist/:item":			"_routerActionPlaylistItem"
 			, ":server/items/:item":	"_routerActionServerItem"
 			//"*actions": "defaultRoute" // matches http://example.com/#anything-here
 		}
 
+		, historyStart:	window.history.length
+
 		, initialize:	function() {
 			_.bindAll(this
+				, "_routerActionAbout"
 				, "_routerActionPlaylist"
 				, "_routerActionClient"
 				, "_routerActionItem"
 				, "_routerActionServerItem"
 
 				, "_serverInit"
+
+				, "__showModalAbout"
 			);
 
 			var that	= this
@@ -142,7 +152,7 @@ _
 					el:			that.Views.App.Layout.panes.center
 				});
 
-				// TODO: Add playlist view here
+				that.Views.Main.setView("playlist", new ListView());
 
 				that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) {
 					that.Views.App.toggleSideBar();
@@ -156,6 +166,8 @@ _
 					// TODO:...
 				});
 
+				that.Views.Footer.on("show:about", that.__showModalAbout);
+
 				that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals(event) {
 					$(event.target).remove();
 				});
@@ -174,6 +186,13 @@ _
 			return this;
 		}
 
+		, _routerActionAbout:			function () {
+			var that	= this
+			;
+
+			that.__showModalAbout();
+		}
+
 		, _routerActionPlaylist:		function () {
 			var that	= this
 			;
@@ -287,7 +306,6 @@ _
 
 					if (saveCredentials) {
 						var newModel	= (_.clone({}, serverModel.attributes, {username: username, password: password}));
-						console.log(newModel);
 
 						serverModel.set("username", username, {silent: true});
 						serverModel.set("password", password, {silent: true});
@@ -314,6 +332,29 @@ _
 
 			server.client.init();
 		}
+
+		, __showModalAbout:		function () {
+			var that			= this
+			,	$modal			= $(tmplModalAbout)
+			,	previousPush	= window.location.pathname
+			;
+
+			if (previousPush.indexOf("/about") >= 0) {
+				previousPush	= "";
+			}
+
+			$modal.on("hidden", function __fnEventAppModalAboutClosed(event) {
+				if (window.history.length === that.historyStart) {
+					that.navigate("", false);
+				} else {
+					window.history.back();
+				}
+			});
+
+			setTimeout(function () {
+				$modal.modal();
+			}, 50);
+		}
 	});
 
 	return App;

resources/js/views/client.js

@@ -42,6 +42,7 @@ _
 
 		, initialize:	function (options) {
 			_.bindAll(this
+				, "_initLayout"
 				, "show"
 				, "hide"
 			);
@@ -58,30 +59,18 @@ _
 
 			Client.__super__.initialize.apply(that, arguments);
 
-			that.el.id			= "__view-" + that.Server.client.attributes.hostname.replace(".", "_");
+			that.el.id			= "__view-cient-" + that.Server.client.attributes.hostname.replace(".", "_");
 			that.id				= that.Server.client.attributes.hostname;
 
 /*
-			that.Views.Browser	= new BrowserView(that.Client, {
-				el:		that.Layout.panes.north
-			});
-
-			var dbId			= that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id
-			,	dbCollection	= that.Server.client.collections.databases[dbId].get("dmap_listing")
-			;
 
-			that.Views.List		= new ListView(dbCollection, {
-				el:			that.Layout.panes.center
-				, type:		"client"
-			});
 */
 		}
 
-		, show:			function () {
+		, _initLayout:	function () {
 			var that	= this
 			;
 
-
 			that.Layout	= that.$el.layout({
 				defaults:		{
 					closable:			false
@@ -101,6 +90,31 @@ _
 					minSize:			200
 				}
 			});
+
+			that.Views.Browser	= new BrowserView(that.Client, {
+				el:		that.Layout.panes.north
+			});
+
+			var dbId			= that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id
+			,	dbCollection	= that.Server.client.collections.databases[dbId].get("dmap_listing")
+			;
+
+			that.Views.List		= new ListView({
+				el:				that.Layout.panes.center
+				, collection:	dbCollection
+				, type:			"client"
+			});
+		}
+
+		, show:			function () {
+			var that	= this
+			;
+
+			if (that.Layout === null) {
+				that._initLayout();
+			}
+
+			this.$el.show();
 			//console.debug(that.Server.client.collections.databases[that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id].get("dmap_listing"));
 		}
 
@@ -108,6 +122,7 @@ _
 			var that	= this
 			;
 
+			this.$el.hide();
 		}
 	});
 

resources/js/views/footer.js

@@ -9,24 +9,92 @@ define([
 	, "jquery"
 	, "backbone"
 	, "bootstrap"
-
-	, "text!../../templates/footer/modal-about.html"
 ]
-, function (_, $, Backbone, Bootstrap, tmplModalAbout) {
+, function (_, $, Backbone, Bootstrap) {
 	"use strict";
 
 	var Footer = Backbone.View.extend({
 		events:			{
-			"click button[data-target='modalAboutDaapr']":	"_buttonAboutClick"
+			"click button[data-target='about']":	"__eventButtonAboutClick"
+			, "click button[data-target='sidebar']":	"__eventToggleButtonSideBar"
+			, "click button[data-target='random']":		"__eventToggleButtonRandom"
+			, "click button[data-target='repeat']":		"__eventToggleButtonRepeat"
 		}
 
+		, _stateRepeat:		false
+
+		, _stateRandom:		false
+
 		, initialize:		function (options) {
+			_.bindAll(this
+				, "__eventToggleButtonRandom"
+				, "__eventToggleButtonRepeat"
+				, "__eventToggleButtonSideBar"
+				, "__eventButtonAboutClick"
+			);
+
 			var that	= this
 			;
 
 			Footer.__super__.initialize.apply(that, arguments);
+		}
+
+		, __eventToggleButtonRandom:	function (event) {
+			var that		= this
+			,	$target		= $(event.target)
+			;
+
+			that._stateRandom	= !that._stateRandom;
+
+			if (event.target.tagName === "I") {
+				$target		= $target.parent();
+			}
+
+			if (that._stateRandom) {
+				$target.addClass("active");
+			} else {
+				$target.removeClass("active");
+			}
+
+			if (!that.__timeoutDebounceRandomButton) {
+				that.__timeoutDebounceRandomButton = setTimeout(function () {
+					that.trigger("toggle:random", that._stateRandom);
+
+					delete that.__timeoutDebounceRandomButton;
+				}, 500);
+			}
+		}
+
+		, __eventToggleButtonRepeat:	function (event) {
+			var that		= this
+			,	$target		= $(event.target)
+			;
+
+			that._stateRepeat	= !that._stateRepeat;
+
+			if (event.target.tagName === "I") {
+				$target		= $target.parent();
+			}
+
+			if (that._stateRepeat) {
+				$target.addClass("active");
+			} else {
+				$target.removeClass("active");
+			}
+
+			if (!that.__timeoutDebounceRepeatButton) {
+				that.__timeoutDebounceRepeatButton = setTimeout(function () {
+					that.trigger("toggle:repeat", that._stateRepeat);
+
+					delete that.__timeoutDebounceRepeatButton;
+				}, 500);
+			}
+		}
+
+		, __eventToggleButtonSideBar:	function (event) {
+			var that	= this
+			;
 
-			that.$el.delegate("button[data-toggle='side-bar']", "click", function (event) {
 			that.trigger("toggle:sidebar");
 
 			var $target		= $(event.target);
@@ -36,15 +104,13 @@ define([
 
 			$target.toggleClass("icon-chevron-right");
 			$target.toggleClass("icon-chevron-left");
-			});
-
 		}
 
-		, _buttonAboutClick:		function(event) {
+		, __eventButtonAboutClick:		function(event) {
-			var $modal	= $(tmplModalAbout)
+			var that	= this
 			;
 
-			$modal.modal();
+			Backbone.Router.prototype.navigate("about", true);
 		}
 	});
 

resources/js/views/list.js

@@ -8,22 +8,42 @@ define([
 	"jquery"
 	, "backbone"
 	, "bootstrap"
+
+	, "text!../../templates/view-list.html"
 ]
-, function ($, Backbone, Bootstrap) {
+, function (
+$
+, Backbone
+, Bootstrap
+
+, tmplListView
+) {
 	"use strict";
 
 	var List	= Backbone.View.extend({
-		el:		$("table")
+		type:	"playlist"
-		, type:	"playlist"
+
+		, initialize:	function (options) {
+			var that	= this
+			;
 
-		, initialize:	function (collection, options) {
+			if (options && options.el) {
-			this.$el	= $(options.el).find("table:first");
+				options.el.innerHTML	= tmplListView;
+			} else {
+				options					= options || {};
+				options.el				= document.createElement("div");
 
-			this.type	= options.type || "playlist";
+				options.el.id			= "__view-playlist";
+				options.el.className	= "playlist-view-container";
+				options.el.innerHTML	= tmplListView;
+
+				this.el					= options.el;
+				this.$el				= $(this.el);
+			}
 
 			List.__super__.initialize.apply(this, arguments);
 
-			this.$el.html("<tr><td><h1>" + this.type + "</h1></td></tr>");
+			this.$el.find("table:first").html("<tr><td><h1>" + this.type + "</h1></td></tr>");
 
 			return this;
 		}
@@ -31,6 +51,20 @@ define([
 		, render:	function () {
 			return this.$el;
 		}
+
+		, show:		function () {
+			var that	= this
+			;
+
+			this.$el.show();
+		}
+
+		, hide:		function () {
+			var that	= this
+			;
+
+			this.$el.hide();
+		}
 	});
 
 	return List;

resources/js/views/main.js

@@ -24,6 +24,7 @@ _
 
 	var Main	= Backbone.View.extend({
 		children:		{}
+		, current:		null
 
 		, initialize:	function (options) {
 			_.bindAll(this
@@ -31,14 +32,12 @@ _
 				, "getView"
 				, "showView"
 				, "hideView"
-				, "toggleView"
+				//, "toggleView"
 				, "destroyView"
 			);
 			//that.setView("playlist", new ListView(playlistCollection));
 
 			Main.__super__.initialize.apply(this, arguments);
-
-			console.log(this.el);
 		}
 
 		, setView:		function (name, view) {
@@ -60,9 +59,21 @@ _
 			var that	= this
 			;
 
-			console.debug("Show view: "+ name, that.$el, that.children[name], that.children[name].$el);
+			if (that.current === name) {
+				return true;
+			}
+
+			if (that.current) {
+				that.hideView(that.current);
+			}
+
+			that.current	= name;
+
+			console.debug("Show view: "+ name);//, that.$el, that.children[name], that.children[name].$el);
 			if (that.children[name] && that.children[name].$el) {
+				if (that.$el.find(that.children[name].$el).length === 0) {
 					that.$el.append(that.children[name].$el);
+				}
 
 				if (that.children[name].show) {
 					setTimeout(function __fnTimeoutMainViewShow() {
@@ -79,8 +90,11 @@ _
 			var that	= this
 			;
 
+			that.current	= null;
+
 			console.debug("Hide view: "+ name);
 			if (that.children[name] && that.children[name].$el) {
+
 				if (that.children[name].hide) {
 					that.children[name].hide();
 				} else {
@@ -88,11 +102,11 @@ _
 				}
 
 				setTimeout(function __fnTimeoutMainViewHide() {
-					that.$el.remove(that.children[name].$el);
+					that.$el.find(that.children[name].$el).remove();
 				}, 50);
 			}
 		}
-
+/*
 		, toggleView:	function (name) {
 			var that	= this
 			;
@@ -101,7 +115,7 @@ _
 				that.children[name].$el.toggle();
 			}
 		}
-
+ */
 		, destroyView:	function (name) {
 
 		}

resources/js/views/sidebar.js

@@ -204,6 +204,7 @@ console.log(event);
 			}(item));
 
 			$item.on("click", function __fnSideBarViewEventDblClickItem(event) {
+				// FIXME: This needs to check the state of the client and debounce
 				that.$el.find("li.selected").removeClass("selected");
 				$item.addClass("selected");
 /*

resources/templates/client/layout.html

@@ -10,7 +10,5 @@
 			<table cellpadding="0" cellspacing="0" border="0" class="table-albums"><tr><td><h1>" + this.type + "</h1></td></tr></table>
 		</div>
 	</div>
-	<div class="ui-layout-center">
+	<div class="ui-layout-center"></div>
-		<table cellpadding="0" cellspacing="0" border="0" class="table-list"><tr><td><h1>" + this.type + "</h1></td></tr></table>
-	</div>
 </div>

resources/templates/view-list.html

@@ -0,0 +1 @@
+<table cellpadding="0" cellspacing="0" border="0" class="table-list"><tr><td><h1>" + this.type + "</h1></td></tr></table>