1.9.9 - Drag and drop sorting

README

@@ -16,9 +16,3 @@ Features
 You will need a Subsonic server to be able to play your own music. Subsonic is a free, web-based media streamer, providing ubiquitous access to your music. Use it to share your music with friends, or to listen to your own music while at work. Please see http://www.subsonic.org
 
 Change Log inside...
-
-TO DO: (In no particular order...)
-- Jukebox Control
-- Download Links
-- Ratings
-- Chrome App???

index.html

@@ -9,6 +9,7 @@
     <link href="style/Style.css" rel="stylesheet" type="text/css" />
     <link href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
     <script src="js/plugins/jquery-1.7.2.min.js" type="text/javascript"></script>
+    <script src="js/plugins/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
     <script src="js/plugins/jquery.base64.js" type="text/javascript"></script>
     <script src="js/plugins/jquery.shuffle.js" type="text/javascript"></script>
     <script src="js/plugins/jquery.cookie.js" type="text/javascript"></script>
@@ -210,6 +211,10 @@
                         <span class="changes"></span>
                     </li>
                     -->
+                    <li class="log"><span class="version">- 1.9.9</span>
+                        <span class="changes">Drag and drop sorting for Current and all other Playlists</span>
+                        <span class="changes"></span>
+                    </li>
                     <li class="log"><span class="version">5/21/2012 - 1.9.8</span>
                         <span class="changes">Support for 4.7beta1 in preparation for next full release</span>
                         <span class="changes">Ability to download Playlist or Song</span>

js/libs/generators.js

@@ -58,8 +58,8 @@ function generateSongHTML(rowcolor, childid, parentid, track, title, artist, alb
     return html;
 }
 
-function refreshRowColor() {
-    $.each($('table.songlist tr.song'), function (i) {
+function refreshRowColor(el) {
+    $.each($(el + ' tr.song'), function (i) {
         $(this).removeClass('even odd');
         var rowcolor;
         if (i % 2 === 0) {

js/ui-ready.js

@@ -248,7 +248,7 @@
     $('table.songlist tr.song a.remove').live('click', function (event) {
         var track = $(this).parent().parent();
         $(track).remove();
-        refreshRowColor();
+        refreshRowColor('table.songlist');
         return false;
     });
     $('table.songlist tr.song a.rate').live('click', function (event) {
@@ -349,8 +349,8 @@
     });
     // Current Playlist Click Events
     $('#action_Shuffle').live('click', function () {
-        $('#CurrentPlaylistContainer tr.song').shuffle();
-        refreshRowColor();
+        $('#CurrentPlaylistContainer tbody tr.song').shuffle();
+        refreshRowColor('#CurrentPlaylistContainer tbody');
         return false;
     });
     $('#action_Empty').live('click', function () {
@@ -448,8 +448,8 @@
         return false;
     });
     $('#action_ShufflePlaylist').live('click', function () {
-        $('#TrackContainer tr.song').shuffle();
-        refreshRowColor();
+        $('#TrackContainer tbody tr.song').shuffle();
+        refreshRowColor('#TrackContainer tbody');
         return false;
     });
 
@@ -593,4 +593,24 @@
         return false;
     });
 
+    // JQuery UI Sortable - Drag and drop sorting
+    var fixHelper = function (e, ui) {
+        ui.children().each(function () {
+            $(this).width($(this).width());
+        });
+        return ui;
+    };
+    $("#CurrentPlaylistContainer tbody").sortable({
+        helper: fixHelper,
+        stop: function() {
+            refreshRowColor('#CurrentPlaylistContainer tbody');            
+        }
+    }).disableSelection();
+    $("#TrackContainer tbody").sortable({
+        helper: fixHelper,
+        stop: function () {
+            refreshRowColor('#TrackContainer tbody');
+        }
+    }).disableSelection();
+
 });      // End document.ready

style/Style.css

@@ -154,6 +154,7 @@ h3.title
     position: absolute;
     top: 39px;
     left: 60px;
+    outline: none;
 }
 .lgsection
 {