Rimozione dipendenza JQuery UI per sorting

This commit is contained in:
Dasc3er 2021-07-20 20:48:02 +02:00
parent b82551d035
commit 82a2147778
15 changed files with 163 additions and 209 deletions

View File

@ -1085,6 +1085,14 @@ div.tip {
background-color: rgba(255, 99, 71, 0.6) !important; background-color: rgba(255, 99, 71, 0.6) !important;
} }
.login-box .img-responsive{ .login-box .img-responsive {
padding: 18px 0px 4px; padding: 18px 0px 4px;
} }
.no-selection {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

View File

@ -40,21 +40,21 @@ $(document).ready(function () {
} }
// Menu ordinabile // Menu ordinabile
$(".sidebar-menu").sortable({ if (!globals.is_mobile) {
cursor: 'move', sortable(".sidebar-menu", {
axis: "y",
cursor: "move",
dropOnEmpty: true,
scroll: true,
})[0].addEventListener("sortupdate", function(e) {
let order = $(".sidebar-menu > .treeview[data-id]").toArray().map(a => $(a).data("id"))
stop: function (event, ui) { $.post(globals.rootdir + "/actions.php", {
let order = $(this).sortable('toArray').toString(); id_module: globals.order_manager_id,
op: "sort_modules",
$.post(globals.rootdir + "/actions.php?id_module=" + globals.order_manager_id, { order: order.join(","),
op: 'sort_modules',
ids: order
}); });
} });
});
if (globals.is_mobile) {
$(".sidebar-menu").sortable("disable");
} }
$(".sidebar-toggle").click(function () { $(".sidebar-toggle").click(function () {

View File

@ -17,35 +17,36 @@
*/ */
$(document).ready(function () { $(document).ready(function () {
$("#widget-top, #widget-right").sortable({ const widgets = sortable("#widget-top, #widget-right", {
forcePlaceholderSize: true,
items: 'li', items: 'li',
cursor: 'move', cursor: 'move',
dropOnEmpty: true, dropOnEmpty: true,
connectWith: '.widget', acceptFrom: '.widget',
scroll: true, scroll: true,
helper: 'clone', });
start: function (event, ui) {
// Salvo la lista da cui proviene il drag
src_list = ($(this).attr('id')).replace('widget-', '');
// Evidenzio le aree dei widget for (const sorting of widgets) {
$('.widget').addClass('bordered').sortable('refreshPositions'); sorting.addEventListener("sortupdate", function (e) {
},
stop: function (event, ui) {
// Rimuovo l'evidenziazione dell'area widget // Rimuovo l'evidenziazione dell'area widget
$('.widget').removeClass('bordered'); $('.widget').removeClass('bordered');
// Salvo la lista su cui ho eseguito il drop // Salvo la lista su cui ho eseguito il drop
dst_list = (ui.item.parent().attr('id')).replace('widget-', ''); const location = $(e.detail.destination.container).attr('id').replace('widget-', '');
var order = $(this).sortable('toArray').toString(); let order = $(".widget li[data-id]").toArray().map(a => $(a).data("id"))
$.post(globals.rootdir + "/actions.php?id_module=" + globals.order_manager_id, { $.post(globals.rootdir + "/actions.php", {
op: 'sort_widgets', id_module: globals.order_manager_id,
location: dst_list,
ids: order,
id_module_widget: globals.id_module, id_module_widget: globals.id_module,
id_record: globals.id_record, op: 'sort_widgets',
location: location,
order: order.join(','),
}); });
} });
});
sorting.addEventListener("sortstart", function (e) {
// Evidenzio le aree dei widget
$('.widget').addClass('bordered');
});
}
}); });

View File

@ -86,7 +86,7 @@ const JS = gulp.parallel(() => {
'html5sortable/dist/html5sortable.js', 'html5sortable/dist/html5sortable.js',
'bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js', 'bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js',
'moment/moment.js', 'moment/moment.js',
//'components-jqueryui/jquery-ui.js', 'components-jqueryui/jquery-ui.js',
'datatables.net/js/jquery.dataTables.js', 'datatables.net/js/jquery.dataTables.js',
'datatables.net-buttons/js/dataTables.buttons.js', 'datatables.net-buttons/js/dataTables.buttons.js',
'datatables.net-buttons/js/buttons.colVis.js', 'datatables.net-buttons/js/buttons.colVis.js',

View File

@ -30,7 +30,7 @@ $fields = $dbo->fetchArray('SELECT *, (SELECT GROUP_CONCAT(zz_groups.nome) FROM
foreach ($fields as $field) { foreach ($fields as $field) {
echo ' echo '
<div class="panel panel-default clickable col-md-4" data-id="'.$field['id'].'"> <div class="panel panel-default clickable col-md-4" data-id="'.$field['id'].'">
<div class="panel-body"> <div class="panel-body no-selection">
<input type="checkbox" name="visibile" '.($field['visible'] ? 'checked' : '').'> <input type="checkbox" name="visibile" '.($field['visible'] ? 'checked' : '').'>
<span class="text-'.($field['visible'] ? 'success' : 'danger').'">'.$field['name'].'<br><small>( '.$field['gruppi_con_accesso'].')</small></span> <span class="text-'.($field['visible'] ? 'success' : 'danger').'">'.$field['name'].'<br><small>( '.$field['gruppi_con_accesso'].')</small></span>
@ -76,22 +76,19 @@ echo '
// Ordinamento dinamico delle colonne // Ordinamento dinamico delle colonne
$(document).ready(function() { $(document).ready(function() {
$(".sortable").disableSelection(); sortable(".sortable", {
$(".sortable").each(function() { axis: "y",
$(this).sortable({ cursor: "move",
cursor: "move", dropOnEmpty: true,
dropOnEmpty: true, scroll: true,
scroll: true, })[0].addEventListener("sortupdate", function(e) {
update: function(event, ui) { let order = $(".panel[data-id]").toArray().map(a => $(a).data("id"))
let order = $(".panel[data-id]").toArray().map(a => $(a).data("id")) console.log(order);
$.post(globals.rootdir + "/actions.php", { $.post(globals.rootdir + "/actions.php", {
id: ui.item.data("id"), id_module: globals.id_module,
id_module: "'.$id_module.'", op: "ordina_colonne",
op: "ordina_colonne", order: order.join(","),
order: order.join(","),
});
}
}); });
}); });
}); });

View File

@ -299,25 +299,21 @@ function rimuoviRiga(button) {
} }
$(document).ready(function() { $(document).ready(function() {
$(".sortable").each(function() { sortable(".sortable", {
$(this).sortable({ axis: "y",
axis: "y", handle: ".handle",
handle: ".handle", cursor: "move",
cursor: "move", dropOnEmpty: true,
dropOnEmpty: true, scroll: true,
scroll: true, })[0].addEventListener("sortupdate", function(e) {
update: function(event, ui) { let order = $(".table tr[data-id]").toArray().map(a => $(a).data("id"))
let order = $(".table tr[data-id]").toArray().map(a => $(a).data("id"))
$.post(globals.rootdir + "/actions.php", { $.post(globals.rootdir + "/actions.php", {
id: ui.item.data("id"), id_module: globals.id_module,
id_module: '.$id_module.', id_record: globals.id_record,
id_record: '.$id_record.', op: "update_position",
op: "update_position", order: order.join(","),
order: order.join(","), });
}); });
}
});
});
}); });
</script>'; </script>';

View File

@ -373,25 +373,21 @@ function apriRiferimenti(button) {
} }
$(document).ready(function() { $(document).ready(function() {
$(".sortable").each(function() { sortable(".sortable", {
$(this).sortable({ axis: "y",
axis: "y", handle: ".handle",
handle: ".handle", cursor: "move",
cursor: "move", dropOnEmpty: true,
dropOnEmpty: true, scroll: true,
scroll: true, })[0].addEventListener("sortupdate", function(e) {
update: function(event, ui) { let order = $(".table tr[data-id]").toArray().map(a => $(a).data("id"))
let order = $(".table tr[data-id]").toArray().map(a => $(a).data("id"))
$.post(globals.rootdir + "/actions.php", { $.post(globals.rootdir + "/actions.php", {
id: ui.item.data("id"), id_module: globals.id_module,
id_module: '.$id_module.', id_record: globals.id_record,
id_record: '.$id_record.', op: "update_position",
op: "update_position", order: order.join(","),
order: order.join(","), });
}); });
}
});
});
}); });
</script>'; </script>';

View File

@ -474,25 +474,21 @@ function apriInformazioniFE(button) {
} }
$(document).ready(function() { $(document).ready(function() {
$(".sortable").each(function() { sortable(".sortable", {
$(this).sortable({ axis: "y",
axis: "y", handle: ".handle",
handle: ".handle", cursor: "move",
cursor: "move", dropOnEmpty: true,
dropOnEmpty: true, scroll: true,
scroll: true, })[0].addEventListener("sortupdate", function(e) {
update: function(event, ui) { let order = $(".table tr[data-id]").toArray().map(a => $(a).data("id"))
let order = $(".table tr[data-id]").toArray().map(a => $(a).data("id"))
$.post(globals.rootdir + "/actions.php", { $.post(globals.rootdir + "/actions.php", {
id: ui.item.data("id"), id_module: globals.id_module,
id_module: '.$id_module.', id_record: globals.id_record,
id_record: '.$id_record.', op: "update_position",
op: "update_position", order: order.join(","),
order: order.join(","), });
}); });
}
});
});
}); });
</script>'; </script>';

View File

@ -402,25 +402,21 @@ function apriRiferimenti(button) {
} }
$(document).ready(function() { $(document).ready(function() {
$(".sortable").each(function() { sortable(".sortable", {
$(this).sortable({ axis: "y",
axis: "y", handle: ".handle",
handle: ".handle", cursor: "move",
cursor: "move", dropOnEmpty: true,
dropOnEmpty: true, scroll: true,
scroll: true, })[0].addEventListener("sortupdate", function(e) {
update: function(event, ui) { let order = $(".table tr[data-id]").toArray().map(a => $(a).data("id"))
let order = $(".table tr[data-id]").toArray().map(a => $(a).data("id"))
$.post(globals.rootdir + "/actions.php", { $.post(globals.rootdir + "/actions.php", {
id: ui.item.data("id"), id_module: globals.id_module,
id_module: '.$id_module.', id_record: globals.id_record,
id_record: '.$id_record.', op: "update_position",
op: "update_position", order: order.join(","),
order: order.join(","), });
}); });
}
});
});
}); });
</script>'; </script>';

View File

@ -366,25 +366,21 @@ function rimuoviRiga(button) {
} }
$(document).ready(function() { $(document).ready(function() {
$(".sortable").each(function() { sortable(".sortable", {
$(this).sortable({ axis: "y",
axis: "y", handle: ".handle",
handle: ".handle", cursor: "move",
cursor: "move", dropOnEmpty: true,
dropOnEmpty: true, scroll: true,
scroll: true, })[0].addEventListener("sortupdate", function(e) {
update: function(event, ui) { let order = $(".table tr[data-id]").toArray().map(a => $(a).data("id"))
let order = $(".table .sortable tr[data-id]").toArray().map(a => $(a).data("id"))
$.post(globals.rootdir + "/actions.php", { $.post(globals.rootdir + "/actions.php", {
id: ui.item.data("id"), id_module: globals.id_module,
id_module: '.$id_module.', id_record: globals.id_record,
id_record: '.$id_record.', op: "update_position",
op: "update_position", order: order.join(","),
order: order.join(","), });
}); });
}
});
});
}); });
</script>'; </script>';

View File

@ -121,38 +121,21 @@ switch (filter('op')) {
// Ordinamento moduli di primo livello // Ordinamento moduli di primo livello
case 'sort_modules': case 'sort_modules':
$rs = $dbo->fetchArray('SELECT id FROM zz_modules WHERE enabled = 1 AND parent IS NULL ORDER BY `order` ASC'); $order = explode(',', post('order', true));
if ($_POST['ids'] != implode(',', array_column($rs, 'id'))) { foreach ($order as $i => $id) {
$ids = explode(',', $_POST['ids']); $dbo->query('UPDATE zz_modules SET `order`='.prepare($i).' WHERE id='.prepare($id));
for ($i = 0; $i < count($ids); ++$i) {
$dbo->query('UPDATE zz_modules SET `order`='.prepare($i).' WHERE id='.prepare($ids[$i]));
}
flash()->info(tr('Posizione delle voci di menù aggiornata!'));
} }
break; break;
case 'sort_widgets': case 'sort_widgets':
$location = post('location'); $order = explode(',', post('order', true));
$id_module_widget = post('id_module_widget');
$location = empty($id_record) ? 'controller_'.$location : 'editor_'.$location; foreach ($order as $i => $id) {
$dbo->query('UPDATE zz_widgets SET `order`='.prepare($i).' WHERE id='.prepare($id));
$rs = $dbo->fetchArray("SELECT CONCAT('widget_', id) AS id FROM zz_widgets WHERE enabled = 1 AND location = ".prepare($location).' AND id_module = '.prepare($id_module_widget).' ORDER BY `order` ASC');
if ($_POST['ids'] != implode(',', array_column($rs, 'id'))) {
$ids = explode(',', $_POST['ids']);
for ($i = 0; $i < count($ids); ++$i) {
$id = explode('_', $ids[$i]);
$dbo->query('UPDATE zz_widgets SET `order`='.prepare($i).' WHERE id='.prepare($id[1]));
}
flash()->info(tr('Posizioni widgets aggiornate!'));
} }
break; break;
case 'sizes': case 'sizes':

View File

@ -144,7 +144,7 @@ echo '
foreach ($fields as $field) { foreach ($fields as $field) {
echo ' echo '
<p class="clickable" data-id="'.$field['id'].'"> <p class="clickable no-selection" data-id="'.$field['id'].'">
<i class="fa fa-sort"></i> <i class="fa fa-sort"></i>
'; ';
@ -243,30 +243,19 @@ echo '
$(document).ready(function() { $(document).ready(function() {
$("#save-buttons").hide(); $("#save-buttons").hide();
$(".sortable").disableSelection(); sortable(".sortable", {
$(".sortable").each(function() { axis: "y",
$(this).sortable({ cursor: "move",
axis: "y", dropOnEmpty: true,
cursor: "move", scroll: true,
dropOnEmpty: true, })[0].addEventListener("sortupdate", function(e) {
scroll: true, let order = $(".sortable p[data-id]").toArray().map(a => $(a).data("id"))
update: function(event, ui) {
var order = ""; $.post(globals.rootdir + "/actions.php", {
$("div.panel-body.sortable p[data-id]").each( function() { id_module: globals.id_module,
order += ","+$(this).data("id"); id_record: globals.id_record,
}); op: "update_position",
order: order.join(","),
order = order.replace(/^,/, "");
$.post(globals.rootdir + "/actions.php", {
id: ui.item.data("id"),
id_module: '.$id_module.',
id_record: '.$id_record.',
op: "update_position",
order: order,
});
}
}); });
}); });
}); });

View File

@ -84,29 +84,25 @@ $(document).ready(function() {
id_record: "'.$id_record.'", id_record: "'.$id_record.'",
}, "'.$checks_id.'"); }, "'.$checks_id.'");
$(".checklist").sortable({ sortable(".checklist", {
placeholder: "sort-highlight", placeholder: "sort-highlight",
handle: ".handle", handle: ".handle",
forcePlaceholderSize: true, forcePlaceholderSize: true,
zIndex: 999999, zIndex: 999999,
update: function(event, ui) { })[0].addEventListener("sortupdate", function(e) {
var order = []; let order = $(".checklist > li[data-id]").toArray().map(a => $(a).data("id"))
$(".checklist > li").each( function(){
order.push($(this).data("id"));
});
$.post(globals.rootdir + "/actions.php", { $.post(globals.rootdir + "/actions.php", {
id_module: "'.$id_module.'", id_module: globals.id_module,
id_plugin: "'.$id_plugin.'", id_plugin: "'.$id_plugin.'",
id_record: "'.$id_record.'", id_record: globals.id_record,
op: "ordina-checks", op: "ordina-checks",
order: order.join(","), order: order.join(","),
}); });
}
}); });
$(".checklist").todoList({ $(".checklist").todoList({
onCheck : function () { onCheck: function () {
var id = $(this).parent().data("id"); var id = $(this).parent().data("id");
checklists["'.$checks_id.'"].toggleCheck(id); checklists["'.$checks_id.'"].toggleCheck(id);

View File

@ -258,7 +258,7 @@ class WidgetManager implements ManagerInterface
// Aggiungo ad uno ad uno tutti i widget // Aggiungo ad uno ad uno tutti i widget
foreach ($widgets as $widget) { foreach ($widgets as $widget) {
$result .= ' $result .= '
<li class="col-sm-6 col-md-4 col-lg-'.intval(12 / $row_max).' li-widget" id="widget_'.$widget['id'].'">'; <li class="col-sm-6 col-md-4 col-lg-'.intval(12 / $row_max).' li-widget" id="widget_'.$widget['id'].'" data-id="'.$widget['id'].'">';
$info = array_merge($options, [ $info = array_merge($options, [
'id' => $widget['id'], 'id' => $widget['id'],

View File

@ -357,7 +357,7 @@ class Modules
if ($active) { if ($active) {
$result .= ' active actual'; $result .= ' active actual';
} }
$result .= '" id="'.$element['id'].'"> $result .= '" id="'.$element['id'].'" data-id="'.$element['id'].'">
<a href="'.$link.'" target="'.$target.'" > <a href="'.$link.'" target="'.$target.'" >
<i class="'.$element['icon'].'"></i> <i class="'.$element['icon'].'"></i>
<span>'.$title.'</span>'; <span>'.$title.'</span>';