@schukai/monster 3.51.4 → 3.52.0

package/source/components/host/viewer.mjs

@@ -0,0 +1,309 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import "../notify/notify.mjs";
+import { ViewerStyleSheet } from "./stylesheet/viewer.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { isString } from "../../types/is.mjs";
+import { getGlobal } from "../../types/global.mjs";
+
+export { Viewer };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const viewerElementSymbol = Symbol("viewerElement");
+
+/**
+ * The Viewer component is used to show a PDF, HTML or Image.
+ *
+ * <img src="./images/viewer.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-viewer />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-viewer');` method.
+ *
+ * ```html
+ * <monster-viewer></monster-viewer>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-state/source/viewer.mjs';
+ * document.createElement('monster-viewer');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml viewer.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Viewer
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Host
+ * @summary A simple viewer component
+ * @fires Monster.Components.Host.Viewer.event:monster-viewer-before-open
+ * @fires Monster.Components.Host.Viewer.event:monster-viewer-open
+ * @fires Monster.Components.Host.Viewer.event:monster-viewer-before-close
+ * @fires Monster.Components.Host.Viewer.event:monster-viewer-closed
+ */
+class Viewer extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-host/viewer@@instance");
+	}
+
+	/**
+	 * 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 {Object} features Feature definitions
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			content: "<slot>",
+			classes: {
+				viewer: "",
+			},
+			features: {},
+		});
+	}
+
+	setContent(html) {
+		this.setOption("content", html);
+		return this;
+	}
+
+	/**
+	 *
+	 * @param {Blob|URL|string} data
+	 * @param {boolean} navigation
+	 * @param {boolean} toolbar
+	 * @param {boolean} scrollbar
+	 */
+	setPDF(data, navigation = true, toolbar = true, scrollbar = false) {
+		const hashes =
+			"#toolbar=" +
+			(toolbar ? "1" : "0") +
+			"&navpanes=" +
+			(navigation ? "1" : "0") +
+			"&scrollbar=" +
+			(scrollbar ? "1" : "0");
+
+		let pdfContent = "";
+		if (isBlob(data)) {
+			pdfContent = URL.createObjectURL(data);
+			pdfContent += hashes;
+		} else if (isURL(data)) {
+			pdfContent = data;
+			// check if the url already contains the hashes
+			if (pdfContent.indexOf("#") === -1) {
+				pdfContent += hashes;
+			}
+		} else if (isString(data)) {
+			//URL.createObjectURL(data);
+			const blobObj = new Blob([atob(data)], { type: "application/pdf" });
+			const url = window.URL.createObjectURL(blobObj);
+
+			pdfContent = data;
+		} else {
+			throw new Error("Blob or URL expected");
+		}
+
+		const html =
+			'<object data="' +
+			pdfContent +
+			'" width="100%" height="100%" type="application/pdf"></object>';
+		this.setContent(html);
+	}
+
+	/**
+	 *
+	 * @param {Blob|URL|string} data
+	 */
+	setImage(data) {
+		if (isBlob(data)) {
+			data = URL.createObjectURL(data);
+		} else if (isURL(data)) {
+			// nothing to do
+		} else if (isString(data)) {
+			// nothing to do
+		} else {
+			throw new Error("Blob or URL expected");
+		}
+
+		const html = '<img src="' + data + '" alt="image" />';
+		this.setContent(html);
+	}
+
+	/**
+	 *
+	 * if the data is a string, it is interpreted as html
+	 * if the data is a url, the html is loaded from the url and set as content
+	 * if the data is an HTMLElement, the outerHTML is used as content
+	 *
+	 * @param {HTMLElement|URL|string|Blob} data
+	 */
+	setHTML(data) {
+		if (data instanceof Blob) {
+			blobToText(data)
+				.then((html) => {
+					this.setHTML(html);
+				})
+				.catch((error) => {
+					throw new Error(error);
+				});
+
+			return;
+		} else if (data instanceof HTMLElement) {
+			data = data.outerHTML;
+		} else if (isString(data)) {
+			// nothing to do
+		} else if (isURL(data)) {
+			// fetch element
+			getGlobal()
+				.fetch(data)
+				.then((response) => {
+					return response.text();
+				})
+				.then((html) => {
+					this.setHTML(html);
+				})
+				.catch((error) => {
+					throw new Error(error);
+				});
+		} else {
+			throw new Error("HTMLElement or string expected");
+		}
+
+		this.setContent(data);
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Host.Viewer}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-viewer";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [ViewerStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @param variable
+ * @returns {boolean}
+ */
+function isURL(variable) {
+	try {
+		new URL(variable);
+		return true;
+	} catch (error) {
+		return false;
+	}
+}
+
+/**
+ * @private
+ * @param variable
+ * @returns {boolean}
+ */
+function isBlob(variable) {
+	return variable instanceof Blob;
+}
+
+/**
+ * @private
+ * @param blob
+ * @returns {Promise<unknown>}
+ */
+function blobToText(blob) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onloadend = () => resolve(reader.result);
+		reader.onerror = reject;
+		reader.readAsText(blob);
+	});
+}
+
+/**
+ * @private
+ * @return {Select}
+ * @throws {Error} no shadow-root is defined
+ */
+function initControlReferences() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[viewerElementSymbol] = this.shadowRoot.getElementById("viewer");
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {;
+	return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div id="viewer" data-monster-role="viewer" part="viewer" data-monster-replace="path:content" data-monster-attributes="class path:classes.viewer">
+        </div>`;
+}
+
+registerCustomElement(Viewer);

package/source/components/namespace.mjs

@@ -0,0 +1,14 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+/**
+ * Components contains all Web Components of Monster. A Web Component is a custom HTML element.
+ * The Web Components of Monster are based on the Custom Elements API.
+ *
+ * @namespace Monster.Components
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};

package/source/components/notify/constants.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
+ */
+
+export { STYLE_DISPLAY_MODE_BLOCK };
+
+/**
+ * @memberOf Monster.Components.Notify
+ * @since 1.0.0
+ * @type {string}
+ */
+const STYLE_DISPLAY_MODE_BLOCK = "block";

package/source/components/notify/events.mjs

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+/**
+ * This event is fired when a message is pushed to the message queue.
+ *
+ * @memberOf Monster.Components.Notify
+ * @event event:monster-notify-message
+ * @type {object}
+ * @property {Message} message message
+ */