Revert back to opening in new windows

Author: mil-ad

src/templates/bespoke/overview/normal-view.ts

@@ -1,4 +1,6 @@
-import { generateURLfromParams, storage } from '../utils'
+import { classPrefix, generateURLfromParams, storage } from '../utils'
+
+export const overviewPrefix = `${classPrefix}overview-` as const
 
 interface BespokeForOverview {
   syncKey: string
@@ -26,7 +28,15 @@ const normalView = (deck) => {
 }
 
 function openOverviewView(this: BespokeForOverview) {
-  location.href = this.overviewUrl
+  const { max, floor } = Math
+  const w = max(floor(window.innerWidth * 0.85), 640)
+  const h = max(floor(window.innerHeight * 0.85), 360)
+
+  return window.open(
+    this.overviewUrl,
+    overviewPrefix + this.syncKey,
+    `width=${w},height=${h},menubar=no,toolbar=no`
+  )
 }
 
 function overviewUrl(this: BespokeForOverview) {

src/templates/bespoke/overview/overview-view.ts

@@ -1,19 +1,7 @@
-import { classPrefix, generateURLfromParams } from '../utils'
+import { classPrefix } from '../utils'
 
 const overviewActiveClass = `${classPrefix}overview-active`
 
-const navigateBack = (slideIndex: number) => {
-  const params = new URLSearchParams(location.search)
-
-  params.delete('view')
-  params.delete('sync')
-
-  location.href = generateURLfromParams(params, {
-    ...location,
-    hash: `#${slideIndex + 1}`,
-  })
-}
-
 const overviewView = () => (deck) => {
   const { title } = document
   document.title = `[Overview]${title ? ` - ${title}` : ''}`
@@ -55,25 +43,19 @@ const overviewView = () => (deck) => {
     })
   }
 
-  // Click a slide to navigate back to normal view at that slide
+  // Click a slide to navigate (syncs to other windows via bespokeSync)
   slides().forEach((slide, i) => {
     slide.addEventListener('click', () => {
-      navigateBack(i)
+      deck.slide(i)
     })
   })
 
-  // Arrow key navigation within the grid, Escape/Enter to go back
+  // Arrow key navigation within the grid
   document.addEventListener('keydown', (e) => {
     const cols = columns()
     const current = deck.slide()
 
-    if (e.key === 'Escape' || e.key === 'o') {
-      e.preventDefault()
-      navigateBack(current)
-    } else if (e.key === 'Enter') {
-      e.preventDefault()
-      navigateBack(current)
-    } else if (e.key === 'ArrowRight') {
+    if (e.key === 'ArrowRight') {
       e.preventDefault()
       deck.slide(Math.min(current + 1, slideCount() - 1))
     } else if (e.key === 'ArrowLeft') {

test/templates/bespoke.ts

@@ -1856,6 +1856,7 @@ describe("Bespoke template's browser context", () => {
   describe('Overview', () => {
     describe('In normal view mode', () => {
       beforeEach(() => {
+        jest.spyOn(window, 'open').mockImplementation()
         render()
       })
 
@@ -1869,27 +1870,36 @@ describe("Bespoke template's browser context", () => {
         })
       })
 
-      it('injects deck.openOverviewView() to navigate to overview view', () => {
+      it('injects deck.openOverviewView() to open overview view', () => {
         replaceLocation('/?sync=synckey', () => {
           const deck = bespoke()
           expect(deck.openOverviewView).toBeInstanceOf(Function)
+
+          deck.openOverviewView()
+          expect(window.open).toHaveBeenCalledWith(
+            deck.overviewUrl,
+            'bespoke-marp-overview-synckey',
+            expect.stringContaining('menubar=no,toolbar=no')
+          )
         })
       })
 
-      it('does not open overview with modifier keys', () => {
-        replaceLocation('/?sync=xxx', () => {
-          bespoke()
-          const hrefBefore = location.href
+      it('opens overview view by hitting o key', () => {
+        bespoke()
+        keydown({ key: 'o' })
+        expect(window.open).toHaveBeenCalled()
+
+        // Ignore hitting o key with modifier
+        ;(window.open as jest.Mock).mockClear()
 
-          keydown({ key: 'o', ctrlKey: true })
-          expect(location.href).toBe(hrefBefore)
+        keydown({ key: 'o', ctrlKey: true })
+        expect(window.open).not.toHaveBeenCalled()
 
-          keydown({ key: 'o', metaKey: true })
-          expect(location.href).toBe(hrefBefore)
+        keydown({ key: 'o', metaKey: true })
+        expect(window.open).not.toHaveBeenCalled()
 
-          keydown({ key: 'o', altKey: true })
-          expect(location.href).toBe(hrefBefore)
-        })
+        keydown({ key: 'o', altKey: true })
+        expect(window.open).not.toHaveBeenCalled()
       })
     })
 
@@ -1967,6 +1977,14 @@ describe("Bespoke template's browser context", () => {
           expect(deck.slide()).toBe(2)
         }))
 
+      it('navigates to clicked slide', () =>
+        testOverviewView(({ deck }) => {
+          deck.slides[2].dispatchEvent(
+            new MouseEvent('click', { bubbles: true })
+          )
+          expect(deck.slide()).toBe(2)
+        }))
+
       it('recalculates layout on window resize', () =>
         testOverviewView(({ deck }) => {
           const transformBefore = deck.slides[0].style.transform