uikit 3.14.4-dev.07daf8fb8 → 3.14.4-dev.154737924

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.14.4-dev.07daf8fb8",
+    "version": "3.14.4-dev.154737924",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/navbar.js

@@ -38,6 +38,8 @@ export default {
         offset: Number,
         boundary: Boolean,
         target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
         clsDrop: String,
         delayShow: Number,
         delayHide: Number,

package/src/js/core/toggle.js

@@ -181,7 +181,7 @@ export default {
         },
 
         {
-            name: 'toggled',
+            name: 'hide show',
 
             self: true,
 
@@ -189,10 +189,8 @@ export default {
                 return this.target;
             },
 
-            handler(e, toggled) {
-                if (e.target === this.target[0]) {
-                    this.updateAria(toggled);
-                }
+            handler({ type }) {
+                this.updateAria(type === 'show');
             },
         },
 

package/src/js/mixin/modal.js

@@ -135,8 +135,8 @@ export default {
                 );
 
                 if (this.overlay) {
-                    once(this.$el, 'hidden', preventOverscroll(this.$el));
-                    once(this.$el, 'hidden', preventBackgroundScroll());
+                    once(this.$el, 'hidden', preventOverscroll(this.$el), { self: true });
+                    once(this.$el, 'hidden', preventBackgroundScroll(), { self: true });
                 }
 
                 if (this.stack) {

package/src/js/mixin/position.js

@@ -35,6 +35,7 @@ export default {
     methods: {
         positionAt(element, target, boundary) {
             let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
+            const placement = [this.flip && 'flip', this.shift && 'shift'];
 
             const attach = {
                 element: [this.inset ? this.dir : flipPosition(this.dir), this.align],
@@ -43,9 +44,10 @@ export default {
 
             if (this.axis === 'y') {
                 for (const prop in attach) {
-                    attach[prop] = attach[prop].reverse();
+                    attach[prop].reverse();
                 }
-                offset = offset.reverse();
+                offset.reverse();
+                placement.reverse();
             }
 
             const [scrollElement] = scrollParents(element, /auto|scroll/);
@@ -59,8 +61,7 @@ export default {
                 attach,
                 offset,
                 boundary,
-                flip: this.flip,
-                shift: this.shift,
+                placement,
                 viewportOffset: this.getViewportOffset(element),
             });
 

package/src/js/mixin/togglable.js

@@ -177,6 +177,7 @@ export function toggleTransition(cmp) {
         const currentMargin = toFloat(css(el, marginProp));
         const marginStart = toFloat(css(el, marginStartProp));
         const endDim = dim[dimProp] + marginStart;
+        const overflow = getOverflow(el);
 
         if (!inProgress && !show) {
             currentDim += marginStart;
@@ -199,12 +200,12 @@ export function toggleTransition(cmp) {
         });
 
         css(el, {
+            overflow,
             padding: 0,
             border: 0,
             [marginStartProp]: 0,
             width: dim.width,
             height: dim.height,
-            overflow: 'hidden',
             [dimProp]: currentDim,
         });
 
@@ -251,3 +252,17 @@ function toggleAnimation(cmp) {
         );
     };
 }
+
+function getOverflow(el) {
+    return [
+        ['X', 'Width'],
+        ['Y', 'Height'],
+    ]
+        .map(([axis, prop]) =>
+            includes(['auto', 'scroll'], css(el, `overflow${axis}`)) &&
+            el[`scroll${prop}`] > el[`client${prop}`]
+                ? 'scroll'
+                : 'hidden'
+        )
+        .join(' ');
+}

package/src/js/util/position.js

@@ -15,6 +15,7 @@ export function positionAt(element, target, options) {
             ...options.attach,
         },
         offset: [0, 0],
+        placement: [],
         ...options,
     };
 
@@ -25,55 +26,19 @@ export function positionAt(element, target, options) {
     offset(element, getPosition(element, target, options));
 }
 
-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);
-
-    for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
-        const targetOffset =
-            attach.target[i] === attach.element[i] ? offsetViewport(target[i]) : offset(target[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;
-}
-
-function moveBy(start, end, dim) {
-    return start === 'center' ? dim / 2 : start === end ? dim : 0;
-}
-
 function getPosition(element, target, options) {
     const position = attachTo(element, target, options);
 
     let {
-        flip,
-        shift,
         attach: { element: elAttach, target: targetAttach },
         offset: elOffset,
         boundary,
         viewportOffset,
+        placement,
     } = options;
 
-    if (!flip && !shift) {
-        return position;
-    }
-
-    const offsetPosition = { ...position };
-    for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
+    let offsetPosition = position;
+    for (const [i, [prop, , start, end]] of Object.entries(dirs)) {
         let viewports = scrollParents(target[i]);
         const [scrollElement] = viewports;
 
@@ -96,42 +61,19 @@ function getPosition(element, target, options) {
         }
 
         let offsetBy = 0;
-        const targetDim = offset(target[i]);
 
         // Flip
-        if (!intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i)) {
+        if (placement[i] === 'flip') {
             if (
-                !flip ||
-                (elAttach[i] === end && isInStartViewport) ||
-                (elAttach[i] === start && isInEndViewport)
+                (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,10 +85,11 @@ function getPosition(element, target, options) {
                 const newPos = getPosition(element, target, {
                     ...options,
                     attach: {
-                        element: elAttach.map(flipDir).reverse(),
-                        target: targetAttach.map(flipDir).reverse(),
+                        element: elAttach.map(flipAxis).reverse(),
+                        target: targetAttach.map(flipAxis).reverse(),
                     },
                     offset: elOffset.reverse(),
+                    placement: placement.reverse(),
                     recursion: true,
                 });
 
@@ -158,7 +101,8 @@ function getPosition(element, target, options) {
             }
 
             // Shift
-        } else if (shift) {
+        } else if (placement[i] === 'shift') {
+            const targetDim = offset(target[i]);
             offsetBy =
                 clamp(
                     clamp(position[start], viewport[start], viewport[end] - position[prop]),
@@ -167,13 +111,54 @@ function getPosition(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) {
@@ -194,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/tests/navbar.html

@@ -3129,7 +3129,19 @@
                             <td><code>target</code></td>
                             <td>Boolean, CSS selector</td>
                             <td>false</td>
-                            <td>Align Drop to navbar.</td>
+                            <td>The element the drops are positioned to (`true` for window).</td>
+                        </tr>
+                        <tr>
+                            <td><code>target-x</code></td>
+                            <td>Boolean, CSS selector</td>
+                            <td>false</td>
+                            <td>The element's X axis the drops are positioned to (`true` for window).</td>
+                        </tr>
+                        <tr>
+                            <td><code>target-y</code></td>
+                            <td>Boolean, CSS selector</td>
+                            <td>false</td>
+                            <td>The element's Y axis the drop are positioned to (`true` for window).</td>
                         </tr>
                         <tr>
                             <td><code>cls-drop</code></td>

package/tests/position.html

@@ -303,8 +303,22 @@
 
                     <div class="uk-margin">
                         <span class="uk-form-label">Placement</span>
-                        <label><input id="js-flip" class="uk-checkbox" type="checkbox" checked> Flip</label>
-                        <label><input id="js-shift" class="uk-checkbox" type="checkbox" checked> Shift</label>
+                        <label>
+                            Horizontal
+                            <select id="js-placement_x" class="uk-select uk-form-small uk-form-width-xsmall">
+                                <option value="">None</option>
+                                <option value="flip" selected>Flip</option>
+                                <option value="shift">Shift</option>
+                            </select>
+                        </label>
+                        <label>
+                            Vertical
+                            <select id="js-placement_y" class="uk-select uk-form-small uk-form-width-xsmall">
+                                <option value="">None</option>
+                                <option value="flip" selected>Flip</option>
+                                <option value="shift">Shift</option>
+                            </select>
+                        </label>
                     </div>
 
                 </div>
@@ -332,8 +346,7 @@
                             target: [$('#js-target_x').value, $('#js-target_y').value]
                         },
                         offset: [$('#js-offset_x').value, $('#js-offset_y').value],
-                        flip: $('#js-flip').checked,
-                        shift: $('#js-shift').checked
+                        placement: [$('#js-placement_x').value, $('#js-placement_y').value]
                     }
                 );
             }