feature 959 : improve reordering of menubar block by using drag and drop

a new jquery pluging to reodering table rows because jquery.sortable don't work well with table rows.

git-svn-id: http://piwigo.org/svn/trunk@3219 68402e56-0260-453c-a942-63ccdbb3a9ee

1 files changed, 46 insertions, 22 deletions

diff --git a/admin/template/goto/menubar.tpl b/admin/template/goto/menubar.tpl
index ca693dfba..6cc439f12 100644
--- a/admin/template/goto/menubar.tpl
+++ b/admin/template/goto/menubar.tpl
@@ -1,30 +1,54 @@
 {* $Id$ *}
+{known_script id="jquery" src=$ROOT_URL|@cat:"template-common/lib/jquery.packed.js"}
+{known_script id="jquery.ui" src=$ROOT_URL|@cat:"template-common/lib/ui/packed/ui.core.packed.js" }
+{known_script id="jquery-tablednd" src=$ROOT_URL|@cat:"template-common/lib/jquery.tablednd.js"}
+
+{literal}
+<script type="text/javascript">
+$(function() {
+$('table.table2').tableDnD({
+onDrop:function(table,row) {
+var rows = table.tBodies[0].rows;
+for (var i=0; i<rows.length; i++) {
+  $(rows[i])
+     .attr('class', 'row'+i%2)
+     .find("input[@type='text']").attr('value', (i+1)*10);
+}
+}
+});
+});
+</script>
+{/literal}
 
 <div class="titrePage">
-	<h2>Menubar</h2>
+  <h2>Menubar</h2>
 </div>
-
+<div id="debugArea"></div>
 <form method="post" action="{$F_ACTION}" class="properties">
-<table class="table2">
-	<tr class="throw">
-		<td>Id</td>
-		<td>{'Author'|@translate}</td>
-		<td>{'Name'|@translate}</td>
-		<td>{'Position'|@translate}</td>
-		<td>Hide</td>
-	</tr>
-	{foreach from=$blocks item=block name="block_loop"}
+  <table class="table2" style="width:99%">
+    <thead>
+      <tr class="throw">
+	<td>Id</td>
+	<td>{'Author'|@translate}</td>
+	<td>{'Name'|@translate}</td>
+	<td>{'Position'|@translate}</td>
+	<td>Hide</td>
+      </tr>
+    </thead>
+    <tbody>
+    {foreach from=$blocks item=block name="block_loop"}
 	<tr class="{if $smarty.foreach.block_loop.index is odd}row1{else}row2{/if}">
-		<td>{$block.reg->get_id()}</td>
-		<td>{$block.reg->get_owner()}</td>
-		<td>{$block.reg->get_name()|@translate}</td>
-		<td><input type="text" name="pos_{$block.reg->get_id()}" value={math equation="abs(pos)" pos=$block.pos} size="2"></td>
-		<td><input type="checkbox" name="hide_{$block.reg->get_id()}" {if $block.pos<0}checked="checked"{/if} ></td>
+	  <td>{$block.reg->get_id()}</td>
+	  <td>{$block.reg->get_owner()}</td>
+	  <td>{$block.reg->get_name()|@translate}</td>
+	  <td><input type="text" name="pos_{$block.reg->get_id()}" value={math equation="abs(pos)" pos=$block.pos} size="2"></td>
+	  <td><input type="checkbox" name="hide_{$block.reg->get_id()}" {if $block.pos<0}checked="checked"{/if}></td>
 	</tr>
-	{/foreach}
-</table>
-<p>
-	<input type="submit" name="submit" value="{'Submit'|@translate}" {$TAG_INPUT_ENABLED}>
-	<input type="submit" name="reset" value="{'Reset'|@translate}" {$TAG_INPUT_ENABLED}>
-</p>
+     {/foreach}
+     </tbody>
+  </table>
+  <p>
+    <input type="submit" name="submit" value="{'Submit'|@translate}" {$TAG_INPUT_ENABLED}>
+    <input type="submit" name="reset" value="{'Reset'|@translate}" {$TAG_INPUT_ENABLED}>
+  </p>
 </form>