From 4ed1f26279f7c08e45b53e1be34ec466cc4e40a7 Mon Sep 17 00:00:00 2001
From: Lasse Fister <commander@graphicore.de>
Date: Tue, 20 Feb 2018 18:07:00 +0100
Subject: [PATCH 1/2] [loadFonts] optionally avoid duplicate XHRs for same
 files; closes #28

Supersedes 1969828 in PR #28 by @kontur.
---
 lib/loadFonts.js | 140 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 104 insertions(+), 36 deletions(-)

diff --git a/lib/loadFonts.js b/lib/loadFonts.js
index c02996f..146e2bc 100644
--- a/lib/loadFonts.js
+++ b/lib/loadFonts.js
@@ -4,40 +4,74 @@ define([
     opentype
 ) {
     "use strict";
-    /*globals FileReader, XMLHttpRequest, console*/
+    /*globals setTimeout, FileReader, XMLHttpRequest, console*/
 
-    /**
-     * Callback for when a fontfile has been loaded
-     *
-     * @param i: index of the font loaded
-     * @param fontFileName
-     * @param err: null, error-object or string with error message
-     * @param fontArraybuffer
-     */
-    function onLoadFont(i, fontFileName, err, fontArraybuffer) {
-        /* jshint validthis: true */
-        var font;
+    function _publishLoaded(task, data) {
+        var state = task.state
+          , index = task.index
+          , fontFileName = task.name
+          , err = data.error
+          , font = data.font
+          , fontArraybuffer = data.arraybuffer
+          ;
+
+        if(err) {
+            console.warn('Can\'t load font', fontFileName, ' with error:', err);
+            state.countAll--;
+        }
+        else {
+            state.pubsub.publish('loadFont', index, fontFileName, font, fontArraybuffer);
+            state.countLoaded += 1;
+        }
+
+        if(state.countLoaded === state.countAll)
+            state.pubsub.publish('allFontsLoaded', state.countAll);
+    }
+
+    function _getLoadedFontData(err, fontArraybuffer) {
+        var err_ = err || null
+          , font = null
+          ;
         if(!err) {
             try {
-                font = opentype.parse(fontArraybuffer);
+                font =  opentype.parse(fontArraybuffer);
             }
             catch (parseError) {
-                err = parseError;
+                err_ = parseError;
             }
         }
 
-        if(err) {
-            console.warn('Can\'t load font', fontFileName, ' with error:', err);
-            this.countAll--;
-        }
-        else {
-            this.pubsub.publish('loadFont', i, fontFileName, font, fontArraybuffer);
-            this.countLoaded += 1;
-        }
+        return {
+            error:err_
+          , font: font
+          , arraybuffer:fontArraybuffer
+        };
+    }
+
+    function _onLoadQueued(cache, key, err, fontArraybuffer) {
+        var data, queue, i, l, task;
 
-        if(this.countLoaded === this.countAll)
-            this.pubsub.publish('allFontsLoaded', this.countAll);
+        cache.loaded[key] = data = _getLoadedFontData(err, fontArraybuffer);
+        queue = cache.queues[key];
+        delete cache.queues[key];
 
+        for(i=0,l=queue.length;i<l;i++) {
+            task = queue[i];
+            _publishLoaded(task, data);
+        }
+    }
+
+    /**
+     * Callback for when a fontfile has been loaded
+     *
+     * @param i: index of the font loaded
+     * @param fontFileName
+     * @param err: null, error-object or string with error message
+     * @param fontArraybuffer
+     */
+    function _onLoadFont(task, err, fontArraybuffer) {
+        var data = _getLoadedFontData(err, fontArraybuffer);
+        _publishLoaded(task, data);
     }
 
     function loadFromUrl(fontInfo, callback) {
@@ -75,8 +109,7 @@ define([
     }
     loadFontsFromFileInput.needsPubSub = true;
 
-
-    function loadFontsFromUrl(pubsub, fontFiles) {
+    function loadFontsFromUrl(pubsub, fontFiles, cache) {
         var i, l
           , fontInfo = []
           ;
@@ -84,31 +117,66 @@ define([
             if (!fontFiles[i])
                 throw new Error('The url at index '+i+' appears to be invalid.');
             fontInfo.push({
-                name: fontFiles[i]
+                  name: fontFiles[i]
                 , url: fontFiles[i]
+                // this is for the cache and must be the same as url in this case,
+                // to ensure we request a file only once
+                , key: fontFiles[i]
             });
         }
-        _loadFonts(pubsub, fontInfo, loadFromUrl);
+        _loadFonts(pubsub, fontInfo, loadFromUrl, cache);
+    }
+
+    function _initCache(cache) {
+        if(!('loaded' in cache))
+            cache.loaded = Object.create(null);
+        if(!('queues' in cache))
+            cache.queues = Object.create(null);
     }
 
-    function _loadFonts(pubsub, fontFiles, loadFont) {
-        var i, l, fontInfo, onload
+    function _loadFonts(pubsub, fontFiles, loadFont, cache) {
+        var i, l, fontInfo, key, onload, task, data
           , loaderState = {
                 countLoaded: 0
               , countAll: fontFiles.length
               , pubsub: pubsub
             }
           ;
+        if(cache)
+            _initCache(cache);
 
+        filesLoop:
         for(i=0,l=fontFiles.length;i<l;i++) {
             fontInfo = fontFiles[i];
             pubsub.publish('prepareFont', i, fontInfo.name, l);
-            onload = onLoadFont.bind(loaderState, i, fontInfo.name);
-            // The timeout thing is handy to slow down the load progress,
-            // if development is done on that part.
-            // setTimeout(function(fontInfo, onload) {
-            loadFont(fontInfo, onload);
-            // }.bind(null, fontInfo, onload), Math.random() * 5000);
+            task = {
+                state: loaderState
+              , index: i
+              , name: fontInfo.name
+            };
+            onload = null;
+            if(cache) {
+                key = fontInfo.key;
+                if(key in cache.loaded) {
+                    data = cache.loaded[key];
+                    // execute async
+                    setTimeout(_publishLoaded.bind(null, task, data), 0);
+                    continue filesLoop;
+                }
+                // put into queue
+                if(!(key in cache.queues)) {
+                    // initiate queue
+                    cache.queues[key] = [];
+                    onload = _onLoadQueued.bind(null, cache, key);
+                }
+                cache.queues[key].push(task);
+            }
+            else // no cache
+                onload = _onLoadFont.bind(null, task);
+
+            // if no cache or of queue was just initiated
+            if(onload)
+                loadFont(fontInfo, onload);
         }
     }
 

From b67fe776f1ffb0880a24e15e0c55c7ca5c9cedf0 Mon Sep 17 00:00:00 2001
From: Johannes Neumeier <hello@johannesneumeier.com>
Date: Thu, 2 Aug 2018 11:21:52 +0300
Subject: [PATCH 2/2] Modified returned css family name to be single word
 without spaces

---
 lib/services/FontsData.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/lib/services/FontsData.js b/lib/services/FontsData.js
index 0fd22d8..2f3afb5 100644
--- a/lib/services/FontsData.js
+++ b/lib/services/FontsData.js
@@ -292,8 +292,11 @@ define([
         return font.tables.os2.usWeightClass;
     };
 
-    // Keeping this, maybe we'll have to transform this name further for CSS?
-    _p._getCSSFamilyName = _p._getFamilyName;
+    // Truncate the family name to single word for more resilient browser rendering
+    // TODO Possibly perform further transformation for the CSS name
+    _p._getCSSFamilyName = function (fontIndex) {
+        return this._getFamilyName(fontIndex).replace(/\s/gi, "");
+    }
 
     _p._getIsItalic = function(fontIndex) {
         var font = this._data[fontIndex].font