allow the presenter view to be resized

src/templates/bespoke/bespoke.scss

@@ -194,11 +194,14 @@ $progress-height: 5px;
 
       // Grid layout for presenter view
       display: grid;
+
+      --bespoke-marp-presenter-split-ratio: 66%;
+
       grid-template:
-        'current next' minmax(140px, 1fr)
-        'current note' 2fr
-        'info    note' 3em /
-        2fr 1fr;
+        '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;
 
       .bespoke-marp-parent {
         grid-area: current;
@@ -220,6 +223,23 @@ $progress-height: 5px;
         }
       }
 
+      // Dragbar
+      .bespoke-marp-presenter-dragbar-container {
+        grid-area: dragbar;
+        background: #0288d1; // Marp brand color
+        cursor: ew-resize;
+        width: 6px;
+        margin-left: -3px;
+        position: relative;
+        z-index: 1;
+        opacity: 0;
+        transition: opacity 0.4s linear 0.1s;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+
       // Next slide view
       .bespoke-marp-presenter-next-container {
         background: #222;

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

@@ -9,6 +9,7 @@ const Fragment: any = ({ children }) => h(null, null, ...children)
 export const presenterPrefix = `${classPrefix}presenter-` as const
 export const classes = {
   container: `${presenterPrefix}container`,
+  dragbar: `${presenterPrefix}dragbar-container`,
   next: `${presenterPrefix}next`,
   nextContainer: `${presenterPrefix}next-container`,
   noteContainer: `${presenterPrefix}note-container`,
@@ -53,6 +54,7 @@ const presenterView = (deck) => {
         <div class={classes.nextContainer}>
           <iframe class={classes.next} src="?view=next" />
         </div>
+        <div class={classes.dragbar}></div>
         <div class={classes.noteContainer}>
           <div class={classes.noteWrapper} />
           <div class={classes.noteButtons}>
@@ -103,6 +105,9 @@ const presenterView = (deck) => {
   const subscribe = (deck) => {
     // 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())
@@ -219,6 +224,22 @@ const presenterView = (deck) => {
     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()
+  }
+
   document.body.appendChild(buildContainer(deck.parent))
   subscribe(deck)
 }

test/templates/bespoke.ts

@@ -989,6 +989,42 @@ 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 }) => {
+            $p(classes.dragbar).dispatchEvent(new MouseEvent('mousedown'))
+            $p(classes.container).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'))
+          }))
+        it('no resize without drag', () =>
+          testPresenterView(({ deck }) => {
+            $p(classes.container).dispatchEvent(
+              new MouseEvent('mousemove', { clientX: 200 })
+            )
+            expect(
+              $p(classes.container).style.getPropertyValue(
+                '--bespoke-marp-presenter-split-ratio'
+              )
+            ).toBe('')
+          }))
+      })
     })
 
     describe('In next view mode', () => {