60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
<div
|
|
class="oh-modal"
|
|
id="genericModal"
|
|
role="dialog"
|
|
aria-labelledby="genericModal"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="oh-modal__dialog" id="genericModalBody"></div>
|
|
</div>
|
|
|
|
<div class="oh-activity-sidebar" id="genericSidebar" style="z-index:1000;">
|
|
<div class="oh-activity-sidebar__body" id="genericOffCanvas">
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).on("htmx:afterOnLoad", function (event) {
|
|
$("[data-toggle='oh-modal-toggle']").click(function (e) {
|
|
e.preventDefault();
|
|
let clickedEl = $(e.target).closest('[data-toggle = "oh-modal-toggle"]');
|
|
if (clickedEl != null) {
|
|
const targetEl = clickedEl.data("target");
|
|
$(targetEl).addClass("oh-modal--show");
|
|
}
|
|
});
|
|
});
|
|
function switchTab(e) {
|
|
let parentContainerEl = e.target.closest(".oh-tabs");
|
|
let tabElement = e.target.closest(".oh-tabs__tab");
|
|
|
|
let targetSelector = e.target.dataset.target;
|
|
let targetEl = parentContainerEl
|
|
? parentContainerEl.querySelector(targetSelector)
|
|
: null;
|
|
|
|
// Highlight active tabs
|
|
if (tabElement && !tabElement.classList.contains("oh-tabs__tab--active")) {
|
|
parentContainerEl
|
|
.querySelectorAll(".oh-tabs__tab--active")
|
|
.forEach(function (item) {
|
|
item.classList.remove("oh-tabs__tab--active");
|
|
});
|
|
|
|
if (!tabElement.classList.contains("oh-tabs__new-tab")) {
|
|
tabElement.classList.add("oh-tabs__tab--active");
|
|
}
|
|
}
|
|
|
|
// Switch tabs
|
|
if (targetEl && !targetEl.classList.contains("oh-tabs__content--active")) {
|
|
parentContainerEl
|
|
.querySelectorAll(".oh-tabs__content--active")
|
|
.forEach(function (item) {
|
|
item.classList.remove("oh-tabs__content--active");
|
|
});
|
|
targetEl.classList.add("oh-tabs__content--active");
|
|
}
|
|
}
|
|
</script>
|