diff --git a/CHANGELOG.md b/CHANGELOG.md index 08c6d01..79920bc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +2.2.1 (unreleased) +===== + +* (improvement) Remove internal `elementMatches()` helper. +* (improvement) Remove outdated `CustomEvent` workaround. +* (deprecation) Deprecate `createEvent` helper. +* (improvement) Remove outdated `MediaQueryList.addEventListener()` workaround. + + 2.2.0 ===== diff --git a/UPGRADE.md b/UPGRADE.md index 4355bef..f38a104 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -1,4 +1,10 @@ -1.x to 2.0.0 +2.x to 3.0 +========== + +* The `createEvent` helper was removed, use `new CustomEvent()` directly. + + +1.x to 2.0 ============ * The import path for `mount()` has changed `/mount.js -> /react/mount.mjs`. diff --git a/src/dom/attrs.ts b/src/dom/attrs.ts index 338d6fa..cfee729 100644 --- a/src/dom/attrs.ts +++ b/src/dom/attrs.ts @@ -1,10 +1,15 @@ /** * Toggles the class on the given element(s). */ -export function toggleClass (element: HTMLElement|HTMLElement[], className: string|string[], addClass: boolean) : void +export function toggleClass ( + element: HTMLElement|HTMLElement[], + className: string|string[], + addClass: boolean, +) : void { const classes = Array.isArray(className) ? className : [className]; const elements = Array.isArray(element) ? element : [element]; + elements.forEach(item => { classes.forEach(classToChange => item.classList[addClass ? "add" : "remove"](classToChange)); }); diff --git a/src/dom/events.ts b/src/dom/events.ts index 6f96b5c..d84fc6b 100644 --- a/src/dom/events.ts +++ b/src/dom/events.ts @@ -1,6 +1,5 @@ import {splitStringValue} from '../lib/string'; import {closest} from './traverse'; -import {createEvent} from '../lib/events'; type EventHandler = (event: EventType) => any; type DelegatedEventHandler = (event: EventType, delegateTarget: ElementType) => any; @@ -16,7 +15,7 @@ export function on ( element: ExtendedEventTarget, type: ExtendedEventName, handler: EventHandler, - options: boolean|AddEventListenerOptions = false + options: boolean|AddEventListenerOptions = false, ) : void { const elements = Array.isArray(element) ? element : [element]; @@ -39,7 +38,7 @@ export function on ( export function off ( element: ExtendedEventTarget, type: ExtendedEventName, - handler: EventHandler + handler: EventHandler, ) : void { @@ -65,7 +64,7 @@ export function off ( export function once ( element: EventTarget|null, type: EventName, - handler: EventHandler + handler: EventHandler, ) : UnregisterEventCallback { if (!element) @@ -94,7 +93,7 @@ export function delegate + handler: DelegatedEventHandler, ) : UnregisterEventCallback { const wrappedHandler = (event: EventType) => @@ -110,13 +109,15 @@ export function delegate ( element: EventTarget|null, type: EventName, - handler: EventHandler + handler: EventHandler, ) : UnregisterEventCallback { if (!element) @@ -135,16 +136,15 @@ export function onOff ( export function trigger ( element: EventTarget|null, type: EventName, - data?: unknown + data?: unknown, ) : void { - // @legacy IE 11 doesn't support the global CustomEvent if (!element) { return; } - element.dispatchEvent(createEvent(type, { + element.dispatchEvent(new CustomEvent(type, { bubbles: true, cancelable: true, detail: data, diff --git a/src/dom/lib/traverse-helpers.ts b/src/dom/lib/traverse-helpers.ts index 53face3..b741d3d 100644 --- a/src/dom/lib/traverse-helpers.ts +++ b/src/dom/lib/traverse-helpers.ts @@ -1,19 +1,3 @@ -const polyfilledElementMatches = Element.prototype.matches - || (Element.prototype as any).msMatchesSelector - || (Element.prototype as any).webkitMatchesSelector; - - -/** - * Returns whether the given element matches the optional selector - * - * @internal - */ -export function elementMatches (element: ElementType, selector: string|null = null) : boolean -{ - return (null === selector) || polyfilledElementMatches.call(element, selector); -} - - /** * Fetches all siblings, in the given direction. * Will start from the given element, traverse in the given direction and fetch the first (or all) matches @@ -23,7 +7,7 @@ export function elementMatches (element: ElementTyp export function fetchSiblings ( element: HTMLElement, selector: string|null, - accessor: "previousElementSibling" | "nextElementSibling" + accessor: "previousElementSibling" | "nextElementSibling", ) : ElementType[] { let sibling = element[accessor]; @@ -31,7 +15,7 @@ export function fetchSiblings ( while (sibling) { - if (elementMatches(sibling, selector)) + if (null === selector || sibling.matches(selector)) { list.push(sibling as ElementType); } diff --git a/src/dom/traverse.ts b/src/dom/traverse.ts index 9769dbb..66fa603 100644 --- a/src/dom/traverse.ts +++ b/src/dom/traverse.ts @@ -1,4 +1,4 @@ -import {elementMatches, fetchSiblings} from './lib/traverse-helpers'; +import {fetchSiblings} from './lib/traverse-helpers'; /** @@ -32,7 +32,7 @@ export function children (parent while (child) { - if (elementMatches(child, selector)) + if (selector === null || child.matches(selector)) { list.push(child as ElementType); } @@ -84,7 +84,7 @@ export function closest (element: HTMLElement| while (null !== parent && rootElement !== parent) { - if (elementMatches(parent, selector)) + if (parent.matches(selector)) { return parent as ElementType; } diff --git a/src/lib/events.ts b/src/lib/events.ts index 5af873b..0986e9c 100644 --- a/src/lib/events.ts +++ b/src/lib/events.ts @@ -2,15 +2,10 @@ import {EventName} from '../dom/events'; /** * Creates a new custom event + * + * @deprecated Just use the CustomEvent constructor directly */ export function createEvent (type: EventName, args: CustomEventInit): CustomEvent { - if (typeof CustomEvent !== "function") - { - const event = document.createEvent("CustomEvent"); - event.initCustomEvent(type, args.bubbles, args.cancelable, args.detail); - return event; - } - return new CustomEvent(type, args); } diff --git a/src/media-query.ts b/src/media-query.ts index 3d4505b..76e9374 100644 --- a/src/media-query.ts +++ b/src/media-query.ts @@ -18,14 +18,7 @@ export function matchMediaQuery (query: string): MediaQueryMatcher let listeners: MediaQueryChangeListener[] = []; const update = (event: MediaQueryListEvent) => listeners.forEach(listener => listener(event.matches)); - if (media.addEventListener) - { - media.addEventListener("change", update); - } - else - { - media.addListener(update); - } + media.addEventListener("change", update); return { /** @@ -72,15 +65,7 @@ export function matchMediaQuery (query: string): MediaQueryMatcher destroy (): void { listeners = []; - - if (media.removeEventListener) - { - media.removeEventListener("change", update); - } - else - { - media.removeListener(update); - } + media.removeEventListener("change", update); } }; } diff --git a/src/popup-interaction.ts b/src/popup-interaction.ts index 0dc7e1d..7cd0af3 100644 --- a/src/popup-interaction.ts +++ b/src/popup-interaction.ts @@ -46,7 +46,7 @@ export function registerBodyClickHandler (allowedClickTargets: HTMLElement[], on export function initDismissibleContainer ( trigger: HTMLElement|HTMLElement[], allowedContainers: HTMLElement[], - callback: (isActive: boolean) => void + callback: (isActive: boolean) => void, ) : DismissibleContainerDirector { let globalHandler: (() => void)|null = null; diff --git a/src/react/mount.ts b/src/react/mount.ts index 547de4f..f390baf 100644 --- a/src/react/mount.ts +++ b/src/react/mount.ts @@ -24,7 +24,7 @@ interface MountableJsxOptions { export function mount ( selector: string|HTMLElement|HTMLElement[], mountable: MountableFunction, - options: MountableFunctionOptions = {} + options: MountableFunctionOptions = {}, ) : void { const elements = typeof selector === "string" @@ -41,7 +41,7 @@ export function mount ( export function mountJsx > ( selector: string|HTMLElement|HTMLElement[], mountable: ComponentType, - options: MountableJsxOptions = {} + options: MountableJsxOptions = {}, ) : void { const elements = typeof selector === "string"