Follow up: the draggable splitter in the presenter view

CHANGELOG.md

@@ -5,8 +5,9 @@
 ### Added
 
 - `--notes` option to export presenter notes as text file ([#278](https://github.com/marp-team/marp-cli/issues/278), [#429](https://github.com/marp-team/marp-cli/pull/429) by [@chrisns](https://github.com/chrisns), [#432](https://github.com/marp-team/marp-cli/pull/432))
-- 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))
 - Timer for the presenter view of bespoke template ([#314](https://github.com/marp-team/marp-cli/issues/314), [#430](https://github.com/marp-team/marp-cli/pull/430) by [@chrisns](https://github.com/chrisns))
+- The draggable splitter in the presenter view of bespoke template ([#427](https://github.com/marp-team/marp-cli/pull/427) by [@chrisns](https://github.com/chrisns), [#433](https://github.com/marp-team/marp-cli/pull/433))
+- 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
 

src/templates/bespoke/bespoke.scss

@@ -194,14 +194,13 @@ $progress-height: 5px;
 
       // Grid layout for presenter view
       display: grid;
-
-      --bespoke-marp-presenter-split-ratio: 66%;
-
       grid-template:
         'current dragbar next' minmax(140px, 1fr)
         'current dragbar note' 2fr
         'info    dragbar note' 3em;
-      grid-template-columns: var(--bespoke-marp-presenter-split-ratio) 0 1fr;
+      grid-template-columns:
+        minmax(3px, var(--bespoke-marp-presenter-split-ratio, 66%))
+        0 minmax(3px, 1fr);
 
       .bespoke-marp-parent {
         grid-area: current;
@@ -227,17 +226,22 @@ $progress-height: 5px;
       .bespoke-marp-presenter-dragbar-container {
         grid-area: dragbar;
         background: #0288d1; // Marp brand color
-        cursor: ew-resize;
+        cursor: col-resize;
         width: 6px;
         margin-left: -3px;
         position: relative;
-        z-index: 1;
+        z-index: 10;
         opacity: 0;
         transition: opacity 0.4s linear 0.1s;
 
         &:hover {
           opacity: 1;
         }
+
+        &.active {
+          opacity: 1;
+          transition-delay: 0s;
+        }
       }
 
       // Next slide view
@@ -274,6 +278,7 @@ $progress-height: 5px;
         color: $text-color;
         position: relative;
         grid-area: note;
+        z-index: 1;
 
         button {
           @extend %button;

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

@@ -103,15 +103,37 @@ const presenterView = (deck) => {
   }
 
   const subscribe = (deck) => {
+    // Splitter
+    let isDragging = false
+
+    const startDragging = () => {
+      isDragging = true
+      $(classes.dragbar).classList.add('active')
+    }
+
+    const endDragging = () => {
+      isDragging = false
+      $(classes.dragbar).classList.remove('active')
+    }
+
+    const onDragging = (event: MouseEvent) => {
+      if (!isDragging) return
+
+      const splitRatio =
+        (event.clientX / document.documentElement.clientWidth) * 100
+
+      $(classes.container).style.setProperty(
+        '--bespoke-marp-presenter-split-ratio',
+        `${Math.max(0, Math.min(100, splitRatio))}%`
+      )
+    }
+
+    $(classes.dragbar).addEventListener('mousedown', startDragging)
+    window.addEventListener('mouseup', endDragging)
+    window.addEventListener('mousemove', onDragging)
+
     // Next slide view
     $(classes.nextContainer).addEventListener('click', () => deck.next())
-    $(classes.dragbar).addEventListener('mousedown', startDragging)
-    $(classes.container).addEventListener('mouseup', endDragging)
-    $(classes.container).addEventListener('mousemove', onDragging)
-    $(classes.infoTimer).addEventListener(
-      'click',
-      () => (startTime = new Date())
-    )
 
     const nextIframe = $(classes.next) as HTMLIFrameElement
     const nextNav = createNavigateFunc(nextIframe)
@@ -202,8 +224,9 @@ const presenterView = (deck) => {
         fragmentIndex === fragments.length - 1
     })
 
-    // Current time
+    // Current time and presenter timer
     let startTime = new Date()
+
     const update = () => {
       const time = new Date()
 
@@ -222,22 +245,10 @@ const presenterView = (deck) => {
 
     update()
     setInterval(update, 250)
-  }
-
-  let isDragging = false
 
-  const startDragging = () => (isDragging = true)
-  const endDragging = () => (isDragging = false)
-
-  const onDragging = (event: MouseEvent) => {
-    if (!isDragging) return
-
-    $(classes.container).style.setProperty(
-      '--bespoke-marp-presenter-split-ratio',
-      `${(event.clientX / document.documentElement.clientWidth) * 100}%`
-    )
-
-    event.preventDefault()
+    $(classes.infoTimer).addEventListener('click', () => {
+      startTime = new Date()
+    })
   }
 
   document.body.appendChild(buildContainer(deck.parent))

test/templates/bespoke.ts

@@ -992,32 +992,35 @@ describe("Bespoke template's browser context", () => {
 
       describe('Drag resize', () => {
         let spy
+
         beforeAll(() => {
           spy = jest
             .spyOn(document.documentElement, 'clientWidth', 'get')
             .mockReturnValue(1000)
         })
+
         afterAll(() => {
           spy.mockRestore()
         })
+
         it('resizes on drag', () =>
-          testPresenterView(({ deck }) => {
+          testPresenterView(() => {
             $p(classes.dragbar).dispatchEvent(new MouseEvent('mousedown'))
-            $p(classes.container).dispatchEvent(
-              new MouseEvent('mousemove', { clientX: 200 })
-            )
+            window.dispatchEvent(new MouseEvent('mousemove', { clientX: 200 }))
+
             expect(
               $p(classes.container).style.getPropertyValue(
                 '--bespoke-marp-presenter-split-ratio'
               )
             ).toBe('20%')
-            $p(classes.container).dispatchEvent(new MouseEvent('mouseup'))
+
+            window.dispatchEvent(new MouseEvent('mouseup'))
           }))
+
         it('no resize without drag', () =>
-          testPresenterView(({ deck }) => {
-            $p(classes.container).dispatchEvent(
-              new MouseEvent('mousemove', { clientX: 200 })
-            )
+          testPresenterView(() => {
+            window.dispatchEvent(new MouseEvent('mousemove', { clientX: 200 }))
+
             expect(
               $p(classes.container).style.getPropertyValue(
                 '--bespoke-marp-presenter-split-ratio'