@schukai/monster 3.51.4 → 3.52.0

package/source/components/notify/message.mjs

@@ -0,0 +1,374 @@
+/**
+ * Copyright schukai GmbH and contributors 2022. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_PREFIX,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	initMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { isString } from "../../types/is.mjs";
+import { MessageStyleSheet } from "./stylesheet/message.mjs";
+
+export { Message };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const removeElementSymbol = Symbol("removeElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const timerSymbol = Symbol("timer");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const mouseenterEventHandlerSymbol = Symbol("mouseenterEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const mouseleaveEventHandlerSymbol = Symbol("mouseleaveEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const removeEventHandlerSymbol = Symbol("removeEventHandler");
+
+/**
+ * This CustomControl creates a notification element with a variety of options.
+ *
+ * <img src="./images/message.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-notify-message />` directly in the HTML
+ *
+ * ```html
+ * <monster-notify-message></monster-notify-message>
+ * ```
+ *
+ * or using Javascript via the `document.createElement('monster-notify');` method.
+ *
+ * ```javascript
+ * import '@schukai/monster/source/components/notify/message.js';
+ * document.createElement('monster-notify-message');
+ * ```
+ *
+ * @externalExample ../../../example/components/notify/message.mjs
+ * @startuml message.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Message
+ * @enduml
+ * @since 1.0.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Notify
+ * @summary A highly configurable select control
+ * @fires Monster.Components.Notify.event:monster-xxxx
+ */
+class Message extends CustomElement {
+	/**
+	 * The defaults can be set either directly in the object or via an attribute in the HTML tag.
+	 * The value of the attribute `data-monster-options` in the HTML tag must be a JSON string.
+	 *
+	 * ```
+	 * <monster-message data-monster-options="{}"></monster-message>
+	 * ```
+	 *
+	 * Since 1.18.0 the JSON can be specified as a DataURI.
+	 *
+	 * ```
+	 * new Monster.Types.DataUrl(btoa(JSON.stringify({
+	 *        timeout: 3000,
+	 *        features: {
+	 *          clear: true,
+	 *          disappear: true
+	 *        }
+	 *    })),'application/json',true).toString()
+	 * ```
+	 *
+	 * @property {string} templates Template definitions
+	 * @property {Object} templates Template definitions
+	 * @property {integer} timeout time in milliseconds until the message should be removed. The timeout can be disabled via the feature `disappear`.
+	 * @property {Object} features
+	 * @property {boolean} features.clear show clear button
+	 * @property {boolean} features.disappear automatically remove the message after the timeout
+	 * @property {string} templates.main Main template
+	 *
+	 */
+	get defaults() {
+		return Object.assign(
+			{},
+			super.defaults,
+			{
+				timeout: 6000,
+				features: {
+					clear: true,
+					disappear: true,
+				},
+				content: "<slot></slot>",
+				templates: {
+					main: getTemplate(),
+				},
+			},
+			initOptionsFromArguments.call(this),
+		);
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Notify.Message}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();;
+		initControlReferences.call(this);
+		initEventhandler.call(this);
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-notify-message";
+	}
+
+	/**
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [MessageStyleSheet];
+	}
+
+	/**
+	 *
+	 */
+	[initMethodSymbol]() {;
+		super[initMethodSymbol]();
+	}
+
+	/**
+	 * @return {void}
+	 */
+	connectedCallback() {
+		super.connectedCallback();;
+
+		if (this.getOption("features.disappear") === true) {
+			startFadeout.call(this);
+			this.addEventListener("mouseenter", this[mouseenterEventHandlerSymbol]);
+		}
+	}
+
+	/**
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		stopFadeout.call(this);;
+
+		if (this.getOption("features.disappear") === true) {
+			this.removeEventListener(
+				"mouseenter",
+				this[mouseenterEventHandlerSymbol],
+			);
+			this.removeEventListener(
+				"mouseenter",
+				this[mouseleaveEventHandlerSymbol],
+			);
+		}
+	}
+}
+
+/**
+ * @private
+ */
+function startFadeout() {;
+	if (!this?.[timerSymbol]) {
+		this[timerSymbol] = setTimeout(() => {
+			removeSelf.call(this);
+		}, this.getOption("timeout", 1000));
+	}
+}
+
+function removeSelf() {;
+
+	stopFadeout();
+	this.classList.add("fadeout");
+
+	setTimeout(() => {
+		this.remove();
+	}, 200);
+}
+
+/**
+ * @private
+ */
+function stopFadeout() {;
+	if (this?.[timerSymbol]) {
+		clearTimeout(this[timerSymbol]);
+		this[timerSymbol] = undefined;
+	}
+}
+
+/**
+ * This attribute can be used to pass a URL to this select.
+ *
+ * @private
+ * @return {object}
+ */
+function initOptionsFromArguments() {;
+	const options = {};
+
+	const timeout = this.getAttribute(ATTRIBUTE_PREFIX + "timeout");
+	if (isString(timeout)) {
+		try {
+			options["timeout"] = parseInt(timeout, 10);
+		} catch (e) {
+			this.setAttribute(
+				ATTRIBUTE_ERRORMESSAGE,
+				this.getAttribute(ATTRIBUTE_ERRORMESSAGE + ", " + e.toString()),
+			);
+		}
+	}
+
+	return options;
+}
+
+/**
+ * @private
+ * @return {Message}
+ * @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(
+		"[" + ATTRIBUTE_ROLE + "=control]",
+	);
+	this[removeElementSymbol] = this.shadowRoot.querySelector(
+		"[" + ATTRIBUTE_ROLE + "=remove]",
+	);
+}
+
+/**
+ * @private
+ */
+function initEventhandler() {;
+
+	/**
+	 * @param {Event} event
+	 */
+	this[mouseenterEventHandlerSymbol] = (event) => {
+		const element = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"control",
+		);
+
+		if (element instanceof HTMLElement) {
+			this.removeEventListener(
+				"mouseenter",
+				this[mouseenterEventHandlerSymbol],
+			);
+			this.addEventListener("mouseleave", this[mouseleaveEventHandlerSymbol]);
+			stopFadeout.call(this);
+		}
+	};
+
+	/**
+	 * @param {Event} event
+	 */
+	this[mouseleaveEventHandlerSymbol] = (event) => {
+		const element = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"control",
+		);
+		if (element instanceof HTMLElement) {
+			this.removeEventListener(
+				"mouseleave",
+				this[mouseleaveEventHandlerSymbol],
+			);
+			this.addEventListener("mouseenter", this[mouseenterEventHandlerSymbol]);
+			startFadeout.call(this);
+		}
+	};
+
+	/**
+	 * @param {Event} event
+	 */
+	this[removeEventHandlerSymbol] = (event) => {
+		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "remove");
+
+		if (element instanceof HTMLElement) {
+			removeSelf.call(this);
+		}
+	};
+
+	if (this.getOption("features.close") === true) {
+		this[removeElementSymbol].addEventListener(
+			"click",
+			this[removeEventHandlerSymbol],
+		);
+		this[removeElementSymbol].addEventListener(
+			"touch",
+			this[removeEventHandlerSymbol],
+		);
+	}
+
+	return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control" class="center">
+            <div data-monster-role="message" part="message"
+                 data-monster-attributes="data-monster-orientation path:orientation">
+                <div data-monster-replace="path:content" part="content"
+                     data-monster-role="content">
+
+                </div>
+                <div part="remove"
+                     data-monster-attributes="class path:features.clear | ?::hidden "
+                     data-monster-role="close" tabindex="-1"></div>
+            </div>
+        </div>
+    `;
+}
+
+registerCustomElement(Message);

package/source/components/notify/namespace.mjs

@@ -0,0 +1,15 @@
+/**
+ * Copyright schukai GmbH and contributors 2022. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+/**
+ * Namespace for all notify related functions.
+ *
+ * @namespace Monster.Components.Notify
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};

package/source/components/notify/notify.mjs

@@ -0,0 +1,236 @@
+/**
+ * Copyright schukai GmbH and contributors 2022. All Rights Reserved.
+ * Node module: @schukai/component-form
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { validateInstance, validateString } from "../../types/validate.mjs";
+import { Message } from "./message.mjs";
+import { NotifyStyleSheet } from "./stylesheet/notify.mjs";
+import { Queue } from "../../types/queue.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+
+export { Notify };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const containerElementSymbol = Symbol("containerElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const queueSymbol = Symbol("queue");
+
+/**
+ * This CustomControl creates a notification element with a variety of options.
+ *
+ * <img src="./images/notify.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-notify />` directly in the HTML
+ *
+ * ```html
+ * <monster-notify></monster-notify>
+ * ```
+ *
+ * or using Javascript via the `document.createElement('monster-notify');` method.
+ *
+ * ```js
+ * import '@schukai/monster/source/components/notify/notify.js';
+ * document.createElement('monster-notify');
+ * ```
+ *
+ * ## Events
+ *
+ * The CustomEvent has the property [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail).
+ *
+ * ```
+ * node.addEventListener('monster-notify-message',(e)=>console.log(e.detail))
+ * ```
+ *
+ * @externalExample ../../../example/components/notify/notify.mjs
+ * @startuml notify.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Notify
+ * @enduml
+ *
+ * @since 1.0.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Notify
+ * @summary A highly configurable select control
+ */
+class Notify extends CustomElement {
+	constructor() {
+		super();
+		this[queueSymbol] = new Queue();
+	}
+
+	/**
+	 * The defaults can be set either directly in the object or via an attribute in the HTML tag.
+	 * The value of the attribute `data-monster-options` in the HTML tag must be a JSON string.
+	 *
+	 * ```html
+	 * <monster-notify data-monster-options="{}"></monster-notify>
+	 * ```
+	 *
+	 * Since 1.18.0 the JSON can be specified as a DataURI.
+	 *
+	 * ```
+	 * new Monster.Types.DataUrl(btoa(JSON.stringify({
+	 *        orientation: 'right top'
+	 *    })),'application/json',true).toString()
+	 * ```
+	 *
+	 * @property {string} templates Template definitions
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 */
+	get defaults() {
+		return Object.assign(
+			{},
+			super.defaults,
+			{
+				orientation: "left top",
+				templates: {
+					main: getTemplate(),
+				},
+			},
+			initOptionsFromArguments.call(this),
+		);
+	}
+
+	/**
+	 *
+	 * @return {Notify}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();;
+		initControlReferences.call(this);
+
+		if (this[containerElementSymbol]) {
+			while (this[queueSymbol].isEmpty() === false) {
+				this.push(this[queueSymbol].poll());
+			}
+		}
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-notify";
+	}
+
+	/**
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [NotifyStyleSheet];
+	}
+
+	/**
+	 *
+	 * @param {Monster.Components.Notify.Massage|String} message
+	 * @return {Monster.Components.Notify.Notify}
+	 */
+	push(message) {;
+
+		let messageElement = message;
+		if (!(message instanceof Message)) {
+			const text = validateString(message);
+			messageElement = document.createElement("monster-notify-message");
+			messageElement.setOption("content", text);
+		}
+
+		validateInstance(messageElement, Message);
+		messageElement.setAttribute(ATTRIBUTE_ROLE, "message");
+
+		// if not connected, add to queue
+		if (!this[containerElementSymbol]) {
+			this[queueSymbol].add(messageElement);
+			return this;
+		}
+
+		fireCustomEvent(this, "monster-notify-message", {
+			messageElement,
+		});
+
+		this[containerElementSymbol].appendChild(messageElement);
+		return this;
+	}
+}
+
+/**
+ * This attribute can be used to pass a URL to this select.
+ *
+ * ```
+ * <monster-select data-monster-url="https://example.com/"></monster-select>
+ * ```
+ *
+ * @private
+ * @return {object}
+ */
+function initOptionsFromArguments() {;
+	const options = {};
+
+	return options;
+}
+
+/**
+ * @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(
+		"[" + ATTRIBUTE_ROLE + "=control]",
+	);
+	this[containerElementSymbol] = this.shadowRoot.querySelector(
+		"[" + ATTRIBUTE_ROLE + "=container]",
+	);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control" class="center"
+             data-monster-attributes="data-monster-orientation path:orientation">
+            <div data-monster-role="container">
+            </div>
+        </div>
+    `;
+}
+
+registerCustomElement(Notify);

package/source/components/notify/style/message.pcss

@@ -0,0 +1,57 @@
+@import "../../style/normalize.pcss";
+@import "../../style/display.pcss";
+@import "../../style/border.pcss";
+@import "../../style/color.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/control.pcss";
+@import "../../style/mixin/media.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/mixin/hover.pcss";
+
+[data-monster-role=message] {
+    position: relative;
+
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: row;    
+    
+}
+
+[data-monster-role=control] {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+    padding:8px;
+    color: var(--monster-color-primary-1);
+    background-color: var(--monster-bg-color-primary-1);
+}
+
+[data-monster-role=content] {
+    flex-grow: 2;
+    @mixins paragraph;
+}
+
+[data-monster-role=control] [data-monster-role=close] {
+    position: absolute;
+    top: -5px;
+    right: -10px;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    z-index: var(--monster-z-index-modal-overlay);
+}
+
+[data-monster-role=control] [data-monster-role=close]::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+    background-color: var(--monster-color-primary-1);
+}