Sha256: de69377b4554ddc5a0cf21af3395b9f60ca4494f2236f97a93a6d17bb691459b
Contents?: true
Size: 1.7 KB
Versions: 9
Compression:
Stored size: 1.7 KB
Contents
import tippy from "@libs/tippy";
import { CocoComponent } from "@js/coco";
export default CocoComponent("appSidebarNavItem", () => {
return {
menu: null,
menuObserver: null,
active: false,
init() {
if (this.menuTemplate) {
this.initMenu();
this.observeMenuForChanges();
}
this.$watch("mobileLayout", () => this.onOrientationChange());
},
initMenu() {
this.menu = tippy(this.$root, {
theme: "coco-naked-dropdown",
placement: this.menuPlacement,
arrow: false,
offset: [0, 0],
trigger: "click",
interactive: true,
maxWidth: null,
onShow: () => {
this.active = true;
},
onHide: () => {
this.active = false;
},
content: () => this.menuTemplate.innerHTML,
});
},
observeMenuForChanges() {
this.menuObserver = new MutationObserver((mutations) => {
this.$nextTick(() => this.menu.setContent(this.menuTemplate.innerHTML));
});
this.menuObserver.observe(this.$root, {
subtree: true,
childList: true,
});
},
onOrientationChange() {
if (this.menu) {
this.menu.setProps({
placement: this.menuPlacement,
});
}
},
destroy() {
if (this.menuObserver) {
this.menuObserver.disconnect();
}
},
root: {
["@turbo:load.document"]() {
if (this.menu) {
this.menu.hide();
}
},
":class": "{active}",
},
get menuTemplate() {
return this.$root.querySelector("template");
},
get menuPlacement() {
return this.mobileLayout ? "top" : "right-start";
},
};
});
Version data entries
9 entries across 9 versions & 1 rubygems