@frankenstyle/uikit 0.0.1

package/src/js/core/grid.js

@@ -0,0 +1,210 @@
+import {
+    addClass,
+    css,
+    hasClass,
+    isRtl,
+    scrolledOver,
+    sumBy,
+    toFloat,
+    toggleClass,
+    toPx,
+} from 'uikit-util';
+import { scroll } from '../api/observables';
+import Class from '../mixin/class';
+import Margin from './margin';
+
+export default {
+    extends: Margin,
+
+    mixins: [Class],
+
+    name: 'grid',
+
+    props: {
+        masonry: Boolean,
+        parallax: String,
+        parallaxStart: String,
+        parallaxEnd: String,
+        parallaxJustify: Boolean,
+    },
+
+    data: {
+        margin: 'uk-grid-margin',
+        clsStack: 'uk-grid-stack',
+        masonry: false,
+        parallax: 0,
+        parallaxStart: 0,
+        parallaxEnd: 0,
+        parallaxJustify: false,
+    },
+
+    connected() {
+        this.masonry && addClass(this.$el, 'uk-flex-top', 'uk-flex-wrap-top');
+    },
+
+    observe: scroll({ filter: ({ parallax, parallaxJustify }) => parallax || parallaxJustify }),
+
+    update: [
+        {
+            write({ rows }) {
+                toggleClass(this.$el, this.clsStack, !rows.some((row) => row.length > 1));
+            },
+
+            events: ['resize'],
+        },
+
+        {
+            read(data) {
+                const { rows } = data;
+                let { masonry, parallax, parallaxJustify, margin } = this;
+
+                parallax = Math.max(0, toPx(parallax));
+
+                // Filter component makes elements positioned absolute
+                if (
+                    !(masonry || parallax || parallaxJustify) ||
+                    positionedAbsolute(rows) ||
+                    rows[0].some((el, i) =>
+                        rows.some((row) => row[i] && row[i].offsetWidth !== el.offsetWidth),
+                    )
+                ) {
+                    return (data.translates = data.scrollColumns = false);
+                }
+
+                let gutter = getGutter(rows, margin);
+
+                let columns;
+                let translates;
+                if (masonry) {
+                    [columns, translates] = applyMasonry(rows, gutter, masonry === 'next');
+                } else {
+                    columns = transpose(rows);
+                }
+
+                const columnHeights = columns.map(
+                    (column) => sumBy(column, 'offsetHeight') + gutter * (column.length - 1),
+                );
+                const height = Math.max(0, ...columnHeights);
+
+                let scrollColumns;
+                let parallaxStart;
+                let parallaxEnd;
+                if (parallax || parallaxJustify) {
+                    scrollColumns = columnHeights.map((hgt, i) =>
+                        parallaxJustify ? height - hgt + parallax : parallax / (i % 2 || 8),
+                    );
+                    if (!parallaxJustify) {
+                        parallax = Math.max(
+                            ...columnHeights.map((hgt, i) => hgt + scrollColumns[i] - height),
+                        );
+                    }
+                    parallaxStart = toPx(this.parallaxStart, 'height', this.$el, true);
+                    parallaxEnd = toPx(this.parallaxEnd, 'height', this.$el, true);
+                }
+
+                return {
+                    columns,
+                    translates,
+                    scrollColumns,
+                    parallaxStart,
+                    parallaxEnd,
+                    padding: parallax,
+                    height: translates ? height : '',
+                };
+            },
+
+            write({ height, padding }) {
+                css(this.$el, 'paddingBottom', padding || '');
+                height !== false && css(this.$el, 'height', height);
+            },
+
+            events: ['resize'],
+        },
+
+        {
+            read({ rows, scrollColumns, parallaxStart, parallaxEnd }) {
+                return {
+                    scrolled:
+                        scrollColumns && !positionedAbsolute(rows)
+                            ? scrolledOver(this.$el, parallaxStart, parallaxEnd)
+                            : false,
+                };
+            },
+
+            write({ columns, scrolled, scrollColumns, translates }) {
+                if (!scrolled && !translates) {
+                    return;
+                }
+
+                columns.forEach((column, i) =>
+                    column.forEach((el, j) => {
+                        let [x, y] = (translates && translates[i][j]) || [0, 0];
+
+                        if (scrolled) {
+                            y += scrolled * scrollColumns[i];
+                        }
+
+                        css(el, 'transform', `translate(${x}px, ${y}px)`);
+                    }),
+                );
+            },
+
+            events: ['scroll', 'resize'],
+        },
+    ],
+};
+
+function positionedAbsolute(rows) {
+    return rows.flat().some((el) => css(el, 'position') === 'absolute');
+}
+
+function applyMasonry(rows, gutter, next) {
+    const columns = [];
+    const translates = [];
+    const columnHeights = Array(rows[0].length).fill(0);
+    let rowHeights = 0;
+    for (let row of rows) {
+        if (isRtl) {
+            row.reverse();
+        }
+
+        let height = 0;
+        for (const j in row) {
+            const { offsetWidth, offsetHeight } = row[j];
+            const index = next ? j : columnHeights.indexOf(Math.min(...columnHeights));
+            push(columns, index, row[j]);
+            push(translates, index, [
+                (index - j) * offsetWidth * (isRtl ? -1 : 1),
+                columnHeights[index] - rowHeights,
+            ]);
+            columnHeights[index] += offsetHeight + gutter;
+            height = Math.max(height, offsetHeight);
+        }
+
+        rowHeights += height + gutter;
+    }
+
+    return [columns, translates];
+}
+
+function getGutter(rows, cls) {
+    const node = rows.flat().find((el) => hasClass(el, cls));
+    return toFloat(node ? css(node, 'marginTop') : css(rows[0][0], 'paddingLeft'));
+}
+
+function transpose(rows) {
+    const columns = [];
+    for (const row of rows) {
+        for (const i in row) {
+            push(columns, i, row[i]);
+        }
+    }
+    return columns;
+}
+
+function push(array, index, value) {
+    if (!array[index]) {
+        array[index] = [];
+    }
+    array[index].push(value);
+}

package/src/js/core/height-match.js

@@ -0,0 +1,79 @@
+import { $$, boxModelAdjust, css, dimensions, isVisible, pick } from 'uikit-util';
+import { resize } from '../api/observables';
+import { getRows } from './margin';
+
+export default {
+    args: 'target',
+
+    props: {
+        target: String,
+        row: Boolean,
+    },
+
+    data: {
+        target: '> *',
+        row: true,
+    },
+
+    computed: {
+        elements: ({ target }, $el) => $$(target, $el),
+    },
+
+    observe: resize({
+        target: ({ $el, elements }) =>
+            elements.reduce((elements, el) => elements.concat(el, ...el.children), [$el]),
+    }),
+
+    events: {
+        // Hidden elements may change height when fonts load
+        name: 'loadingdone',
+
+        el: () => document.fonts,
+
+        handler() {
+            this.$emit('resize');
+        },
+    },
+
+    update: {
+        read() {
+            return {
+                rows: (this.row ? getRows(this.elements) : [this.elements]).map(match),
+            };
+        },
+
+        write({ rows }) {
+            for (const { heights, elements } of rows) {
+                elements.forEach((el, i) => css(el, 'minHeight', heights[i]));
+            }
+        },
+
+        events: ['resize'],
+    },
+};
+
+function match(elements) {
+    if (elements.length < 2) {
+        return { heights: [''], elements };
+    }
+
+    let heights = elements.map(getHeight);
+    const max = Math.max(...heights);
+
+    return {
+        heights: elements.map((el, i) => (heights[i].toFixed(2) === max.toFixed(2) ? '' : max)),
+        elements,
+    };
+}
+
+function getHeight(element) {
+    const style = pick(element.style, ['display', 'minHeight']);
+
+    if (!isVisible(element)) {
+        css(element, 'display', 'block', 'important');
+    }
+    css(element, 'minHeight', '');
+    const height = dimensions(element).height - boxModelAdjust(element, 'height', 'content-box');
+    css(element, style);
+    return height;
+}

package/src/js/core/height-placeholder.js

@@ -0,0 +1,35 @@
+import { css, query } from 'uikit-util';
+import { resize } from '../api/observables';
+
+export default {
+    args: 'target',
+
+    props: {
+        target: String,
+    },
+
+    data: {
+        target: '',
+    },
+
+    computed: {
+        target: {
+            get: ({ target }, $el) => query(target, $el),
+            observe: ({ target }) => target,
+        },
+    },
+
+    observe: resize({ target: ({ target }) => target }),
+
+    update: {
+        read() {
+            return this.target ? { height: this.target.offsetHeight } : false;
+        },
+
+        write({ height }) {
+            css(this.$el, 'minHeight', height);
+        },
+
+        events: ['resize'],
+    },
+};

package/src/js/core/height-viewport.js

@@ -0,0 +1,98 @@
+import {
+    boxModelAdjust,
+    css,
+    dimensions,
+    endsWith,
+    isNumeric,
+    isString,
+    isVisible,
+    offset,
+    offsetViewport,
+    query,
+    scrollParent,
+    scrollParents,
+    toFloat,
+} from 'uikit-util';
+import { resize, viewport } from '../api/observables';
+
+export default {
+    props: {
+        expand: Boolean,
+        offsetTop: Boolean,
+        offsetBottom: Boolean,
+        min: Number,
+        property: String,
+    },
+
+    data: {
+        expand: false,
+        offsetTop: false,
+        offsetBottom: false,
+        min: 0,
+        property: 'min-height',
+    },
+
+    // check for offsetTop change
+    observe: [
+        viewport({ filter: ({ expand }) => expand }),
+        resize({ target: ({ $el }) => scrollParents($el) }),
+    ],
+
+    update: {
+        read() {
+            if (!isVisible(this.$el)) {
+                return false;
+            }
+
+            let minHeight = '';
+            const box = boxModelAdjust(this.$el, 'height', 'content-box');
+
+            const { body, scrollingElement } = document;
+            const scrollElement = scrollParent(this.$el);
+            const { height: viewportHeight } = offsetViewport(
+                scrollElement === body ? scrollingElement : scrollElement,
+            );
+
+            const isScrollingElement = scrollingElement === scrollElement || body === scrollElement;
+
+            // on mobile devices (iOS and Android) window.innerHeight !== 100vh
+            minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;
+
+            if (this.expand) {
+                const diff = dimensions(scrollElement).height - dimensions(this.$el).height;
+                minHeight += ` - ${diff}px`;
+            } else {
+                if (this.offsetTop) {
+                    if (isScrollingElement) {
+                        const offsetTopEl =
+                            this.offsetTop === true ? this.$el : query(this.offsetTop, this.$el);
+                        const { top } = offset(offsetTopEl);
+                        minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
+                    } else {
+                        minHeight += ` - ${boxModelAdjust(scrollElement, 'height', css(scrollElement, 'boxSizing'))}px`;
+                    }
+                }
+
+                if (this.offsetBottom === true) {
+                    minHeight += ` - ${dimensions(this.$el.nextElementSibling).height}px`;
+                } else if (isNumeric(this.offsetBottom)) {
+                    minHeight += ` - ${this.offsetBottom}vh`;
+                } else if (this.offsetBottom && endsWith(this.offsetBottom, 'px')) {
+                    minHeight += ` - ${toFloat(this.offsetBottom)}px`;
+                } else if (isString(this.offsetBottom)) {
+                    minHeight += ` - ${dimensions(query(this.offsetBottom, this.$el)).height}px`;
+                }
+            }
+
+            minHeight += `${box ? ` - ${box}px` : ''})`;
+
+            return { minHeight };
+        },
+
+        write({ minHeight }) {
+            css(this.$el, this.property, `max(${this.min || 0}px, ${minHeight})`);
+        },
+
+        events: ['resize'],
+    },
+};

package/src/js/core/icon.js

@@ -0,0 +1,285 @@
+import {
+    $,
+    addClass,
+    apply,
+    attr,
+    css,
+    each,
+    hasAttr,
+    hasClass,
+    hyphenate,
+    isRtl,
+    isString,
+    isTag,
+    swap,
+} from 'uikit-util';
+import closeIcon from '../../images/components/close-icon.svg';
+import closeLarge from '../../images/components/close-large.svg';
+import dropParentIcon from '../../images/components/drop-parent-icon.svg';
+import marker from '../../images/components/marker.svg';
+import navParentIconLarge from '../../images/components/nav-parent-icon-large.svg';
+import navParentIcon from '../../images/components/nav-parent-icon.svg';
+import navbarParentIcon from '../../images/components/navbar-parent-icon.svg';
+import navbarToggleIcon from '../../images/components/navbar-toggle-icon.svg';
+import overlayIcon from '../../images/components/overlay-icon.svg';
+import paginationNext from '../../images/components/pagination-next.svg';
+import paginationPrevious from '../../images/components/pagination-previous.svg';
+import searchIcon from '../../images/components/search-icon.svg';
+import searchLarge from '../../images/components/search-large.svg';
+import searchMedium from '../../images/components/search-medium.svg';
+import slidenavNextLarge from '../../images/components/slidenav-next-large.svg';
+import slidenavNext from '../../images/components/slidenav-next.svg';
+import slidenavPreviousLarge from '../../images/components/slidenav-previous-large.svg';
+import slidenavPrevious from '../../images/components/slidenav-previous.svg';
+import spinner from '../../images/components/spinner.svg';
+import totop from '../../images/components/totop.svg';
+import I18n from '../mixin/i18n';
+import Svg, { parseSVG } from '../mixin/svg';
+
+const icons = {
+    spinner,
+    totop,
+    marker,
+    'close-icon': closeIcon,
+    'close-large': closeLarge,
+    'drop-parent-icon': dropParentIcon,
+    'nav-parent-icon': navParentIcon,
+    'nav-parent-icon-large': navParentIconLarge,
+    'navbar-parent-icon': navbarParentIcon,
+    'navbar-toggle-icon': navbarToggleIcon,
+    'overlay-icon': overlayIcon,
+    'pagination-next': paginationNext,
+    'pagination-previous': paginationPrevious,
+    'search-icon': searchIcon,
+    'search-medium': searchMedium,
+    'search-large': searchLarge,
+    'search-toggle-icon': searchIcon,
+    'slidenav-next': slidenavNext,
+    'slidenav-next-large': slidenavNextLarge,
+    'slidenav-previous': slidenavPrevious,
+    'slidenav-previous-large': slidenavPreviousLarge,
+};
+
+const Icon = {
+    install,
+
+    mixins: [Svg],
+
+    args: 'icon',
+
+    props: { icon: String },
+
+    isIcon: true,
+
+    beforeConnect() {
+        addClass(this.$el, 'uk-icon');
+    },
+
+    async connected() {
+        const svg = await this.svg;
+        if (svg) {
+            svg.ariaHidden = true;
+        }
+    },
+
+    methods: {
+        async getSvg() {
+            const icon = getIcon(this.icon);
+
+            if (!icon) {
+                throw 'Icon not found.';
+            }
+
+            return icon;
+        },
+    },
+};
+
+export default Icon;
+
+export const IconComponent = {
+    args: false,
+
+    extends: Icon,
+
+    data: (vm) => ({
+        icon: hyphenate(vm.constructor.options.name),
+    }),
+
+    beforeConnect() {
+        addClass(this.$el, this.$options.id);
+    },
+};
+
+export const NavParentIcon = {
+    extends: IconComponent,
+
+    beforeConnect() {
+        const icon = this.$props.icon;
+        this.icon = this.$el.closest('.uk-nav-primary') ? `${icon}-large` : icon;
+    },
+};
+
+export const Search = {
+    extends: IconComponent,
+
+    mixins: [I18n],
+
+    i18n: { toggle: 'Open Search', submit: 'Submit Search' },
+
+    beforeConnect() {
+        const isToggle =
+            hasClass(this.$el, 'uk-search-toggle') || hasClass(this.$el, 'uk-navbar-toggle');
+        this.icon = isToggle
+            ? 'search-toggle-icon'
+            : hasClass(this.$el, 'uk-search-icon') && this.$el.closest('.uk-search-large')
+              ? 'search-large'
+              : this.$el.closest('.uk-search-medium')
+                ? 'search-medium'
+                : this.$props.icon;
+
+        if (hasAttr(this.$el, 'aria-label')) {
+            return;
+        }
+
+        if (isToggle) {
+            this.$el.ariaLabel = this.t('toggle');
+        } else {
+            const button = this.$el.closest('a,button');
+            if (button) {
+                button.ariaLabel = this.t('submit');
+            }
+        }
+    },
+};
+
+export const Spinner = {
+    extends: IconComponent,
+
+    beforeConnect() {
+        this.$el.role = 'status';
+    },
+
+    methods: {
+        async getSvg() {
+            const icon = await Icon.methods.getSvg.call(this);
+
+            if (this.ratio !== 1) {
+                css($('circle', icon), 'strokeWidth', 1 / this.ratio);
+            }
+
+            return icon;
+        },
+    },
+};
+
+const ButtonComponent = {
+    extends: IconComponent,
+
+    mixins: [I18n],
+
+    beforeConnect() {
+        const button = this.$el.closest('a,button');
+
+        attr(button, 'role', this.role !== null && isTag(button, 'a') ? 'button' : this.role);
+
+        const label = this.t('label');
+        if (label && !hasAttr(button, 'aria-label')) {
+            attr(button, 'aria-label', label);
+        }
+    },
+};
+
+export const Slidenav = {
+    extends: ButtonComponent,
+
+    beforeConnect() {
+        addClass(this.$el, 'uk-slidenav');
+        const icon = this.$props.icon;
+        this.icon = hasClass(this.$el, 'uk-slidenav-large') ? `${icon}-large` : icon;
+    },
+};
+
+export const NavbarToggleIcon = {
+    extends: ButtonComponent,
+
+    i18n: { label: 'Open menu' },
+
+    beforeConnect() {
+        const button = this.$el.closest('a,button');
+        if (button) {
+            button.ariaExpanded = false;
+        }
+    },
+};
+
+export const Close = {
+    extends: ButtonComponent,
+
+    i18n: { label: 'Close' },
+
+    beforeConnect() {
+        this.icon = `close-${hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon'}`;
+    },
+};
+
+export const Marker = {
+    extends: ButtonComponent,
+    i18n: { label: 'Open' },
+};
+
+export const Totop = {
+    extends: ButtonComponent,
+    i18n: { label: 'Back to top' },
+};
+
+export const PaginationNext = {
+    extends: ButtonComponent,
+    i18n: { label: 'Next page' },
+    data: { role: null },
+};
+
+export const PaginationPrevious = {
+    extends: ButtonComponent,
+    i18n: { label: 'Previous page' },
+    data: { role: null },
+};
+
+const parsed = {};
+function install(UIkit) {
+    UIkit.icon.add = (name, svg) => {
+        const added = isString(name) ? { [name]: svg } : name;
+        each(added, (svg, name) => {
+            icons[name] = svg;
+            delete parsed[name];
+        });
+
+        if (UIkit._initialized) {
+            apply(document.body, (el) =>
+                each(UIkit.getComponents(el), (cmp) => {
+                    cmp.$options.isIcon && cmp.icon in added && cmp.$reset();
+                }),
+            );
+        }
+    };
+}
+
+const aliases = { twitter: 'x' };
+
+function getIcon(icon) {
+    icon = aliases[icon] || icon;
+
+    if (!icons[icon]) {
+        return null;
+    }
+
+    if (!parsed[icon]) {
+        parsed[icon] = parseSVG(icons[applyRtl(icon)] || icons[icon]);
+    }
+
+    return parsed[icon].cloneNode(true);
+}
+
+function applyRtl(icon) {
+    return isRtl ? swap(swap(icon, 'left', 'right'), 'previous', 'next') : icon;
+}