summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/index.html5
-rw-r--r--static/init.js126
-rw-r--r--static/nocover.jpgbin0 -> 3339 bytes
-rw-r--r--static/style.css12
-rw-r--r--static/templates.js3
5 files changed, 129 insertions, 17 deletions
diff --git a/static/index.html b/static/index.html
index b333ec9..635a0a0 100644
--- a/static/index.html
+++ b/static/index.html
@@ -30,6 +30,7 @@
<li><a href="#playlist-tab" accesskey="p"><span class="accessor">P</span>laylist</a></li>
<li><a href="#search-tab" accesskey="s"><span class="accessor">S</span>earch</a></li>
<li><a href="#directory-tab" accesskey="d"><span class="accessor">D</span>irectories</a></li>
+ <li><a href="#albums-tab" accesskey="a"><span class="accessor">A</span>lbums</a></li>
</ul>
<div id="playlist-tab">
<table class="track-table">
@@ -81,6 +82,10 @@
</tbody>
</table>
</div>
+ <div id="albums-tab">
+ <div id="albums-list">
+ </div>
+ </div>
</div>
</div>
</body>
diff --git a/static/init.js b/static/init.js
index 941d798..e75f173 100644
--- a/static/init.js
+++ b/static/init.js
@@ -67,7 +67,7 @@ function load_directory(dir_id, dir_item) {
track_list.selectable({
filter: 'tr',
stop: function(event, ui) {
- $('#directory-add').prop('disabled', $(track_list, ' .ui-selected').length == 0);
+ $('#directory-add').prop('disabled', track_list.find('.ui-selected').length == 0);
return true;
}
});
@@ -75,26 +75,119 @@ function load_directory(dir_id, dir_item) {
$('#directory-add').prop('disabled', true);
}
-function search_results(data) {
- var results = $('#search-results');
- results.empty();
- $.each(data, function(i, track) {
- var item = $(templates.directory_item(track));
- item.data('track', track);
- results.append(item);
+function set_tracks(container, select, click) {
+ return (function(tracks) {
+ container.empty();
+ $.each(tracks, function(i, track) {
+ var el = $(templates.directory_item(track));
+ el.data('track', track);
+ if(click !== undefined) {
+ el.find('a').click(function(event) {
+ click(event, track);
+ });
+ }
+ container.append(el);
+ });
+ if(select !== undefined) {
+ container.selectable({
+ filter: 'tr',
+ stop: function(event, ui) {
+ select.prop('disabled', $(container, ' .ui-selected').length == 0);
+ return true;
+ }
+ });
+ select.prop('disabled', true);
+ }
+ });
+}
+
+function show_album(album) {
+ var tabs = $('#tabs');
+ var tabid = '#album-tab-' + album.id;
+ var tab = $(tabid);
+ if(tab.length > 0) {
+ tabs.tabs('select', tab.index()-1);
+ return;
+ }
+ var tabli = $(templates.album_tabli({tabid: tabid, album: album}));
+ tabs.find('.ui-tabs-nav').append(tabli);
+ var tab = $(templates.album_tab(album));
+ tabs.append(tab).tabs('refresh');
+ var tracks = $(tabid + '-table tbody');
+ var addbutton = $(tab).find('input');
+ addbutton.click(function() {
+ var tracks = $(tabid + '-table tbody tr.ui-selected');
+ tracks.each(function(i, item) {
+ var track = $(item).data('track');
+ playlist.add(track);
+ });
});
- results.selectable({
- filter: 'tr',
- stop: function(event, ui) {
- $('#search-add').prop('disabled', results.children().length == 0);
- return true;
+ $.get('/json/album/' + album.id, set_tracks(tracks, addbutton), 'json');
+ tabs.tabs('select', tab.index()-1);
+}
+
+function add_albums(data) {
+ var div = $('#albums-list');
+ $.each(data, function(i, album) {
+ var el = $(templates.albums_item(album));
+ el.find('a').click(function() {
+ show_album(album);
+ return false;
+ });
+ div.append(el);
+ });
+}
+
+function setup_album_scrolling() {
+ $('#albums-list').scroll(function(event) {
+ if(albums_end)
+ return;
+ var scrolltop = event.target.scrollTop;
+ var scrollheight = event.target.scrollHeight;
+ var height = $(event.target).height();
+ var remaining = (scrollheight - height) - scrolltop;
+ if(remaining < 150 && !albums_loading) {
+ load_albums();
}
});
- $('#search-add').prop('disabled', true);
+}
+
+var albums_page = 0;
+var albums_loading = false;
+var albums_end = false;
+function load_albums(initiate_scrolling) {
+ var page = albums_page;
+ albums_page++;
+ albums_loading = true;
+ $.get('/json/albums/' + page, function(data) {
+ if(data.length > 0)
+ add_albums(data);
+ else
+ albums_end = true;
+ if(initiate_scrolling == true)
+ setup_album_scrolling();
+ albums_loading = false;
+ }, 'json');
}
$(document).ready(function() {
- $('#tabs').tabs();
+ var albums_initially_loaded = false;
+ $('#tabs').tabs({
+ activate: function(event, ui) {
+ if(ui.newPanel.selector == '#albums-tab') {
+ if(!albums_initially_loaded) {
+ load_albums(true);
+ albums_initially_loaded = true;
+ }
+ }
+ }
+ });
+ // Shamlessly stolen from the tabs manipulation example: http://jqueryui.com/tabs/#manipulation
+ $('#tabs span.ui-icon-close').live('click', function() {
+ var panelid = $(this).closest('li').remove().attr('aria-controls');
+ $('#' + panelid).remove();
+ $('#tabs').tabs('refresh');
+ });
preload_images();
load_directory(0);
$('#progress').slider();
@@ -115,12 +208,11 @@ $(document).ready(function() {
$('#search_box').keypress(function(event) {
if(event.keyCode == 13) {
var val = $(this).val();
- $.get('/json/search?q=' + encodeURIComponent(val), search_results, 'json');
+ $.get('/json/search?q=' + encodeURIComponent(val), set_tracks($('#search-results'), $('#search-add')), 'json');
}
});
$('#search-add').click(function(event) {
var tracks = $('#search-results tr.ui-selected');
- console.log(tracks);
tracks.each(function(i, item) {
var track = $(item).data('track');
playlist.add(track);
diff --git a/static/nocover.jpg b/static/nocover.jpg
new file mode 100644
index 0000000..59f725c
--- /dev/null
+++ b/static/nocover.jpg
Binary files differ
diff --git a/static/style.css b/static/style.css
index 34579f7..e7c1d85 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,7 +1,12 @@
* { padding: 0; margin: 0; }
+html, body, #content { height: 100%; }
+#tabs { height: 90%; }
+
.ui-tabs-nav li a { font-size: small; }
+#tabs #albums-tab.ui-tabs-panel { padding: 0; }
#progress { margin: .5em 1em; width: 300px; }
#tabs { font-size: 100%; }
+
.accessor { text-decoration: underline; }
.track-table { width: 100%; }
@@ -22,3 +27,10 @@
#search_box { border: 1px solid #888; border-radius: 10px; padding: 0 .3em; }
#search-results { margin-top: 1em; }
+
+#albums-tab { height: 95%; }
+#albums-list { overflow: auto; max-height: 100%; }
+.album-tile { width: 128px; display: inline-block; vertical-align: top; padding: 1em; }
+.album-tile a { text-decoration: none; }
+.album-tile a:hover { text-decoration: underline; }
+.album-tile .album-name { font-size: x-small; }
diff --git a/static/templates.js b/static/templates.js
index d0e7057..67be2e0 100644
--- a/static/templates.js
+++ b/static/templates.js
@@ -13,4 +13,7 @@ var templates = new (function Templates() {
this.directory_item = Handlebars.compile('<tr id="{{type}}-{{id}}"><td><a href="#" class="{{type}}{{#unless cache}} nocache{{/unless}}">{{trackname}}</a></td><td>{{metadata.artist}}</td><td>{{metadata.album}}</td></tr>');
// The playlist automatically adds a tr tag.
this.playlist_item = Handlebars.compile('<td><a href="#" class="play">{{trackname}}</a></td><td><a href="#">{{metadata.artist}}</a></td><td><a href="#">{{metadata.album}}</a></td><td class="track-buttons"><a href="#" class="delete"><img src="/static/icons/delete.png" alt="Delete" title="Delete" /></a></td>');
+ this.albums_item = Handlebars.compile('<div class="album-tile" id="albums-album-{{id}}"><a href="#album-tab-{{id}}" title="{{name}} by {{artist.name}}"><img src="/album-cover/{{id}}.jpg" alt="{{name}} by {{artist.name}}" /><br /><span class="album-name">{{name}}</span></div>');
+ this.album_tab = Handlebars.compile('<div id="album-tab-{{id}}"><input type="button" value="Add selected" /><table id="album-tab-{{id}}-table" class="track-table"><tbody><tr><td><img src="/static/icons/loading.gif" alt="Loading..." /></td></tr></tbody></table></div>');
+ this.album_tabli = Handlebars.compile('<li><a href="{{tabid}}">Album: {{album.name}}</a> <span class="ui-icon ui-icon-close">Remove tab</span></li>');
})();