feat: dismiss a footnote when touching outside it (#1692)

src/dom/events.ts

@@ -59,7 +59,7 @@ const delegate = (
 export function addListeners(useCases: UseCases): () => void {
   const controller = new AbortController()
   const { signal } = controller
-  const toggleOnTouch = touchHandler(useCases.toggle, useCases.dismissAll)
+  const toggleOnTouch = touchHandler(useCases.toggle, useCases.documentTouch)
   const dismissOnEscape = escapeHandler(useCases.dismissAll)
   const throttledReposition = throttle(useCases.repositionAll, FRAME)
   const throttledResize = throttle(useCases.resizeAll, FRAME)

src/settings.ts

@@ -17,6 +17,7 @@ export const DEFAULT_SETTINGS: Settings = {
   anchorPattern: /(fn|footnote|note)[:\-_\d]/gi,
   dismissDelay: 100,
   dismissOnUnhover: false,
+  dismissOnDocumentTouch: true,
   footnoteSelector: 'li',
   hoverDelay: 250,
   numberResetSelector: '',

src/use-cases.ts

@@ -10,6 +10,7 @@ export type UseCaseSettings<T> = Readonly<{
   dismissCallback?: ActionCallback<T>
   dismissDelay: number
   dismissOnUnhover: boolean
+  dismissOnDocumentTouch: boolean
   hoverDelay: number
 }>
 
@@ -36,6 +37,7 @@ export type UseCases = Readonly<{
   activate: DelayedFootnoteAction
   dismiss: DelayedFootnoteAction
   dismissAll: () => void
+  documentTouch: () => void
   hover: FootnoteAction
   repositionAll: () => void
   resizeAll: () => void
@@ -82,12 +84,20 @@ export function createUseCases<T>(
     }
   }
 
+  const dismissAll = () => footnotes.forEach(dismiss(settings.dismissDelay))
+
   return {
     activate: (id, delay) => ifFound(activate(delay))(id),
 
     dismiss: (id, delay) => ifFound(dismiss(delay))(id),
 
-    dismissAll: () => footnotes.forEach(dismiss(settings.dismissDelay)),
+    dismissAll,
+
+    documentTouch: () => {
+      if (settings.dismissOnDocumentTouch) {
+        dismissAll()
+      }
+    },
 
     repositionAll: () => footnotes.forEach((current) => current.reposition()),
 

test/options/dismissOnDocumentTouch.test.ts

@@ -0,0 +1,56 @@
+import { test, expect } from 'vitest'
+import { fireEvent } from '@testing-library/dom'
+import {
+  setDocumentBody,
+  getPopover,
+  waitToStopChanging,
+  getAllActiveButtons,
+  getButton,
+} from '../helper'
+import littlefoot from '../../src/littlefoot'
+
+test('do not dismiss footnote when clicking the document body', async () => {
+  setDocumentBody('single.html')
+  littlefoot({ dismissOnDocumentTouch: false, activateDelay: 0, dismissDelay: 0 })
+
+  const button = getButton('1')
+  fireEvent.click(button)
+  await waitToStopChanging(button)
+  const popover = getPopover('1')
+
+  fireEvent.click(document.body)
+
+  expect(popover).toBeInTheDocument()
+  expect(button).toHaveClass('is-active')
+})
+
+test('dismiss footnote when clicking the button again', async () => {
+  setDocumentBody('single.html')
+  littlefoot({ dismissOnDocumentTouch: false, activateDelay: 0, dismissDelay: 0 })
+  const button = getButton('1')
+  fireEvent.click(button)
+  await waitToStopChanging(button)
+
+  fireEvent.click(button)
+
+  expect(button).toHaveClass('is-changing')
+  await waitToStopChanging(button)
+  const popover = getPopover('1')
+  expect(popover).not.toBeInTheDocument()
+  expect(button).not.toHaveClass('is-active')
+})
+
+test('disallow multiple activations', async () => {
+  setDocumentBody('default.html')
+  littlefoot({ dismissOnDocumentTouch: false, activateDelay: 0, dismissDelay: 0 })
+
+  const one = getButton('1')
+  fireEvent.click(one)
+  await waitToStopChanging(one)
+
+  const two = getButton('2')
+  fireEvent.click(two)
+  await waitToStopChanging(two)
+
+  expect(getAllActiveButtons()).toEqual([two])
+})