Polished #428: Make notes font size changeable in bespoke template

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Make notes font size changeable in bespoke template ([#428](https://github.com/marp-team/marp-cli/pull/428) by [@chrisns](https://github.com/chrisns), [#431](https://github.com/marp-team/marp-cli/pull/431))
+
 ## v1.6.0 - 2022-02-12
 
 ### Added

src/templates/bespoke/_button.scss

@@ -69,4 +69,12 @@
   %button-presenter {
     @include button-icon-internal('../../assets/osc-presenter.svg');
   }
+
+  %button-plus {
+    @include button-icon-internal('../../assets/plus.svg');
+  }
+
+  %button-minus {
+    @include button-icon-internal('../../assets/minus.svg');
+  }
 }

src/templates/bespoke/bespoke.scss

@@ -252,14 +252,60 @@ $progress-height: 5px;
       .bespoke-marp-presenter-note-container {
         background: #222;
         color: $text-color;
+        position: relative;
         grid-area: note;
 
+        button {
+          @extend %button;
+          @include button.button-size(1.5em);
+
+          &.bespoke-marp-presenter-note-bigger {
+            @extend %button-plus;
+          }
+
+          &.bespoke-marp-presenter-note-smaller {
+            @extend %button-minus;
+          }
+        }
+
+        .bespoke-marp-presenter-note-wrapper {
+          bottom: 0;
+          display: block;
+          left: 0;
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+
+        .bespoke-marp-presenter-note-buttons {
+          background: rgba(#000, 0.65);
+          border-radius: 4px;
+          bottom: 0;
+          display: flex;
+          gap: 4px;
+          margin: 12px;
+          opacity: 0;
+          padding: 6px;
+          pointer-events: none;
+          position: absolute;
+          right: 0;
+          transition: opacity 0.2s linear;
+        }
+
+        &:hover .bespoke-marp-presenter-note-buttons,
+        .bespoke-marp-presenter-note-buttons:focus-within,
+        .bespoke-marp-presenter-note-wrapper:focus-within
+          + .bespoke-marp-presenter-note-buttons {
+          opacity: 1;
+          pointer-events: auto;
+        }
+
         .bespoke-marp-note {
           margin: 20px;
           width: calc(100% - 40px);
           height: calc(100% - 40px);
           box-sizing: border-box;
-          font-size: 1.1em;
+          font-size: calc(1.1em * var(--bespoke-marp-note-font-scale, 1));
           overflow: auto;
           padding-right: 3px;
           white-space: pre-wrap;
@@ -312,6 +358,7 @@ $progress-height: 5px;
         flex-wrap: nowrap;
         grid-area: info;
         justify-content: center;
+        overflow: hidden;
         padding: 0 10px;
 
         %info-element {

src/templates/bespoke/presenter/presenter-view.tsx

@@ -12,15 +12,23 @@ export const classes = {
   next: `${presenterPrefix}next`,
   nextContainer: `${presenterPrefix}next-container`,
   noteContainer: `${presenterPrefix}note-container`,
+  noteWrapper: `${presenterPrefix}note-wrapper`,
+  noteButtons: `${presenterPrefix}note-buttons`,
   infoContainer: `${presenterPrefix}info-container`,
   infoPage: `${presenterPrefix}info-page`,
   infoPageText: `${presenterPrefix}info-page-text`,
   infoPagePrev: `${presenterPrefix}info-page-prev`,
   infoPageNext: `${presenterPrefix}info-page-next`,
+  noteButtonsBigger: `${presenterPrefix}note-bigger`,
+  noteButtonsSmaller: `${presenterPrefix}note-smaller`,
   infoTime: `${presenterPrefix}info-time`,
   infoTimer: `${presenterPrefix}info-timer`,
 } as const
 
+export const properties = {
+  noteFontScale: '--bespoke-marp-note-font-scale',
+} as const
+
 /** Create function to send message to iframe for navigation */
 const createNavigateFunc =
   (iframe: HTMLIFrameElement) => (index: number, fragmentIndex: number) =>
@@ -45,7 +53,25 @@ const presenterView = (deck) => {
         <div class={classes.nextContainer}>
           <iframe class={classes.next} src="?view=next" />
         </div>
-        <div class={classes.noteContainer}></div>
+        <div class={classes.noteContainer}>
+          <div class={classes.noteWrapper} />
+          <div class={classes.noteButtons}>
+            <button
+              class={classes.noteButtonsSmaller}
+              tabindex="-1"
+              title="Smaller notes font size"
+            >
+              Smaller notes font size
+            </button>
+            <button
+              class={classes.noteButtonsBigger}
+              tabindex="-1"
+              title="Bigger notes font size"
+            >
+              Bigger notes font size
+            </button>
+          </div>
+        </div>
         <div class={classes.infoContainer}>
           <div class={classes.infoPage}>
             <button class={classes.infoPagePrev} tabindex="-1" title="Previous">
@@ -66,9 +92,10 @@ const presenterView = (deck) => {
   }
 
   const $cache: { -readonly [T in keyof typeof classes]?: HTMLElement } = {}
-  const $ = (klass: typeof classes[keyof typeof classes]): HTMLElement => {
-    $cache[klass] =
-      $cache[klass] || document.querySelector<HTMLElement>(`.${klass}`)
+  const $ = <T extends HTMLElement>(
+    klass: typeof classes[keyof typeof classes]
+  ): T => {
+    $cache[klass] = $cache[klass] || document.querySelector<T>(`.${klass}`)
 
     return $cache[klass]
   }
@@ -96,7 +123,7 @@ const presenterView = (deck) => {
 
     notes.forEach((note) => {
       note.addEventListener('keydown', (e) => e.stopPropagation())
-      $(classes.noteContainer).appendChild(note)
+      $(classes.noteWrapper).appendChild(note)
     })
 
     deck.on('activate', () =>
@@ -105,15 +132,49 @@ const presenterView = (deck) => {
       )
     )
 
+    // Presenter note buttons
+    let notesFontSizeBase = 0
+    const resizeNotesFont = (increment: number) => {
+      notesFontSizeBase = Math.max(-5, notesFontSizeBase + increment)
+
+      $(classes.noteContainer).style.setProperty(
+        properties.noteFontScale,
+        (1.2 ** notesFontSizeBase).toFixed(4)
+      )
+    }
+    const biggerNotesFont = () => resizeNotesFont(1)
+    const smallerNotesFont = () => resizeNotesFont(-1)
+
+    const noteButtonBigger = $<HTMLButtonElement>(classes.noteButtonsBigger)
+    const noteButtonSmaller = $<HTMLButtonElement>(classes.noteButtonsSmaller)
+
+    noteButtonBigger.addEventListener('click', () => {
+      noteButtonBigger.blur()
+      biggerNotesFont()
+    })
+    noteButtonSmaller.addEventListener('click', () => {
+      noteButtonSmaller.blur()
+      smallerNotesFont()
+    })
+
+    document.addEventListener(
+      'keydown',
+      (e) => {
+        if (e.key === '+') biggerNotesFont()
+        if (e.key === '-') smallerNotesFont()
+      },
+      true // Ignore stopped propagation in notes
+    )
+
     // Page info
     deck.on('activate', ({ index }) => {
       $(classes.infoPageText).textContent = `${index + 1} / ${
         deck.slides.length
       }`
     })
 
-    const prev = $(classes.infoPagePrev) as HTMLButtonElement
-    const next = $(classes.infoPageNext) as HTMLButtonElement
+    const prev = $<HTMLButtonElement>(classes.infoPagePrev)
+    const next = $<HTMLButtonElement>(classes.infoPageNext)
 
     prev.addEventListener('click', (e) => {
       prev.blur()

test/templates/bespoke.ts

@@ -3,7 +3,10 @@ import Marp from '@marp-team/marp-core'
 import { Element as MarpitElement } from '@marp-team/marpit'
 import { Key } from 'ts-key-enum'
 import bespoke from '../../src/templates/bespoke/bespoke'
-import { classes } from '../../src/templates/bespoke/presenter/presenter-view'
+import {
+  classes,
+  properties,
+} from '../../src/templates/bespoke/presenter/presenter-view'
 import * as fullscreen from '../../src/templates/bespoke/utils/fullscreen'
 import { _clearCachedWakeLockApi } from '../../src/templates/bespoke/wake-lock'
 
@@ -930,6 +933,44 @@ describe("Bespoke template's browser context", () => {
             expect(noteA?.className).not.toContain('active')
             expect(noteB?.className).toContain('active')
           }, '<!-- A -->\n\n---\n\n<!-- B -->'))
+
+        describe('Font size', () => {
+          const fontSizeScale = () =>
+            $p(classes.noteContainer).style.getPropertyValue(
+              properties.noteFontScale
+            )
+
+          it('increases the font-size when clicked "+" button once', () =>
+            testPresenterView(() => {
+              $p(classes.noteButtonsBigger).click()
+              expect(fontSizeScale()).toBe('1.2000')
+            }))
+
+          it('increases the font-size when clicked "+" button twice', () =>
+            testPresenterView(() => {
+              $p(classes.noteButtonsBigger).click()
+              $p(classes.noteButtonsBigger).click()
+              expect(fontSizeScale()).toBe('1.4400') // 1.2 ** 2
+            }))
+
+          it('reduces the font-size when clicked "-" once', () =>
+            testPresenterView(() => {
+              $p(classes.noteButtonsSmaller).click()
+              expect(fontSizeScale()).toBe('0.8333') // 1.2 ** -1
+            }))
+
+          it('reduces the font-size on minus key', () =>
+            testPresenterView(() => {
+              keydown({ key: '-' })
+              expect(fontSizeScale()).toBe('0.8333') // 1.2 ** -1
+            }))
+
+          it('increases the font-size on plus key', () =>
+            testPresenterView(() => {
+              keydown({ key: '+' })
+              expect(fontSizeScale()).toBe('1.2000')
+            }))
+        })
       })
     })