Skip to content
Snippets Groups Projects
Verified Commit 592e01ef authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

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.
parent 328cdd8a
No related branches found
No related tags found
No related merge requests found
Showing with 3604 additions and 3504 deletions
<!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>
/**
* @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";
......@@ -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"
......
......@@ -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;
right:10px;
z-index: 99999;
top:2rem;
right:1rem;
z-index: var(--monster-z-index-dropdown);
}
.camera-not-supported-text {
......
......@@ -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) => {
......
......@@ -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;
......
This diff is collapsed.
This diff is collapsed.
......@@ -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);
......@@ -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/
*
......
......@@ -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 + "",
);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment