@frankenstyle/uikit 0.0.1

package/src/js/util/lang.js

@@ -0,0 +1,280 @@
+const { hasOwnProperty, toString } = Object.prototype;
+
+export function hasOwn(obj, key) {
+    return hasOwnProperty.call(obj, key);
+}
+
+const hyphenateRe = /\B([A-Z])/g;
+
+export const hyphenate = memoize((str) => str.replace(hyphenateRe, '-$1').toLowerCase());
+
+const camelizeRe = /-(\w)/g;
+
+export const camelize = memoize((str) =>
+    (str.charAt(0).toLowerCase() + str.slice(1)).replace(camelizeRe, (_, c) => c.toUpperCase()),
+);
+
+export const ucfirst = memoize((str) => str.charAt(0).toUpperCase() + str.slice(1));
+
+export function startsWith(str, search) {
+    return str?.startsWith?.(search);
+}
+
+export function endsWith(str, search) {
+    return str?.endsWith?.(search);
+}
+
+export function includes(obj, search) {
+    return obj?.includes?.(search);
+}
+
+export function findIndex(array, predicate) {
+    return array?.findIndex?.(predicate);
+}
+
+export const { isArray, from: toArray } = Array;
+export const { assign } = Object;
+
+export function isFunction(obj) {
+    return typeof obj === 'function';
+}
+
+export function isObject(obj) {
+    return obj !== null && typeof obj === 'object';
+}
+
+export function isPlainObject(obj) {
+    return toString.call(obj) === '[object Object]';
+}
+
+export function isWindow(obj) {
+    return isObject(obj) && obj === obj.window;
+}
+
+export function isDocument(obj) {
+    return nodeType(obj) === 9;
+}
+
+export function isNode(obj) {
+    return nodeType(obj) >= 1;
+}
+
+export function isElement(obj) {
+    return nodeType(obj) === 1;
+}
+
+function nodeType(obj) {
+    return !isWindow(obj) && isObject(obj) && obj.nodeType;
+}
+
+export function isBoolean(value) {
+    return typeof value === 'boolean';
+}
+
+export function isString(value) {
+    return typeof value === 'string';
+}
+
+export function isNumber(value) {
+    return typeof value === 'number';
+}
+
+export function isNumeric(value) {
+    return isNumber(value) || (isString(value) && !isNaN(value - parseFloat(value)));
+}
+
+export function isEmpty(obj) {
+    return !(isArray(obj) ? obj.length : isObject(obj) ? Object.keys(obj).length : false);
+}
+
+export function isUndefined(value) {
+    return value === void 0;
+}
+
+export function toBoolean(value) {
+    return isBoolean(value)
+        ? value
+        : value === 'true' || value === '1' || value === ''
+          ? true
+          : value === 'false' || value === '0'
+            ? false
+            : value;
+}
+
+export function toNumber(value) {
+    const number = Number(value);
+    return isNaN(number) ? false : number;
+}
+
+export function toFloat(value) {
+    return parseFloat(value) || 0;
+}
+
+export function toNode(element) {
+    return element && toNodes(element)[0];
+}
+
+export function toNodes(element) {
+    return isNode(element) ? [element] : Array.from(element || []).filter(isNode);
+}
+
+export function toWindow(element) {
+    if (isWindow(element)) {
+        return element;
+    }
+
+    element = toNode(element);
+    const document = isDocument(element) ? element : element?.ownerDocument;
+
+    return document?.defaultView || window;
+}
+
+export function isEqual(value, other) {
+    return (
+        value === other ||
+        (isObject(value) &&
+            isObject(other) &&
+            Object.keys(value).length === Object.keys(other).length &&
+            each(value, (val, key) => val === other[key]))
+    );
+}
+
+export function swap(value, a, b) {
+    return value.replace(new RegExp(`${a}|${b}`, 'g'), (match) => (match === a ? b : a));
+}
+
+export function last(array) {
+    return array[array.length - 1];
+}
+
+export function each(obj, cb) {
+    for (const key in obj) {
+        if (false === cb(obj[key], key)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+export function sortBy(array, prop) {
+    return array
+        .slice()
+        .sort(({ [prop]: propA = 0 }, { [prop]: propB = 0 }) =>
+            propA > propB ? 1 : propB > propA ? -1 : 0,
+        );
+}
+
+export function sumBy(array, iteratee) {
+    return array.reduce(
+        (sum, item) => sum + toFloat(isFunction(iteratee) ? iteratee(item) : item[iteratee]),
+        0,
+    );
+}
+
+export function uniqueBy(array, prop) {
+    const seen = new Set();
+    return array.filter(({ [prop]: check }) => (seen.has(check) ? false : seen.add(check)));
+}
+
+export function pick(obj, props) {
+    return props.reduce((res, prop) => ({ ...res, [prop]: obj[prop] }), {});
+}
+
+export function clamp(number, min = 0, max = 1) {
+    return Math.min(Math.max(toNumber(number) || 0, min), max);
+}
+
+export function noop() {}
+
+export function intersectRect(...rects) {
+    return [
+        ['bottom', 'top'],
+        ['right', 'left'],
+    ].every(
+        ([minProp, maxProp]) =>
+            Math.min(...rects.map(({ [minProp]: min }) => min)) -
+                Math.max(...rects.map(({ [maxProp]: max }) => max)) >
+            0,
+    );
+}
+
+export function pointInRect(point, rect) {
+    return (
+        point.x <= rect.right &&
+        point.x >= rect.left &&
+        point.y <= rect.bottom &&
+        point.y >= rect.top
+    );
+}
+
+function ratio(dimensions, prop, value) {
+    const aProp = prop === 'width' ? 'height' : 'width';
+
+    return {
+        [aProp]: dimensions[prop]
+            ? Math.round((value * dimensions[aProp]) / dimensions[prop])
+            : dimensions[aProp],
+        [prop]: value,
+    };
+}
+
+function contain(dimensions, maxDimensions) {
+    dimensions = { ...dimensions };
+
+    for (const prop in dimensions) {
+        dimensions =
+            dimensions[prop] > maxDimensions[prop]
+                ? ratio(dimensions, prop, maxDimensions[prop])
+                : dimensions;
+    }
+
+    return dimensions;
+}
+
+function cover(dimensions, maxDimensions) {
+    dimensions = contain(dimensions, maxDimensions);
+
+    for (const prop in dimensions) {
+        dimensions =
+            dimensions[prop] < maxDimensions[prop]
+                ? ratio(dimensions, prop, maxDimensions[prop])
+                : dimensions;
+    }
+
+    return dimensions;
+}
+
+export const Dimensions = { ratio, contain, cover };
+
+export function getIndex(i, elements, current = 0, finite = false) {
+    elements = toNodes(elements);
+
+    const { length } = elements;
+
+    if (!length) {
+        return -1;
+    }
+
+    i = isNumeric(i)
+        ? toNumber(i)
+        : i === 'next'
+          ? current + 1
+          : i === 'previous'
+            ? current - 1
+            : i === 'last'
+              ? length - 1
+              : elements.indexOf(toNode(i));
+
+    if (finite) {
+        return clamp(i, 0, length - 1);
+    }
+
+    i %= length;
+
+    return i < 0 ? i + length : i;
+}
+
+export function memoize(fn) {
+    const cache = Object.create(null);
+    return (key, ...args) => cache[key] || (cache[key] = fn(key, ...args));
+}

package/src/js/util/mouse.js

@@ -0,0 +1,80 @@
+import { dimensions } from './dimensions';
+import { getEventPos, on } from './event';
+import { last, pointInRect } from './lang';
+
+export class MouseTracker {
+    init() {
+        this.positions = [];
+
+        let position;
+        this.unbind = on(document, 'mousemove', (e) => (position = getEventPos(e)));
+        this.interval = setInterval(() => {
+            if (!position) {
+                return;
+            }
+
+            this.positions.push(position);
+
+            if (this.positions.length > 5) {
+                this.positions.shift();
+            }
+        }, 50);
+    }
+
+    cancel() {
+        this.unbind?.();
+        clearInterval(this.interval);
+    }
+
+    movesTo(target) {
+        if (!this.positions || this.positions.length < 2) {
+            return false;
+        }
+
+        const p = dimensions(target);
+        const { left, right, top, bottom } = p;
+
+        const [prevPosition] = this.positions;
+        const position = last(this.positions);
+        const path = [prevPosition, position];
+
+        if (pointInRect(position, p)) {
+            return false;
+        }
+
+        const diagonals = [
+            [
+                { x: left, y: top },
+                { x: right, y: bottom },
+            ],
+            [
+                { x: left, y: bottom },
+                { x: right, y: top },
+            ],
+        ];
+
+        return diagonals.some((diagonal) => {
+            const intersection = intersect(path, diagonal);
+            return intersection && pointInRect(intersection, p);
+        });
+    }
+}
+
+// Inspired by http://paulbourke.net/geometry/pointlineplane/
+function intersect([{ x: x1, y: y1 }, { x: x2, y: y2 }], [{ x: x3, y: y3 }, { x: x4, y: y4 }]) {
+    const denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
+
+    // Lines are parallel
+    if (denominator === 0) {
+        return false;
+    }
+
+    const ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator;
+
+    if (ua < 0) {
+        return false;
+    }
+
+    // Return an object with the x and y coordinates of the intersection
+    return { x: x1 + ua * (x2 - x1), y: y1 + ua * (y2 - y1) };
+}

package/src/js/util/observer.js

@@ -0,0 +1,49 @@
+import { inBrowser } from './env';
+import { on } from './event';
+import { toNodes } from './lang';
+
+export function observeIntersection(targets, cb, options = {}, { intersecting = true } = {}) {
+    const observer = new IntersectionObserver(
+        intersecting
+            ? (entries, observer) => {
+                  if (entries.some((entry) => entry.isIntersecting)) {
+                      cb(entries, observer);
+                  }
+              }
+            : cb,
+        options,
+    );
+    for (const el of toNodes(targets)) {
+        observer.observe(el);
+    }
+
+    return observer;
+}
+
+const hasResizeObserver = inBrowser && window.ResizeObserver;
+export function observeResize(targets, cb, options = { box: 'border-box' }) {
+    if (hasResizeObserver) {
+        return observe(ResizeObserver, targets, cb, options);
+    }
+
+    // Fallback Safari < 13.1
+    const off = [on(window, 'load resize', cb), on(document, 'loadedmetadata load', cb, true)];
+    return { disconnect: () => off.map((cb) => cb()) };
+}
+
+export function observeViewportResize(cb) {
+    return { disconnect: on([window, window.visualViewport], 'resize', cb) };
+}
+
+export function observeMutation(targets, cb, options) {
+    return observe(MutationObserver, targets, cb, options);
+}
+
+function observe(Observer, targets, cb, options) {
+    const observer = new Observer(cb);
+    for (const el of toNodes(targets)) {
+        observer.observe(el, options);
+    }
+
+    return observer;
+}

package/src/js/util/player.js

@@ -0,0 +1,98 @@
+import { isTag } from './dom';
+import { once } from './event';
+import { includes, noop } from './lang';
+
+export function play(el) {
+    if (isIFrame(el)) {
+        call(el, { func: 'playVideo', method: 'play' });
+    }
+
+    if (isHTML5(el)) {
+        el.play().catch(noop);
+    }
+}
+
+export function pause(el) {
+    if (isIFrame(el)) {
+        // Safari ignores the attribute loading=lazy when the src gets set through JS
+        el[stateKey] && call(el, { func: 'pauseVideo', method: 'pause' });
+    }
+
+    if (isHTML5(el)) {
+        el.pause();
+    }
+}
+
+export function mute(el) {
+    if (isIFrame(el)) {
+        call(el, { func: 'mute', method: 'setVolume', value: 0 });
+    }
+
+    if (isHTML5(el)) {
+        el.muted = true;
+    }
+}
+
+function isHTML5(el) {
+    return isTag(el, 'video');
+}
+
+function isIFrame(el) {
+    return isTag(el, 'iframe') && (isYoutube(el) || isVimeo(el));
+}
+
+function isYoutube(el) {
+    return !!el.src.match(
+        /\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\/.*/,
+    );
+}
+
+function isVimeo(el) {
+    return !!el.src.match(/vimeo\.com\/video\/.*/);
+}
+
+async function call(el, cmd) {
+    await enableApi(el);
+    post(el, cmd);
+}
+
+function post(el, cmd) {
+    el.contentWindow.postMessage(JSON.stringify({ event: 'command', ...cmd }), '*');
+}
+
+const stateKey = '_ukPlayer';
+let counter = 0;
+function enableApi(el) {
+    if (el[stateKey]) {
+        return el[stateKey];
+    }
+
+    const youtube = isYoutube(el);
+    const vimeo = isVimeo(el);
+
+    const id = ++counter;
+    let poller;
+
+    return (el[stateKey] = new Promise((resolve) => {
+        youtube &&
+            once(el, 'load', () => {
+                const listener = () => post(el, { event: 'listening', id });
+                poller = setInterval(listener, 100);
+                listener();
+            });
+
+        once(window, 'message', resolve, false, ({ data }) => {
+            try {
+                data = JSON.parse(data);
+                return (
+                    (youtube && data?.id === id && data.event === 'onReady') ||
+                    (vimeo && Number(data?.player_id) === id)
+                );
+            } catch {}
+        });
+
+        el.src = `${el.src}${includes(el.src, '?') ? '&' : '?'}${
+            youtube ? 'enablejsapi=1' : `api=1&player_id=${id}`
+        }`;
+    }).then(() => clearInterval(poller)));
+}