Moved player layout to template

12 years ago · f04b5e0fe8
parent 47e8765709
commit f04b5e0fe8
3 changed files with 49 additions and 24 deletions
--- a/index.html
+++ b/index.html
@ -27,28 +27,7 @@
 	<script data-main="/resources/js/main" src="/resources/vendors/require/require.min.js">/**/</script>
 </head>
 <body>
-	<div class="ui-layout-north" id="wrapperPlayer">
-		<div class="daaprControlsWrap">
-			<a id="buttonPrev" class="disabled"></a>
-			<a id="buttonPlay" class="disabled"></a>
-			<a id="buttonNext" class="disabled"></a>
-			<div id="volumeWrapper">
-				<a id="buttonVolDown" class="disabled"></a>
-				<input type="range" id="buttonVolume" minx="0" max="1" step="0.05" value="0" disabled />
-				<a id="buttonVolUp" class="disabled"></a>
-			</div>
-			<div class="clearfix"></div>
-		</div>
-		<form action="#" class="form-search controls" id="wrapperSearchWidget">
-			<div class="input-prepend">
-				<button type="submit" tabindex="-1" class="btn"><i class="icon-search"></i></button>
-				<input type="text" tabindex="1" class="span3 search-query">
-			</div>
-		</form>
-		<div id="daaprPlayerViewport">
-			<h1>DAAPr<sup>3</sup></h1>
-		</div>
-	</div>
+	<div class="ui-layout-north" id="wrapperPlayer"></div>

 	<div class="ui-layout-west"></div>

--- a/resources/js/views/player.js
+++ b/resources/js/views/player.js
@ -5,9 +5,35 @@
 /*jslint browser:true */
 /*jslint devel:true */
 define([
+	"underscore"
+	, "jquery"
+	, "backbone"
+
+	, "text!../../templates/player/layout.html"
 ]
-, function () {
+, function (
+_
+, $
+, Backbone
+
+, tmplPlayerLayout
+) {
 	"use strict";

-	return function() {};
+	var Player	= Backbone.View.extend({
+		el:			$("body > div.ui-layout-north")
+
+		, initialize:	function (options) {
+			var that	= this
+			;
+
+			Player.__super__.initialize.apply(that);
+
+			that.$el.html(tmplPlayerLayout);
+
+			return that;
+		}
+	});
+
+	return Player;
 });
--- a/resources/templates/player/layout.html
+++ b/resources/templates/player/layout.html
@ -0,0 +1,20 @@
+<div class="daaprControlsWrap">
+	<a id="buttonPrev" class="disabled"></a>
+	<a id="buttonPlay" class="disabled"></a>
+	<a id="buttonNext" class="disabled"></a>
+	<div id="volumeWrapper">
+		<a id="buttonVolDown" class="disabled"></a>
+		<input type="range" id="buttonVolume" minx="0" max="1" step="0.05" value="0" disabled />
+		<a id="buttonVolUp" class="disabled"></a>
+	</div>
+	<div class="clearfix"></div>
+</div>
+<form action="#" class="form-search controls" id="wrapperSearchWidget">
+	<div class="input-prepend">
+		<button type="submit" tabindex="-1" class="btn"><i class="icon-search"></i></button>
+		<input type="text" tabindex="1" class="span3 search-query">
+	</div>
+</form>
+<div id="daaprPlayerViewport">
+	<h1>DAAPr<sup>3</sup></h1>
+</div>