uikit 3.13.7 → 3.13.8-dev.2fb6bed58

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.13.7",
+    "version": "3.13.8-dev.2fb6bed58",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/drop.js

@@ -62,8 +62,11 @@ export default {
         this.tracker = new MouseTracker();
     },
 
-    connected() {
+    beforeConnect() {
         this.clsDrop = this.$props.clsDrop || `uk-${this.$options.name}`;
+    },
+
+    connected() {
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.target) {

package/src/js/mixin/position.js

@@ -3,6 +3,7 @@ import {
     flipPosition,
     getCssVar,
     offset as getOffset,
+    includes,
     isNumeric,
     isRtl,
     positionAt,
@@ -30,9 +31,8 @@ export default {
 
     methods: {
         positionAt(element, target, boundary) {
-            const axis = this.getAxis();
-            const dir = this.pos[0];
-            const align = this.pos[1];
+            const [dir, align] = this.pos;
+            const axis = this.getAxis(dir);
 
             let { offset } = this;
             if (!isNumeric(offset)) {
@@ -43,26 +43,63 @@ export default {
                     : 0;
             }
             offset = toPx(offset) + toPx(getCssVar('position-offset', element));
+            offset = [includes(['left', 'top'], dir) ? -offset : +offset, 0];
 
-            const { x, y } = positionAt(
-                element,
-                target,
-                axis === 'x' ? `${flipPosition(dir)} ${align}` : `${align} ${flipPosition(dir)}`,
-                axis === 'x' ? `${dir} ${align}` : `${align} ${dir}`,
-                axis === 'x'
-                    ? `${dir === 'left' ? -offset : offset}`
-                    : ` ${dir === 'top' ? -offset : offset}`,
-                null,
-                this.flip,
-                boundary
-            ).target;
+            const attach = {
+                element: [flipPosition(dir), align],
+                target: [dir, align],
+            };
 
-            this.dir = axis === 'x' ? x : y;
-            this.align = axis === 'x' ? y : x;
+            if (axis === 'y') {
+                for (const prop in attach) {
+                    attach[prop] = attach[prop].reverse();
+                }
+                offset = offset.reverse();
+            }
+
+            positionAt(element, target, {
+                attach,
+                offset,
+                boundary,
+                flip: this.flip,
+            });
+
+            [this.dir, this.align] = getAlignment(element, target, this.pos);
         },
 
-        getAxis() {
-            return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
+        getAxis(dir = this.dir) {
+            return includes(['top', 'bottom'], dir) ? 'y' : 'x';
         },
     },
 };
+
+function getAlignment(el, target, [dir, align]) {
+    const elOffset = getOffset(el);
+    const targetOffset = getOffset(target);
+    const properties = [
+        ['left', 'right'],
+        ['top', 'bottom'],
+    ];
+
+    for (const props of properties) {
+        if (elOffset[props[0]] >= targetOffset[props[1]]) {
+            dir = props[1];
+            break;
+        }
+        if (elOffset[props[1]] <= targetOffset[props[0]]) {
+            dir = props[0];
+            break;
+        }
+    }
+
+    const props = includes(properties[0], dir) ? properties[1] : properties[0];
+    if (elOffset[props[0]] === targetOffset[props[0]]) {
+        align = props[0];
+    } else if (elOffset[props[1]] === targetOffset[props[1]]) {
+        align = props[1];
+    } else {
+        align = 'center';
+    }
+
+    return [dir, align];
+}

package/src/js/util/position.js

@@ -1,156 +1,152 @@
 import { offset } from './dimensions';
-import { each, endsWith, includes, toFloat } from './lang';
+import { clamp, includes } from './lang';
 import { getViewport, scrollParents } from './viewport';
 
-const dirs = {
-    width: ['x', 'left', 'right'],
-    height: ['y', 'top', 'bottom'],
-};
-
-export function positionAt(
-    element,
-    target,
-    elAttach,
-    targetAttach,
-    elOffset,
-    targetOffset,
-    flip,
-    boundary
-) {
-    elAttach = getPos(elAttach);
-    targetAttach = getPos(targetAttach);
-
-    const flipped = { element: elAttach, target: targetAttach };
-
-    if (!element || !target) {
-        return flipped;
+const dirs = [
+    ['width', 'x', 'left', 'right'],
+    ['height', 'y', 'top', 'bottom'],
+];
+
+export function positionAt(element, target, options) {
+    options = {
+        attach: {
+            element: ['left', 'top'],
+            target: ['left', 'top'],
+            ...options.attach,
+        },
+        offset: [0, 0],
+        ...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 in dirs) {
+        const [prop, dir, start, end] = dirs[i];
+        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];
     }
+    return position;
+}
 
-    const dim = offset(element);
+function attachToWithFlip(element, target, options) {
+    const position = attachTo(element, target, options);
     const targetDim = offset(target);
-    const position = targetDim;
+    const viewports = scrollParents(element).map(getViewport);
+
+    let {
+        flip,
+        attach: { element: elAttach, target: targetAttach },
+        offset: elOffset,
+        boundary,
+        viewport,
+    } = options;
 
-    moveTo(position, elAttach, dim, -1);
-    moveTo(position, targetAttach, targetDim, 1);
+    viewports.push(viewport);
 
-    elOffset = getOffsets(elOffset, dim.width, dim.height);
-    targetOffset = getOffsets(targetOffset, targetDim.width, targetDim.height);
+    for (const i in dirs) {
+        const [prop, dir, start, end] = dirs[i];
 
-    elOffset['x'] += targetOffset['x'];
-    elOffset['y'] += targetOffset['y'];
+        if (flip !== true && !includes(flip, dir)) {
+            continue;
+        }
 
-    position.left += elOffset['x'];
-    position.top += elOffset['y'];
+        const willFlip =
+            !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
 
-    if (flip) {
-        let boundaries = scrollParents(element).map(getViewport);
+        viewport = getIntersectionArea(...viewports, willFlip ? null : boundary);
+        const isInStartBoundary = position[start] >= viewport[start];
+        const isInEndBoundary = position[end] <= viewport[end];
 
-        if (boundary && !includes(boundaries, boundary)) {
-            boundaries.unshift(boundary);
+        if (isInStartBoundary && isInEndBoundary) {
+            continue;
         }
 
-        boundaries = boundaries.map((el) => offset(el));
+        let offsetBy;
 
-        each(dirs, ([dir, align, alignFlip], prop) => {
-            if (!(flip === true || includes(flip, dir))) {
-                return;
+        // Flip
+        if (willFlip) {
+            if (
+                (elAttach[i] === end && isInStartBoundary) ||
+                (elAttach[i] === start && isInEndBoundary)
+            ) {
+                continue;
             }
 
-            boundaries.some((boundary) => {
-                const elemOffset =
-                    elAttach[dir] === align
-                        ? -dim[prop]
-                        : elAttach[dir] === alignFlip
-                        ? dim[prop]
-                        : 0;
-
-                const targetOffset =
-                    targetAttach[dir] === align
-                        ? targetDim[prop]
-                        : targetAttach[dir] === alignFlip
-                        ? -targetDim[prop]
-                        : 0;
-
-                if (
-                    position[align] < boundary[align] ||
-                    position[align] + dim[prop] > boundary[alignFlip]
-                ) {
-                    const centerOffset = dim[prop] / 2;
-                    const centerTargetOffset =
-                        targetAttach[dir] === 'center' ? -targetDim[prop] / 2 : 0;
-
-                    return (
-                        (elAttach[dir] === 'center' &&
-                            (apply(centerOffset, centerTargetOffset) ||
-                                apply(-centerOffset, -centerTargetOffset))) ||
-                        apply(elemOffset, targetOffset)
-                    );
-                }
-
-                function apply(elemOffset, targetOffset) {
-                    const newVal = toFloat(
-                        (position[align] + elemOffset + targetOffset - elOffset[dir] * 2).toFixed(4)
-                    );
-
-                    if (newVal >= boundary[align] && newVal + dim[prop] <= boundary[alignFlip]) {
-                        position[align] = newVal;
-
-                        for (const el of ['element', 'target']) {
-                            if (elemOffset) {
-                                flipped[el][dir] =
-                                    flipped[el][dir] === dirs[prop][1]
-                                        ? dirs[prop][2]
-                                        : dirs[prop][1];
-                            }
-                        }
-
-                        return true;
-                    }
-                }
-            });
-        });
-    }
+            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;
+
+            // Move
+        } else {
+            offsetBy =
+                clamp(
+                    clamp(position[start], viewport[start], viewport[end] - position[prop]),
+                    targetDim[start] - position[prop] + elOffset[i],
+                    targetDim[end] - elOffset[i]
+                ) - position[start];
+        }
 
-    offset(element, position);
+        position[start] = position[dir] = position[start] + offsetBy;
+        position[end] += offsetBy;
+    }
 
-    return flipped;
+    return position;
 }
 
-function moveTo(position, attach, dim, factor) {
-    each(dirs, ([dir, align, alignFlip], prop) => {
-        if (attach[dir] === alignFlip) {
-            position[align] += dim[prop] * factor;
-        } else if (attach[dir] === 'center') {
-            position[align] += (dim[prop] * factor) / 2;
-        }
-    });
+function moveBy(start, end, dim) {
+    return start === 'center' ? dim / 2 : start === end ? dim : 0;
 }
 
-function getPos(pos) {
-    const x = /left|center|right/;
-    const y = /top|center|bottom/;
-
-    pos = (pos || '').split(' ');
-
-    if (pos.length === 1) {
-        pos = x.test(pos[0])
-            ? pos.concat('center')
-            : y.test(pos[0])
-            ? ['center'].concat(pos)
-            : ['center', 'center'];
+function getIntersectionArea(...elements) {
+    let intersection;
+    for (const el of elements.filter(Boolean)) {
+        const rect = offset(el);
+        if (!intersection) {
+            intersection = rect;
+            continue;
+        }
+        for (const prop of ['left', 'top']) {
+            intersection[prop] = Math.max(rect[prop], intersection[prop]);
+        }
+        for (const prop of ['right', 'bottom']) {
+            intersection[prop] = Math.min(rect[prop], intersection[prop]);
+        }
     }
-
-    return {
-        x: x.test(pos[0]) ? pos[0] : 'center',
-        y: y.test(pos[1]) ? pos[1] : 'center',
-    };
+    return intersection;
 }
 
-function getOffsets(offsets, width, height) {
-    const [x, y] = (offsets || '').split(' ');
-
-    return {
-        x: x ? toFloat(x) * (endsWith(x, '%') ? width / 100 : 1) : 0,
-        y: y ? toFloat(y) * (endsWith(y, '%') ? height / 100 : 1) : 0,
-    };
+function intersectLine(dimA, dimB, dir) {
+    const [, , start, end] = dirs[dir];
+    return dimA[end] > dimB[start] && dimB[end] > dimA[start];
 }

package/tests/drop.html

@@ -395,12 +395,6 @@
                             <td>true</td>
                             <td>Automatic Drop flip.</td>
                         </tr>
-                        <tr>
-                            <td><code>cls</code></td>
-                            <td>String</td>
-                            <td>'uk-drop'</td>
-                            <td>The Drop container class.</td>
-                        </tr>
                         <tr>
                             <td><code>offset</code></td>
                             <td>Number</td>

package/tests/dropdown.html

@@ -384,8 +384,8 @@
                         <tr>
                             <td><code>boundary</code></td>
                             <td>CSS selector</td>
-                            <td>window</td>
-                            <td>Referenced element to keep Dropdown's visibility.</td>
+                            <td>true</td>
+                            <td>The area that the element will be checked for overflow, causing the Drop to flip. By default, it's the scrolling containers of the Drop's element.</td>
                         </tr>
                         <tr>
                             <td><code>boundary-align</code></td>
@@ -399,12 +399,6 @@
                             <td>true</td>
                             <td>Automatic Dropdown flip.</td>
                         </tr>
-                        <tr>
-                            <td><code>cls</code></td>
-                            <td>String</td>
-                            <td>'uk-dropdown'</td>
-                            <td>The Dropdown container class.</td>
-                        </tr>
                         <tr>
                             <td><code>offset</code></td>
                             <td>Number</td>

package/tests/position.html

@@ -9,7 +9,7 @@
         <style>
 
             /* JavaScript */
-            #js-boundary {
+            #js-viewport {
                 height: 300px;
                 outline: 1px solid rgba(0,0,0,0.1);
                 position: relative;
@@ -26,7 +26,6 @@
 
             #js-element {
                 position: absolute;
-                display: none;
                 width: 75px;
                 height: 75px;
                 background: rgba(0,0,0,0.1);
@@ -238,13 +237,13 @@
 
             <h2>JavaScript</h2>
 
-            <div id="js-boundary" class="uk-margin">
+            <div id="js-viewport" class="uk-margin">
                 <div id="js-target" class="uk-flex uk-flex-center uk-flex-middle" draggable="true">Drag me!</div>
             </div>
 
             <div id="js-element"></div>
 
-            <div class="uk-grid uk-child-width-auto uk-form-stacked">
+            <div class="uk-grid uk-child-width-auto uk-form-stacked" style="margin-bottom: 100vh">
                 <div>
 
                     <div class="uk-margin">
@@ -327,27 +326,26 @@
 
         <script>
 
-            var util = UIkit.util,
-                $ = util.$,
-                on = util.on,
-                offset = util.offset,
-                ticking,
-                element = $('#js-element'),
-                boundary = $('#js-boundary'),
-                target = $('#js-target'),
-                offsetX,
-                offsetY;
+            const {$, $$, css, getEventPos, on, offset, positionAt} = UIkit.util;
+            let viewport = $('#js-viewport');
+            let element = $('#js-element');
+            let target = $('#js-target');
+            let offsetX;
+            let offsetY;
 
             function position() {
-                util.positionAt(
+                positionAt(
                     element,
                     target,
-                    $('#js-element_x').value + ' ' + $('#js-element_y').value,
-                    $('#js-target_x').value + ' ' + $('#js-target_y').value,
-                    $('#js-offset_x').value + ' ' + $('#js-offset_y').value,
-                    null,
-                    $('#js-flip_x').value + $('#js-flip_y').value,
-                    boundary
+                    {
+                        viewport,
+                        attach:{
+                            element: [$('#js-element_x').value, $('#js-element_y').value],
+                            target: [$('#js-target_x').value, $('#js-target_y').value]
+                        },
+                        offset: [$('#js-offset_x').value, $('#js-offset_y').value],
+                        flip: [$('#js-flip_x').value, $('#js-flip_y').value]
+                    }
                 );
             }
 
@@ -359,33 +357,34 @@
 
             });
 
+            let lastPos;
             on(window, 'dragover', function (e) {
 
-                e.preventDefault();
-
-                if (!ticking) {
-                    requestAnimationFrame(function () {
+                const pos = getEventPos(e);
 
-                        util.positionAt(
-                            target,
-                            boundary,
-                            'left top',
-                            'left top',
-                            (e.pageX - offset(boundary).left - offsetX) + ' ' + (e.pageY - offset(boundary).top - offsetY)
-                        );
+                if (lastPos?.x === pos.x && lastPos?.y === pos.y) {
+                    return;
+                }
+                lastPos = pos;
 
-                        position();
+                e.preventDefault();
 
-                        ticking = false;
-                    });
-                    ticking = true;
-                }
+                // positions target at mouse cursor
+                positionAt(
+                    target,
+                    viewport,
+                    {
+                        offset: [e.pageX - offset(viewport).left - offsetX, e.pageY - offset(viewport).top - offsetY]
+                    }
+                );
 
+                // positions element at target
+                position();
             });
 
-            util.$$('select,input').forEach(el => on(el, 'change', position));
+            on($$('select,input'), 'change', position);
+            on(window, 'scroll', position);
 
-            util.css(element, 'display', 'block');
             position();
 
         </script>