uikit 3.11.2-dev.2b60845fb → 3.11.2-dev.2f4ac8e16

package/src/js/mixin/parallax.js

@@ -4,11 +4,11 @@ import {
     css,
     Dimensions,
     each,
+    findIndex,
     isNumber,
     isString,
     isUndefined,
     noop,
-    startsWith,
     toFloat,
     toPx,
     trigger,
@@ -79,39 +79,35 @@ export default {
     },
 };
 
-function transformFn(prop, el, steps) {
-    const unit = getUnit(steps) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+function transformFn(prop, el, stops) {
+    const unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+    let transformFn;
 
     if (prop === 'x' || prop === 'y') {
         prop = `translate${ucfirst(prop)}`;
+        transformFn = (stop) => toFloat(toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
     }
 
-    steps = steps.map(toFloat);
-
-    if (steps.length === 1) {
-        steps.unshift(prop === 'scale' ? 1 : 0);
+    if (stops.length === 1) {
+        stops.unshift(prop === 'scale' ? 1 : 0);
     }
 
-    return (css, percent) => {
-        let value = getValue(steps, percent);
-
-        if (startsWith(prop, 'translate')) {
-            value = toFloat(value).toFixed(unit === 'px' ? 0 : 6);
-        }
+    stops = parseStops(stops, transformFn);
 
-        css.transform += ` ${prop}(${value}${unit})`;
+    return (css, percent) => {
+        css.transform += ` ${prop}(${getValue(stops, percent)}${unit})`;
     };
 }
 
-function colorFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(getCssValue(el, prop, ''));
+function colorFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ''));
     }
 
-    steps = steps.map((step) => parseColor(el, step));
+    stops = parseStops(stops, (stop) => parseColor(el, stop));
 
     return (css, percent) => {
-        const [start, end, p] = getStep(steps, percent);
+        const [start, end, p] = getStop(stops, percent);
         const value = start
             .map((value, i) => {
                 value += p * (end[i] - value);
@@ -131,85 +127,83 @@ function parseColor(el, color) {
         .map(toFloat);
 }
 
-function filterFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function filterFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
-    const unit = getUnit(steps) || { blur: 'px', hue: 'deg' }[prop] || '%';
+    const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
     prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
-    steps = steps.map(toFloat);
+    stops = parseStops(stops);
 
     return (css, percent) => {
-        const value = getValue(steps, percent);
+        const value = getValue(stops, percent);
         css.filter += ` ${prop}(${value + unit})`;
     };
 }
 
-function cssPropFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(getCssValue(el, prop, ''));
+function cssPropFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ''));
     }
 
-    steps = steps.map(toFloat);
+    stops = parseStops(stops);
 
     return (css, percent) => {
-        css[prop] = getValue(steps, percent);
+        css[prop] = getValue(stops, percent);
     };
 }
 
-function strokeFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function strokeFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
-    const unit = getUnit(steps);
-    steps = steps.map(toFloat);
+    const unit = getUnit(stops);
+    const length = getMaxPathLength(el);
+    stops = parseStops(stops.reverse(), (stop) => {
+        stop = toFloat(stop);
+        return unit === '%' ? (stop * length) / 100 : stop;
+    });
 
-    if (!steps.some((step) => step)) {
+    if (!stops.some(([value]) => value)) {
         return noop;
     }
 
-    const length = getMaxPathLength(el);
     css(el, 'strokeDasharray', length);
 
-    if (unit === '%') {
-        steps = steps.map((step) => (step * length) / 100);
-    }
-
-    steps = steps.reverse();
-
     return (css, percent) => {
-        css.strokeDashoffset = getValue(steps, percent);
+        css.strokeDashoffset = getValue(stops, percent);
     };
 }
 
-function backgroundFn(prop, el, steps) {
-    if (steps.length === 1) {
-        steps.unshift(0);
+function backgroundFn(prop, el, stops) {
+    if (stops.length === 1) {
+        stops.unshift(0);
     }
 
     prop = prop.substr(-1);
     const attr = prop === 'y' ? 'height' : 'width';
-    steps = steps.map((step) => toPx(step, attr, el));
+    stops = parseStops(stops, (stop) => toPx(stop, attr, el));
 
     const bgPos = getCssValue(el, `background-position-${prop}`, '');
 
     return getCssValue(el, 'backgroundSize', '') === 'cover'
-        ? backgroundCoverFn(prop, el, steps, bgPos, attr)
-        : setBackgroundPosFn(prop, steps, bgPos);
+        ? backgroundCoverFn(prop, el, stops, bgPos, attr)
+        : setBackgroundPosFn(prop, stops, bgPos);
 }
 
-function backgroundCoverFn(prop, el, steps, bgPos, attr) {
+function backgroundCoverFn(prop, el, stops, bgPos, attr) {
     const dimImage = getBackgroundImageDimensions(el);
 
     if (!dimImage.width) {
         return noop;
     }
 
-    const min = Math.min(...steps);
-    const max = Math.max(...steps);
-    const down = steps.indexOf(min) < steps.indexOf(max);
+    const values = stops.map(([value]) => value);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const down = values.indexOf(min) < values.indexOf(max);
 
     const diff = max - min;
     let pos = (down ? -diff : 0) - (down ? min : max);
@@ -234,7 +228,7 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
 
     const dim = Dimensions.cover(dimImage, dimEl);
 
-    const fn = setBackgroundPosFn(prop, steps, `${pos}px`);
+    const fn = setBackgroundPosFn(prop, stops, `${pos}px`);
     return (css, percent) => {
         fn(css, percent);
         css.backgroundSize = `${dim.width}px ${dim.height}px`;
@@ -242,9 +236,9 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
     };
 }
 
-function setBackgroundPosFn(prop, steps, pos) {
+function setBackgroundPosFn(prop, stops, pos) {
     return function (css, percent) {
-        css[`background-position-${prop}`] = `calc(${pos} + ${getValue(steps, percent)}px)`;
+        css[`background-position-${prop}`] = `calc(${pos} + ${getValue(stops, percent)}px)`;
     };
 }
 
@@ -278,24 +272,47 @@ function toDimensions(image) {
     };
 }
 
-function getStep(steps, percent) {
-    const count = steps.length - 1;
-    const index = Math.min(Math.floor(count * percent), count - 1);
+function parseStops(stops, fn = toFloat) {
+    const result = [];
+    for (const stop of stops) {
+        const [value, percent] = isString(stop) ? stop.trim().split(' ') : [stop];
+        result.push([fn(value), percent ? toFloat(percent) / 100 : null]);
+    }
+
+    const { length } = result;
+    result[0][1] = 0;
+    result[length - 1][1] = 1;
+    for (let i = 1; i < length - 1; i++) {
+        if (result[i] === null) {
+            const nextIndex = findIndex(result.slice(i + 1), ([, percent]) => percent !== null) + 1;
+            const percent = (result[i + nextIndex] - result[i - 1][1]) / (nextIndex + 1);
+            for (let j = 0; j < nextIndex; j++) {
+                result[i + j][1] = percent * j + 1;
+            }
+        }
+    }
+
+    return result;
+}
 
-    return steps
-        .slice(index, index + 2)
-        .concat(percent === 1 ? 1 : (percent % (1 / count)) * count);
+function getStop(stops, percent) {
+    const index = findIndex(stops.slice(1), ([, targetPercent]) => percent <= targetPercent) + 1;
+    return [
+        stops[index - 1][0],
+        stops[index][0],
+        (percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1]),
+    ];
 }
 
-function getValue(steps, percent) {
-    const [start, end, p] = getStep(steps, percent);
+function getValue(stops, percent) {
+    const [start, end, p] = getStop(stops, percent);
     return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
 }
 
-function getUnit(steps, defaultUnit) {
+function getUnit(stops, defaultUnit) {
     return (
-        steps.reduce(
-            (unit, step) => unit || (isString(step) && step.replace(/[\d-]/g, '').trim()),
+        stops.reduce(
+            (unit, stop) => unit || (isString(stop) && stop.replace(/[\d-]/g, '').trim()),
             ''
         ) || defaultUnit
     );

package/src/js/mixin/slider.js

@@ -4,7 +4,6 @@ import SliderNav from './slider-nav';
 import {
     $,
     $$,
-    assign,
     clamp,
     fastdom,
     getIndex,
@@ -170,21 +169,14 @@ export default {
         },
 
         _show(prev, next, force) {
-            this._transitioner = this._getTransitioner(
-                prev,
-                next,
-                this.dir,
-                assign(
-                    {
-                        easing: force
-                            ? next.offsetWidth < 600
-                                ? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */
-                                : 'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */
-                            : this.easing,
-                    },
-                    this.transitionOptions
-                )
-            );
+            this._transitioner = this._getTransitioner(prev, next, this.dir, {
+                easing: force
+                    ? next.offsetWidth < 600
+                        ? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */
+                        : 'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */
+                    : this.easing,
+                ...this.transitionOptions,
+            });
 
             if (!force && !prev) {
                 this._translate(1);

package/src/js/mixin/slideshow.js

@@ -1,7 +1,7 @@
 import Animations from './internal/slideshow-animations';
 import Transitioner from './internal/slideshow-transitioner';
 import Slider from './slider.js';
-import { addClass, assign, removeClass } from 'uikit-util';
+import { addClass, removeClass } from 'uikit-util';
 
 export default {
     mixins: [Slider],
@@ -19,7 +19,7 @@ export default {
 
     computed: {
         animation({ animation, Animations }) {
-            return assign(Animations[animation] || Animations.slide, { name: animation });
+            return { ...(Animations[animation] || Animations.slide), name: animation };
         },
 
         transitionOptions() {

package/src/js/mixin/togglable.js

@@ -2,7 +2,6 @@ import {
     $$,
     addClass,
     Animation,
-    assign,
     css,
     fastdom,
     hasClass,
@@ -175,7 +174,7 @@ export function toggleHeight({ isToggled, duration, initProps, hideProps, transi
             show
                 ? Transition.start(
                       el,
-                      assign({}, initProps, { overflow: 'hidden', height: endHeight }),
+                      { ...initProps, overflow: 'hidden', height: endHeight },
                       Math.round(duration * (1 - currentHeight / endHeight)),
                       transition
                   )

package/src/js/util/ajax.js

@@ -2,18 +2,15 @@ import { on } from './event';
 import { assign, noop } from './lang';
 
 export function ajax(url, options) {
-    const env = assign(
-        {
-            data: null,
-            method: 'GET',
-            headers: {},
-            xhr: new XMLHttpRequest(),
-            beforeSend: noop,
-            responseType: '',
-        },
-        options
-    );
-
+    const env = {
+        data: null,
+        method: 'GET',
+        headers: {},
+        xhr: new XMLHttpRequest(),
+        beforeSend: noop,
+        responseType: '',
+        ...options,
+    };
     return Promise.resolve()
         .then(() => env.beforeSend(env))
         .then(() => send(url, env));

package/src/js/util/animation.js

@@ -1,7 +1,7 @@
 import { attr } from './attr';
 import { once, trigger } from './event';
 import { css, propName } from './style';
-import { assign, startsWith, toNodes } from './lang';
+import { startsWith, toNodes } from './lang';
 import { addClass, hasClass, removeClass, removeClasses } from './class';
 
 export function transition(element, props, duration = 400, timing = 'linear') {
@@ -35,17 +35,12 @@ export function transition(element, props, duration = 400, timing = 'linear') {
                     );
 
                     addClass(element, 'uk-transition');
-                    css(
-                        element,
-                        assign(
-                            {
-                                transitionProperty: Object.keys(props).map(propName).join(','),
-                                transitionDuration: `${duration}ms`,
-                                transitionTimingFunction: timing,
-                            },
-                            props
-                        )
-                    );
+                    css(element, {
+                        transitionProperty: Object.keys(props).map(propName).join(','),
+                        transitionDuration: `${duration}ms`,
+                        transitionTimingFunction: timing,
+                        ...props,
+                    });
                 })
         )
     );

package/src/js/util/dom.js

@@ -12,6 +12,10 @@ export function ready(fn) {
     once(document, 'DOMContentLoaded', fn);
 }
 
+export function isTag(element, tagName) {
+    return element?.tagName?.toLowerCase() === tagName.toLowerCase();
+}
+
 export function empty(element) {
     return replaceChildren(element, '');
 }
@@ -20,34 +24,20 @@ export function html(parent, html) {
     return isUndefined(html) ? $(parent).innerHTML : replaceChildren(parent, html);
 }
 
-export function replaceChildren(parent, element) {
-    const nodes = $$(element);
-    $(parent).replaceChildren(...nodes);
-    return nodes;
-}
-
-export function prepend(parent, element) {
-    const nodes = $$(element);
-    $(parent).prepend(...nodes);
-    return nodes;
-}
-
-export function append(parent, element) {
-    const nodes = $$(element);
-    $(parent).append(...nodes);
-    return nodes;
-}
-
-export function before(ref, element) {
-    const nodes = $$(element);
-    $(ref).before(...nodes);
-    return nodes;
-}
+export const replaceChildren = applyFn('replaceChildren');
+export const prepend = applyFn('prepend');
+export const append = applyFn('append');
+export const before = applyFn('before');
+export const after = applyFn('after');
 
-export function after(ref, element) {
-    const nodes = $$(element);
-    $(ref).after(...nodes);
-    return nodes;
+function applyFn(fn) {
+    return function (ref, element) {
+        const nodes = toNodes(isString(element) ? fragment(element) : element);
+        if (nodes.length) {
+            $(ref)[fn](...nodes);
+        }
+        return unwrapSingle(nodes);
+    };
 }
 
 export function remove(element) {
@@ -85,9 +75,16 @@ export function unwrap(element) {
 
 export function fragment(html) {
     const template = document.createElement('template');
-    template.innerHTML = html;
-    const { childNodes } = template.content;
-    return childNodes.length > 1 ? toNodes(childNodes) : childNodes[0];
+    template.innerHTML = html.trim();
+    const nodes = toNodes(template.content.childNodes);
+    for (const node of nodes) {
+        document.adoptNode(node);
+    }
+    return unwrapSingle(nodes);
+}
+
+function unwrapSingle(nodes) {
+    return nodes.length > 1 ? nodes : nodes[0];
 }
 
 export function apply(node, fn) {

package/src/js/util/lang.js

@@ -21,19 +21,19 @@ function toUpper(_, c) {
 }
 
 export function startsWith(str, search) {
-    return str.startsWith(search);
+    return str?.startsWith?.(search);
 }
 
 export function endsWith(str, search) {
-    return str.endsWith(search);
+    return str?.endsWith?.(search);
 }
 
 export function includes(obj, search) {
-    return obj && obj.includes(search);
+    return obj?.includes?.(search);
 }
 
 export function findIndex(array, predicate) {
-    return array.findIndex(predicate);
+    return array?.findIndex?.(predicate);
 }
 
 export const { isArray, from: toArray } = Array;
@@ -128,8 +128,9 @@ export function toWindow(element) {
     }
 
     element = toNode(element);
+    const document = isDocument(element) ? element : element?.ownerDocument;
 
-    return element ? (isDocument(element) ? element : element.ownerDocument).defaultView : window;
+    return document?.defaultView || window;
 }
 
 export function toMs(time) {
@@ -216,7 +217,7 @@ export const Dimensions = {
     },
 
     contain(dimensions, maxDimensions) {
-        dimensions = assign({}, dimensions);
+        dimensions = { ...dimensions };
 
         each(
             dimensions,

package/src/js/util/options.js

@@ -1,13 +1,4 @@
-import {
-    assign,
-    hasOwn,
-    includes,
-    isArray,
-    isFunction,
-    isUndefined,
-    sortBy,
-    startsWith,
-} from './lang';
+import { hasOwn, includes, isArray, isFunction, isUndefined, sortBy, startsWith } from './lang';
 
 const strats = {};
 
@@ -48,7 +39,7 @@ strats.props = function (parentVal, childVal) {
 
 // extend strategy
 strats.computed = strats.methods = function (parentVal, childVal) {
-    return childVal ? (parentVal ? assign({}, parentVal, childVal) : childVal) : parentVal;
+    return childVal ? (parentVal ? { ...parentVal, ...childVal } : childVal) : parentVal;
 };
 
 // data strategy

package/src/js/util/player.js

@@ -1,5 +1,6 @@
+import { isTag } from './dom';
 import { once } from './event';
-import { assign, includes, noop } from './lang';
+import { includes, noop } from './lang';
 
 export function play(el) {
     if (isIFrame(el)) {
@@ -40,11 +41,11 @@ export function isVideo(el) {
 }
 
 function isHTML5(el) {
-    return el?.tagName === 'VIDEO';
+    return isTag(el, 'video');
 }
 
 function isIFrame(el) {
-    return el?.tagName === 'IFRAME' && (isYoutube(el) || isVimeo(el));
+    return isTag(el, 'iframe') && (isYoutube(el) || isVimeo(el));
 }
 
 function isYoutube(el) {
@@ -64,7 +65,7 @@ async function call(el, cmd) {
 
 function post(el, cmd) {
     try {
-        el.contentWindow.postMessage(JSON.stringify(assign({ event: 'command' }, cmd)), '*');
+        el.contentWindow.postMessage(JSON.stringify({ event: 'command', ...cmd }), '*');
     } catch (e) {
         // noop
     }

package/src/js/util/selector.js

@@ -1,5 +1,4 @@
 import { attr } from './attr';
-import { inBrowser } from './env';
 import { closest, index, matches, parent } from './filter';
 import { isDocument, isString, memoize, toNode, toNodes } from './lang';
 
@@ -11,12 +10,6 @@ export function queryAll(selector, context) {
     return findAll(selector, getContext(selector, context));
 }
 
-function getContext(selector, context = document) {
-    return (isString(selector) && isContextSelector(selector)) || isDocument(context)
-        ? context
-        : context.ownerDocument;
-}
-
 export function find(selector, context) {
     return toNode(_query(selector, context, 'querySelector'));
 }
@@ -25,6 +18,17 @@ export function findAll(selector, context) {
     return toNodes(_query(selector, context, 'querySelectorAll'));
 }
 
+const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
+const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
+
+function getContext(selector, context = document) {
+    return (isString(selector) && isContextSelector(selector)) || isDocument(context)
+        ? context
+        : context.ownerDocument;
+}
+
+const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
+
 function _query(selector, context = document, queryFn) {
     if (!selector || !isString(selector)) {
         return selector;
@@ -69,11 +73,6 @@ function _query(selector, context = document, queryFn) {
     }
 }
 
-const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
-const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
-
-const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
-
 const selectorRe = /.*?[^\\](?:,|$)/g;
 
 const splitSelector = memoize((selector) =>
@@ -99,11 +98,6 @@ function domPath(element) {
     return names.join(' > ');
 }
 
-const escapeFn =
-    (inBrowser && window.CSS && CSS.escape) ||
-    function (css) {
-        return css.replace(/([^\x7f-\uFFFF\w-])/g, (match) => `\\${match}`);
-    };
 export function escape(css) {
-    return isString(css) ? escapeFn.call(null, css) : '';
+    return isString(css) ? CSS.escape(css) : '';
 }

package/src/js/util/style.js

@@ -31,7 +31,8 @@ const cssNumber = {
 };
 
 export function css(element, property, value, priority = '') {
-    return toNodes(element).map((element) => {
+    const elements = toNodes(element);
+    for (const element of elements) {
         if (isString(property)) {
             property = propName(property);
 
@@ -57,9 +58,8 @@ export function css(element, property, value, priority = '') {
             priority = value;
             each(property, (value, property) => css(element, property, value, priority));
         }
-
-        return element;
-    })[0];
+    }
+    return elements[0];
 }
 
 function getStyles(element, pseudoElt) {