fix: optimize the day control #298

274a204f · Volker Schukai · 3e812c2b · 274a204f · 274a204f · 274a204f
Verified Commit 274a204f authored 1 month ago by Volker Schukai
--- a/development/issues/closed/298.html
+++ b/development/issues/closed/298.html
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>new day control #298</title>
+    <script src="298.mjs" type="module"></script>
+</head>
+<body>
+    <h1>new day control #298</h1>
+    <p></p>
+    <ul>
+        <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/298">Issue #298</a></li>
+        <li><a href="/">Back to overview</a></li>
+    </ul>
+    <main style="display: flex; flex-direction: column; align-items: center;    ">
+        <monster-day data-monster-option-date="2025-03-12" id="date1425a"></monster-day>
+        <div style="height: 50px"></div>
+        <monster-day class="small" data-monster-option-date="2025-03-12" id="date1425b"></monster-day>
+        <div style="height: 100px"></div>
+        <div>
+        <monster-day class="small" data-monster-option-date="2025-03-12"></monster-day>
+            <br>
+        <monster-day data-monster-option-date="2025-03-12"></monster-day>
+        </div>
+        <div>
+        <monster-day class="small" data-monster-option-date="2024-03-11"></monster-day>
+            <br>
+        <monster-day data-monster-option-date="2024-03-11"></monster-day>
+        </div>
+    </main>
+</body>
+</html>
--- a/development/issues/closed/298.mjs
+++ b/development/issues/closed/298.mjs
+/**
+* @file development/issues/open/298.mjs
+* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/298
+* @description new day control
+* @issue 298
+*/
+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/time/day.mjs";
+const currentDate = new Date();
+setInterval(() => {
+    for(let i = 0; i < 3; i++) {
+        setTimeout(() => {
+            const calcDate = new Date(currentDate.getTime() + i * 24 * 60 * 60 * 1000);
+        document.getElementById("date1425a").setAttribute("data-monster-option-date", calcDate);
+        document.getElementById("date1425b").setAttribute("data-monster-option-date", calcDate);
+        } , 1000 * i);
+        // sleep(1000);
+    }
+}, 1000);
+    //document.getElementById("date1425").setOption("date", "2021-02-01");
--- a/source/components/layout/popper.mjs
+++ b/source/components/layout/popper.mjs
@@ -140,7 +140,7 @@ class Popper extends CustomElement {
 	/**
 	 * This method is called by the `connectedCallback` method on the first call.
 	 *
-	 * @return {Void}
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();

--- a/source/components/time/day.mjs
+++ b/source/components/time/day.mjs
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+import {instanceSymbol} from "../../constants.mjs";
+import {
+ ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import {CustomElement} from "../../dom/customelement.mjs";
+import {
+    assembleMethodSymbol, registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {DayStyleSheet} from "./stylesheet/day.mjs";
+import {isString} from "../../types/is.mjs"
+import {getLocaleOfDocument} from "../../dom/locale.mjs";
+import {Observer} from "../../types/observer.mjs";
+import {Processing} from "../../util/processing.mjs";
+export {Day};
+/**
+ * @private
+ * @type {symbol}
+ */
+const dayElementSymbol = Symbol("dayElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const dayMonthElementSymbol = Symbol("dayMonthElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const dayDayElementSymbol = Symbol("dayDayElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const dayWeekdayElementSymbol = Symbol("dayWeekdayElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const dayLabelElementSymbol = Symbol("dayLabelElement");
+/**
+ * A Day Control
+ *
+ * @fragments /fragments/components/time/day/
+ *
+ * @example /examples/components/time/day-simple
+ * @example /examples/components/time/day-simple-small
+ *
+ * @since 3.113.0
+ * @copyright schukai GmbH
+ * @summary A day control that displays the day, month, weekday and a label.
+ */
+class Day extends CustomElement {
+    /**
+     *
+     */
+    constructor() {
+        super();
+        initOptionObserver.call(this);
+    }
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/time/day@@instance");
+    }
+    /**
+     *
+     * @return {Components.Time.Day
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+        initControlReferences.call(this);
+        updateDate.call(this);
+        return this;
+    }
+    /**
+     * 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 {string} date The date of the day
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            date: null,
+            day: null, month: null, weekday: null, label: null,
+            disabled: false
+        });
+    }
+    /**
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-day";
+    }
+    /**
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [DayStyleSheet];
+    }
+    /**
+     * @return {string[]}
+     * @since 1.15.0
+     */
+    static get observedAttributes() {
+        return ["data-monster-option-date"];
+    }
+}
+/**
+ * @private
+ */
+function initOptionObserver() {
+    const self = this;
+    let lastDate = this.getOption("date");
+    self.attachObserver(
+        new Observer(function () {
+            new Processing(() => {
+                if (lastDate !== self.getOption("date")) {
+                    lastDate = self.getOption("date");
+                    updateDate.call(self);
+                }
+            }).run();
+        }),
+    );
+}
+/**
+ * @private
+ */
+function updateDate() {
+    const labels = getLabels.call(this)
+    let date = this.getOption("date");
+    let day = null;
+    let label = null;
+    if (date === null) {
+        date = new Date();
+    } else if (isString(date)) {
+        date = new Date(date);
+    }
+    if (!(date instanceof Date)) {
+        return
+    }
+    day = date.getDate();
+    const locale = getLocaleOfDocument();
+    this.setOption("day", day);
+    this.setOption("month", new Intl.DateTimeFormat(locale.toString(), {
+        month: "short"
+    }).format(date));
+    this.setOption("weekday", new Intl.DateTimeFormat(locale.toString(), {
+        weekday: "long"
+    }).format(date));
+    if (date.toDateString() === new Date().toDateString()) {
+        label = labels.today;
+    } else if (date.toDateString() === new Date(new Date().setDate(new Date().getDate() - 1)).toDateString()) {
+        label = labels.yesterday;
+    } else if (date.toDateString() === new Date(new Date().setDate(new Date().getDate() + 1)).toDateString()) {
+        label = labels.tomorrow;
+    }
+    this.setOption("label", label);
+}
+function getLabels() {
+    switch (getLocaleOfDocument().language) {
+        case  "de": // German
+            return {
+                "today": "Heute",
+                "tomorrow": "Morgen",
+                "yesterday": "Gestern"
+            };
+        case "es": // Spanish
+            return {
+                "today": "Hoy",
+                "tomorrow": "Mañana",
+                "yesterday": "Ayer"
+            };
+        case "zh": // Mandarin
+            return {
+                "today": "今天",
+                "tomorrow": "明天",
+                "yesterday": "昨天"
+            };
+        case "hi": // Hindi
+            return {
+                "today": "आज",
+                "tomorrow": "कल",
+                "yesterday": "बीता कल"
+            };
+        case "bn": // Bengali
+            return {
+                "today": "আজ",
+                "tomorrow": "আগামীকাল",
+                "yesterday": "গতকাল"
+            };
+        case "pt": // Portuguese
+            return {
+                "today": "Hoje",
+                "tomorrow": "Amanhã",
+                "yesterday": "Ontem"
+            };
+        case "ru": // Russian
+            return {
+                "today": "Сегодня",
+                "tomorrow": "Завтра",
+                "yesterday": "Вчера"
+            };
+        case "ja": // Japanese
+            return {
+                "today": "今日",
+                "tomorrow": "明日",
+                "yesterday": "昨日"
+            };
+        case "pa": // Western Punjabi
+            return {
+                "today": "ਅਜ",
+                "tomorrow": "ਕਲ",
+                "yesterday": "ਬੀਤੇ ਕਲ"
+            };
+        case "mr": // Marathi
+            return {
+                "today": "आज",
+                "tomorrow": "उद्या",
+                "yesterday": "काल"
+            };
+        case "fr": // French
+            return {
+                "today": "Aujourd'hui",
+                "tomorrow": "Demain",
+                "yesterday": "Hier"
+            };
+        case "it": // Italian
+            return {
+                "today": "Oggi",
+                "tomorrow": "Domani",
+                "yesterday": "Ieri"
+            };
+        case "nl": // Dutch
+            return {
+                "today": "Vandaag",
+                "tomorrow": "Morgen",
+                "yesterday": "Gisteren"
+            };
+        case "sv": // Swedish
+            return {
+                "today": "Idag",
+                "tomorrow": "Imorgon",
+                "yesterday": "Igår"
+            };
+        case "pl": // Polish
+            return {
+                "today": "Dziś",
+                "tomorrow": "Jutro",
+                "yesterday": "Wczoraj"
+            };
+        case "da": // Danish
+            return {
+                "today": "I dag",
+                "tomorrow": "I morgen",
+                "yesterday": "I går"
+            };
+        case "fi": // Finnish
+            return {
+                "today": "Tänään",
+                "tomorrow": "Huomenna",
+                "yesterday": "Eilen"
+            };
+        case "no": // Norwegian
+            return {
+                "today": "I dag",
+                "tomorrow": "I morgen",
+                "yesterday": "I går"
+            };
+        case "cs": // Czech
+            return {
+                "today": "Dnes",
+                "tomorrow": "Zítra",
+                "yesterday": "Včera"
+            };
+        default:
+            return {
+                "today": "Today", "tomorrow": "Tomorrow", "yesterday": "Yesterday"
+            };
+    }
+}
+/**
+ * @private
+ * @param format
+ * @returns {*[]}
+ */
+function getWeekdays(format = "long") {
+    const locale = getLocaleOfDocument();
+    const weekdays = [];
+    for (let i = 1; i < 8; i++) {
+        const date = new Date(1970, 0, 4 + i); // 4. Jan. 1970 = Sonntag
+        weekdays.push(new Intl.DateTimeFormat(locale, {weekday: format}).format(date),);
+    }
+    return weekdays;
+}
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+    this[dayElementSymbol] = this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}="control"]`,);
+    this[dayMonthElementSymbol] = this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}="month"]`,);
+    this[dayDayElementSymbol] = this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}="day"]`,);
+    this[dayWeekdayElementSymbol] = this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}="weekday"]`,);
+    this[dayLabelElementSymbol] = this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}="label"]`,);
+}
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+    // language=HTML
+    return `
+        <div data-monster-role="control" part="control">
+            <div class="month" data-monster-role="month" part="month" data-monster-replace="path:month"></div>
+            <div data-monster-role="day" part="day" data-monster-replace="path:day">12</div>
+            <div style="width: 100%; height: 0;" part="divider"></div>
+            <div data-monster-role="weekday" part="weekday" data-monster-replace="path:weekday">Wed</div>
+            <div data-monster-role="label" part="label" data-monster-replace="path:label">Tomorrow</div>
+        </div>`;
+}
+registerCustomElement(Day);
--- a/source/components/time/style/day.pcss
+++ b/source/components/time/style/day.pcss
+@import "../../style/control.pcss";
+@import "../../style/accessibility.pcss";
+@import "../../style/button.pcss";
+@import "../../style/border.pcss";
+@import "../../style/typography.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/color.pcss";
+:host {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+[data-monster-role="control"] {
+    user-select: none;
+    display: flex;
+    width: 8rem;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+[data-monster-role="month"] {
+    background-color: var(--monster-bg-color-primary-2);
+    color: var(--monster-color-primary-2);
+    font-size: 1.2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    width: 8rem;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+[data-monster-role="day"] {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--monster-color-secondary-1);
+    background-color: var(--monster-bg-color-primary-1);
+    width: 8rem;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+[data-monster-role="weekday"] {
+    font-size: 0.8rem;
+    color: var(--monster-color-primary-1);
+    background-color: var(--monster-bg-color-primary-1);
+    width: 8rem;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+[data-monster-role="label"] {
+    background-color: var(--monster-bg-color-secondary-1);
+    color: var(--monster-color-secondary-2);
+    padding: 0.2rem 0;
+    margin: 0.5rem 0;
+    width: 8rem;
+    font-size: 1rem;
+    text-align: center;
+    height: 1.5rem;
+}
+[data-monster-role="label"]:not(:empty) {
+    border-top: 1px solid var(--monster-color-secondary-1);
+    height: calc(1.5rem - 1px);
+}
+:host(.small) [data-monster-role="control"] {
+    flex-flow: row;
+    flex-wrap: wrap;
+    gap: 0 4px;
+    width: fit-content;
+}
+:host(.small) [data-monster-role="control"] > div {
+    text-align: left;
+    width: auto;
+}
+:host(.small) div[data-monster-role="day"] {
+    flex-grow: 20;
+}
+:host(.small) div[data-monster-role="month"],
+:host(.small) div[data-monster-role="day"] {
+    background-color: var(--monster-bg-color-primary-1);
+    color: var(--monster-color-primary-1);
+    font-size: 1.1rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+:host(.small) div[data-monster-role="weekday"] {
+}
+:host(.small) div[data-monster-role="weekday"],
+:host(.small) div[data-monster-role="label"] {
+}
+:host(.small) div[data-monster-role="weekday"] {
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-size: 1rem;
+    text-wrap: nowrap;
+}
+:host(.small) div[data-monster-role="label"] {
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 12px;
+    border: none;
+    background-color: var(--monster-bg-color-secondary-2);
+    color: var(--monster-color-secondary-2);
+    margin: 0 4px;
+    font-size: 0.8rem;
+    text-wrap: nowrap;
+}
+:host(.small) div[data-monster-role="label"]:empty {
+    display: none;
+}
--- a/source/components/time/stylesheet/day.mjs
+++ b/source/components/time/stylesheet/day.mjs
--- a/source/dom/locale.mjs
+++ b/source/dom/locale.mjs
@@ -25,8 +25,8 @@ export { getLocaleOfDocument };
 const DEFAULT_LANGUAGE = "en";
 /**
- * With this function you can read the language version set by the document.
+ * With this function, you can read the language version set by the document.
- * For this the attribute `lang` in the html tag is read. If no attribute is set, `en` is used as default.
+ * For this, the attribute `lang` in the HTML tag is read. If no attribute is set, `en` is used as default.
 * Alternatively, the language version of the browser is used.
 *
 * ```html
@@ -41,6 +41,7 @@ const DEFAULT_LANGUAGE = "en";
 * @throws {TypeError} value is not a string
 * @throws {Error} unsupported locale
 * @summary Tries to determine the locale used
+ * @return {Locale}
 */
 function getLocaleOfDocument() {
 	const document = getDocument();

--- a/source/i18n/internal.mjs
+++ b/source/i18n/internal.mjs
@@ -21,6 +21,10 @@ export { getInternalLocalizationMessage };
 let internalTranslations = null;
 getInternalTranslations();
+/**
+ *
+ * @returns {*|Translations}
+ */
 function getInternalTranslations() {
 	if (internalTranslations) {
 		return internalTranslations;