Starting sortable playlist implmentation to re-order songs.

lib/javascript/base.js

@@ -19,6 +19,17 @@
 //
 $(document).ready(function () {
     $('.default_hidden').hide();
+    
+    $('#sortableplaylist').sortable({
+        axis: 'y',
+        delay: 200,
+        start: function (event, ui) {
+            $(ui.item).data("startindex", ui.item.index());
+        },
+        stop: function (event, ui) {
+            playlistUpdatedIndex(ui.item);
+        }
+    });
 });
 
 $(function() {
@@ -68,9 +79,7 @@ function toggleVisible(element) {
 // delayRun
 // This function delays the run of another function by X milliseconds
 function delayRun(element, time, method, page, source) { 
-
     var function_string = method + '(\'' + page + '\',\'' + source + '\')'; 
-
     var action = function () { eval(function_string); }; 
 
     if (element.zid) { 
@@ -78,7 +87,6 @@ function delayRun(element, time, method, page, source) {
     }
 
     element.zid = setTimeout(action, time); 
-
 }
 
 // reloadUtil

lib/javascript/edit-dialog.js

@@ -18,6 +18,10 @@
 // Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 //
 
+/*********************/
+/* Edit modal dialog */
+/*********************/
+
 function showEditDialog(edit_type, edit_id, edit_form_id, edit_title, edit_tag_choices) {
     var parent = this;
     parent.editFormId = 'form#' + edit_form_id;
@@ -96,3 +100,28 @@ function check_inline_song_edit(type, song) {
         $(source).replaceWith('<input type="text" name="' + type + '_name" value="New ' + type + '" onclick="this.select();" />');
     }
 }
+
+/*********************/
+/*   Sortable table  */
+/*********************/
+
+$(document).ready(function () {
+    $('#sortableplaylist').sortable({
+        axis: 'y',
+        delay: 200,
+        start: function (event, ui) {
+            $(ui.item).data("startindex", ui.item.index());
+        },
+        stop: function (event, ui) {
+            playlistUpdatedIndex(ui.item);
+        }
+    });
+});
+
+function playlistUpdatedIndex(item) {
+    var startIndex = item.data("startindex");
+    var newIndex = item.index();
+    if (newIndex != startIndex) {
+        alert('Start index {' + startIndex + '} Stop index {' + newIndex + '}');
+    }
+}

templates/show_playlist_songs.inc.php

@@ -24,7 +24,7 @@ $web_path = Config::get('web_path');
 ?>
 <?php require Config::get('prefix') . '/templates/list_header.inc.php'; ?>
 <table class="tabledata" cellpadding="0" cellspacing="0">
-<colgroup>
+    <colgroup>
         <col id="col_directplay" />
         <col id="col_add" />
         <col id="col_track" />
@@ -37,11 +37,12 @@ $web_path = Config::get('web_path');
         <col id="col_rating" />
         <col id="col_userflag" />
         <col id="col_action" />
-</colgroup>
+    </colgroup>
-<tr class="th-top">
+    <tbody id="sortableplaylist">
-<?php if (Config::get('directplay')) { ?>
+        <tr class="th-top">
+        <?php if (Config::get('directplay')) { ?>
             <th class="cel_directplay"><?php echo T_('Play'); ?></th>
-<?php } ?>
+        <?php } ?>
             <th class="cel_add"><?php echo T_('Add'); ?></th>
             <th class="cel_track"><?php echo T_('Track'); ?></th>
             <th class="cel_song"><?php echo T_('Song Title'); ?></th>
@@ -50,32 +51,32 @@ $web_path = Config::get('web_path');
             <th class="cel_genre"><?php echo T_('Genre'); ?></th>
             <th class="cel_track"><?php echo T_('Track'); ?></th>
             <th class="cel_time"><?php echo T_('Time'); ?></th>
-<?php if (Config::get('ratings')) {
+        <?php if (Config::get('ratings')) {
             Rating::build_cache('song', array_map(create_function('$i', 'return $i[\'object_id\'];'), $object_ids));
-?>
+        ?>
             <th class="cel_rating"><?php echo T_('Rating'); ?></th>
-<?php } ?>
+        <?php } ?>
-<?php if (Config::get('userflags')) {
+        <?php if (Config::get('userflags')) {
             Userflag::build_cache('song', array_map(create_function('$i', 'return $i[\'object_id\'];'), $object_ids));
-?>
+        ?>
             <th class="cel_userflag"><?php echo T_('Flag'); ?></th>
-<?php } ?>
+        <?php } ?>
             <th class="cel_action"><?php echo T_('Action'); ?></th>
-</tr>
+        </tr>
-<?php
+        <?php
         foreach ($object_ids as $object) {
             $song = new Song($object['object_id']);
             $song->format();
             $playlist_track = $object['track'];
-?>
+        ?>
-<tr class="<?php echo UI::flip_class(); ?>" id="track_<?php echo $object['track_id']; ?>">
+        <tr class="<?php echo UI::flip_class(); ?>" id="track_<?php echo $object['track_id']; ?>">
             <?php require Config::get('prefix') . '/templates/show_playlist_song_row.inc.php'; ?>
-</tr>
+        </tr>
-<?php } ?>
+        <?php } ?>
-<tr class="th-bottom">
+        <tr class="th-bottom">
-<?php if (Config::get('directplay')) { ?>
+        <?php if (Config::get('directplay')) { ?>
             <th class="cel_directplay"><?php echo T_('Play'); ?></th>
-<?php } ?>
+        <?php } ?>
             <th class="cel_add"><?php echo T_('Add'); ?></th>
             <th class="cel_track"><?php echo T_('Track'); ?></th>
             <th class="cel_song"><?php echo T_('Song Title'); ?></th>
@@ -84,13 +85,14 @@ $web_path = Config::get('web_path');
             <th class="cel_genre"><?php echo T_('Genre'); ?></th>
             <th class="cel_track"><?php echo T_('Track'); ?></th>
             <th class="cel_time"><?php echo T_('Time'); ?></th>
-<?php if (Config::get('ratings')) { ?>
+        <?php if (Config::get('ratings')) { ?>
             <th class="cel_rating"><?php echo T_('Rating'); ?></th>
-<?php } ?>
+        <?php } ?>
-<?php if (Config::get('userflags')) { ?>
+        <?php if (Config::get('userflags')) { ?>
             <th class="cel_userflag"><?php echo T_('Flag'); ?></th>
-<?php } ?>
+        <?php } ?>
             <th class="cel_action"><?php echo T_('Action'); ?></th>
-</tr>
+        </tr>
+    </tbody>
 </table>
 <?php require Config::get('prefix') . '/templates/list_header.inc.php'; ?>