[#2503] Refactored font-size enlarger with encapsulated modularization

maykinmedia · Jun 6, 2024 · 6907bf6 · 6907bf6
1 parent d9e7e8c
commit 6907bf6
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 81 deletions.
diff --git a/src/open_inwoner/js/components/accessibility/enlarge_font.js b/src/open_inwoner/js/components/accessibility/enlarge_font.js
@@ -1,96 +1,89 @@
 export class EnlargeFont {
   static selector = '.accessibility--enlarge-font'
+
   constructor(node) {
     this.node = node
     this.text = node.querySelector('.link__text')
     this.icon = node.querySelector('.material-icons')
     this.node.addEventListener('click', this.enlarge.bind(this))
 
-    // Set initial values for default styles
-    let root = document.documentElement
-    const bodyFontSizeDefault = '--utrecht-document-font-size'
-    const paragraphFontSizeDefault = '--utrecht-paragraph-font-size'
-    const paragraphFontSizeSmall = '--utrecht-paragraph-small-font-size'
-    const headingThreeFontSize = '--utrecht-heading-3-font-size'
-    const headingFourFontSize = '--utrecht-heading-4-font-size'
-    const oipBodyFontSizeDefault = '--font-size-body'
-    const oipBodyFontSizeSmall = '--font-size-body-small'
-    const oipHeadingThreeFontSize = '--font-size-heading-3'
-    const oipHeadingFourFontSize = '--font-size-heading-4'
-    const oipCardHeadingFontSize = '--font-size-heading-card'
-    const baseSizeDefault = '16px'
-    const baseSizeSmall = '14px'
-    const baseHeadingThreeFontSize = '20px'
-    const baseHeadingFourFontSize = '16px'
-    const baseCardHeadingFontSize = '18px'
+    this.root = document.documentElement
+
+    // Target specific sizes that need to be enlarged
+    this.styles = {
+      bodyFontSizeDefault: '--utrecht-document-font-size',
+      paragraphFontSizeDefault: '--utrecht-paragraph-font-size',
+      paragraphFontSizeSmall: '--utrecht-paragraph-small-font-size',
+      headingThreeFontSize: '--utrecht-heading-3-font-size',
+      headingFourFontSize: '--utrecht-heading-4-font-size',
+      // Legacy styles' initial values
+      oipBodyFontSizeDefault: '--font-size-body',
+      oipBodyFontSizeSmall: '--font-size-body-small',
+      oipHeadingThreeFontSize: '--font-size-heading-3',
+      oipHeadingFourFontSize: '--font-size-heading-4',
+      // OIP specific card-heading
+      oipCardHeadingFontSize: '--font-size-heading-card',
+    }
+
+    // Set initial values for toggling default styles
+    this.baseSizes = {
+      default: '16px',
+      small: '14px',
+      headingThree: '20px',
+      headingFour: '16px',
+      cardHeading: '18px',
+    }
+
+    // Enlarge the different types of body-font as well as paragraphs
+    // and set all lower types of headings (lower than H2) to get the same larger font-size
+    this.enlargeSizes = {
+      default: '20px',
+      small: '17px',
+      headings: '22px',
+    }
+
+    this.setInitialStyles()
+  }
+
+  setInitialStyles() {
+    Object.keys(this.styles).forEach((key) => {
+      const sizeKey = this.getSizeKey(key)
+      this.root.style.setProperty(this.styles[key], this.baseSizes[sizeKey])
+    })
+  }
 
-    root.style.setProperty(bodyFontSizeDefault, baseSizeDefault)
-    root.style.setProperty(paragraphFontSizeDefault, baseSizeDefault)
-    root.style.setProperty(paragraphFontSizeSmall, baseSizeSmall)
-    root.style.setProperty(headingThreeFontSize, baseHeadingThreeFontSize)
-    root.style.setProperty(headingFourFontSize, baseHeadingFourFontSize)
-    root.style.setProperty(oipBodyFontSizeDefault, baseSizeDefault)
-    root.style.setProperty(oipBodyFontSizeSmall, baseSizeSmall)
-    root.style.setProperty(oipHeadingThreeFontSize, baseHeadingThreeFontSize)
-    root.style.setProperty(oipHeadingFourFontSize, baseHeadingFourFontSize)
-    root.style.setProperty(oipCardHeadingFontSize, baseCardHeadingFontSize)
+  // Target both NL Design System values and legacy variables by their component type
+  getSizeKey(styleKey) {
+    if (styleKey.includes('Small')) return 'small'
+    if (styleKey.includes('Three')) return 'headingThree'
+    if (styleKey.includes('Four')) return 'headingFour'
+    if (styleKey.includes('CardHeading')) return 'cardHeading'
+    return 'default'
   }
 
   enlarge(event) {
     event.preventDefault()
-    let root = document.documentElement
-    // NL design system styles
-    const bodyFontSizeDefault = '--utrecht-document-font-size'
-    const paragraphFontSizeDefault = '--utrecht-paragraph-font-size'
-    const paragraphFontSizeSmall = '--utrecht-paragraph-small-font-size'
-    const headingThreeFontSize = '--utrecht-heading-3-font-size'
-    const headingFourFontSize = '--utrecht-heading-4-font-size'
-    // Legacy styles
-    const oipBodyFontSizeDefault = '--font-size-body'
-    const oipBodyFontSizeSmall = '--font-size-body-small'
-    const oipHeadingThreeFontSize = '--font-size-heading-3'
-    const oipHeadingFourFontSize = '--font-size-heading-4'
-    const oipCardHeadingFontSize = '--font-size-heading-card'
-    // Set toggle variations
-    const baseSizeDefault = '16px'
-    const baseSizeSmall = '14px'
-    const enlargeSizeDefault = '20px'
-    const enlargeSizeSmall = '17px'
-    const baseHeadingThreeFontSize = '20px'
-    const baseHeadingFourFontSize = '16px'
-    const baseCardHeadingFontSize = '18px'
-    // Set all lower headings to H2 size
-    const enlargeHeadings = '22px'
 
-    if (
-      root.style.getPropertyValue(bodyFontSizeDefault) === enlargeSizeDefault
-    ) {
-      root.style.setProperty(bodyFontSizeDefault, baseSizeDefault)
-      root.style.setProperty(paragraphFontSizeDefault, baseSizeDefault)
-      root.style.setProperty(paragraphFontSizeSmall, baseSizeSmall)
-      root.style.setProperty(headingThreeFontSize, baseHeadingThreeFontSize)
-      root.style.setProperty(headingFourFontSize, baseHeadingFourFontSize)
-      root.style.setProperty(oipBodyFontSizeDefault, baseSizeDefault)
-      root.style.setProperty(oipBodyFontSizeSmall, baseSizeSmall)
-      root.style.setProperty(oipHeadingThreeFontSize, baseHeadingThreeFontSize)
-      root.style.setProperty(oipHeadingFourFontSize, baseHeadingFourFontSize)
-      root.style.setProperty(oipCardHeadingFontSize, baseCardHeadingFontSize)
-      this.text.innerText = this.node.dataset.text
-      this.icon.innerText = this.node.dataset.icon
-    } else {
-      root.style.setProperty(bodyFontSizeDefault, enlargeSizeDefault)
-      root.style.setProperty(paragraphFontSizeDefault, enlargeSizeDefault)
-      root.style.setProperty(paragraphFontSizeSmall, enlargeSizeSmall)
-      root.style.setProperty(headingThreeFontSize, enlargeHeadings)
-      root.style.setProperty(headingFourFontSize, enlargeHeadings)
-      root.style.setProperty(oipBodyFontSizeDefault, enlargeSizeDefault)
-      root.style.setProperty(oipBodyFontSizeSmall, enlargeSizeSmall)
-      root.style.setProperty(oipHeadingThreeFontSize, enlargeHeadings)
-      root.style.setProperty(oipHeadingFourFontSize, enlargeHeadings)
-      root.style.setProperty(oipCardHeadingFontSize, enlargeHeadings)
-      this.text.innerText = this.node.dataset.altText
-      this.icon.innerText = this.node.dataset.altIcon
-    }
+    const isEnlarged =
+      this.root.style.getPropertyValue(this.styles.bodyFontSizeDefault) ===
+      this.enlargeSizes.default
+
+    Object.keys(this.styles).forEach((key) => {
+      const sizeKey = this.getSizeKey(key)
+      this.root.style.setProperty(
+        this.styles[key],
+        isEnlarged
+          ? this.baseSizes[sizeKey]
+          : this.enlargeSizes[sizeKey] || this.enlargeSizes.headings
+      )
+    })
+
+    this.text.innerText = isEnlarged
+      ? this.node.dataset.text
+      : this.node.dataset.altText
+    this.icon.innerText = isEnlarged
+      ? this.node.dataset.icon
+      : this.node.dataset.altIcon
   }
 }
 

diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
@@ -195,7 +195,8 @@
   /// Font.
 
   --font-color-heading: var(--color-black);
-  --font-family-heading: 'Heading';
+  // Font-family = 'Heading' coming from both NLDS and/or the font-upload functionality
+  --font-family-heading: var(--utrecht-heading-font-family);
   --font-weight-heading: bold;
 
   --font-color-heading-1: var(--font-color-heading);
@@ -224,7 +225,8 @@
 
   --font-size-heading-card: 18px;
 
-  --font-family-body: 'Body';
+  // Font-family = 'Body' coming from both NLDS and/or the font-upload functionality
+  --font-family-body: var(--utrecht-document-font-family);
   --font-color-body: var(--color-gray-dark);
   --font-size-body: var(--utrecht-document-font-size);
   --font-line-height-body: 24px;