From dce8d5190a2667842a55e79532ab8b8b309e1a54 Mon Sep 17 00:00:00 2001
From: Rotzbua <Rotzbua@users.noreply.github.com>
Date: Mon, 15 May 2023 16:28:55 +0200
Subject: [PATCH] Refactor CSS options

* Add/Rename CSS options and font formats to reflect the current (2023) state of technology.
* Change default to modern browsers.

New updated CSS options:
Label: font format
Modern Browser: woff2
Legacy Support: woff2 + ttf
Historic Support: woff2 + woff + ttf + svg + eot
---
 client/app/cssCode/cssCode.html      | 29 +++++++++++++-------
 client/app/fonts/fonts.controller.js | 16 ++++++-----
 client/app/fonts/fontsItem.html      | 41 ++++++++++++++++++++--------
 3 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/client/app/cssCode/cssCode.html b/client/app/cssCode/cssCode.html
index d451a59..8a73335 100644
--- a/client/app/cssCode/cssCode.html
+++ b/client/app/cssCode/cssCode.html
@@ -1,25 +1,34 @@
-<pre ng-if="type.bestSupport"><code data-hljs="css" highlightjs>/* {{fontItem.id}}-{{variant.id}} - {{fontItem.storeID}} */
+<pre ng-if="type.modernSupport"><code data-hljs="css" highlightjs>/* {{fontItem.id}}-{{variant.id}} - {{fontItem.storeID}} */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: {{variant.fontFamily}};
   font-style: {{variant.fontStyle}};
   font-weight: {{variant.fontWeight}};
-  src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.eot'); /* IE9 Compat Modes */
-  src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff2') format('woff2'), /* Super Modern Browsers */
-       url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff') format('woff'), /* Modern Browsers */
-       url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.svg#{{variant.svg.substring(variant.svg.indexOf('#')+1);}}') format('svg'); /* Legacy iOS */
+  src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 </code></pre>
-<pre ng-if="type.modernBrowsers"><code data-hljs="css" highlightjs>/* {{fontItem.id}}-{{variant.id}} - {{fontItem.storeID}} */
+<pre ng-if="type.legacySupport"><code data-hljs="css" highlightjs>/* {{fontItem.id}}-{{variant.id}} - {{fontItem.storeID}} */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: {{variant.fontFamily}};
   font-style: {{variant.fontStyle}};
   font-weight: {{variant.fontWeight}};
-  src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+       url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+</code></pre>
+<pre ng-if="type.historicSupport"><code data-hljs="css" highlightjs>/* {{fontItem.id}}-{{variant.id}} - {{fontItem.storeID}} */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: {{variant.fontFamily}};
+  font-style: {{variant.fontStyle}};
+  font-weight: {{variant.fontWeight}};
+  src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.eot'); /* IE9 Compat Modes */
+  src: url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+       url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
+       url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+       url('{{folderPrefix}}{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}-{{variant.id}}.svg#{{variant.svg.substring(variant.svg.indexOf('#')+1);}}') format('svg'); /* Legacy iOS */
 }
 </code></pre>
 <style ng-if="type.styleTag" type="text/css">
diff --git a/client/app/fonts/fonts.controller.js b/client/app/fonts/fonts.controller.js
index 55d3a20..52472bf 100644
--- a/client/app/fonts/fonts.controller.js
+++ b/client/app/fonts/fonts.controller.js
@@ -73,7 +73,7 @@ angular.module('googleWebfontsHelperApp')
   }
 
   $scope.error = false;
-  $scope.modernFontsOnly = false;
+  $scope.fontFormats = 'woff2';
 
   $scope.downloadSubSetID = '';
   $scope.subSetsSelected = 0;
@@ -260,13 +260,15 @@ angular.module('googleWebfontsHelperApp')
       selection.addRange(range);
     }
   };
-
-  $scope.modernOnlyActive = function() {
-    $scope.modernFontsOnly = true;
+  
+  $scope.modernSupportActive = function() {
+    $scope.fontFormats =  'woff2';
   };
-
-  $scope.modernOnlyDeactive = function() {
-    $scope.modernFontsOnly = false;
+  $scope.legacySupportActive = function() {
+    $scope.fontFormats =  'woff2,ttf';
+  };
+  $scope.historicSupportActive = function() {
+    $scope.fontFormats =  'woff2,woff,ttf,svg,eot';
   };
 
 });
\ No newline at end of file
diff --git a/client/app/fonts/fontsItem.html b/client/app/fonts/fontsItem.html
index f802936..d0fc4c4 100644
--- a/client/app/fonts/fontsItem.html
+++ b/client/app/fonts/fontsItem.html
@@ -94,15 +94,15 @@ <h4>2. Select styles:&nbsp;<small>(default is <code>{{fontItem.defVariant}}</cod
     <!-- css snippets -->
     <div class="fontItemCSSWrap">
 
-      <h4>3. Copy CSS:&nbsp;<small>(default is <code>Best Support</code>)</small></h4>
+      <h4>3. Copy CSS:&nbsp;<small>(default is <code>Modern Browsers</code>)</small></h4>
 
       <tabset type="pills">
-        <tab heading="Best Support">
-          <p class="small">Choose <code>Best Support</code> if old browsers still need to be supported. Formats in this snippet: <code>[eot,woff,woff2,ttf,svg]</code></p>
+        <tab heading="Modern Browsers" select="modernSupportActive();">
+          <p class="small">Choose <code>Modern Browsers</code> if supporting old browsers is not relevant. Formats in this snippet: <code>[{{fontFormats}}]</code></p>
 
           <div ng-click="selectText($event)" class="cssCodeStyle">
             <div ng-repeat="variant in fontItem.variants | filter:variantFilter" css-code variant="variant" font-item="fontItem" folder-prefix="folderPrefix"
-              type="{bestSupport:true}"></div>
+              type="{modernSupport:true}"></div>
           </div>
 
           <div class="form-inline folderPrefixBar small">Customize folder prefix (optional):&nbsp;
@@ -113,19 +113,36 @@ <h4>3. Copy CSS:&nbsp;<small>(default is <code>Best Support</code>)</small></h4>
           </div>
           <p class="small">Click on code to select all statements, then copy/paste it into your own CSS file.</p>
         </tab>
-
-        <tab heading="Modern Browsers" select="modernOnlyActive();" deselect="modernOnlyDeactive();">
-          <p class="small">Choose <code>Modern Browsers</code> if supporting old browsers is not relevant. Formats in this snippet: <code>[woff,woff2]</code></p>
-
+        
+        <tab heading="Legacy Support" select="legacySupportActive();">
+          <p class="small">Choose <code>Legacy Support</code> if old browsers still need to be supported. Formats in this snippet: <code>[{{fontFormats}}]</code></p>
+          
           <div ng-click="selectText($event)" class="cssCodeStyle">
             <div ng-repeat="variant in fontItem.variants | filter:variantFilter" css-code variant="variant" font-item="fontItem" folder-prefix="folderPrefix"
-              type="{modernBrowsers:true}"></div>
+                 type="{legacySupport:true}"></div>
           </div>
 
           <div class="form-inline folderPrefixBar small">Customize folder prefix (optional):&nbsp;
             <div class="form-group">
               <input class="form-control input-sm" type="text" ng-model="folderPrefix" placeholder="no folder prefix" ng-init="folderPrefix='../fonts/'"
-                value="../fonts/">
+                     value="../fonts/">
+            </div>
+          </div>
+          <p class="small">Click on code to select all statements, then copy/paste it into your own CSS file.</p>
+        </tab>
+        
+        <tab heading="Historic Support" select="historicSupportActive();">
+          <p class="small">Choose <code>Historic Support</code> if very old browsers still need to be supported. Formats in this snippet: <code>[{{fontFormats}}]</code></p>
+          
+          <div ng-click="selectText($event)" class="cssCodeStyle">
+            <div ng-repeat="variant in fontItem.variants | filter:variantFilter" css-code variant="variant" font-item="fontItem" folder-prefix="folderPrefix"
+                 type="{historicSupport:true}"></div>
+          </div>
+          
+          <div class="form-inline folderPrefixBar small">Customize folder prefix (optional):&nbsp;
+            <div class="form-group">
+              <input class="form-control input-sm" type="text" ng-model="folderPrefix" placeholder="no folder prefix" ng-init="folderPrefix='../fonts/'"
+                     value="../fonts/">
             </div>
           </div>
           <p class="small">Click on code to select all statements, then copy/paste it into your own CSS file.</p>
@@ -153,9 +170,9 @@ <h5>{{fontItem.id}}-{{variant.id}} <small>{{fontItem.storeID}}</small></h5>
     <div>
       <hr>
       <h4>4. Download files:</h4>
-      <p>Your generated archive for <strong>{{fontItem.family}}</strong> with charsets <strong><code>[{{downloadSubSetID}}]</code></strong>        and styles <strong><code>[{{variantDownloadQueryString}}]</code></strong> includes the formats <strong><code>[{{modernFontsOnly === true ? 'woff,woff2' : 'eot,ttf,svg,woff,woff2'}}]</code></strong>.</p>
+      <p>Your generated archive for <strong>{{fontItem.family}}</strong> with charsets <strong><code>[{{downloadSubSetID}}]</code></strong>        and styles <strong><code>[{{variantDownloadQueryString}}]</code></strong> includes the formats <strong><code>[{{fontFormats}}]</code></strong>.</p>
 
-      <a href="/api/fonts/{{fontItem.id}}?download=zip&amp;subsets={{downloadSubSetID}}&amp;variants={{variantDownloadQueryString}}{{modernFontsOnly === true ? '&formats=woff,woff2' : ''}}"
+      <a href="/api/fonts/{{fontItem.id}}?download=zip&amp;subsets={{downloadSubSetID}}&amp;variants={{variantDownloadQueryString}}&formats={{fontFormats}}"
         target="_blank" role="button" class="btn btn-primary download-button"><i class="fa fa-download fa-lg"></i><br/>{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}.zip</a>
       <p><small>Fonts are copyright of their respective authors.<br><b>See <a target="_blank" href="https://fonts.google.com/attribution">Google Fonts Open Source Font Attribution</a> to find out the specific license that this font uses.</b></small></p>