Skip to content

Commit

Permalink
Tri avec la souris des rangees des tableaux de statiques, categories et
Browse files Browse the repository at this point in the history
plugins actifs.

Testé sous Firefox, Chrome, Vuvaldi.
  • Loading branch information
bazooka07 committed Dec 6, 2017
1 parent 64d32ee commit ffcf578
Show file tree
Hide file tree
Showing 7 changed files with 154 additions and 21 deletions.
12 changes: 6 additions & 6 deletions core/admin/categories.php
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>';
Expand All @@ -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);
Expand All @@ -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;';
Expand Down
4 changes: 2 additions & 2 deletions core/admin/foot.php
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -17,4 +17,4 @@

</body>

</html>
</html>
4 changes: 3 additions & 1 deletion core/admin/parametres_plugins.php
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand All @@ -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>
Expand Down
24 changes: 12 additions & 12 deletions core/admin/statiques.php
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>';
Expand All @@ -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);
Expand All @@ -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');
?>
Expand Down
Binary file added core/admin/theme/images/homepage-32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions core/admin/theme/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
113 changes: 113 additions & 0 deletions core/lib/drag-and-drop.js
Original file line number Diff line number Diff line change
@@ -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);

}

})();

0 comments on commit ffcf578

Please sign in to comment.