@frankenstyle/uikit 0.0.1

package/src/js/util/dimensions.js

@@ -0,0 +1,220 @@
+import { $, append, remove } from './dom';
+import { on } from './event';
+import {
+    isDocument,
+    isElement,
+    isString,
+    isUndefined,
+    isWindow,
+    memoize,
+    sumBy,
+    toFloat,
+    toNode,
+    toWindow,
+    ucfirst,
+} from './lang';
+import { css } from './style';
+
+const dirs = {
+    width: ['left', 'right'],
+    height: ['top', 'bottom'],
+};
+
+export function dimensions(element) {
+    const rect = isElement(element)
+        ? toNode(element).getBoundingClientRect()
+        : { height: height(element), width: width(element), top: 0, left: 0 };
+
+    return {
+        height: rect.height,
+        width: rect.width,
+        top: rect.top,
+        left: rect.left,
+        bottom: rect.top + rect.height,
+        right: rect.left + rect.width,
+    };
+}
+
+export function offset(element, coordinates) {
+    if (coordinates) {
+        css(element, { left: 0, top: 0 });
+    }
+
+    const currentOffset = dimensions(element);
+
+    if (element) {
+        const { scrollY, scrollX } = toWindow(element);
+        const offsetBy = { height: scrollY, width: scrollX };
+
+        for (const dir in dirs) {
+            for (const prop of dirs[dir]) {
+                currentOffset[prop] += offsetBy[dir];
+            }
+        }
+    }
+
+    if (!coordinates) {
+        return currentOffset;
+    }
+
+    for (const prop of ['left', 'top']) {
+        css(element, prop, coordinates[prop] - currentOffset[prop]);
+    }
+}
+
+export function position(element) {
+    let { top, left } = offset(element);
+
+    const {
+        ownerDocument: { body, documentElement },
+        offsetParent,
+    } = toNode(element);
+    let parent = offsetParent || documentElement;
+
+    while (
+        parent &&
+        (parent === body || parent === documentElement) &&
+        css(parent, 'position') === 'static'
+    ) {
+        parent = parent.parentNode;
+    }
+
+    if (isElement(parent)) {
+        const parentOffset = offset(parent);
+        top -= parentOffset.top + toFloat(css(parent, 'borderTopWidth'));
+        left -= parentOffset.left + toFloat(css(parent, 'borderLeftWidth'));
+    }
+
+    return {
+        top: top - toFloat(css(element, 'marginTop')),
+        left: left - toFloat(css(element, 'marginLeft')),
+    };
+}
+
+export function offsetPosition(element) {
+    element = toNode(element);
+
+    const offset = [element.offsetTop, element.offsetLeft];
+
+    while ((element = element.offsetParent)) {
+        offset[0] += element.offsetTop + toFloat(css(element, 'borderTopWidth'));
+        offset[1] += element.offsetLeft + toFloat(css(element, 'borderLeftWidth'));
+
+        if (css(element, 'position') === 'fixed') {
+            const win = toWindow(element);
+            offset[0] += win.scrollY;
+            offset[1] += win.scrollX;
+            return offset;
+        }
+    }
+
+    return offset;
+}
+
+export const height = dimension('height');
+export const width = dimension('width');
+
+function dimension(prop) {
+    const propName = ucfirst(prop);
+    return (element, value) => {
+        if (isUndefined(value)) {
+            if (isWindow(element)) {
+                return element[`inner${propName}`];
+            }
+
+            if (isDocument(element)) {
+                const doc = element.documentElement;
+                return Math.max(doc[`offset${propName}`], doc[`scroll${propName}`]);
+            }
+
+            element = toNode(element);
+
+            value = css(element, prop);
+            value = value === 'auto' ? element[`offset${propName}`] : toFloat(value) || 0;
+
+            return value - boxModelAdjust(element, prop);
+        } else {
+            return css(
+                element,
+                prop,
+                !value && value !== 0 ? '' : +value + boxModelAdjust(element, prop) + 'px',
+            );
+        }
+    };
+}
+
+export function boxModelAdjust(element, prop, sizing = 'border-box') {
+    return css(element, 'boxSizing') === sizing
+        ? sumBy(
+              dirs[prop],
+              (prop) =>
+                  toFloat(css(element, `padding-${prop}`)) +
+                  toFloat(css(element, `border-${prop}-width`)),
+          )
+        : 0;
+}
+
+export function flipPosition(pos) {
+    for (const dir in dirs) {
+        for (const i in dirs[dir]) {
+            if (dirs[dir][i] === pos) {
+                return dirs[dir][1 - i];
+            }
+        }
+    }
+    return pos;
+}
+
+export function toPx(value, property = 'width', element = window, offsetDim = false) {
+    if (!isString(value)) {
+        return toFloat(value);
+    }
+
+    return sumBy(parseCalc(value), (value) => {
+        const unit = parseUnit(value);
+
+        return unit
+            ? percent(
+                  unit === 'vh'
+                      ? getViewportHeight()
+                      : unit === 'vw'
+                        ? width(toWindow(element))
+                        : offsetDim
+                          ? element[`offset${ucfirst(property)}`]
+                          : dimensions(element)[property],
+                  value,
+              )
+            : value;
+    });
+}
+
+const calcRe = /-?\d+(?:\.\d+)?(?:v[wh]|%|px)?/g;
+const parseCalc = memoize((calc) => calc.toString().replace(/\s/g, '').match(calcRe) || []);
+const unitRe = /(?:v[hw]|%)$/;
+const parseUnit = memoize((str) => (str.match(unitRe) || [])[0]);
+
+function percent(base, value) {
+    return (base * toFloat(value)) / 100;
+}
+
+let vh;
+let vhEl;
+
+function getViewportHeight() {
+    if (vh) {
+        return vh;
+    }
+    if (!vhEl) {
+        vhEl = $('<div>');
+        css(vhEl, {
+            height: '100vh',
+            position: 'fixed',
+        });
+        on(window, 'resize', () => (vh = null));
+    }
+
+    append(document.body, vhEl);
+    vh = vhEl.clientHeight;
+    remove(vhEl);
+    return vh;
+}

package/src/js/util/dom.js

@@ -0,0 +1,118 @@
+import { once } from './event';
+import { parent } from './filter';
+import { isElement, isString, isUndefined, startsWith, toArray, toNode, toNodes } from './lang';
+import { find, findAll } from './selector';
+
+export function ready(fn) {
+    if (document.readyState !== 'loading') {
+        fn();
+        return;
+    }
+
+    once(document, 'DOMContentLoaded', fn);
+}
+
+export function isTag(element, ...tagNames) {
+    return tagNames.some((tagName) => element?.tagName?.toLowerCase() === tagName.toLowerCase());
+}
+
+export function empty(element) {
+    element = $(element);
+    if (element) {
+        element.innerHTML = '';
+    }
+    return element;
+}
+
+export function html(parent, html) {
+    return isUndefined(html) ? $(parent).innerHTML : append(empty(parent), html);
+}
+
+export const prepend = applyFn('prepend');
+export const append = applyFn('append');
+export const before = applyFn('before');
+export const after = applyFn('after');
+
+function applyFn(fn) {
+    return function (ref, element) {
+        const nodes = toNodes(isString(element) ? fragment(element) : element);
+        $(ref)?.[fn](...nodes);
+        return unwrapSingle(nodes);
+    };
+}
+
+export function remove(element) {
+    toNodes(element).forEach((element) => element.remove());
+}
+
+export function wrapAll(element, structure) {
+    structure = toNode(before(element, structure));
+
+    while (structure.firstElementChild) {
+        structure = structure.firstElementChild;
+    }
+
+    append(structure, element);
+
+    return structure;
+}
+
+export function wrapInner(element, structure) {
+    return toNodes(
+        toNodes(element).map((element) =>
+            element.hasChildNodes()
+                ? wrapAll(toArray(element.childNodes), structure)
+                : append(element, structure),
+        ),
+    );
+}
+
+export function unwrap(element) {
+    toNodes(element)
+        .map(parent)
+        .filter((value, index, self) => self.indexOf(value) === index)
+        .forEach((parent) => parent.replaceWith(...parent.childNodes));
+}
+
+const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
+
+export function fragment(html) {
+    const matches = singleTagRe.exec(html);
+    if (matches) {
+        return document.createElement(matches[1]);
+    }
+
+    const container = document.createElement('template');
+    container.innerHTML = html.trim();
+
+    return unwrapSingle(container.content.childNodes);
+}
+
+function unwrapSingle(nodes) {
+    return nodes.length > 1 ? nodes : nodes[0];
+}
+
+export function apply(node, fn) {
+    if (!isElement(node)) {
+        return;
+    }
+
+    fn(node);
+    node = node.firstElementChild;
+    while (node) {
+        apply(node, fn);
+        node = node.nextElementSibling;
+    }
+}
+
+export function $(selector, context) {
+    return isHtml(selector) ? toNode(fragment(selector)) : find(selector, context);
+}
+
+export function $$(selector, context) {
+    return isHtml(selector) ? toNodes(fragment(selector)) : findAll(selector, context);
+}
+
+function isHtml(str) {
+    return isString(str) && startsWith(str.trim(), '<');
+}

package/src/js/util/env.js

@@ -0,0 +1,12 @@
+export const inBrowser = typeof window !== 'undefined';
+export const isRtl = inBrowser && document.dir === 'rtl';
+
+export const hasTouch = inBrowser && 'ontouchstart' in window;
+const hasPointerEvents = inBrowser && window.PointerEvent;
+
+export const pointerDown = hasPointerEvents ? 'pointerdown' : hasTouch ? 'touchstart' : 'mousedown';
+export const pointerMove = hasPointerEvents ? 'pointermove' : hasTouch ? 'touchmove' : 'mousemove';
+export const pointerUp = hasPointerEvents ? 'pointerup' : hasTouch ? 'touchend' : 'mouseup';
+export const pointerEnter = hasPointerEvents ? 'pointerenter' : hasTouch ? '' : 'mouseenter';
+export const pointerLeave = hasPointerEvents ? 'pointerleave' : hasTouch ? '' : 'mouseleave';
+export const pointerCancel = hasPointerEvents ? 'pointercancel' : 'touchcancel';

package/src/js/util/event.js

@@ -0,0 +1,142 @@
+import { isArray, isFunction, isString, toNode, toNodes } from './lang';
+import { findAll } from './selector';
+
+export function on(...args) {
+    let [targets, types, selector, listener, useCapture = false] = getArgs(args);
+
+    if (listener.length > 1) {
+        listener = detail(listener);
+    }
+
+    if (useCapture?.self) {
+        listener = selfFilter(listener);
+    }
+
+    if (selector) {
+        listener = delegate(selector, listener);
+    }
+
+    for (const type of types) {
+        for (const target of targets) {
+            target.addEventListener(type, listener, useCapture);
+        }
+    }
+
+    return () => off(targets, types, listener, useCapture);
+}
+
+export function off(...args) {
+    let [targets, types, , listener, useCapture = false] = getArgs(args);
+    for (const type of types) {
+        for (const target of targets) {
+            target.removeEventListener(type, listener, useCapture);
+        }
+    }
+}
+
+export function once(...args) {
+    const [element, types, selector, listener, useCapture = false, condition] = getArgs(args);
+    const off = on(
+        element,
+        types,
+        selector,
+        (e) => {
+            const result = !condition || condition(e);
+            if (result) {
+                off();
+                listener(e, result);
+            }
+        },
+        useCapture,
+    );
+
+    return off;
+}
+
+export function trigger(targets, event, detail) {
+    return toEventTargets(targets).every((target) =>
+        target.dispatchEvent(createEvent(event, true, true, detail)),
+    );
+}
+
+export function createEvent(e, bubbles = true, cancelable = false, detail) {
+    if (isString(e)) {
+        e = new CustomEvent(e, { bubbles, cancelable, detail });
+    }
+
+    return e;
+}
+
+function getArgs(args) {
+    // Event targets
+    args[0] = toEventTargets(args[0]);
+
+    // Event types
+    if (isString(args[1])) {
+        args[1] = args[1].split(' ');
+    }
+
+    // Delegate?
+    if (isFunction(args[2])) {
+        args.splice(2, 0, false);
+    }
+
+    return args;
+}
+
+function delegate(selector, listener) {
+    return (e) => {
+        const current =
+            selector[0] === '>'
+                ? findAll(selector, e.currentTarget)
+                      .reverse()
+                      .find((element) => element.contains(e.target))
+                : e.target.closest(selector);
+
+        if (current) {
+            e.current = current;
+            listener.call(this, e);
+            delete e.current;
+        }
+    };
+}
+
+function detail(listener) {
+    return (e) => (isArray(e.detail) ? listener(e, ...e.detail) : listener(e));
+}
+
+function selfFilter(listener) {
+    return function (e) {
+        if (e.target === e.currentTarget || e.target === e.current) {
+            return listener.call(null, e);
+        }
+    };
+}
+
+function isEventTarget(target) {
+    return target && 'addEventListener' in target;
+}
+
+function toEventTarget(target) {
+    return isEventTarget(target) ? target : toNode(target);
+}
+
+export function toEventTargets(target) {
+    return isArray(target)
+        ? target.map(toEventTarget).filter(Boolean)
+        : isString(target)
+          ? findAll(target)
+          : isEventTarget(target)
+            ? [target]
+            : toNodes(target);
+}
+
+export function isTouch(e) {
+    return e.pointerType === 'touch' || !!e.touches;
+}
+
+export function getEventPos(e) {
+    const { clientX: x, clientY: y } = e.touches?.[0] || e.changedTouches?.[0] || e;
+
+    return { x, y };
+}

package/src/js/util/fastdom.js

@@ -0,0 +1,62 @@
+/*
+    Based on:
+    Copyright (c) 2016 Wilson Page wilsonpage@me.com
+    https://github.com/wilsonpage/fastdom
+*/
+
+export const fastdom = { read, write, clear, flush };
+
+const reads = [];
+const writes = [];
+
+function read(task) {
+    reads.push(task);
+    scheduleFlush();
+    return task;
+}
+
+function write(task) {
+    writes.push(task);
+    scheduleFlush();
+    return task;
+}
+
+function clear(task) {
+    remove(reads, task);
+    remove(writes, task);
+}
+
+let scheduled = false;
+function flush() {
+    runTasks(reads);
+    runTasks(writes.splice(0));
+
+    scheduled = false;
+
+    if (reads.length || writes.length) {
+        scheduleFlush();
+    }
+}
+
+function scheduleFlush() {
+    if (!scheduled) {
+        scheduled = true;
+        queueMicrotask(flush);
+    }
+}
+
+function runTasks(tasks) {
+    let task;
+    while ((task = tasks.shift())) {
+        try {
+            task();
+        } catch (e) {
+            console.error(e);
+        }
+    }
+}
+
+function remove(array, item) {
+    const index = array.indexOf(item);
+    return ~index && array.splice(index, 1);
+}

package/src/js/util/filter.js

@@ -0,0 +1,91 @@
+import { inBrowser } from './env.js';
+import { toArray, toNode, toNodes } from './lang';
+
+const voidElements = {
+    area: true,
+    base: true,
+    br: true,
+    col: true,
+    embed: true,
+    hr: true,
+    img: true,
+    input: true,
+    keygen: true,
+    link: true,
+    meta: true,
+    param: true,
+    source: true,
+    track: true,
+    wbr: true,
+};
+export function isVoidElement(element) {
+    return toNodes(element).some((element) => voidElements[element.tagName.toLowerCase()]);
+}
+
+const isVisibleFn =
+    (inBrowser && Element.prototype.checkVisibility) ||
+    function () {
+        return this.offsetWidth || this.offsetHeight || this.getClientRects().length;
+    };
+export function isVisible(element) {
+    return toNodes(element).some((element) => isVisibleFn.call(element));
+}
+
+export const selInput = 'input,select,textarea,button';
+export function isInput(element) {
+    return toNodes(element).some((element) => matches(element, selInput));
+}
+
+export const selFocusable = `${selInput},a[href],[tabindex]`;
+export function isFocusable(element) {
+    return matches(element, selFocusable);
+}
+
+export function parent(element) {
+    return toNode(element)?.parentElement;
+}
+
+export function filter(element, selector) {
+    return toNodes(element).filter((element) => matches(element, selector));
+}
+
+export function matches(element, selector) {
+    return toNodes(element).some((element) => element.matches(selector));
+}
+
+export function parents(element, selector) {
+    const elements = [];
+
+    while ((element = parent(element))) {
+        if (!selector || matches(element, selector)) {
+            elements.push(element);
+        }
+    }
+
+    return elements;
+}
+
+export function children(element, selector) {
+    element = toNode(element);
+    const children = element ? toArray(element.children) : [];
+    return selector ? filter(children, selector) : children;
+}
+
+export function index(element, ref) {
+    return ref ? toNodes(element).indexOf(toNode(ref)) : children(parent(element)).indexOf(element);
+}
+
+export function isSameSiteAnchor(el) {
+    el = toNode(el);
+    return el && ['origin', 'pathname', 'search'].every((part) => el[part] === location[part]);
+}
+
+export function getTargetedElement(el) {
+    if (isSameSiteAnchor(el)) {
+        const { hash, ownerDocument } = toNode(el);
+        const id = decodeURIComponent(hash).slice(1);
+        return id
+            ? ownerDocument.getElementById(id) || ownerDocument.getElementsByName(id)[0]
+            : ownerDocument.documentElement;
+    }
+}

package/src/js/util/index.js

@@ -0,0 +1,17 @@
+export * from './animation';
+export * from './attr';
+export * from './class';
+export * from './dimensions';
+export * from './dom';
+export * from './env';
+export * from './event';
+export * from './fastdom';
+export * from './filter';
+export * from './lang';
+export * from './mouse';
+export * from './observer';
+export * from './player';
+export * from './position';
+export * from './selector';
+export * from './style';
+export * from './viewport';

package/src/js/util/keys.js

@@ -0,0 +1,11 @@
+export const keyMap = {
+    TAB: 9,
+    ESC: 27,
+    SPACE: 32,
+    END: 35,
+    HOME: 36,
+    LEFT: 37,
+    UP: 38,
+    RIGHT: 39,
+    DOWN: 40,
+};