Tri avec la souris des rangees de tableaux

core/admin/categories.php

@@ -53,7 +53,7 @@
 	<?php eval($plxAdmin->plxPlugins->callHook('AdminCategoriesTop')) # Hook Plugins ?>
 
 	<div class="scrollable-table">
-		<table id="categories-table" class="full-width">
+		<table id="categories-table" class="full-width" data-rows-num='name$="_ordre"'>
 			<thead>
 				<tr>
 					<th class="checkbox"><input type="checkbox" onclick="checkAll(this.form, 'idCategory[]')" /></th>
@@ -71,13 +71,12 @@
 			<tbody>
 			<?php
 			# Initialisation de l'ordre
-			$num = 0;
+			$ordre = 1;
 			# Si on a des catégories
 			if($plxAdmin->aCats) {
 				foreach($plxAdmin->aCats as $k=>$v) { # Pour chaque catégorie
-					$ordre = ++$num;
-					echo '<tr draggable="true" ondragend="DragDrop.dragend(event, \'categories-table\')" ondragenter="DragDrop.dragenter(event)" ondragstart="DragDrop.dragstart(event)">';
-					echo '<td class="tb-drag-icon"><input type="checkbox" name="idCategory[]" value="'.$k.'" /><input type="hidden" name="catNum[]" value="'.$k.'" /></td>';
+					echo '<tr>';
+					echo '<td><input type="checkbox" name="idCategory[]" value="'.$k.'" /><input type="hidden" name="catNum[]" value="'.$k.'" /></td>';
 					echo '<td>'.$k.'</td><td>';
 					plxUtils::printInput($k.'_name', plxUtils::strCheck($v['name']), 'text', '-50');
 					echo '</td><td>';
@@ -95,6 +94,7 @@
 					echo '</td>';
 					echo '<td><a href="categorie.php?p='.$k.'">'.L_OPTIONS.'</a></td>';
 					echo '</tr>';
+					$ordre++;
 				}
 				# On récupère le dernier identifiant
 				$a = array_keys($plxAdmin->aCats);
@@ -120,7 +120,7 @@
 						echo '</td><td>';
 						plxUtils::printInput($new_catid.'_bypage', $plxAdmin->aConf['bypage'], 'text', '-3');
 						echo '</td><td>';
-						plxUtils::printInput($new_catid.'_ordre', ++$num, 'text', '-3');
+						plxUtils::printInput($new_catid.'_ordre', $ordre, 'text', '-3');
 						echo '</td><td>';
 						plxUtils::printSelect($new_catid.'_menu', array('oui'=>L_DISPLAY,'non'=>L_HIDE), '1');
 						echo '</td><td>&nbsp;';

core/admin/foot.php

@@ -5,7 +5,7 @@
 </main>
 
 <?php eval($plxAdmin->plxPlugins->callHook('AdminFootEndBody')) ?>
-
+<script src="<?php echo PLX_CORE ?>lib/drag-and-drop.js"></script>
 <script>
 	setMsg();
 	mediasManager.construct({
@@ -17,4 +17,4 @@
 
 </body>
 
-</html>
+</html>

core/admin/parametres_plugins.php

@@ -119,6 +119,8 @@ function pluginsList($plugins, $defaultLang, $type) {
 $breadcrumbs[] = '<li><a '.($_SESSION['selPlugins']=='1'?'class="selected" ':'').'href="parametres_plugins.php?sel=1">'.L_PLUGINS_ACTIVE_LIST.'</a>&nbsp;('.$nbActivePlugins.')</li>';
 $breadcrumbs[] = '<li><a '.($_SESSION['selPlugins']=='0'?'class="selected" ':'').'href="parametres_plugins.php?sel=0">'.L_PLUGINS_INACTIVE_LIST.'</a>&nbsp;('.$nbInactivePlugins.')</li>';
 
+$data_rows_num = ($sel=='1') ?  'data-rows-num=\'name^="plugOrdre"\'' : false;
+
 # On inclut le header
 include(dirname(__FILE__).'/top.php');
 
@@ -143,7 +145,7 @@ function pluginsList($plugins, $defaultLang, $type) {
 	<?php eval($plxAdmin->plxPlugins->callHook('AdminSettingsPluginsTop')) # Hook Plugins ?>
 
 	<div class="scrollable-table">
-		<table id="plugins-table" class="full-width">
+		<table id="plugins-table" class="full-width"<?php if(!empty($data_rows_num)) echo $data_rows_num; ?>>
 			<thead>
 				<tr>
 					<th><input type="checkbox" onclick="checkAll(this.form, 'chkAction[]')" /></th>

core/admin/statiques.php

@@ -58,12 +58,12 @@ function checkBox(cb) {
 	<?php eval($plxAdmin->plxPlugins->callHook('AdminStaticsTop')) # Hook Plugins ?>
 
 	<div class="scrollable-table">
-		<table id="statics-table" class="full-width">
+		<table id="statics-table" class="full-width"  data-rows-num='name$="_ordre"'>
 			<thead>
 				<tr>
 					<th class="checkbox"><input type="checkbox" onclick="checkAll(this.form, 'idStatic[]')" /></th>
 					<th><?php echo L_ID ?></th>
-					<th><?php echo L_STATICS_HOME_PAGE ?></th>
+					<th title="<?php echo L_STATICS_HOME_PAGE ?>"><img src="theme/images/homepage-32.png" alt="<?php echo L_STATICS_HOME_PAGE ?>" /></th>
 					<th><?php echo L_STATICS_GROUP ?></th>
 					<th><?php echo L_STATICS_TITLE ?></th>
 					<th><?php echo L_STATICS_URL ?></th>
@@ -76,16 +76,15 @@ function checkBox(cb) {
 			<tbody>
 			<?php
 			# Initialisation de l'ordre
-			$num = 0;
+			$ordre = 1;
 			# Si on a des pages statiques
 			if($plxAdmin->aStats) {
 				foreach($plxAdmin->aStats as $k=>$v) { # Pour chaque page statique
-					$ordre = ++$num;
-					echo '<tr draggable="true" ondragend="DragDrop.dragend(event, \'statics-table\')" ondragenter="DragDrop.dragenter(event)" ondragstart="DragDrop.dragstart(event)">';
-					echo '<td class="tb-drag-icon"><input type="checkbox" name="idStatic[]" value="'.$k.'" /><input type="hidden" name="staticNum[]" value="'.$k.'" /></td>';
+					echo '<tr>';
+					echo '<td><input type="checkbox" name="idStatic[]" value="'.$k.'" /><input type="hidden" name="staticNum[]" value="'.$k.'" /></td>';
 					echo '<td>'.$k.'</td><td>';
 					$selected = $plxAdmin->aConf['homestatic']==$k ? ' checked="checked"' : '';
-					echo '<input title="'.L_STATICS_PAGE_HOME.'" type="checkbox" name="homeStatic[]" value="'.$k.'"'.$selected.' onclick="checkBox(\''.$num.'\')" />';
+					echo '<input title="'.L_STATICS_PAGE_HOME.'" type="checkbox" name="homeStatic[]" value="'.$k.'"'.$selected.' onclick="checkBox(\''.$ordre.'\')" />';
 					echo '</td><td>';
 					plxUtils::printInput($k.'_group', plxUtils::strCheck($v['group']), 'text', '-100');
 					echo '</td><td>';
@@ -98,19 +97,20 @@ function checkBox(cb) {
 					plxUtils::printInput($k.'_ordre', $ordre, 'text', '2-3');
 					echo '</td><td>';
 					plxUtils::printSelect($k.'_menu', array('oui'=>L_DISPLAY,'non'=>L_HIDE), $v['menu']);
+					echo '</td><td>';
 					$url = $v['url'];
 					if(!plxUtils::checkSite($url)) {
-						echo '</td><td>';
 						echo '<a href="statique.php?p='.$k.'" title="'.L_STATICS_SRC_TITLE.'">'.L_STATICS_SRC.'</a>';
 						if($v['active']) {
 							echo '&nbsp;&nbsp;<a href="'.$plxAdmin->urlRewrite('?static'.intval($k).'/'.$v['url']).'" title="'.L_STATIC_VIEW_PAGE.' '.plxUtils::strCheck($v['name']).' '.L_STATIC_ON_SITE.'">'.L_VIEW.'</a>';
 						}
-						echo '</td></tr>';
 					}
 					elseif($v['url'][0]=='?')
-						echo '</td><td><a href="'.$plxAdmin->urlRewrite($v['url']).'" title="'.plxUtils::strCheck($v['name']).'">'.L_VIEW.'</a></td></tr>';
+						echo '<a href="'.$plxAdmin->urlRewrite($v['url']).'" title="'.plxUtils::strCheck($v['name']).'">'.L_VIEW.'</a>';
 					else
-						echo '</td><td><a href="'.$v['url'].'" title="'.plxUtils::strCheck($v['name']).'">'.L_VIEW.'</a></td></tr>';
+						echo '<a href="'.$v['url'].'" title="'.plxUtils::strCheck($v['name']).'">'.L_VIEW.'</a>';
+					echo '</td></tr>';
+					$ordre++;
 				}
 				# On récupère le dernier identifiant
 				$a = array_keys($plxAdmin->aStats);
@@ -134,7 +134,7 @@ function checkBox(cb) {
 						echo '</td><td>';
 						plxUtils::printSelect($new_staticid.'_active', array('1'=>L_YES,'0'=>L_NO), '0');
 						echo '</td><td>';
-						plxUtils::printInput($new_staticid.'_ordre', ++$num, 'text', '2-3');
+						plxUtils::printInput($new_staticid.'_ordre', $ordre, 'text', '2-3');
 						echo '</td><td>';
 						plxUtils::printSelect($new_staticid.'_menu', array('oui'=>L_DISPLAY,'non'=>L_HIDE), '1');
 					?>

core/admin/theme/theme.css

@@ -828,5 +828,23 @@ body.mediasManager .section .action-bar {
 	body.mediasManager .col.lrg-10 {
 		width: 100%;
 	}
+}
+
+/* ----------- Drag and Drop for sorting the rows in a table ---------- */
+table[data-rows-num] th:first-of-type,
+table[data-rows-num] td:first-of-type {
+	padding-left: 12px;
+}
+table[data-rows-num] tr[draggable] {
+	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAH0lEQVQI12OMTnjEAAX/oTQjMp+JgQBgwaUTxidoAgAf6QWm80FgrQAAAABJRU5ErkJggg==') left repeat-y;
+}
+table[data-rows-num] tr[draggable]:hover {
+	background-color: #dbcdf9;
+}
 
+table[data-rows-num] tr[draggable].dragElem {
+	opacity: 0.3;
 }
+table[data-rows-num] tr[draggable].over {
+	background-color: #aaa;
+}

core/lib/drag-and-drop.js

@@ -0,0 +1,113 @@
+/*
+ * Please, add the "data-rows-num"  attribute of the <table> tag for sorting his rows with the mouse
+ * Only one table is allowed.
+ * */
+
+(function() {
+
+	'use strict';
+
+	const dndTable = document.querySelector('table[data-rows-num]');
+
+	if(dndTable != null) {
+		const attr = dndTable.getAttribute('data-rows-num').trim();
+		const reOrder = (attr.length > 0) ? 'tbody tr:not(.new) input[' + attr + ']' : null;
+		const dragEvents = 'start enter over leave end'.split(' ').map(function(item) {
+			return 'ondrag' + item;
+		});
+		var dragSrcEl = null;
+
+		function handleDragStart(e) {
+			// Target (this) element is the source node.
+			dragSrcEl = this;
+			dragSrcEl.classList.add('dragElem');
+
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('text/html', dragSrcEl.outerHTML);
+
+		}
+
+		function handleDragOver(e) {
+			if (e.preventDefault) {
+				e.preventDefault(); // Necessary. Allows us to drop.
+			}
+			this.classList.add('over');
+
+			e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
+
+			return false;
+			}
+
+		function handleDragEnter(e) {
+			// this / e.target is the current hover target.
+		}
+
+		function handleDragLeave(e) {
+			this.classList.remove('over');  // this / e.target is previous target element.
+		}
+
+		function handleDrop(e) {
+			// this/e.target is current target element.
+
+			if (e.stopPropagation) {
+				e.stopPropagation(); // Stops some browsers from redirecting.
+			}
+
+			// Don't do anything if dropping the same column we're dragging.
+			if (dragSrcEl != this) {
+				this.parentNode.removeChild(dragSrcEl);
+				this.parentNode.insertBefore(dragSrcEl, this);
+			}
+			this.classList.remove('over');
+
+			if(reOrder != null) {
+				// On renumérote les rangées du tableau
+				var stickers = dndTable.querySelectorAll(reOrder);
+				if((stickers != null) && (stickers.length > 1)) {
+					for(var i=0, iMax=stickers.length; i<iMax; i++) {
+						var node = stickers[i];
+						var counter = i+1;
+						if(node.hasAttribute('value')) {
+							node.value = counter;
+						} else {
+							node.textContent = counter;
+						}
+					}
+				}
+			}
+			return false;
+		}
+
+		function handleDragEnd(e) {
+			// this/e.target is the source node.
+			this.classList.remove('over');
+			if(dragSrcEl != null) {
+				dragSrcEl.classList.remove('dragElem');
+				dragSrcEl = null;
+			}
+		}
+
+		function addDnDHandlers(elem) {
+			elem.setAttribute('draggable', true);
+			elem.addEventListener('dragstart', handleDragStart, false);
+			elem.addEventListener('dragenter', handleDragEnter, false)
+			elem.addEventListener('dragover', handleDragOver, false);
+			elem.addEventListener('dragleave', handleDragLeave, false);
+			elem.addEventListener('drop', handleDrop, false);
+			elem.addEventListener('dragend', handleDragEnd, false);
+		}
+
+		function setup(node) {
+			var rows = node.querySelectorAll('tbody tr:not(.new)');
+			if((rows != null) && (rows.length > 1)) {
+				for(var i=0, iMax=rows.length; i<iMax; i++) {
+					addDnDHandlers(rows[i]);
+				}
+			}
+		};
+
+		setup(dndTable);
+
+	}
+
+})();