uikit 3.14.4-dev.838f092aa → 3.14.4-dev.8a8016a73

package/src/js/mixin/togglable.js

@@ -3,22 +3,22 @@ import {
     addClass,
     Animation,
     css,
-    fastdom,
+    dimensions,
     hasClass,
     includes,
     isBoolean,
     isFunction,
     isVisible,
     noop,
-    offset,
     removeClass,
-    scrollParents,
     startsWith,
     toFloat,
     toggleClass,
     toNodes,
     Transition,
     trigger,
+    unwrap,
+    wrapInner,
 } from 'uikit-util';
 
 export default {
@@ -40,26 +40,6 @@ export default {
         transition: 'ease',
         clsEnter: 'uk-togglabe-enter',
         clsLeave: 'uk-togglabe-leave',
-
-        initProps: {
-            overflow: '',
-            maxHeight: '',
-            paddingTop: '',
-            paddingBottom: '',
-            marginTop: '',
-            marginBottom: '',
-            boxShadow: '',
-        },
-
-        hideProps: {
-            overflow: 'hidden',
-            maxHeight: 0,
-            paddingTop: 0,
-            paddingBottom: 0,
-            marginTop: 0,
-            marginBottom: 0,
-            boxShadow: 'none',
-        },
     },
 
     computed: {
@@ -68,7 +48,7 @@ export default {
         },
 
         hasTransition({ animation }) {
-            return startsWith(animation[0], 'slide');
+            return ['slide', 'reveal'].some((transition) => startsWith(animation[0], transition));
         },
     },
 
@@ -161,130 +141,97 @@ function toggleInstant({ _toggle }) {
     };
 }
 
-function toggleTransition(cmp) {
-    switch (cmp.animation[0]) {
-        case 'slide-left':
-            return slideHorizontal(cmp);
-        case 'slide-right':
-            return slideHorizontal(cmp, true);
-    }
-    return slide(cmp);
-}
+export function toggleTransition(cmp) {
+    const [mode = 'reveal', startProp = 'top'] = cmp.animation[0]?.split('-') || [];
 
-export function slide({
-    isToggled,
-    duration,
-    velocity,
-    initProps,
-    hideProps,
-    transition,
-    _toggle,
-}) {
-    return (el, show) => {
-        const inProgress = Transition.inProgress(el);
-        const inner =
-            !inProgress && el.hasChildNodes()
-                ? toFloat(css(el.firstElementChild, 'marginTop')) +
-                  toFloat(css(el.lastElementChild, 'marginBottom'))
-                : 0;
-        const currentHeight = isVisible(el) ? toFloat(css(el, 'height')) + inner : 0;
+    const dirs = [
+        ['left', 'right'],
+        ['top', 'bottom'],
+    ];
+    const dir = dirs[includes(dirs[0], startProp) ? 0 : 1];
+    const end = dir[1] === startProp;
+    const props = ['width', 'height'];
+    const dimProp = props[dirs.indexOf(dir)];
+    const marginProp = `margin-${dir[0]}`;
+    const marginStartProp = `margin-${startProp}`;
 
-        const props = inProgress ? css(el, Object.keys(initProps)) : show ? hideProps : initProps;
+    return async (el, show) => {
+        let { duration, velocity, transition, _toggle } = cmp;
 
-        Transition.cancel(el);
+        let currentDim = dimensions(el)[dimProp];
+
+        const inProgress = Transition.inProgress(el);
+        await Transition.cancel(el);
 
-        if (!isToggled(el)) {
+        if (show) {
             _toggle(el, true);
         }
 
-        css(el, 'maxHeight', '');
-
-        // Update child components first
-        fastdom.flush();
-
-        const endHeight = toFloat(css(el, 'height')) + inner;
-        duration = velocity * endHeight + duration;
-
-        css(el, { ...props, maxHeight: currentHeight });
-
-        return (
-            show
-                ? Transition.start(
-                      el,
-                      { ...initProps, overflow: 'hidden', maxHeight: endHeight },
-                      duration * (1 - currentHeight / endHeight),
-                      transition
-                  )
-                : Transition.start(
-                      el,
-                      hideProps,
-                      duration * (currentHeight / endHeight),
-                      transition
-                  ).then(() => _toggle(el, false))
-        ).then(() => css(el, initProps));
-    };
-}
-
-function slideHorizontal({ isToggled, duration, velocity, transition, _toggle }, right) {
-    return (el, show) => {
-        const visible = isVisible(el);
-        const marginLeft = toFloat(css(el, 'marginLeft'));
-
-        Transition.cancel(el);
+        const prevProps = Object.fromEntries(
+            ['padding', 'border', 'width', 'height', 'overflow', marginProp, marginStartProp].map(
+                (key) => [key, el.style[key]]
+            )
+        );
 
-        const [scrollElement] = scrollParents(el);
-        css(scrollElement, 'overflowX', 'hidden');
+        const dim = dimensions(el);
+        const currentMargin = toFloat(css(el, marginProp));
+        const marginStart = toFloat(css(el, marginStartProp));
+        const endDim = dim[dimProp] + marginStart;
 
-        if (!isToggled(el)) {
-            _toggle(el, true);
+        if (!inProgress && !show) {
+            currentDim += marginStart;
         }
 
-        const width = toFloat(css(el, 'width'));
-        duration = velocity * width + duration;
-
-        const percent = visible ? ((width + marginLeft * (right ? -1 : 1)) / width) * 100 : 0;
-        const offsetEl = offset(el);
-        const useClipPath = right
-            ? offsetEl.right < scrollElement.clientWidth
-            : Math.round(offsetEl.left) > 0;
+        const [wrapper] = wrapInner(el, '<div>');
+        css(wrapper, {
+            boxSizing: 'border-box',
+            height: dim.height,
+            width: dim.width,
+            ...css(el, [
+                'padding',
+                'borderTop',
+                'borderRight',
+                'borderBottom',
+                'borderLeft',
+                'borderImage',
+                marginStartProp,
+            ]),
+        });
 
         css(el, {
-            clipPath: useClipPath
-                ? right
-                    ? `polygon(0 0,${percent}% 0,${percent}% 100%,0 100%)`
-                    : `polygon(${100 - percent}% 0,100% 0,100% 100%,${100 - percent}% 100%)`
-                : '',
-            marginLeft: (((100 - percent) * (right ? 1 : -1)) / 100) * width,
+            padding: 0,
+            border: 0,
+            [marginStartProp]: 0,
+            width: dim.width,
+            height: dim.height,
+            overflow: 'hidden',
+            [dimProp]: currentDim,
         });
 
-        return (
-            show
-                ? Transition.start(
-                      el,
-                      {
-                          clipPath: useClipPath ? `polygon(0 0,100% 0,100% 100%,0 100%)` : '',
-                          marginLeft: 0,
-                      },
-                      duration * (1 - percent / 100),
-                      transition
-                  )
-                : Transition.start(
-                      el,
-                      {
-                          clipPath: useClipPath
-                              ? right
-                                  ? `polygon(0 0,0 0,0 100%,0 100%)`
-                                  : `polygon(100% 0,100% 0,100% 100%,100% 100%)`
-                              : '',
-                          marginLeft: (right ? 1 : -1) * width,
-                      },
-                      duration * (percent / 100),
-                      transition
-                  ).then(() => _toggle(el, false))
-        ).then(() => {
-            css(scrollElement, 'overflowX', '');
-            css(el, { clipPath: '', marginLeft: '' });
-        });
+        const percent = currentDim / endDim;
+        duration = (velocity * endDim + duration) * (show ? 1 - percent : percent);
+        const endProps = { [dimProp]: show ? endDim : 0 };
+
+        if (end) {
+            css(el, marginProp, endDim - currentDim + currentMargin);
+            endProps[marginProp] = show ? currentMargin : endDim + currentMargin;
+        }
+
+        if (!end ^ (mode === 'reveal')) {
+            css(wrapper, marginProp, -endDim + currentDim);
+            Transition.start(wrapper, { [marginProp]: show ? 0 : -endDim }, duration, transition);
+        }
+
+        try {
+            await Transition.start(el, endProps, duration, transition);
+        } finally {
+            css(el, prevProps);
+            unwrap(wrapper.firstChild);
+
+            if (!show) {
+                _toggle(el, false);
+            }
+        }
     };
 }
 

package/src/js/util/animation.js

@@ -50,13 +50,14 @@ export function transition(element, props, duration = 400, timing = 'linear') {
 export const Transition = {
     start: transition,
 
-    stop(element) {
+    async stop(element) {
         trigger(element, 'transitionend');
-        return Promise.resolve();
+        await Promise.resolve();
     },
 
-    cancel(element) {
+    async cancel(element) {
         trigger(element, 'transitioncanceled');
+        await Promise.resolve();
     },
 
     inProgress(element) {

package/src/js/util/dimensions.js

@@ -94,13 +94,13 @@ export function position(element) {
 }
 
 export function offsetPosition(element) {
-    const offset = [0, 0];
-
     element = toNode(element);
 
-    do {
-        offset[0] += element.offsetTop;
-        offset[1] += element.offsetLeft;
+    const offset = [element.offsetTop, element.offsetLeft];
+
+    while ((element = element.offsetParent)) {
+        offset[0] += element.offsetTop + toFloat(css(element, `borderTopWidth`));
+        offset[1] += element.offsetLeft + toFloat(css(element, `borderLeftWidth`));
 
         if (css(element, 'position') === 'fixed') {
             const win = toWindow(element);
@@ -108,7 +108,7 @@ export function offsetPosition(element) {
             offset[1] += win.scrollX;
             return offset;
         }
-    } while ((element = element.offsetParent));
+    }
 
     return offset;
 }

package/src/js/util/filter.js

@@ -51,12 +51,8 @@ export function matches(element, selector) {
 }
 
 export function closest(element, selector) {
-    if (startsWith(selector, '>')) {
-        selector = selector.slice(1);
-    }
-
     return isElement(element)
-        ? element.closest(selector)
+        ? element.closest(startsWith(selector, '>') ? selector.slice(1) : selector)
         : toNodes(element)
               .map((element) => closest(element, selector))
               .filter(Boolean);
@@ -64,8 +60,8 @@ export function closest(element, selector) {
 
 export function within(element, selector) {
     return isString(selector)
-        ? matches(element, selector) || !!closest(element, selector)
-        : element === selector || toNode(selector).contains(toNode(element));
+        ? !!closest(element, selector)
+        : toNode(selector).contains(toNode(element));
 }
 
 export function parents(element, selector) {

package/src/js/util/position.js

@@ -1,5 +1,5 @@
 import { offset } from './dimensions';
-import { clamp, includes, ucfirst } from './lang';
+import { clamp, isArray, ucfirst } from './lang';
 import { offsetViewport, scrollParents } from './viewport';
 
 const dirs = [
@@ -15,126 +15,65 @@ export function positionAt(element, target, options) {
             ...options.attach,
         },
         offset: [0, 0],
+        placement: [],
         ...options,
     };
 
-    const dim = options.flip
-        ? attachToWithFlip(element, target, options)
-        : attachTo(element, target, options);
-
-    offset(element, dim);
-}
-
-function attachTo(element, target, options) {
-    let { attach, offset: offsetBy } = {
-        attach: {
-            element: ['left', 'top'],
-            target: ['left', 'top'],
-            ...options.attach,
-        },
-        offset: [0, 0],
-        ...options,
-    };
-
-    const position = offset(element);
-    const targetOffset = offset(target);
-    for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
-        position[start] = position[dir] =
-            targetOffset[start] +
-            moveBy(attach.target[i], end, targetOffset[prop]) -
-            moveBy(attach.element[i], end, position[prop]) +
-            +offsetBy[i];
-        position[end] = position[start] + position[prop];
+    if (!isArray(target)) {
+        target = [target, target];
     }
-    return position;
-}
 
-function moveBy(start, end, dim) {
-    return start === 'center' ? dim / 2 : start === end ? dim : 0;
+    offset(element, getPosition(element, target, options));
 }
 
-function attachToWithFlip(element, target, options) {
+function getPosition(element, target, options) {
     const position = attachTo(element, target, options);
-    const targetDim = offset(target);
 
     let {
-        flip,
         attach: { element: elAttach, target: targetAttach },
         offset: elOffset,
         boundary,
-        viewport,
         viewportOffset,
+        placement,
     } = options;
 
-    let viewports = scrollParents(element);
-    if (boundary === target) {
-        viewports = viewports.filter((viewport) => viewport !== boundary);
-    }
-    const [scrollElement] = viewports;
-    viewports.push(viewport);
+    let offsetPosition = position;
+    for (const [i, [prop, , start, end]] of Object.entries(dirs)) {
+        let viewports = scrollParents(target[i]);
+        const [scrollElement] = viewports;
 
-    const offsetPosition = { ...position };
-    for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
-        if (flip !== true && !includes(flip, dir)) {
-            continue;
-        }
-
-        const willFlip =
-            !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
-
-        viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
+        let viewport = getIntersectionArea(...viewports.map(offsetViewport));
 
         if (viewportOffset) {
             viewport[start] += viewportOffset;
             viewport[end] -= viewportOffset;
         }
 
-        if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
-            viewport = getIntersectionArea(viewport, offset(boundary));
+        if (boundary) {
+            viewport = getIntersectionArea(viewport, offsetViewport(boundary));
         }
 
-        const isInStartBoundary = position[start] >= viewport[start];
-        const isInEndBoundary = position[end] <= viewport[end];
+        const isInStartViewport = position[start] >= viewport[start];
+        const isInEndViewport = position[end] <= viewport[end];
 
-        if (isInStartBoundary && isInEndBoundary) {
+        if (isInStartViewport && isInEndViewport) {
             continue;
         }
 
-        let offsetBy;
+        let offsetBy = 0;
 
         // Flip
-        if (willFlip) {
+        if (placement[i] === 'flip') {
             if (
-                (elAttach[i] === end && isInStartBoundary) ||
-                (elAttach[i] === start && isInEndBoundary)
+                (targetAttach[i] === end && isInEndViewport) ||
+                (targetAttach[i] === start && isInStartViewport)
             ) {
                 continue;
             }
 
-            offsetBy =
-                (elAttach[i] === start
-                    ? -position[prop]
-                    : elAttach[i] === end
-                    ? position[prop]
-                    : 0) +
-                (targetAttach[i] === start
-                    ? targetDim[prop]
-                    : targetAttach[i] === end
-                    ? -targetDim[prop]
-                    : 0) -
-                elOffset[i] * 2;
+            offsetBy = flip(element, target, options, i)[start] - position[start];
 
-            if (
-                !isInScrollArea(
-                    {
-                        ...position,
-                        [start]: position[start] + offsetBy,
-                        [end]: position[end] + offsetBy,
-                    },
-                    scrollElement,
-                    i
-                )
-            ) {
+            if (!isInScrollArea(applyOffset(position, offsetBy, i), scrollElement, i)) {
                 if (isInScrollArea(position, scrollElement, i)) {
                     continue;
                 }
@@ -143,26 +82,27 @@ function attachToWithFlip(element, target, options) {
                     return false;
                 }
 
-                if (flip === true || includes(flip, dirs[1 - i][1])) {
-                    const newPos = attachToWithFlip(element, target, {
-                        ...options,
-                        attach: {
-                            element: elAttach.map(flipDir).reverse(),
-                            target: targetAttach.map(flipDir).reverse(),
-                        },
-                        offset: elOffset.reverse(),
-                        flip: flip === true ? flip : [...flip, dirs[1 - i][1]],
-                        recursion: true,
-                    });
-
-                    if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
-                        return newPos;
-                    }
+                const newPos = getPosition(element, target, {
+                    ...options,
+                    attach: {
+                        element: elAttach.map(flipAxis).reverse(),
+                        target: targetAttach.map(flipAxis).reverse(),
+                    },
+                    offset: elOffset.reverse(),
+                    placement: placement.reverse(),
+                    recursion: true,
+                });
+
+                if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
+                    return newPos;
                 }
+
+                continue;
             }
 
-            // Move
-        } else {
+            // Shift
+        } else if (placement[i] === 'shift') {
+            const targetDim = offset(target[i]);
             offsetBy =
                 clamp(
                     clamp(position[start], viewport[start], viewport[end] - position[prop]),
@@ -171,13 +111,54 @@ function attachToWithFlip(element, target, options) {
                 ) - position[start];
         }
 
-        offsetPosition[start] = position[dir] = position[start] + offsetBy;
-        offsetPosition[end] += offsetBy;
+        offsetPosition = applyOffset(offsetPosition, offsetBy, i);
     }
 
     return offsetPosition;
 }
 
+function attachTo(element, target, options) {
+    let { attach, offset: offsetBy } = {
+        attach: {
+            element: ['left', 'top'],
+            target: ['left', 'top'],
+            ...options.attach,
+        },
+        offset: [0, 0],
+        ...options,
+    };
+
+    let elOffset = offset(element);
+
+    for (const [i, [prop, , start, end]] of Object.entries(dirs)) {
+        const targetOffset =
+            attach.target[i] === attach.element[i] ? offsetViewport(target[i]) : offset(target[i]);
+
+        elOffset = applyOffset(
+            elOffset,
+            targetOffset[start] -
+                elOffset[start] +
+                moveBy(attach.target[i], end, targetOffset[prop]) -
+                moveBy(attach.element[i], end, elOffset[prop]) +
+                +offsetBy[i],
+            i
+        );
+    }
+    return elOffset;
+}
+
+function applyOffset(position, offset, i) {
+    const [, dir, start, end] = dirs[i];
+    const newPos = { ...position };
+    newPos[start] = position[dir] = position[start] + offset;
+    newPos[end] += offset;
+    return newPos;
+}
+
+function moveBy(attach, end, dim) {
+    return attach === 'center' ? dim / 2 : attach === end ? dim : 0;
+}
+
 function getIntersectionArea(...rects) {
     let area = {};
     for (const rect of rects) {
@@ -198,12 +179,32 @@ function isInScrollArea(position, scrollElement, dir) {
     return position[start] >= viewport[start] && position[end] <= viewport[end];
 }
 
-function intersectLine(dimA, dimB, dir) {
-    const [, , start, end] = dirs[dir];
-    return dimA[end] > dimB[start] && dimB[end] > dimA[start];
+function flip(element, target, { offset, attach }, i) {
+    return attachTo(element, target, {
+        attach: {
+            element: flipAttach(attach.element, i),
+            target: flipAttach(attach.target, i),
+        },
+        offset: flipOffset(offset, i),
+    });
+}
+
+function flipAttach(attach, i) {
+    const newAttach = [...attach];
+    const index = dirs[i].indexOf(attach[i]);
+    if (~index) {
+        newAttach[i] = dirs[i][1 - (index % 2) + 2];
+    }
+    return newAttach;
+}
+
+function flipOffset(offset, i) {
+    offset = [...offset];
+    offset[i] *= -1;
+    return offset;
 }
 
-function flipDir(prop) {
+function flipAxis(prop) {
     for (let i = 0; i < dirs.length; i++) {
         const index = dirs[i].indexOf(prop);
         if (~index) {

package/src/js/util/style.js

@@ -8,6 +8,7 @@ import {
     isString,
     isUndefined,
     memoize,
+    startsWith,
     toNodes,
 } from './lang';
 
@@ -62,18 +63,11 @@ export function css(element, property, value, priority = '') {
     return elements[0];
 }
 
-const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-export function getCssVar(name, element = document.documentElement) {
-    return css(element, `--uk-${name}`).replace(propertyRe, '$2');
-}
-
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
 export const propName = memoize((name) => vendorPropName(name));
 
-const cssPrefixes = ['webkit', 'moz'];
-
 function vendorPropName(name) {
-    if (name[0] === '-') {
+    if (startsWith(name, '--')) {
         return name;
     }
 
@@ -85,11 +79,8 @@ function vendorPropName(name) {
         return name;
     }
 
-    let i = cssPrefixes.length,
-        prefixedName;
-
-    while (i--) {
-        prefixedName = `-${cssPrefixes[i]}-${name}`;
+    for (const prefix of ['webkit', 'moz']) {
+        const prefixedName = `-${prefix}-${name}`;
         if (prefixedName in style) {
             return prefixedName;
         }