@frankenstyle/uikit 0.0.1

package/src/js/core/switcher.js

@@ -0,0 +1,246 @@
+import {
+    $$,
+    attr,
+    children,
+    css,
+    data,
+    endsWith,
+    findIndex,
+    getIndex,
+    hasClass,
+    includes,
+    isNode,
+    isTag,
+    matches,
+    queryAll,
+    toArray,
+    toggleClass,
+} from 'uikit-util';
+import { generateId } from '../api/instance';
+import { lazyload, swipe } from '../api/observables';
+import { maybeDefaultPreventClick } from '../mixin/event';
+import Togglable from '../mixin/togglable';
+import { keyMap } from '../util/keys';
+
+const selDisabled = '.uk-disabled *, .uk-disabled, [disabled]';
+
+export default {
+    mixins: [Togglable],
+
+    args: 'connect',
+
+    props: {
+        connect: String,
+        toggle: String,
+        itemNav: String,
+        active: Number,
+        followFocus: Boolean,
+        swiping: Boolean,
+    },
+
+    data: {
+        connect: '~.uk-switcher',
+        toggle: '> * > :first-child',
+        itemNav: false,
+        active: 0,
+        cls: 'uk-active',
+        attrItem: 'uk-switcher-item',
+        selVertical: '.uk-nav',
+        followFocus: false,
+        swiping: true,
+    },
+
+    computed: {
+        connects: {
+            get: ({ connect }, $el) => queryAll(connect, $el),
+            observe: ({ connect }) => connect,
+        },
+
+        connectChildren() {
+            return this.connects.map((el) => children(el)).flat();
+        },
+
+        toggles: ({ toggle }, $el) => $$(toggle, $el),
+
+        children(_, $el) {
+            return children($el).filter((child) =>
+                this.toggles.some((toggle) => child.contains(toggle)),
+            );
+        },
+    },
+
+    watch: {
+        connects(connects) {
+            if (this.swiping) {
+                css(connects, 'touchAction', 'pan-y pinch-zoom');
+            }
+            this.$emit();
+        },
+
+        connectChildren() {
+            let index = Math.max(0, this.index());
+            for (const el of this.connects) {
+                children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
+            }
+            this.$emit();
+        },
+
+        toggles(toggles) {
+            this.$emit();
+            const active = this.index();
+            this.show(~active ? active : toggles[this.active] || toggles[0]);
+        },
+    },
+
+    connected() {
+        this.$el.role = 'tablist';
+    },
+
+    observe: [
+        lazyload({ targets: ({ connectChildren }) => connectChildren }),
+        swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping }),
+    ],
+
+    events: [
+        {
+            name: 'click keydown',
+
+            delegate: ({ toggle }) => toggle,
+
+            handler(e) {
+                if (
+                    !matches(e.current, selDisabled) &&
+                    (e.type === 'click' || e.keyCode === keyMap.SPACE)
+                ) {
+                    maybeDefaultPreventClick(e);
+                    this.show(e.current);
+                }
+            },
+        },
+
+        {
+            name: 'keydown',
+
+            delegate: ({ toggle }) => toggle,
+
+            handler(e) {
+                const { current, keyCode } = e;
+                const isVertical = matches(this.$el, this.selVertical);
+
+                let i =
+                    keyCode === keyMap.HOME
+                        ? 0
+                        : keyCode === keyMap.END
+                          ? 'last'
+                          : (keyCode === keyMap.LEFT && !isVertical) ||
+                              (keyCode === keyMap.UP && isVertical)
+                            ? 'previous'
+                            : (keyCode === keyMap.RIGHT && !isVertical) ||
+                                (keyCode === keyMap.DOWN && isVertical)
+                              ? 'next'
+                              : -1;
+
+                if (~i) {
+                    e.preventDefault();
+                    const toggles = this.toggles.filter((el) => !matches(el, selDisabled));
+                    const next = toggles[getIndex(i, toggles, toggles.indexOf(current))];
+                    next.focus();
+                    if (this.followFocus) {
+                        this.show(next);
+                    }
+                }
+            },
+        },
+
+        {
+            name: 'click',
+
+            el: ({ $el, connects, itemNav }) =>
+                connects.concat(itemNav ? queryAll(itemNav, $el) : []),
+
+            delegate: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
+
+            handler(e) {
+                if (e.target.closest('a,button')) {
+                    maybeDefaultPreventClick(e);
+                    this.show(data(e.current, this.attrItem));
+                }
+            },
+        },
+
+        {
+            name: 'swipeRight swipeLeft',
+
+            filter: ({ swiping }) => swiping,
+
+            el: ({ connects }) => connects,
+
+            handler({ type }) {
+                this.show(endsWith(type, 'Left') ? 'next' : 'previous');
+            },
+        },
+    ],
+
+    update() {
+        for (const el of this.connects) {
+            if (isTag(el, 'ul')) {
+                el.role = 'presentation';
+            }
+        }
+        attr(children(this.$el), 'role', 'presentation');
+
+        for (const index in this.toggles) {
+            const toggle = this.toggles[index];
+            const item = this.connects[0]?.children[index];
+
+            toggle.role = 'tab';
+
+            if (!item) {
+                continue;
+            }
+
+            toggle.id = generateId(this, toggle);
+            item.id = generateId(this, item);
+
+            toggle.ariaControls = item.id;
+            attr(item, { role: 'tabpanel', 'aria-labelledby': toggle.id });
+        }
+        attr(this.$el, 'aria-orientation', matches(this.$el, this.selVertical) ? 'vertical' : null);
+    },
+
+    methods: {
+        index() {
+            return findIndex(this.children, (el) => hasClass(el, this.cls));
+        },
+
+        show(item) {
+            const toggles = this.toggles.filter((el) => !matches(el, selDisabled));
+            const prev = this.index();
+            const next = getIndex(
+                !isNode(item) || includes(toggles, item) ? item : 0,
+                toggles,
+                getIndex(this.toggles[prev], toggles),
+            );
+            const active = getIndex(toggles[next], this.toggles);
+
+            this.children.forEach((child, i) => {
+                toggleClass(child, this.cls, active === i);
+                attr(this.toggles[i], {
+                    'aria-selected': active === i,
+                    tabindex: active === i ? null : -1,
+                });
+            });
+
+            const animate = prev >= 0 && prev !== next;
+            this.connects.forEach(async ({ children }) => {
+                const actives = toArray(children).filter(
+                    (child, i) => i !== active && hasClass(child, this.cls),
+                );
+
+                if (await this.toggleElement(actives, false, animate)) {
+                    await this.toggleElement(children[active], true, animate);
+                }
+            });
+        },
+    },
+};

package/src/js/core/tab.js

@@ -0,0 +1,31 @@
+import { hasClass } from 'uikit-util';
+import Class from '../mixin/class';
+import Switcher from './switcher';
+
+export default {
+    mixins: [Class],
+
+    extends: Switcher,
+
+    props: {
+        media: Boolean,
+    },
+
+    data: {
+        media: 960,
+        attrItem: 'uk-tab-item',
+        selVertical: '.uk-tab-left,.uk-tab-right',
+    },
+
+    connected() {
+        const cls = hasClass(this.$el, 'uk-tab-left')
+            ? 'uk-tab-left'
+            : hasClass(this.$el, 'uk-tab-right')
+              ? 'uk-tab-right'
+              : false;
+
+        if (cls) {
+            this.$create('toggle', this.$el, { cls, mode: 'media', media: this.media });
+        }
+    },
+};

package/src/js/core/toggle.js

@@ -0,0 +1,225 @@
+import {
+    hasAttr,
+    hasClass,
+    includes,
+    isBoolean,
+    isFocusable,
+    isSameSiteAnchor,
+    isTag,
+    isTouch,
+    matches,
+    once,
+    pointerDown,
+    pointerEnter,
+    pointerLeave,
+    queryAll,
+    trigger,
+} from 'uikit-util';
+import { lazyload } from '../api/observables';
+import Media from '../mixin/media';
+import Togglable from '../mixin/togglable';
+
+const KEY_ENTER = 13;
+const KEY_SPACE = 32;
+
+export default {
+    mixins: [Media, Togglable],
+
+    args: 'target',
+
+    props: {
+        href: String,
+        target: null,
+        mode: 'list',
+        queued: Boolean,
+    },
+
+    data: {
+        href: false,
+        target: false,
+        mode: 'click',
+        queued: true,
+    },
+
+    computed: {
+        target: {
+            get: ({ target }, $el) => {
+                target = queryAll(target || $el.hash, $el);
+                return target.length ? target : [$el];
+            },
+            observe: ({ target }) => target,
+        },
+    },
+
+    connected() {
+        if (!includes(this.mode, 'media')) {
+            if (!isFocusable(this.$el)) {
+                this.$el.tabIndex = 0;
+            }
+            if (!this.cls && isTag(this.$el, 'a')) {
+                this.$el.role = 'button';
+            }
+        }
+    },
+
+    observe: lazyload({ targets: ({ target }) => target }),
+
+    events: [
+        {
+            name: pointerDown,
+
+            filter: ({ mode }) => includes(mode, 'hover'),
+
+            handler(e) {
+                this._preventClick = null;
+
+                if (!isTouch(e) || isBoolean(this._showState) || this.$el.disabled) {
+                    return;
+                }
+
+                // Clicking a button does not give it focus on all browsers and platforms
+                // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
+                trigger(this.$el, 'focus');
+                once(
+                    document,
+                    pointerDown,
+                    () => trigger(this.$el, 'blur'),
+                    true,
+                    (e) => !this.$el.contains(e.target),
+                );
+
+                // Prevent initial click to prevent double toggle through focus + click
+                if (includes(this.mode, 'click')) {
+                    this._preventClick = true;
+                }
+            },
+        },
+
+        {
+            name: `${pointerEnter} ${pointerLeave} focus blur`,
+
+            filter: ({ mode }) => includes(mode, 'hover'),
+
+            handler(e) {
+                if (isTouch(e) || this.$el.disabled || document.readyState === 'loading') {
+                    return;
+                }
+
+                const show = includes([pointerEnter, 'focus'], e.type);
+                const expanded = this.isToggled(this.target);
+
+                // Skip hide if still hovered or focused
+                if (
+                    !show &&
+                    (!isBoolean(this._showState) ||
+                        (e.type === pointerLeave && matches(this.$el, ':focus')) ||
+                        (e.type === 'blur' && matches(this.$el, ':hover')))
+                ) {
+                    // Reset showState if already hidden
+                    if (expanded === this._showState) {
+                        this._showState = null;
+                    }
+                    return;
+                }
+
+                // Skip show if state does not change e.g. hover + focus received
+                if (show && isBoolean(this._showState) && expanded !== this._showState) {
+                    return;
+                }
+
+                this._showState = show ? expanded : null;
+
+                this.toggle(`toggle${show ? 'show' : 'hide'}`);
+            },
+        },
+
+        {
+            name: 'keydown',
+
+            filter: ({ $el, mode }) => includes(mode, 'click') && !isTag($el, 'input'),
+
+            handler(e) {
+                if (e.keyCode === KEY_SPACE || e.keyCode === KEY_ENTER) {
+                    e.preventDefault();
+                    this.$el.click();
+                }
+            },
+        },
+
+        {
+            name: 'click',
+
+            filter: ({ mode }) => ['click', 'hover'].some((m) => includes(mode, m)),
+
+            handler(e) {
+                if (e.defaultPrevented) {
+                    return;
+                }
+
+                const link = e.target.closest('a[href]');
+                const isButtonLike =
+                    isSameSiteAnchor(link) && (!link.hash || matches(this.target, link.hash));
+
+                if (this._preventClick || isButtonLike || (link && !this.isToggled(this.target))) {
+                    e.preventDefault();
+                }
+
+                if (
+                    !this._preventClick &&
+                    includes(this.mode, 'click') &&
+                    (!link || isButtonLike || e.defaultPrevented)
+                ) {
+                    this.toggle();
+                }
+            },
+        },
+
+        {
+            name: 'mediachange',
+
+            filter: ({ mode }) => includes(mode, 'media'),
+
+            el: ({ target }) => target,
+
+            handler(e, mediaObj) {
+                if (mediaObj.matches ^ this.isToggled(this.target)) {
+                    this.toggle();
+                }
+            },
+        },
+    ],
+
+    methods: {
+        async toggle(type) {
+            if (!trigger(this.target, type || 'toggle', [this])) {
+                return;
+            }
+
+            if (hasAttr(this.$el, 'aria-expanded')) {
+                this.$el.ariaExpanded = !this.isToggled(this.target);
+            }
+
+            if (!this.queued) {
+                return this.toggleElement(this.target);
+            }
+
+            const leaving = this.target.filter((el) => hasClass(el, this.clsLeave));
+
+            if (leaving.length) {
+                for (const el of this.target) {
+                    const isLeaving = includes(leaving, el);
+                    this.toggleElement(el, isLeaving, isLeaving);
+                }
+                return;
+            }
+
+            const toggled = this.target.filter(this.isToggled);
+            if (await this.toggleElement(toggled, false)) {
+                await this.toggleElement(
+                    this.target.filter((el) => !includes(toggled, el)),
+                    true,
+                );
+            }
+        },
+    },
+};

package/src/js/core/video.js

@@ -0,0 +1,128 @@
+import {
+    hasAttr,
+    includes,
+    isTag,
+    isTouch,
+    mute,
+    parent,
+    pause,
+    play,
+    pointerEnter,
+    pointerLeave,
+    query,
+} from 'uikit-util';
+import { intersection } from '../api/observables';
+
+export default {
+    args: 'autoplay',
+
+    props: {
+        automute: Boolean,
+        autoplay: Boolean,
+        restart: Boolean,
+        hoverTarget: Boolean,
+    },
+
+    data: {
+        automute: false,
+        autoplay: true,
+        restart: false,
+        hoverTarget: false,
+    },
+
+    beforeConnect() {
+        const isVideo = isTag(this.$el, 'video');
+        if (this.autoplay === 'inview' && isVideo && !hasAttr(this.$el, 'preload')) {
+            this.$el.preload = 'none';
+        }
+
+        if (!isVideo && !hasAttr(this.$el, 'allow')) {
+            this.$el.allow = 'autoplay';
+        }
+
+        if (this.autoplay === 'hover') {
+            if (isVideo) {
+                this.$el.tabIndex = 0;
+            } else {
+                this.autoplay = true;
+            }
+        }
+
+        // If the video is added to the DOM through JS, the muted attribute is ignored
+        if (this.automute || hasAttr(this.$el, 'muted')) {
+            mute(this.$el);
+        }
+    },
+
+    events: [
+        {
+            name: `${pointerEnter} focusin`,
+
+            el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
+
+            filter: ({ autoplay }) => includes(autoplay, 'hover'),
+
+            handler(e) {
+                if (!isTouch(e) || !isPlaying(this.$el)) {
+                    play(this.$el);
+                } else {
+                    pauseHover(this.$el, this.restart);
+                }
+            },
+        },
+
+        {
+            name: `${pointerLeave} focusout`,
+
+            el: ({ hoverTarget, $el }) => query(hoverTarget, $el) || $el,
+
+            filter: ({ autoplay }) => includes(autoplay, 'hover'),
+
+            handler(e) {
+                if (!isTouch(e)) {
+                    pauseHover(this.$el, this.restart);
+                }
+            },
+        },
+    ],
+
+    observe: [
+        intersection({
+            filter: ({ $el }) => $el.preload === 'none',
+            handler([{ target }]) {
+                target.preload = '';
+                this.$reset();
+            },
+        }),
+
+        intersection({
+            filter: ({ $el, autoplay }) => autoplay !== 'hover' && $el.preload !== 'none',
+            handler([{ isIntersecting, target }]) {
+                if (!document.fullscreenElement) {
+                    if (isIntersecting) {
+                        if (this.autoplay) {
+                            play(target);
+                        }
+                    } else {
+                        pauseHover(target, this.restart);
+                    }
+                }
+            },
+            args: { intersecting: false },
+            options: ({ $el, autoplay }) => ({
+                root: autoplay === 'inview' ? null : parent($el).closest(':not(a)'),
+            }),
+        }),
+    ],
+};
+
+function isPlaying(videoEl) {
+    return !videoEl.paused && !videoEl.ended;
+}
+
+function pauseHover(el, restart) {
+    pause(el);
+    if (restart && isTag(el, 'video')) {
+        el.currentTime = 0;
+    }
+}

package/src/js/mixin/animate.js

@@ -0,0 +1,34 @@
+import { noop } from 'uikit-util';
+import fade from './internal/animate-fade';
+import slide from './internal/animate-slide';
+
+export default {
+    props: {
+        duration: Number,
+        animation: Boolean,
+    },
+
+    data: {
+        duration: 150,
+        animation: 'slide',
+    },
+
+    methods: {
+        animate(action, target = this.$el) {
+            const name = this.animation;
+            const animationFn =
+                name === 'fade'
+                    ? fade
+                    : name === 'delayed-fade'
+                      ? (...args) => fade(...args, 40)
+                      : name
+                        ? slide
+                        : () => {
+                              action();
+                              return Promise.resolve();
+                          };
+
+            return animationFn(action, target, this.duration).catch(noop);
+        },
+    },
+};

package/src/js/mixin/class.js

@@ -0,0 +1,7 @@
+import { addClass } from 'uikit-util';
+
+export default {
+    connected() {
+        addClass(this.$el, this.$options.id);
+    },
+};

package/src/js/mixin/container.js

@@ -0,0 +1,17 @@
+import { $ } from 'uikit-util';
+
+export default {
+    props: {
+        container: Boolean,
+    },
+
+    data: {
+        container: true,
+    },
+
+    computed: {
+        container({ container }) {
+            return (container === true && this.$container) || (container && $(container));
+        },
+    },
+};

package/src/js/mixin/event.js

@@ -0,0 +1,5 @@
+export function maybeDefaultPreventClick(e) {
+    if (e.target.closest('a[href="#"],a[href=""]')) {
+        e.preventDefault();
+    }
+}