diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/index.html | 6 | ||||
| -rw-r--r-- | static/init.js | 21 | ||||
| -rw-r--r-- | static/style.css | 13 |
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; } |