uikit 3.14.4-dev.fea9fd466 → 3.15.1-dev.f849bb0c8

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,127 +15,47 @@ 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,
-    } = options;
-
-    let viewports = scrollParents(element);
-    if (boundary === target) {
-        viewports = viewports.filter((viewport) => viewport !== boundary);
-    }
-    const [scrollElement] = viewports;
-    viewports.push(viewport);
+    const { boundary, viewportOffset = 0, placement } = options;
 
-    const offsetPosition = { ...position };
-    for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
-        if (flip !== true && !includes(flip, dir)) {
-            continue;
-        }
+    let offsetPosition = position;
+    for (const [i, [prop, , start, end]] of Object.entries(dirs)) {
+        const viewport = getViewport(target[i], viewportOffset, boundary, i);
 
-        const willFlip =
-            !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
-
-        viewport = getIntersectionArea(...viewports.filter(Boolean).map(offsetViewport));
-
-        if (viewportOffset) {
-            viewport[start] += viewportOffset;
-            viewport[end] -= viewportOffset;
-        }
-
-        if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
-            viewport = getIntersectionArea(viewport, offset(boundary));
-        }
-
-        const isInStartBoundary = position[start] >= viewport[start];
-        const isInEndBoundary = position[end] <= viewport[end];
-
-        if (isInStartBoundary && isInEndBoundary) {
+        if (isWithin(position, viewport, i)) {
             continue;
         }
 
-        let offsetBy;
+        let offsetBy = 0;
 
         // Flip
-        if (willFlip) {
+        if (placement[i] === 'flip') {
+            const attach = options.attach.target[i];
             if (
-                (elAttach[i] === end && isInStartBoundary) ||
-                (elAttach[i] === start && isInEndBoundary)
+                (attach === end && position[end] <= viewport[end]) ||
+                (attach === start && position[start] >= viewport[start])
             ) {
                 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(position, scrollElement, i)) {
+            const scrollArea = getScrollArea(target[i], viewportOffset, i);
+
+            if (!isWithin(applyOffset(position, offsetBy, i), scrollArea, i)) {
+                if (isWithin(position, scrollArea, i)) {
                     continue;
                 }
 
@@ -143,27 +63,19 @@ 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 = flipAxis(element, target, options);
+
+                if (newPos && isWithin(newPos, scrollArea, 1 - i)) {
+                    return newPos;
                 }
+
                 continue;
             }
 
-            // Move
-        } else {
+            // Shift
+        } else if (placement[i] === 'shift') {
+            const targetDim = offset(target[i]);
+            const { offset: elOffset } = options;
             offsetBy =
                 clamp(
                     clamp(position[start], viewport[start], viewport[end] - position[prop]),
@@ -172,13 +84,78 @@ 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 getViewport(element, viewportOffset, boundary, i) {
+    let viewport = getIntersectionArea(...scrollParents(element).map(offsetViewport));
+
+    if (viewportOffset) {
+        viewport[dirs[i][2]] += viewportOffset;
+        viewport[dirs[i][3]] -= viewportOffset;
+    }
+
+    if (boundary) {
+        viewport = getIntersectionArea(viewport, offset(boundary));
+    }
+
+    return viewport;
+}
+
+function getScrollArea(element, viewportOffset, i) {
+    const [prop, , start, end] = dirs[i];
+    const [scrollElement] = scrollParents(element);
+    const viewport = offsetViewport(scrollElement);
+    viewport[start] -= scrollElement[`scroll${ucfirst(start)}`] - viewportOffset;
+    viewport[end] = viewport[start] + scrollElement[`scroll${ucfirst(prop)}`] - viewportOffset;
+    return viewport;
+}
+
 function getIntersectionArea(...rects) {
     let area = {};
     for (const rect of rects) {
@@ -190,21 +167,44 @@ function getIntersectionArea(...rects) {
     return area;
 }
 
-function isInScrollArea(position, scrollElement, dir) {
-    const viewport = offsetViewport(scrollElement, false);
-    const [prop, , start, end] = dirs[dir];
-    viewport[start] -= scrollElement[`scroll${ucfirst(start)}`];
-    viewport[end] = viewport[start] + scrollElement[`scroll${ucfirst(prop)}`];
+function isWithin(positionA, positionB, i) {
+    const [, , start, end] = dirs[i];
+    return positionA[start] >= positionB[start] && positionA[end] <= positionB[end];
+}
 
-    return position[start] >= viewport[start] && position[end] <= viewport[end];
+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 intersectLine(dimA, dimB, dir) {
-    const [, , start, end] = dirs[dir];
-    return dimA[end] > dimB[start] && dimB[end] > dimA[start];
+function flipAxis(element, target, options) {
+    return getPosition(element, target, {
+        ...options,
+        attach: {
+            element: options.attach.element.map(flipAttachAxis).reverse(),
+            target: options.attach.target.map(flipAttachAxis).reverse(),
+        },
+        offset: options.offset.reverse(),
+        placement: options.placement.reverse(),
+        recursion: true,
+    });
+}
+
+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 flipDir(prop) {
+function flipAttachAxis(prop) {
     for (let i = 0; i < dirs.length; i++) {
         const index = dirs[i].indexOf(prop);
         if (~index) {
@@ -212,3 +212,9 @@ function flipDir(prop) {
         }
     }
 }
+
+function flipOffset(offset, i) {
+    offset = [...offset];
+    offset[i] *= -1;
+    return offset;
+}

package/src/js/util/viewport.js

@@ -150,7 +150,7 @@ export function offsetViewport(scrollElement) {
             // iOS 12 returns <body> as scrollingElement
             viewportElement = documentElement;
         } else {
-            rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
+            rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
         }
         rect[prop] = rect[dir] = viewportElement[`client${ucfirst(prop)}`];
         rect[end] = rect[prop] + rect[start];

package/src/less/components/_import.less

@@ -40,6 +40,7 @@
 @import "accordion.less";
 @import "drop.less"; // After: Card
 @import "dropdown.less"; // After: Card
+@import "dropbar.less";
 @import "modal.less"; // After: Close
 @import "slideshow.less";
 @import "slider.less";

package/src/less/components/drop.less

@@ -3,8 +3,7 @@
 //
 // Component:       `uk-drop`
 //
-// Modifiers:       `uk-drop-stretch`
-//                  `uk-drop-stack`
+// Modifiers:       `uk-drop-stack`
 //                  `uk-drop-grid`
 //
 // States:          `uk-open`
@@ -50,22 +49,6 @@
 .uk-drop.uk-open { display: block; }
 
 
-/* Stretch modifier
- ========================================================================== */
-
-/*
- * 1. Allow scrolling
- */
-
-.uk-drop-stretch {
-    --uk-position-offset: 0;
-    --uk-position-viewport-offset: 0;
-    /* 1 */
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-
 /* Grid modifiers
  ========================================================================== */
 

package/src/less/components/dropbar.less

@@ -0,0 +1,126 @@
+// Name:            Dropbar
+// Description:     Component to create dropbar menus
+//
+// Component:       `uk-dropbar`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@dropbar-margin:                                0;
+@dropbar-z-index:                               @global-z-index + 20;
+@dropbar-padding-top:                           15px;
+@dropbar-padding-bottom:                        @dropbar-padding-top;
+@dropbar-padding-horizontal:                    15px;
+@dropbar-padding-horizontal-s:                  @global-gutter;
+@dropbar-padding-horizontal-m:                  @global-medium-gutter;
+@dropbar-background:                            @global-muted-background;
+@dropbar-color:                                 @global-color;
+@dropbar-color-mode:                            none;
+
+@dropbar-large-padding-top:                     40px;
+@dropbar-large-padding-bottom:                  @dropbar-large-padding-top;
+
+
+/* ========================================================================
+   Component: Dropbar
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Style
+ */
+
+.uk-dropbar {
+    --uk-position-offset: @dropbar-margin;
+    --uk-position-shift-offset: 0;
+    --uk-position-viewport-offset: 0;
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: @dropbar-z-index;
+    /* 3 */
+    box-sizing: border-box;
+    padding: @dropbar-padding-top @dropbar-padding-horizontal @dropbar-padding-bottom @dropbar-padding-horizontal;
+    background: @dropbar-background;
+    color: @dropbar-color;
+    .hook-dropbar();
+}
+
+/* Show */
+.uk-dropbar.uk-open { display: block; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropbar > :last-child { margin-bottom: 0; }
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-dropbar {
+        padding-left: @dropbar-padding-horizontal-s;
+        padding-right: @dropbar-padding-horizontal-s;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-dropbar {
+        padding-left: @dropbar-padding-horizontal-m;
+        padding-right: @dropbar-padding-horizontal-m;
+    }
+
+}
+
+// Color Mode
+.uk-dropbar:extend(.uk-light all) when (@dropbar-color-mode = light) {}
+.uk-dropbar:extend(.uk-dark all) when (@dropbar-color-mode = dark) {}
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropbar-large {
+    padding-top: @dropbar-large-padding-top;
+    padding-bottom: @dropbar-large-padding-bottom;
+}
+
+
+/* Direction modifier
+ ========================================================================== */
+
+.uk-dropbar-top {
+    .hook-dropbar-top();
+}
+
+.uk-dropbar-bottom {
+    .hook-dropbar-bottom();
+}
+
+.uk-dropbar-left {
+    .hook-dropbar-left();
+}
+
+.uk-dropbar-right {
+    .hook-dropbar-right();
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-dropbar-misc();
+
+.hook-dropbar() {}
+.hook-dropbar-top() {}
+.hook-dropbar-bottom() {}
+.hook-dropbar-left() {}
+.hook-dropbar-right() {}
+.hook-dropbar-misc() {}

package/src/less/components/dropdown.less

@@ -5,7 +5,7 @@
 //
 // Adopted:         `uk-dropdown-nav`
 //
-// Modifiers:       `uk-dropdown-stretch`
+// Modifiers:       `uk-dropdown-large`
 //                  `uk-dropdown-stack`
 //                  `uk-dropdown-grid`
 //
@@ -24,6 +24,7 @@
 @dropdown-padding:                              15px;
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
+@dropdown-color-mode:                           none;
 
 @dropdown-large-padding:                        40px;
 
@@ -59,7 +60,6 @@
     /* 3 */
     box-sizing: border-box;
     min-width: @dropdown-min-width;
-    max-width: 100vw;
     /* 4 */
     padding: @dropdown-padding;
     background: @dropdown-background;
@@ -76,6 +76,10 @@
 
 .uk-dropdown > :last-child { margin-bottom: 0; }
 
+// Color Mode
+.uk-dropdown:extend(.uk-light all) when (@dropdown-color-mode = light) {}
+.uk-dropdown:extend(.uk-dark all) when (@dropdown-color-mode = dark) {}
+
 
 /* Size modifier
  ========================================================================== */
@@ -83,23 +87,6 @@
 .uk-dropdown-large { padding: @dropdown-large-padding; }
 
 
-/* Stretch modifier
- ========================================================================== */
-
-/*
- * 1. Allow scrolling
- */
-
-.uk-dropdown-stretch {
-    --uk-position-offset: 0;
-    --uk-position-viewport-offset: 0;
-    /* 1 */
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    .hook-dropdown-stretch();
-}
-
-
 /* Nav
  * Adopts `uk-nav`
  ========================================================================== */
@@ -174,7 +161,6 @@
 .hook-dropdown-misc();
 
 .hook-dropdown() {}
-.hook-dropdown-stretch() {}
 .hook-dropdown-nav() {}
 .hook-dropdown-nav-item() {}
 .hook-dropdown-nav-item-hover() {}