Refactor chapter fonts

FILTERS.md

@@ -270,6 +270,14 @@ Filters the form fields of the `fictioneer_contact_form` shortcode.
 
 ---
 
+### `apply_filters( 'fictioneer_filter_fonts', $fonts )`
+Filters the return array of the `fictioneer_get_fonts()` function, used to set up the chapter font options.
+
+**Parameters:**
+* $fonts (array) – Numeric array of fonts items with CSS name (`css`), display name (`name`), and fallbacks (`alt`).
+
+---
+
 ### `apply_filters( 'fictioneer_filter_header_image', $header_image_url, $post_id )`
 Filters the URL of the header image in the `header.php` template.
 

includes/functions/_theme_setup.php

@@ -566,6 +566,7 @@ function fictioneer_add_custom_scripts() {
 
   // Enqueue application
   wp_enqueue_script( 'fictioneer-application-scripts' );
+
   wp_localize_script( 'fictioneer-application-scripts', 'fictioneer_ajax', array(
     'ajax_url' => admin_url( 'admin-ajax.php' ),
     'ttl' => FICTIONEER_AJAX_TTL,
@@ -573,6 +574,8 @@ function fictioneer_add_custom_scripts() {
     'post_debounce_rate' => FICTIONEER_AJAX_POST_DEBOUNCE_RATE
   ));
 
+  wp_localize_script( 'fictioneer-application-scripts', 'fictioneer_fonts', fictioneer_get_fonts() );
+
   // Enqueue mobile menu
   wp_enqueue_script( 'fictioneer-mobile-menu-scripts' );
 

includes/functions/_utility.php

@@ -1458,4 +1458,37 @@ if ( ! function_exists( 'fictioneer_get_taxonomy_names' ) ) {
   }
 }
 
+// =============================================================================
+// GET FONTS
+// =============================================================================
+
+if ( ! function_exists( 'fictioneer_get_fonts' ) ) {
+  /**
+   * Returns array of font items
+   *
+   * @since 5.1.1
+   *
+   * @return array Font items (css, name, and alt).
+   */
+
+  function fictioneer_get_fonts() {
+    // Setup default fonts
+    $fonts = array(
+      ['css' => FICTIONEER_PRIMARY_FONT_CSS, 'name' => FICTIONEER_PRIMARY_FONT_NAME],
+      ['css' => '', 'name' => _x( 'System Font', 'Font name.', 'fictioneer' )],
+      ['css' => 'Lato', 'name' => _x( 'Lato', 'Font name.', 'fictioneer' )],
+      ['css' => 'Helvetica Neue', 'name' => _x( 'Helvetica Neue', 'Font name.', 'fictioneer' ), 'alt' => 'Arial'],
+      ['css' => 'Georgia', 'name' => _x( 'Georgia', 'Font name.', 'fictioneer' )],
+      ['css' => 'Roboto Mono', 'name' => _x( 'Roboto Mono', 'Font name.', 'fictioneer' )],
+      ['css' => 'Roboto Serif', 'name' => _x( 'Roboto Serif', 'Font name.', 'fictioneer' )],
+      ['css' => 'Cormorant Garamond', 'name' => _x( 'Cormorant Garamond', 'Font name.', 'fictioneer' ), 'alt' => 'Garamond'],
+      ['css' => 'Crimson Text', 'name' => _x( 'Crimson Text', 'Font name.', 'fictioneer' )],
+      ['css' => 'OpenDyslexic', 'name' => _x( 'Open Dyslexic', 'Font name.', 'fictioneer' )]
+    );
+
+    // Apply filters and return
+    return apply_filters( 'fictioneer_filter_fonts', $fonts );
+  }
+}
+
 ?>

partials/_modal-formatting.php

@@ -69,12 +69,11 @@
       <div class="select-wrapper">
         <select id="reader-settings-font-select" name="fonts">
           <?php
-            $fonts = [FICTIONEER_PRIMARY_FONT_CSS, 'System Font', 'Lato', 'Helvetica Neue', 'Georgia', 'Roboto Mono', 'Roboto Serif', 'Cormorant Garamond', 'Crimson Text', 'Open Dyslexic'];
+            $fonts = fictioneer_get_fonts();
-            $font_names = [FICTIONEER_PRIMARY_FONT_NAME, __( 'System Font', 'fictioneer' ), __( 'Lato', 'fictioneer' ), __( 'Helvetica Neue', 'fictioneer' ), __( 'Georgia', 'fictioneer' ), __( 'Roboto Mono', 'fictioneer' ), __( 'Roboto Serif', 'fictioneer' ), __( 'Cormorant Garamond', 'fictioneer' ), __( 'Crimson Text', 'fictioneer' ), __( 'Open Dyslexic', 'fictioneer' )];
             $length = count( $fonts );
 
             for ( $i = 0; $i < $length; $i++ ) {
-              echo '<option value="' . $i . '">' . $font_names[ $i ] . '</option>';
+              echo '<option value="' . $i . '">' . $fonts[ $i ]['name'] . '</option>';
             }
           ?>
         </select>

src/js/chapter.js

@@ -35,19 +35,6 @@ const /** @const {String[]} */ fcn_fontAlternatives = { 'Helvetica Neue': 'Arial
         'Black'
       ];
 
-var /** @type {String[]} */ fcn_fontList = [
-      fcn_theRoot.dataset.primaryFont,
-      'System Font',
-      'Lato',
-      'Helvetica Neue',
-      'Georgia',
-      'Roboto Mono',
-      'Roboto Serif',
-      'Cormorant Garamond',
-      'Crimson Text',
-      'OpenDyslexic'
-    ];
-
 // Initialize
 var /** @type {Object} */ fcn_formatting = fcn_getFormatting();
 
@@ -365,7 +352,7 @@ function fcn_defaultFormatting() {
     'font-saturation': 0,
     'font-color': fcn_colorList[0],
     'font-color-name': fcn_colorNames[0],
-    'font-name': fcn_fontList[0],
+    'font-name': fictioneer_fonts[0].css,
     'font-size': 100,
     'letter-spacing': fcn_letterSpacingDefault,
     'line-height': fcn_lineHeightDefault,
@@ -553,34 +540,37 @@ const /** @const {HTMLElement} */ fcn_fontFamilyReset = _$$$('reader-settings-fo
  *
  * @since 4.0
  * @see fcn_setFormatting();
- * @param {String} font - Name of the font to set.
+ * @param {String} index - Index of the font.
  * @param {Boolean} [save=true] - Optional. Whether to save the change.
  */
 
-function fcn_updateFontFamily(font, save = true) {
+function fcn_updateFontFamily(index, save = true) {
+  // Stay within bounds
+  index = fcn_clamp(0, fictioneer_fonts.length - 1, index);
+
   // Prepare font family
-  let fontFamily = font === 'System Font' ? '' : `"${font}", `;
+  let fontFamily = `"${fictioneer_fonts[index].css}"`;
-      fontAlt = fcn_fontAlternatives[font],
+
-      fontFamily = fontAlt ? `${fontFamily}"${fontAlt}", var(--font-system)` : `${fontFamily}var(--font-system)`,
+  // Add alternative fonts if any
-      fontIndex = fcn_fontList.indexOf(font);
+  if (fictioneer_fonts[index].alt) fontFamily = `${fontFamily}, "${fictioneer_fonts[index].alt}"`;
 
   // Catch non-indexed values
-  if (fontIndex < 0) {
+  if (index < 0) {
-    fcn_updateFontFamily(fcn_fontList[0]);
+    fcn_updateFontFamily(0);
     return;
   }
 
   // Update associated elements
-  fcn_fontFamilyReset.classList.toggle('_modified', font != fcn_fontList[0]);
+  fcn_fontFamilyReset.classList.toggle('_modified', index > 0);
-  fcn_fontFamilySelect.value = fcn_fontList.indexOf(font);
+  fcn_fontFamilySelect.value = index;
 
   // Update inline style
   _$$('.chapter-font-family').forEach(element => {
-    element.style.fontFamily = fontFamily;
+    element.style.fontFamily = fontFamily + ', var(--font-system)';
   });
 
   // Update local storage
-  fcn_formatting['font-name'] = font;
+  fcn_formatting['font-name'] = fictioneer_fonts[index].css;
   if (save) fcn_setFormatting(fcn_formatting);
 }
 
@@ -592,16 +582,16 @@ function fcn_updateFontFamily(font, save = true) {
  */
 
 function fcn_setFontFamily(step = 1) {
-  let index = (fcn_fontFamilySelect.selectedIndex + parseInt(step)) % fcn_fontList.length;
+  let index = (fcn_fontFamilySelect.selectedIndex + parseInt(step)) % fictioneer_fonts.length;
-  index = index < 0 ? fcn_fontList.length - 1 : index;
+  index = index < 0 ? fictioneer_fonts.length - 1 : index;
-  fcn_updateFontFamily(fcn_fontList[index]);
+  fcn_updateFontFamily(index);
 }
 
 // Listen for click on font reset button
-fcn_fontFamilyReset.onclick = () => { fcn_updateFontFamily(fcn_fontList[0]) }
+fcn_fontFamilyReset.onclick = () => { fcn_updateFontFamily(0) }
 
 // Listen for font select input
-fcn_fontFamilySelect.onchange = (e) => { fcn_updateFontFamily(fcn_fontList[e.target.value]) }
+fcn_fontFamilySelect.onchange = (e) => { fcn_updateFontFamily(e.target.value) }
 
 // Listen for font step buttons (including mobile menu quick buttons)
 _$$('.font-stepper').forEach(element => {
@@ -610,8 +600,8 @@ _$$('.font-stepper').forEach(element => {
   });
 });
 
-// Initialize
+// Initialize (using the CSS name makes it independent from the array position)
-fcn_updateFontFamily(fcn_formatting['font-name'], false);
+fcn_updateFontFamily(fictioneer_fonts.findIndex((item) => { return item.css == fcn_formatting['font-name'] }), false);
 
 // =============================================================================
 // CHAPTER FORMATTING: FONT SATURATION