69 lines
2.2 KiB
HTML
69 lines
2.2 KiB
HTML
<div class="oh-modal" id="deleteConfirmation" role="dialog" aria-labelledby="deleteConfirmation" aria-hidden="true">
|
|
<div class="oh-modal__dialog oh-modal__dialog--custom" id="deleteConfirmationBody">
|
|
</div>
|
|
</div>
|
|
|
|
<button hx-get="{% url "generic-delete" %}?model=employee.Employee&pk=13" hx-target="#deleteConfirmationBody" data-toggle="oh-modal-toggle" data-target="#deleteConfirmation">
|
|
Delete
|
|
</button>
|
|
|
|
<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>
|