From 293a8b26a97f498308e2739b49ca409e5940e8a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Cupia=C5=82?= <adam.cupial@dazn.com>
Date: Thu, 16 May 2019 08:30:01 +0200
Subject: [PATCH] Allow use of display option for google font api

---
 README.md                                     | 11 +++++++++++
 spec/modules/google/fontapiurlbuilder_spec.js |  8 ++++++++
 spec/modules/google/googlefontapi_spec.js     |  5 +++--
 src/modules/google/fontapiurlbuilder.js       |  7 ++++++-
 src/modules/google/googlefontapi.js           |  3 ++-
 5 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 097b841e..97991f2b 100644
--- a/README.md
+++ b/README.md
@@ -348,6 +348,17 @@ WebFontConfig = {
 
 The `text` subsetting functionality is only available for the Google module.
 
+Additional option you can pass to google option is display, it enables use of [font-display(https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)] property.
+
+```javascript
+WebFontConfig = {
+  google: {
+    families: ['Droid Sans', 'Droid Serif'],
+    display: 'swap'
+  }
+};
+```
+
 ### Typekit
 
 When using [Typekit](http://www.typekit.com), specify the Kit to retrieve by its ID. You can find the Kit ID within Typekit's Kit Editor interface.
diff --git a/spec/modules/google/fontapiurlbuilder_spec.js b/spec/modules/google/fontapiurlbuilder_spec.js
index 0ffecb72..14660f1b 100644
--- a/spec/modules/google/fontapiurlbuilder_spec.js
+++ b/spec/modules/google/fontapiurlbuilder_spec.js
@@ -37,4 +37,12 @@ describe('modules.google.FontApiUrlBuilder', function () {
       '?family=Font1:bold,italic%7CFont2:italic%7CFont3' +
       '&subset=greek,cyrillic,latin');
   });
+  it('should build a proper url - display param', function () {
+    var builder = new FontApiUrlBuilder(undefined, undefined, 'swap');
+    builder.setFontFamilies(['Font1:bold,italic:greek,cyrillic', 'Font2:italic', 'Font3::latin']);
+    expect(builder.build()).toEqual(
+      FontApiUrlBuilder.DEFAULT_API_URL +
+      '?family=Font1:bold,italic%7CFont2:italic%7CFont3' +
+      '&subset=greek,cyrillic,latin&display=swap');
+  });
 });
diff --git a/spec/modules/google/googlefontapi_spec.js b/spec/modules/google/googlefontapi_spec.js
index 28a8f423..7fdfe5d2 100644
--- a/spec/modules/google/googlefontapi_spec.js
+++ b/spec/modules/google/googlefontapi_spec.js
@@ -59,13 +59,14 @@ describe('modules.google.GoogleFontApi', function () {
       loaded  = false;
       googleFontApi = new GoogleFontApi(fakeDomHelper, {
         api: 'https://moo',
-        families: ['Font1', 'Font2']
+        families: ['Font1', 'Font2'],
+        display: 'swap'
       });
       googleFontApi.load(function () { loaded = true; });
     });
 
     it('has inserted the link element correctly', function () {
-      expect(link).toEqual('https://moo?family=Font1%7CFont2');
+      expect(link).toEqual('https://moo?family=Font1%7CFont2&display=swap');
     });
 
     if (webfont.DomHelper.CAN_WAIT_STYLESHEET) {
diff --git a/src/modules/google/fontapiurlbuilder.js b/src/modules/google/fontapiurlbuilder.js
index 8d1bec18..a473f514 100644
--- a/src/modules/google/fontapiurlbuilder.js
+++ b/src/modules/google/fontapiurlbuilder.js
@@ -3,7 +3,7 @@ goog.provide('webfont.modules.google.FontApiUrlBuilder');
 /**
  * @constructor
  */
-webfont.modules.google.FontApiUrlBuilder = function(apiUrl, text) {
+webfont.modules.google.FontApiUrlBuilder = function(apiUrl, text, display) {
   if (apiUrl) {
     this.apiUrl_ = apiUrl;
   } else {
@@ -12,6 +12,7 @@ webfont.modules.google.FontApiUrlBuilder = function(apiUrl, text) {
   this.fontFamilies_ = [];
   this.subsets_ = [];
   this.text_ = text || '';
+  this.display_ = display || '';
 };
 
 
@@ -72,6 +73,10 @@ goog.scope(function () {
       url += '&text=' + encodeURIComponent(this.text_);
     }
 
+    if (this.display_.length > 0) {
+      url += '&display=' + this.display_;
+    }
+
     return url;
   };
 });
diff --git a/src/modules/google/googlefontapi.js b/src/modules/google/googlefontapi.js
index 8f3e5a43..4c4b9a20 100644
--- a/src/modules/google/googlefontapi.js
+++ b/src/modules/google/googlefontapi.js
@@ -38,7 +38,8 @@ goog.scope(function () {
     var domHelper = this.domHelper_;
     var fontApiUrlBuilder = new FontApiUrlBuilder(
         this.configuration_['api'],
-        this.configuration_['text']
+        this.configuration_['text'],
+        this.configuration_['display']
     );
     var fontFamilies = this.configuration_['families'];
     fontApiUrlBuilder.setFontFamilies(fontFamilies);