@koine/dom 2.0.0-beta.14 → 2.0.0-beta.15

package/siblings.js

@@ -0,0 +1,14 @@
+export function siblings(node) {
+    if (node && node.parentNode) {
+        var n = node.parentNode.firstChild;
+        var matched = [];
+        for (; n; n = n.nextSibling) {
+            if (n.nodeType === 1 && n !== node) {
+                matched.push(n);
+            }
+        }
+        return matched;
+    }
+    return [];
+}
+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

@@ -0,0 +1,4 @@
+export function toArray(nodeList) {
+    return Array.prototype.slice.call(nodeList);
+}
+export default toArray;

package/types.d.ts

@@ -1,10 +1,6 @@
 import { LiteralUnion } from "type-fest";
 import type { AnythingFalsy } from "@koine/utils/types";
 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>;

package/types.js

@@ -0,0 +1 @@
+export {};

package/unlisten.d.ts

@@ -1,13 +1,4 @@
-import { type EventCallback } from "./_listen-delegation";
-import type { AnyDOMEventTarget, AnyDOMEventType } from "./types";
-/**
- * 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
- */
+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

@@ -0,0 +1,19 @@
+import { activeEvents, eventHandler, getIndex, } from "./_listen-delegation.js";
+import { off } from "./off.js";
+export function unlisten(types, selector, callback) {
+    types.split(",").forEach(function (type) {
+        type = type.trim();
+        if (!activeEvents[type])
+            return;
+        if (activeEvents[type].length < 2 || !selector) {
+            delete activeEvents[type];
+            off(window, type, eventHandler, true);
+            return;
+        }
+        var index = getIndex(activeEvents[type], selector, callback);
+        if (index < 0)
+            return;
+        activeEvents[type].splice(index, 1);
+    });
+}
+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?: Element | HTMLElement | Document | null, avoidEscape?: boolean): NodeListOf<T>;
-export default $$;

package/$$.mjs

@@ -1,11 +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,14 +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,16 +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) {
-    const nodes = $$(selector, parent);
-    for(let 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,77 +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 const activeEvents = {};
-/**
- * Get the index for the listener
- *
- * @internal
- */ export function getIndex(arr, selector, callback) {
-    for(let 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
-    ].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) {
-        const target = getRunTarget(event.target, listener.selector);
-        if (!target) {
-            return;
-        }
-        listener.callback(event, target);
-    });
-}

package/calculateFixedOffset.mjs

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

package/createElement.mjs

@@ -1,15 +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) {
-    const el = document.createElement(type);
-    if (className) {
-        addClass(el, className);
-    }
-    return el;
-}
-export default createElement;

package/emitEvent.mjs

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

package/escapeSelector.mjs

@@ -1,9 +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,11 +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,34 +0,0 @@
-/**
- * For each, iterate through a `NodeList` or an `array` of `HTMLElement`s
- *
- * @param scope The optional `this` of the callback function
- */ export function forEach(nodes, callback, scope) {
-    for(let i = 0; i < nodes.length; i++){
-        callback.call(scope, nodes[i], i);
-    }
-}
-export default forEach; // /**
- //  * For each, iterate through a `NodeList` or an `array` of `HTMLElement`s
- //  *
- //  * @param scope The optional `this` of the callback function
- //  */
- // export function forEach<TScope = object>(
- //   nodes: HTMLElement[],
- //   callback: (this: TScope, $element: HTMLElement, index: number) => any,
- //   scope?: TScope
- // ): void;
- // export function forEach<TScope = object>(
- //   nodes: NodeListOf<HTMLElement> | HTMLElement[],
- //   callback: (this: TScope, $element: HTMLElement, index: number) => any,
- //   scope?: TScope
- // ): void;
- // export function forEach<T extends Element, TScope = object>(
- //   nodes: NodeListOf<T> | HTMLElement[],
- //   callback: (this: TScope, $element: T, index: number) => any,
- //   scope?: TScope
- // ) {
- //   for (let i = 0; i < nodes.length; i++) {
- //     callback.call(scope as TScope, nodes[i] as T, i);
- //   }
- // }
- // export default forEach;

package/getDataAttr.mjs

@@ -1,12 +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/getListeners.mjs

@@ -1,17 +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() {
-    const obj = {};
-    for(const type in activeEvents){
-        // if (activeEvents.hasOwnProperty(type)) {
-        obj[type] = activeEvents[type];
-    // }
-    }
-    return obj;
-}
-export default getListeners;

package/getOffset.mjs

@@ -1,20 +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) {
-    let left = 0;
-    let 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,
-        left
-    };
-}
-export default getOffset;

package/getOffsetTop.mjs

@@ -1,19 +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) {
-    let 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,12 +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/getStyleValue.mjs

@@ -1,9 +0,0 @@
-/**
- * Return the current style value for an element CSS property
- *
- * @param el The element to compute
- * @param prop The style property
- */ export function getStyleValue(el, prop) {
-    return getComputedStyle(el, null).getPropertyValue(prop);
-}
-export default getStyleValue;

package/getVisualBackgroundColor.mjs

@@ -1,19 +0,0 @@
-/**
- * Get the background color of an element eventually looking recursively into
- * its parents, if nothing is found it returns a `#fff` background
- */ export function getVisualBackgroundColor(elem) {
-    if (!elem) return "#fff";
-    const transparent = "rgba(0, 0, 0, 0)";
-    const transparentIE11 = "transparent";
-    // if (!elem) return transparent;
-    const bg = window.getComputedStyle(elem).backgroundColor;
-    if (bg === transparent || bg === transparentIE11) {
-        const parent = elem.parentElement;
-        if (parent) {
-            return getVisualBackgroundColor(parent);
-        }
-        return "#fff";
-    }
-    return bg;
-}
-export default getVisualBackgroundColor;

package/index.mjs

@@ -1,45 +0,0 @@
-export { $$ } from "./$$";
-export { $each } from "./$each";
-export { $ } from "./$";
-export { addClass } from "./addClass";
-export { calculateFixedOffset } from "./calculateFixedOffset";
-export { createElement } from "./createElement";
-export { emitEvent } from "./emitEvent";
-export { escapeSelector } from "./escapeSelector";
-export { exists } from "./exists";
-export { forEach } from "./forEach";
-export { getDataAttr } from "./getDataAttr";
-export { getDocumentHeight } from "./getDocumentHeight";
-export { getHeight } from "./getHeight";
-export { getListeners } from "./getListeners";
-export { getOffset } from "./getOffset";
-export { getOffsetTop } from "./getOffsetTop";
-export { getOffsetTopSlim } from "./getOffsetTopSlim";
-export { getScrollbarWidth } from "./getScrollbarWidth";
-export { getStyleValue } from "./getStyleValue";
-export { getVisualBackgroundColor } from "./getVisualBackgroundColor";
-export { injectCss } from "./injectCss";
-export { isHidden } from "./isHidden";
-export { isInViewport } from "./isInViewport";
-export { isNodeList } from "./isNodeList";
-export { isTotallyScrolled } from "./isTotallyScrolled";
-export { listenLoaded } from "./listenLoaded";
-export { listenOnce } from "./listenOnce";
-export { listenResize } from "./listenResize";
-export { listenResizeDebounced } from "./listenResizeDebounced";
-export { listenResizeThrottled } from "./listenResizeThrottled";
-export { listenScroll } from "./listenScroll";
-export { listenScrollDebounced } from "./listenScrollDebounced";
-export { listenScrollThrottled } from "./listenScrollThrottled";
-export { listen } from "./listen";
-export { off } from "./off";
-export { once } from "./once";
-export { onClickOutside } from "./onClickOutside";
-export { on } from "./on";
-export { removeClass } from "./removeClass";
-export { scrollTo } from "./scrollTo";
-export { setDataAttr } from "./setDataAttr";
-export { setVendorCSS } from "./setVendorCSS";
-export { siblings } from "./siblings";
-export { toArray } from "./toArray";
-export { unlisten } from "./unlisten";

package/isInViewport.mjs

@@ -1,12 +0,0 @@
-/**
- * Determine if an element is in the viewport
- *
- * @borrows (c) 2017 Chris Ferdinandi, MIT License, https://gomakethings.com
- *
- * @param elem The element
- * @return Returns true if element is in the viewport
- */ export function isInViewport(elem) {
-    const distance = elem.getBoundingClientRect();
-    return distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth);
-}
-export default isInViewport;

package/isNodeList.mjs

@@ -1,9 +0,0 @@
-/**
- * Is node list
- *
- * @param nodes The object to check
- */ export function isNodeList(nodes) {
-    const stringRepr = Object.prototype.toString.call(nodes);
-    return typeof nodes === "object" && /^\[object (HTMLCollection|NodeList|Object)\]$/.test(stringRepr) && typeof nodes.length === "number" && (nodes.length === 0 || typeof nodes[0] === "object" && nodes[0].nodeType > 0);
-}
-export default isNodeList;

package/isTotallyScrolled.mjs

@@ -1,9 +0,0 @@
-/**
- * Is element totally scrolled
- *
- * @see https://github.com/willmcpo/body-scroll-lock/blob/master/src/bodyScrollLock.js#L116
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
- */ export function isTotallyScrolled(el) {
-    return el ? el.scrollHeight - el.scrollTop <= el.clientHeight : false;
-}
-export default isTotallyScrolled;

package/listen.mjs

@@ -1,36 +0,0 @@
-import { activeEvents, eventHandler } from "./_listen-delegation";
-import { on } from "./on";
-// import { off } from "./off";
-/**
- * Listen an event
- *
- * @category listen-delegation
- *
- * @param types The event type or types (comma separated)
- * @param selector The selector to run the event on
- * @param callback The function to run when the event fires
- */ export function listen(types, // | `${TTypes},${TTypes}`
-// | `${TTypes},${TTypes},${TTypes}`
-// | `${TTypes},${TTypes},${TTypes},${TTypes}`
-// | `${TTypes},${TTypes},${TTypes},${TTypes},${TTypes}`,
-selector, callback) {
-    // Make sure there's a selector and callback
-    if (!selector || !callback) return;
-    // Loop through each event type
-    types.split(",").forEach(function(type) {
-        // Remove whitespace
-        type = type.trim();
-        // If no event of this type yet, setup
-        if (!activeEvents[type]) {
-            activeEvents[type] = [];
-            on(window, type, eventHandler, true);
-        }
-        // Push to active events
-        activeEvents[type]?.push({
-            selector: selector,
-            // @ts-expect-error FIXME: type...
-            callback: callback
-        });
-    });
-}
-export default listen;

package/listenLoaded.mjs

@@ -1,10 +0,0 @@
-import { on } from "./on";
-/**
- * Fires a callback when the DOM content is loaded
- *
- * @see https://mathiasbynens.be/notes/settimeout-onload
- */ export function listenLoaded(handler) {
-    on(document, "DOMContentLoaded", handler);
-// document.addEventListener("DOMContentLoaded", setTimeout(handler, 4));
-}
-export default listenLoaded;

package/listenOnce.mjs

@@ -1,19 +0,0 @@
-import { getRunTarget } from "./_listen-delegation";
-import { listen } from "./listen";
-import { unlisten } from "./unlisten";
-/**
- * Listen an event, and automatically unlisten it after it's first run
- *
- * @category listen-delegation
- *
- * @param types The event type or types (comma separated)
- * @param selector The selector to run the event on
- * @param callback The function to run when the event fires
- */ export function listenOnce(types, selector, callback) {
-    listen(types, selector, function temp(event) {
-        const target = getRunTarget(event.target, selector);
-        callback(event, target || window);
-        unlisten(types, selector, temp);
-    });
-}
-export default listenOnce;

package/listenResize.mjs

@@ -1,7 +0,0 @@
-import { on } from "./on";
-/**
- * Listen element's (`window` by default) _scroll_ event
- *
- * @returns An automatic unbinding function to run to deregister the listener upon call
- */ export const listenResize = (handler, el)=>on(el || window, "resize", handler);
-export default listenResize;

package/listenResizeDebounced.mjs

@@ -1,34 +0,0 @@
-import debounce from "@koine/utils/debounce";
-import listenResize from "./listenResize";
-/**
- * Listen element's (`window` by default) _resize_ event debouncing the callback
- *
- * @returns An automatic unbinding function to run to deregister the listener upon call
- */ export const listenResizeDebounced = (el, ...args)=>listenResize(debounce(...args), el);
-export default listenResizeDebounced; // EXP: with too complex overload signature...
- // import debounce from "@koine/utils/debounce";
- // import isUndefined from "@koine/utils/isUndefined";
- // import listenResize from "./listenResize";
- // /**
- //  * Listen element's (`window` by default) _resize_ event debouncing the callback
- //  *
- //  * @returns An automatic unbinding function to run to deregister the listener upon call
- //  */
- // export function listenResizeDebounced(
- //   ...args: Parameters<typeof debounce>
- // ): ReturnType<typeof listenResize>;
- // export function listenResizeDebounced(
- //   el: Parameters<typeof listenResize>[1],
- //   ...args: Parameters<typeof debounce>
- // ): ReturnType<typeof listenResize>;
- // export function listenResizeDebounced(
- //   ...args:
- //     | [Parameters<typeof listenResize>[1], ...Parameters<typeof debounce>]
- //     | Parameters<typeof debounce>
- // ) {
- //   if (isUndefined(args[0])) {
- //     return listenResize(debounce(...args));
- //   }
- //   return listenResize(debounce(...args.slice(1)), args[0]);
- // }
- // export default listenResizeDebounced;

package/listenResizeThrottled.mjs

@@ -1,8 +0,0 @@
-import throttle from "@koine/utils/throttle";
-import { listenResize } from "./listenResize";
-/**
- * Listen element's (`window` by default) _resize_ event throttling the callback
- *
- * @returns An automatic unbinding function to run to deregister the listener upon call
- */ export const listenResizeThrottled = (el, ...args)=>listenResize(throttle(...args), el);
-export default listenResizeThrottled;

package/listenScroll.mjs

@@ -1,10 +0,0 @@
-import { on } from "./on";
-/**
- * Listen element's (`window` by default) _scroll_ event
- *
- * @returns An automatic unbinding function to run to deregister the listener upon call
- */ export const listenScroll = (handler, el)=>on(el || window, "scroll", handler, {
-        capture: true,
-        passive: true
-    });
-export default listenScroll;