From 8c2412ca985e903f6caac30f64a192326cb406a3 Mon Sep 17 00:00:00 2001
From: Dan Barber <dan@new-bamboo.co.uk>
Date: Tue, 15 Apr 2014 18:16:11 +0100
Subject: [PATCH] Add root pane.

---
 .../controllers/library.controller.js         | 21 +++++++++++++++++++
 .../controllers/mpd-client.controller.js      |  2 ++
 assets/javascripts/views/library.html         |  1 +
 assets/stylesheets/library.css.sass           | 21 ++++++++-----------
 public/panels/root.html                       |  5 +++++
 5 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 public/panels/root.html

diff --git a/assets/javascripts/controllers/library.controller.js b/assets/javascripts/controllers/library.controller.js
index 11f50cd..94a3066 100644
--- a/assets/javascripts/controllers/library.controller.js
+++ b/assets/javascripts/controllers/library.controller.js
@@ -4,4 +4,25 @@ mpdClient.controller('library', function ($scope, api) {
   $scope.$on('library:show', function () { $scope.show = true })
 
   $scope.hide = function () { $scope.show = false }
+
+  var rootPane = {
+    title: 'Library',
+    entries: [
+      { label: 'Artists', path: '/artists' },
+      { label: 'Albums', path: '/albums' },
+      { label: 'Songs', path: '/songs' }
+    ]
+  }
+
+  $scope.panes = [rootPane]
+
+  $scope.currentPaneIndex = 0
+
+  $scope.currentPane = function () {
+    return $scope.panes[$scope.currentPaneIndex]
+  }
+
+  $scope.newPane = function (path, params) {
+    console.log(path)
+  }
 })
diff --git a/assets/javascripts/controllers/mpd-client.controller.js b/assets/javascripts/controllers/mpd-client.controller.js
index 4f77fd0..ca23756 100644
--- a/assets/javascripts/controllers/mpd-client.controller.js
+++ b/assets/javascripts/controllers/mpd-client.controller.js
@@ -1,3 +1,5 @@
 mpdClient.controller('mpd-client', function ($rootScope, $scope) {
   $scope.showLibrary = function () { $scope.$broadcast('library:show') }
+
+  $scope.currentPanelTemplate = 'panels/root.html'
 })
diff --git a/assets/javascripts/views/library.html b/assets/javascripts/views/library.html
index c5bfdce..a9d8f1c 100644
--- a/assets/javascripts/views/library.html
+++ b/assets/javascripts/views/library.html
@@ -3,4 +3,5 @@
     <a class="close" href="#" ng-click="hide()">Close</a>
     <h1>Library</h1>
   </header>
+  <ng-include src="currentPanelTemplate"></ng-include>
 </div>
diff --git a/assets/stylesheets/library.css.sass b/assets/stylesheets/library.css.sass
index 14ebf2b..f22a63c 100644
--- a/assets/stylesheets/library.css.sass
+++ b/assets/stylesheets/library.css.sass
@@ -1,6 +1,7 @@
 #library
   background: white
   position: absolute
+  padding: 2.5rem 0 0
   top: 100%
   bottom: 0
   left: 0
@@ -30,17 +31,13 @@
     top: 0
     header
       top: 0
-  .browser
+  ul.root, ol.artists, ol.albums
+    @extend .list
+  ol.songs
+    @extend .song-list
+  div
     position: absolute
+    width: $interface-width
     height: 100%
-    @include transition(left 0.25s ease-in-out)
-    ul.root, ol.artists, ol.albums
-      @extend .list
-    ol.songs
-      @extend .song-list
-    div
-      position: absolute
-      width: $interface-width
-      height: 100%
-      padding: 2.5em 0 0
-      overflow: auto
+    padding: 2.5em 0 0
+    overflow: auto
diff --git a/public/panels/root.html b/public/panels/root.html
new file mode 100644
index 0000000..edea935
--- /dev/null
+++ b/public/panels/root.html
@@ -0,0 +1,5 @@
+<ul class="root">
+  <li ng-repeat="entry in currentPane().entries">
+    <a href="#" ng-click="newPane(entry.path, {})">{{ entry.label }}</a>
+  </li>
+</ul>