refactor: move things around and only load fonts when sidebar is open

leic-pt · Apr 26, 2024 · da9b356 · da9b356
1 parent 859c819
commit da9b356
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 38 deletions.
diff --git a/src/components/ThemeSettings/DropdownSelect/DropdownOption.js b/src/components/ThemeSettings/DropdownSelect/DropdownOption.js
@@ -1,12 +1,9 @@
 import React, { useContext } from 'react';
 import { DropdownContext } from './DropdownSelect';
-import { fonts } from '../../../hooks/theme-hooks';
 
-const DropdownOption = ({ value, children }) => {
+const DropdownOption = ({ value, children, style }) => {
   const { id, value: selectedValue, onChange } = useContext(DropdownContext);
 
-  const style = fonts[value] ? { fontFamily: fonts[value]['cssFamily'], fontSize: '17px' } : {};
-
   return (
     <button
       className={`keep-focus-${id} dropdown-option${value === selectedValue ? ' selected' : ''}`}

diff --git a/src/components/ThemeSettings/DropdownSelect/DropdownSelect.js b/src/components/ThemeSettings/DropdownSelect/DropdownSelect.js
@@ -1,7 +1,6 @@
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import DropdownArrow from '../../icons/DropdownArrow';
 import './DropdownSelect.css';
-import { fonts } from '../../../hooks/theme-hooks';
 
 const DropdownContext = React.createContext({ id: 'unknown', value: null, onChange: () => {} });
 
@@ -36,23 +35,6 @@ const DropdownSelect = ({ id = 'unknown', value, onChange, children }) => {
     [onChange, close]
   );
 
-  // Loading all the fonts when the component is built
-  useEffect(() => {
-    Object.values(fonts).forEach((font) => {
-      if (font.url) {
-        const link = document.createElement('link');
-        // temporary solution until openDyslexic font has support for subset loading
-        if (font === fonts['openDyslexic']) {
-          link.href = font.url;
-        } else {
-          link.href = font.url.concat('&text=', font.displayName);
-        }
-        link.rel = 'stylesheet';
-        document.head.appendChild(link);
-      }
-    });
-  }, []);
-
   return (
     <div
       className='dropdown-select'

diff --git a/src/components/ThemeSettings/ThemeSettings.js b/src/components/ThemeSettings/ThemeSettings.js
@@ -1,5 +1,6 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
+  fonts,
   useContentWidth,
   useDarkMode,
   useFontSettings,
@@ -31,6 +32,22 @@ const ThemeSettings = () => {
   const { fontLoader, font, setFont } = useFontSettings();
   const { theme, setTheme } = useThemeSettings();
 
+  // Load (previews of) all the fonts to show their preview on dropdown
+  const fontPreviewsLoader = useMemo(
+    () =>
+      Object.values(fonts)
+        .filter((font) => font.url)
+        .map((font) => {
+          let href = font.url;
+          // For Google Fonts, avoid loading the entire font and load only the required text
+          if (font.url?.startsWith('https://fonts.googleapis.com/css2?')) {
+            href = `${href}&text=${encodeURIComponent(font.displayName)}`;
+          }
+          return <link href={href} rel='stylesheet'></link>;
+        }),
+    []
+  );
+
   return (
     <>
       <button
@@ -111,19 +128,19 @@ const ThemeSettings = () => {
             </button>
           </div>
         </Option>
+        {panelOpen && fontPreviewsLoader}
         {fontLoader}
         <Option name='Font'>
           <DropdownSelect id='font' value={font} onChange={(v) => setFont(v)}>
-            <DropdownOption value='roboto'>Roboto (default)</DropdownOption>
-            <DropdownOption value='comicNeue'>Comic Neue</DropdownOption>
-            <DropdownOption value='indieFlower'>Indie Flower</DropdownOption>
-            <DropdownOption value='nunito'>Nunito</DropdownOption>
-            <DropdownOption value='openDyslexic'>OpenDyslexic</DropdownOption>
-            <DropdownOption value='openSans'>Open Sans</DropdownOption>
-            <DropdownOption value='cursive'>cursive (system)</DropdownOption>
-            <DropdownOption value='monospace'>monospace (system)</DropdownOption>
-            <DropdownOption value='sansSerif'>sans-serif (system)</DropdownOption>
-            <DropdownOption value='serif'>serif (system)</DropdownOption>
+            {Object.entries(fonts).map(([fontName, fontOptions]) => (
+              <DropdownOption
+                key={fontName}
+                value={fontName}
+                style={{ fontFamily: fontOptions.cssFamily }}
+              >
+                {fontOptions.displayName}
+              </DropdownOption>
+            ))}
           </DropdownSelect>
         </Option>
       </SidePanel>

diff --git a/src/hooks/theme-hooks.js b/src/hooks/theme-hooks.js
@@ -8,17 +8,17 @@ export const fonts = {
   roboto: {
     cssFamily: 'Roboto, sans-serif',
     url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap',
-    displayName: 'Roboto%20(default)',
+    displayName: 'Roboto (default)',
   },
   comicNeue: {
     cssFamily: 'Comic Neue, sans-serif',
     url: 'https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap',
-    displayName: 'Comic%20Neue',
+    displayName: 'Comic Neue',
   },
   indieFlower: {
     cssFamily: 'Indie Flower, cursive',
     url: 'https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap',
-    displayName: 'Indie%20Flower',
+    displayName: 'Indie Flower',
   },
   nunito: {
     cssFamily: 'Nunito, sans-serif',
@@ -33,19 +33,23 @@ export const fonts = {
   openSans: {
     cssFamily: 'Open Sans, Roboto, sans-serif',
     url: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap',
-    displayName: 'Open%20Sans',
+    displayName: 'Open Sans',
   },
   cursive: {
     cssFamily: 'cursive',
+    displayName: 'cursive (system)',
   },
   monospace: {
     cssFamily: 'monospace',
+    displayName: 'monospace (system)',
   },
   sansSerif: {
     cssFamily: 'sans-serif',
+    displayName: 'sans-serif (system)',
   },
   serif: {
     cssFamily: 'serif',
+    displayName: 'serif (system)',
   },
 };