@frankenstyle/uikit 0.0.1

package/src/js/mixin/togglable.js

@@ -0,0 +1,258 @@
+import {
+    $$,
+    addClass,
+    Animation,
+    css,
+    dimensions,
+    hasClass,
+    includes,
+    isBoolean,
+    isFunction,
+    isVisible,
+    removeClass,
+    startsWith,
+    toFloat,
+    toggleClass,
+    toNode,
+    toNodes,
+    Transition,
+    trigger,
+    unwrap,
+    wrapInner,
+} from 'uikit-util';
+import { storeScrollPosition } from './position';
+
+export default {
+    props: {
+        cls: Boolean,
+        animation: 'list',
+        duration: Number,
+        velocity: Number,
+        origin: String,
+        transition: String,
+    },
+
+    data: {
+        cls: false,
+        animation: [false],
+        duration: 200,
+        velocity: 0.2,
+        origin: false,
+        transition: 'ease',
+        clsEnter: 'uk-togglable-enter',
+        clsLeave: 'uk-togglable-leave',
+    },
+
+    computed: {
+        hasAnimation: ({ animation }) => !!animation[0],
+
+        hasTransition: ({ animation }) =>
+            ['slide', 'reveal'].some((transition) => startsWith(animation[0], transition)),
+    },
+
+    methods: {
+        async toggleElement(targets, toggle, animate) {
+            try {
+                await Promise.all(
+                    toNodes(targets).map((el) => {
+                        const show = isBoolean(toggle) ? toggle : !this.isToggled(el);
+
+                        if (!trigger(el, `before${show ? 'show' : 'hide'}`, [this])) {
+                            return Promise.reject();
+                        }
+
+                        const promise = (
+                            isFunction(animate)
+                                ? animate
+                                : animate === false || !this.hasAnimation
+                                  ? toggleInstant
+                                  : this.hasTransition
+                                    ? toggleTransition
+                                    : toggleAnimation
+                        )(el, show, this);
+
+                        const cls = show ? this.clsEnter : this.clsLeave;
+
+                        addClass(el, cls);
+
+                        trigger(el, show ? 'show' : 'hide', [this]);
+
+                        const done = () => {
+                            removeClass(el, cls);
+                            trigger(el, show ? 'shown' : 'hidden', [this]);
+
+                            if (show) {
+                                const restoreScrollPosition = storeScrollPosition(el);
+                                $$('[autofocus]', el).find(isVisible)?.focus();
+                                restoreScrollPosition();
+                            }
+                        };
+
+                        return promise
+                            ? promise.then(done, () => {
+                                  removeClass(el, cls);
+                                  return Promise.reject();
+                              })
+                            : done();
+                    }),
+                );
+                return true;
+            } catch {
+                return false;
+            }
+        },
+
+        isToggled(el = this.$el) {
+            el = toNode(el);
+            return hasClass(el, this.clsEnter)
+                ? true
+                : hasClass(el, this.clsLeave)
+                  ? false
+                  : this.cls
+                    ? hasClass(el, this.cls.split(' ')[0])
+                    : isVisible(el);
+        },
+
+        _toggle(el, toggled) {
+            if (!el) {
+                return;
+            }
+
+            toggled = Boolean(toggled);
+
+            let changed;
+            if (this.cls) {
+                changed = includes(this.cls, ' ') || toggled !== hasClass(el, this.cls);
+                changed && toggleClass(el, this.cls, includes(this.cls, ' ') ? undefined : toggled);
+            } else {
+                changed = toggled === el.hidden;
+                changed && (el.hidden = !toggled);
+            }
+
+            if (changed) {
+                trigger(el, 'toggled', [toggled, this]);
+            }
+        },
+    },
+};
+
+function toggleInstant(el, show, { _toggle }) {
+    Animation.cancel(el);
+    Transition.cancel(el);
+    return _toggle(el, show);
+}
+
+async function toggleTransition(el, show, { animation, duration, velocity, transition, _toggle }) {
+    const [mode = 'reveal', startProp = 'top'] = animation[0]?.split('-') || [];
+
+    const dirs = [
+        ['left', 'right'],
+        ['top', 'bottom'],
+    ];
+    const dir = dirs[includes(dirs[0], startProp) ? 0 : 1];
+    const end = dir[1] === startProp;
+    const props = ['width', 'height'];
+    const dimProp = props[dirs.indexOf(dir)];
+    const marginProp = `margin-${dir[0]}`;
+    const marginStartProp = `margin-${startProp}`;
+
+    let currentDim = dimensions(el)[dimProp];
+
+    const inProgress = Transition.inProgress(el);
+    await Transition.cancel(el);
+
+    if (show) {
+        _toggle(el, true);
+    }
+
+    const prevProps = Object.fromEntries(
+        [
+            'padding',
+            'border',
+            'width',
+            'height',
+            'minWidth',
+            'minHeight',
+            'overflowY',
+            'overflowX',
+            marginProp,
+            marginStartProp,
+        ].map((key) => [key, el.style[key]]),
+    );
+
+    const dim = dimensions(el);
+    const currentMargin = toFloat(css(el, marginProp));
+    const marginStart = toFloat(css(el, marginStartProp));
+    const endDim = dim[dimProp] + marginStart;
+
+    if (!inProgress && !show) {
+        currentDim += marginStart;
+    }
+
+    const [wrapper] = wrapInner(el, '<div>');
+    css(wrapper, {
+        boxSizing: 'border-box',
+        height: dim.height,
+        width: dim.width,
+        ...css(el, [
+            'overflow',
+            'padding',
+            'borderTop',
+            'borderRight',
+            'borderBottom',
+            'borderLeft',
+            'borderImage',
+            marginStartProp,
+        ]),
+    });
+
+    css(el, {
+        padding: 0,
+        border: 0,
+        minWidth: 0,
+        minHeight: 0,
+        [marginStartProp]: 0,
+        width: dim.width,
+        height: dim.height,
+        overflow: 'hidden',
+        [dimProp]: currentDim,
+    });
+
+    const percent = currentDim / endDim;
+    duration = (velocity * endDim + duration) * (show ? 1 - percent : percent);
+    const endProps = { [dimProp]: show ? endDim : 0 };
+
+    if (end) {
+        css(el, marginProp, endDim - currentDim + currentMargin);
+        endProps[marginProp] = show ? currentMargin : endDim + currentMargin;
+    }
+
+    if (!end ^ (mode === 'reveal')) {
+        css(wrapper, marginProp, -endDim + currentDim);
+        Transition.start(wrapper, { [marginProp]: show ? 0 : -endDim }, duration, transition);
+    }
+
+    try {
+        await Transition.start(el, endProps, duration, transition);
+    } finally {
+        css(el, prevProps);
+        unwrap(wrapper.firstChild);
+
+        if (!show) {
+            _toggle(el, false);
+        }
+    }
+}
+
+function toggleAnimation(el, show, cmp) {
+    const { animation, duration, _toggle } = cmp;
+
+    if (show) {
+        _toggle(el, true);
+        return Animation.in(el, animation[0], duration, cmp.origin);
+    }
+
+    return Animation.out(el, animation[1] || animation[0], duration, cmp.origin).then(() =>
+        _toggle(el, false),
+    );
+}

package/src/js/uikit-core.js

@@ -0,0 +1,11 @@
+import { each } from 'uikit-util';
+import boot from './api/boot';
+import UIkit from './api/index';
+import * as components from './core/index';
+
+// register components
+each(components, (component, name) => UIkit.component(name, component));
+
+boot(UIkit);
+
+export default UIkit;

package/src/js/uikit.js

@@ -0,0 +1,7 @@
+import { each } from 'uikit-util';
+import * as components from './components/index';
+import UIkit from './uikit-core';
+
+each(components, (component, name) => UIkit.component(name, component));
+
+export default UIkit;

package/src/js/util/animation.js

@@ -0,0 +1,122 @@
+import { addClass, hasClass, removeClass } from './class';
+import { once, trigger } from './event';
+import { toNodes } from './lang';
+import { css, propName, resetProps } from './style';
+
+const clsTransition = 'uk-transition';
+const transitionEnd = 'transitionend';
+const transitionCanceled = 'transitioncanceled';
+
+function transition(element, props, duration = 400, timing = 'linear', skipReflow) {
+    duration = Math.round(duration);
+    return Promise.all(
+        toNodes(element).map(
+            (element) =>
+                new Promise((resolve, reject) => {
+                    if (!skipReflow) {
+                        element.offsetHeight; // force reflow
+                    }
+
+                    const timer = setTimeout(() => trigger(element, transitionEnd), duration);
+
+                    once(
+                        element,
+                        [transitionEnd, transitionCanceled],
+                        ({ type }) => {
+                            clearTimeout(timer);
+                            removeClass(element, clsTransition);
+                            resetProps(element, transitionProps);
+                            type === transitionCanceled ? reject() : resolve(element);
+                        },
+                        { self: true },
+                    );
+
+                    addClass(element, clsTransition);
+                    const transitionProps = {
+                        transitionProperty: Object.keys(props).map(propName).join(','),
+                        transitionDuration: `${duration}ms`,
+                        transitionTimingFunction: timing,
+                    };
+                    css(element, { ...transitionProps, ...props });
+                }),
+        ),
+    );
+}
+
+export const Transition = {
+    start: transition,
+
+    async stop(element) {
+        trigger(element, transitionEnd);
+        await Promise.resolve();
+    },
+
+    async cancel(element) {
+        trigger(element, transitionCanceled);
+        await Promise.resolve();
+    },
+
+    inProgress(element) {
+        return hasClass(element, clsTransition);
+    },
+};
+
+const clsAnimation = 'uk-animation';
+const animationEnd = 'animationend';
+const animationCanceled = 'animationcanceled';
+
+function animate(element, animation, duration = 200, origin, out) {
+    return Promise.all(
+        toNodes(element).map(
+            (element) =>
+                new Promise((resolve, reject) => {
+                    if (hasClass(element, clsAnimation)) {
+                        trigger(element, animationCanceled);
+                    }
+
+                    const classes = [
+                        animation,
+                        clsAnimation,
+                        `${clsAnimation}-${out ? 'leave' : 'enter'}`,
+                        origin && `uk-transform-origin-${origin}`,
+                        out && `${clsAnimation}-reverse`,
+                    ];
+
+                    const timer = setTimeout(() => trigger(element, animationEnd), duration);
+
+                    once(
+                        element,
+                        [animationEnd, animationCanceled],
+                        ({ type }) => {
+                            clearTimeout(timer);
+
+                            type === animationCanceled ? reject() : resolve(element);
+
+                            css(element, 'animationDuration', '');
+                            removeClass(element, classes);
+                        },
+                        { self: true },
+                    );
+
+                    css(element, 'animationDuration', `${duration}ms`);
+                    addClass(element, classes);
+                }),
+        ),
+    );
+}
+
+export const Animation = {
+    in: animate,
+
+    out(element, animation, duration, origin) {
+        return animate(element, animation, duration, origin, true);
+    },
+
+    inProgress(element) {
+        return hasClass(element, clsAnimation);
+    },
+
+    cancel(element) {
+        trigger(element, animationCanceled);
+    },
+};

package/src/js/util/attr.js

@@ -0,0 +1,42 @@
+import { isFunction, isObject, isUndefined, toNode, toNodes } from './lang';
+
+export function attr(element, name, value) {
+    if (isObject(name)) {
+        for (const key in name) {
+            attr(element, key, name[key]);
+        }
+        return;
+    }
+
+    if (isUndefined(value)) {
+        return toNode(element)?.getAttribute(name);
+    } else {
+        for (const el of toNodes(element)) {
+            if (isFunction(value)) {
+                value = value.call(el, attr(el, name));
+            }
+
+            if (value === null) {
+                removeAttr(el, name);
+            } else {
+                el.setAttribute(name, value);
+            }
+        }
+    }
+}
+
+export function hasAttr(element, name) {
+    return toNodes(element).some((element) => element.hasAttribute(name));
+}
+
+export function removeAttr(element, name) {
+    toNodes(element).forEach((element) => element.removeAttribute(name));
+}
+
+export function data(element, attribute) {
+    for (const name of [attribute, `data-${attribute}`]) {
+        if (hasAttr(element, name)) {
+            return attr(element, name);
+        }
+    }
+}

package/src/js/util/await.js

@@ -0,0 +1,7 @@
+export function awaitFrame() {
+    return new Promise((resolve) => requestAnimationFrame(resolve));
+}
+
+export function awaitTimeout(timeout) {
+    return new Promise((resolve) => setTimeout(resolve, timeout));
+}

package/src/js/util/class.js

@@ -0,0 +1,53 @@
+import { includes, isArray, isUndefined, toNodes } from './lang';
+
+export function addClass(element, ...classes) {
+    for (const node of toNodes(element)) {
+        const add = toClasses(classes).filter((cls) => !hasClass(node, cls));
+        if (add.length) {
+            node.classList.add(...add);
+        }
+    }
+}
+
+export function removeClass(element, ...classes) {
+    for (const node of toNodes(element)) {
+        const remove = toClasses(classes).filter((cls) => hasClass(node, cls));
+        if (remove.length) {
+            node.classList.remove(...remove);
+        }
+    }
+}
+
+export function replaceClass(element, oldClass, newClass) {
+    newClass = toClasses(newClass);
+    oldClass = toClasses(oldClass).filter((cls) => !includes(newClass, cls));
+    removeClass(element, oldClass);
+    addClass(element, newClass);
+}
+
+export function hasClass(element, cls) {
+    [cls] = toClasses(cls);
+    return toNodes(element).some((node) => node.classList.contains(cls));
+}
+
+export function toggleClass(element, cls, force) {
+    const classes = toClasses(cls);
+
+    if (!isUndefined(force)) {
+        force = !!force;
+    }
+
+    for (const node of toNodes(element)) {
+        for (const cls of classes) {
+            node.classList.toggle(cls, force);
+        }
+    }
+}
+
+function toClasses(str) {
+    return str
+        ? isArray(str)
+            ? str.map(toClasses).flat()
+            : String(str).split(' ').filter(Boolean)
+        : [];
+}