Merge pull request #248 from marp-team/skip-fragments

Skip fragments when navigated page while holding shift key

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Added
 
+- Skip fragments when navigated page while holding shift key ([#206](https://github.com/marp-team/marp-cli/issues/206), [#248](https://github.com/marp-team/marp-cli/pull/248))
 - Keep awake the display in `bespoke` template if [Screen Wake Lock API](https://web.dev/wakelock/) is available (Chrome >= 84) ([#239](https://github.com/marp-team/marp-cli/issues/239), [#246](https://github.com/marp-team/marp-cli/pull/246))
 - Test against Node 14 (Fermium) ([#251](https://github.com/marp-team/marp-cli/pull/251))
 - Set up GitHub Dependabot for marp-team packages ([#252](https://github.com/marp-team/marp-cli/pull/252))

src/templates/bespoke/fragments.ts

@@ -66,18 +66,30 @@ export default function bespokeFragments(deck) {
     deck.fire('fragment', fragmentEvent)
   }
 
-  deck.on('next', () => {
-    if (activeSlideHasFragmentByOffset(1)) {
-      activate(activeSlideIdx, activeFragmentIdx + 1)
-      return false
-    }
+  deck.on('next', ({ fragment = true }) => {
+    if (fragment) {
+      if (activeSlideHasFragmentByOffset(1)) {
+        activate(activeSlideIdx, activeFragmentIdx + 1)
+        return false
+      }
+
+      const nextIdx = activeSlideIdx + 1
+      if (deck.fragments[nextIdx]) activate(nextIdx, 0)
+    } else {
+      const fragmentSize = deck.fragments[activeSlideIdx].length
 
-    const nextIdx = activeSlideIdx + 1
-    if (deck.fragments[nextIdx]) activate(nextIdx, 0)
+      if (activeFragmentIdx + 1 < fragmentSize) {
+        activate(activeSlideIdx, fragmentSize - 1)
+        return false
+      }
+
+      const nextFragments = deck.fragments[activeSlideIdx + 1]
+      if (nextFragments) activate(activeSlideIdx + 1, nextFragments.length - 1)
+    }
   })
 
-  deck.on('prev', () => {
-    if (activeSlideHasFragmentByOffset(-1)) {
+  deck.on('prev', ({ fragment = true }) => {
+    if (activeSlideHasFragmentByOffset(-1) && fragment) {
       activate(activeSlideIdx, activeFragmentIdx - 1)
       return false
     }

src/templates/bespoke/navigation.ts

@@ -12,29 +12,28 @@ export default function bespokeNavigation({
 }: BespokeNavigationOption = {}) {
   return (deck) => {
     document.addEventListener('keydown', (e) => {
-      // Space + Shift | Page Up | LEFT | UP: Previous page
-      if (
-        (e.which === 32 && e.shiftKey) ||
-        e.which === 33 ||
-        e.which === 37 ||
-        e.which === 38
-      )
+      if (e.which === 32 && e.shiftKey) {
+        // Space + Shift: Previous page
         deck.prev()
-
-      // Space | Page Down | RIGHT | DOWN: Next page
-      if (
-        (e.which === 32 && !e.shiftKey) ||
-        e.which === 34 ||
-        e.which === 39 ||
-        e.which === 40
-      )
+      } else if (e.which === 33 || e.which === 37 || e.which === 38) {
+        // Page Up | LEFT | UP: Previous page (Skip fragments if holding shift)
+        deck.prev({ fragment: !e.shiftKey })
+      } else if (e.which === 32 && !e.shiftKey) {
+        // Space: Next page
         deck.next()
-
-      // END: Jump to last page
-      if (e.which === 35) deck.slide(deck.slides.length - 1, { fragment: -1 })
-
-      // HOME: Jump to first page
-      if (e.which === 36) deck.slide(0)
+      } else if (e.which === 34 || e.which === 39 || e.which === 40) {
+        // Page Down | RIGHT | DOWN: Next page (Skip fragments if holding shift)
+        deck.next({ fragment: !e.shiftKey })
+      } else if (e.which === 35) {
+        // END: Jump to last page
+        deck.slide(deck.slides.length - 1, { fragment: -1 })
+      } else if (e.which === 36) {
+        // HOME: Jump to first page
+        deck.slide(0)
+      } else {
+        return
+      }
+      e.preventDefault() // Prevent default action when navigated
     })
 
     let lastWheelNavigationAt = 0

src/templates/bespoke/osc.ts

@@ -2,7 +2,7 @@ import { default as screenfull } from 'screenfull'
 import { storage } from './utils'
 
 export default function bespokeOSC(selector = '.bespoke-marp-osc') {
-  const osc = document.querySelector(selector)
+  const osc = document.querySelector<HTMLElement>(selector)
   if (!osc) return () => {} // eslint-disable-line @typescript-eslint/no-empty-function
 
   const oscElements = <T extends HTMLElement = HTMLElement>(
@@ -34,10 +34,10 @@ export default function bespokeOSC(selector = '.bespoke-marp-osc') {
 
         switch (bespokeMarpOsc) {
           case 'next':
-            deck.next()
+            deck.next({ fragment: !e.shiftKey })
             break
           case 'prev':
-            deck.prev()
+            deck.prev({ fragment: !e.shiftKey })
             break
           case 'fullscreen':
             if (typeof deck.fullscreen === 'function' && screenfull.isEnabled)

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

@@ -114,14 +114,14 @@ export default function presenterView(deck) {
     const prev = $(classes.infoPagePrev) as HTMLButtonElement
     const next = $(classes.infoPageNext) as HTMLButtonElement
 
-    prev.addEventListener('click', () => {
+    prev.addEventListener('click', (e) => {
       prev.blur()
-      deck.prev()
+      deck.prev({ fragment: !e.shiftKey })
     })
 
-    next.addEventListener('click', () => {
+    next.addEventListener('click', (e) => {
       next.blur()
-      deck.next()
+      deck.next({ fragment: !e.shiftKey })
     })
 
     deck.on('fragment', ({ index, fragments, fragmentIndex }) => {

test/templates/bespoke.ts

@@ -362,17 +362,10 @@ describe("Bespoke template's browser context", () => {
   })
 
   describe('Navigation', () => {
-    let parent: HTMLElement
-    let deck
-
-    beforeEach(() => {
-      parent = render()
-      deck = bespoke()
-
-      jest.clearAllTimers()
-    })
-
     it('navigates page by keyboard', () => {
+      render()
+      const deck = bespoke()
+
       keydown({ which: Key.RightArrow })
       expect(deck.slide()).toBe(1)
 
@@ -404,7 +397,53 @@ describe("Bespoke template's browser context", () => {
       expect(deck.slide()).toBe(0)
     })
 
+    it('skips fragments when holding Shift key', () => {
+      render('* A\n* B\n* C\n\n---\n\n* D\n* E')
+      const deck = bespoke()
+
+      keydown({ which: Key.RightArrow, shiftKey: true })
+      expect(deck.slide()).toBe(0)
+      expect(deck.fragmentIndex).toBe(3)
+
+      keydown({ which: Key.DownArrow, shiftKey: true })
+      expect(deck.slide()).toBe(1)
+      expect(deck.fragmentIndex).toBe(2)
+
+      keydown({ which: Key.LeftArrow, shiftKey: true })
+      expect(deck.slide()).toBe(0)
+      expect(deck.fragmentIndex).toBe(3)
+
+      keydown({ which: Key.RightArrow })
+      expect(deck.slide()).toBe(1)
+      expect(deck.fragmentIndex).toBe(0)
+
+      keydown({ which: Key.PageDown, shiftKey: true })
+      expect(deck.fragmentIndex).toBe(2)
+
+      keydown({ which: Key.UpArrow, shiftKey: true })
+      expect(deck.slide()).toBe(0)
+      expect(deck.fragmentIndex).toBe(3)
+
+      keydown({ which: Key.RightArrow })
+      expect(deck.slide()).toBe(1)
+      expect(deck.fragmentIndex).toBe(0)
+
+      keydown({ which: Key.PageUp, shiftKey: true })
+      expect(deck.slide()).toBe(0)
+      expect(deck.fragmentIndex).toBe(3)
+    })
+
     describe('with wheel', () => {
+      let parent: HTMLElement
+      let deck
+
+      beforeEach(() => {
+        parent = render()
+        deck = bespoke()
+
+        jest.clearAllTimers()
+      })
+
       const dispatch = (opts: WheelEventInit = {}, elm: Element = parent) =>
         elm.dispatchEvent(new WheelEvent('wheel', { ...opts, bubbles: true }))