@koine/dom 2.0.0-beta.2 → 2.0.0-beta.21

package/scrollTo.js

@@ -1,35 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.scrollTo = void 0;
-var on_1 = require("./on");
-var off_1 = require("./off");
-/**
- * Native `scrollTo`, `"smooth"` and with callback
- *
- * @borrows https://stackoverflow.com/a/55686711/1938970
- *
- * @param offset - offset to scroll to
- * @param callback - callback function
- * @param [fallbackTimeout] - this appears to be needed in some hard to reproduce scenario on safari, where the callback seem to be never called
- * @param [behavior="smooth"]
- */
-function scrollTo(destination, callback, fallbackTimeout, behavior) {
+import { off } from "./off.js";
+import { on } from "./on.js";
+export function scrollTo(destination, callback, fallbackTimeout, behavior) {
     var fixedDestination = destination.toFixed();
     if (callback) {
         var callbackFired_1 = false;
         var onScroll_1 = function () {
             if (window.pageYOffset.toFixed() === fixedDestination) {
-                (0, off_1.off)(window, "scroll", onScroll_1);
+                off(window, "scroll", onScroll_1);
                 callbackFired_1 = true;
                 callback();
             }
         };
-        (0, on_1.on)(window, "scroll", onScroll_1);
+        on(window, "scroll", onScroll_1);
         onScroll_1();
         if (fallbackTimeout) {
             setTimeout(function () {
                 if (!callbackFired_1) {
-                    (0, off_1.off)(window, "scroll", onScroll_1);
+                    off(window, "scroll", onScroll_1);
                     callback();
                 }
             }, fallbackTimeout);
@@ -40,5 +27,4 @@ function scrollTo(destination, callback, fallbackTimeout, behavior) {
         behavior: behavior || "smooth",
     });
 }
-exports.scrollTo = scrollTo;
-exports.default = scrollTo;
+export default scrollTo;

package/setDataAttr.d.ts

@@ -1,9 +1,2 @@
-/**
- * Set data attribute
- *
- * @param element
- * @param attribute The name of the `data-{attr}`
- * @param value The value to set, `null` or `undefined` will remove the attribute
- */
 export declare function setDataAttr(element: Element, attribute: string, value?: string | number | null | boolean): void;
 export default setDataAttr;

package/setDataAttr.js

@@ -1,22 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setDataAttr = void 0;
-/**
- * Set data attribute
- *
- * @param element
- * @param attribute The name of the `data-{attr}`
- * @param value The value to set, `null` or `undefined` will remove the attribute
- */
-function setDataAttr(element, attribute, value) {
+export function setDataAttr(element, attribute, value) {
     if (value === null || typeof value === "undefined") {
-        // delete element.dataset[attribute];
-        // return;
         element.removeAttribute("data-" + attribute);
         return;
     }
-    // element.dataset[attribute] = value.toString();
     element.setAttribute("data-" + attribute, value.toString());
 }
-exports.setDataAttr = setDataAttr;
-exports.default = setDataAttr;
+export default setDataAttr;

package/setVendorCSS.d.ts

@@ -1,9 +1,2 @@
-/**
- * Set vendor CSS rule
- *
- * @param element A single HTMLElement
- * @param prop CSS rule proerty
- * @param value The CSS value to set, it will be automatically vendor prefixed
- */
 export declare function setVendorCSS(element: HTMLElement, prop: string, value: string | number | boolean): void;
 export default setVendorCSS;

package/setVendorCSS.js

@@ -1,25 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setVendorCSS = void 0;
-/**
- * Set vendor CSS rule
- *
- * @param element A single HTMLElement
- * @param prop CSS rule proerty
- * @param value The CSS value to set, it will be automatically vendor prefixed
- */
-function setVendorCSS(element, prop, value) {
+export function setVendorCSS(element, prop, value) {
     var propUpper = prop.charAt(0).toUpperCase() + prop.slice(1);
-    // @ts-expect-error nevermind now...
     element.style["webkit" + propUpper] = value;
-    // @ts-expect-error nevermind now...
     element.style["moz" + propUpper] = value;
-    // @ts-expect-error nevermind now...
     element.style["ms" + propUpper] = value;
-    // @ts-expect-error nevermind now...
     element.style["o" + propUpper] = value;
-    // @ts-expect-error nevermind now...
     element.style[prop] = value;
 }
-exports.setVendorCSS = setVendorCSS;
-exports.default = setVendorCSS;
+export default setVendorCSS;

package/siblings.d.ts

@@ -1,7 +1,2 @@
-/**
- * Finds siblings nodes of the passed node.
- *
- * @borrows @glidejs/glide/src/utils/dom (source)
- */
 export declare function siblings(node: Element): Element[];
 export default siblings;

package/siblings.js

@@ -1,12 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.siblings = void 0;
-/**
- * Finds siblings nodes of the passed node.
- *
- * @borrows @glidejs/glide/src/utils/dom (source)
- */
-function siblings(node) {
+export function siblings(node) {
     if (node && node.parentNode) {
         var n = node.parentNode.firstChild;
         var matched = [];
@@ -19,5 +11,4 @@ function siblings(node) {
     }
     return [];
 }
-exports.siblings = siblings;
-exports.default = siblings;
+export default siblings;

package/toArray.d.ts

@@ -1,7 +1,2 @@
-/**
- * Node list to array
- *
- * @param nodeList
- */
 export declare function toArray<T extends Element = HTMLElement>(nodeList: NodeListOf<T> | HTMLFormControlsCollection): T[] | HTMLFormElement[];
 export default toArray;

package/toArray.js

@@ -1,13 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toArray = void 0;
-/**
- * Node list to array
- *
- * @param nodeList
- */
-function toArray(nodeList) {
+export function toArray(nodeList) {
     return Array.prototype.slice.call(nodeList);
 }
-exports.toArray = toArray;
-exports.default = toArray;
+export default toArray;

package/types.d.ts

@@ -1,7 +1,8 @@
-import type { AnythingFalsy } from "@koine/utils/types";
+import { LiteralUnion } from "type-fest";
+import type { AnythingFalsy } from "@koine/utils";
 export type AnyDOMEventTarget = Window | Document | HTMLElement | Element;
-/**
- * We use it either throwing an error on unexisting element or falling back
- * to `window` in case of _scroll_ or _resize_ events
- */
 export type AnyDOMEventTargetLoose = AnyDOMEventTarget | AnythingFalsy;
+type StandardDOMEventTypes = keyof GlobalEventHandlersEventMap;
+export type AnyDOMEventType = LiteralUnion<StandardDOMEventTypes | "storage" | "popstate", string>;
+export type AnyDOMEvent<TType extends AnyDOMEventType> = TType extends StandardDOMEventTypes ? GlobalEventHandlersEventMap[TType] : TType extends "storage" ? StorageEvent : TType extends "popstate" ? PopStateEvent : Event;
+export {};

package/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/unlisten.d.ts

@@ -1,12 +1,4 @@
-import { type EventCallback } from "./_listen-delegation";
-/**
- * Stop listening for an event
- *
- * @category listen-delegation
- *
- * @param types The event type or types (comma separated)
- * @param selector The selector to remove the event from
- * @param callback The function to remove
- */
-export declare function unlisten(types: string, selector: string, callback: EventCallback): void;
+import { type EventCallback } from "./_listen-delegation.js";
+import type { AnyDOMEventTarget, AnyDOMEventType } from "./types.js";
+export declare function unlisten<TTypes extends AnyDOMEventType, TTarget extends AnyDOMEventTarget = AnyDOMEventTarget>(types: TTypes, selector: string, callback: EventCallback<TTarget, TTypes>): void;
 export default unlisten;

package/unlisten.js

@@ -1,37 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.unlisten = void 0;
-var _listen_delegation_1 = require("./_listen-delegation");
-var off_1 = require("./off");
-/**
- * Stop listening for an event
- *
- * @category listen-delegation
- *
- * @param types The event type or types (comma separated)
- * @param selector The selector to remove the event from
- * @param callback The function to remove
- */
-function unlisten(types, selector, callback) {
-    // Loop through each event type
+import { activeEvents, eventHandler, getIndex, } from "./_listen-delegation.js";
+import { off } from "./off.js";
+export function unlisten(types, selector, callback) {
     types.split(",").forEach(function (type) {
-        // Remove whitespace
         type = type.trim();
-        // if event type doesn't exist, bail
-        if (!_listen_delegation_1.activeEvents[type])
+        if (!activeEvents[type])
             return;
-        // If it's the last event of it's type, remove entirely
-        if (_listen_delegation_1.activeEvents[type].length < 2 || !selector) {
-            delete _listen_delegation_1.activeEvents[type];
-            (0, off_1.off)(window, type, _listen_delegation_1.eventHandler, true);
+        if (activeEvents[type].length < 2 || !selector) {
+            delete activeEvents[type];
+            off(window, type, eventHandler, true);
             return;
         }
-        // Otherwise, remove event
-        var index = (0, _listen_delegation_1.getIndex)(_listen_delegation_1.activeEvents[type], selector, callback);
+        var index = getIndex(activeEvents[type], selector, callback);
         if (index < 0)
             return;
-        _listen_delegation_1.activeEvents[type].splice(index, 1);
+        activeEvents[type].splice(index, 1);
     });
 }
-exports.unlisten = unlisten;
-exports.default = unlisten;
+export default unlisten;

package/$$.d.ts

@@ -1,10 +0,0 @@
-/**
- * Sizzle/jQuery like DOM nodes shortcut for `document.querySelectorAll`
- * To avoid an extra function call we inline the above `escape`
- *
- * @param string selector DOM selector
- * @param parent It falls back to `window.document`
- * @param avoidEscape Whether to avoid escaping `:` in the selector string
- */
-export declare function $$<T extends Element = HTMLElement>(selector: string, parent?: HTMLElement | Document, avoidEscape?: boolean): NodeListOf<T>;
-export default $$;

package/$$.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$$ = void 0;
-/**
- * Sizzle/jQuery like DOM nodes shortcut for `document.querySelectorAll`
- * To avoid an extra function call we inline the above `escape`
- *
- * @param string selector DOM selector
- * @param parent It falls back to `window.document`
- * @param avoidEscape Whether to avoid escaping `:` in the selector string
- */
-function $$(selector, parent, avoidEscape) {
-    return (parent ? parent : document).querySelectorAll(avoidEscape ? selector : selector.replace(/:/g, "\\:"));
-}
-exports.$$ = $$;
-exports.default = $$;

package/$$.mjs

@@ -1,12 +0,0 @@
-/**
- * Sizzle/jQuery like DOM nodes shortcut for `document.querySelectorAll`
- * To avoid an extra function call we inline the above `escape`
- *
- * @param string selector DOM selector
- * @param parent It falls back to `window.document`
- * @param avoidEscape Whether to avoid escaping `:` in the selector string
- */
-export function $$(selector, parent, avoidEscape) {
-    return (parent ? parent : document).querySelectorAll(avoidEscape ? selector : selector.replace(/:/g, "\\:"));
-}
-export default $$;

package/$.mjs

@@ -1,15 +0,0 @@
-/**
- * Sizzle/jQuery like DOM nodes shortcut for `document.querySelector`
- * To avoid an extra function call we inline the above `escape`
- *
- * @param selector DOM selector
- * @param parent It falls back to `window.document`
- * @param avoidEscape Whether to avoid escaping `:` in the selector string
- * @example <caption>Basic DOM selection</caption>
- * const $container = $(".my-section:");
- * const $el = $("[data-some-attr]", $container);
- */
-export function $(selector, parent, avoidEscape) {
-    return (parent ? parent : document).querySelector(avoidEscape ? selector : selector.replace(/:/g, "\\:"));
-}
-export default $;

package/$each.mjs

@@ -1,17 +0,0 @@
-import $$ from "./$$";
-/**
- * Each shortcut, iterate through a NodeList of HTMLElements retrieved with the
- * given selector (and optionally a parent container passed as thrid arguement)
- *
- * @param selector DOM selector
- * @param callback
- * @param parent It falls back to `window.document`
- * @param scope
- */
-export function $each(selector, callback, parent, scope) {
-    var nodes = $$(selector, parent);
-    for (var i = 0; i < nodes.length; i++) {
-        callback.call(scope, nodes[i], i);
-    }
-}
-export default $each;

package/README.md

@@ -1 +0,0 @@
-# @koine/dom

package/_listen-delegation.mjs

@@ -1,83 +0,0 @@
-/**
- * Listen: events delegation system
- *
- * From:
- * https://github.com/cferdinandi/events
- * https://github.com/cferdinandi/events/blob/master/src/js/events/events.js
- *
- * @fileoverview
- */
-import isString from "@koine/utils/isString";
-import escapeSelector from "./escapeSelector";
-/**
- * Active events
- *
- * @internal
- */
-export var activeEvents = {};
-/**
- * Get the index for the listener
- *
- * @internal
- */
-export function getIndex(arr, selector, callback) {
-    for (var i = 0; i < arr.length; i++) {
-        if (arr[i].selector === selector &&
-            arr[i].callback.toString() === callback.toString())
-            return i;
-    }
-    return -1;
-}
-/**
- * Check if the listener callback should run or not
- *
- * @internal
- * @param target The event.target
- * @param selector The selector/element to check the target against
- * @return If not false, run listener and pass the targeted element to use in the callback
- */
-export function getRunTarget(target, selector) {
-    // @ts-expect-error FIXME: type
-    if (["*", "window", window].includes(selector)) {
-        return window;
-    }
-    if ([
-        "document",
-        "document.documentElement",
-        document,
-        document.documentElement,
-        // @ts-expect-error FIXME: type
-    ].includes(selector))
-        return document;
-    if (isString(selector)) {
-        return target.closest(escapeSelector(selector));
-    }
-    // @ts-expect-error FIXME: type
-    if (typeof selector !== "string" && selector.contains) {
-        if (selector === target) {
-            return target;
-        }
-        // @ts-expect-error FIXME: type
-        if (selector.contains(target)) {
-            return selector;
-        }
-        return false;
-    }
-    return false;
-}
-/**
- * Handle listeners after event fires
- *
- * @internal
- */
-export function eventHandler(event) {
-    if (!activeEvents[event.type])
-        return;
-    activeEvents[event.type].forEach(function (listener) {
-        var target = getRunTarget(event.target, listener.selector);
-        if (!target) {
-            return;
-        }
-        listener.callback(event, target);
-    });
-}

package/addClass.mjs

@@ -1,15 +0,0 @@
-/**
- * Add class shortcut
- */
-export function addClass(el, className) {
-    if (className === void 0) { className = ""; }
-    if (process.env["NODE_ENV"] !== "production") {
-        if (!el) {
-            console.warn("[@koine/dom:addClass] unexisting DOM element");
-            return;
-        }
-    }
-    if (el)
-        el.classList.add(className);
-}
-export default addClass;

package/calculateFixedOffset.mjs

@@ -1,10 +0,0 @@
-import { $each } from "./$each";
-export function calculateFixedOffset(selector) {
-    if (selector === void 0) { selector = "[data-fixed]"; }
-    var fixedOffset = 0;
-    $each(selector, function ($el) {
-        fixedOffset += $el.offsetHeight;
-    });
-    return fixedOffset;
-}
-export default calculateFixedOffset;

package/createElement.mjs

@@ -1,16 +0,0 @@
-import addClass from "./addClass";
-/**
- * Shortcut for `document.createElement`, allowing to to create an HTML element
- * with a given className directly (a very common use case)
- *
- * @param type
- * @param className
- */
-export function createElement(type, className) {
-    var el = document.createElement(type);
-    if (className) {
-        addClass(el, className);
-    }
-    return el;
-}
-export default createElement;

package/emitEvent.mjs

@@ -1,14 +0,0 @@
-/**
- * Emit event (use only if the targeted browser supports `CustomEvent`s)
- */
-export function emitEvent(type, detail) {
-    if (type === void 0) { type = "customEvent"; }
-    if (detail === void 0) { detail = {}; }
-    if (typeof window.CustomEvent !== "function")
-        return;
-    document.dispatchEvent(new CustomEvent(type, {
-        bubbles: true,
-        detail: detail,
-    }));
-}
-export default emitEvent;

package/escapeSelector.mjs

@@ -1,10 +0,0 @@
-/**
- * Escape colons to allow use class names as `.module:block__element`
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#Escaping_special_characters
- *
- * @param selector
- */
-export function escapeSelector(selector) {
-    return selector.replace(/:/g, "\\:");
-}
-export default escapeSelector;

package/exists.mjs

@@ -1,12 +0,0 @@
-/**
- * Checks if passed node exist and is a valid element.
- *
- * @borrows @glidejs/glide/src/utils/dom (source)
- */
-export function exists(node) {
-    if (node && node instanceof window.HTMLElement) {
-        return true;
-    }
-    return false;
-}
-export default exists;

package/forEach.mjs

@@ -1,13 +0,0 @@
-/**
- * For each, iterate through a NodeList of HTMLElements
- *
- * @param nodes DOM nodes collection
- * @param callback
- * @param scope
- */
-export function forEach(nodes, callback, scope) {
-    for (var i = 0; i < nodes.length; i++) {
-        callback.call(scope, nodes[i], i);
-    }
-}
-export default forEach;

package/getDataAttr.mjs

@@ -1,13 +0,0 @@
-// TODO: maybe move to `dataset` API but consider the comment about Safari here
-// https://stackoverflow.com/a/9201264/1938970
-/**
- * Get data attribute
- *
- * @param element
- * @param attribute The name of the `data-{attr}`
- */
-export function getDataAttr(element, attribute) {
-    // return element.dataset[attribute];
-    return element.getAttribute("data-" + attribute);
-}
-export default getDataAttr;

package/getDocumentHeight.mjs

@@ -1,10 +0,0 @@
-/**
- * Determine the document's height
- *
- * @see https://github.com/cferdinandi/smooth-scroll (credits)
- */
-export function getDocumentHeight() {
-    var body = document.body, documentElement = document.documentElement;
-    return Math.max(body.scrollHeight, documentElement.scrollHeight, body.offsetHeight, documentElement.offsetHeight, body.clientHeight, documentElement.clientHeight);
-}
-export default getDocumentHeight;

package/getHeight.mjs

@@ -1,7 +0,0 @@
-/**
- * Get element height
- */
-export function getHeight(element) {
-    return parseInt(window.getComputedStyle(element).height, 10);
-}
-export default getHeight;

package/getListeners.mjs

@@ -1,18 +0,0 @@
-import { activeEvents } from "./_listen-delegation";
-/**
- * Get an immutable copy of all active event listeners
- *
- * @category listen-delegation
- *
- * @return Active event listeners
- */
-export function getListeners() {
-    var obj = {};
-    for (var type in activeEvents) {
-        // if (activeEvents.hasOwnProperty(type)) {
-        obj[type] = activeEvents[type];
-        // }
-    }
-    return obj;
-}
-export default getListeners;

package/getOffset.mjs

@@ -1,18 +0,0 @@
-/**
- * Get an element's distance from the top and left of the Document.
- *
- * @param elem The HTML node element
- * @return Distance from the top and left in pixels
- */
-export function getOffset(elem) {
-    var left = 0;
-    var top = 0;
-    while (elem && !isNaN(elem.offsetLeft) && !isNaN(elem.offsetTop)) {
-        left += elem.offsetLeft - elem.scrollLeft;
-        top += elem.offsetTop - elem.scrollTop;
-        // @ts-expect-error nevermind?
-        elem = elem.offsetParent;
-    }
-    return { top: top, left: left };
-}
-export default getOffset;

package/getOffsetTop.mjs

@@ -1,20 +0,0 @@
-/**
- * Get an element's distance from the top of the Document.
- *
- * @see https://vanillajstoolkit.com/helpers/getoffsettop/
- *
- * @param elem The HTML node element
- * @return Distance from the top in pixels
- */
-export function getOffsetTop(elem) {
-    var location = 0;
-    if (elem.offsetParent) {
-        while (elem) {
-            location += elem.offsetTop;
-            // @ts-expect-error nevermind?
-            elem = elem.offsetParent;
-        }
-    }
-    return location >= 0 ? location : 0;
-}
-export default getOffsetTop;

package/getOffsetTopSlim.mjs

@@ -1,13 +0,0 @@
-/**
- * Get an element's distance from the top of the Document (using more modern/performant
- * technique compared to {@link ./getOffsetTop})
- *
- * @see https://stackoverflow.com/q/5598743/1938970
- *
- * @param elem The HTML node element
- * @return Distance from the top in pixels
- */
-export function getOffsetTopSlim(elem) {
-    return elem.getBoundingClientRect().top + window.scrollY;
-}
-export default getOffsetTopSlim;

package/getScrollbarWidth.mjs

@@ -1,7 +0,0 @@
-/**
- * Get scrollbar's current width
- */
-export function getScrollbarWidth(element) {
-    return window.innerWidth - (element || document.documentElement).clientWidth;
-}
-export default getScrollbarWidth;