[demoController] enable more internationalization of typeSpec config, so far especially of columnConfig.

Author: graphicore

Emsquare/Volume-01/js/main.mjs

@@ -9,19 +9,11 @@ function reduceColumnConfig (columnConfig) {
     return result;
 }
 
-const typeSpec_ = {};
-for(let [k,v] of  Object.entries(typeSpec)) {
-    if(k === 'columnConfig') {
-        let columnConfig_ = {};
-        for(let [lang, columnConfig] of Object.entries(v))
-            columnConfig_[lang] = reduceColumnConfig(columnConfig);
-        typeSpec_[k] = columnConfig_;
-        continue;
-    }
-    typeSpec_[k] = typeSpec[k];
+const massageConfigurations = {
+    columnConfig: reduceColumnConfig
 }
 
 const inject = {};
 window.onload = ()=>{
-    main(window, inject, typeSpec_);
+    main(window, inject, typeSpec, massageConfigurations);
 };

explorations/wikipedia/js/main.mjs

@@ -191,6 +191,8 @@ function applyWikiPage({document}, {subDomain, data}) {
         // TODO: changing the "dir" attribute and changing the layout
         // to rtl direction is not supported yet. However, we don't have
         // fonts for those cases yet as well.
+
+        // FIXME: the newly fetched content should rather be spared by this.
         for(let elem of document.querySelectorAll(
                 // Some elements have a different language as their content
                 // and hence set lang, e.g. a word in an <em> in Greek also,
@@ -200,7 +202,7 @@ function applyWikiPage({document}, {subDomain, data}) {
             elem.setAttribute('lang', fetchedLang);
         }
     }
-    return true;
+    return {contentLanguage: fetchedLang};
 }
 
 const ARTICLE_URL_TEMPLATE = `
@@ -294,11 +296,11 @@ class WikipediaArticleURLWidget {
         .then(
             fetched=> {
                 // success
-                applyWikiPage(window, fetched);
+                const {contentLanguage} = applyWikiPage(window, fetched);
                 // -> set this._input value!
                 this._input.value = `https://${fetched.subDomain}.wikipedia.org/wiki/${fetched.page}`;
                 this.setLoadingStatus(null);
-                this._updateAfterChangedContent();
+                this._updateAfterChangedContent(contentLanguage);
             },
             err=>this.setLoadingStatus(`[${err.name}] ${err.message}`)
         );

lib/js/demoController.mjs

@@ -3,6 +3,7 @@ import {getElementSizesInPx, getComputedStyle, getComputedPropertyValues
                                 } from './domTool.mjs';
 import WidgetsContainerWidget, {ID}  from './WidgetsContainerWidget.mjs';
 import {JustificationController, parseFontVariationSettings} from './justification.mjs';
+import { getFromI18NConfig } from './typeSpec.mjs';
 
 class _ContainerWidget {
     constructor(domTool, baseElement) {
@@ -874,6 +875,7 @@ class InspectorWidget extends _ContainerWidget {
           , reason = '(not set)'
           , beacon = this._targetElement.ownerDocument.querySelector(
                 `:not(.${JUSTIFICATION_CONTEXT_BLOCK_CLASS}) .${INSPECTION_MODE_BEACON_CLASS}`)
+          , debug = false
           ;
         RECORDS:
         for( let rec of mutationRecords) {
@@ -949,7 +951,7 @@ class InspectorWidget extends _ContainerWidget {
         }
         if(!reportNeedsUpdate)
             return;
-        // console.warn('>>>> REPORT NEEDS UPDATE', reason);
+        debug && console.warn('>>>> REPORT NEEDS UPDATE', reason);
         this._updateReport();
     }
     createtReport(elem) {
@@ -1224,8 +1226,8 @@ class InspectorWidget extends _ContainerWidget {
           , report=(type, element, shared)=>reports.push([
                 mkelem('li',[
                     mkfrac(`<strong class="${this._class}-report_heading">${key2label[type] || type}</strong>`)
-                  , reporters.get(reporters.has(type) ? type : undefined)
-                                 (element, shared, type)
+                  , reporters.get(reporters.has(type)
+                            ? type : undefined)(element, shared, type)
                 ])
             ])
           ;
@@ -1465,7 +1467,7 @@ function _runion_01_columns(columnConfig, availableWidthEn) {
     }
     // With a proper config this should not be possible (1 column min-width = 0),
     // thus, if this happens we must look at the case and figure out what to do.
-    throw new Error(`Can\'t compose column setup for availableWidthEn: ${availableWidthEn}!`);
+    throw new Error(`Can't compose column setup for availableWidthEn: ${availableWidthEn}!`);
 }
 
 function _runion_01_lineHeight ({minLineHeight, maxLineHeight,
@@ -1725,6 +1727,115 @@ function fixCSSKeyframes(document, cssKeyframeFixes) {
     }
 }
 
+function ucFirst(str) {
+    return str.split('')
+        .map((chr, i)=>i === 0
+            ? chr.toUpperCase()
+            : chr.toLowerCase()
+        )
+        .join('');
+}
+
+
+/**
+ * As input expect a string with the locale order "{language}-{script}-{territory}"
+ * but returns an array of [script, language, territory] as the order better
+ * fits our internal logic. Also, each particle may be null if not found in the
+ * string. There's no check if the particles actually exist (in CLDR) just
+ * a formal length check and respective uppercase/lowercase treatments.
+ * We also allow locales that don't bring a language and we try to produce
+ * a script for languages that don't specify it.
+ */
+function parseLocale(locale) {
+    const parts = locale.split('-');
+    let language = null
+      , script = null
+      , territory = null
+      ;
+    // A full locale looks like 'de-Latn-AT'
+    // or fr-Latn-CA
+    if(parts.length && parts[0].length === 2)
+        language = parts.pop().toLowerCase();
+    // Here we accept also locales if they don't specify a language,
+    // e.g. just 'Arab' or 'Latn-UK', as we can just use the default
+    // setup for the script later.
+    if(parts.length && parts[0].length === 4)
+        script = ucFirst(parts[0].pop());
+    // This can be at second position if there's no script specified
+    // e.g. 'de-DE'
+    // We don't use the territory so far!
+    if(parts.length && parts[0].length === 2)
+        territory = parts.pop().toUpperCase();
+
+    // Ideally locale would contain {language}-{script}-{region}
+    // as in ISO e.g. en-Latn-us, so we could make very elaborate decisions.
+    // In this application, however, {scrip}` is more generic than {language}
+    // I.e. we will fallback to the more general typography settings of a
+    // {script} if specific {language} (similar {region}) are not available.
+    // The hierarchy should be {script} > {language} > {region}.
+    // It is however very possible that we get a {language} without the
+    // {script}. There are defaullt scripts for languages in the Unicode
+    // Common Locale Data Repository (CLDR) which we can use to determine
+    // the default script when we only get a language.
+    //
+    // https://github.com/unicode-org/cldr-json/
+    //
+    // Here's an example of existing locale variants for az (Azerbaijani):
+    //       "az", "az-Arab", "az-Arab-IQ", "az-Arab-TR", "az-Cyrl","az-Latn"
+    //       from  cldr-json/cldr-json/cldr-core/availableLocales.json
+    // it has Arab, Cyrl and Latn as possible scripts!
+    //
+    // We can find in cldr-json/cldr-json/cldr-core/supplemental/languageData.json:
+    // (see also https://www.unicode.org/reports/tr35/tr35-info.html#Supplemental_Language_Data)
+    // [...], "az": {
+    //       "_territories": ["AZ"],
+    //       "_scripts": ["Arab", "Cyrl", "Latn"]
+    // },
+    // So, if we don't get an explicit script for a language, we pick
+    // the first of "_scripts" in there as the default script for that
+    // language.
+    //
+    // Since we start with en-Latn and that is all we have right now,
+    // that typeSpec will be elevated to be the default of everything.
+
+    // For now only using a small excerpt from the CLDR mentioned above.
+    const languageToScript = {
+        'en': 'Latn'
+      , 'de': 'Latn'
+      , 'az': 'Arab' // as per the example above
+    };
+    if (!script && (language in languageToScript))
+        script = languageToScript[language];
+
+    return [script, language, territory];
+}
+
+function selectTypeSpecByLanguage(typeSpecI18N, localeStr) {
+    // this is a stub
+    // next, .de will be added
+    // other scripts like cyrillic, greek, all the other
+    //
+    // initially we'll only have a different config for "de" (German)
+    // but that will change!
+    // We'll also have differences for the scripts (Latn, Arab, Cyrl. Grek)
+    // likeley a go-to for the default script of the lang then the specific
+    // settings for the lanf writtten in that script. Our current English
+    // setting would become the default for all of Latn. German will, so
+    // far. have only less minimal column width than english, because it
+    // has longer words.
+
+
+    // So far only columnConfig is internationalized, hence it makes sense
+    // to return it's configLanguageCode. Later, probably the most specific
+    // code of the different typeSpec sections should be returned.
+    const [configLocale, columnConfig] = getFromI18NConfig(typeSpecI18N.columnConfigI18N, parseLocale(localeStr))
+    return [configLocale, {
+        columnConfig
+      , cssKeyframeFixes: typeSpecI18N.cssKeyframeFixes
+      , justificationSpecs: typeSpecI18N.justificationSpecs
+      , wdthJustificationSpecs: typeSpecI18N.wdthJustificationSpecs
+    }];
+}
 
 // TODO: I think this should eventually become a Controller class where
 // state is managed more explicitly, I'm not sure yet, however of the full
@@ -1739,12 +1850,8 @@ export function main(
                     , WikipediaArticleURLWidget=null
                     , defaults={}
                     },
-                    { /* typeSpec */
-                      columnConfig: columnConfigI18N
-                    , cssKeyframeFixes
-                    , justificationSpecs
-                    , wdthJustificationSpecs
-                    }
+                    typeSpecI18N,
+                    massageConfigurations = {}
                     ) {
 
     let contentDocument = contentWindow.document
@@ -1753,8 +1860,6 @@ export function main(
                 : contentWindow
       , widgetHostDocument = widgetHostWindow.document
       , widgetInParent = contentWindow !== widgetHostWindow
-      // i18n is a stub
-      , columnConfig = columnConfigI18N.en
       ;
 
     if(widgetInParent) {
@@ -1780,11 +1885,28 @@ export function main(
        ]
       , toggleUserSettingsWidget = null
       , runion01Elem = null
+      , columnConfig = null
+      , cssKeyframeFixes = null
+      , justificationSpecs = null
+      , wdthJustificationSpecs = null
+        // not used so far
+      , configLocale = null
       ;
 
+    let initContent = (contentLanguageCode) => {
+        let rawColumnConfig = null;
+        [configLocale, {
+            columnConfig: rawColumnConfig
+          , cssKeyframeFixes
+          , justificationSpecs
+          , wdthJustificationSpecs
+        }] = selectTypeSpecByLanguage(typeSpecI18N, contentLanguageCode);
 
+        columnConfig = massageConfigurations?.columnConfig
+            ? massageConfigurations.columnConfig(rawColumnConfig)
+            : rawColumnConfig
 
-    let initContent = () => {
+        console.log('contentLanguageCode:', contentLanguageCode, 'configLocale;', configLocale.map(e=>e.toString()).join('-'));
         let userSettingsWidgetContainer = widgetHostDocument.querySelector(userSettingsWidgetSelector);
         if(!userSettingsWidgetContainer) {
             console.log('Demo is disabled: no userSettingsWidgetContainer.');
@@ -1970,15 +2092,16 @@ export function main(
                                              .checked)
                 justificationController.run();
         }
-      , updateAfterChangedContent = ()=>{
-            initContent();
+      , updateAfterChangedContent = (contentLanguage)=>{
+            initContent(contentLanguage);
             // This will most likely be executed by the USER_SETTINGS_EVENT handler
             // so here's a way to cancel this fail-safe initial call.
             scheduleUpdateViewport();
         }
       ;
 
-    updateAfterChangedContent();
+    // FIXME: remove hard coded default, should be done differently.
+    updateAfterChangedContent('en');
     // FIXME: resize is currently only interesting when the width of
     // the page changes, height can change more often (open the debugger,
     // OSsses may change height to make room for the main toolbar when in