Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2025-10-28 16:55:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

divmenu

Browse Source
This commit is contained in:
Simon Martens
2025-06-03 23:37:43 +02:00
parent 94be51b318
commit 4cf1c2ffd3
1 changed files with 103 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,4 @@
const TS_MENU_COMPONENT = "ts-menu";
const TS_TOGGLE_BUTTON = "ts-menu-toggle-button";
const USER_PROVIDED_MENU_BUTTON_CLASS = "div-menu-button";
const TS_POPUP = "ts-menu-popup";
const TS_LIST = "ts-menu-list";
const TS_PLACEHOLDER_MESSAGE = "ts-menu-placeholder-message";
@@ -8,6 +7,16 @@ const TS_ITEM_ACTION = "ts-menu-item-action";
const TS_ITEM_IS_SELECTED = "ts-item-is-selected";
const TS_CONTENT_CLOSE_BUTTON = "ts-content-close-button";
const TAILWIND_HIDDEN_CLASS = "hidden";
const TS_MENU_BUTTON_STATE_DISABLED = "ts-menu-button--disabled";
// New constants for menu label states
const TS_MENU_LABEL_IN_MENU_STATE = "ts-menu-label--in-menu";
const TS_MENU_LABEL_DISPLAYED_STATE = "ts-menu-label--displayed";
//
// Prereq: child divs must have prop data-value, and a label element
// the label element must have class "menu-label"
// The child divs will be moved to the target element when selected
// The target element must be specified by the attribute target-id on the custom element
// The menu button must have the class div-menu-button
export class DivMenu extends HTMLElement {
constructor() {
@@ -17,6 +26,7 @@ export class DivMenu extends HTMLElement {
this._originalChildDivs = [];
this._observer = null;
this._menuPlaceholderMessageElement = null;
this._menuButton = null;
this._toggleMenu = this._toggleMenu.bind(this);
this._handleMenuItemClick = this._handleMenuItemClick.bind(this);
@@ -25,29 +35,33 @@ export class DivMenu extends HTMLElement {
this._handleMutations = this._handleMutations.bind(this);
this._checkMenuPlaceholderAndButton = this._checkMenuPlaceholderAndButton.bind(this);
this._clearFormElements = this._clearFormElements.bind(this);
this._refreshTargetOrder = this._refreshTargetOrder.bind(this); // Bind new method
}
connectedCallback() {
this._originalChildDivs = Array.from(this.children).filter((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName === "DIV");
this._menuButton = this.querySelector(`.${USER_PROVIDED_MENU_BUTTON_CLASS}`);
if (!this._menuButton) {
console.error(`TabSelectorMenu: User-provided menu button with class '${USER_PROVIDED_MENU_BUTTON_CLASS}' not found.`);
}
this._originalChildDivs = Array.from(this.children).filter((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName === "DIV" && !node.classList.contains(USER_PROVIDED_MENU_BUTTON_CLASS));
this._originalChildDivs.forEach((div) => div.remove());
const componentHTML = `
<button type="button" class="${TS_TOGGLE_BUTTON}">Options</button>
const componentPopupHTML = `
<div class="${TS_POPUP}">
<ul class="${TS_LIST}">
<li class="${TS_PLACEHOLDER_MESSAGE}">All items are currently shown.</li>
</ul>
</div>
`;
this.innerHTML = componentHTML;
this.insertAdjacentHTML("beforeend", componentPopupHTML);
this._menuButton = this.querySelector(`.${TS_TOGGLE_BUTTON}`);
this._menuPopupElement = this.querySelector(`.${TS_POPUP}`);
this._menuListElement = this.querySelector(`.${TS_LIST}`);
this._menuPlaceholderMessageElement = this.querySelector(`.${TS_PLACEHOLDER_MESSAGE}`);
if (!this._menuButton || !this._menuPopupElement || !this._menuListElement || !this._menuPlaceholderMessageElement) {
console.error("CRITICAL: Essential parts missing after creating component from string.");
if (!this._menuPopupElement || !this._menuListElement || !this._menuPlaceholderMessageElement) {
console.error("CRITICAL: Popup structure parts missing.");
return;
}
@@ -62,7 +76,6 @@ export class DivMenu extends HTMLElement {
this._observer = new MutationObserver(this._handleMutations);
this._originalChildDivs.forEach((sourceDiv) => {
// Use a specific class for the menu label to distinguish from form labels
const menuLabelElement = sourceDiv.querySelector("label.menu-label");
const itemValue = sourceDiv.dataset.value;
@@ -97,6 +110,7 @@ export class DivMenu extends HTMLElement {
sourceDiv,
menuItemButton: addedMenuItemButton,
menuListItem: addedMenuItemButton.parentElement,
menuLabelElement: menuLabelElement,
selected: isInitiallySelected,
});
@@ -104,13 +118,14 @@ export class DivMenu extends HTMLElement {
});
this._menuItemsMap.forEach((itemData) => {
if (itemData.selected) {
this._updateItemState(itemData, false, true);
}
this._updateItemState(itemData, false, true);
});
// _refreshTargetOrder() is called within _updateItemState, so target should be correct.
this._checkMenuPlaceholderAndButton();
this._menuButton.addEventListener("click", this._toggleMenu);
if (this._menuButton) {
this._menuButton.addEventListener("click", this._toggleMenu);
}
this._menuListElement.addEventListener("click", this._handleMenuItemClick);
document.addEventListener("click", this._handleClickOutside);
}
@@ -126,11 +141,13 @@ export class DivMenu extends HTMLElement {
closeButton.removeEventListener("click", this._handleContentClose);
}
});
if (this._menuButton) {
this._menuButton.removeEventListener("click", this._toggleMenu);
}
}
_clearFormElements(parentElement) {
if (!parentElement) return;
const inputs = parentElement.querySelectorAll("input, textarea, select");
inputs.forEach((el) => {
switch (el.type) {
@@ -141,10 +158,6 @@ export class DivMenu extends HTMLElement {
break;
case "checkbox":
case "radio":
// For radios, only uncheck if it's the one that was checked.
// For checkboxes, this is fine.
// A more robust radio reset might involve finding the default or unchecking all in group.
// For simplicity here, just unchecking.
el.checked = false;
break;
case "file":
@@ -153,11 +166,45 @@ export class DivMenu extends HTMLElement {
default:
el.value = "";
}
if (el.tagName === "SELECT") {
el.selectedIndex = 0; // Reset to the first option (often a placeholder)
// or -1 to clear completely if no placeholder.
if (el.tagName === "SELECT") el.selectedIndex = 0;
});
}
_refreshTargetOrder() {
if (!this._targetElement) return;
// Detach all currently managed divs from target
const managedDivsInTarget = [];
this._menuItemsMap.forEach((item) => {
if (item.sourceDiv.parentElement === this._targetElement) {
managedDivsInTarget.push(item.sourceDiv);
}
});
managedDivsInTarget.forEach((div) => this._targetElement.removeChild(div));
// Remove existing component-managed placeholder if any
const existingPlaceholder = this._targetElement.querySelector(`.${TS_TARGET_PLACEHOLDER_CLASS}`);
if (existingPlaceholder) {
this._targetElement.removeChild(existingPlaceholder);
}
// Append selected divs in their original order
let hasSelectedItems = false;
this._menuItemsMap.forEach((item) => {
if (item.selected) {
item.sourceDiv.classList.remove(TAILWIND_HIDDEN_CLASS); // Ensure it's visible
this._targetElement.appendChild(item.sourceDiv);
hasSelectedItems = true;
}
});
// Add placeholder if target is empty and no items were selected to be appended
if (!hasSelectedItems) {
const placeholder = document.createElement("p");
placeholder.className = TS_TARGET_PLACEHOLDER_CLASS;
placeholder.innerHTML = "<em>Selected content will appear here.</em>";
this._targetElement.appendChild(placeholder);
}
}
_checkMenuPlaceholderAndButton() {
@@ -170,7 +217,12 @@ export class DivMenu extends HTMLElement {
});
const allItemsSelected = visibleItemCount === 0;
this._menuPlaceholderMessageElement.style.display = allItemsSelected ? "block" : "none";
this._menuButton.disabled = allItemsSelected;
if (allItemsSelected) {
this._menuButton.classList.add(TS_MENU_BUTTON_STATE_DISABLED);
} else {
this._menuButton.classList.remove(TS_MENU_BUTTON_STATE_DISABLED);
}
}
_handleMutations(mutationsList) {
@@ -179,10 +231,8 @@ export class DivMenu extends HTMLElement {
const targetDiv = mutation.target;
const itemValue = targetDiv.dataset.value;
const itemData = this._menuItemsMap.get(itemValue);
if (itemData) {
const isNowHiddenByClass = targetDiv.classList.contains(TAILWIND_HIDDEN_CLASS);
if (isNowHiddenByClass && itemData.selected) {
itemData.selected = false;
this._updateItemState(itemData, false, true);
@@ -205,6 +255,9 @@ export class DivMenu extends HTMLElement {
}
_toggleMenu(event) {
if (this._menuButton && this._menuButton.classList.contains(TS_MENU_BUTTON_STATE_DISABLED)) {
return;
}
event.stopPropagation();
const isHidden = this._menuPopupElement.style.display === "none" || this._menuPopupElement.style.display === "";
if (isHidden) {
@@ -219,6 +272,9 @@ export class DivMenu extends HTMLElement {
_handleClickOutside(event) {
if (!this.contains(event.target) && this._menuPopupElement.style.display !== "none") {
if (this._menuButton && this._menuButton.contains(event.target)) {
return;
}
this._closeMenu();
}
}
@@ -228,7 +284,6 @@ export class DivMenu extends HTMLElement {
if (clickedButton && clickedButton.dataset.value) {
const itemValue = clickedButton.dataset.value;
const itemData = this._menuItemsMap.get(itemValue);
if (itemData) {
if (!itemData.selected) {
itemData.selected = true;
@@ -239,40 +294,46 @@ export class DivMenu extends HTMLElement {
}
_updateItemState(itemData, closeMenuAfterUpdate, manageHiddenClass) {
if (!itemData || !itemData.sourceDiv || !itemData.menuItemButton || !itemData.menuListItem) {
if (!itemData || !itemData.sourceDiv || !itemData.menuItemButton || !itemData.menuListItem || !itemData.menuLabelElement) {
console.warn("TabSelectorMenu: Incomplete itemData for update:", itemData);
return;
}
const menuLabel = itemData.menuLabelElement;
if (itemData.selected) {
if (manageHiddenClass) {
itemData.sourceDiv.classList.remove(TAILWIND_HIDDEN_CLASS);
}
// No direct DOM manipulation of sourceDiv here regarding targetElement
// _refreshTargetOrder will handle placement.
if (manageHiddenClass) itemData.sourceDiv.classList.remove(TAILWIND_HIDDEN_CLASS);
itemData.menuItemButton.classList.add(TS_ITEM_IS_SELECTED);
itemData.menuListItem.style.display = "none";
if (this._targetElement) {
this._targetElement.appendChild(itemData.sourceDiv);
} else {
console.warn(`TabSelectorMenu: Cannot mount div. Target element not found.`);
}
menuLabel.classList.add(TS_MENU_LABEL_DISPLAYED_STATE);
menuLabel.classList.remove(TS_MENU_LABEL_IN_MENU_STATE);
} else {
if (manageHiddenClass) {
itemData.sourceDiv.classList.add(TAILWIND_HIDDEN_CLASS);
}
if (manageHiddenClass) itemData.sourceDiv.classList.add(TAILWIND_HIDDEN_CLASS);
this._clearFormElements(itemData.sourceDiv);
itemData.menuItemButton.classList.remove(TS_ITEM_IS_SELECTED);
itemData.menuListItem.style.display = "";
if (itemData.sourceDiv.parentElement !== this) {
menuLabel.classList.add(TS_MENU_LABEL_IN_MENU_STATE);
menuLabel.classList.remove(TS_MENU_LABEL_DISPLAYED_STATE);
// If the div is being hidden, ensure it's moved back to the component
// if it was in the target. _refreshTargetOrder will handle its removal from target.
if (itemData.sourceDiv.parentElement !== this && itemData.sourceDiv.parentElement !== this._targetElement) {
this.appendChild(itemData.sourceDiv);
} else if (itemData.sourceDiv.parentElement === this._targetElement) {
// It will be removed by _refreshTargetOrder, then re-appended to 'this' if needed
// For now, just ensure it's not orphaned if _refreshTargetOrder doesn't run immediately after this.
// Actually, better to let _refreshTargetOrder handle removal from target.
// And if it's not selected, ensure it's a child of 'this' for mutation observer.
}
}
this._refreshTargetOrder(); // Centralize target DOM updates
this._checkMenuPlaceholderAndButton();
if (closeMenuAfterUpdate) {
this._closeMenu();
}
if (closeMenuAfterUpdate) this._closeMenu();
}
}