Moved App layout to template

12 years ago · e0f483f7e3
parent 8f7c3bdbbf
commit e0f483f7e3
3 changed files with 30 additions and 13 deletions
--- a/index.html
+++ b/index.html
@ -27,14 +27,6 @@
 	<script data-main="/resources/js/main" src="/resources/vendors/require/require.min.js">/**/</script>
 </head>
 <body>
-	<div class="ui-layout-north" id="wrapperPlayer"></div>
-
-	<div class="ui-layout-west"></div>
-
-	<div class="ui-layout-center" class="loading"></div>
-
-	<div class="ui-layout-south row-fluid"></div>
-
 	<ul id="listItemContextMenu" class="context-menu dropdown-menu">
 		<li><a href="javascript:void(0);" data-target="listItemDetails"><i class="icon-info-sign"></i>&nbsp;Details...</a></li>
 		<li><a href="javascript:void(0);" data-target="permalink"><i class="icon-bookmark"></i>&nbsp;Direct link</a></li>
--- a/resources/js/views/app.js
+++ b/resources/js/views/app.js
@ -9,14 +9,22 @@ define([
 	"underscore"
 	, "jquery"
 	, "backbone"
-	, "jquery-layout"

+	, "text!../../templates/app/layout.html"
+
+	, "jquery-layout"
 	, "jquery-ui"
 ]
-, function (_, $, Backbone) {
+, function (
+_
+, $
+, Backbone
+
+, tmplAppLayout
+) {
 	"use strict";

-	return Backbone.View.extend({
+	var App		= Backbone.View.extend({
 		el:				$("body")

 		, Layout:		null
@ -26,9 +34,16 @@ define([
 		}

 		, initialize: function() {
-			_.bindAll(this, "toggleSideBar");
+			_.bindAll(this
+				, "toggleSideBar"
+			);
+
+			var that	= this
+			;

-			var that	= this;
+			App.__super__.initialize.apply(that);
+console.log(tmplAppLayout);
+			that.$el.html(tmplAppLayout);

 			that.Layout	= that.$el.layout({
 				//applyDefaultStyles:		true
@ -59,10 +74,13 @@ define([
 					size:				30
 				}
 			});
+
+			return that;
 		}

 		, toggleSideBar:	function () {
 			this.Layout.toggle("west");
 		}
 	});
+	return App;
 });
--- a/resources/templates/app/layout.html
+++ b/resources/templates/app/layout.html
@ -0,0 +1,7 @@
+<div class="ui-layout-north" id="wrapperPlayer"></div>
+
+<div class="ui-layout-west"></div>
+
+<div class="ui-layout-center"></div>
+
+<div class="ui-layout-south row-fluid"></div>