Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2026-02-04 10:35:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Div-Manager: felder kombinieren

Browse Source
This commit is contained in:
Simon Martens
2026-01-08 05:03:54 +01:00
parent ce30adaf72
commit ef8544fd83
3 changed files with 192 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
views/transform/div-menu.js
View File

@@ -3,6 +3,7 @@ const DM_STAY_ATTRIBUTE = "dm-stay";
const DM_TITLE_ATTRIBUTE = "dm-title";
const DM_MENU_BUTTON_CLASS = "dm-menu-button";
const DM_TARGET_ATTRIBUTE = "dm-target";
const DM_CHILD_TARGET_ATTRIBUTE = "data-dm-target";
const DM_MENU_CLASS = "dm-menu";
const DM_ITEM_CLASS = "dm-menu-item";
const DM_CLOSE_BUTTON_CLASS = "dm-close-button";
@@ -31,11 +32,23 @@ export class DivManager extends HTMLElement {
}
connectedCallback() {
this._target = document.getElementById(this.getAttribute(DM_TARGET_ATTRIBUTE));
if (!this._target) {
this._target = this;
}
this._cildren = Array.from(this.children)
.filter((node) => node.nodeType === Node.ELEMENT_NODE && !node.classList.contains(DM_MENU_BUTTON_CLASS))
.map((node) => {
return {
node: node,
target: () => {
const targetId = node.getAttribute(DM_CHILD_TARGET_ATTRIBUTE);
if (!targetId) {
return this._target;
}
return document.getElementById(targetId) || this._target;
},
stay: () => node.hasAttribute(DM_STAY_ATTRIBUTE) && node.getAttribute(DM_STAY_ATTRIBUTE) == "true",
hidden: () => node.classList.contains(TAILWIND_HIDDEN_CLASS),
name: () => {
@@ -49,11 +62,6 @@ export class DivManager extends HTMLElement {
};
});
this._target = document.getElementById(this.getAttribute(DM_TARGET_ATTRIBUTE));
if (!this._target) {
this._target = this;
}
this._button = this.querySelector(`.${DM_MENU_BUTTON_CLASS}`);
if (!this._button) {
console.error("DivManagerMenu needs a button element.");
@@ -207,10 +215,14 @@ export class DivManager extends HTMLElement {
// Always ensure the hidden class is added
child.node.classList.add(TAILWIND_HIDDEN_CLASS);
this._target.removeChild(child.node);
const target = child.target();
if (target && target.contains(child.node)) {
target.removeChild(child.node);
}
// INFO: the order of these matter, dont fuck it up
this.renderButton();
this.renderMenu();
this.updateTargetVisibility();
}
showDiv(event, index) {
@@ -275,27 +287,35 @@ export class DivManager extends HTMLElement {
}
insertChildInOrder(child) {
const target = child.target();
const currentIndex = this._cildren.indexOf(child);
const nextVisibleSibling = this._cildren
.slice(currentIndex + 1)
.filter((c) => c.target() === target)
.map((c) => c.node)
.find((node) => this._target.contains(node));
.find((node) => target && target.contains(node));
if (!target) {
return;
}
if (nextVisibleSibling) {
this._target.insertBefore(child.node, nextVisibleSibling);
target.insertBefore(child.node, nextVisibleSibling);
} else {
this._target.appendChild(child.node);
target.appendChild(child.node);
}
}
updateTargetVisibility() {
if (!this._target || this._target === this) {
return;
}
const hasVisibleChild = Array.from(this._target.children).some(
(node) => !node.classList.contains(TAILWIND_HIDDEN_CLASS),
const targets = new Set(
this._cildren.map((child) => child.target()).filter((target) => target && target !== this),
);
this._target.classList.toggle(TAILWIND_HIDDEN_CLASS, !hasVisibleChild);
targets.forEach((target) => {
const hasVisibleChild = Array.from(target.children).some(
(node) => !node.classList.contains(TAILWIND_HIDDEN_CLASS),
);
target.classList.toggle(TAILWIND_HIDDEN_CLASS, !hasVisibleChild);
});
}
}