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
height: 100%
@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
@extend .list
div
@ -38,11 +32,3 @@
height: 100%
padding: 2.5em 0 0
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) {
this.element = element;
this.browser = new can.Model({ title: 'Library', pane: 1 });
this.browser = new can.Model({ title: 'Library', currentPane: 1 });
element.html(
can.view('views/library.ejs', { browser: this.browser })
);
@ -19,19 +19,20 @@ var Library = can.Control.extend({
},
nextPane: function() {
this.browser.attr('pane', this.browser.attr('pane') + 1);
this.browser.attr('currentPane', this.browser.attr('currentPane') + 1);
},
previousPane: function() {
this.browser.attr('pane', this.browser.attr('pane') - 1);
this.browser.attr('currentPane', this.browser.attr('currentPane') - 1);
},
addPane: function(data) {
var newElement = document.createElement('div');
newElement.className = data.show;
$('.browser', this.element).append(newElement);
data['pos'] = this.panes.length + 1;
var newPane = new Pane(newElement, data);
this.panes.push(newPane);
this.browser.attr('title', newPane.title);
this.nextPane();
},
@ -56,6 +57,9 @@ var Pane = can.Control.extend({
init: function(element, data) {
this.element = element;
this.element.addClass(data.show);
var left = (data.pos - 1) * 20;
this.element.css('left', left + 'em');
this.data = data;
this.renderPane[data.show].call(this, data);
},
@ -65,15 +69,25 @@ var Pane = can.Control.extend({
this.element.html(
can.view('views/library/root.ejs', {})
);
this.title = 'Library';
},
artists: function(data) {
Artist.findAll({}, this.renderCallback('artists'));
this.title = 'Artists';
},
albums: function(data) {
Album.findAll({ artist: data.artist }, this.renderCallback('albums'));
if (data.artist)
this.title = data.artist;
else
this.title = 'Albums';
},
songs: function(data) {
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>
<h1><%= browser.attr('title') %></h1>
</header>
<div class="browser" data-pane="<%= browser.attr('pane') %>">
<div class="root"></div>
<%# can.view.render('views/library/root.ejs', {}) %>
<div class="browser"
data-current-pane="<%= browser.attr('currentPane') %>"
style="left: -<%= (browser.attr('currentPane') - 1) * 20 %>em;">
<div class="root" style="left: 0;"></div>
</div>