@frankenstyle/uikit 0.0.1

package/src/js/mixin/position.js

@@ -0,0 +1,113 @@
+import {
+    css,
+    dimensions,
+    flipPosition,
+    includes,
+    isRtl,
+    positionAt,
+    scrollParent,
+    toPx,
+} from 'uikit-util';
+
+export default {
+    props: {
+        pos: String,
+        offset: Boolean,
+        flip: Boolean,
+        shift: Boolean,
+        inset: Boolean,
+    },
+
+    data: {
+        pos: `bottom-${isRtl ? 'right' : 'left'}`,
+        offset: false,
+        flip: true,
+        shift: true,
+        inset: false,
+    },
+
+    connected() {
+        this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
+        [this.dir, this.align] = this.pos;
+        this.axis = includes(['top', 'bottom'], this.dir) ? 'y' : 'x';
+    },
+
+    methods: {
+        positionAt(element, target, boundary) {
+            let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
+            const placement = [this.flip && 'flip', this.shift && 'shift'];
+
+            const attach = {
+                element: [this.inset ? this.dir : flipPosition(this.dir), this.align],
+                target: [this.dir, this.align],
+            };
+
+            if (this.axis === 'y') {
+                for (const prop in attach) {
+                    attach[prop].reverse();
+                }
+                offset.reverse();
+                placement.reverse();
+            }
+
+            const restoreScrollPosition = storeScrollPosition(element);
+
+            // Ensure none positioned element does not generate scrollbars
+            const elDim = dimensions(element);
+            css(element, { top: -elDim.height, left: -elDim.width });
+
+            positionAt(element, target, {
+                attach,
+                offset,
+                boundary,
+                placement,
+                viewportOffset: this.getViewportOffset(element),
+            });
+
+            restoreScrollPosition();
+        },
+
+        getPositionOffset(element = this.$el) {
+            return (
+                toPx(
+                    this.offset === false ? css(element, '--uk-position-offset') : this.offset,
+                    this.axis === 'x' ? 'width' : 'height',
+                    element,
+                ) *
+                (includes(['left', 'top'], this.dir) ? -1 : 1) *
+                (this.inset ? -1 : 1)
+            );
+        },
+
+        getShiftOffset(element = this.$el) {
+            return this.align === 'center'
+                ? 0
+                : toPx(
+                      css(element, '--uk-position-shift-offset'),
+                      this.axis === 'y' ? 'width' : 'height',
+                      element,
+                  ) * (includes(['left', 'top'], this.align) ? 1 : -1);
+        },
+
+        getViewportOffset(element) {
+            return toPx(css(element, '--uk-position-viewport-offset'));
+        },
+    },
+};
+
+export function storeScrollPosition(element) {
+    const scrollElement = scrollParent(element);
+    const { scrollTop } = scrollElement;
+
+    const restore = () => {
+        if (scrollTop !== scrollElement.scrollTop) {
+            scrollElement.scrollTop = scrollTop;
+        }
+    };
+
+    return () => {
+        restore();
+        // setTimeout is needed for iOS Safari
+        setTimeout(restore);
+    };
+}

package/src/js/mixin/slider-autoplay.js

@@ -0,0 +1,71 @@
+import { attr, isVisible, matches } from 'uikit-util';
+
+export default {
+    props: {
+        autoplay: Boolean,
+        autoplayInterval: Number,
+        pauseOnHover: Boolean,
+    },
+
+    data: {
+        autoplay: false,
+        autoplayInterval: 7000,
+        pauseOnHover: true,
+    },
+
+    connected() {
+        attr(this.list, 'aria-live', this.autoplay ? 'off' : 'polite');
+        this.autoplay && this.startAutoplay();
+    },
+
+    disconnected() {
+        this.stopAutoplay();
+    },
+
+    update() {
+        attr(this.slides, 'tabindex', '-1');
+    },
+
+    events: [
+        {
+            name: 'visibilitychange',
+
+            el: () => document,
+
+            filter: ({ autoplay }) => autoplay,
+
+            handler() {
+                if (document.hidden) {
+                    this.stopAutoplay();
+                } else {
+                    this.startAutoplay();
+                }
+            },
+        },
+    ],
+
+    methods: {
+        startAutoplay() {
+            this.stopAutoplay();
+
+            this.interval = setInterval(() => {
+                if (
+                    !(
+                        this.stack.length ||
+                        !isVisible(this.$el) ||
+                        (this.draggable &&
+                            matches(this.$el, ':focus-within') &&
+                            !matches(this.$el, ':focus')) ||
+                        (this.pauseOnHover && matches(this.$el, ':hover'))
+                    )
+                ) {
+                    this.show('next');
+                }
+            }, this.autoplayInterval);
+        },
+
+        stopAutoplay() {
+            clearInterval(this.interval);
+        },
+    },
+};

package/src/js/mixin/slider-drag.js

@@ -0,0 +1,236 @@
+import {
+    css,
+    getEventPos,
+    includes,
+    isRtl,
+    isTouch,
+    noop,
+    off,
+    on,
+    selInput,
+    toArray,
+    trigger,
+} from 'uikit-util';
+
+const pointerOptions = { passive: false, capture: true };
+const pointerUpOptions = { passive: true, capture: true };
+const pointerDown = 'touchstart mousedown';
+const pointerMove = 'touchmove mousemove';
+const pointerUp = 'touchend touchcancel mouseup click input scroll';
+
+export default {
+    props: {
+        draggable: Boolean,
+    },
+
+    data: {
+        draggable: true,
+        threshold: 10,
+    },
+
+    created() {
+        for (const key of ['start', 'move', 'end']) {
+            const fn = this[key];
+            this[key] = (e) => {
+                const pos = getEventPos(e).x * (isRtl ? -1 : 1);
+
+                this.prevPos = pos === this.pos ? this.prevPos : this.pos;
+                this.pos = pos;
+
+                fn(e);
+            };
+        }
+    },
+
+    events: [
+        {
+            name: pointerDown,
+
+            passive: true,
+
+            delegate: ({ selList }) => `${selList} > *`,
+
+            handler(e) {
+                if (
+                    !this.draggable ||
+                    this.parallax ||
+                    (!isTouch(e) && hasSelectableText(e.target)) ||
+                    e.target.closest(selInput) ||
+                    e.button > 0 ||
+                    this.length < 2
+                ) {
+                    return;
+                }
+
+                this.start(e);
+            },
+        },
+
+        {
+            name: 'dragstart',
+
+            handler(e) {
+                e.preventDefault();
+            },
+        },
+
+        {
+            // iOS workaround for slider stopping if swiping fast
+            name: pointerMove,
+            el: ({ list }) => list,
+            handler: noop,
+            ...pointerOptions,
+        },
+    ],
+
+    methods: {
+        start() {
+            this.drag = this.pos;
+
+            if (this._transitioner) {
+                this.percent = this._transitioner.percent();
+                this.drag += this._transitioner.getDistance() * this.percent * this.dir;
+
+                this._transitioner.cancel();
+                this._transitioner.translate(this.percent);
+
+                this.dragging = true;
+
+                this.stack = [];
+            } else {
+                this.prevIndex = this.index;
+            }
+
+            on(document, pointerMove, this.move, pointerOptions);
+
+            // 'input' event is triggered by video controls
+            on(document, pointerUp, this.end, pointerUpOptions);
+
+            css(this.list, 'userSelect', 'none');
+        },
+
+        move(e) {
+            const distance = this.pos - this.drag;
+
+            if (
+                distance === 0 ||
+                this.prevPos === this.pos ||
+                (!this.dragging && Math.abs(distance) < this.threshold)
+            ) {
+                return;
+            }
+
+            e.cancelable && e.preventDefault();
+
+            this.dragging = true;
+            this.dir = distance < 0 ? 1 : -1;
+
+            let { slides, prevIndex } = this;
+            let dis = Math.abs(distance);
+            let nextIndex = this.getIndex(prevIndex + this.dir);
+            let width = getDistance.call(this, prevIndex, nextIndex);
+
+            while (nextIndex !== prevIndex && dis > width) {
+                this.drag -= width * this.dir;
+
+                prevIndex = nextIndex;
+                dis -= width;
+                nextIndex = this.getIndex(prevIndex + this.dir);
+                width = getDistance.call(this, prevIndex, nextIndex);
+            }
+
+            this.percent = dis / width;
+
+            const prev = slides[prevIndex];
+            const next = slides[nextIndex];
+            const changed = this.index !== nextIndex;
+            const edge = prevIndex === nextIndex;
+
+            let itemShown;
+
+            for (const i of [this.index, this.prevIndex]) {
+                if (!includes([nextIndex, prevIndex], i)) {
+                    trigger(slides[i], 'itemhidden', [this]);
+
+                    if (edge) {
+                        itemShown = true;
+                        this.prevIndex = prevIndex;
+                    }
+                }
+            }
+
+            if ((this.index === prevIndex && this.prevIndex !== prevIndex) || itemShown) {
+                trigger(slides[this.index], 'itemshown', [this]);
+            }
+
+            if (changed) {
+                this.prevIndex = prevIndex;
+                this.index = nextIndex;
+
+                if (!edge) {
+                    trigger(prev, 'beforeitemhide', [this]);
+                    trigger(prev, 'itemhide', [this]);
+                }
+
+                trigger(next, 'beforeitemshow', [this]);
+                trigger(next, 'itemshow', [this]);
+            }
+
+            this._transitioner = this._translate(Math.abs(this.percent), prev, !edge && next);
+        },
+
+        end() {
+            off(document, pointerMove, this.move, pointerOptions);
+            off(document, pointerUp, this.end, pointerUpOptions);
+
+            if (this.dragging) {
+                setTimeout(on(this.list, 'click', (e) => e.preventDefault(), pointerOptions));
+
+                this.dragging = null;
+
+                if (this.index === this.prevIndex) {
+                    this.percent = 1 - this.percent;
+                    this.dir *= -1;
+                    this._show(false, this.index, true);
+                    this._transitioner = null;
+                } else {
+                    const dirChange =
+                        (isRtl ? this.dir * (isRtl ? 1 : -1) : this.dir) < 0 ===
+                        this.prevPos > this.pos;
+                    this.index = dirChange ? this.index : this.prevIndex;
+
+                    if (dirChange) {
+                        trigger(this.slides[this.prevIndex], 'itemhidden', [this]);
+                        trigger(this.slides[this.index], 'itemshown', [this]);
+                        this.percent = 1 - this.percent;
+                    }
+
+                    this.show(
+                        (this.dir > 0 && !dirChange) || (this.dir < 0 && dirChange)
+                            ? 'next'
+                            : 'previous',
+                        true,
+                    );
+                }
+            }
+
+            css(this.list, { userSelect: '' });
+
+            this.drag = this.percent = null;
+        },
+    },
+};
+
+function getDistance(prev, next) {
+    return (
+        this._getTransitioner(prev, prev !== next && next).getDistance() ||
+        this.slides[prev].offsetWidth
+    );
+}
+
+function hasSelectableText(el) {
+    return (
+        css(el, 'userSelect') !== 'none' &&
+        toArray(el.childNodes).some((el) => el.nodeType === 3 && el.textContent.trim())
+    );
+}

package/src/js/mixin/slider-nav.js

@@ -0,0 +1,248 @@
+import {
+    $,
+    $$,
+    attr,
+    children,
+    data,
+    html,
+    isEqual,
+    isNumeric,
+    isTag,
+    matches,
+    parent,
+    toFloat,
+    toNumber,
+    toggleClass,
+} from 'uikit-util';
+import { generateId } from '../api/instance';
+import { keyMap } from '../util/keys';
+import { maybeDefaultPreventClick } from './event';
+
+export default {
+    i18n: {
+        next: 'Next slide',
+        previous: 'Previous slide',
+        slideX: 'Slide %s',
+        slideLabel: '%s of %s',
+        role: 'String',
+    },
+
+    data: {
+        selNav: false,
+        role: 'region',
+    },
+
+    computed: {
+        nav: ({ selNav }, $el) => $(selNav, $el),
+
+        navChildren() {
+            return children(this.nav);
+        },
+
+        selNavItem: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
+
+        navItems(_, $el) {
+            return $$(this.selNavItem, $el);
+        },
+    },
+
+    watch: {
+        nav(nav, prev) {
+            attr(nav, 'role', 'tablist');
+            this.padNavitems();
+
+            if (prev) {
+                this.$emit();
+            }
+        },
+
+        list(list) {
+            if (isTag(list, 'ul')) {
+                attr(list, 'role', 'presentation');
+            }
+        },
+
+        navChildren(children) {
+            attr(children, 'role', 'presentation');
+            this.padNavitems();
+            this.updateNav();
+        },
+
+        navItems(items) {
+            for (const el of items) {
+                const cmd = data(el, this.attrItem);
+                const button = $('a,button', el) || el;
+
+                let ariaLabel;
+                let ariaControls = null;
+                if (isNumeric(cmd)) {
+                    const item = toNumber(cmd);
+                    const slide = this.slides[item];
+
+                    if (slide) {
+                        if (!slide.id) {
+                            slide.id = generateId(this, slide);
+                        }
+                        ariaControls = slide.id;
+                    }
+
+                    ariaLabel = this.t('slideX', toFloat(cmd) + 1);
+
+                    button.role = 'tab';
+                } else {
+                    if (this.list) {
+                        if (!this.list.id) {
+                            this.list.id = generateId(this, this.list);
+                        }
+
+                        ariaControls = this.list.id;
+                    }
+
+                    ariaLabel = this.t(cmd);
+                }
+
+                button.ariaControls = ariaControls;
+                button.ariaLabel = button.ariaLabel || ariaLabel;
+            }
+        },
+
+        slides(slides) {
+            slides.forEach((slide, i) =>
+                attr(slide, {
+                    role: this.nav ? 'tabpanel' : 'group',
+                    'aria-label': this.t('slideLabel', i + 1, this.length),
+                    'aria-roledescription': this.nav ? null : 'slide',
+                }),
+            );
+
+            this.padNavitems();
+        },
+    },
+
+    connected() {
+        this.$el.role = this.role;
+        this.$el.ariaRoleDescription = 'carousel';
+    },
+
+    update: [
+        {
+            write() {
+                this.navItems.concat(this.nav).forEach((el) => el && (el.hidden = !this.maxIndex));
+                this.updateNav();
+            },
+
+            events: ['resize'],
+        },
+    ],
+
+    events: [
+        {
+            name: 'click keydown',
+
+            delegate: ({ selNavItem }) => selNavItem,
+
+            filter: ({ parallax }) => !parallax,
+
+            handler(e) {
+                if (
+                    e.target.closest('a,button') &&
+                    (e.type === 'click' || e.keyCode === keyMap.SPACE)
+                ) {
+                    maybeDefaultPreventClick(e);
+                    this.show(data(e.current, this.attrItem));
+                }
+            },
+        },
+
+        {
+            name: 'itemshow',
+            handler() {
+                this.updateNav();
+            },
+        },
+
+        {
+            name: 'keydown',
+
+            delegate: ({ selNavItem }) => selNavItem,
+
+            filter: ({ parallax }) => !parallax,
+
+            handler(e) {
+                const { current, keyCode } = e;
+                const cmd = data(current, this.attrItem);
+
+                if (!isNumeric(cmd)) {
+                    return;
+                }
+
+                let i =
+                    keyCode === keyMap.HOME
+                        ? 0
+                        : keyCode === keyMap.END
+                          ? 'last'
+                          : keyCode === keyMap.LEFT
+                            ? 'previous'
+                            : keyCode === keyMap.RIGHT
+                              ? 'next'
+                              : -1;
+
+                if (~i) {
+                    e.preventDefault();
+                    this.show(i);
+                }
+            },
+        },
+    ],
+
+    methods: {
+        updateNav() {
+            const index = this.getValidIndex();
+
+            for (const el of this.navItems) {
+                const cmd = data(el, this.attrItem);
+                const button = $('a,button', el) || el;
+
+                if (isNumeric(cmd)) {
+                    const item = toNumber(cmd);
+                    const active = item === index;
+
+                    toggleClass(el, this.clsActive, active);
+                    toggleClass(button, 'uk-disabled', !!this.parallax);
+
+                    button.ariaSelected = active;
+                    button.tabIndex = active && !this.parallax ? null : -1;
+
+                    if (active && button && matches(parent(el), ':focus-within')) {
+                        button.focus();
+                    }
+                } else {
+                    toggleClass(
+                        el,
+                        'uk-invisible',
+                        this.finite &&
+                            ((cmd === 'previous' && index === 0) ||
+                                (cmd === 'next' && index >= this.maxIndex)),
+                    );
+                }
+            }
+        },
+
+        padNavitems() {
+            if (!this.nav) {
+                return;
+            }
+
+            const children = [];
+            for (let i = 0; i < this.length; i++) {
+                const attr = `${this.attrItem}="${i}"`;
+                children[i] =
+                    this.navChildren.findLast((el) => el.matches(`[${attr}]`)) ||
+                    $(`<li ${attr}><a href></a></li>`);
+            }
+            if (!isEqual(children, this.navChildren)) {
+                html(this.nav, children);
+            }
+        },
+    },
+};