@frankenstyle/uikit 0.0.1

package/src/js/components/countdown.js

@@ -0,0 +1,113 @@
+import { $, html, toFloat, trigger } from 'uikit-util';
+import Class from '../mixin/class';
+
+const units = ['days', 'hours', 'minutes', 'seconds'];
+
+export default {
+    mixins: [Class],
+
+    props: {
+        date: String,
+        clsWrapper: String,
+        role: String,
+        reload: Boolean,
+    },
+
+    data: {
+        date: '',
+        clsWrapper: '.uk-countdown-%unit%',
+        role: 'timer',
+        reload: false,
+    },
+
+    connected() {
+        this.$el.role = this.role;
+        this.date = toFloat(Date.parse(this.$props.date));
+        this.started = this.end = false;
+        this.start();
+    },
+
+    disconnected() {
+        this.stop();
+    },
+
+    events: {
+        name: 'visibilitychange',
+
+        el: () => document,
+
+        handler() {
+            if (document.hidden) {
+                this.stop();
+            } else {
+                this.start();
+            }
+        },
+    },
+
+    methods: {
+        start() {
+            this.stop();
+            this.update();
+        },
+
+        stop() {
+            if (this.timer) {
+                clearInterval(this.timer);
+                trigger(this.$el, 'countdownstop');
+                this.timer = null;
+            }
+        },
+
+        update() {
+            const timespan = getTimeSpan(this.date);
+
+            if (!timespan.total) {
+                this.stop();
+                if (!this.end) {
+                    trigger(this.$el, 'countdownend');
+                    this.end = true;
+                    if (this.reload && this.started) {
+                        window.location.reload();
+                    }
+                }
+            } else if (!this.timer) {
+                this.started = true;
+                this.timer = setInterval(this.update, 1000);
+                trigger(this.$el, 'countdownstart');
+            }
+
+            for (const unit of units) {
+                const el = $(this.clsWrapper.replace('%unit%', unit), this.$el);
+
+                if (!el) {
+                    continue;
+                }
+
+                let digits = Math.trunc(timespan[unit]).toString().padStart(2, '0');
+
+                if (el.textContent !== digits) {
+                    digits = digits.split('');
+
+                    if (digits.length !== el.children.length) {
+                        html(el, digits.map(() => '<span></span>').join(''));
+                    }
+
+                    digits.forEach((digit, i) => (el.children[i].textContent = digit));
+                }
+            }
+        },
+    },
+};
+
+function getTimeSpan(date) {
+    const total = Math.max(0, date - Date.now()) / 1000;
+
+    return {
+        total,
+        seconds: total % 60,
+        minutes: (total / 60) % 60,
+        hours: (total / 60 / 60) % 24,
+        days: total / 60 / 60 / 24,
+    };
+}

package/src/js/components/filter.js

@@ -0,0 +1,211 @@
+import {
+    $,
+    $$,
+    append,
+    css,
+    data,
+    fastdom,
+    children as getChildren,
+    hasClass,
+    includes,
+    isEmpty,
+    isEqual,
+    isTag,
+    isUndefined,
+    matches,
+    toggleClass,
+    trigger,
+} from 'uikit-util';
+import { parseOptions } from '../api/options';
+import Animate from '../mixin/animate';
+import { maybeDefaultPreventClick } from '../mixin/event';
+import { keyMap } from '../util/keys';
+
+export default {
+    mixins: [Animate],
+
+    args: 'target',
+
+    props: {
+        target: String,
+        selActive: Boolean,
+    },
+
+    data: {
+        target: '',
+        selActive: false,
+        attrItem: 'uk-filter-control',
+        cls: 'uk-active',
+        duration: 250,
+    },
+
+    computed: {
+        children: ({ target }, $el) => $$(`${target} > *`, $el),
+
+        toggles: ({ attrItem }, $el) => $$(`[${attrItem}],[data-${attrItem}]`, $el),
+    },
+
+    watch: {
+        toggles(toggles) {
+            this.updateState();
+
+            const actives = $$(this.selActive, this.$el);
+            for (const toggle of toggles) {
+                if (this.selActive !== false) {
+                    toggleClass(toggle, this.cls, includes(actives, toggle));
+                }
+                const button = findButton(toggle);
+                if (isTag(button, 'a')) {
+                    button.role = 'button';
+                }
+            }
+        },
+
+        children(list, prev) {
+            if (prev) {
+                this.updateState();
+            }
+        },
+    },
+
+    events: {
+        name: 'click keydown',
+
+        delegate: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
+
+        handler(e) {
+            if (e.type === 'keydown' && e.keyCode !== keyMap.SPACE) {
+                return;
+            }
+
+            if (e.target.closest('a,button')) {
+                maybeDefaultPreventClick(e);
+                this.apply(e.current);
+            }
+        },
+    },
+
+    methods: {
+        apply(el) {
+            const prevState = this.getState();
+            const newState = mergeState(el, this.attrItem, this.getState());
+
+            if (!isEqualState(prevState, newState)) {
+                this.setState(newState);
+            }
+        },
+
+        getState() {
+            return this.toggles
+                .filter((item) => hasClass(item, this.cls))
+                .reduce((state, el) => mergeState(el, this.attrItem, state), {
+                    filter: { '': '' },
+                    sort: [],
+                });
+        },
+
+        async setState(state, animate = true) {
+            state = { filter: { '': '' }, sort: [], ...state };
+
+            trigger(this.$el, 'beforeFilter', [this, state]);
+
+            for (const toggle of this.toggles) {
+                toggleClass(toggle, this.cls, matchFilter(toggle, this.attrItem, state));
+            }
+
+            await Promise.all(
+                $$(this.target, this.$el).map((target) => {
+                    const filterFn = () => applyState(state, target, getChildren(target));
+                    return animate ? this.animate(filterFn, target) : filterFn();
+                }),
+            );
+
+            trigger(this.$el, 'afterFilter', [this]);
+        },
+
+        updateState() {
+            fastdom.write(() => this.setState(this.getState(), false));
+        },
+    },
+};
+
+function getFilter(el, attr) {
+    return parseOptions(data(el, attr), ['filter']);
+}
+
+function isEqualState(stateA, stateB) {
+    return ['filter', 'sort'].every((prop) => isEqual(stateA[prop], stateB[prop]));
+}
+
+function applyState(state, target, children) {
+    for (const el of children) {
+        css(
+            el,
+            'display',
+            Object.values(state.filter).every((selector) => !selector || matches(el, selector))
+                ? ''
+                : 'none',
+        );
+    }
+
+    const [sort, order] = state.sort;
+
+    if (sort) {
+        const sorted = sortItems(children, sort, order);
+        if (!isEqual(sorted, children)) {
+            append(target, sorted);
+        }
+    }
+}
+
+function mergeState(el, attr, state) {
+    const { filter, group, sort, order = 'asc' } = getFilter(el, attr);
+
+    if (filter || isUndefined(sort)) {
+        if (group) {
+            if (filter) {
+                delete state.filter[''];
+                state.filter[group] = filter;
+            } else {
+                delete state.filter[group];
+
+                if (isEmpty(state.filter) || '' in state.filter) {
+                    state.filter = { '': filter || '' };
+                }
+            }
+        } else {
+            state.filter = { '': filter || '' };
+        }
+    }
+
+    if (!isUndefined(sort)) {
+        state.sort = [sort, order];
+    }
+
+    return state;
+}
+
+function matchFilter(
+    el,
+    attr,
+    { filter: stateFilter = { '': '' }, sort: [stateSort, stateOrder] },
+) {
+    const { filter = '', group = '', sort, order = 'asc' } = getFilter(el, attr);
+
+    return isUndefined(sort)
+        ? (group in stateFilter && filter === stateFilter[group]) ||
+              (!filter && group && !(group in stateFilter) && !stateFilter[''])
+        : stateSort === sort && stateOrder === order;
+}
+
+function sortItems(nodes, sort, order) {
+    return [...nodes].sort(
+        (a, b) =>
+            data(a, sort).localeCompare(data(b, sort), undefined, { numeric: true }) *
+            (order === 'asc' || -1),
+    );
+}
+
+function findButton(el) {
+    return $('a,button', el) || el;
+}

package/src/js/components/index.js

@@ -0,0 +1,13 @@
+export { default as Countdown } from './countdown';
+export { default as Filter } from './filter';
+export { default as Lightbox } from './lightbox';
+export { default as LightboxPanel } from './lightbox-panel';
+export { default as Notification } from './notification';
+export { default as Parallax } from './parallax';
+export { default as Slider } from './slider';
+export { default as SliderParallax } from './slider-parallax';
+export { default as Slideshow } from './slideshow';
+export { default as SlideshowParallax } from './slideshow-parallax';
+export { default as Sortable } from './sortable';
+export { default as Tooltip } from './tooltip';
+export { default as Upload } from './upload';

package/src/js/components/internal/lightbox-animations.js

@@ -0,0 +1,40 @@
+import { css } from 'uikit-util';
+import Animations from '../../mixin/internal/slideshow-animations';
+import { scale3d } from './slideshow-animations';
+
+export default {
+    ...Animations,
+    fade: {
+        show() {
+            return [{ opacity: 0 }, { opacity: 1 }];
+        },
+
+        percent(current) {
+            return 1 - css(current, 'opacity');
+        },
+
+        translate(percent) {
+            return [{ opacity: 1 - percent }, { opacity: percent }];
+        },
+    },
+
+    scale: {
+        show() {
+            return [
+                { opacity: 0, transform: scale3d(1 - 0.2) },
+                { opacity: 1, transform: scale3d(1) },
+            ];
+        },
+
+        percent(current) {
+            return 1 - css(current, 'opacity');
+        },
+
+        translate(percent) {
+            return [
+                { opacity: 1 - percent, transform: scale3d(1 - 0.2 * percent) },
+                { opacity: percent, transform: scale3d(1 - 0.2 + 0.2 * percent) },
+            ];
+        },
+    },
+};

package/src/js/components/internal/slider-preload.js

@@ -0,0 +1,14 @@
+import { lazyload } from '../../api/observables';
+
+export default {
+    observe: lazyload({
+        target: ({ slides }) => slides,
+        targets: (instance) => instance.getAdjacentSlides(),
+    }),
+
+    methods: {
+        getAdjacentSlides() {
+            return [1, -1].map((i) => this.slides[this.getIndex(this.index + i)]);
+        },
+    },
+};

package/src/js/components/internal/slider-transitioner.js

@@ -0,0 +1,186 @@
+import {
+    children,
+    clamp,
+    css,
+    dimensions,
+    findIndex,
+    includes,
+    isRtl,
+    noop,
+    position,
+    sumBy,
+    Transition,
+} from 'uikit-util';
+import { translate } from '../../mixin/internal/slideshow-animations';
+import { triggerUpdate, withResolvers } from '../../mixin/internal/slideshow-transitioner';
+
+export default function (prev, next, dir, { center, easing, list }) {
+    const from = prev
+        ? getLeft(prev, list, center)
+        : getLeft(next, list, center) + dimensions(next).width * dir;
+    const to = next
+        ? getLeft(next, list, center)
+        : from + dimensions(prev).width * dir * (isRtl ? -1 : 1);
+
+    const { promise, resolve } = withResolvers();
+
+    return {
+        dir,
+
+        show(duration, percent = 0, linear) {
+            const timing = linear ? 'linear' : easing;
+            duration -= Math.round(duration * clamp(percent, -1, 1));
+
+            // Force previous transition to be canceled in Safari
+            css(list, 'transitionProperty', 'none');
+
+            this.translate(percent);
+
+            // Reset the forced transition property
+            css(list, 'transitionProperty', '');
+
+            percent = prev ? percent : clamp(percent, 0, 1);
+            triggerUpdate(this.getItemIn(), 'itemin', { percent, duration, timing, dir });
+            prev &&
+                triggerUpdate(this.getItemIn(true), 'itemout', {
+                    percent: 1 - percent,
+                    duration,
+                    timing,
+                    dir,
+                });
+
+            Transition.start(
+                list,
+                { transform: translate(-to * (isRtl ? -1 : 1), 'px') },
+                duration,
+                timing,
+            ).then(resolve, noop);
+
+            return promise;
+        },
+
+        cancel() {
+            return Transition.cancel(list);
+        },
+
+        reset() {
+            css(list, 'transform', '');
+        },
+
+        async forward(duration, percent = this.percent()) {
+            await this.cancel();
+            return this.show(duration, percent, true);
+        },
+
+        translate(percent) {
+            if (percent === this.percent()) {
+                return;
+            }
+
+            const distance = this.getDistance() * dir * (isRtl ? -1 : 1);
+
+            css(
+                list,
+                'transform',
+                translate(
+                    clamp(
+                        -to + (distance - distance * percent),
+                        -getWidth(list),
+                        dimensions(list).width,
+                    ) * (isRtl ? -1 : 1),
+                    'px',
+                ),
+            );
+
+            const actives = this.getActives();
+            const itemIn = this.getItemIn();
+            const itemOut = this.getItemIn(true);
+
+            percent = prev ? clamp(percent, -1, 1) : 0;
+
+            for (const slide of children(list)) {
+                const isActive = includes(actives, slide);
+                const isIn = slide === itemIn;
+                const isOut = slide === itemOut;
+                const translateIn =
+                    isIn ||
+                    (!isOut &&
+                        (isActive ||
+                            (dir * (isRtl ? -1 : 1) === -1) ^
+                                (getElLeft(slide, list) > getElLeft(prev || next))));
+
+                triggerUpdate(slide, `itemtranslate${translateIn ? 'in' : 'out'}`, {
+                    dir,
+                    percent: isOut ? 1 - percent : isIn ? percent : isActive ? 1 : 0,
+                });
+            }
+        },
+
+        percent() {
+            return Math.abs(
+                (new DOMMatrix(css(list, 'transform')).m41 * (isRtl ? -1 : 1) + from) / (to - from),
+            );
+        },
+
+        getDistance() {
+            return Math.abs(to - from);
+        },
+
+        getItemIn(out = false) {
+            let actives = this.getActives();
+            let nextActives = inView(list, getLeft(next || prev, list, center));
+
+            if (out) {
+                const temp = actives;
+                actives = nextActives;
+                nextActives = temp;
+            }
+
+            return nextActives[findIndex(nextActives, (el) => !includes(actives, el))];
+        },
+
+        getActives() {
+            return inView(list, getLeft(prev || next, list, center));
+        },
+    };
+}
+
+function getLeft(el, list, center) {
+    const left = getElLeft(el, list);
+
+    return center ? left - centerEl(el, list) : Math.min(left, getMax(list));
+}
+
+export function getMax(list) {
+    return Math.max(0, getWidth(list) - dimensions(list).width);
+}
+
+export function getWidth(list, index) {
+    return sumBy(children(list).slice(0, index), (el) => dimensions(el).width);
+}
+
+function centerEl(el, list) {
+    return dimensions(list).width / 2 - dimensions(el).width / 2;
+}
+
+function getElLeft(el, list) {
+    return (
+        (el &&
+            (position(el).left + (isRtl ? dimensions(el).width - dimensions(list).width : 0)) *
+                (isRtl ? -1 : 1)) ||
+        0
+    );
+}
+
+function inView(list, listLeft) {
+    listLeft -= 1;
+    const listWidth = dimensions(list).width;
+    const listRight = listLeft + listWidth + 2;
+
+    return children(list).filter((slide) => {
+        const slideLeft = getElLeft(slide, list);
+        const slideRight = slideLeft + Math.min(dimensions(slide).width, listWidth);
+
+        return slideLeft >= listLeft && slideRight <= listRight;
+    });
+}

package/src/js/components/internal/slideshow-animations.js

@@ -0,0 +1,100 @@
+import { css } from 'uikit-util';
+import Animations, { translate, translated } from '../../mixin/internal/slideshow-animations';
+
+export default {
+    ...Animations,
+    fade: {
+        show() {
+            return [{ opacity: 0, zIndex: 0 }, { zIndex: -1 }];
+        },
+
+        percent(current) {
+            return 1 - css(current, 'opacity');
+        },
+
+        translate(percent) {
+            return [{ opacity: 1 - percent, zIndex: 0 }, { zIndex: -1 }];
+        },
+    },
+
+    scale: {
+        show() {
+            return [{ opacity: 0, transform: scale3d(1 + 0.5), zIndex: 0 }, { zIndex: -1 }];
+        },
+
+        percent(current) {
+            return 1 - css(current, 'opacity');
+        },
+
+        translate(percent) {
+            return [
+                { opacity: 1 - percent, transform: scale3d(1 + 0.5 * percent), zIndex: 0 },
+                { zIndex: -1 },
+            ];
+        },
+    },
+
+    pull: {
+        show(dir) {
+            return dir < 0
+                ? [
+                      { transform: translate(30), zIndex: -1 },
+                      { transform: translate(), zIndex: 0 },
+                  ]
+                : [
+                      { transform: translate(-100), zIndex: 0 },
+                      { transform: translate(), zIndex: -1 },
+                  ];
+        },
+
+        percent(current, next, dir) {
+            return dir < 0 ? 1 - translated(next) : translated(current);
+        },
+
+        translate(percent, dir) {
+            return dir < 0
+                ? [
+                      { transform: translate(30 * percent), zIndex: -1 },
+                      { transform: translate(-100 * (1 - percent)), zIndex: 0 },
+                  ]
+                : [
+                      { transform: translate(-percent * 100), zIndex: 0 },
+                      { transform: translate(30 * (1 - percent)), zIndex: -1 },
+                  ];
+        },
+    },
+
+    push: {
+        show(dir) {
+            return dir < 0
+                ? [
+                      { transform: translate(100), zIndex: 0 },
+                      { transform: translate(), zIndex: -1 },
+                  ]
+                : [
+                      { transform: translate(-30), zIndex: -1 },
+                      { transform: translate(), zIndex: 0 },
+                  ];
+        },
+
+        percent(current, next, dir) {
+            return dir > 0 ? 1 - translated(next) : translated(current);
+        },
+
+        translate(percent, dir) {
+            return dir < 0
+                ? [
+                      { transform: translate(percent * 100), zIndex: 0 },
+                      { transform: translate(-30 * (1 - percent)), zIndex: -1 },
+                  ]
+                : [
+                      { transform: translate(-30 * percent), zIndex: -1 },
+                      { transform: translate(100 * (1 - percent)), zIndex: 0 },
+                  ];
+        },
+    },
+};
+
+export function scale3d(value) {
+    return `scale3d(${value}, ${value}, 1)`;
+}