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 JS refactoring. Split Pane control out.

Browse Source
This commit is contained in:
Dan Barber 2013-12-13 16:20:44 +00:00
parent 7efe3ad366
commit f15605e4c1
3 changed files with 63 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
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', currentPane: 1 });
this.browser = new can.Model({ title: 'Library', currentPane: 0 });
element.html(
can.view('views/library.ejs', { browser: this.browser })
);
@ -19,20 +19,26 @@ var Library = can.Control.extend({
},
nextPane: function() {
this.browser.attr('currentPane', this.browser.attr('currentPane') + 1);
var currentPane = this.browser.attr('currentPane');
this.browser.attr('currentPane', currentPane + 1);
},
previousPane: function() {
this.browser.attr('currentPane', this.browser.attr('currentPane') - 1);
var currentPane = this.browser.attr('currentPane');
this.browser.attr('currentPane', currentPane - 1);
},
setTitle: function(title) {
this.browser.attr('title', title);
},
addPane: function(data) {
var newElement = document.createElement('div');
$('.browser', this.element).append(newElement);
data['pos'] = this.panes.length + 1;
data['pos'] = this.panes.length;
var newPane = new Pane(newElement, data);
this.panes.push(newPane);
this.browser.attr('title', newPane.title);
this.setTitle(newPane.title);
this.nextPane();
},
@ -52,51 +58,3 @@ var Library = can.Control.extend({
}
});
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);
},
renderPane: {
root: function() {
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';
}
},
renderCallback: function(type) {
return function(items) {
$(this.element).html(
can.view('views/library/' + type + '.ejs', { items: items })
);
}.bind(this)
}
});

51
assets/js/controls/pane.js Normal file
View File

@ -0,0 +1,51 @@
var Pane = can.Control.extend({
init: function(element, data) {
this.element = element;
this.element.addClass(data.show);
this.data = data;
this.setPosition(data.pos);
this.renderPane[data.show].call(this, data);
},
setPosition: function(pos) {
var left = pos * 20;
this.element.css('left', left + 'em');
},
renderPane: {
root: function() {
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';
}
},
renderCallback: function(type) {
return function(items) {
$(this.element).html(
can.view('views/library/' + type + '.ejs', { items: items }, { formatLength: timeHelpers.formatLength })
);
}.bind(this)
}
});

2
public/views/library.ejs
View File

@ -5,7 +5,7 @@
<div class="browser"
data-current-pane="<%= browser.attr('currentPane') %>"
style="left: -<%= (browser.attr('currentPane') - 1) * 20 %>em;">
style="left: -<%= browser.attr('currentPane') * 20 %>em;">
<div class="root" style="left: 0;"></div>