From ffcf578d4addb20e39e95a3c8da14f563e4e1b17 Mon Sep 17 00:00:00 2001
From: bazooka07 <jpourrez@gmail.com>
Date: Wed, 6 Dec 2017 17:33:24 +0100
Subject: [PATCH] Tri avec la souris des rangees des tableaux de statiques,
 categories et plugins actifs.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Testé sous Firefox, Chrome, Vuvaldi.
---
 core/admin/categories.php               |  12 +--
 core/admin/foot.php                     |   4 +-
 core/admin/parametres_plugins.php       |   4 +-
 core/admin/statiques.php                |  24 ++---
 core/admin/theme/images/homepage-32.png | Bin 0 -> 429 bytes
 core/admin/theme/theme.css              |  18 ++++
 core/lib/drag-and-drop.js               | 113 ++++++++++++++++++++++++
 7 files changed, 154 insertions(+), 21 deletions(-)
 create mode 100644 core/admin/theme/images/homepage-32.png
 create mode 100644 core/lib/drag-and-drop.js

diff --git a/core/admin/categories.php b/core/admin/categories.php
index 668d94d6f..7210b5387 100644
--- a/core/admin/categories.php
+++ b/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;';
diff --git a/core/admin/foot.php b/core/admin/foot.php
index f85947e98..55dc04be0 100644
--- a/core/admin/foot.php
+++ b/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>
\ No newline at end of file
diff --git a/core/admin/parametres_plugins.php b/core/admin/parametres_plugins.php
index 866aad78e..b48926cfa 100644
--- a/core/admin/parametres_plugins.php
+++ b/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>
diff --git a/core/admin/statiques.php b/core/admin/statiques.php
index 941a70c33..3af7d0740 100644
--- a/core/admin/statiques.php
+++ b/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');
 					?>
diff --git a/core/admin/theme/images/homepage-32.png b/core/admin/theme/images/homepage-32.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ae53cd77fe86de4e460ef55d66f6ae42907ce55
GIT binary patch
literal 429
zcmV;e0aE^nP)<h;3K|Lk000e1NJLTq001KZ001Be0{{R3uahyw0001xP)t-s|Ns9i
zD=Yv204XRb`1trICnxjs^VZhZ6B85S;^G(=82tSF&(F{9?(WRY%*n~g4Gj$=A|o_2
zH1F^49vvQ&laso+y5Qj8XJ=>V=;$089BplF+S=N{z`!LVC4hi{ot>SfrKLhbLQhXm
zM@L6nTU&Q`cVS^+R8&+kFflqhI*g2rs;a7ohlg@;a<sIxLIUO000001bW%=J06^y0
zW&i*H%Sl8*R5;7!(oqY7FcgO2b37MQk<?fYVGYtC`u~5h&1svqox1P48$7sI6yUI;
zE8xpYLMnMu6WY}*L8OLQWC?0e9C9r}cdf9f%o9~fl#R-v+L1}x>tvU?ZfTi&_gdIf
z5-sH6iA7TaS@I0TqPv<7Xv+=z2oJdt+K0!vVFn|#&kc*hkGT=r!VA{|5>u1fJ*k7)
zkpa`YxDR{=XcaI9s&@3*jCn5@GR6>ZZbEA<2G*?Se=^q}%$PA_{6mYA-+FBPN%+$X
XY7h@8)dPs$00000NkvXXu0mjfTD-l5

literal 0
HcmV?d00001

diff --git a/core/admin/theme/theme.css b/core/admin/theme/theme.css
index c48b43436..e43ab79d2 100644
--- a/core/admin/theme/theme.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/core/lib/drag-and-drop.js b/core/lib/drag-and-drop.js
new file mode 100644
index 000000000..fe4508f6f
--- /dev/null
+++ b/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);
+
+	}
+
+})();
\ No newline at end of file