@schukai/monster 3.111.0 → 3.112.0

package/source/components/content/camera.mjs

@@ -12,23 +12,21 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {instanceSymbol} from "../../constants.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomElement } from "../../dom/customelement.mjs";
 import {
-    ATTRIBUTE_ROLE,
-} from "../../dom/constants.mjs";
-import {CustomElement} from "../../dom/customelement.mjs";
-import {
-    assembleMethodSymbol,
-    registerCustomElement,
+	assembleMethodSymbol,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {CameraCaptureStyleSheet} from "./stylesheet/camera-capture.mjs";
+import { CameraCaptureStyleSheet } from "./stylesheet/camera-capture.mjs";
 import "../form/button.mjs";
 import "../state/state.mjs";
-import {getLocaleOfDocument} from "../../dom/locale.mjs";
-import {addErrorAttribute} from "../../dom/error.mjs";
-import {Queue} from "../../types/queue.mjs";
+import { getLocaleOfDocument } from "../../dom/locale.mjs";
+import { addErrorAttribute } from "../../dom/error.mjs";
+import { Queue } from "../../types/queue.mjs";
 
-export {CameraCapture};
+export { CameraCapture };
 
 /**
  * @private
@@ -78,176 +76,178 @@ const emptyHistoryStateElementSymbol = Symbol("emptyHistoryStateElement");
  * @summary A simple but powerful camera capture component. It can be used to capture images from the camera.
  */
 class CameraCapture extends CustomElement {
-
-
-    /**
-     * Constructor for the CameraCapture class.
-     * Calls the parent class constructor.
-     */
-    constructor() {
-        super();
-
-        this[queueSymbol] = new Queue();
-    }
-
-    /**
-     * This method is called by the `instanceof` operator.
-     * @return {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/content/camera-capture@instance");
-    }
-
-    /**
-     *
-     * @return {Components.Content.Copy
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-        initCameraControl.call(this);
-        return this;
-    }
-
-    /**
-     * This method is called when the element is connected to the dom.
-     *
-     * @return {void}
-     */
-    connectedCallback() {
-        super.connectedCallback();
-
-        // const document = getDocument();
-        //
-        // for (const [, type] of Object.entries(["click", "touch"])) {
-        //     // close on outside ui-events
-        //     document.addEventListener(type, this[closeEventHandler]);
-        // }
-        //
-        // updatePopper.call(this);
-        // attachResizeObserver.call(this);
-    }
-
-    /**
-     * This method is called when the element is disconnected from the dom.
-     *
-     * @return {void}
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-
-        // // close on outside ui-events
-        // for (const [, type] of Object.entries(["click", "touch"])) {
-        //     document.removeEventListener(type, this[closeEventHandler]);
-        // }
-
-
-    }
-
-    /**
-     * 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} actions Callbacks
-     * @property {string} actions.click="throw Error" Callback when clicked
-     * @property {Object} features Features
-     * @property {boolean} features.stripTags=true Strip tags from the copied text
-     * @property {boolean} features.preventOpenEventSent=false Prevent open event from being sent
-     * @property {Object} popper Popper configuration
-     * @property {string} popper.placement="top" Popper placement
-     * @property {string[]} popper.middleware=["autoPlacement", "shift", "offset:15", "arrow"] Popper middleware
-     * @property {boolean} disabled=false Disabled state
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-
-            templates: {
-                main: getTemplate(),
-            },
-
-            disabled: false,
-            features: {},
-
-            labels: getTranslations(),
-        });
-    }
-
-    /**
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-camera-capture";
-    }
-
-    /**
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [CameraCaptureStyleSheet];
-    }
-
-
-    /**
-     * Retrieve the next image from the queue.
-     * If the queue is empty, it returns `null`.
-     * @returns {string|null}
-     */
-    getNextImage() {
-        if (!this[queueSymbol].isEmpty()) {
-            const next = this[queueSymbol].poll();
-            if (!next) {
-                return null;
-            }
-            return next;
-        }
-        return null;
-    }
-
-    /**
-     * Capture an image from the camera and add it to the queue.
-     * The image is returned as a data URL.
-     * @returns {string}
-     */
-    capture() {
-
-        this[canvasElementSymbol].width = this[videoElementSymbol].videoWidth;
-        this[canvasElementSymbol].height = this[videoElementSymbol].videoHeight;
-        const ctx = this[canvasElementSymbol].getContext('2d');
-        ctx.drawImage(this[videoElementSymbol], 0, 0, this[canvasElementSymbol].width, this[canvasElementSymbol].height);
-        const dataURL = this[canvasElementSymbol].toDataURL('image/png');
-        this[queueSymbol].add(dataURL);
-        return dataURL;
-
-    }
-
+	/**
+	 * Constructor for the CameraCapture class.
+	 * Calls the parent class constructor.
+	 */
+	constructor() {
+		super();
+
+		this[queueSymbol] = new Queue();
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/content/camera-capture@instance",
+		);
+	}
+
+	/**
+	 *
+	 * @return {Components.Content.Copy
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		initCameraControl.call(this);
+		return this;
+	}
+
+	/**
+	 * This method is called when the element is connected to the dom.
+	 *
+	 * @return {void}
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+
+		// const document = getDocument();
+		//
+		// for (const [, type] of Object.entries(["click", "touch"])) {
+		//     // close on outside ui-events
+		//     document.addEventListener(type, this[closeEventHandler]);
+		// }
+		//
+		// updatePopper.call(this);
+		// attachResizeObserver.call(this);
+	}
+
+	/**
+	 * This method is called when the element is disconnected from the dom.
+	 *
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+
+		// // close on outside ui-events
+		// for (const [, type] of Object.entries(["click", "touch"])) {
+		//     document.removeEventListener(type, this[closeEventHandler]);
+		// }
+	}
+
+	/**
+	 * 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} actions Callbacks
+	 * @property {string} actions.click="throw Error" Callback when clicked
+	 * @property {Object} features Features
+	 * @property {boolean} features.stripTags=true Strip tags from the copied text
+	 * @property {boolean} features.preventOpenEventSent=false Prevent open event from being sent
+	 * @property {Object} popper Popper configuration
+	 * @property {string} popper.placement="top" Popper placement
+	 * @property {string[]} popper.middleware=["autoPlacement", "shift", "offset:15", "arrow"] Popper middleware
+	 * @property {boolean} disabled=false Disabled state
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			disabled: false,
+			features: {},
+
+			labels: getTranslations(),
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-camera-capture";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [CameraCaptureStyleSheet];
+	}
+
+	/**
+	 * Retrieve the next image from the queue.
+	 * If the queue is empty, it returns `null`.
+	 * @returns {string|null}
+	 */
+	getNextImage() {
+		if (!this[queueSymbol].isEmpty()) {
+			const next = this[queueSymbol].poll();
+			if (!next) {
+				return null;
+			}
+			return next;
+		}
+		return null;
+	}
+
+	/**
+	 * Capture an image from the camera and add it to the queue.
+	 * The image is returned as a data URL.
+	 * @returns {string}
+	 */
+	capture() {
+		this[canvasElementSymbol].width = this[videoElementSymbol].videoWidth;
+		this[canvasElementSymbol].height = this[videoElementSymbol].videoHeight;
+		const ctx = this[canvasElementSymbol].getContext("2d");
+		ctx.drawImage(
+			this[videoElementSymbol],
+			0,
+			0,
+			this[canvasElementSymbol].width,
+			this[canvasElementSymbol].height,
+		);
+		const dataURL = this[canvasElementSymbol].toDataURL("image/png");
+		this[queueSymbol].add(dataURL);
+		return dataURL;
+	}
 }
 
 function initCameraControl() {
-    const self = this;
-
-    if (!navigator || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        addErrorAttribute(self, "Browser not supported");
-        return;
-    }
-
-    navigator.mediaDevices.getUserMedia({video: true})
-        .then(function (stream) {
-
-            self[takePictureButtonElementSymbol].style.display = "block";
-            self[videoElementSymbol].style.display = "block";
-            self[emptyHistoryStateElementSymbol].style.display = "none";
-
-            self[videoElementSymbol].srcObject = stream;
-        })
-        .catch(function (e) {
-            addErrorAttribute(self, e);
-        });
-
+	const self = this;
+
+	if (
+		!navigator ||
+		!navigator.mediaDevices ||
+		!navigator.mediaDevices.getUserMedia
+	) {
+		addErrorAttribute(self, "Browser not supported");
+		return;
+	}
+
+	navigator.mediaDevices
+		.getUserMedia({ video: true })
+		.then(function (stream) {
+			self[takePictureButtonElementSymbol].style.display = "block";
+			self[videoElementSymbol].style.display = "block";
+			self[emptyHistoryStateElementSymbol].style.display = "none";
+
+			self[videoElementSymbol].srcObject = stream;
+		})
+		.catch(function (e) {
+			addErrorAttribute(self, e);
+		});
 }
 
 /**
@@ -255,129 +255,147 @@ function initCameraControl() {
  * @returns {{takePicture: string}}
  */
 function getTranslations() {
-    const locale = getLocaleOfDocument();
-    switch (locale.language) {
-        case "de":
-            return {
-                takePicture: "Bild aufnehmen",
-                cameraNotSupportedOrNotAllowed: "Die Kamera wird nicht unterstützt oder die Berechtigung wurde nicht erteilt.",
-            };
-
-        case "es":
-            return {
-                takePicture: "Tomar una foto",
-                cameraNotSupportedOrNotAllowed: "La cámara no es compatible o no se ha otorgado permiso.",
-            }
-
-        case "zh":
-            return {
-                takePicture: "拍照",
-                cameraNotSupportedOrNotAllowed: "相机不受支持或未授予权限。",
-            }
-
-        case "hi":
-            return {
-                takePicture: "तस्वीर खींचें",
-                cameraNotSupportedOrNotAllowed: "कैमरा समर्थित नहीं है या अनुमति नहीं दी गई है।",
-            }
-
-        case "bn":
-            return {
-                takePicture: "ছবি তুলুন",
-                cameraNotSupportedOrNotAllowed: "ক্যামেরা সমর্থিত নয় বা অনুমতি দেয়া হয়নি।",
-            }
-
-        case "pt":
-            return {
-                takePicture: "Tirar uma foto",
-                cameraNotSupportedOrNotAllowed: "A câmera não é suportada ou a permissão não foi concedida.",
-            }
-
-        case "ru":
-            return {
-                takePicture: "Сделать фото",
-                cameraNotSupportedOrNotAllowed: "Камера не поддерживается или разрешение не предоставлено.",
-            }
-
-        case "ja":
-            return {
-                takePicture: "写真を撮る",
-                cameraNotSupportedOrNotAllowed: "カメラがサポートされていないか、許可が付与されていません。",
-            }
-
-        case "pa":
-            return {
-                takePicture: "ਤਸਵੀਰ ਖਿੱਚੋ",
-                cameraNotSupportedOrNotAllowed: "ਕੈਮਰਾ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਜਾਂ ਅਨੁਮਤੀ ਨਹੀਂ ਦਿੱਤੀ ਗਈ ਹੈ।",
-            }
-
-        case "mr":
-            return {
-                takePicture: "फोटो घ्या",
-                cameraNotSupportedOrNotAllowed: "कॅमेरा समर्थित नाही किंवा परवानगी दिलेली नाही.",
-            }
-
-        case "fr":
-            return {
-                takePicture: "Prendre une photo",
-                cameraNotSupportedOrNotAllowed: "La caméra n'est pas prise en charge ou l'autorisation n'a pas été accordée.",
-            }
-
-        case "it":
-            return {
-                takePicture: "Scattare una foto",
-                cameraNotSupportedOrNotAllowed: "La fotocamera non è supportata o l'autorizzazione non è stata concessa.",
-            }
-
-        case "nl":
-            return {
-                takePicture: "Maak een foto",
-                cameraNotSupportedOrNotAllowed: "De camera wordt niet ondersteund of er is geen toestemming verleend.",
-            }
-
-        case "sv":
-            return {
-                takePicture: "Ta ett foto",
-                cameraNotSupportedOrNotAllowed: "Kameran stöds inte eller tillståndet har inte beviljats.",
-            }
-
-        case "pl":
-            return {
-                takePicture: "Zrób zdjęcie",
-                cameraNotSupportedOrNotAllowed: "Kamera nie jest obsługiwana lub nie udzielono zgody.",
-            }
-
-        case "da":
-            return {
-                takePicture: "Tag et billede",
-                cameraNotSupportedOrNotAllowed: "Kameraen understøttes ikke eller tilladelsen er ikke givet.",
-            }
-
-        case "fi":
-            return {
-                takePicture: "Ota kuva",
-                cameraNotSupportedOrNotAllowed: "Kameraa ei tueta tai lupaa ei ole myönnetty.",
-            }
-
-        case "no":
-            return {
-                takePicture: "Ta et bilde",
-                cameraNotSupportedOrNotAllowed: "Kameraen støttes ikke eller tillatelsen er ikke gitt.",
-            }
-
-        case "cs":
-            return {
-                takePicture: "Vyfotit",
-                cameraNotSupportedOrNotAllowed: "Fotoaparát není podporován nebo povolení nebylo uděleno.",
-            }
-
-        case "en":
-        default:
-            return {
-                takePicture: "Take a picture",
-                cameraNotSupportedOrNotAllowed: "The camera is not supported or permission has not been granted.",
-            };
-    }
+	const locale = getLocaleOfDocument();
+	switch (locale.language) {
+		case "de":
+			return {
+				takePicture: "Bild aufnehmen",
+				cameraNotSupportedOrNotAllowed:
+					"Die Kamera wird nicht unterstützt oder die Berechtigung wurde nicht erteilt.",
+			};
+
+		case "es":
+			return {
+				takePicture: "Tomar una foto",
+				cameraNotSupportedOrNotAllowed:
+					"La cámara no es compatible o no se ha otorgado permiso.",
+			};
+
+		case "zh":
+			return {
+				takePicture: "拍照",
+				cameraNotSupportedOrNotAllowed: "相机不受支持或未授予权限。",
+			};
+
+		case "hi":
+			return {
+				takePicture: "तस्वीर खींचें",
+				cameraNotSupportedOrNotAllowed:
+					"कैमरा समर्थित नहीं है या अनुमति नहीं दी गई है।",
+			};
+
+		case "bn":
+			return {
+				takePicture: "ছবি তুলুন",
+				cameraNotSupportedOrNotAllowed: "ক্যামেরা সমর্থিত নয় বা অনুমতি দেয়া হয়নি।",
+			};
+
+		case "pt":
+			return {
+				takePicture: "Tirar uma foto",
+				cameraNotSupportedOrNotAllowed:
+					"A câmera não é suportada ou a permissão não foi concedida.",
+			};
+
+		case "ru":
+			return {
+				takePicture: "Сделать фото",
+				cameraNotSupportedOrNotAllowed:
+					"Камера не поддерживается или разрешение не предоставлено.",
+			};
+
+		case "ja":
+			return {
+				takePicture: "写真を撮る",
+				cameraNotSupportedOrNotAllowed:
+					"カメラがサポートされていないか、許可が付与されていません。",
+			};
+
+		case "pa":
+			return {
+				takePicture: "ਤਸਵੀਰ ਖਿੱਚੋ",
+				cameraNotSupportedOrNotAllowed:
+					"ਕੈਮਰਾ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਜਾਂ ਅਨੁਮਤੀ ਨਹੀਂ ਦਿੱਤੀ ਗਈ ਹੈ।",
+			};
+
+		case "mr":
+			return {
+				takePicture: "फोटो घ्या",
+				cameraNotSupportedOrNotAllowed:
+					"कॅमेरा समर्थित नाही किंवा परवानगी दिलेली नाही.",
+			};
+
+		case "fr":
+			return {
+				takePicture: "Prendre une photo",
+				cameraNotSupportedOrNotAllowed:
+					"La caméra n'est pas prise en charge ou l'autorisation n'a pas été accordée.",
+			};
+
+		case "it":
+			return {
+				takePicture: "Scattare una foto",
+				cameraNotSupportedOrNotAllowed:
+					"La fotocamera non è supportata o l'autorizzazione non è stata concessa.",
+			};
+
+		case "nl":
+			return {
+				takePicture: "Maak een foto",
+				cameraNotSupportedOrNotAllowed:
+					"De camera wordt niet ondersteund of er is geen toestemming verleend.",
+			};
+
+		case "sv":
+			return {
+				takePicture: "Ta ett foto",
+				cameraNotSupportedOrNotAllowed:
+					"Kameran stöds inte eller tillståndet har inte beviljats.",
+			};
+
+		case "pl":
+			return {
+				takePicture: "Zrób zdjęcie",
+				cameraNotSupportedOrNotAllowed:
+					"Kamera nie jest obsługiwana lub nie udzielono zgody.",
+			};
+
+		case "da":
+			return {
+				takePicture: "Tag et billede",
+				cameraNotSupportedOrNotAllowed:
+					"Kameraen understøttes ikke eller tilladelsen er ikke givet.",
+			};
+
+		case "fi":
+			return {
+				takePicture: "Ota kuva",
+				cameraNotSupportedOrNotAllowed:
+					"Kameraa ei tueta tai lupaa ei ole myönnetty.",
+			};
+
+		case "no":
+			return {
+				takePicture: "Ta et bilde",
+				cameraNotSupportedOrNotAllowed:
+					"Kameraen støttes ikke eller tillatelsen er ikke gitt.",
+			};
+
+		case "cs":
+			return {
+				takePicture: "Vyfotit",
+				cameraNotSupportedOrNotAllowed:
+					"Fotoaparát není podporován nebo povolení nebylo uděleno.",
+			};
+
+		case "en":
+		default:
+			return {
+				takePicture: "Take a picture",
+				cameraNotSupportedOrNotAllowed:
+					"The camera is not supported or permission has not been granted.",
+			};
+	}
 }
 
 /**
@@ -385,15 +403,13 @@ function getTranslations() {
  * @return {initEventHandler}
  */
 function initEventHandler() {
-    const self = this;
-
+	const self = this;
 
-    this[takePictureButtonElementSymbol].setOption("actions.click", function () {
-        self.capture();
-    });
+	this[takePictureButtonElementSymbol].setOption("actions.click", function () {
+		self.capture();
+	});
 
-
-    return this;
+	return this;
 }
 
 /**
@@ -401,28 +417,22 @@ function initEventHandler() {
  * @return {void}
  */
 function initControlReferences() {
-    this[controlElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}="control"]`,
-    );
-
-    this[takePictureButtonElementSymbol] = this.shadowRoot.querySelector(
-        `[data-monster-role="takePicture"]`,
-    );
-
-    this[videoElementSymbol] = this.shadowRoot.querySelector(
-        `video`,
-    );
+	this[controlElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"]`,
+	);
 
-    this[canvasElementSymbol] = this.shadowRoot.querySelector(
-        `canvas`,
-    );
+	this[takePictureButtonElementSymbol] = this.shadowRoot.querySelector(
+		`[data-monster-role="takePicture"]`,
+	);
 
-    // data-monster-role="emptyHistoryState"
-    this[emptyHistoryStateElementSymbol] = this.shadowRoot.querySelector(
-        `[data-monster-role="emptyHistoryState"]`,
-    );
+	this[videoElementSymbol] = this.shadowRoot.querySelector(`video`);
 
+	this[canvasElementSymbol] = this.shadowRoot.querySelector(`canvas`);
 
+	// data-monster-role="emptyHistoryState"
+	this[emptyHistoryStateElementSymbol] = this.shadowRoot.querySelector(
+		`[data-monster-role="emptyHistoryState"]`,
+	);
 }
 
 /**
@@ -430,8 +440,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <monster-state data-monster-role="emptyHistoryState">
                 <svg slot="visual" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"