Skip to content

Commit d4c81e7

Browse files
AlecRustAlecRust
authored
Replace jQuery UI tabs with vanilla JS (hestiacp#3413)
1 parent e4cfdf4 commit d4c81e7

13 files changed

Lines changed: 137 additions & 143 deletions

File tree

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

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎web/css/src/themes/dark.css‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -805,25 +805,25 @@ strong {
805805
border-bottom: 1px solid #353535;
806806
}
807807

808-
.cron-helper-panel {
808+
/* Tabs component
809+
========================================================================== */
810+
811+
.tabs {
809812
box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
810813
border-color: #606060;
811814
background-color: #454545;
815+
}
812816

813-
& .ui-tabs-tab a {
814-
color: #cacaca;
815-
816-
&:hover {
817-
color: #ff3478;
818-
}
817+
.tabs-item {
818+
color: #cacaca;
819819

820-
&:active {
821-
color: #3b9de8;
822-
}
820+
&:hover,
821+
&[aria-selected="true"] {
822+
color: #ff3478;
823823
}
824824

825-
& .ui-tabs-tab[aria-expanded="true"] a {
826-
color: #ff3478;
825+
&:active {
826+
color: #3b9de8;
827827
}
828828
}
829829

‎web/css/src/themes/default.css‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
@import url("@fortawesome/fontawesome-free/css/brands");
44
@import url("@fortawesome/fontawesome-free/css/solid");
55
@import url("../dependencies/animate");
6-
@import url("../dependencies/jquery-ui");
76
@import url("../media_queries");
87
@import url("../fonts");
98
@import url("../base");
@@ -2354,32 +2353,50 @@
23542353
color: #c0c0c0;
23552354
}
23562355

2357-
.cron-helper-panel {
2356+
/* Tabs component
2357+
========================================================================== */
2358+
2359+
.tabs {
23582360
border: 1px solid #cfcfcf;
23592361
border-radius: var(--border-radius-base);
23602362
box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
2361-
margin-top: 20px;
2363+
padding: 10px;
2364+
}
23622365

2363-
& .ui-tabs-tab a {
2364-
color: #777;
2365-
font-weight: 600;
2366-
line-height: 30px;
2367-
padding: 0 12px;
2368-
text-transform: uppercase;
2366+
.tabs-items {
2367+
display: flex;
2368+
flex-wrap: wrap;
2369+
}
23692370

2370-
&:hover {
2371-
color: #c36;
2372-
}
2371+
.tabs-item {
2372+
border: 0;
2373+
background-color: transparent;
2374+
text-transform: uppercase;
2375+
font-weight: 600;
2376+
color: #777;
2377+
padding: 10px;
23732378

2374-
&:active {
2375-
color: #3b9de8;
2376-
}
2379+
&:hover,
2380+
&[aria-selected="true"] {
2381+
color: #c36;
23772382
}
23782383

2379-
& .ui-tabs-tab[aria-expanded="true"] a {
2380-
color: #c36;
2384+
&:active {
2385+
color: #3b9de8;
23812386
}
23822387

2388+
@media (--viewport-medium) {
2389+
margin-right: 10px;
2390+
}
2391+
}
2392+
2393+
.tabs-panel {
2394+
padding: 10px;
2395+
}
2396+
2397+
.cron-tabs {
2398+
margin-top: 20px;
2399+
23832400
@media (--viewport-medium) {
23842401
margin-top: 25px;
23852402

‎web/css/src/themes/vestia.css‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -411,22 +411,24 @@ strong {
411411
}
412412
}
413413

414-
.cron-helper-panel {
414+
/* Tabs component
415+
========================================================================== */
416+
417+
.tabs {
415418
border-radius: 0;
416419
box-shadow: none;
420+
}
417421

418-
& .ui-tabs-tab a {
419-
&:hover {
420-
color: #f79b44;
421-
}
422+
.tabs-item {
423+
color: #777;
422424

423-
&:active {
424-
color: #e95e00;
425-
}
425+
&:hover,
426+
&[aria-selected="true"] {
427+
color: #ff6701;
426428
}
427429

428-
& .ui-tabs-tab[aria-expanded="true"] a {
429-
color: #ff6701;
430+
&:active {
431+
color: #e95e00;
430432
}
431433
}
432434

‎web/css/themes/dark.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/themes/default.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/themes/vestia.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/js/pages/add_cron.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,29 @@
11
document.addEventListener('DOMContentLoaded', () => {
2-
// TODO: Replace jQuery UI tabs with something else
3-
$('.js-cron-tabs').tabs();
2+
const tabs = document.querySelector('.js-tabs');
3+
if (tabs) {
4+
const tabItems = tabs.querySelectorAll('.tabs-item');
5+
const panels = tabs.querySelectorAll('.tabs-panel');
6+
tabItems.forEach((tab) => {
7+
tab.addEventListener('click', (event) => {
8+
// Reset state
9+
panels.forEach((panel) => (panel.hidden = true));
10+
tabItems.forEach((tab) => {
11+
tab.setAttribute('aria-selected', false);
12+
tab.setAttribute('tabindex', -1);
13+
});
14+
15+
// Show the selected panel
16+
const tabId = event.target.getAttribute('id');
17+
const panel = document.querySelector(`[aria-labelledby="${tabId}"]`);
18+
panel.hidden = false;
19+
20+
// Mark the selected tab as active
21+
event.target.setAttribute('aria-selected', true);
22+
event.target.setAttribute('tabindex', 0);
23+
event.target.focus();
24+
});
25+
});
26+
}
427

528
const generateCronButtons = document.querySelectorAll('.js-generate-cron');
629
generateCronButtons.forEach((button) => {

‎web/js/pages/edit_cron.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,29 @@
11
document.addEventListener('DOMContentLoaded', () => {
2-
// TODO: Replace jQuery UI tabs with something else
3-
$('.js-cron-tabs').tabs();
2+
const tabs = document.querySelector('.js-tabs');
3+
if (tabs) {
4+
const tabItems = tabs.querySelectorAll('.tabs-item');
5+
const panels = tabs.querySelectorAll('.tabs-panel');
6+
tabItems.forEach((tab) => {
7+
tab.addEventListener('click', (event) => {
8+
// Reset state
9+
panels.forEach((panel) => (panel.hidden = true));
10+
tabItems.forEach((tab) => {
11+
tab.setAttribute('aria-selected', false);
12+
tab.setAttribute('tabindex', -1);
13+
});
14+
15+
// Show the selected panel
16+
const tabId = event.target.getAttribute('id');
17+
const panel = document.querySelector(`[aria-labelledby="${tabId}"]`);
18+
panel.hidden = false;
19+
20+
// Mark the selected tab as active
21+
event.target.setAttribute('aria-selected', true);
22+
event.target.setAttribute('tabindex', 0);
23+
event.target.focus();
24+
});
25+
});
26+
}
427

528
const generateCronButtons = document.querySelectorAll('.js-generate-cron');
629
generateCronButtons.forEach((button) => {

‎web/js/vendor/jquery-ui.min.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)