summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/index.html6
-rw-r--r--static/init.js21
-rw-r--r--static/style.css13
3 files changed, 34 insertions, 6 deletions
diff --git a/static/index.html b/static/index.html
index be4476e..b2bb27e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -29,6 +29,7 @@
<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>
</ul>
<div id="directory-tab">
<ul id="directory-list">
@@ -46,6 +47,11 @@
</tbody>
</table>
</div>
+ <div id="search-tab">
+ <input type="text" id="search_box" />
+ <ul id="search-results">
+ </ul>
+ </div>
</div>
</div>
</body>
diff --git a/static/init.js b/static/init.js
index 2cdd84b..2ef7c9b 100644
--- a/static/init.js
+++ b/static/init.js
@@ -62,6 +62,21 @@ function load_directory(dir_id, dir_item) {
});
}
+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);
+ });
+}
+
$(document).ready(function() {
$('#tabs').tabs();
preload_images();
@@ -81,4 +96,10 @@ $(document).ready(function() {
playlist.hintnext();
}
});
+ $('#search_box').keypress(function(event) {
+ if(event.keyCode == 13) {
+ var val = $(this).val();
+ $.get('/json/search?q=' + escape(val), search_results, 'json');
+ }
+ });
});
diff --git a/static/style.css b/static/style.css
index 9466b71..3aab5aa 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,14 +1,14 @@
* { padding: 0; margin: 0; }
.ui-tabs-nav li a { font-size: small; }
#progress { margin: .5em 1em; width: 300px; }
-#directory-list, #playlist { font-size: small; }
-#directory-list a, #playlist a { color: inherit; text-decoration: inherit; }
-#directory-list a:hover, #playlist a:hover { text-decoration: underline; }
-#directory-list .dir, #directory-list .track, #playlist a.play { background-repeat: no-repeat; padding-left: 20px; }
+#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 { background-image: url('/static/icons/music.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 { list-style-type: none; }
+#directory-list, #search-results { list-style-type: none; }
#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%; }
@@ -16,3 +16,4 @@
#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; }
+#search-results { margin-top: 1em; }