uikit 3.11.2-dev.31cd2ba38 → 3.11.2-dev.3cbd0b859

package/src/js/util/player.js

@@ -1,43 +1,38 @@
-import {once} from './event';
-import {Promise} from './promise';
-import {assign, includes, noop} from './lang';
+import { once } from './event';
+import { includes, noop } from './lang';
 
 export function play(el) {
-
     if (isIFrame(el)) {
-        call(el, {func: 'playVideo', method: 'play'});
+        call(el, { func: 'playVideo', method: 'play' });
     }
 
     if (isHTML5(el)) {
         try {
             el.play().catch(noop);
-        } catch (e) {}
+        } catch (e) {
+            // noop
+        }
     }
-
 }
 
 export function pause(el) {
-
     if (isIFrame(el)) {
-        call(el, {func: 'pauseVideo', method: 'pause'});
+        call(el, { func: 'pauseVideo', method: 'pause' });
     }
 
     if (isHTML5(el)) {
         el.pause();
     }
-
 }
 
 export function mute(el) {
-
     if (isIFrame(el)) {
-        call(el, {func: 'mute', method: 'setVolume', value: 0});
+        call(el, { func: 'mute', method: 'setVolume', value: 0 });
     }
 
     if (isHTML5(el)) {
         el.muted = true;
     }
-
 }
 
 export function isVideo(el) {
@@ -45,35 +40,39 @@ export function isVideo(el) {
 }
 
 function isHTML5(el) {
-    return el && el.tagName === 'VIDEO';
+    return el?.tagName === 'VIDEO';
 }
 
 function isIFrame(el) {
-    return el && el.tagName === 'IFRAME' && (isYoutube(el) || isVimeo(el));
+    return el?.tagName === 'IFRAME' && (isYoutube(el) || isVimeo(el));
 }
 
 function isYoutube(el) {
-    return !!el.src.match(/\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\/.*/);
+    return !!el.src.match(
+        /\/\/.*?youtube(-nocookie)?\.[a-z]+\/(watch\?v=[^&\s]+|embed)|youtu\.be\/.*/
+    );
 }
 
 function isVimeo(el) {
     return !!el.src.match(/vimeo\.com\/video\/.*/);
 }
 
-function call(el, cmd) {
-    enableApi(el).then(() => post(el, cmd));
+async function call(el, cmd) {
+    await enableApi(el);
+    post(el, cmd);
 }
 
 function post(el, cmd) {
     try {
-        el.contentWindow.postMessage(JSON.stringify(assign({event: 'command'}, cmd)), '*');
-    } catch (e) {}
+        el.contentWindow.postMessage(JSON.stringify({ event: 'command', ...cmd }), '*');
+    } catch (e) {
+        // noop
+    }
 }
 
 const stateKey = '_ukPlayer';
 let counter = 0;
 function enableApi(el) {
-
     if (el[stateKey]) {
         return el[stateKey];
     }
@@ -84,24 +83,29 @@ function enableApi(el) {
     const id = ++counter;
     let poller;
 
-    return el[stateKey] = new Promise(resolve => {
-
-        youtube && once(el, 'load', () => {
-            const listener = () => post(el, {event: 'listening', id});
-            poller = setInterval(listener, 100);
-            listener();
-        });
-
-        once(window, 'message', resolve, false, ({data}) => {
+    return (el[stateKey] = new Promise((resolve) => {
+        youtube &&
+            once(el, 'load', () => {
+                const listener = () => post(el, { event: 'listening', id });
+                poller = setInterval(listener, 100);
+                listener();
+            });
 
+        once(window, 'message', resolve, false, ({ data }) => {
             try {
                 data = JSON.parse(data);
-                return data && (youtube && data.id === id && data.event === 'onReady' || vimeo && Number(data.player_id) === id);
-            } catch (e) {}
-
+                return (
+                    data &&
+                    ((youtube && data.id === id && data.event === 'onReady') ||
+                        (vimeo && Number(data.player_id) === id))
+                );
+            } catch (e) {
+                // noop
+            }
         });
 
-        el.src = `${el.src}${includes(el.src, '?') ? '&' : '?'}${youtube ? 'enablejsapi=1' : `api=1&player_id=${id}`}`;
-
-    }).then(() => clearInterval(poller));
+        el.src = `${el.src}${includes(el.src, '?') ? '&' : '?'}${
+            youtube ? 'enablejsapi=1' : `api=1&player_id=${id}`
+        }`;
+    }).then(() => clearInterval(poller)));
 }

package/src/js/util/position.js

@@ -1,18 +1,26 @@
-import {offset} from './dimensions';
-import {each, endsWith, includes, toFloat} from './lang';
-import {getViewport, scrollParents} from './viewport';
+import { offset } from './dimensions';
+import { each, endsWith, includes, toFloat } from './lang';
+import { getViewport, scrollParents } from './viewport';
 
 const dirs = {
     width: ['x', 'left', 'right'],
-    height: ['y', 'top', 'bottom']
+    height: ['y', 'top', 'bottom'],
 };
 
-export function positionAt(element, target, elAttach, targetAttach, elOffset, targetOffset, flip, boundary) {
-
+export function positionAt(
+    element,
+    target,
+    elAttach,
+    targetAttach,
+    elOffset,
+    targetOffset,
+    flip,
+    boundary
+) {
     elAttach = getPos(elAttach);
     targetAttach = getPos(targetAttach);
 
-    const flipped = {element: elAttach, target: targetAttach};
+    const flipped = { element: elAttach, target: targetAttach };
 
     if (!element || !target) {
         return flipped;
@@ -35,69 +43,71 @@ export function positionAt(element, target, elAttach, targetAttach, elOffset, ta
     position.top += elOffset['y'];
 
     if (flip) {
-
         let boundaries = scrollParents(element).map(getViewport);
 
         if (boundary && !includes(boundaries, boundary)) {
             boundaries.unshift(boundary);
         }
 
-        boundaries = boundaries.map(el => offset(el));
+        boundaries = boundaries.map((el) => offset(el));
 
         each(dirs, ([dir, align, alignFlip], prop) => {
-
             if (!(flip === true || includes(flip, dir))) {
                 return;
             }
 
-            boundaries.some(boundary => {
-
-                const elemOffset = elAttach[dir] === align
-                    ? -dim[prop]
-                    : elAttach[dir] === alignFlip
+            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
+                const targetOffset =
+                    targetAttach[dir] === align
+                        ? targetDim[prop]
+                        : targetAttach[dir] === alignFlip
                         ? -targetDim[prop]
                         : 0;
 
-                if (position[align] < boundary[align] || position[align] + dim[prop] > boundary[alignFlip]) {
-
+                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);
-
+                    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));
+                    const newVal = toFloat(
+                        (position[align] + elemOffset + targetOffset - elOffset[dir] * 2).toFixed(4)
+                    );
 
                     if (newVal >= boundary[align] && newVal + dim[prop] <= boundary[alignFlip]) {
                         position[align] = newVal;
 
-                        ['element', 'target'].forEach(el => {
-                            flipped[el][dir] = !elemOffset
-                                ? flipped[el][dir]
-                                : flipped[el][dir] === dirs[prop][1]
-                                    ? dirs[prop][2]
-                                    : dirs[prop][1];
-                        });
+                        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;
                     }
-
                 }
-
             });
-
         });
     }
 
@@ -111,13 +121,12 @@ function moveTo(position, attach, dim, factor) {
         if (attach[dir] === alignFlip) {
             position[align] += dim[prop] * factor;
         } else if (attach[dir] === 'center') {
-            position[align] += dim[prop] * factor / 2;
+            position[align] += (dim[prop] * factor) / 2;
         }
     });
 }
 
 function getPos(pos) {
-
     const x = /left|center|right/;
     const y = /top|center|bottom/;
 
@@ -127,22 +136,21 @@ function getPos(pos) {
         pos = x.test(pos[0])
             ? pos.concat('center')
             : y.test(pos[0])
-                ? ['center'].concat(pos)
-                : ['center', 'center'];
+            ? ['center'].concat(pos)
+            : ['center', 'center'];
     }
 
     return {
         x: x.test(pos[0]) ? pos[0] : 'center',
-        y: y.test(pos[1]) ? pos[1] : 'center'
+        y: y.test(pos[1]) ? pos[1] : 'center',
     };
 }
 
 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
+        y: y ? toFloat(y) * (endsWith(y, '%') ? height / 100 : 1) : 0,
     };
 }

package/src/js/util/selector.js

@@ -1,7 +1,6 @@
-import {attr} from './attr';
-import {inBrowser} from './env';
-import {closest, index, matches, parent} from './filter';
-import {isDocument, isString, memoize, toNode, toNodes} from './lang';
+import { attr } from './attr';
+import { closest, index, matches, parent } from './filter';
+import { isDocument, isString, memoize, toNode, toNodes } from './lang';
 
 export function query(selector, context) {
     return find(selector, getContext(selector, context));
@@ -12,7 +11,7 @@ export function queryAll(selector, context) {
 }
 
 function getContext(selector, context = document) {
-    return isString(selector) && isContextSelector(selector) || isDocument(context)
+    return (isString(selector) && isContextSelector(selector)) || isDocument(context)
         ? context
         : context.ownerDocument;
 }
@@ -26,7 +25,6 @@ export function findAll(selector, context) {
 }
 
 function _query(selector, context = document, queryFn) {
-
     if (!selector || !isString(selector)) {
         return selector;
     }
@@ -34,63 +32,51 @@ function _query(selector, context = document, queryFn) {
     selector = selector.replace(contextSanitizeRe, '$1 *');
 
     if (isContextSelector(selector)) {
-
-        selector = splitSelector(selector).map(selector => {
-
-            let ctx = context;
-
-            if (selector[0] === '!') {
-
-                const selectors = selector.substr(1).trim().split(' ');
-                ctx = closest(parent(context), selectors[0]);
-                selector = selectors.slice(1).join(' ').trim();
-
-            }
-
-            if (selector[0] === '-') {
-
-                const selectors = selector.substr(1).trim().split(' ');
-                const prev = (ctx || context).previousElementSibling;
-                ctx = matches(prev, selector.substr(1)) ? prev : null;
-                selector = selectors.slice(1).join(' ');
-
-            }
-
-            if (!ctx) {
-                return null;
-            }
-
-            return `${domPath(ctx)} ${selector}`;
-
-        }).filter(Boolean).join(',');
+        selector = splitSelector(selector)
+            .map((selector) => {
+                let ctx = context;
+
+                if (selector[0] === '!') {
+                    const selectors = selector.substr(1).trim().split(' ');
+                    ctx = closest(parent(context), selectors[0]);
+                    selector = selectors.slice(1).join(' ').trim();
+                }
+
+                if (selector[0] === '-') {
+                    const selectors = selector.substr(1).trim().split(' ');
+                    const prev = (ctx || context).previousElementSibling;
+                    ctx = matches(prev, selector.substr(1)) ? prev : null;
+                    selector = selectors.slice(1).join(' ');
+                }
+
+                if (!ctx) {
+                    return null;
+                }
+
+                return `${domPath(ctx)} ${selector}`;
+            })
+            .filter(Boolean)
+            .join(',');
 
         context = document;
-
     }
 
     try {
-
         return context[queryFn](selector);
-
     } catch (e) {
-
         return null;
-
     }
-
 }
 
 const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
 const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
 
-const isContextSelector = memoize(selector => selector.match(contextSelectorRe));
+const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
 
 const selectorRe = /.*?[^\\](?:,|$)/g;
 
-const splitSelector = memoize(selector =>
-    selector.match(selectorRe).map(selector =>
-        selector.replace(/,$/, '').trim()
-    )
+const splitSelector = memoize((selector) =>
+    selector.match(selectorRe).map((selector) => selector.replace(/,$/, '').trim())
 );
 
 function domPath(element) {
@@ -101,7 +87,7 @@ function domPath(element) {
             names.unshift(`#${escape(id)}`);
             break;
         } else {
-            let {tagName} = element;
+            let { tagName } = element;
             if (tagName !== 'HTML') {
                 tagName += `:nth-child(${index(element) + 1})`;
             }
@@ -112,7 +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

@@ -1,7 +1,16 @@
-import {isIE} from './env';
-import {append, fragment, remove} from './dom';
-import {addClass} from './class';
-import {each, hyphenate, isArray, isNumber, isNumeric, isObject, isString, isUndefined, memoize, toNodes, toWindow} from './lang';
+import {
+    each,
+    hyphenate,
+    isArray,
+    isNumber,
+    isNumeric,
+    isObject,
+    isString,
+    isUndefined,
+    memoize,
+    toNodes,
+    toWindow,
+} from './lang';
 
 const cssNumber = {
     'animation-iteration-count': true,
@@ -11,22 +20,19 @@ const cssNumber = {
     'flex-shrink': true,
     'font-weight': true,
     'line-height': true,
-    'opacity': true,
-    'order': true,
-    'orphans': true,
+    opacity: true,
+    order: true,
+    orphans: true,
     'stroke-dasharray': true,
     'stroke-dashoffset': true,
-    'widows': true,
+    widows: true,
     'z-index': true,
-    'zoom': true
+    zoom: true,
 };
 
 export function css(element, property, value, priority = '') {
-
-    return toNodes(element).map(element => {
-
+    return toNodes(element).map((element) => {
         if (isString(property)) {
-
             property = propName(property);
 
             if (isUndefined(value)) {
@@ -34,27 +40,26 @@ export function css(element, property, value, priority = '') {
             } else if (!value && !isNumber(value)) {
                 element.style.removeProperty(property);
             } else {
-                element.style.setProperty(property, isNumeric(value) && !cssNumber[property] ? `${value}px` : value, priority);
+                element.style.setProperty(
+                    property,
+                    isNumeric(value) && !cssNumber[property] ? `${value}px` : value,
+                    priority
+                );
             }
-
         } else if (isArray(property)) {
-
             const styles = getStyles(element);
-
-            return property.reduce((props, property) => {
-                props[property] = styles[propName(property)];
-                return props;
-            }, {});
-
+            const props = {};
+            for (const prop of property) {
+                props[prop] = styles[propName(prop)];
+            }
+            return props;
         } else if (isObject(property)) {
             priority = value;
             each(property, (value, property) => css(element, property, value, priority));
         }
 
         return element;
-
     })[0];
-
 }
 
 function getStyles(element, pseudoElt) {
@@ -65,44 +70,29 @@ function getStyle(element, property, pseudoElt) {
     return getStyles(element, pseudoElt)[property];
 }
 
-const parseCssVar = memoize(name => {
-    /* usage in css: .uk-name:before { content:"xyz" } */
-
-    const element = append(document.documentElement, fragment('<div>'));
-
-    addClass(element, `uk-${name}`);
-
-    const value = getStyle(element, 'content', ':before');
-
-    remove(element);
-
-    return value;
-});
-
 const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
 export function getCssVar(name) {
-    return (isIE
-        ? parseCssVar(name)
-        : getStyles(document.documentElement).getPropertyValue(`--uk-${name}`)
-    ).replace(propertyRe, '$2');
+    return getStyles(document.documentElement)
+        .getPropertyValue(`--uk-${name}`)
+        .replace(propertyRe, '$2');
 }
 
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
-export const propName = memoize(name => vendorPropName(name));
+export const propName = memoize((name) => vendorPropName(name));
 
 const cssPrefixes = ['webkit', 'moz', 'ms'];
 
 function vendorPropName(name) {
-
     name = hyphenate(name);
 
-    const {style} = document.documentElement;
+    const { style } = document.documentElement;
 
     if (name in style) {
         return name;
     }
 
-    let i = cssPrefixes.length, prefixedName;
+    let i = cssPrefixes.length,
+        prefixedName;
 
     while (i--) {
         prefixedName = `-${cssPrefixes[i]}-${name}`;