diff options
| -rw-r--r-- | static/icons/delete.png | bin | 0 -> 715 bytes | |||
| -rw-r--r-- | static/index.html | 12 | ||||
| -rw-r--r-- | static/playlist.js | 18 | ||||
| -rw-r--r-- | static/style.css | 14 |
4 files changed, 33 insertions, 11 deletions
diff --git a/static/icons/delete.png b/static/icons/delete.png Binary files differnew file mode 100644 index 0000000..08f2493 --- /dev/null +++ b/static/icons/delete.png diff --git a/static/index.html b/static/index.html index 587b0b2..c337499 100644 --- a/static/index.html +++ b/static/index.html @@ -34,8 +34,16 @@ </ul> </div> <div id="playlist-tab"> - <ul id="playlist"> - </ul> + <table id="playlist"> + <thead> + <tr> + <th>Name</th> + <th> </th> + </tr> + </thead> + <tbody> + </tbody> + </table> </div> </div> </div> diff --git a/static/playlist.js b/static/playlist.js index 373098c..18403c4 100644 --- a/static/playlist.js +++ b/static/playlist.js @@ -9,26 +9,31 @@ $(function(){ }); window.items = new Playlist; PlaylistItemView = Backbone.View.extend({ - tagName: 'li', - template: Handlebars.compile('<a href="#">{{trackname}}</a>'), + tagName: 'tr', + template: 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>'), render: function() { var model = this.model; var item = model.toJSON(); var el = $(this.el); el.html(this.template(item)); el.attr('id', 'cid-' + model.cid); - $(this.el, 'a').click(function() { + $('a.play', this.el).click(function() { while(model.collection.indexOf(model) > 0) { model.collection.remove(model.collection.at(0)); } playsound(model); return false; }); + $('a.delete', this.el).click(function() { + //var model = items.getByCid(model.cid); + items.remove(model); + return false; + }); return this; } }); PlaylistView = Backbone.View.extend({ - el: $('#playlist'), + el: $('#playlist tbody'), initialize: function() { items.bind('add', this.addOne, this); items.bind('remove', this.removeOne, this); @@ -53,6 +58,11 @@ $(function(){ removeOne: function(item) { $('#playlist #cid-' + item.cid).remove(); item.destroy(); + items.each(this.refreshOrder); + }, + refreshOrder: function(item) { + item.attributes.order_id = items.indexOf(item)+1; + item.save(); }, addAll: function() { items.each(this.addOne); diff --git a/static/style.css b/static/style.css index 09d9e87..1fd114b 100644 --- a/static/style.css +++ b/static/style.css @@ -4,10 +4,14 @@ #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 li { background-repeat: no-repeat; padding-left: 20px; } +#directory-list .dir, #directory-list .track, #playlist a.play { 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 .nocache, #playlist .nocache { background-image: url('/static/icons/music_nocache.png'); } -#directory-list, #playlist { list-style-type: none; } -#playlist .playing { background-image: url('/static/icons/music_playing.png'); } -#playlist .loading { background-image: url('/static/icons/loading.gif'); } +#directory-list .nocache, #playlist .nocache a.play { background-image: url('/static/icons/music_nocache.png'); } +#directory-list { 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%; } +#playlist tr td:first-child { width: 100%; } +#playlist td { padding: .3em; background: white; border: 1px solid #ddd; } +#playlist th { background: #ddd; text-align: left; padding: .5em; } |
