uikit 3.13.1-dev.dedbd3fce → 3.13.2-dev.696f00752

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/src/js/util/style.js

@@ -9,7 +9,6 @@ import {
     isUndefined,
     memoize,
     toNodes,
-    toWindow,
 } from './lang';
 
 const cssNumber = {
@@ -37,21 +36,22 @@ export function css(element, property, value, priority = '') {
             property = propName(property);
 
             if (isUndefined(value)) {
-                return getStyle(element, property);
-            } else if (!value && !isNumber(value)) {
-                element.style.removeProperty(property);
+                return getComputedStyle(element).getPropertyValue(property);
             } else {
                 element.style.setProperty(
                     property,
-                    isNumeric(value) && !cssNumber[property] ? `${value}px` : value,
+                    isNumeric(value) && !cssNumber[property]
+                        ? `${value}px`
+                        : value || isNumber(value)
+                        ? value
+                        : '',
                     priority
                 );
             }
         } else if (isArray(property)) {
-            const styles = getStyles(element);
             const props = {};
             for (const prop of property) {
-                props[prop] = styles[propName(prop)];
+                props[prop] = css(element, prop);
             }
             return props;
         } else if (isObject(property)) {
@@ -62,19 +62,9 @@ export function css(element, property, value, priority = '') {
     return elements[0];
 }
 
-function getStyles(element, pseudoElt) {
-    return toWindow(element).getComputedStyle(element, pseudoElt);
-}
-
-function getStyle(element, property, pseudoElt) {
-    return getStyles(element, pseudoElt)[property];
-}
-
 const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-export function getCssVar(name) {
-    return getStyles(document.documentElement)
-        .getPropertyValue(`--uk-${name}`)
-        .replace(propertyRe, '$2');
+export function getCssVar(name, element = document.documentElement) {
+    return css(element, `--uk-${name}`).replace(propertyRe, '$2');
 }
 
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
@@ -83,6 +73,10 @@ export const propName = memoize((name) => vendorPropName(name));
 const cssPrefixes = ['webkit', 'moz'];
 
 function vendorPropName(name) {
+    if (name[0] === '-') {
+        return name;
+    }
+
     name = hyphenate(name);
 
     const { style } = document.documentElement;

package/src/less/components/drop.less

@@ -21,8 +21,8 @@
 // ========================================================================
 
 @drop-z-index:                              @global-z-index + 20;
-@drop-width:                                300px;
 @drop-margin:                               @global-margin;
+@drop-width:                                300px;
 
 
 /* ========================================================================
@@ -41,25 +41,17 @@
     /* 2 */
     position: absolute;
     z-index: @drop-z-index;
+    --uk-position-margin-offset: @drop-margin;
     /* 3 */
     box-sizing: border-box;
     width: @drop-width;
+    max-width: 100vw;
 }
 
 /* Show */
 .uk-drop.uk-open { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-drop-top'] { margin-top: -@drop-margin; }
-[class*='uk-drop-bottom'] { margin-top: @drop-margin; }
-[class*='uk-drop-left'] { margin-left: -@drop-margin; }
-[class*='uk-drop-right'] { margin-left: @drop-margin; }
-
-
 /* Grid modifiers
  ========================================================================== */
 

package/src/less/components/dropdown.less

@@ -21,11 +21,11 @@
 // ========================================================================
 
 @dropdown-z-index:                              @global-z-index + 20;
+@dropdown-margin:                               @global-small-margin;
 @dropdown-min-width:                            200px;
 @dropdown-padding:                              15px;
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
-@dropdown-margin:                               @global-small-margin;
 
 @dropdown-nav-item-color:                       @global-muted-color;
 @dropdown-nav-item-hover-color:                 @global-color;
@@ -53,9 +53,11 @@
     /* 2 */
     position: absolute;
     z-index: @dropdown-z-index;
+    --uk-position-margin-offset: @dropdown-margin;
     /* 3 */
     box-sizing: border-box;
     min-width: @dropdown-min-width;
+    max-width: 100vw;
     /* 4 */
     padding: @dropdown-padding;
     background: @dropdown-background;
@@ -120,16 +122,6 @@
 .uk-dropdown-nav .uk-nav-sub li.uk-active > a { color: @dropdown-nav-sublist-item-hover-color; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-dropdown-top'] { margin-top: -@dropdown-margin; }
-[class*='uk-dropdown-bottom'] { margin-top: @dropdown-margin; }
-[class*='uk-dropdown-left'] { margin-left: -@dropdown-margin; }
-[class*='uk-dropdown-right'] { margin-left: @dropdown-margin; }
-
-
 /* Grid modifiers
  ========================================================================== */
 

package/src/less/components/navbar.less

@@ -56,8 +56,8 @@
 @navbar-subtitle-font-size:                     @global-small-font-size;
 
 @navbar-dropdown-z-index:                       @global-z-index + 20;
-@navbar-dropdown-width:                         200px;
 @navbar-dropdown-margin:                        0;
+@navbar-dropdown-width:                         200px;
 @navbar-dropdown-padding:                       15px;
 @navbar-dropdown-background:                    @global-muted-background;
 @navbar-dropdown-color:                         @global-color;
@@ -66,6 +66,7 @@
 
 @navbar-dropdown-dropbar-margin-top:            0;
 @navbar-dropdown-dropbar-margin-bottom:         @navbar-dropdown-dropbar-margin-top;
+@navbar-dropdown-dropbar-padding:               @navbar-nav-item-padding-horizontal;
 
 @navbar-dropdown-nav-item-color:                @global-muted-color;
 @navbar-dropdown-nav-item-hover-color:          @global-color;
@@ -348,9 +349,11 @@
     /* 2 */
     position: absolute;
     z-index: @navbar-dropdown-z-index;
+    --uk-position-margin-offset: @navbar-dropdown-margin;
     /* 3 */
     box-sizing: border-box;
     width: @navbar-dropdown-width;
+    max-width: 100vw;
     /* 4 */
     padding: @navbar-dropdown-padding;
     background: @navbar-dropdown-background;
@@ -361,16 +364,6 @@
 /* Show */
 .uk-navbar-dropdown.uk-open { display: block; }
 
-/*
- * Direction / Alignment modifiers
- */
-
-/* Direction */
-[class*='uk-navbar-dropdown-top'] { margin-top: -@navbar-dropdown-margin; }
-[class*='uk-navbar-dropdown-bottom'] { margin-top: @navbar-dropdown-margin; }
-[class*='uk-navbar-dropdown-left'] { margin-left: -@navbar-dropdown-margin; }
-[class*='uk-navbar-dropdown-right'] { margin-left: @navbar-dropdown-margin; }
-
 /*
  * Grid
  * Adopts `uk-grid`
@@ -397,11 +390,17 @@
 
 /*
  * Dropbar modifier
+ * 1. Set position
+ * 2. Bottom padding for dropbar
+ * 3. Horizontal padding
  */
 
 .uk-navbar-dropdown-dropbar {
-    margin-top: @navbar-dropdown-dropbar-margin-top;
+    /* 1 */
+    --uk-position-margin-offset: @navbar-dropdown-dropbar-margin-top;
+    /* 2 */
     margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
+    padding: @navbar-dropdown-dropbar-padding;
     .hook-navbar-dropdown-dropbar();
 }
 
@@ -468,20 +467,12 @@
  ========================================================================== */
 
 .uk-navbar-dropbar {
-    background: @navbar-dropbar-background;
-    .hook-navbar-dropbar();
-}
-
-/*
- * Slide modifier
- */
-
-.uk-navbar-dropbar-slide {
     position: absolute;
     z-index: @navbar-dropbar-z-index;
     left: 0;
     right: 0;
-    .hook-navbar-dropbar-slide();
+    background: @navbar-dropbar-background;
+    .hook-navbar-dropbar();
 }
 
 
@@ -514,7 +505,6 @@
 .hook-navbar-dropdown-nav-header() {}
 .hook-navbar-dropdown-nav-divider() {}
 .hook-navbar-dropbar(){}
-.hook-navbar-dropbar-slide(){}
 .hook-navbar-misc() {}
 
 

package/src/less/components/offcanvas.less

@@ -35,9 +35,11 @@
 @offcanvas-bar-padding-vertical-m:              @global-medium-gutter;
 @offcanvas-bar-padding-horizontal-m:            @global-medium-gutter;
 
-@offcanvas-close-position:                      20px;
+@offcanvas-close-position:                      5px;
 @offcanvas-close-padding:                       5px;
 
+@offcanvas-close-position-m:                    20px;
+
 @offcanvas-overlay-background:                  rgba(0,0,0,0.1);
 
 
@@ -206,6 +208,22 @@
     .hook-offcanvas-close();
 }
 
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-offcanvas-close {
+        top: @offcanvas-close-position-m;
+        right: @offcanvas-close-position-m;
+    }
+
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-offcanvas-close:first-child + * { margin-top: 0; }
+
 
 /* Overlay
  ========================================================================== */

package/src/less/components/tooltip.less

@@ -21,6 +21,7 @@
 // ========================================================================
 
 @tooltip-z-index:                               @global-z-index + 30;
+@tooltip-margin:                                10px;
 @tooltip-max-width:                             200px;
 @tooltip-padding-vertical:                      3px;
 @tooltip-padding-horizontal:                    6px;
@@ -29,7 +30,6 @@
 @tooltip-color:                                 @global-inverse-color;
 @tooltip-font-size:                             12px;
 
-@tooltip-margin:                                10px;
 
 
 /* ========================================================================
@@ -50,6 +50,7 @@
     /* 2 */
     position: absolute;
     z-index: @tooltip-z-index;
+    --uk-position-margin-offset: @dropdown-margin;
     /* 3 */
     top: 0;
     /* 4 */
@@ -68,16 +69,6 @@
 .uk-tooltip.uk-active { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-tooltip-top'] { margin-top: -@tooltip-margin; }
-[class*='uk-tooltip-bottom'] { margin-top: @tooltip-margin; }
-[class*='uk-tooltip-left'] { margin-left: -@tooltip-margin; }
-[class*='uk-tooltip-right'] { margin-left: @tooltip-margin; }
-
-
 // Hooks
 // ========================================================================
 

package/src/less/theme/navbar.less

@@ -117,9 +117,7 @@
 // Dropbar
 // ========================================================================
 
-.hook-navbar-dropbar() {}
-
-.hook-navbar-dropbar-slide() { box-shadow: @navbar-dropbar-box-shadow; }
+.hook-navbar-dropbar() { box-shadow: @navbar-dropbar-box-shadow; }
 
 
 // Miscellaneous

package/src/scss/components/drop.scss

@@ -21,8 +21,8 @@
 // ========================================================================
 
 $drop-z-index:                               $global-z-index + 20 !default;
-$drop-width:                                 300px !default;
 $drop-margin:                                $global-margin !default;
+$drop-width:                                 300px !default;
 
 
 /* ========================================================================
@@ -41,25 +41,17 @@ $drop-margin:                                $global-margin !default;
     /* 2 */
     position: absolute;
     z-index: $drop-z-index;
+    --uk-position-margin-offset: #{$drop-margin};
     /* 3 */
     box-sizing: border-box;
     width: $drop-width;
+    max-width: 100vw;
 }
 
 /* Show */
 .uk-drop.uk-open { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-drop-top'] { margin-top: (-$drop-margin); }
-[class*='uk-drop-bottom'] { margin-top: $drop-margin; }
-[class*='uk-drop-left'] { margin-left: (-$drop-margin); }
-[class*='uk-drop-right'] { margin-left: $drop-margin; }
-
-
 /* Grid modifiers
  ========================================================================== */