summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/index.html64
-rw-r--r--static/init.js37
-rw-r--r--static/playlist.js5
-rw-r--r--static/style.css31
-rw-r--r--static/templates.js19
5 files changed, 94 insertions, 62 deletions
diff --git a/static/index.html b/static/index.html
index b2bb27e..8520468 100644
--- a/static/index.html
+++ b/static/index.html
@@ -27,30 +27,58 @@
</div>
<div id="tabs">
<ul>
- <li><a href="#directory-tab">Directories</a></li>
- <li><a href="#playlist-tab">Playlist</a></li>
- <li><a href="#search-tab">Search</a></li>
+ <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>
</ul>
- <div id="directory-tab">
- <ul id="directory-list">
- </ul>
- </div>
<div id="playlist-tab">
- <table id="playlist">
- <thead>
- <tr>
- <th>Name</th>
- <th>&nbsp;</th>
- </tr>
- </thead>
- <tbody>
- </tbody>
+ <table class="track-table">
+ <thead>
+ <tr>
+ <th>Title</th>
+ <th>Artist</th>
+ <th>Album</th>
+ <th>&nbsp;</th>
+ </tr>
+ </thead>
+ <tbody id="playlist">
+ </tbody>
</table>
</div>
<div id="search-tab">
<input type="text" id="search_box" />
- <ul id="search-results">
- </ul>
+ <span>
+ <input type="button" id="search-add" value="Add selected" />
+ </span>
+ <table class="track-table">
+ <thead>
+ <tr>
+ <th>Title</th>
+ <th>Artist</th>
+ <th>Album</th>
+ </tr>
+ </thead>
+ <tbody id="search-results">
+ <tr>
+ <td colspan="3" style="font-style: italic">Use the search box above to find music.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div id="directory-tab">
+ <table id="directory-table" class="track-table">
+ <thead>
+ <tr>
+ <th>Title</th>
+ <th>Artist</th>
+ <th>Album</th>
+ </tr>
+ </thead>
+ <tbody id="directory-list">
+ <tr>
+ </tr>
+ </tbody>
+ </table>
</div>
</div>
</div>
diff --git a/static/init.js b/static/init.js
index 2ef7c9b..901aa1a 100644
--- a/static/init.js
+++ b/static/init.js
@@ -28,21 +28,19 @@ function load_directory(dir_id, dir_item) {
var dir_list = $('#directory-list');
dir_list.html('');
if(dir_item && dir_item.parent) {
- dir_list.append($('<li></li>')
- .addClass('dir')
+ dir_list.append($('<tr></tr>').append($('<td></td>').attr('colspan', 3)
.append($('<a></a>')
+ .addClass('dir')
.attr('href', '#')
.text('..')
.click(function() {
load_directory(dir_item.parent.id, dir_item.parent);
return false;
})
- )
+ ))
);
}
$.each(data, function(i, item) {
- if(item.type == "track")
- item.nocache = !item.cache;
var el = $(templates.directory_item(item));
var id = el.attr('id');
if(item.type == "track") {
@@ -66,15 +64,18 @@ function search_results(data) {
var results = $('#search-results');
results.empty();
$.each(data, function(i, track) {
- var li = $(templates.directory_item(track));
- console.log(li);
- $(li, 'a').click(function() {
- console.log('clicked');
- playlist.add(track);
- return false;
- });
- results.append(li);
+ var item = $(templates.directory_item(track));
+ item.data('track', track);
+ results.append(item);
+ });
+ results.selectable({
+ filter: 'tr',
+ stop: function(event, ui) {
+ $('#search-add').prop('disabled', results.children().length == 0);
+ return true;
+ }
});
+ $('#search-add').prop('disabled', true);
}
$(document).ready(function() {
@@ -99,7 +100,15 @@ $(document).ready(function() {
$('#search_box').keypress(function(event) {
if(event.keyCode == 13) {
var val = $(this).val();
- $.get('/json/search?q=' + escape(val), search_results, 'json');
+ $.get('/json/search?q=' + encodeURIComponent(val), search_results, '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);
+ });
+ }).prop('disabled', true);
});
diff --git a/static/playlist.js b/static/playlist.js
index 45a4a07..70149b3 100644
--- a/static/playlist.js
+++ b/static/playlist.js
@@ -51,12 +51,9 @@ $(function(){
addOne: function(item) {
var view = new PlaylistItemView({model: item});
var el = view.render().el;
- if(item.attributes.nocache)
- $(el).addClass('nocache');
$('#playlist').append(el);
- if(item.attributes.cache !== undefined || item.attributes.nocache !== undefined) {
+ if(item.attributes.cache !== undefined) {
delete item.attributes.cache;
- delete item.attributes.nocache;
item.save();
}
},
diff --git a/static/style.css b/static/style.css
index 3aab5aa..34579f7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,19 +1,24 @@
* { padding: 0; margin: 0; }
.ui-tabs-nav li a { font-size: small; }
#progress { margin: .5em 1em; width: 300px; }
-#directory-list, #playlist, #search-results { font-size: small; }
-#directory-list a, #playlist a, #search-results a { color: inherit; text-decoration: inherit; }
-#directory-list a:hover, #playlist a:hover, #search-results a:hover { text-decoration: underline; }
-#directory-list .dir, #directory-list .track, #playlist a.play, #search-results .track { background-repeat: no-repeat; padding-left: 20px; }
-#directory-list .dir { background-image: url('/static/icons/folder.png'); }
-#directory-list .track, #search-results .track { background-image: url('/static/icons/music.png'); }
-#directory-list .nocache, #playlist .nocache a.play { background-image: url('/static/icons/music_nocache.png'); }
-#directory-list, #search-results { list-style-type: none; }
+#tabs { font-size: 100%; }
+.accessor { text-decoration: underline; }
+
+.track-table { width: 100%; }
+.track-table tr:nth-child(odd) td { background: #eee; }
+.track-table tr:nth-child(even) td { background: #ddd; }
+.track-table tr.ui-selected td { background-color: #fea; }
+.track-table tr:hover td { background-color: #fbb; }
+
+.track-table a { color: inherit; text-decoration: inherit; background-repeat: no-repeat; padding-left: 20px; display: block; }
+.track-table a:hover { text-decoration: underline; }
+.track-table .dir { background-image: url('/static/icons/folder.png'); }
+.track-table .track { background-image: url('/static/icons/music.png'); }
+.track-table .track.nocache { background-image: url('/static/icons/music_nocache.png'); }
+
#playlist .playing a.play { background-image: url('/static/icons/music_playing.png'); }
#playlist .loading a.play { background-image: url('/static/icons/loading.gif'); }
-#playlist { border-collapse: collapse; background: white; width: 100%; }
-#playlist tr td:first-child { width: 100%; }
-#playlist td { padding: .3em; background: white; border: 1px solid #ddd; border-width: 0 1px; }
-#playlist tr:last-child td { border-bottom-width: 1px; }
-#playlist th { background: #ddd; text-align: left; padding: .5em; }
+#playlist tr td.track-buttons { width: 1em; }
+
+#search_box { border: 1px solid #888; border-radius: 10px; padding: 0 .3em; }
#search-results { margin-top: 1em; }
diff --git a/static/templates.js b/static/templates.js
index f1d6bed..d0e7057 100644
--- a/static/templates.js
+++ b/static/templates.js
@@ -3,21 +3,14 @@ Handlebars.registerHelper('trackname', function() {
if(!item.metadata)
return item.name;
- var s = '';
if(item.metadata.title)
- s = item.metadata.title;
- if(item.metadata.artist) {
- if(s.length) {
- s = ' - ' + s;
- s = item.metadata.artist + s;
- }
- }
- if(!s.length)
- s = item.name;
- return s;
+ return item.metadata.title;
+ else
+ return item.name;
});
var templates = new (function Templates() {
- this.directory_item = Handlebars.compile('<li id="{{type}}-{{id}}" class="{{type}}{{#if nocache}} nocache{{/if}}"><a href="#">{{trackname}}</a>');
- this.playlist_item = Handlebars.compile('<td><a href="#" class="play">{{trackname}}</a></td><td><a href="#" class="delete"><img src="/static/icons/delete.png" alt="Delete" title="Delete" /></a></td>');
+ 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>');
})();
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 01:29:31 +0100