Browser panes refactor.

assets/css/common.css.sass

@@ -14,6 +14,7 @@ body
   height: 100%
   max-width: 320px
   margin: 0 auto
+  overflow: hidden
 
 #content
   height: 100%

assets/css/library.css.sass

@@ -1,21 +1,25 @@
 #library
   background: white
-  display: none
   position: absolute
-  top: 0
+  top: 100%
-  padding: 2.5em 0 0
   height: 100%
   width: 100%
   z-index: 2
-  &.show
+  @include transition(top 0.35s ease-in-out)
-    display: block
   header
+    top: 100%
+    z-index: 1
     @extend .header
+    @include transition(top 0.35s ease-in-out)
     a.close
       position: absolute
       right: 10px
       top: 8px
       @include button
+  &.show
+    top: 0
+    header
+      top: 0
   .browser
     position: absolute
     height: 100%
@@ -26,11 +30,14 @@
       left: -$interface-width * 2
     &[data-pane="4"]
       left: -$interface-width * 3
-    ul, ol
+    ol, ul
+      @extend .list
+    div
       position: absolute
       width: $interface-width
-      @extend .list
       height: 100%
+      padding: 2.5em 0 0
+      overflow: auto
       &:first-child
         left: 0
       &:nth-child(2)

assets/js/controls/library.js

@@ -2,11 +2,11 @@ var Library = can.Control.extend({
 
   init: function(element, options) {
     this.element = element;
-    this.browser = new can.Model({ pane: 1 });
+    this.browser = new can.Model({ title: 'Library', pane: 1 });
     element.html(
       can.view('views/library.ejs', { browser: this.browser })
     );
-    var rootControl = new Pane('#library .root', { show: 'root' })
+    var rootControl = new Pane('#library .root', { show: 'root' });
     this.panes = new can.List([rootControl]);
   },
 
@@ -26,11 +26,27 @@ var Library = can.Control.extend({
     this.browser.attr('pane', this.browser.attr('pane') - 1);
   },
 
+  addPane: function(data) {
+    var newElement = document.createElement('div');
+    newElement.className = data.show;
+    $('.browser', this.element).append(newElement);
+    var newPane = new Pane(newElement, data);
+    this.panes.push(newPane);
+    this.nextPane();
+  },
+
   'a.close click': 'hide',
 
+  'route': function(data) {
+    this.hide();
+  },
+
   ':page route': function(data) {
     if (data.page == 'library') {
       this.show();
+      if (data.show) {
+        this.addPane(data);
+      }
     }
   }
 
@@ -38,7 +54,7 @@ var Library = can.Control.extend({
 
 var Pane = can.Control.extend({
 
-  init: function(element, data, pane) {
+  init: function(element, data) {
     this.element = element;
     this.data = data;
     this.renderPane[data.show].call(this, data);
@@ -51,13 +67,13 @@ var Pane = can.Control.extend({
       );
     },
     artists: function(data) {
-      Artist.findAll({}, renderCallback('artists'));
+      Artist.findAll({}, this.renderCallback('artists'));
     },
     albums: function(data) {
-      Album.findAll({ artist: data.artist }, renderCallback('albums'));
+      Album.findAll({ artist: data.artist }, this.renderCallback('albums'));
     },
     songs: function(data) {
-      Song.findAll({ artist: data.artist, album: data.album }, renderCallback('songs'));
+      Song.findAll({ artist: data.artist, album: data.album }, this.renderCallback('songs'));
     }
   },
 

public/views/library.ejs

@@ -1,6 +1,6 @@
 <header>
   <a class="close" href="#!">Close</a>
-  <h1>Library</h1>
+  <h1><%= browser.attr('title') %></h1>
 </header>
 <div class="browser" data-pane="<%= browser.attr('pane') %>">
   <div class="root"></div>

public/views/library/albums.ejs

@@ -1,11 +1,11 @@
 <ol class="albums">
-  <% list(albums, function(album) { %>
+  <% list(items, function(album) { %>
     <li id="<%= album.attr('id') %>">
       <%== can.route.link(album.attr('title'), {
         page: 'library',
         show: 'songs',
         artist: album.attr('artist'),
-        album: album.attr('album')
+        album: album.attr('title')
       }) %>
     </li>
   <% }) %>

public/views/library/artists.ejs

@@ -1,5 +1,5 @@
 <ol class="artists">
-  <% list(artists, function(artist) { %>
+  <% list(items, function(artist) { %>
     <li id="<%= artist.attr('id') %>">
       <%== can.route.link(artist.attr('name'), {
         page: 'library',

public/views/library/songs.ejs

@@ -1,5 +1,5 @@
 <ol class="songs">
-  <% list(songs, function(song) { %>
+  <% list(items, function(song) { %>
     <li id="<%= song.attr('id') %>">
       <%= song.attr('title') %>
     </li>