feat: popover dismiss callback (props @biou, closes #420)

* feat(api): added deactivateCallback
* feat(api): added tests for deactivateCallback
* feat(api): refactoring after review
* feat(api): refactoring of dismissCallback

README.md

@@ -136,6 +136,12 @@ Specifies a function to call on a footnote popover that is being activated (afte
 
 Default: `undefined`
 
+### `dismissCallback`
+
+Specifies a function to call on a footnote popover that is being dismissed (just before it is removed from the DOM). The function will be passed two arguments: the `popover` DOM element, and the related `button`. This option can be useful for removing classes on the popover.
+
+Default: `undefined`
+
 ### `activateDelay`
 
 Sets a delay between the activation of the footnote button and the activation of the actual footnote content.

src/core.ts

@@ -1,10 +1,10 @@
-import { Settings, ActivateCallback } from './settings'
+import { Settings, ActionCallback } from './settings'
 
 export type Footnote = Readonly<{
   id: string
-  activate: (onActivate?: ActivateCallback) => void
+  activate: (onActivate?: ActionCallback) => void
   ready: () => void
-  dismiss: () => void
+  dismiss: (onDeactivate?: ActionCallback) => void
   remove: () => void
   reposition: () => void
   resize: () => void
@@ -43,19 +43,19 @@ export type Adapter = Readonly<{
   cleanup: (footnotes: Footnote[]) => void
 }>
 
-function dismiss(footnote: Footnote, delay: number): void {
-  if (footnote.isReady()) {
-    footnote.dismiss()
-
-    setTimeout(() => {
-      footnote.remove()
-    }, delay)
-  }
-}
-
 export function createCore(adapter: Adapter, settings: Settings): Core {
   const footnotes = adapter.setup(settings)
 
+  function dismiss(footnote: Footnote, delay: number): void {
+    if (footnote.isReady()) {
+      footnote.dismiss(settings.dismissCallback)
+
+      setTimeout(() => {
+        footnote.remove()
+      }, delay)
+    }
+  }
+
   function activate(footnote: Footnote, delay: number): void {
     if (!settings.allowMultiple) {
       footnotes

src/dom/footnote.ts

@@ -52,10 +52,13 @@ export function createFootnote({
       }
     },
 
-    dismiss: () => {
+    dismiss: (onDismiss) => {
       button.classList.add(CLASS_CHANGING)
       button.setAttribute('aria-expanded', 'false')
       button.classList.remove(CLASS_ACTIVE)
+      if (typeof onDismiss === 'function') {
+        onDismiss(popover, button)
+      }
     },
 
     isActive: () => button.classList.contains(CLASS_ACTIVE),

src/settings.ts

@@ -1,12 +1,10 @@
 import { CLASS_WRAPPER, CLASS_CONTENT, CLASS_TOOLTIP } from './dom/layout'
 
-export type ActivateCallback = (
-  popover: HTMLElement,
-  button: HTMLElement
-) => void
+export type ActionCallback = (popover: HTMLElement, button: HTMLElement) => void
 
 export type Settings = Readonly<{
-  activateCallback?: ActivateCallback
+  activateCallback?: ActionCallback
+  dismissCallback?: ActionCallback
   activateDelay: number
   activateOnHover: boolean
   allowDuplicates: boolean

test/options/dismissCallback.test.ts

@@ -0,0 +1,46 @@
+import { fireEvent } from '@testing-library/dom'
+import {
+  setDocumentBody,
+  getPopover,
+  waitToStopChanging,
+  getButton,
+} from '../helper'
+import littlefoot from '../../src'
+
+test('setup with dismissCallback', async () => {
+  setDocumentBody('single.html')
+  const dismissCallback = jest.fn()
+  littlefoot({ dismissCallback: dismissCallback })
+
+  const button = getButton('1')
+
+  fireEvent.click(button)
+  await waitToStopChanging(button)
+
+  fireEvent.click(button)
+  const popover = getPopover('1')
+  await waitToStopChanging(button)
+
+  expect(dismissCallback).toHaveBeenCalledTimes(1)
+  expect(dismissCallback).toHaveBeenCalledWith(popover, button)
+})
+
+test('dismissCallback can be set after initialisation', async () => {
+  setDocumentBody('single.html')
+  const dismissCallback = jest.fn()
+
+  const instance = littlefoot()
+  instance.updateSetting('dismissCallback', dismissCallback)
+
+  const button = getButton('1')
+
+  fireEvent.click(button)
+  await waitToStopChanging(button)
+
+  fireEvent.click(button)
+  const popover = getPopover('1')
+  await waitToStopChanging(button)
+
+  expect(dismissCallback).toHaveBeenCalledTimes(1)
+  expect(dismissCallback).toHaveBeenCalledWith(popover, button)
+})