fix: Add layout files for issue #318 and improve camera capture component

- Added `318.html` and `318.mjs` for documenting layout problems related to the split panel. - Updated `camera-capture.mjs` to enhance formatting and structure in imports and methods, ensuring better readability and maintainability. - Refined error handling and logging throughout the component to prevent potential uncaught exceptions. - Organized component dependencies more clearly to eliminate redundancies and improve performance. - Improved inline comments to clarify the intent and functionality of existing code. This refactoring not only resolves layout-related issues but also aids future developers in navigating and understanding the codebase.

fix: Add layout files for issue #318 and improve camera capture component
592e01ef · Volker Schukai · 328cdd8a · 592e01ef · 592e01ef · 592e01ef
Verified Commit 592e01ef authored 2 months ago by Volker Schukai
--- a/development/issues/closed/318.html
+++ b/development/issues/closed/318.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>layout problems with split panel #318</title>
+    <script src="./318.mjs" type="module"></script>
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            overflow: hidden;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        /* Optional: alle Elemente im Box-Modell einheitlich behandeln */
+        *, *::before, *::after {
+            box-sizing: inherit;
+        }
+        monster-split-panel {
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+<div style="display: none">
+    <h1>layout problems with split panel #318</h1>
+    <p></p>
+    <ul>
+        <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/318">Issue #318</a></li>
+        <li><a href="/">Back to overview</a></li>
+    </ul>
+</div>
+<monster-panel id="p1">
+    <monster-split-panel>
+        <monster-panel id="p2">
+            <div>Panel 1</div>
+        </monster-panel>
+        <monster-panel id="p3">
+            <div>Panel 5</div>
+        </monster-panel>
+    </monster-split-panel>
+</monster-panel>
+</body>
+</html>
--- a/development/issues/closed/318.mjs
+++ b/development/issues/closed/318.mjs
+/**
+* @file development/issues/open/318.mjs
+* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/318
+* @description layout problems with split panel
+* @issue 318
+*/
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/link.pcss";
+import "../../../source/components/style/color.pcss";
+import "../../../source/components/style/theme.pcss";
+import "../../../source/components/style/normalize.pcss";
+import "../../../source/components/style/typography.pcss";
+import "../../../source/components/layout/split-panel.mjs";
+import "../../../source/components/layout/panel.mjs";
--- a/source/components/content/camera-capture.mjs
+++ b/source/components/content/camera-capture.mjs
@@ -244,7 +244,6 @@ function initCameraControl() {
 	});
 }
 function startCameraWithDeviceId(deviceId) {
 	const self = this;
 	navigator.mediaDevices
@@ -261,7 +260,6 @@ function startCameraWithDeviceId(deviceId) {
 		});
 }
 /**
 * @private
 * @returns {{takePicture: string}}
@@ -423,7 +421,7 @@ function initEventHandler() {
 		fireCustomEvent(self, "monster-camera-capture-captured", {
 			element: self,
-        })
+		});
 	});
 	return this;
@@ -460,7 +458,7 @@ function getTemplate() {
 	// language=HTML
 	return `
        <div data-monster-role="control" part="control">
-            <monster-full-screen part="full-screen" data-monster-role="full-screen" data-monster-option-selector="#stream"></monster-full-screen>
+            <monster-full-screen part="full-screen" data-monster-role="full-screen" data-monster-option-selector="[data-monster-role=control]"></monster-full-screen>
            <monster-state data-monster-role="emptyHistoryState">
                <svg slot="visual" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                     width="350"
@@ -494,7 +492,7 @@ function getTemplate() {
-            <video id="stream" autoplay style="display:none"></video>
+            <video autoplay style="display:none"></video>
            <canvas style="display:none;"></canvas>
            <div>
                <monster-button part="takePictureButton" style="display:none"

--- a/source/components/content/style/camera-capture.pcss
+++ b/source/components/content/style/camera-capture.pcss
@@ -5,7 +5,7 @@
 [data-monster-role="control"] {
    display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
    margin: 0;
    padding: 0;
    flex-direction: column;
@@ -25,9 +25,9 @@
 [ data-monster-role="full-screen"] {
    position:absolute;
-    top:10px;
+    top:2rem;
-    right:10px;
+    right:1rem;
-    z-index: 99999;
+    z-index: var(--monster-z-index-dropdown);
 }
 .camera-not-supported-text {

--- a/source/components/content/stylesheet/camera-capture.mjs
+++ b/source/components/content/stylesheet/camera-capture.mjs
--- a/source/components/content/viewer.mjs
+++ b/source/components/content/viewer.mjs
@@ -248,13 +248,12 @@ class Viewer extends CustomElement {
 	 *                  property.
 	 */
 	setPlainText(data) {
 		const mkPreSpan = (text) => {
 			const pre = document.createElement("pre");
 			pre.innerText = text;
 			pre.setAttribute("part", "text");
 			return pre.outerHTML;
-        }
+		};
 		if (data instanceof Blob) {
 			blobToText(data)
@@ -277,7 +276,6 @@ class Viewer extends CustomElement {
 			div.innerHTML = data;
 			data = div.innerText;
 		} else if (isURL(data)) {
 			getGlobal()
 				.fetch(data)
 				.then((response) => {

--- a/source/components/form/login.mjs
+++ b/source/components/form/login.mjs
@@ -477,7 +477,6 @@ function getTranslations() {
 					"Dieses Formular ist nicht konfiguriert.",
 				messagePasswordResetDisabled:
 					"Sie können keinen Code anfordern, da die<br>Zwei-Faktor-Authentifizierung bei Ihrem Konto aktiviert ist.<br>Bitte kontaktieren Sie den Administrator.",
 			};
 		case "es":
 			return {
@@ -511,9 +510,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Este formulario no está configurado.",
 				messagePasswordResetDisabled:
 					"Esta función no funciona porque la autenticación de dos factores está activada en su cuenta. Por favor, póngase en contacto con el administrador.",
 			};
 		case "zh":
 			return {
@@ -543,9 +539,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "此表单尚未配置。",
 				messagePasswordResetDisabled:
 					"此功能无法使用，因为您的帐户启用了双因素身份验证。请联系管理员。",
 			};
 		case "hi":
@@ -576,8 +569,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "यह फर कनगर नह ह।",
 				messagePasswordResetDisabled:
 					"यह सवध कम नह करत कक आपक खत म द घटक पमणकरण सकम ह। कपय पशसक स सपर कर।",
 			};
 		case "bn":
@@ -608,8 +599,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "এই ফরট কনফগর কর হযন।",
 				messagePasswordResetDisabled:
 					"এই ফশনট করকর নয করণ আপনর অযকউন দট ফকর পমণকরণ সকয কর আছ। দয কর পশসকর সথ যগযগ করন।",
 			};
 		case "pt": // Portuguese
@@ -641,8 +630,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Este formulário não está configurado.",
 				messagePasswordResetDisabled:
 					"Esta função não funciona porque a autenticação de dois fatores<br>está ativada em sua conta. Por favor, entre em contato com o administrador.",
 			};
 		case "ru": // Russian
@@ -674,8 +661,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Эта форма не настроена.",
 				messagePasswordResetDisabled:
 					"Эта функция не работает, потому что двухфакторная аутентификация<br> включена в вашей учетной записи. Пожалуйста, свяжитесь с администратором.",
 			};
 		case "ja": // Japanese
@@ -708,7 +693,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "このフォームは設定されていません。",
 				messagePasswordResetDisabled:
 					"この機能は使用できません。アカウントで二要素認証が有効になっているため、管理者に連絡してください。",
 			};
 		case "pa": // Western Punjabi
@@ -739,8 +723,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "ਇਸ ਫਰਮ ਨ ਸਰਚਤ ਨਹ ਕਤ ਗਆ ਹ।",
 				messagePasswordResetDisabled:
 					"ਇਹ ਫਕਸਨ ਕਮ ਨਹ ਕਰਦ ਕਉਕ ਤਹਡ ਖਤ ਵਚ ਦ ਫਕਟਰ ਪਰਮਣਕਰਣ ਸਰਗਰਮ ਹ। ਕਰਪ ਕਰਕ ਪਰਬਧਕ ਨਲ ਸਪਰਕ ਕਰ।",
 			};
 		case "mr": // Marathi
@@ -771,8 +753,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "ह फर सरचत कलल नह.",
 				messagePasswordResetDisabled:
 					"य करच कमगर करत नह करण आपल खतत दन घटक पमणकरण सकय कल आह. कपय ववसपकश सपर सध.",
 			};
 		case "fr": // French
@@ -806,8 +786,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Ce formulaire n'est pas configuré.",
 				messagePasswordResetDisabled:
 					"Cette fonctionnalité ne fonctionne pas car l'authentification à deux facteurs est activée sur<br>votre compte. Veuillez contacter l'administrateur.",
 			};
 		case "it": // Italian
@@ -840,7 +818,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Questo modulo non è configurato.",
 				messagePasswordResetDisabled:
 					"Questa funzione non funziona perché l'autenticazione a due<br>fattori è attiva sul tuo account. Contatta l'amministratore.",
 			};
 		case "nl": // Dutch
@@ -872,7 +849,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Dit formulier is niet geconfigureerd.",
 				messagePasswordResetDisabled:
 					"Deze functie werkt niet omdat tweefactorauthenticatie is<br>ingeschakeld op uw account. Neem contact op met de beheerder.",
 			};
 		case "sv": // Swedish
@@ -904,7 +880,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Detta formulär är inte konfigurerat.",
 				messagePasswordResetDisabled:
 					"Denna funktion fungerar inte eftersom tvåfaktorsautentisering är aktiverad på ditt konto. Kontakta administratören.",
 			};
 		case "pl": // Polish
@@ -937,7 +912,6 @@ function getTranslations() {
 					"Ten formularz nie jest skonfigurowany.",
 				messagePasswordResetDisabled:
 					"Ta funkcja nie działa, ponieważ włączona jest autoryzacja dwuetapowa na twoim koncie. Skontaktuj się z administratorem.",
 			};
 		case "da": // Danish
@@ -968,7 +942,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Denne formular er ikke konfigureret.",
 				messagePasswordResetDisabled:
 					"Denne funktion fungerer ikke, fordi tofaktorautentificering<br>er aktiveret på din konto. Kontakt administratoren.",
 			};
 		case "no": // Norwegian
@@ -1001,7 +974,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Dette skjemaet er ikke konfigurert.",
 				messagePasswordResetDisabled:
 					"Denne funksjonen fungerer ikke fordi<br>tofaktorautentisering er aktivert på kontoen din. Kontakt administratoren.",
 			};
 		case "cs": // Czech
@@ -1032,7 +1004,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Tento formulář není nakonfigurován.",
 				messagePasswordResetDisabled:
 					"Tato funkce nefunguje, protože je na vašem<br>účtu aktivováno dvoufaktorové ověřování. Kontaktujte správce.",
 			};
 		default:
@@ -1064,7 +1035,6 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "This form is not configured.",
 				messagePasswordResetDisabled:
 					"This function does not work because two-factor<br>authentication is enabled on your account.<br>Please contact the administrator.",
 			};
 	}
 }
@@ -1155,7 +1125,6 @@ function initEventHandler() {
 	});
 	this[loginButtonSymbol].setOption("actions.click", (event) => {
 		let username = this.shadowRoot.querySelector(
 			"input[name='username']",
 		).value;

--- a/source/components/form/select.mjs
+++ b/source/components/form/select.mjs
--- a/source/components/form/stylesheet/select.mjs
+++ b/source/components/form/stylesheet/select.mjs
--- a/source/components/layout/full-screen.mjs
+++ b/source/components/layout/full-screen.mjs
@@ -33,7 +33,9 @@ export {FullScreen};
 * @private
 * @type {symbol}
 */
-export const fullScreenControlElementSymbol = Symbol("fullScreenControlElement");
+export const fullScreenControlElementSymbol = Symbol(
+	"fullScreenControlElement",
+);
 /**
 * @private
 * @type {symbol}
@@ -45,7 +47,6 @@ export const fullScreenElementSymbol = Symbol("fullScreenElement");
 */
 export const fullScreenExitElementSymbol = Symbol("fullScreenExitElement");
 /**
 * A FullScreen
 *
@@ -63,7 +64,9 @@ class FullScreen extends CustomElement {
 	 * @returns {symbol}
 	 */
 	static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/layout/full-screen@@instance");
+		return Symbol.for(
+			"@schukai/monster/components/layout/full-screen@@instance",
+		);
 	}
 	/**
@@ -92,7 +95,7 @@ class FullScreen extends CustomElement {
 			templates: {
 				main: getTemplate(),
 			},
-            selector: ":first-child"
+			selector: ":first-child",
 		});
 	}
@@ -109,8 +112,6 @@ class FullScreen extends CustomElement {
 	static getCSSStyleSheet() {
 		return [FullScreenStyleSheet];
 	}
 }
 /**
@@ -121,7 +122,7 @@ function initEventHandler() {
 	const self = this;
 	const element = this[fullScreenControlElementSymbol];
-    document.addEventListener('fullscreenchange', (event) => {
+	document.addEventListener("fullscreenchange", (event) => {
 		const control = findTargetControl.call(self);
 		if (document.fullscreenElement === control) {
@@ -131,14 +132,11 @@ function initEventHandler() {
 			self[fullScreenExitElementSymbol].classList.add("hidden");
 			self[fullScreenElementSymbol].classList.remove("hidden");
 		}
 	});
 	const type = "click";
 	element.addEventListener(type, function (event) {
 		const control = findTargetControl.call(self);
 		if (!control) {
@@ -151,7 +149,6 @@ function initEventHandler() {
 		});
 		toggleFullscreen.call(self, control);
 	});
 	return this;
@@ -192,7 +189,7 @@ function findTargetControl(self) {
 */
 function toggleFullscreen(element) {
 	if (!document.fullscreenElement) {
-        element.requestFullscreen().catch(err => {
+		element.requestFullscreen().catch((err) => {
 			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, err.message);
 		});
 	} else {
@@ -226,5 +223,4 @@ function getTemplate() {
        </div>`;
 }
 registerCustomElement(FullScreen);
--- a/source/components/layout/panel.mjs
+++ b/source/components/layout/panel.mjs
@@ -44,7 +44,7 @@ const resizeObserverSymbol = Symbol("resizeObserver");
 const timerCallbackSymbol = Symbol("timerCallback");
 /**
- * A Slider
+ * A Panel is a container that can hold other elements and is used to display content in a structured way.
 *
 * @fragments /fragments/components/layout/panel/
 *

--- a/source/components/layout/stylesheet/full-screen.mjs
+++ b/source/components/layout/stylesheet/full-screen.mjs
@@ -13,7 +13,7 @@
 import { addAttributeToken } from "../../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {FullScreenStyleSheet}
+export { FullScreenStyleSheet };
 /**
 * @private
@@ -22,10 +22,17 @@ export {FullScreenStyleSheet}
 const FullScreenStyleSheet = new CSSStyleSheet();
 try {
-  FullScreenStyleSheet.insertRule(`
+	FullScreenStyleSheet.insertRule(
+		`
 @layer fullscreen { 
 [data-monster-role=control]{align-items:center;background-color:var(--monster-bg-color-primary-1);border:1px solid var(--monster-bg-color-primary-4);border-radius:2rem;color:var(--monster-color-primary-1);cursor:pointer;display:flex;flex-direction:column;height:2rem;justify-content:center;margin:0;overflow:hidden;padding:.5rem;position:relative;width:2rem}[data-monster-role=fullscreen-exit],[data-monster-role=fullscreen]{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.hidden{display:none} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }