From b3f50be6ff9c72ed877f42e896c532b994cc49d1 Mon Sep 17 00:00:00 2001 From: Jon Bergli Heier Date: Tue, 13 Mar 2012 23:22:17 +0100 Subject: Implemented playlist item deletion. --- static/icons/delete.png | Bin 0 -> 715 bytes static/index.html | 12 ++++++++++-- static/playlist.js | 18 ++++++++++++++---- static/style.css | 14 +++++++++----- 4 files changed, 33 insertions(+), 11 deletions(-) create mode 100644 static/icons/delete.png (limited to 'static') diff --git a/static/icons/delete.png b/static/icons/delete.png new file mode 100644 index 0000000..08f2493 Binary files /dev/null and b/static/icons/delete.png differ 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 @@
- + + + + + + + + + +
Name 
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('{{trackname}}'), + tagName: 'tr', + template: Handlebars.compile('{{trackname}}Delete'), 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; } -- cgit v1.2.3