@schukai/monster 3.96.3 → 3.97.0

package/source/i18n/map/languages.mjs

@@ -0,0 +1,104 @@
+/**
+ * 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.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+export const languages = {
+    "en": "English",
+    "en-GB": "English (United Kingdom)",
+    "en-US": "English (United States)",
+    "en-CA": "English (Canada)",
+    "en-AU": "English (Australia)",
+    "es": "Español",
+    "es-ES": "Español (España)",
+    "es-MX": "Español (México)",
+    "es-AR": "Español (Argentina)",
+    "zh": "中文",
+    "zh-CN": "中文（简体）",
+    "zh-TW": "中文（繁體）",
+    "zh-HK": "中文（香港）",
+    "fr": "Français",
+    "fr-FR": "Français (France)",
+    "fr-CA": "Français (Canada)",
+    "fr-BE": "Français (Belgique)",
+    "de": "Deutsch",
+    "de-DE": "Deutsch (Deutschland)",
+    "de-AT": "Deutsch (Österreich)",
+    "de-CH": "Deutsch (Schweiz)",
+    "ja": "日本語",
+    "ru": "Русский",
+    "ru-RU": "Русский (Россия)",
+    "it": "Italiano",
+    "it-IT": "Italiano (Italia)",
+    "pt": "Português",
+    "pt-PT": "Português (Portugal)",
+    "pt-BR": "Português (Brasil)",
+    "ko": "한국어",
+    "ar": "العربية",
+    "hi": "हिन्दी",
+    "bn": "বাংলা",
+    "pa": "ਪੰਜਾਬੀ",
+    "id": "Bahasa Indonesia",
+    "vi": "Tiếng Việt",
+    "tr": "Türkçe",
+    "tr-TR": "Türkçe (Türkiye)",
+    "pl": "Polski",
+    "pl-PL": "Polski (Polska)",
+    "uk": "Українська",
+    "uk-UA": "Українська (Україна)",
+    "ro": "Română",
+    "ro-RO": "Română (România)",
+    "nl": "Nederlands",
+    "nl-NL": "Nederlands (Nederland)",
+    "el": "Ελληνικά",
+    "el-GR": "Ελληνικά (Ελλάδα)",
+    "hu": "Magyar",
+    "hu-HU": "Magyar (Magyarország)",
+    "sv": "Svenska",
+    "sv-SE": "Svenska (Sverige)",
+    "cs": "Čeština",
+    "cs-CZ": "Čeština (Česká republika)",
+    "bg": "Български",
+    "bg-BG": "Български (България)",
+    "da": "Dansk",
+    "da-DK": "Dansk (Danmark)",
+    "fi": "Suomi",
+    "fi-FI": "Suomi (Suomi)",
+    "sk": "Slovenčina",
+    "sk-SK": "Slovenčina (Slovensko)",
+    "he": "עברית",
+    "th": "ไทย",
+    "sr": "Српски",
+    "sr-RS": "Српски (Србија)",
+    "no": "Norsk",
+    "no-NO": "Norsk (Norge)",
+    "lt": "Lietuvių",
+    "lt-LT": "Lietuvių (Lietuva)",
+    "lv": "Latviešu",
+    "lv-LV": "Latviešu (Latvija)",
+    "et": "Eesti",
+    "et-EE": "Eesti (Eesti)",
+    "hr": "Hrvatski",
+    "hr-HR": "Hrvatski (Hrvatska)",
+    "sl": "Slovenščina",
+    "sl-SI": "Slovenščina (Slovenija)",
+    "mt": "Malti",
+    "mt-MT": "Malti (Malta)",
+    "is": "Íslenska",
+    "is-IS": "Íslenska (Ísland)",
+    "ga": "Gaeilge",
+    "ga-IE": "Gaeilge (Éire)",
+    "cy": "Cymraeg",
+    "cy-GB": "Cymraeg (Y Deyrnas Unedig)",
+    "sq": "Shqip",
+    "sq-AL": "Shqip (Shqipëria)"
+};

package/source/i18n/util.mjs

@@ -0,0 +1,139 @@
+/**
+ * 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.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import {languages} from "./map/languages.mjs";
+
+/**
+ * Determines the user's preferred language based on browser settings and available language options.
+ *
+ * It evaluates the current HTML document language, the browser's defined languages, and
+ * the language options from `<link>` elements with `hreflang` attributes in the document.
+ *
+ * @return {Object} An object containing information about the detected language, preferred language, and available languages.
+ */
+export function detectUserLanguagePreference() {
+    const currentLang = document.documentElement.lang;
+
+    let preferredLanguages = [];
+
+    if (typeof navigator.language === "string" && navigator.language.length > 0) {
+        preferredLanguages = [navigator.language];
+    }
+
+    if (Array.isArray(navigator.languages) && navigator.languages.length > 0) {
+        preferredLanguages = navigator.languages;
+    }
+
+    // add to preferredLanguages all the base languages of the preferred languages
+    preferredLanguages = preferredLanguages.concat(preferredLanguages.map(lang => lang.split("-")[0]));
+
+
+    if (!currentLang && preferredLanguages.length === 0) {
+        return {
+            message: "No language information available.",
+        };
+    }
+
+    const linkTags = document.querySelectorAll("link[hreflang]");
+    if (linkTags.length === 0) {
+        return {
+            current: currentLang || null,
+            message: "No <link> tags with hreflang available.",
+        };
+    }
+
+    const availableLanguages = [...linkTags].map((link) => {
+        const fullLang = link.hreflang;
+        const baseLang = fullLang.split("-")[0];
+        let label = link.getAttribute('data-monster-label')
+        if (!label) {
+            label = languages?.[fullLang]
+            if (!label) {
+                label = languages?.[baseLang]
+            }
+        }
+
+        return {
+            fullLang,
+            baseLang,
+            label,
+            href: link.href,
+        };
+    });
+
+    // filter availableLanguages to only include languages that are in the preferredLanguages array
+    const offerableLanguages = availableLanguages.filter(lang => preferredLanguages.includes(lang.fullLang) || preferredLanguages.includes(lang.baseLang));
+
+    if (offerableLanguages.length === 0) {
+        return {
+            current: currentLang || null,
+            message: "No available languages match the user's preferences.",
+            available: availableLanguages.map((lang) => ({
+                ...lang,
+                weight: 1,
+            })),
+        };
+    }
+
+    // Helper function to determine the "weight" of a language match
+    function getWeight(langEntry) {
+        // Full match has priority 3
+        if (preferredLanguages.includes(langEntry.fullLang)) return 3;
+        // Base language match has priority 2
+        if (preferredLanguages.includes(langEntry.baseLang)) return 2;
+        // No match is priority 1
+        return 1;
+    }
+
+    // Sort the available languages by descending weight
+    offerableLanguages.sort((a, b) => getWeight(b) - getWeight(a));
+
+    // The best match is the first in the sorted list
+    const bestMatch = offerableLanguages[0];
+    const bestMatchWeight = getWeight(bestMatch);
+
+    const currentLabel = languages?.[currentLang] || currentLang
+
+    // If we found a language that matches user preferences (weight > 1)
+    if (bestMatchWeight > 0) {
+        return {
+            current: currentLang || null,
+            currentLabel: currentLabel,
+            preferred: {
+                full: bestMatch.fullLang,
+                base: bestMatch.baseLang,
+                label: bestMatch.label,
+                href : bestMatch.href,
+            },
+            available: availableLanguages.map((lang) => ({
+                ...lang,
+                weight: getWeight(lang),
+            })),
+            offerable: offerableLanguages.map((lang) => ({
+                ...lang,
+                weight: getWeight(lang),
+            })),
+        };
+    }
+
+    // If no language matched the user's preferences
+    return {
+        current: currentLang || null,
+        message: "None of the preferred languages are available.",
+        available: availableLanguages.map((lang) => ({
+            ...lang,
+            weight: getWeight(lang),
+        })),
+    };
+}

package/test/cases/i18n/util.mjs

@@ -0,0 +1,295 @@
+import {getGlobal} from "../../../source/types/global.mjs";
+
+import * as chai from 'chai';
+import {chaiDom} from "../../util/chai-dom.mjs";
+import {initJSDOM} from "../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+describe('LocalPicker', function () {
+
+    let LocalPicker, documentLanguage, linkTags, originalLanguages, getPreferredLanguage;
+
+    before(function (done) {
+        initJSDOM().then(() => {
+
+            documentLanguage = document.documentElement.lang;
+            linkTags = Array.from(document.querySelectorAll('link[rel="alternate"]'));
+            linkTags.forEach(item => item.remove());
+
+            import("element-internals-polyfill").catch(e => done(e));
+
+            import("../../../source/i18n/util.mjs").then((m) => {
+
+                LocalPicker = m['LocalPicker'];
+                getPreferredLanguage = m['detectUserLanguagePreference'];
+
+                originalLanguages = navigator.languages;
+
+                done()
+            }).catch(e => done(e))
+
+
+        });
+    })
+
+    after(function () {
+        document.documentElement.lang = documentLanguage;
+
+        linkTags.forEach(item => {
+            const link = document.createElement('link');
+            link.setAttribute('rel', 'alternate');
+            link.setAttribute('hreflang', item.hreflang);
+            link.setAttribute('href', item.href);
+
+            // check if already exits
+            if (!document.querySelector(`link[hreflang="${item.hreflang}"]`)) {
+                document.querySelector('head').appendChild(link);
+            }
+        });
+
+
+        Object.defineProperty(navigator, 'languages', {
+            value: originalLanguages,
+            writable: true
+        });
+
+
+    })
+
+    // Hilfsfunktion zum Setup eines JSDOM-Dokuments mit <html> und ggf. link-Tags
+    function setupDOM({htmlLang = '', linkHreflangs = [], navLang = ""}) {
+
+        linkTags = Array.from(document.querySelectorAll('link[rel="alternate"]'));
+        linkTags.forEach(item => item.remove());
+
+        // Links hinzufügen
+        const head = window.document.querySelector('head');
+        linkHreflangs.forEach(item => {
+            const link = window.document.createElement('link');
+            link.setAttribute('rel', 'alternate');
+            link.setAttribute('hreflang', item.hreflang);
+            link.setAttribute('href', item.href);
+            head.appendChild(link);
+        });
+
+        window.document.documentElement.lang = htmlLang;
+
+
+        Object.defineProperty(navigator, 'language', {
+            value: navLang[0] || "",
+            writable: true
+        });
+
+        Object.defineProperty(navigator, 'languages', {
+            value: navLang,
+            writable: true
+        });
+    }
+
+    describe('getPreferredLanguage()', () => {
+
+        // 1) No document language, no navigator.languages => "No language information available."
+        it('should return "No language information available." when no current and no user preferences', () => {
+            setupDOM({htmlLang: '', linkHreflangs: [], navLang: []});
+
+            const result = getPreferredLanguage();
+            expect(result).to.have.property('message').that.not.empty;
+        });
+
+        // 2) Document lang is set, but no <link> tags => "No <link> tags with hreflang available."
+        it('should return "No <link> tags with hreflang available." when there are no link tags', () => {
+            setupDOM({htmlLang: 'en', linkHreflangs: []});
+            window.navigator.languages = [];
+
+            const result = getPreferredLanguage();
+            expect(result).to.have.property('current', 'en');
+            expect(result).to.have.property('message').that.equals('No <link> tags with hreflang available.');
+        });
+
+        // 3) Document lang 'en', no user preferences, but link tags exist => "None of the preferred languages are available."
+        it('should return "None of the preferred languages are available." when there are link tags but no matching user preferences', () => {
+            setupDOM({
+                htmlLang: 'en',
+                linkHreflangs: [
+                    {hreflang: 'de', href: 'http://example.com/de'},
+                    {hreflang: 'fr', href: 'http://example.com/fr'}
+                ],
+                navLang: []
+            });
+
+            const result = getPreferredLanguage();
+            expect(result).to.have.property('current', 'en');
+            expect(result).to.have.property('message').that.equals('No available languages match the user\'s preferences.');
+            expect(result.available).to.be.an('array').that.has.lengthOf(2);
+        });
+
+        // 4) Document lang 'en', user prefers ['en'], link tags with 'en' and 'de' => best match is 'en'
+        it('should return best match = "en" when user prefers en', () => {
+            setupDOM({
+                htmlLang: 'en',
+                linkHreflangs: [
+                    {hreflang: 'en', href: 'http://example.com/en'},
+                    {hreflang: 'de', href: 'http://example.com/de'}
+                ]
+            });
+            window.navigator.languages = ['en'];
+
+            const result = getPreferredLanguage();
+            expect(result).to.have.property('current', 'en');
+            console.log(JSON.stringify(result.preferred));
+            expect(result.preferred).to.have.property('full', "en");
+            expect(result.preferred).to.have.property('base', "en");
+            expect(result.preferred).to.have.property('label', "English");
+            expect(result.preferred).to.have.property('href', "http://example.com/en");
+        });
+
+        // 5) Document lang 'de-DE', user prefers ['de-DE'], link tags with 'de-DE' & 'en-US' => best match is 'de-DE'
+        it('should return best match = "de-DE" when user prefers de-DE', () => {
+            setupDOM({
+                htmlLang: 'de-DE',
+                linkHreflangs: [
+                    {hreflang: 'de-DE', href: 'http://example.com/de-DE'},
+                    {hreflang: 'en-US', href: 'http://example.com/en-US'}
+                ]
+            });
+            window.navigator.languages = ['de-DE'];
+
+            const result = getPreferredLanguage();
+            expect(result).to.have.property('current', 'de-DE');
+
+            expect(result.preferred).to.have.property('full', "de-DE");
+            expect(result.preferred).to.have.property('base', "de");
+            expect(result.preferred).to.have.property('label', "Deutsch (Deutschland)");
+            expect(result.preferred).to.have.property('href', "http://example.com/de-DE");
+
+        });
+
+
+        // 5x) Document lang 'de-DE', user prefers ['de-DE'], link tags with 'de-DE' & 'en-US' => best match is 'de-DE'
+        it('should return best match = "de-DE" when user prefers de-DE', () => {
+            setupDOM({
+                htmlLang: 'en',
+                linkHreflangs: [
+                    {hreflang: 'de', href: 'http://example.com/de-DE'},
+                    {hreflang: 'en', href: 'http://example.com/en-US'}
+                ]
+            });
+            window.navigator.languages = ['de-DE'];
+
+            const result = getPreferredLanguage();
+            expect(result).to.have.property('current', 'en');
+
+            expect(result.preferred).to.have.property('full', "de");
+            expect(result.preferred).to.have.property('base', "de");
+            expect(result.preferred).to.have.property('label', "Deutsch");
+            expect(result.preferred).to.have.property('href', "http://example.com/de-DE");
+
+        });
+
+        // 6) Document lang 'de-DE', user prefers ['en-US', 'en'], link tags with 'en-US' & 'en-GB' => best match = 'en-US'
+        it('should return best match = "en-US" for user preferences [en-US, en]', () => {
+            setupDOM({
+                htmlLang: 'de-DE',
+                linkHreflangs: [
+                    {hreflang: 'en-US', href: 'http://example.com/en-US'},
+                    {hreflang: 'en-GB', href: 'http://example.com/en-GB'}
+                ]
+            });
+            window.navigator.languages = ['en-US', 'en'];
+
+            const result = getPreferredLanguage();
+            expect(result).to.have.property('current', 'de-DE');
+            expect(result.preferred).to.have.property('full', "en-US");
+            expect(result.preferred).to.have.property('base', "en");
+            expect(result.preferred).to.have.property('label', "English (United States)");
+            expect(result.preferred).to.have.property('href', "http://example.com/en-US");
+
+        });
+
+        // 7) Document lang 'de-DE', user prefers ['de','en'], link tags with 'de-DE' & 'en-US' => best match = 'de-DE' (baseLang = 'de')
+        it('should return best match = "de-DE" when user preferences include its base language "de"', () => {
+            setupDOM({
+                htmlLang: 'de-DE',
+                linkHreflangs: [
+                    {hreflang: 'de-DE', href: 'http://example.com/de-DE'},
+                    {hreflang: 'en-US', href: 'http://example.com/en-US'}
+                ]
+            });
+            window.navigator.languages = ['de', 'en'];
+
+            const result = getPreferredLanguage();
+            expect(result).to.have.property('current', 'de-DE');
+
+            expect(result.preferred).to.have.property('full', "de-DE");
+            expect(result.preferred).to.have.property('base', "de");
+            expect(result.preferred).to.have.property('label', "Deutsch (Deutschland)");
+            expect(result.preferred).to.have.property('href', "http://example.com/de-DE");
+
+        });
+
+        // 8) Multiple link tags share the same weight => the first in the sorted array should be returned
+        it('should return the first item when multiple link tags have the same weight', () => {
+            setupDOM({
+                htmlLang: 'en',
+                linkHreflangs: [
+                    {hreflang: 'fr', href: 'http://example.com/fr'},
+                    {hreflang: 'es', href: 'http://example.com/es'}
+                ]
+            });
+            // Neither "fr" nor "es" is in the user preferences => both have weight = 1
+            window.navigator.languages = ['de'];
+
+            const result = getPreferredLanguage();
+            // Both 'fr' and 'es' have weight 1. After sorting, 'fr' appears first (as it was added first).
+            expect(result.available[0].fullLang).to.equal('fr');
+            expect(result.available[1].fullLang).to.equal('es');
+            expect(result.offerable).to.be.undefined;
+            expect(result).to.have.property('message', 'No available languages match the user\'s preferences.');
+        });
+
+        // 9) Check that bestURL is returned if a best match is found
+        it('should include bestURL when a best match is found', () => {
+            setupDOM({
+                htmlLang: 'fr',
+                linkHreflangs: [
+                    {hreflang: 'fr-FR', href: 'http://example.com/fr-FR'},
+                    {hreflang: 'de-DE', href: 'http://example.com/de-DE'}
+                ]
+            });
+            window.navigator.languages = ['fr-FR', 'de-DE'];
+
+            const result = getPreferredLanguage();
+
+            expect(result.preferred).to.have.property('full', "fr-FR");
+            expect(result.preferred).to.have.property('base', "fr");
+            expect(result.preferred).to.have.property('label', "Français (France)");
+            expect(result.preferred).to.have.property('href', "http://example.com/fr-FR");
+
+        });
+
+        // 10) Check presence of availableLanguages array, ensuring it has weight info
+        it('should return availableLanguages with weight for each link', () => {
+            setupDOM({
+                htmlLang: 'en-GB',
+                linkHreflangs: [
+                    {hreflang: 'en-GB', href: 'http://example.com/en-GB'},
+                    {hreflang: 'en-US', href: 'http://example.com/en-US'}
+                ]
+            });
+            window.navigator.languages = ['en-GB', 'en', 'en-US'];
+
+            const result = getPreferredLanguage();
+            expect(result.available).to.be.an('array').with.lengthOf(2);
+            result.available.forEach(item => {
+                expect(item).to.have.property('weight');
+                expect(item).to.have.property('fullLang');
+                expect(item).to.have.property('baseLang');
+                expect(item).to.have.property('href');
+            });
+        });
+
+    });
+
+})