Refactor sorting JS (#3600)

* Refactor sorting JS

* Use <time> element for notification timestamp

* Reduce max width of modals

web/css/src/themes/default.css

@@ -1750,7 +1750,7 @@
 
 	@media (--viewport-small) {
 		min-width: 360px;
-		max-width: 550px;
+		max-width: 460px;
 	}
 }
 

web/js/src/listSorting.js

@@ -6,60 +6,59 @@ export default function handleListSorting() {
 		sort_as_int: false,
 	};
 
+	const toggleButton = document.querySelector('.js-toggle-sorting-menu');
+	const sortingMenu = document.querySelector('.js-sorting-menu');
+	const unitsContainer = document.querySelector('.units');
+
+	if (!toggleButton || !sortingMenu || !unitsContainer) {
+		return;
+	}
+
 	// Toggle dropdown button
-	document.querySelectorAll('.toolbar-sorting-toggle').forEach((toggle) => {
-		toggle.addEventListener('click', (evt) => {
-			evt.preventDefault();
-			document.querySelector('.toolbar-sorting-menu').classList.toggle('u-hidden');
-		});
+	toggleButton.addEventListener('click', () => {
+		sortingMenu.classList.toggle('u-hidden');
 	});
 
 	// "Click outside" to close dropdown
 	document.addEventListener('click', (event) => {
-		const toggleButton = document.querySelector('.toolbar-sorting-toggle');
-		const dropdown = document.querySelector('.toolbar-sorting-menu');
-
-		if (!dropdown || !toggleButton) {
-			return;
-		}
-
-		if (
-			!dropdown.contains(event.target) &&
-			!toggleButton.contains(event.target) &&
-			!dropdown.classList.contains('u-hidden')
-		) {
-			dropdown.classList.add('u-hidden');
+		const isClickInside = sortingMenu.contains(event.target) || toggleButton.contains(event.target);
+		if (!isClickInside && !sortingMenu.classList.contains('u-hidden')) {
+			sortingMenu.classList.add('u-hidden');
 		}
 	});
 
 	// Inner dropdown sorting behavior
-	document.querySelectorAll('.toolbar-sorting-menu span').forEach((span) => {
+	sortingMenu.querySelectorAll('span').forEach((span) => {
 		span.addEventListener('click', function () {
-			const menu = document.querySelector('.toolbar-sorting-menu');
-			menu.classList.toggle('u-hidden');
+			sortingMenu.classList.add('u-hidden');
 
-			if (this.classList.contains('active')) {
+			// Skip if the clicked sort is already active
+			if (span.classList.contains('active')) {
 				return;
 			}
 
-			document
-				.querySelectorAll('.toolbar-sorting-menu span')
-				.forEach((s) => s.classList.remove('active'));
-			this.classList.add('active');
-			const parentLi = this.closest('li');
+			// Remove 'active' class from all spans and add it to the clicked span
+			sortingMenu.querySelectorAll('span').forEach((s) => {
+				s.classList.remove('active');
+			});
+			span.classList.add('active');
+
+			// Update state with new sorting parameters
+			const parentLi = span.closest('li');
 			state.sort_par = parentLi.dataset.entity;
 			state.sort_as_int = Boolean(parentLi.dataset.sortAsInt);
-			state.sort_direction = this.classList.contains('up') ? 1 : -1;
+			state.sort_direction = span.classList.contains('up') ? 1 : -1;
 
-			const toggle = document.querySelector('.toolbar-sorting-toggle');
-			toggle.querySelector('b').innerHTML = parentLi.querySelector('.name').innerHTML;
-			const fas = toggle.querySelector('.fas');
-			fas.classList.remove('fa-arrow-up-a-z', 'fa-arrow-down-a-z');
-			fas.classList.add(this.classList.contains('up') ? 'fa-arrow-up-a-z' : 'fa-arrow-down-a-z');
+			// Update toggle button text and icon
+			toggleButton.querySelector('b').innerHTML = parentLi.querySelector('.name').innerHTML;
+			const faIcon = toggleButton.querySelector('.fas');
+			faIcon.classList.remove('fa-arrow-up-a-z', 'fa-arrow-down-a-z');
+			faIcon.classList.add(span.classList.contains('up') ? 'fa-arrow-up-a-z' : 'fa-arrow-down-a-z');
 
-			const units = Array.from(document.querySelectorAll('.units .l-unit')).sort((a, b) => {
-				const aAttr = a.getAttribute(state.sort_par);
-				const bAttr = b.getAttribute(state.sort_par);
+			// Sort units and reattach them to the DOM
+			const units = Array.from(document.querySelectorAll('.js-sortable-unit')).sort((a, b) => {
+				const aAttr = a.getAttribute(`data-${state.sort_par}`);
+				const bAttr = b.getAttribute(`data-${state.sort_par}`);
 
 				if (state.sort_as_int) {
 					const aInt = Number.parseInt(aAttr);
@@ -70,7 +69,6 @@ export default function handleListSorting() {
 				return aAttr <= bAttr ? state.sort_direction : state.sort_direction * -1;
 			});
 
-			const unitsContainer = document.querySelector('.units');
 			units.forEach((unit) => unitsContainer.appendChild(unit));
 		});
 	});

web/templates/includes/panel.php

@@ -96,10 +96,12 @@
 										</button>
 									</div>
 									<div x-html="notification.NOTICE"></div>
-									<p
-										x-text="`${notification.TIME} ${notification.DATE}`"
-										class="top-bar-notification-timestamp"
-									></p>
+									<p class="top-bar-notification-timestamp">
+										<time
+											:datetime="`${notification.DATE}T${notification.TIME}`"
+											x-text="`${notification.TIME} ${notification.DATE}`"
+										></time>
+									</p>
 								</li>
 							</template>
 							<template x-if="initialized && notifications.length > 2">

web/templates/pages/list_access_keys.php

@@ -11,10 +11,10 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>: <b><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
 						<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -69,10 +69,10 @@
 				$key_date = !empty($value['DATE']) ? $value['DATE'] : '-';
 				$key_time = !empty($value['TIME']) ? $value['TIME'] : '-';
 		?>
-		<div class="l-unit animate__animated animate__fadeIn"
-			sort-key="<?=strtolower($key)?>"
-			sort-comment="<?=strtolower($key_comment)?>"
-			sort-date="<?=strtotime($data[$key]['DATE'] .' '. $data[$key]['TIME'] )?>">
+		<div class="l-unit animate__animated animate__fadeIn js-sortable-unit"
+			data-sort-key="<?=strtolower($key)?>"
+			data-sort-comment="<?=strtolower($key_comment)?>"
+			data-sort-date="<?=strtotime($data[$key]['DATE'] .' '. $data[$key]['TIME'] )?>">
 
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_cron.php

@@ -19,14 +19,14 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
 					<b>
-						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
+						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Command'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-name">
 						<span class="name <?php if ($_SESSION['userSortOrder'] === 'name') { echo 'active'; } ?>"><?= _("Command") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -99,9 +99,9 @@
 				$spnd_confirmation = _('Are you sure you want to suspend the cron job?') ;
 			}
 		?>
-		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn"
-			sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
-			sort-name="<?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?>">
+		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
+			data-sort-name="<?=htmlspecialchars($data[$key]['CMD'], ENT_NOQUOTES)?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
 					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="job[]" value="<?= $key ?>" <?= $display_mode ?>>

web/templates/pages/list_db.php

@@ -38,14 +38,14 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-charset">
 						<span class="name"><?= _("Charset") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -139,13 +139,13 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 			if ($data[$key]['TYPE'] == 'pgsql') $db_admin_link = "https://".$http_host."/phppgadmin/";
 			if (($data[$key]['TYPE'] == 'pgsql') && (!empty($_SESSION['DB_PGA_ALIAS']))) $db_admin_link = $_SESSION['DB_PGA_ALIAS'];
 		?>
-		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn"
-			sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
-			sort-name="<?=$key?>"
-			sort-disk="<?=$data[$key]['U_DISK']?>"
-			sort-user="<?=$data[$key]['DBUSER']?>"
-			sort-server="<?=$data[$key]['HOST']?>"
-			sort-charset="<?=$data[$key]['CHARSET']?>">
+		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
+			data-sort-name="<?=$key?>"
+			data-sort-disk="<?=$data[$key]['U_DISK']?>"
+			data-sort-user="<?=$data[$key]['DBUSER']?>"
+			data-sort-server="<?=$data[$key]['HOST']?>"
+			data-sort-charset="<?=$data[$key]['CHARSET']?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div>
 					<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_dns.php

@@ -10,14 +10,14 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
 						<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -106,12 +106,12 @@
 				}
 			}
 		?>
-		<div class="l-unit <?php if ($status == 'suspended') echo ' l-unit--suspended'; ?> animate__animated animate__fadeIn"
-			sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>"
-			sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
-			sort-name="<?=htmlentities($key);?>"
-			sort-expire="<?=strtotime($data[$key]['EXP'])?>"
-			sort-records="<?=(int)$data[$key]['RECORDS']?>">
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+			data-sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>"
+			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
+			data-sort-name="<?=htmlentities($key);?>"
+			data-sort-expire="<?=strtotime($data[$key]['EXP'])?>"
+			data-sort-records="<?=(int)$data[$key]['RECORDS']?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
 					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?= $key ?>" <?= $display_mode ?>>

web/templates/pages/list_dns_public.php

@@ -10,14 +10,14 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
 						<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -68,33 +68,35 @@
 
 <div class="container units">
 
-<div class="l-unit animate__animated animate__fadeIn">
-	<div class="l-unit__col l-unit__col--right">
-		<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("DNSKEY Record") ?></b></div>
-		<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["RECORD"]; ?>"></b></div>
+	<div class="l-unit animate__animated animate__fadeIn js-sortable-unit">
+		<div class="l-unit__col l-unit__col--right">
+			<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("DNSKEY Record") ?></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["RECORD"]; ?>"></b></div>
+		</div>
 	</div>
-</div>
-<div class="l-unit animate__animated animate__fadeIn">
-	<div class="l-unit__col l-unit__col--right">
-		<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("DS Record") ?></b></div>
-		<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["DS"]; ?>"></b></div>
+	<div class="l-unit animate__animated animate__fadeIn js-sortable-unit">
+		<div class="l-unit__col l-unit__col--right">
+			<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("DS Record") ?></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["DS"]; ?>"></b></div>
+		</div>
 	</div>
-</div>
-<div class="l-unit animate__animated animate__fadeIn">
-	<div class="l-unit__col l-unit__col--right">
-		<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Public Key") ?></b></div>
-		<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["KEY"]; ?>"></b></div>
+	<div class="l-unit animate__animated animate__fadeIn js-sortable-unit">
+		<div class="l-unit__col l-unit__col--right">
+			<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Public Key") ?></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $data[$domain]["KEY"]; ?>"></b></div>
+		</div>
 	</div>
-</div>
-<div class="l-unit animate__animated animate__fadeIn">
-	<div class="l-unit__col l-unit__col--right">
-		<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Key Tag / Flag") ?></b></div>
-		<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $flag; ?>"></b></div>
+	<div class="l-unit animate__animated animate__fadeIn js-sortable-unit">
+		<div class="l-unit__col l-unit__col--right">
+			<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Key Tag / Flag") ?></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $flag; ?>"></b></div>
+		</div>
 	</div>
-</div>
-<div class="l-unit animate__animated animate__fadeIn">
-	<div class="l-unit__col l-unit__col--right">
-		<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Algorithm") ?></b></div>
-		<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $algorithm; ?>"></b></div>
+	<div class="l-unit animate__animated animate__fadeIn js-sortable-unit">
+		<div class="l-unit__col l-unit__col--right">
+			<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b><?= _("Algorithm") ?></b></div>
+			<div class="clearfix l-unit__stat-col--left wide-3"><b><input type="text" class="form-control" value="<?php echo $algorithm; ?>"></b></div>
+		</div>
 	</div>
+
 </div>

web/templates/pages/list_dns_rec.php

@@ -16,14 +16,14 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Record'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
 						<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -97,12 +97,12 @@
 
 			}
 		?>
-		<div class="l-unit<?php if ($status == 'suspended') echo ' l-unit--suspended';?> animate__animated animate__fadeIn"
-			sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
-			sort-record="<?=$data[$key]['RECORD']?>"
-			sort-type="<?=$data[$key]['TYPE']?>"
-			sort-ttl="<?=$data[$key]['TTL']?>"
-			sort-value="<?=$data[$key]['VALUE']?>">
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn js-sortable-unit"
+			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
+			data-sort-record="<?=$data[$key]['RECORD']?>"
+			data-sort-type="<?=$data[$key]['TYPE']?>"
+			data-sort-ttl="<?=$data[$key]['TTL']?>"
+			data-sort-value="<?=$data[$key]['VALUE']?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
 					<input id="check<?= $data[$key]["ID"] ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="record[]" value="<?= $data[$key]["ID"] ?>" <?= $display_mode ?>>

web/templates/pages/list_firewall.php

@@ -19,10 +19,10 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>: <b><?= _("Action") ?> <i class="fas fa-arrow-up-a-z"></i></b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-action">
 						<span class="name"><?= _("Action") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up active"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -88,9 +88,12 @@
 				$spnd_confirmation = _('Are you sure you want to suspend rule #%s?') ;
 			}
 		?>
-		<div class="l-unit<?php if ($status == 'suspended') echo ' l-unit--suspended';?> animate__animated animate__fadeIn"
-			sort-action="<?=$data[$key]['ACTION']?>" sort-protocol="<?=$data[$key]['PROTOCOL']?>" sort-port="<?=$data[$key]['PORT']?>"
-			sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>" sort-comment="<?=$data[$key]['COMMENT']?>">
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+			data-sort-action="<?=$data[$key]['ACTION']?>"
+			data-sort-protocol="<?=$data[$key]['PROTOCOL']?>"
+			data-sort-port="<?=$data[$key]['PORT']?>"
+			data-sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>"
+			data-sort-comment="<?=$data[$key]['COMMENT']?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div>
 					<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_ip.php

@@ -11,10 +11,10 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>: <b><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
 						<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -74,13 +74,13 @@
 		foreach ($data as $key => $value) {
 			++$i;
 		?>
-		<div class="l-unit animate__animated animate__fadeIn"
-			sort-ip="<?=str_replace('.', '', $key)?>"
-			sort-date="<?=strtotime($data[$key]['DATE'] .' '. $data[$key]['TIME'] )?>"
-			sort-netmask="<?=str_replace('.', '', $data[$key]['NETMASK'])?>"
-			sort-interface="<?=$data[$key]['INTERFACE']?>"
-			sort-domains="<?=$data[$key]['U_WEB_DOMAINS']?>"
-			sort-owner="<?=$data[$key]['OWNER']?>">
+		<div class="l-unit animate__animated animate__fadeIn js-sortable-unit"
+			data-sort-ip="<?=str_replace('.', '', $key)?>"
+			data-sort-date="<?=strtotime($data[$key]['DATE'] .' '. $data[$key]['TIME'] )?>"
+			data-sort-netmask="<?=str_replace('.', '', $data[$key]['NETMASK'])?>"
+			data-sort-interface="<?=$data[$key]['INTERFACE']?>"
+			data-sort-domains="<?=$data[$key]['U_WEB_DOMAINS']?>"
+			data-sort-owner="<?=$data[$key]['OWNER']?>">
 
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_mail.php

@@ -10,14 +10,14 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-accounts" data-sort-as-int="1">
 						<span class="name"><?= _("Accounts") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -144,11 +144,11 @@
 				$data[$key]['CATCHALL'] = '/dev/null';
 			}
 		?>
-		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn"
-			sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
-			sort-name="<?=$key?>"
-			sort-disk="<?=$data[$key]['U_DISK']?>"
-			sort-accounts="<?=$data[$key]['ACCOUNTS']?>">
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
+			data-sort-name="<?=$key?>"
+			data-sort-disk="<?=$data[$key]['U_DISK']?>"
+			data-sort-accounts="<?=$data[$key]['ACCOUNTS']?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div>
 					<div class="clearfix l-unit__stat-col--left super-compact">

web/templates/pages/list_mail_acc.php

@@ -22,14 +22,14 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
 						<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -139,11 +139,11 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 				}
 			}
 		?>
-		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn"
-			sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
-			sort-name="<?=$key?>"
-			sort-disk="<?=$data[$key]['U_DISK']?>"
-			sort-quota="<?=$data[$key]['QUOTA']?>">
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
+			data-sort-name="<?=$key?>"
+			data-sort-disk="<?=$data[$key]['U_DISK']?>"
+			data-sort-quota="<?=$data[$key]['QUOTA']?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
 					<input id="check<?=$i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="account[]" value="<?=$key?>" <?=$display_mode;?>>

web/templates/pages/list_packages.php

@@ -11,14 +11,14 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
 						<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -70,11 +70,11 @@
 		foreach ($data as $key => $value) {
 			++$i;
 		?>
-		<div class="l-unit animate__animated animate__fadeIn"
-			sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
-			sort-name="<?=$key?>"
-			sort-bandwidth="<?=$data[$key]['BANDWIDTH']?>"
-			sort-disk="<?=$data[$key]['DISK_QUOTA']?>">
+		<div class="l-unit animate__animated animate__fadeIn js-sortable-unit"
+			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
+			data-sort-name="<?=$key?>"
+			data-sort-bandwidth="<?=$data[$key]['BANDWIDTH']?>"
+			data-sort-disk="<?=$data[$key]['DISK_QUOTA']?>">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
 					<input id="check<?=$i?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="package[]" value="<?=$key?>">

web/templates/pages/list_search.php

@@ -11,10 +11,10 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>: <b><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-date" data-sort-as-int="1">
 						<span class="name <?php if ($_SESSION['userSortOrder'] === 'date') { echo 'active'; } ?>"><?= _("Date") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -77,14 +77,13 @@
 			}
 			$uniq_id .= sha1($value['RESULT']);
 		?>
-		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn"
-			id="web-unit-<?=$i?>"
-			uniq-id="<?=$uniq_id?>"
-			sort-date="<?=strtotime($value['DATE'].' '.$value['TIME'])?>"
-			sort-name="<?=$value['RESULT']?>"
-			sort-type="<?=_($object)?>"
-			sort-owner="<?=$value['USER']?>"
-			sort-status="<?=$status?>"
+		<div class="l-unit <?php if($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+			data-uniq-id="<?=$uniq_id?>"
+			data-sort-date="<?=strtotime($value['DATE'].' '.$value['TIME'])?>"
+			data-sort-name="<?=$value['RESULT']?>"
+			data-sort-type="<?=_($object)?>"
+			data-sort-owner="<?=$value['USER']?>"
+			data-sort-status="<?=$status?>"
 			style="<?php if (($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes') && ($value['USER']) === 'admin') { echo 'display: none;';}?>">
 
 			<div class="l-unit__col l-unit__col--right">

web/templates/pages/list_services.php

@@ -134,10 +134,10 @@
 				if ($cpu == '0.0')	$cpu = 0;
 			?>
 			<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn"
-				sort-name="<?=strtolower($key)?>"
-				sort-memory="<?=$data[$key]['MEM']?>"
-				sort-cpu="<?=$cpu;?>"
-				sort-uptime="<?=$data[$key]['RTIME']?>">
+				data-sort-name="<?=strtolower($key)?>"
+				data-sort-memory="<?=$data[$key]['MEM']?>"
+				data-sort-cpu="<?=$cpu;?>"
+				data-sort-uptime="<?=$data[$key]['RTIME']?>">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
 						<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="service[]" value="<?= $key ?>">

web/templates/pages/list_user.php

@@ -11,14 +11,14 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = _('Name'); } else { $label = _('Date'); } ?>
 						<?=$label;?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-bandwidth" data-sort-as-int="1">
 						<span class="name"><?= _("Bandwidth") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -107,11 +107,11 @@
 				$spnd_confirmation = _('Are you sure you want to suspend user %s?');
 			}
 		?>
-		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended';?> animate__animated animate__fadeIn"
-			sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
-			sort-name="<?=strtolower($key)?>"
-			sort-bandwidth="<?=$data[$key]['U_BANDWIDTH']?>"
-			sort-disk="<?=$data[$key]['U_DISK']?>">
+		<div class="l-unit <?php if ($status == 'suspended') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+			data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
+			data-sort-name="<?=strtolower($key)?>"
+			data-sort-bandwidth="<?=$data[$key]['U_BANDWIDTH']?>"
+			data-sort-disk="<?=$data[$key]['U_DISK']?>">
 			<div class="l-unit__col l-unit__col--right" style="<?php if (($_SESSION['POLICY_SYSTEM_HIDE_ADMIN'] === 'yes') && ($_SESSION['user'] !== 'admin') && ($key === 'admin')) { echo 'display: none';} ?>">
 				<div class="clearfix l-unit__stat-col--left super-compact">
 					<input id="check<?= $i ?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="user[]" value="<?= $key ?>">

web/templates/pages/list_web.php

@@ -10,14 +10,14 @@
 		</div>
 		<div class="toolbar-right">
 			<div class="toolbar-sorting">
-				<button class="toolbar-sorting-toggle" type="button" title="<?= _("Sort items") ?>">
+				<button class="toolbar-sorting-toggle js-toggle-sorting-menu" type="button" title="<?= _("Sort items") ?>">
 					<?= _("Sort by") ?>:
 					<b>
 						<?php if ($_SESSION['userSortOrder'] === 'name') { $label = ('Name'); } else { $label = _('Date'); } ?>
 						<?=$label?> <i class="fas fa-arrow-down-a-z"></i>
 					</b>
 				</button>
-				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn u-hidden">
+				<ul class="toolbar-sorting-menu animate__animated animate__fadeIn js-sorting-menu u-hidden">
 					<li data-entity="sort-bandwidth" data-sort-as-int="1">
 						<span class="name"><?= _("Bandwidth") ?> <i class="fas fa-arrow-down-a-z"></i></span><span class="up"><i class="fas fa-arrow-up-a-z"></i></span>
 					</li>
@@ -174,12 +174,12 @@
 					}
 				}
 			?>
-			<div class="l-unit <?php if ($data[$key]['SUSPENDED'] == 'yes') echo 'l-unit--suspended';?> animate__animated animate__fadeIn"
-				id="web-unit-<?=$i?>"
-				sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>"
-				sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
-				sort-name="<?=$key?>" sort-bandwidth="<?=$data[$key]['U_BANDWIDTH']?>"
-				sort-disk="<?=$data[$key]['U_DISK']?>">
+			<div class="l-unit <?php if ($data[$key]['SUSPENDED'] == 'yes') echo 'l-unit--suspended'; ?> animate__animated animate__fadeIn js-sortable-unit"
+				data-sort-ip="<?=str_replace('.', '', $data[$key]['IP'])?>"
+				data-sort-date="<?=strtotime($data[$key]['DATE'].' '.$data[$key]['TIME'])?>"
+				data-sort-name="<?=$key?>"
+				data-sort-bandwidth="<?=$data[$key]['U_BANDWIDTH']?>"
+				data-sort-disk="<?=$data[$key]['U_DISK']?>">
 				<div class="l-unit__col l-unit__col--right">
 					<div class="clearfix l-unit__stat-col--left super-compact">
 						<input id="check<?=$i?>" class="ch-toggle" type="checkbox" title="<?= _("Select") ?>" name="domain[]" value="<?=$key?>" <?=$display_mode;?>>