Implement back button.

assets/javascripts/controllers/library.controller.js

@@ -1,11 +1,14 @@
 mpdClient.controller('library', function ($scope, api) {
   $scope.show = false
 
+  $scope.title = 'Library'
+
   $scope.$on('library:show', function () { $scope.show = true })
 
   $scope.hide = function () { $scope.show = false }
 
   var rootPane = {
+    path: '/root',
     title: 'Library',
     entries: [
       { label: 'Artists', path: '/artists' },
@@ -26,12 +29,23 @@ mpdClient.controller('library', function ($scope, api) {
 
   $scope.newPane = function (path, params, queryParams) {
     $scope.panes.push({
+      path: path,
       title: params.title,
       entries: api.getItems(path).query(queryParams)
     })
 
     $scope.currentPaneIndex += 1
-
+    $scope.title = params.title
     $scope.currentPanelTemplate = 'panels' + path + '.html'
   }
+
+  $scope.back = function() {
+    lastPane = $scope.panes.pop()
+
+    currentPane = $scope.panes[$scope.panes.length - 1]
+
+    $scope.currentPaneIndex -= 1
+    $scope.title = currentPane.title
+    $scope.currentPanelTemplate = 'panels' + currentPane.path + '.html'
+  }
 })

assets/javascripts/views/library.html

@@ -1,7 +1,8 @@
 <div id="library" ng-controller="library" ng-class="{ show: show }">
   <header>
+    <a class="back" href="#" ng-click="back()" ng-if="currentPaneIndex > 0">Back</a>
     <a class="close" href="#" ng-click="hide()">Close</a>
-    <h1>Library</h1>
+    <h1>{{ title }}</h1>
   </header>
   <ng-include src="currentPanelTemplate"></ng-include>
 </div>