62 lines
2.1 KiB
JavaScript
62 lines
2.1 KiB
JavaScript
// Hook for custom liveview bootstrap collapse handling
|
|
import Collapse from "bootstrap/js/dist/collapse";
|
|
|
|
export const BsCollapse = {
|
|
mounted() {
|
|
// when the liveview mounts, create the BS collapse object
|
|
const collapse = new Collapse(this.el, { toggle: false });
|
|
|
|
this.handleEvent("toggle-template-details", ({ targetId }) => {
|
|
if (this.el.id == targetId) {
|
|
collapse.toggle();
|
|
}
|
|
});
|
|
|
|
// this.el.addEventListener("show.bs.collapse", (event) => {
|
|
// this.pushEvent("collapse-show", { target_id: event.target.id });
|
|
// });
|
|
|
|
this.el.addEventListener("shown.bs.collapse", (event) => {
|
|
this.pushEvent("collapse-shown", { target_id: event.target.id });
|
|
});
|
|
|
|
// this.el.addEventListener("hide.bs.collapse", (event) => {
|
|
// this.pushEvent("collapse-hide", { target_id: event.target.id });
|
|
// });
|
|
|
|
this.el.addEventListener("hidden.bs.collapse", (event) => {
|
|
this.pushEvent("collapse-hidden", { target_id: event.target.id });
|
|
});
|
|
},
|
|
};
|
|
|
|
// export const BsModal = {
|
|
// mounted() {
|
|
// // when the liveview mounts, create the BS modal
|
|
// const modal = new Modal(this.el);
|
|
// // and trigger BS modal to show
|
|
// modal.show();
|
|
|
|
// // when the BS modal hides, send 'close' to the liveview
|
|
// this.el.addEventListener("hidden.bs.modal", (event) => {
|
|
// this.pushEventTo(`#${this.el.getAttribute("id")}`, "close", {});
|
|
// modal.dispose();
|
|
// });
|
|
|
|
// // liveview can send this event to tell BS modal to close
|
|
// // ex.: on successful form save, instead of immediate redirect
|
|
// // this event hides the BS modal, which triggers the above,
|
|
// // which sends 'close' to liveview and disposes the BS modal
|
|
// this.handleEvent("modal-please-hide", (payload) => {
|
|
// modal.hide();
|
|
// });
|
|
// },
|
|
|
|
// destroyed() {
|
|
// // when the liveview is destroyed,
|
|
// // modal-backdrop must be forcibly removed
|
|
// const backdrop = document.querySelector(".modal-backdrop");
|
|
// if (backdrop) backdrop.parentElement.removeChild(backdrop);
|
|
// },
|
|
// };
|