@frankenstyle/uikit 0.0.1

package/src/js/components/notification.js

@@ -0,0 +1,134 @@
+import {
+    $,
+    append,
+    apply,
+    css,
+    parent,
+    pointerEnter,
+    pointerLeave,
+    remove,
+    toFloat,
+    Transition,
+    trigger,
+} from 'uikit-util';
+import Container from '../mixin/container';
+import { maybeDefaultPreventClick } from '../mixin/event';
+
+export default {
+    mixins: [Container],
+
+    functional: true,
+
+    args: ['message', 'status'],
+
+    data: {
+        message: '',
+        status: '',
+        timeout: 5000,
+        group: '',
+        pos: 'top-center',
+        clsContainer: 'uk-notification',
+        clsClose: 'uk-notification-close',
+        clsMsg: 'uk-notification-message',
+    },
+
+    install,
+
+    computed: {
+        marginProp: ({ pos }) => `margin-${pos.match(/[a-z]+(?=-)/)[0]}`,
+
+        startProps() {
+            return { opacity: 0, [this.marginProp]: -this.$el.offsetHeight };
+        },
+    },
+
+    created() {
+        const posClass = `${this.clsContainer}-${this.pos}`;
+        const containerAttr = `data-${this.clsContainer}-container`;
+        const container =
+            $(`.${posClass}[${containerAttr}]`, this.container) ||
+            append(
+                this.container,
+                `<div class="${this.clsContainer} ${posClass}" ${containerAttr}></div>`,
+            );
+
+        this.$mount(
+            append(
+                container,
+                `<div class="${this.clsMsg}${
+                    this.status ? ` ${this.clsMsg}-${this.status}` : ''
+                }" role="alert">
+                    <a href class="${this.clsClose}" data-uk-close></a>
+                    <div>${this.message}</div>
+                </div>`,
+            ),
+        );
+    },
+
+    async connected() {
+        const margin = toFloat(css(this.$el, this.marginProp));
+        await Transition.start(css(this.$el, this.startProps), {
+            opacity: 1,
+            [this.marginProp]: margin,
+        });
+
+        if (this.timeout) {
+            this.timer = setTimeout(this.close, this.timeout);
+        }
+    },
+
+    events: {
+        click(e) {
+            maybeDefaultPreventClick(e);
+            this.close();
+        },
+
+        [pointerEnter]() {
+            if (this.timer) {
+                clearTimeout(this.timer);
+            }
+        },
+
+        [pointerLeave]() {
+            if (this.timeout) {
+                this.timer = setTimeout(this.close, this.timeout);
+            }
+        },
+    },
+
+    methods: {
+        async close(immediate) {
+            const removeFn = (el) => {
+                const container = parent(el);
+
+                trigger(el, 'close', [this]);
+                remove(el);
+
+                if (!container?.hasChildNodes()) {
+                    remove(container);
+                }
+            };
+
+            if (this.timer) {
+                clearTimeout(this.timer);
+            }
+
+            if (!immediate) {
+                await Transition.start(this.$el, this.startProps);
+            }
+
+            removeFn(this.$el);
+        },
+    },
+};
+
+function install(UIkit) {
+    UIkit.notification.closeAll = function (group, immediate) {
+        apply(document.body, (el) => {
+            const notification = UIkit.getComponent(el, 'notification');
+            if (notification && (!group || group === notification.group)) {
+                notification.close(immediate);
+            }
+        });
+    };
+}

package/src/js/components/parallax.js

@@ -0,0 +1,86 @@
+import { css, isVisible, parent, query, scrollParent, scrolledOver, toPx } from 'uikit-util';
+import { resize, scroll, viewport } from '../api/observables';
+import Parallax, { ease } from '../mixin/parallax';
+
+export default {
+    mixins: [Parallax],
+
+    props: {
+        target: String,
+        viewport: Number, // Deprecated
+        easing: Number,
+        start: String,
+        end: String,
+    },
+
+    data: {
+        target: false,
+        viewport: 1,
+        easing: 1,
+        start: 0,
+        end: 0,
+    },
+
+    computed: {
+        target: ({ target }, $el) => getOffsetElement((target && query(target, $el)) || $el),
+
+        start({ start }) {
+            return toPx(start, 'height', this.target, true);
+        },
+
+        end({ end, viewport }) {
+            return toPx(
+                end || ((viewport = (1 - viewport) * 100) && `${viewport}vh+${viewport}%`),
+                'height',
+                this.target,
+                true,
+            );
+        },
+    },
+
+    observe: [
+        viewport(),
+        scroll({ target: ({ target }) => target }),
+        resize({ target: ({ $el, target }) => [$el, target, scrollParent(target, true)] }),
+    ],
+
+    update: {
+        read({ percent }, types) {
+            if (!types.has('scroll')) {
+                percent = false;
+            }
+
+            if (!isVisible(this.$el)) {
+                return false;
+            }
+
+            if (!this.matchMedia) {
+                return;
+            }
+
+            const prev = percent;
+            percent = ease(scrolledOver(this.target, this.start, this.end), this.easing);
+
+            return {
+                percent,
+                style: prev === percent ? false : this.getCss(percent),
+            };
+        },
+
+        write({ style }) {
+            if (!this.matchMedia) {
+                this.reset();
+                return;
+            }
+
+            style && css(this.$el, style);
+        },
+
+        events: ['scroll', 'resize'],
+    },
+};
+
+// SVG elements do not inherit from HTMLElement
+function getOffsetElement(el) {
+    return el ? ('offsetTop' in el ? el : getOffsetElement(parent(el))) : document.documentElement;
+}

package/src/js/components/slider-parallax.js

@@ -0,0 +1,81 @@
+import { css, endsWith, fastdom, noop, Transition } from 'uikit-util';
+import Parallax from '../mixin/parallax';
+
+export default {
+    mixins: [Parallax],
+
+    beforeConnect() {
+        this.item = this.$el.closest(`.${this.$options.id.replace('parallax', 'items')} > *`);
+    },
+
+    disconnected() {
+        this.item = null;
+    },
+
+    events: [
+        {
+            name: 'itemin itemout',
+
+            self: true,
+
+            el: ({ item }) => item,
+
+            handler({ type, detail: { percent, duration, timing, dir } }) {
+                fastdom.read(() => {
+                    if (!this.matchMedia) {
+                        return;
+                    }
+
+                    const propsFrom = this.getCss(getCurrentPercent(type, dir, percent));
+                    const propsTo = this.getCss(isIn(type) ? 0.5 : dir > 0 ? 1 : 0);
+                    fastdom.write(() => {
+                        css(this.$el, propsFrom);
+                        Transition.start(this.$el, propsTo, duration, timing).catch(noop);
+                    });
+                });
+            },
+        },
+
+        {
+            name: 'transitioncanceled transitionend',
+
+            self: true,
+
+            el: ({ item }) => item,
+
+            handler() {
+                Transition.cancel(this.$el);
+            },
+        },
+
+        {
+            name: 'itemtranslatein itemtranslateout',
+
+            self: true,
+
+            el: ({ item }) => item,
+
+            handler({ type, detail: { percent, dir } }) {
+                fastdom.read(() => {
+                    if (!this.matchMedia) {
+                        this.reset();
+                        return;
+                    }
+
+                    const props = this.getCss(getCurrentPercent(type, dir, percent));
+                    fastdom.write(() => css(this.$el, props));
+                });
+            },
+        },
+    ],
+};
+
+function isIn(type) {
+    return endsWith(type, 'in');
+}
+
+function getCurrentPercent(type, dir, percent) {
+    percent /= 2;
+
+    return isIn(type) ^ (dir < 0) ? percent : 1 - percent;
+}

package/src/js/components/slider.js

@@ -0,0 +1,388 @@
+import {
+    $,
+    $$,
+    addClass,
+    children,
+    css,
+    data,
+    dimensions,
+    findIndex,
+    getIndex,
+    hasOwn,
+    includes,
+    isVisible,
+    last,
+    selFocusable,
+    sumBy,
+    toFloat,
+    toNumber,
+    toggleClass,
+} from 'uikit-util';
+import { resize } from '../api/observables';
+import Class from '../mixin/class';
+import Slider, { speedUp } from '../mixin/slider';
+import SliderParallax from '../mixin/slider-parallax';
+import SliderReactive from '../mixin/slider-reactive';
+import SliderPreload from './internal/slider-preload';
+import Transitioner, { getMax, getWidth } from './internal/slider-transitioner';
+
+export default {
+    mixins: [Class, Slider, SliderReactive, SliderParallax, SliderPreload],
+
+    props: {
+        center: Boolean,
+        sets: Boolean,
+        active: String,
+    },
+
+    data: {
+        center: false,
+        sets: false,
+        attrItem: 'uk-slider-item',
+        selList: '.uk-slider-items',
+        selNav: '.uk-slider-nav',
+        clsContainer: 'uk-slider-container',
+        active: 'all',
+        Transitioner,
+    },
+
+    computed: {
+        finite({ finite }) {
+            return finite || isFinite(this.list, this.center);
+        },
+
+        maxIndex() {
+            if (!this.finite || (this.center && !this.sets)) {
+                return this.length - 1;
+            }
+
+            if (this.center) {
+                return last(this.sets);
+            }
+
+            let lft = 0;
+            const max = getMax(this.list);
+            const index = findIndex(this.slides, (el) => {
+                // 0.005: FF reports different widths for (calc(100% / 3))
+                if (lft >= max - 0.005) {
+                    return true;
+                }
+
+                lft += dimensions(el).width;
+            });
+
+            return ~index ? index : this.length - 1;
+        },
+
+        sets({ sets: enabled }) {
+            if (!enabled || this.parallax) {
+                return;
+            }
+
+            let left = 0;
+            const sets = [];
+            const width = dimensions(this.list).width;
+            for (let i = 0; i < this.length; i++) {
+                const slideWidth = dimensions(this.slides[i]).width;
+
+                if (left + slideWidth > width) {
+                    left = 0;
+                }
+
+                if (this.center) {
+                    if (
+                        left < width / 2 &&
+                        left +
+                            slideWidth +
+                            dimensions(this.slides[getIndex(i + 1, this.slides)]).width / 2 >
+                            width / 2
+                    ) {
+                        sets.push(i);
+                        left = width / 2 - slideWidth / 2;
+                    }
+                } else if (left === 0) {
+                    sets.push(Math.min(i, this.maxIndex));
+                }
+
+                left += slideWidth;
+            }
+
+            if (sets.length) {
+                return sets;
+            }
+        },
+
+        transitionOptions() {
+            return {
+                center: this.center,
+                list: this.list,
+            };
+        },
+
+        slides() {
+            return children(this.list).filter(isVisible);
+        },
+    },
+
+    connected() {
+        toggleClass(this.$el, this.clsContainer, !$(`.${this.clsContainer}`, this.$el));
+    },
+
+    observe: resize({
+        target: ({ slides, $el }) => [$el, ...slides],
+    }),
+
+    update: {
+        write() {
+            for (const el of this.navItems) {
+                const index = toNumber(data(el, this.attrItem));
+                if (index !== false) {
+                    el.hidden =
+                        !this.maxIndex ||
+                        index > this.maxIndex ||
+                        (this.sets && !includes(this.sets, index));
+                }
+            }
+
+            this.reorder();
+            if (!this.parallax) {
+                this._translate(1);
+            }
+
+            this.updateActiveClasses();
+        },
+
+        events: ['resize'],
+    },
+
+    events: {
+        beforeitemshow(e) {
+            if (
+                !this.dragging &&
+                this.sets &&
+                this.stack.length < 2 &&
+                !includes(this.sets, this.index)
+            ) {
+                this.index = this.getValidIndex();
+            }
+
+            const diff = Math.abs(
+                this.index -
+                    this.prevIndex +
+                    ((this.dir > 0 && this.index < this.prevIndex) ||
+                    (this.dir < 0 && this.index > this.prevIndex)
+                        ? (this.maxIndex + 1) * this.dir
+                        : 0),
+            );
+
+            if (!this.dragging && diff > 1) {
+                for (let i = 0; i < diff; i++) {
+                    this.stack.splice(1, 0, this.dir > 0 ? 'next' : 'previous');
+                }
+
+                e.preventDefault();
+                return;
+            }
+
+            const index =
+                this.dir < 0 || !this.slides[this.prevIndex] ? this.index : this.prevIndex;
+            const avgWidth = getWidth(this.list) / this.length;
+            this.duration =
+                speedUp(avgWidth / this.velocity) *
+                (dimensions(this.slides[index]).width / avgWidth);
+
+            this.reorder();
+        },
+
+        itemshow() {
+            if (~this.prevIndex) {
+                addClass(this._getTransitioner().getItemIn(), this.clsActive);
+            }
+            this.updateActiveClasses(this.prevIndex);
+        },
+
+        itemshown() {
+            this.updateActiveClasses();
+        },
+    },
+
+    methods: {
+        reorder() {
+            if (this.finite) {
+                css(this.slides, 'order', '');
+                return;
+            }
+
+            const index = this.dir > 0 && this.slides[this.prevIndex] ? this.prevIndex : this.index;
+
+            this.slides.forEach((slide, i) =>
+                css(
+                    slide,
+                    'order',
+                    this.dir > 0 && i < index ? 1 : this.dir < 0 && i >= this.index ? -1 : '',
+                ),
+            );
+
+            if (!this.center || !this.length) {
+                return;
+            }
+
+            const next = this.slides[index];
+            let width = dimensions(this.list).width / 2 - dimensions(next).width / 2;
+            let j = 0;
+
+            while (width > 0) {
+                const slideIndex = this.getIndex(--j + index, index);
+                const slide = this.slides[slideIndex];
+
+                css(slide, 'order', slideIndex > index ? -2 : -1);
+                width -= dimensions(slide).width;
+            }
+        },
+
+        updateActiveClasses(currentIndex = this.index) {
+            let actives = this._getTransitioner(currentIndex).getActives();
+
+            if (this.active !== 'all') {
+                actives = [this.slides[this.getValidIndex(currentIndex)]];
+            }
+
+            const activeClasses = [
+                this.clsActive,
+                !this.sets || includes(this.sets, toFloat(this.index)) ? this.clsActivated : '',
+            ];
+            for (const slide of this.slides) {
+                const active = includes(actives, slide);
+                toggleClass(slide, activeClasses, active);
+                slide.ariaHidden = !active;
+                for (const focusable of $$(selFocusable, slide)) {
+                    if (!hasOwn(focusable, '_tabindex')) {
+                        focusable._tabindex = focusable.tabIndex;
+                    }
+                    focusable.tabIndex = active ? focusable._tabindex : -1;
+                }
+            }
+        },
+
+        getValidIndex(index = this.index, prevIndex = this.prevIndex) {
+            index = this.getIndex(index, prevIndex);
+
+            if (!this.sets) {
+                return index;
+            }
+
+            let prev;
+
+            do {
+                if (includes(this.sets, index)) {
+                    return index;
+                }
+
+                prev = index;
+                index = this.getIndex(index + this.dir, prevIndex);
+            } while (index !== prev);
+
+            return index;
+        },
+
+        getAdjacentSlides() {
+            const { width } = dimensions(this.list);
+            const left = -width;
+            const right = width * 2;
+            const slideWidth = dimensions(this.slides[this.index]).width;
+            const slideLeft = this.center ? width / 2 - slideWidth / 2 : 0;
+            const slides = new Set();
+            for (const i of [-1, 1]) {
+                let currentLeft = slideLeft + (i > 0 ? slideWidth : 0);
+                let j = 0;
+                do {
+                    const slide = this.slides[this.getIndex(this.index + i + j++ * i)];
+                    currentLeft += dimensions(slide).width * i;
+                    slides.add(slide);
+                } while (this.length > j && currentLeft > left && currentLeft < right);
+            }
+            return Array.from(slides);
+        },
+
+        getIndexAt(percent) {
+            let index = -1;
+            const scrollDist = this.center
+                ? getWidth(this.list) -
+                  (dimensions(this.slides[0]).width / 2 + dimensions(last(this.slides)).width / 2)
+                : getWidth(this.list, this.maxIndex);
+
+            let dist = percent * scrollDist;
+            let slidePercent = 0;
+
+            do {
+                const slideWidth = dimensions(this.slides[++index]).width;
+                const slideDist = this.center
+                    ? slideWidth / 2 + dimensions(this.slides[index + 1]).width / 2
+                    : slideWidth;
+                slidePercent = (dist / slideDist) % 1;
+                dist -= slideDist;
+            } while (dist >= 0 && index < this.maxIndex);
+
+            return [index, slidePercent];
+        },
+    },
+};
+
+function isFinite(list, center) {
+    if (!list || list.length < 2) {
+        return true;
+    }
+
+    const { width: listWidth } = dimensions(list);
+    if (!center) {
+        return Math.ceil(getWidth(list)) < Math.trunc(listWidth + getMaxElWidth(list));
+    }
+
+    const slides = children(list);
+    const listHalf = Math.trunc(listWidth / 2);
+    for (const index in slides) {
+        const slide = slides[index];
+        const slideWidth = dimensions(slide).width;
+        const slidesInView = new Set([slide]);
+
+        let diff = 0;
+        for (const i of [-1, 1]) {
+            let left = slideWidth / 2;
+
+            let j = 0;
+
+            while (left < listHalf) {
+                const nextSlide = slides[getIndex(+index + i + j++ * i, slides)];
+
+                if (slidesInView.has(nextSlide)) {
+                    return true;
+                }
+
+                left += dimensions(nextSlide).width;
+                slidesInView.add(nextSlide);
+            }
+            diff = Math.max(
+                diff,
+                slideWidth / 2 +
+                    dimensions(slides[getIndex(+index + i, slides)]).width / 2 -
+                    (left - listHalf),
+            );
+        }
+
+        if (
+            Math.trunc(diff) >
+            sumBy(
+                slides.filter((slide) => !slidesInView.has(slide)),
+                (slide) => dimensions(slide).width,
+            )
+        ) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function getMaxElWidth(list) {
+    return Math.max(0, ...children(list).map((el) => dimensions(el).width));
+}

package/src/js/components/slideshow-parallax.js

@@ -0,0 +1 @@
+export { default } from './slider-parallax';