@frankenstyle/uikit 0.0.1

package/src/js/core/img.js

@@ -0,0 +1,157 @@
+import {
+    append,
+    attr,
+    children,
+    createEvent,
+    css,
+    data,
+    escape,
+    fragment,
+    includes,
+    isArray,
+    isEmpty,
+    isTag,
+    parent,
+    queryAll,
+    removeAttr,
+    startsWith,
+    trigger,
+} from 'uikit-util';
+import { intersection } from '../api/observables';
+import { parseOptions } from '../api/options';
+
+export default {
+    args: 'dataSrc',
+
+    props: {
+        dataSrc: String,
+        sources: String,
+        margin: String,
+        target: String,
+        loading: String,
+    },
+
+    data: {
+        dataSrc: '',
+        sources: false,
+        margin: '50%',
+        target: false,
+        loading: 'lazy',
+    },
+
+    connected() {
+        if (this.loading !== 'lazy') {
+            this.load();
+        } else if (isImg(this.$el)) {
+            this.$el.loading = 'lazy';
+            setSrcAttrs(this.$el);
+        }
+    },
+
+    disconnected() {
+        if (this.img) {
+            this.img.onload = '';
+        }
+        delete this.img;
+    },
+
+    observe: intersection({
+        handler(entries, observer) {
+            this.load();
+            observer.disconnect();
+        },
+        options: ({ margin }) => ({ rootMargin: margin }),
+        filter: ({ loading }) => loading === 'lazy',
+        target: ({ $el, $props }) => ($props.target ? [$el, ...queryAll($props.target, $el)] : $el),
+    }),
+
+    methods: {
+        load() {
+            if (this.img) {
+                return this.img;
+            }
+
+            const image = isImg(this.$el)
+                ? this.$el
+                : getImageFromElement(this.$el, this.dataSrc, this.sources);
+
+            removeAttr(image, 'loading');
+            setSrcAttrs(this.$el, image.currentSrc);
+            return (this.img = image);
+        },
+    },
+};
+
+function setSrcAttrs(el, src) {
+    if (isImg(el)) {
+        const parentNode = parent(el);
+        const elements = isTag(parentNode, 'picture') ? children(parentNode) : [el];
+        elements.forEach((el) => setSourceProps(el, el));
+    } else if (src) {
+        const change = !includes(el.style.backgroundImage, src);
+        if (change) {
+            css(el, 'backgroundImage', `url(${escape(src)})`);
+            trigger(el, createEvent('load', false));
+        }
+    }
+}
+
+const srcProps = ['data-src', 'data-srcset', 'sizes'];
+function setSourceProps(sourceEl, targetEl) {
+    for (const prop of srcProps) {
+        const value = data(sourceEl, prop);
+        if (value) {
+            attr(targetEl, prop.replace(/data-/g, ''), value);
+        }
+    }
+}
+
+function getImageFromElement(el, src, sources) {
+    const img = new Image();
+
+    wrapInPicture(img, sources);
+    setSourceProps(el, img);
+    img.onload = () => setSrcAttrs(el, img.currentSrc);
+    img.src = src;
+    return img;
+}
+
+export function wrapInPicture(img, sources) {
+    sources = parseSources(sources);
+
+    if (sources.length) {
+        const picture = fragment('<picture>');
+        for (const attrs of sources) {
+            const source = fragment('<source>');
+            attr(source, attrs);
+            append(picture, source);
+        }
+        append(picture, img);
+    }
+}
+
+function parseSources(sources) {
+    if (!sources) {
+        return [];
+    }
+
+    if (startsWith(sources, '[')) {
+        try {
+            sources = JSON.parse(sources);
+        } catch {
+            sources = [];
+        }
+    } else {
+        sources = parseOptions(sources);
+    }
+
+    if (!isArray(sources)) {
+        sources = [sources];
+    }
+
+    return sources.filter((source) => !isEmpty(source));
+}
+
+function isImg(el) {
+    return isTag(el, 'img');
+}

package/src/js/core/index.js

@@ -0,0 +1,49 @@
+export { default as Accordion } from './accordion';
+export { default as Alert } from './alert';
+export { default as Cover } from './cover';
+export { default as Drop, default as Dropdown } from './drop';
+export { default as Dropnav } from './dropnav';
+export { default as FormCustom } from './form-custom';
+export { default as Grid } from './grid';
+export { default as HeightMatch } from './height-match';
+export { default as HeightPlaceholder } from './height-placeholder';
+export { default as HeightViewport } from './height-viewport';
+export { default as Icon } from './icon';
+export { default as Img } from './img';
+export { default as Inverse } from './inverse';
+export { default as Leader } from './leader';
+export { default as Margin } from './margin';
+export { default as Modal } from './modal';
+export { default as Nav } from './nav';
+export { default as Navbar } from './navbar';
+export { default as Offcanvas } from './offcanvas';
+export { default as OverflowAuto } from './overflow-auto';
+export { default as OverflowFade } from './overflow-fade';
+export { default as Responsive } from './responsive';
+export { default as Scroll } from './scroll';
+export { default as Scrollspy } from './scrollspy';
+export { default as ScrollspyNav } from './scrollspy-nav';
+export { default as Sticky } from './sticky';
+export { default as Svg } from './svg';
+export { default as Switcher } from './switcher';
+export { default as Tab } from './tab';
+export { default as Toggle } from './toggle';
+export { default as Video } from './video';
+
+// Icon components
+export {
+    Close,
+    IconComponent as DropParentIcon,
+    Marker,
+    NavParentIcon,
+    IconComponent as NavbarParentIcon,
+    NavbarToggleIcon,
+    IconComponent as OverlayIcon,
+    PaginationNext,
+    PaginationPrevious,
+    Search as SearchIcon,
+    Slidenav as SlidenavNext,
+    Slidenav as SlidenavPrevious,
+    Spinner,
+    Totop,
+} from './icon';

package/src/js/core/inverse.js

@@ -0,0 +1,173 @@
+import {
+    $$,
+    css,
+    dimensions,
+    intersectRect,
+    matches,
+    observeResize,
+    on,
+    parent,
+    replaceClass,
+    toNodes,
+} from 'uikit-util';
+import { intersection, mutation } from '../api/observables';
+
+export default {
+    props: {
+        target: String,
+        selActive: String,
+    },
+
+    data: {
+        target: false,
+        selActive: false,
+    },
+
+    connected() {
+        this.isIntersecting = 0;
+    },
+
+    computed: {
+        target: ({ target }, $el) => (target ? $$(target, $el) : $el),
+    },
+
+    watch: {
+        target: {
+            handler() {
+                queueMicrotask(() => this.$reset());
+            },
+            immediate: false,
+        },
+    },
+
+    observe: [
+        intersection({
+            handler(entries) {
+                this.isIntersecting = entries.reduce(
+                    (sum, { isIntersecting }) =>
+                        sum + (isIntersecting ? 1 : this.isIntersecting ? -1 : 0),
+                    this.isIntersecting,
+                );
+                this.$emit();
+            },
+            target: ({ target }) => target,
+            args: { intersecting: false },
+        }),
+        mutation({
+            target: ({ target }) => target,
+            options: { attributes: true, attributeFilter: ['class'] },
+        }),
+        {
+            target: ({ target }) => target,
+            observe: (target, handler) => {
+                const observer = observeResize(
+                    [...toNodes(target), document.documentElement],
+                    handler,
+                );
+                const listener = [
+                    on(document, 'scroll itemshown itemhidden', handler, {
+                        passive: true,
+                        capture: true,
+                    }),
+                    on(document, 'show hide transitionstart', (e) => {
+                        handler();
+                        return observer.observe(e.target);
+                    }),
+                    on(document, 'shown hidden transitionend transitioncancel', (e) => {
+                        handler();
+                        return observer.unobserve(e.target);
+                    }),
+                ];
+
+                return {
+                    observe: observer.observe.bind(observer),
+                    unobserve: observer.unobserve.bind(observer),
+                    disconnect() {
+                        observer.disconnect();
+                        listener.map((off) => off());
+                    },
+                };
+            },
+            handler() {
+                this.$emit();
+            },
+        },
+    ],
+
+    update: {
+        read() {
+            if (!this.isIntersecting) {
+                return false;
+            }
+
+            for (const target of toNodes(this.target)) {
+                let color =
+                    !this.selActive || matches(target, this.selActive)
+                        ? findTargetColor(target)
+                        : '';
+
+                if (color !== false) {
+                    replaceClass(target, 'uk-light uk-dark', color);
+                }
+            }
+        },
+    },
+};
+
+function findTargetColor(target) {
+    const dim = dimensions(target);
+    const viewport = dimensions(window);
+
+    if (!intersectRect(dim, viewport)) {
+        return false;
+    }
+
+    const { left, top, height, width } = dim;
+
+    let last;
+    for (const percent of [0.25, 0.5, 0.75]) {
+        const elements = target.ownerDocument.elementsFromPoint(
+            Math.max(0, Math.min(left + width * percent, viewport.width - 1)),
+            Math.max(0, Math.min(top + height / 2, viewport.height - 1)),
+        );
+
+        for (const element of elements) {
+            if (
+                target.contains(element) ||
+                !checkVisibility(element) ||
+                (element.closest('[class*="-leave"]') &&
+                    elements.some((el) => element !== el && matches(el, '[class*="-enter"]')))
+            ) {
+                continue;
+            }
+
+            const color = css(element, '--uk-inverse');
+            if (color) {
+                if (color === last) {
+                    return `uk-${color}`;
+                }
+
+                last = color;
+                break;
+            }
+        }
+    }
+
+    return last ? `uk-${last}` : '';
+}
+
+// TODO: once it becomes Baseline `element.checkVisibility({ opacityProperty: true, visibilityProperty: true })`
+function checkVisibility(element) {
+    if (css(element, 'visibility') !== 'visible') {
+        return false;
+    }
+
+    while (element) {
+        if (css(element, 'opacity') === '0') {
+            return false;
+        }
+        element = parent(element);
+    }
+
+    return true;
+}

package/src/js/core/leader.js

@@ -0,0 +1,52 @@
+import { attr, css, toggleClass, unwrap, wrapInner } from 'uikit-util';
+import { resize } from '../api/observables';
+import Class from '../mixin/class';
+import Media from '../mixin/media';
+
+export default {
+    mixins: [Class, Media],
+
+    props: {
+        fill: String,
+    },
+
+    data: {
+        fill: '',
+        clsWrapper: 'uk-leader-fill',
+        clsHide: 'uk-leader-hide',
+        attrFill: 'data-fill',
+    },
+
+    computed: {
+        fill: ({ fill }, $el) => fill || css($el, '--uk-leader-fill-content'),
+    },
+
+    connected() {
+        [this.wrapper] = wrapInner(this.$el, `<span class="${this.clsWrapper}">`);
+    },
+
+    disconnected() {
+        unwrap(this.wrapper.childNodes);
+    },
+
+    observe: resize(),
+
+    update: {
+        read() {
+            const width = Math.trunc(this.$el.offsetWidth / 2);
+
+            return {
+                width,
+                fill: this.fill,
+                hide: !this.matchMedia,
+            };
+        },
+
+        write({ width, fill, hide }) {
+            toggleClass(this.wrapper, this.clsHide, hide);
+            attr(this.wrapper, this.attrFill, new Array(width).join(fill));
+        },
+
+        events: ['resize'],
+    },
+};

package/src/js/core/margin.js

@@ -0,0 +1,125 @@
+import { children, isRtl, isVisible, offsetPosition, toggleClass } from 'uikit-util';
+import { mutation, resize } from '../api/observables';
+
+export default {
+    props: {
+        margin: String,
+        firstColumn: Boolean,
+    },
+
+    data: {
+        margin: 'uk-margin-small-top',
+        firstColumn: 'uk-first-column',
+    },
+
+    observe: [
+        mutation({
+            options: {
+                childList: true,
+            },
+        }),
+        mutation({
+            options: {
+                attributes: true,
+                attributeFilter: ['style'],
+            },
+        }),
+        resize({
+            handler(mutations) {
+                for (const {
+                    borderBoxSize: [{ inlineSize, blockSize }],
+                } of mutations) {
+                    if (inlineSize || blockSize) {
+                        this.$emit('resize');
+                        return;
+                    }
+                }
+            },
+            target: ({ $el }) => [$el, ...children($el)],
+        }),
+    ],
+
+    update: {
+        read() {
+            return {
+                rows: getRows(children(this.$el)),
+            };
+        },
+
+        write({ rows }) {
+            for (const row of rows) {
+                for (const el of row) {
+                    toggleClass(el, this.margin, rows[0] !== row);
+                    toggleClass(el, this.firstColumn, row[isRtl ? row.length - 1 : 0] === el);
+                }
+            }
+        },
+
+        events: ['resize'],
+    },
+};
+
+export function getRows(elements) {
+    const sorted = [[]];
+    const withOffset = elements.some(
+        (el, i) => i && elements[i - 1].offsetParent !== el.offsetParent,
+    );
+
+    for (const el of elements) {
+        if (!isVisible(el)) {
+            continue;
+        }
+
+        const offset = getOffset(el, withOffset);
+
+        for (let i = sorted.length - 1; i >= 0; i--) {
+            const current = sorted[i];
+
+            if (!current[0]) {
+                current.push(el);
+                break;
+            }
+
+            const offsetCurrent = getOffset(current[0], withOffset);
+
+            if (offset.top >= offsetCurrent.bottom - 1 && offset.top !== offsetCurrent.top) {
+                sorted.push([el]);
+                break;
+            }
+
+            if (offset.bottom - 1 > offsetCurrent.top || offset.top === offsetCurrent.top) {
+                let j = current.length - 1;
+                for (; j >= 0; j--) {
+                    const offsetCurrent = getOffset(current[j], withOffset);
+                    if (offset.left >= offsetCurrent.left) {
+                        break;
+                    }
+                }
+                current.splice(j + 1, 0, el);
+                break;
+            }
+
+            if (i === 0) {
+                sorted.unshift([el]);
+                break;
+            }
+        }
+    }
+
+    return sorted;
+}
+
+function getOffset(element, offset = false) {
+    let { offsetTop, offsetLeft, offsetHeight, offsetWidth } = element;
+
+    if (offset) {
+        [offsetTop, offsetLeft] = offsetPosition(element);
+    }
+
+    return {
+        top: offsetTop,
+        left: offsetLeft,
+        bottom: offsetTop + offsetHeight,
+        right: offsetLeft + offsetWidth,
+    };
+}