@pacem/pacem-core 2.0.0-kepler → 2.0.0-mersenne

package/dist/browser/pacem-core.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-core v2.0.0-kepler (https://js.pacem.it)
+ * @pacem/pacem-core v2.0.0-mersenne (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -462,6 +462,7 @@
         static { this.diff = pacemFoundation.Strings.diff; }
         static { this.Strings = {
             leftPad: pacemFoundation.Strings.leftPad,
+            rightPad: pacemFoundation.Strings.rightPad,
             format: pacemFoundation.Strings.format,
             diff: pacemFoundation.Strings.diff,
             /** Strips HTML markup from `html`, returning its plain-text content. */
@@ -1991,8 +1992,17 @@
         }
         /** Theming-related helpers. */
         static { this.Theme = {
-            /** Downloads the web fonts referenced by the current theme's `--{@link PCSS}-font-*` CSS custom properties, resolving once at least one font face is ready (or after a short timeout). */
+            /**
+             * Downloads the web fonts referenced by the current theme's `--{@link PCSS}-font-*` CSS custom properties,
+             * resolving once they are loaded and at least one font face is ready. Never rejects, never waits forever:
+             * a font that fails to load is skipped, and the whole wait is capped (fonts refine a page, they must not
+             * keep it hidden).
+             */
             importWebFonts() {
+                /** The longest wait (ms) for the fonts: then it resolves anyway. */
+                const WEB_FONTS_TIMEOUT = 3000;
+                /** The polls (every 250ms) for a first font face, before relying on `document.fonts.ready` anyway. */
+                const FONT_FACE_CHECKS = 4;
                 function cleanupQuotes(input) {
                     // check if the string is wrapped around quotes to escape ';' chars
                     if (/^('|").*\1$/.test(input)) {
@@ -2003,30 +2013,32 @@
                 function downloadFont(fontFace) {
                     return Utils.isNullOrEmpty(fontFace) ? Promise.resolve() : document.fonts.load('1rem ' + fontFace);
                 }
-                const promises = ['icons', 'std', 'main', 'tech', 'btn'].map(f => {
+                function importFont(f) {
                     const fontFace = Utils.Css.getVariableValue(`--${PCSS}-font-${f}`).split(',')[0];
-                    const url = cleanupQuotes(Utils.Css.getVariableValue(`--${PCSS}-font-${f}-api-url`));
+                    const apiUrl = Utils.Css.getVariableValue(`--${PCSS}-font-${f}-api-url`);
+                    const url = cleanupQuotes(apiUrl);
                     if (Utils.isNullOrEmpty(url)) {
                         return downloadFont(fontFace);
                     }
-                    else {
-                        return CustomElementUtils.importcss(url).then(_ => downloadFont(fontFace));
-                    }
-                });
+                    return CustomElementUtils.importcss(url).then(_ => downloadFont(fontFace));
+                }
+                // (a failing font is skipped: one of them must not hold the others)
+                const promises = ['icons', 'std', 'main', 'tech', 'btn'].map(f => importFont(f).catch(_ => undefined));
                 const atLeast1FontFaceReady = new Promise((resolve) => {
-                    function check(count = 0) {
+                    function check(count) {
                         // size against the specs: https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/size#specifications
-                        if (count > 4 || !('size' in document.fonts) || typeof document.fonts.size === 'number' && document.fonts.size > 0) {
+                        if (count > FONT_FACE_CHECKS || !('size' in document.fonts) || typeof document.fonts.size === 'number' && document.fonts.size > 0) {
                             document.fonts.ready.then(resolve);
+                            return;
                         }
-                        else {
-                            setTimeout(check, 250, count++);
-                        }
+                        setTimeout(check, 250, count + 1);
                     }
-                    check();
+                    check(0);
                 });
                 promises.push(atLeast1FontFaceReady);
-                return Promise.all(promises);
+                const timeout = new Promise(resolve => setTimeout(resolve, WEB_FONTS_TIMEOUT));
+                const fontsReady = Promise.all(promises);
+                return Promise.race([fontsReady, timeout]);
             }
         }; }
         /**