@koine/dom 2.0.0-beta.72 → 2.0.0-beta.73

package/$.js

@@ -0,0 +1 @@
+export let $ = (selector, parent, avoidEscape) => (parent ? parent : document).querySelector(avoidEscape ? selector : selector.replace(/:/g, "\\:"));

package/$all.js

@@ -0,0 +1 @@
+export let $all = (selector, parent, avoidEscape) => (parent ? parent : document).querySelectorAll(avoidEscape ? selector : selector.replace(/:/g, "\\:"));

package/$each.js

@@ -0,0 +1,7 @@
+import { $all } from "./$all";
+export let $each = (selector, callback, parent, scope) => {
+    const nodes = $all(selector, parent);
+    for (let i = 0; i < nodes.length; i++) {
+        callback.call(scope, nodes[i], i);
+    }
+};

package/_listen-delegation.d.ts

@@ -1,10 +1 @@
-import type { AnyDOMEvent, AnyDOMEventTarget, AnyDOMEventType } from "./types";
-export type EventCallback<TTarget extends AnyDOMEventTarget = AnyDOMEventTarget, TType extends AnyDOMEventType = AnyDOMEventType> = (event: AnyDOMEvent<TType>, desiredTarget: TTarget) => any;
-export type ListenEvent = {
-    selector: string;
-    callback: EventCallback;
-};
-export declare let activeEvents: Partial<Record<AnyDOMEventType, ListenEvent[]>>;
-export declare let getIndex: (arr: ListenEvent[], selector: string, callback: EventCallback) => number;
-export declare let getRunTarget: (target: Element, selector: string | Window | Document | Element) => false | Window | Document | Element | null;
-export declare let eventHandler: (event: Event) => void;
+export {};

package/_listen-delegation.js

@@ -0,0 +1,45 @@
+import { isString } from "@koine/utils";
+import { escapeSelector } from "./escapeSelector";
+export let activeEvents = {};
+export let 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;
+};
+export let getRunTarget = (target, selector) => {
+    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));
+    }
+    if (typeof selector !== "string" && selector.contains) {
+        if (selector === target) {
+            return target;
+        }
+        if (selector.contains(target)) {
+            return selector;
+        }
+        return false;
+    }
+    return false;
+};
+export let eventHandler = (event) => {
+    activeEvents[event.type]?.forEach(function (listener) {
+        const target = getRunTarget(event.target, listener.selector);
+        if (!target) {
+            return;
+        }
+        listener.callback(event, target);
+    });
+};

package/addClass.js

@@ -0,0 +1,10 @@
+export let addClass = (el, className = "") => {
+    if (process.env["NODE_ENV"] === "development") {
+        if (!el) {
+            console.warn("[@koine/dom:addClass] unexisting DOM element");
+            return;
+        }
+    }
+    if (el)
+        el.classList.add(className);
+};

package/calculateFixedOffset.js

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

package/createElement.js

@@ -0,0 +1,8 @@
+import { addClass } from "./addClass";
+export let createElement = (type, className) => {
+    const el = document.createElement(type);
+    if (className) {
+        addClass(el, className);
+    }
+    return el;
+};

package/emitEvent.js

@@ -0,0 +1,8 @@
+export let emitEvent = (type = "customEvent", detail = {}) => {
+    if (typeof window.CustomEvent !== "function")
+        return;
+    document.dispatchEvent(new CustomEvent(type, {
+        bubbles: true,
+        detail,
+    }));
+};

package/escapeSelector.js

@@ -0,0 +1 @@
+export let escapeSelector = (selector) => selector.replace(/:/g, "\\:");

package/exists.js

@@ -0,0 +1 @@
+export let exists = (node) => node && node instanceof window.HTMLElement;

package/forEach.js

@@ -0,0 +1,5 @@
+export let forEach = (nodes, callback, scope) => {
+    for (let i = 0; i < nodes.length; i++) {
+        callback.call(scope, nodes[i], i);
+    }
+};

package/getDataAttr.js

@@ -0,0 +1 @@
+export let getDataAttr = (element, attribute) => element.getAttribute("data-" + attribute);

package/getDocumentHeight.js

@@ -0,0 +1,4 @@
+export let getDocumentHeight = () => {
+    const { body, documentElement } = document;
+    return Math.max(body.scrollHeight, documentElement.scrollHeight, body.offsetHeight, documentElement.offsetHeight, body.clientHeight, documentElement.clientHeight);
+};

package/getHeight.js

@@ -0,0 +1 @@
+export let getHeight = (element) => parseInt(window.getComputedStyle(element).height, 10);

package/getListeners.js

@@ -0,0 +1,8 @@
+import { activeEvents } from "./_listen-delegation";
+export let getListeners = () => {
+    const obj = {};
+    for (const type in activeEvents) {
+        obj[type] = activeEvents[type];
+    }
+    return obj;
+};

package/getOffset.js

@@ -0,0 +1,10 @@
+export let 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;
+        elem = elem.offsetParent;
+    }
+    return { top, left };
+};

package/getOffsetTop.js

@@ -0,0 +1,10 @@
+export let getOffsetTop = (elem) => {
+    let location = 0;
+    if (elem.offsetParent) {
+        while (elem) {
+            location += elem.offsetTop;
+            elem = elem.offsetParent;
+        }
+    }
+    return location >= 0 ? location : 0;
+};

package/getOffsetTopSlim.js

@@ -0,0 +1 @@
+export let getOffsetTopSlim = (elem) => elem.getBoundingClientRect().top + window.scrollY;

package/getScrollbarWidth.js

@@ -0,0 +1 @@
+export let getScrollbarWidth = (element) => window.innerWidth - (element || document.documentElement).clientWidth;

package/getStyleValue.js

@@ -0,0 +1 @@
+export let getStyleValue = (el, prop) => getComputedStyle(el, null).getPropertyValue(prop);

package/getVisualBackgroundColor.js

@@ -0,0 +1,15 @@
+export let getVisualBackgroundColor = (elem) => {
+    if (!elem)
+        return "#fff";
+    const transparent = "rgba(0, 0, 0, 0)";
+    const transparentIE11 = "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;
+};

package/index.js

@@ -0,0 +1,45 @@
+export { $ } from "./$";
+export { $all } from "./$all";
+export { $each } from "./$each";
+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/injectCss.js

@@ -0,0 +1,10 @@
+import { $ } from "./$";
+export let injectCss = (id, cssString = "", root = document) => {
+    let styleblock = $("#" + id);
+    if (!styleblock) {
+        styleblock = root.createElement("style");
+        styleblock.id = id;
+        root.body.appendChild(styleblock);
+    }
+    styleblock.innerHTML = cssString;
+};

package/isHidden.js

@@ -0,0 +1 @@
+export let isHidden = (el) => !el || el.offsetParent === null;

package/isInViewport.js

@@ -0,0 +1,9 @@
+export let 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));
+};

package/isNodeList.js

@@ -0,0 +1,8 @@
+export let 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)));
+};

package/isTotallyScrolled.js

@@ -0,0 +1 @@
+export let isTotallyScrolled = (el) => el ? el.scrollHeight - el.scrollTop <= el.clientHeight : false;

package/listen.js

@@ -0,0 +1,17 @@
+import { activeEvents, eventHandler, } from "./_listen-delegation";
+import { on } from "./on";
+export let listen = (types, selector, callback) => {
+    if (!selector || !callback)
+        return;
+    types.split(",").forEach(function (type) {
+        type = type.trim();
+        if (!activeEvents[type]) {
+            activeEvents[type] = [];
+            on(window, type, eventHandler, true);
+        }
+        activeEvents[type]?.push({
+            selector: selector,
+            callback: callback,
+        });
+    });
+};

package/listenLoaded.js

@@ -0,0 +1,2 @@
+import { on } from "./on";
+export let listenLoaded = (handler) => on(document, "DOMContentLoaded", handler);

package/listenOnce.js

@@ -0,0 +1,8 @@
+import { getRunTarget } from "./_listen-delegation";
+import { listen } from "./listen";
+import { unlisten } from "./unlisten";
+export let listenOnce = (types, selector, callback) => listen(types, selector, function temp(event) {
+    const target = getRunTarget(event.target, selector);
+    callback(event, target || window);
+    unlisten(types, selector, temp);
+});

package/listenResize.js

@@ -0,0 +1,2 @@
+import { on } from "./on";
+export let listenResize = (handler, el) => on(el || window, "resize", handler);

package/listenResizeDebounced.js

@@ -0,0 +1,3 @@
+import { debounce } from "@koine/utils";
+import { listenResize } from "./listenResize";
+export let listenResizeDebounced = (el, ...args) => listenResize(debounce(...args), el);

package/listenResizeThrottled.js

@@ -0,0 +1,3 @@
+import { throttle } from "@koine/utils";
+import { listenResize } from "./listenResize";
+export let listenResizeThrottled = (el, ...args) => listenResize(throttle(...args), el);

package/listenScroll.js

@@ -0,0 +1,5 @@
+import { on } from "./on";
+export let listenScroll = (handler, el) => on(el || window, "scroll", handler, {
+    capture: true,
+    passive: true,
+});

package/listenScrollDebounced.js

@@ -0,0 +1,3 @@
+import { debounce } from "@koine/utils";
+import { listenScroll } from "./listenScroll";
+export let listenScrollDebounced = (el, ...args) => listenScroll(debounce(...args), el);

package/listenScrollThrottled.js

@@ -0,0 +1,3 @@
+import { throttle } from "@koine/utils";
+import { listenScroll } from "./listenScroll";
+export let listenScrollThrottled = (el, ...args) => listenScroll(throttle(...args), el);

package/off.js

@@ -0,0 +1,9 @@
+export let off = (el, type, handler, options = false) => {
+    if (process.env["NODE_ENV"] === "development") {
+        if (!el) {
+            console.warn("[@koine/dom:off] unexisting DOM element");
+        }
+    }
+    if (el)
+        el.removeEventListener(type, handler, options);
+};

package/on.js

@@ -0,0 +1,14 @@
+import { noop } from "@koine/utils";
+import { off } from "./off";
+export let on = (el, type, handler, options = false) => {
+    if (process.env["NODE_ENV"] === "development") {
+        if (!el) {
+            console.warn("[@koine/dom:on] unexisting DOM element");
+        }
+    }
+    if (el) {
+        el.addEventListener(type, handler, options);
+        return () => off(el, type, handler);
+    }
+    return noop;
+};

package/onClickOutside.js

@@ -0,0 +1,16 @@
+import { off } from "./off";
+import { on } from "./on";
+export let onClickOutside = (element, callback, autoUnbind = false) => {
+    const bind = (event) => {
+        if (!element.contains(event.target)) {
+            callback(event);
+            if (autoUnbind)
+                unbind();
+        }
+    };
+    const unbind = () => {
+        off(document, "click", bind);
+    };
+    on(document, "click", bind);
+    return unbind;
+};

package/once.js

@@ -0,0 +1,9 @@
+import { off } from "./off";
+import { on } from "./on";
+export let once = (el, type, handler, options = false) => {
+    const handlerWrapper = (event) => {
+        handler(event);
+        off(el, type, handlerWrapper);
+    };
+    return on(el, type, handlerWrapper, options);
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@koine/dom",
   "sideEffects": false,
   "dependencies": {
-    "@koine/utils": "2.0.0-beta.72"
+    "@koine/utils": "2.0.0-beta.73"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -14,5 +14,5 @@
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
-  "version": "2.0.0-beta.72"
+  "version": "2.0.0-beta.73"
 }

package/removeClass.js

@@ -0,0 +1,10 @@
+export let removeClass = (el, className = "") => {
+    if (process.env["NODE_ENV"] === "development") {
+        if (!el) {
+            ("[@koine/dom:removeClass] unexisting DOM element");
+            return;
+        }
+    }
+    if (el)
+        el.classList.remove(className);
+};

package/scrollTo.js

@@ -0,0 +1,29 @@
+import { off } from "./off";
+import { on } from "./on";
+export let scrollTo = (destination, callback, fallbackTimeout, behavior) => {
+    const fixedDestination = destination.toFixed();
+    if (callback) {
+        let callbackFired = false;
+        const onScroll = function () {
+            if (window.pageYOffset.toFixed() === fixedDestination) {
+                off(window, "scroll", onScroll);
+                callbackFired = true;
+                callback();
+            }
+        };
+        on(window, "scroll", onScroll);
+        onScroll();
+        if (fallbackTimeout) {
+            setTimeout(() => {
+                if (!callbackFired) {
+                    off(window, "scroll", onScroll);
+                    callback();
+                }
+            }, fallbackTimeout);
+        }
+    }
+    window.scrollTo({
+        top: destination,
+        behavior: behavior || "smooth",
+    });
+};

package/setDataAttr.js

@@ -0,0 +1,7 @@
+export let setDataAttr = (element, attribute, value) => {
+    if (value === null || typeof value === "undefined") {
+        element.removeAttribute("data-" + attribute);
+        return;
+    }
+    element.setAttribute("data-" + attribute, value.toString());
+};

package/setVendorCSS.js

@@ -0,0 +1,8 @@
+export let setVendorCSS = (element, prop, value) => {
+    const propUpper = prop.charAt(0).toUpperCase() + prop.slice(1);
+    element.style["webkit" + propUpper] = value;
+    element.style["moz" + propUpper] = value;
+    element.style["ms" + propUpper] = value;
+    element.style["o" + propUpper] = value;
+    element.style[prop] = value;
+};

package/siblings.js

@@ -0,0 +1,13 @@
+export let siblings = (node) => {
+    if (node && node.parentNode) {
+        let n = node.parentNode.firstChild;
+        const matched = [];
+        for (; n; n = n.nextSibling) {
+            if (n.nodeType === 1 && n !== node) {
+                matched.push(n);
+            }
+        }
+        return matched;
+    }
+    return [];
+};

package/toArray.js

@@ -0,0 +1 @@
+export let toArray = (nodeList) => Array.prototype.slice.call(nodeList);

package/types.js

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

package/unlisten.js

@@ -0,0 +1,19 @@
+import { activeEvents, eventHandler, getIndex, } from "./_listen-delegation";
+import { off } from "./off";
+export let unlisten = (types, selector, callback) => {
+    types.split(",").forEach((type) => {
+        type = type.trim();
+        const events = activeEvents[type];
+        if (!events)
+            return;
+        if (events.length < 2 || !selector) {
+            delete activeEvents[type];
+            off(window, type, eventHandler, true);
+            return;
+        }
+        const index = getIndex(events, selector, callback);
+        if (index < 0)
+            return;
+        activeEvents[type].splice(index, 1);
+    });
+};