Replace jQuery UI tabs with vanilla JS (hestiacp#3413)

Author: AlecRust

web/css/src/dependencies/jquery-ui.css

@@ -805,25 +805,25 @@ strong {
 	border-bottom: 1px solid #353535;
 }
 
-.cron-helper-panel {
+/* Tabs component
+   ========================================================================== */
+
+.tabs {
 	box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
 	border-color: #606060;
 	background-color: #454545;
+}
 
-	& .ui-tabs-tab a {
-		color: #cacaca;
-
-		&:hover {
-			color: #ff3478;
-		}
+.tabs-item {
+	color: #cacaca;
 
-		&:active {
-			color: #3b9de8;
-		}
+	&:hover,
+	&[aria-selected="true"] {
+		color: #ff3478;
 	}
 
-	& .ui-tabs-tab[aria-expanded="true"] a {
-		color: #ff3478;
+	&:active {
+		color: #3b9de8;
 	}
 }
 

web/css/src/themes/dark.css

@@ -3,7 +3,6 @@
 @import url("@fortawesome/fontawesome-free/css/brands");
 @import url("@fortawesome/fontawesome-free/css/solid");
 @import url("../dependencies/animate");
-@import url("../dependencies/jquery-ui");
 @import url("../media_queries");
 @import url("../fonts");
 @import url("../base");
@@ -2354,32 +2353,50 @@
 	color: #c0c0c0;
 }
 
-.cron-helper-panel {
+/* Tabs component
+   ========================================================================== */
+
+.tabs {
 	border: 1px solid #cfcfcf;
 	border-radius: var(--border-radius-base);
 	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
-	margin-top: 20px;
+	padding: 10px;
+}
 
-	& .ui-tabs-tab a {
-		color: #777;
-		font-weight: 600;
-		line-height: 30px;
-		padding: 0 12px;
-		text-transform: uppercase;
+.tabs-items {
+	display: flex;
+	flex-wrap: wrap;
+}
 
-		&:hover {
-			color: #c36;
-		}
+.tabs-item {
+	border: 0;
+	background-color: transparent;
+	text-transform: uppercase;
+	font-weight: 600;
+	color: #777;
+	padding: 10px;
 
-		&:active {
-			color: #3b9de8;
-		}
+	&:hover,
+	&[aria-selected="true"] {
+		color: #c36;
 	}
 
-	& .ui-tabs-tab[aria-expanded="true"] a {
-		color: #c36;
+	&:active {
+		color: #3b9de8;
 	}
 
+	@media (--viewport-medium) {
+		margin-right: 10px;
+	}
+}
+
+.tabs-panel {
+	padding: 10px;
+}
+
+.cron-tabs {
+	margin-top: 20px;
+
 	@media (--viewport-medium) {
 		margin-top: 25px;
 

web/css/src/themes/default.css

@@ -411,22 +411,24 @@ strong {
 	}
 }
 
-.cron-helper-panel {
+/* Tabs component
+   ========================================================================== */
+
+.tabs {
 	border-radius: 0;
 	box-shadow: none;
+}
 
-	& .ui-tabs-tab a {
-		&:hover {
-			color: #f79b44;
-		}
+.tabs-item {
+	color: #777;
 
-		&:active {
-			color: #e95e00;
-		}
+	&:hover,
+	&[aria-selected="true"] {
+		color: #ff6701;
 	}
 
-	& .ui-tabs-tab[aria-expanded="true"] a {
-		color: #ff6701;
+	&:active {
+		color: #e95e00;
 	}
 }
 

web/css/src/themes/vestia.css

@@ -1,6 +1,29 @@
 document.addEventListener('DOMContentLoaded', () => {
-	// TODO: Replace jQuery UI tabs with something else
-	$('.js-cron-tabs').tabs();
+	const tabs = document.querySelector('.js-tabs');
+	if (tabs) {
+		const tabItems = tabs.querySelectorAll('.tabs-item');
+		const panels = tabs.querySelectorAll('.tabs-panel');
+		tabItems.forEach((tab) => {
+			tab.addEventListener('click', (event) => {
+				// Reset state
+				panels.forEach((panel) => (panel.hidden = true));
+				tabItems.forEach((tab) => {
+					tab.setAttribute('aria-selected', false);
+					tab.setAttribute('tabindex', -1);
+				});
+
+				// Show the selected panel
+				const tabId = event.target.getAttribute('id');
+				const panel = document.querySelector(`[aria-labelledby="${tabId}"]`);
+				panel.hidden = false;
+
+				// Mark the selected tab as active
+				event.target.setAttribute('aria-selected', true);
+				event.target.setAttribute('tabindex', 0);
+				event.target.focus();
+			});
+		});
+	}
 
 	const generateCronButtons = document.querySelectorAll('.js-generate-cron');
 	generateCronButtons.forEach((button) => {

web/css/themes/dark.min.css

@@ -1,6 +1,29 @@
 document.addEventListener('DOMContentLoaded', () => {
-	// TODO: Replace jQuery UI tabs with something else
-	$('.js-cron-tabs').tabs();
+	const tabs = document.querySelector('.js-tabs');
+	if (tabs) {
+		const tabItems = tabs.querySelectorAll('.tabs-item');
+		const panels = tabs.querySelectorAll('.tabs-panel');
+		tabItems.forEach((tab) => {
+			tab.addEventListener('click', (event) => {
+				// Reset state
+				panels.forEach((panel) => (panel.hidden = true));
+				tabItems.forEach((tab) => {
+					tab.setAttribute('aria-selected', false);
+					tab.setAttribute('tabindex', -1);
+				});
+
+				// Show the selected panel
+				const tabId = event.target.getAttribute('id');
+				const panel = document.querySelector(`[aria-labelledby="${tabId}"]`);
+				panel.hidden = false;
+
+				// Mark the selected tab as active
+				event.target.setAttribute('aria-selected', true);
+				event.target.setAttribute('tabindex', 0);
+				event.target.focus();
+			});
+		});
+	}
 
 	const generateCronButtons = document.querySelectorAll('.js-generate-cron');
 	generateCronButtons.forEach((button) => {