diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/player.js | 4 | ||||
| -rw-r--r-- | static/playlist.js | 68 | ||||
| -rw-r--r-- | static/style.css | 5 |
3 files changed, 61 insertions, 16 deletions
diff --git a/static/player.js b/static/player.js index 882b5ca..3f98dce 100644 --- a/static/player.js +++ b/static/player.js @@ -191,9 +191,9 @@ function event_handler(event) { if(li == playlist.current) a.onclick(); else - a.setAttribute('class', ''); + a.setAttribute('class', 'song'); } else { - a.setAttribute('class', 'file-recoding'); + a.setAttribute('class', 'song file-recoding'); } } break; diff --git a/static/playlist.js b/static/playlist.js index e5513d1..3590f2c 100644 --- a/static/playlist.js +++ b/static/playlist.js @@ -8,7 +8,7 @@ function Playlist(pl, audio) { var li = this.pl.getElementsByTagName('li')[0]; while(li) { var as = li.getElementsByTagName('a'); - if(as.length > 0) { + if(as.length == 2) { var a = as[0]; if(a.ml.path == path && (!track || a.ml.track == track)) return li; @@ -20,6 +20,7 @@ function Playlist(pl, audio) { this.add = function(ml) { var a = document.createElement('a'); + a.setAttribute('class', 'song'); a.setAttribute('href', '#'); var name = ml.get_text(); a.appendChild(document.createTextNode(name)); @@ -36,7 +37,7 @@ function Playlist(pl, audio) { li.previousElementSibling.previousElementSibling.parentElement.removeChild(li.previousElementSibling.previousElementSibling); if(li.previousElementSibling && pl.pl.firstChild != li.previousElementSibling) pl.pl.removeChild(pl.pl.firstChild); - a.setAttribute('class', 'playing'); + a.setAttribute('class', 'song playing'); pl.current = li; ml.play(); @@ -59,11 +60,43 @@ function Playlist(pl, audio) { album_li.appendChild(document.createTextNode(ml.metadata.album)); album_li.setAttribute('class', 'album'); + var a_del = document.createElement('a'); + a_del.setAttribute('class', 'delete'); + a_del.setAttribute('href', '#'); + a_del.setAttribute('title', 'Remove'); + var del_img = new Image(); + del_img.src = '/static/icons/delete.png'; + a_del.appendChild(del_img); + a_del.onclick = (function(album_li) { + return function() { + while(album_li.nextElementSibling && album_li.nextElementSibling.getAttribute('class') != 'album') + pl.pl.removeChild(album_li.nextElementSibling); + pl.pl.removeChild(album_li); + return false; + } + })(album_li); + + var span = document.createElement('span'); + span.style.display = 'none'; + + album_li.onmouseover = (function(span) { + return function() { + span.style.display = ''; + } + })(span); + album_li.onmouseout = (function(span) { + return function() { + span.style.display = 'none'; + } + })(span); + span.appendChild(a_del); + album_li.appendChild(span); + this.pl.appendChild(album_li); this.lastalbum = ml.metadata.album; } - var span = document.createElement('div'); + var div = document.createElement('div'); // anchor to remove track from playlist var a_del = document.createElement('a'); @@ -92,20 +125,29 @@ function Playlist(pl, audio) { return false; } - a_del.hidden = true; + var span = document.createElement('span'); + span.style.display = 'none'; - span.onmouseover = function() { - a_del.hidden = false; - } - span.onmouseout = function() { - a_del.hidden = true; - } + div.onmouseover = (function(span) { + return function() { + span.style.display = ''; + } + })(span); + div.onmouseout = (function(span) { + return function() { + span.style.display = 'none'; + } + })(span); + + div.appendChild(a); + div.appendChild(document.createTextNode(' ')); - span.appendChild(a); - span.appendChild(document.createTextNode(' ')); span.appendChild(a_del); + span.setAttribute('class', 'right'); + + div.appendChild(span); - li.appendChild(span); + li.appendChild(div); this.pl.appendChild(li); if(this.get_next() == li) diff --git a/static/style.css b/static/style.css index 5b2497c..3213dec 100644 --- a/static/style.css +++ b/static/style.css @@ -4,7 +4,7 @@ ul#song-links a:hover, ul#playlist a:hover { text-decoration: underline; } a.dir { background-image: url('/static/icons/folder.png'); } a.file { background-image: url('/static/icons/music.png'); } a.file-cached { background-image: url('/static/icons/music-cached.png'); } -a.dir, a.file, ul#playlist li a:first-child { background-repeat: no-repeat; padding-left: 20px; } +a.dir, a.file, ul#playlist a.song { background-repeat: no-repeat; padding-left: 20px; } ul#playlist img { vertical-align: middle; } a.file-recoding { background-image: url('/static/icons/loading.gif'); } a.file-queued { background-image: url('/static/icons/music-queued.png'); } @@ -17,3 +17,6 @@ ul#song-links { width: 30em; overflow: auto; white-space: nowrap; resize: both; a#add-dir { font-size: small; } span#playlist-span { position: absolute; left: 31em; right: 1em; } ul#playlist li.album { border-top: 1px solid; margin-bottom: .2em; color: #666; padding-left: 1em; } +ul#playlist li.album span { margin-left: 1em; } +.right { float: right; } +ul#playlist li div:hover { background: #eee; } |