From 60479a8d04ec6dc604af65c3364990f4977240f7 Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Fri, 10 Jan 2014 17:01:34 +0000 Subject: [PATCH] Panel switching works. --- assets/css/library.css.sass | 9 ++++- assets/js/components/library.js | 27 +++++++++++--- assets/js/components/panel-albums.js | 39 ++++++++++++++++++++ assets/js/components/panel-artists.js | 31 ++++++++++++++++ assets/js/components/panel-root.js | 26 +++++++++++++ assets/js/components/panel.js | 27 ++++++++++---- public/views/library.mustache | 4 +- public/views/library/root.mustache | 3 -- public/views/{library => panels}/albums.ejs | 0 public/views/panels/albums.mustache | 10 +++++ public/views/{library => panels}/artists.ejs | 0 public/views/panels/artists.mustache | 10 +++++ public/views/{library => panels}/root.ejs | 0 public/views/panels/root.mustache | 10 +++++ public/views/{library => panels}/songs.ejs | 0 15 files changed, 178 insertions(+), 18 deletions(-) create mode 100644 assets/js/components/panel-albums.js create mode 100644 assets/js/components/panel-artists.js create mode 100644 assets/js/components/panel-root.js delete mode 100644 public/views/library/root.mustache rename public/views/{library => panels}/albums.ejs (100%) create mode 100644 public/views/panels/albums.mustache rename public/views/{library => panels}/artists.ejs (100%) create mode 100644 public/views/panels/artists.mustache rename public/views/{library => panels}/root.ejs (100%) create mode 100644 public/views/panels/root.mustache rename public/views/{library => panels}/songs.ejs (100%) diff --git a/assets/css/library.css.sass b/assets/css/library.css.sass index b1b914b..27edd8e 100644 --- a/assets/css/library.css.sass +++ b/assets/css/library.css.sass @@ -1,11 +1,15 @@ mpd-library - background: white position: absolute + background: white top: 100% height: 100% width: 100% z-index: 2 @include transition(top 0.35s ease-in-out) + .panels + position: absolute + height: 100% + @include transition(left 0.35s ease-in-out) header top: 100% z-index: 1 @@ -35,9 +39,10 @@ mpd-library @extend .list ol.songs @extend .song-list - mpd-panel + mpd-panel-root, mpd-panel-artists, mpd-panel-albums, mpd-panel-songs position: absolute width: $interface-width height: 100% padding: 2.5em 0 0 overflow: auto + left: calc(attr(depth) * 20em) diff --git a/assets/js/components/library.js b/assets/js/components/library.js index 950018c..c8c9bdd 100644 --- a/assets/js/components/library.js +++ b/assets/js/components/library.js @@ -5,7 +5,11 @@ can.Component.extend({ template: can.view('views/library.mustache'), scope: { - currentPane: 0 + currentDepth: 0, + leftPos: function() { + var ems = - (this.attr('currentDepth') * 20); + return ems + 'em'; + } }, events: { @@ -17,6 +21,15 @@ can.Component.extend({ $(this.element).removeClass('show'); }, + addPanel: function(data) { + var newPanel = can.view.mustache(''); + $('.panels', this.element).append(newPanel); + }, + 'route': function(data) { this.hide(); }, @@ -24,13 +37,17 @@ can.Component.extend({ ':type route': function(data) { if (data.type == 'library') { this.show(); - if (data.pane > this.currentPane) { - this.addPane(data); + if (data.depth > this.scope.currentDepth) { + this.addPanel(data); } - else if (data.pane < this.currentPane) { - this.removePane(data); + else if (data.depth < this.scope.currentDepth) { + this.removePanel(data); } } + }, + + ' showPanel': function(el, ev, data) { + this.scope.attr('currentDepth', data); } } diff --git a/assets/js/components/panel-albums.js b/assets/js/components/panel-albums.js new file mode 100644 index 0000000..fd4b06e --- /dev/null +++ b/assets/js/components/panel-albums.js @@ -0,0 +1,39 @@ +can.Component.extend({ + + tag: 'mpd-panel-albums', + + template: can.view('views/panels/albums.mustache'), + + init: function() { + var self = this; + Album.findAll({ artist: this.scope.artist }, function(data) { + self.scope.attr('items', data); + }); + }, + + scope: { + depth: "@", + artist: "@", + title: function() { + if (this.artist !== undefined) { + return this.artist; + } + else { + return 'Albums'; + } + } + }, + + helpers: { + link: function(item) { + return can.route.link(item.name, { + type: 'library', + show: 'songs', + artist: item.artist, + album: item.title, + depth: +this.depth + 1 + }); + }, + } + +}); diff --git a/assets/js/components/panel-artists.js b/assets/js/components/panel-artists.js new file mode 100644 index 0000000..93ed99e --- /dev/null +++ b/assets/js/components/panel-artists.js @@ -0,0 +1,31 @@ +can.Component.extend({ + + tag: 'mpd-panel-artists', + + template: can.view('views/panels/artists.mustache'), + + init: function() { + var self = this; + Artist.findAll({}, function(data) { + console.log(data); + self.scope.attr('items', data); + self._control.element.trigger('showPanel', self.scope.depth); + }); + }, + + scope: { + depth: "@" + }, + + helpers: { + link: function(item) { + return can.route.link(item.name, { + type: 'library', + show: 'albums', + artist: item.name, + depth: +this.depth + 1 + }); + }, + } + +}); diff --git a/assets/js/components/panel-root.js b/assets/js/components/panel-root.js new file mode 100644 index 0000000..5ab1cd1 --- /dev/null +++ b/assets/js/components/panel-root.js @@ -0,0 +1,26 @@ +can.Component.extend({ + + tag: 'mpd-panel-root', + + template: can.view('views/panels/root.mustache'), + + scope: { + depth: "@", + items: [ + { label: 'Artists', show: 'artists' }, + { label: 'Albums', show: 'albums' }, + { label: 'Songs', show: 'songs' } + ] + }, + + helpers: { + link: function(item) { + return can.route.link(item.label, { + type: 'library', + show: item.show, + depth: +this.depth + 1 + }); + }, + } + +}); diff --git a/assets/js/components/panel.js b/assets/js/components/panel.js index 85a8125..32781e6 100644 --- a/assets/js/components/panel.js +++ b/assets/js/components/panel.js @@ -13,16 +13,17 @@ can.Component.extend({ if (this.show == 'root') return 'Library'; }, fetchItems: { - root: new can.List(['Artists', 'Albums', 'Songs']), + root: [ + { label: 'Artists', show: 'artists' }, + { label: 'Albums', show: 'albums' }, + { label: 'Songs', show: 'songs' } + ], artists: function() { return Artist.findAll({}) }, albums: function() { Album.findAll({ artist: this.artist }) }, songs: function() { Song.findAll({ artist: this.artist, album: this.album }) } } }, - events: { - }, - helpers: { renderItems: function() { return can.view.render('views/library/' + this.show, { @@ -30,10 +31,22 @@ can.Component.extend({ }); }, - rootLink: function(label, show) { - return can.route.link(label, { - type: 'library', show: show + rootLink: function(item) { + console.log(item); + return can.route.link(item.label, { + type: 'library', + show: item.show, + depth: +this.depth + 1 }); + }, + + artistLink: function(item) { + return can.route.link(item.attr('name'), { + page: 'library', + show: 'albums', + depth: console.log(this), + artist: item.attr('name') + }) } } diff --git a/public/views/library.mustache b/public/views/library.mustache index 956a828..ea6c210 100644 --- a/public/views/library.mustache +++ b/public/views/library.mustache @@ -1 +1,3 @@ - +
+ +
diff --git a/public/views/library/root.mustache b/public/views/library/root.mustache deleted file mode 100644 index cbcf85f..0000000 --- a/public/views/library/root.mustache +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/public/views/library/albums.ejs b/public/views/panels/albums.ejs similarity index 100% rename from public/views/library/albums.ejs rename to public/views/panels/albums.ejs diff --git a/public/views/panels/albums.mustache b/public/views/panels/albums.mustache new file mode 100644 index 0000000..7014a63 --- /dev/null +++ b/public/views/panels/albums.mustache @@ -0,0 +1,10 @@ +
+ Close +

{{title}}

+
+ +
    + {{#each items}} +
  1. {{{link .}}}
    2. + {{/each}} +
diff --git a/public/views/library/artists.ejs b/public/views/panels/artists.ejs similarity index 100% rename from public/views/library/artists.ejs rename to public/views/panels/artists.ejs diff --git a/public/views/panels/artists.mustache b/public/views/panels/artists.mustache new file mode 100644 index 0000000..e2c8606 --- /dev/null +++ b/public/views/panels/artists.mustache @@ -0,0 +1,10 @@ +
+ Close +

Artists

+
+ +
    + {{#items}} +
  1. {{{link .}}}
    2. + {{/items}} +
diff --git a/public/views/library/root.ejs b/public/views/panels/root.ejs similarity index 100% rename from public/views/library/root.ejs rename to public/views/panels/root.ejs diff --git a/public/views/panels/root.mustache b/public/views/panels/root.mustache new file mode 100644 index 0000000..8cb8e32 --- /dev/null +++ b/public/views/panels/root.mustache @@ -0,0 +1,10 @@ +
+ Close +

Library

+
+ + diff --git a/public/views/library/songs.ejs b/public/views/panels/songs.ejs similarity index 100% rename from public/views/library/songs.ejs rename to public/views/panels/songs.ejs