@schukai/monster 3.64.0 → 3.65.0

package/source/components/layout/collapse.mjs

@@ -0,0 +1,542 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	getSlottedElements,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { CollapseStyleSheet } from "./stylesheet/collapse.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+import { getDocument } from "../../dom/util.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
+import { Host } from "../host/host.mjs";
+import { generateUniqueConfigKey } from "../host/util.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+
+export { Collapse, nameSymbol };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const timerCallbackSymbol = Symbol("timerCallback");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const detailsElementSymbol = Symbol("detailsElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const detailsSlotElementSymbol = Symbol("detailsSlotElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const detailsContainerElementSymbol = Symbol("detailsContainerElement");
+/**
+
+ * @private
+ * @type {symbol}
+ */
+const detailsDecoElementSymbol = Symbol("detailsDecoElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const nameSymbol = Symbol("name");
+
+/**
+ * The Collapse component is used to show a details.
+ *
+ * <img src="./images/collapse.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * You can create this control either by specifying the HTML tag <monster-collapse />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-collapse');` method.
+ *
+ * ```html
+ * <monster-collapse></monster-collapse>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/monster/source/components/host/collapse.mjs';
+ * document.createElement('monster-collapse');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml collapse.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Collapse
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Host
+ * @summary A simple collapse component
+ * @fires Monster.Components.Host.Collapse.event:monster-collapse-before-open
+ * @fires Monster.Components.Host.Collapse.event:monster-collapse-open
+ * @fires Monster.Components.Host.Collapse.event:monster-collapse-before-close
+ * @fires Monster.Components.Host.Collapse.event:monster-collapse-closed
+ * @fires Monster.Components.Host.Collapse.event:monster-collapse-adjust-height
+ */
+class Collapse extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/layout/collapse@@instance");
+	}
+
+	/**
+	 *
+	 */
+	constructor() {
+		super();
+		// the name is only used for the host config and the event name
+		this[nameSymbol] = "collapse";
+	}
+
+	/**
+	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} classes CSS classes
+	 * @property {string} classes.container CSS class for the container
+	 * @property {Object} features Feature configuration
+	 * @property {boolean} features.accordion Enable accordion mode
+	 * @property {boolean} features.persistState Enable persist state (Host and Config-Manager required)
+	 * @property {boolean} features.useScrollValues Use scroll values (scrollHeight) instead of clientHeight for the height calculation
+	 * @property {boolean} openByDefault Open the details by default
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			classes: {
+				container: "padding",
+			},
+			features: {
+				accordion: true,
+				persistState: true,
+				useScrollValues: false,
+			},
+			openByDefault: false,
+		});
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Host.Collapse}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initStateFromHostConfig.call(this);
+		initResizeObserver.call(this);
+		initEventHandler.call(this);
+		
+		if (this.getOption("openByDefault")) {
+			this.open();
+		}
+		
+	}
+
+	/**
+	 *
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+		updateResizeObserverObservation.call(this);
+		//  this[resizeObserverSymbol].observe(getDocument().body);
+	}
+
+	/**
+	 *
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		//this[resizeObserverSymbol].disconnect();
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Host.Collapse}
+	 */
+	toggle() {
+		if (this[detailsElementSymbol].classList.contains("active")) {
+			this.close();
+		} else {
+			this.open();
+		}
+		return this;
+	}
+
+	/**
+	 *
+	 * @returns {boolean}
+	 */
+	isClosed() {
+		return !this[detailsElementSymbol].classList.contains("active");
+	}
+
+	/**
+	 *
+	 * @returns {boolean}
+	 */
+	isOpen() {
+		return !this.isClosed();
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Host.Collapse}
+	 * @fires Monster.Components.Host.Collapse.event:monster-collapse-before-open
+	 * @fires Monster.Components.Host.Collapse.event:monster-collapse-open
+	 */
+	open() {
+		let node;
+		if (this[detailsElementSymbol].classList.contains("active")) {
+			return this;
+		}
+
+		fireCustomEvent(this, "monster-" + this[nameSymbol] + "-before-open", {});
+
+		adjustHeight.call(this);
+		this[detailsElementSymbol].classList.add("active");
+
+		if (this.getOption("features.accordion") === true) {
+			node = this;
+			while (node.nextElementSibling instanceof Collapse) {
+				node = node.nextElementSibling;
+				node.close();
+			}
+
+			node = this;
+			while (node.previousElementSibling instanceof Collapse) {
+				node = node.previousElementSibling;
+				node.close();
+			}
+		}
+
+		setTimeout(() => {
+			setTimeout(() => {
+				updateStateConfig.call(this);
+				fireCustomEvent(this, "monster-" + this[nameSymbol] + "-open", {});
+				setTimeout(() => {
+					this[controlElementSymbol].classList.remove("overflow-hidden");
+				}, 500);
+			}, 0);
+		}, 0);
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Host.Collapse}
+	 * @fires Monster.Components.Host.Collapse.event:monster-collapse-before-close
+	 * @fires Monster.Components.Host.Collapse.event:monster-collapse-closed
+	 */
+	close() {
+		if (!this[detailsElementSymbol].classList.contains("active")) {
+			return this;
+		}
+
+		fireCustomEvent(this, "monster-" + this[nameSymbol] + "-before-close", {});
+		this[controlElementSymbol].classList.add("overflow-hidden");
+
+		setTimeout(() => {
+			this[detailsElementSymbol].classList.remove("active");
+			setTimeout(() => {
+				updateStateConfig.call(this);
+				fireCustomEvent(this, "monster-" + this[nameSymbol] + "-closed", {});
+			}, 0);
+		}, 0);
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-collapse";
+	}
+
+	/**
+	 * @return {Array<CSSStyleSheet>}
+	 */
+	static getCSSStyleSheet() {
+		return [CollapseStyleSheet];
+	}
+
+	/**
+	 * This method is called when the element is inserted into a document, including into a shadow tree.
+	 * @return {Monster.Components.Host.Collapse}
+	 * @fires Monster.Components.Host.Collapse.event:monster-collapse-adjust-height
+	 */
+	adjustHeight() {
+		adjustHeight.call(this);
+		return this;
+	}
+}
+
+function adjustHeight() {
+	let height = 0;
+
+	if (this[detailsContainerElementSymbol]) {
+		if (this.getOption("features.useScrollValues")) {
+			height += this[detailsContainerElementSymbol].scrollHeight;
+		} else {
+			height += this[detailsContainerElementSymbol].clientHeight;
+		}
+	}
+
+	if (this[detailsDecoElementSymbol]) {
+		if (this.getOption("features.useScrollValues")) {
+			height += this[detailsDecoElementSymbol].scrollHeight;
+		} else {
+			height += this[detailsDecoElementSymbol].clientHeight + 1;
+		}
+	}
+
+	if (height === 0) {
+		if (this.getOption("features.useScrollValues")) {
+			height = this[detailsElementSymbol].scrollHeight;
+		} else {
+			height = this[detailsElementSymbol].clientHeight;
+		}
+
+		if (height === 0) {
+			height = "auto";
+		}
+	} else {
+		height += "px";
+	}
+
+	this[detailsElementSymbol].style.setProperty(
+		"--monster-height",
+		height,
+		"important",
+	);
+	fireCustomEvent(this, "monster-" + this[nameSymbol] + "-adjust-height", {});
+}
+
+function updateResizeObserverObservation() {
+	this[resizeObserverSymbol].disconnect();
+
+	const slottedNodes = getSlottedElements.call(this);
+	slottedNodes.forEach((node) => {
+		this[resizeObserverSymbol].observe(node);
+	});
+
+	if (this[detailsContainerElementSymbol]) {
+		this[resizeObserverSymbol].observe(this[detailsContainerElementSymbol]);
+	}
+
+	this.adjustHeight();
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	initSlotChangedHandler.call(this);
+	return this;
+}
+
+function initSlotChangedHandler() {
+	this[detailsSlotElementSymbol].addEventListener("slotchange", () => {
+		updateResizeObserverObservation.call(this);
+	});
+}
+
+/**
+ * @private
+ * @return {Select}
+ * @throws {Error} no shadow-root is defined
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[controlElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
+	this[detailsElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=detail]",
+	);
+	this[detailsSlotElementSymbol] = this.shadowRoot.querySelector("slot");
+	this[detailsContainerElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=container]",
+	);
+	this[detailsDecoElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=deco]",
+	);
+}
+
+/**
+ * @private
+ * @returns {string}
+ */
+function getConfigKey() {
+	return generateUniqueConfigKey(this[nameSymbol], this.id, "state");
+}
+
+/**
+ * @private
+ */
+function updateStateConfig() {
+	if (!this.getOption("features.persistState")) {
+		return;
+	}
+
+	if (!this[detailsElementSymbol]) {
+		return;
+	}
+
+	const document = getDocument();
+	const host = document.querySelector("monster-host");
+	if (!(host && this.id)) {
+		return;
+	}
+
+	const configKey = getConfigKey.call(this);
+
+	try {
+		host.setConfig(configKey, this.isOpen());
+	} catch (error) {
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+	}
+}
+
+/**
+ * @private
+ * @returns {Promise}
+ */
+function initStateFromHostConfig() {
+	if (!this.getOption("features.persistState")) {
+		return Promise.resolve({});
+	}
+
+	const document = getDocument();
+	const host = document.querySelector("monster-host");
+
+	if (!(host && this.id)) {
+		return Promise.resolve({});
+	}
+
+	const configKey = getConfigKey.call(this);
+	return host
+		.getConfig(configKey)
+		.then((state) => {
+			if (state === true) {
+				this.open();
+			} else {
+				this.close();
+			}
+		})
+		.catch((error) => {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
+		});
+}
+
+/**
+ * @private
+ */
+function initResizeObserver() {
+	// against flickering
+	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
+		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+			try {
+				this[timerCallbackSymbol].touch();
+				return;
+			} catch (e) {
+				delete this[timerCallbackSymbol];
+			}
+		}
+
+		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+			checkAndRearrangeContent.call(this);
+		});
+	});
+}
+
+function checkAndRearrangeContent() {
+	this.adjustHeight();
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control" class="overflow-hidden">
+            <div data-monster-role="detail">
+                <div data-monster-attributes="class path:classes.container" part="container"
+                     data-monster-role="container">
+                    <slot></slot>
+                </div>
+                <div class="deco-line" data-monster-role="deco" part="deco"></div>
+            </div>
+        </div>`;
+}
+
+registerCustomElement(Collapse);