Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make all events go through the DOM #239

Merged
merged 4 commits into from
Jul 12, 2022
+13 −30
Merged

Make all events go through the DOM #239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fb6ea94
Make all events go through the DOM
KittyGiraudel Jul 12, 2022
1fc08d0
Fix TypeScript issue
KittyGiraudel Jul 12, 2022
17acbd0
Add ‘options’ third parameter to ‘on’ and ‘off’ methods
KittyGiraudel Jul 12, 2022
94fc50b
Update the tests
KittyGiraudel Jul 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions cypress/e2e/instance.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,21 +44,21 @@ describe('Instance', () => {
cy.window()
.its('instance')

.invoke('on', 'show', container => {
expect(container.id).to.eq('my-dialog')
.invoke('on', 'show', event => {
expect(event.target.id).to.eq('my-dialog')
logs.push('Shown')
})

.invoke('on', 'hide', container => {
expect(container.id).to.eq('my-dialog')
.invoke('on', 'hide', event => {
expect(event.target.id).to.eq('my-dialog')
logs.push('Hidden')
})

.invoke('on', 'hide', event)
.invoke('off', 'hide', event)

.invoke('on', 'destroy', container => {
expect(container.id).to.eq('my-dialog')
.invoke('on', 'destroy', event => {
expect(event.target.id).to.eq('my-dialog')
logs.push('Destroyed')
})

Expand Down
31 changes: 7 additions & 24 deletions src/a11y-dialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,12 @@ import focusableSelectors from 'focusable-selectors'

export type A11yDialogEvent = 'show' | 'hide' | 'destroy'
export type A11yDialogInstance = InstanceType<typeof A11yDialog>
export type A11yDialogEventHandler = (node: Element, event?: Event) => void

type ListenersRecord = Partial<
Record<A11yDialogEvent, A11yDialogEventHandler[]>
>

export default class A11yDialog {
private $el: HTMLElement
private id: string
private openers: HTMLElement[]
private closers: HTMLElement[]
private listeners: ListenersRecord = {}
private previouslyFocused: HTMLElement | null = null

public shown = false
Expand Down Expand Up @@ -68,9 +62,6 @@ export default class A11yDialog {
// Execute all callbacks registered for the `destroy` event
this.fire('destroy')

// Empty the listeners map
this.listeners = {}

return this
}

Expand Down Expand Up @@ -132,12 +123,10 @@ export default class A11yDialog {
*/
public on = (
type: A11yDialogEvent,
handler: A11yDialogEventHandler
handler: EventListener,
options?: AddEventListenerOptions
): A11yDialogInstance => {
const listeners = this.listeners[type] || []
listeners.push(handler)

this.listeners[type] = listeners
this.$el.addEventListener(type, handler, options)

return this
}
Expand All @@ -147,12 +136,10 @@ export default class A11yDialog {
*/
public off = (
type: A11yDialogEvent,
handler: A11yDialogEventHandler
handler: EventListener,
options?: AddEventListenerOptions
): A11yDialogInstance => {
const listeners = this.listeners[type] || []
const index = listeners.indexOf(handler)

if (index > -1) listeners.splice(index, 1)
this.$el.removeEventListener(type, handler, options)

return this
}
Expand All @@ -164,11 +151,7 @@ export default class A11yDialog {
* possible to react to the lifecycle of auto-instantiated dialogs.
*/
private fire = (type: A11yDialogEvent, event?: Event) => {
const listeners = this.listeners[type] || []
const domEvent = new CustomEvent(type, { detail: event })

this.$el.dispatchEvent(domEvent)
listeners.forEach(listener => listener(this.$el, event))
this.$el.dispatchEvent(new CustomEvent(type, { detail: event }))
}

/**
Expand Down