danbarber/mpd-client
1
0
Fork 0
mirror of https://github.com/danbee/mpd-client synced 2025-03-04 08:39:09 +00:00
Code Issues Releases Wiki Activity

More refactoring.

Browse Source
This commit is contained in:
Dan Barber 2013-12-13 15:27:31 +00:00
parent 5fcde8c60b
commit 187b0e0277
3 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/css/library.css.sass
View File

@ -24,12 +24,6 @@
position: absolute position: absolute
height: 100% height: 100%
@include transition(left 0.25s ease-in-out) @include transition(left 0.25s ease-in-out)
&[data-pane="2"]
left: -$interface-width
&[data-pane="3"]
left: -$interface-width * 2
&[data-pane="4"]
left: -$interface-width * 3
ol, ul ol, ul
@extend .list @extend .list
div div
@ -38,11 +32,3 @@
height: 100% height: 100%
padding: 2.5em 0 0 padding: 2.5em 0 0
overflow: auto overflow: auto
&:first-child
left: 0
&:nth-child(2)
left: $interface-width
&:nth-child(3)
left: $interface-width * 2
&:nth-child(4)
left: $interface-width * 3

22
assets/js/controls/library.js
View File

@ -2,7 +2,7 @@ var Library = can.Control.extend({
init: function(element, options) { init: function(element, options) {
this.element = element; this.element = element;
this.browser = new can.Model({ title: 'Library', pane: 1 }); this.browser = new can.Model({ title: 'Library', currentPane: 1 });
element.html( element.html(
can.view('views/library.ejs', { browser: this.browser }) can.view('views/library.ejs', { browser: this.browser })
); );
@ -19,19 +19,20 @@ var Library = can.Control.extend({
}, },
nextPane: function() { nextPane: function() {
this.browser.attr('pane', this.browser.attr('pane') + 1); this.browser.attr('currentPane', this.browser.attr('currentPane') + 1);
}, },
previousPane: function() { previousPane: function() {
this.browser.attr('pane', this.browser.attr('pane') - 1); this.browser.attr('currentPane', this.browser.attr('currentPane') - 1);
}, },
addPane: function(data) { addPane: function(data) {
var newElement = document.createElement('div'); var newElement = document.createElement('div');
newElement.className = data.show;
$('.browser', this.element).append(newElement); $('.browser', this.element).append(newElement);
data['pos'] = this.panes.length + 1;
var newPane = new Pane(newElement, data); var newPane = new Pane(newElement, data);
this.panes.push(newPane); this.panes.push(newPane);
this.browser.attr('title', newPane.title);
this.nextPane(); this.nextPane();
}, },
@ -56,6 +57,9 @@ var Pane = can.Control.extend({
init: function(element, data) { init: function(element, data) {
this.element = element; this.element = element;
this.element.addClass(data.show);
var left = (data.pos - 1) * 20;
this.element.css('left', left + 'em');
this.data = data; this.data = data;
this.renderPane[data.show].call(this, data); this.renderPane[data.show].call(this, data);
}, },
@ -65,15 +69,25 @@ var Pane = can.Control.extend({
this.element.html( this.element.html(
can.view('views/library/root.ejs', {}) can.view('views/library/root.ejs', {})
); );
this.title = 'Library';
}, },
artists: function(data) { artists: function(data) {
Artist.findAll({}, this.renderCallback('artists')); Artist.findAll({}, this.renderCallback('artists'));
this.title = 'Artists';
}, },
albums: function(data) { albums: function(data) {
Album.findAll({ artist: data.artist }, this.renderCallback('albums')); Album.findAll({ artist: data.artist }, this.renderCallback('albums'));
if (data.artist)
this.title = data.artist;
else
this.title = 'Albums';
}, },
songs: function(data) { songs: function(data) {
Song.findAll({ artist: data.artist, album: data.album }, this.renderCallback('songs')); Song.findAll({ artist: data.artist, album: data.album }, this.renderCallback('songs'));
if (data.album)
this.title = data.album;
else
this.title = 'Songs';
} }
}, },

10
public/views/library.ejs
View File

@ -2,7 +2,11 @@
<a class="close" href="#!">Close</a> <a class="close" href="#!">Close</a>
<h1><%= browser.attr('title') %></h1> <h1><%= browser.attr('title') %></h1>
</header> </header>
<div class="browser" data-pane="<%= browser.attr('pane') %>">
<div class="root"></div> <div class="browser"
<%# can.view.render('views/library/root.ejs', {}) %> data-current-pane="<%= browser.attr('currentPane') %>"
style="left: -<%= (browser.attr('currentPane') - 1) * 20 %>em;">
<div class="root" style="left: 0;"></div>
</div> </div>