uikit 3.11.2-dev.f2970ffaa → 3.11.2-dev.f3ade19c4

package/src/js/util/mouse.js

@@ -1,20 +1,17 @@
-import {getEventPos, on} from './event';
-import {last, pointInRect} from './lang';
+import { getEventPos, on } from './event';
+import { last, pointInRect } from './lang';
 
 export function MouseTracker() {}
 
 MouseTracker.prototype = {
-
     positions: [],
 
     init() {
-
         this.positions = [];
 
         let position;
-        this.unbind = on(document, 'mousemove', e => position = getEventPos(e));
+        this.unbind = on(document, 'mousemove', (e) => (position = getEventPos(e)));
         this.interval = setInterval(() => {
-
             if (!position) {
                 return;
             }
@@ -25,7 +22,6 @@ MouseTracker.prototype = {
                 this.positions.shift();
             }
         }, 50);
-
     },
 
     cancel() {
@@ -34,13 +30,12 @@ MouseTracker.prototype = {
     },
 
     movesTo(target) {
-
         if (this.positions.length < 2) {
             return false;
         }
 
         const p = target.getBoundingClientRect();
-        const {left, right, top, bottom} = p;
+        const { left, right, top, bottom } = p;
 
         const [prevPosition] = this.positions;
         const position = last(this.positions);
@@ -50,19 +45,26 @@ MouseTracker.prototype = {
             return false;
         }
 
-        const diagonals = [[{x: left, y: top}, {x: right, y: bottom}], [{x: left, y: bottom}, {x: right, y: top}]];
-
-        return diagonals.some(diagonal => {
+        const diagonals = [
+            [
+                { x: left, y: top },
+                { x: right, y: bottom },
+            ],
+            [
+                { x: left, y: bottom },
+                { x: right, y: top },
+            ],
+        ];
+
+        return diagonals.some((diagonal) => {
             const intersection = intersect(path, diagonal);
             return intersection && pointInRect(intersection, p);
         });
-    }
-
+    },
 };
 
 // Inspired by http://paulbourke.net/geometry/pointlineplane/
-function intersect([{x: x1, y: y1}, {x: x2, y: y2}], [{x: x3, y: y3}, {x: x4, y: y4}]) {
-
+function intersect([{ x: x1, y: y1 }, { x: x2, y: y2 }], [{ x: x3, y: y3 }, { x: x4, y: y4 }]) {
     const denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
 
     // Lines are parallel
@@ -77,5 +79,5 @@ function intersect([{x: x1, y: y1}, {x: x2, y: y2}], [{x: x3, y: y3}, {x: x4, y:
     }
 
     // Return an object with the x and y coordinates of the intersection
-    return {x: x1 + ua * (x2 - x1), y: y1 + ua * (y2 - y1)};
+    return { x: x1 + ua * (x2 - x1), y: y1 + ua * (y2 - y1) };
 }

package/src/js/util/observer.js

@@ -0,0 +1,36 @@
+import { toNodes } from './lang';
+
+// Old chromium based browsers (UC Browser) did not implement `isIntersecting`
+export const hasIntersectionObserver =
+    window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype;
+export function observeIntersection(targets, cb, options, intersecting = true) {
+    if (!hasIntersectionObserver) {
+        return;
+    }
+
+    const observer = new IntersectionObserver((entries, observer) => {
+        if (!intersecting || entries.some((entry) => entry.isIntersecting)) {
+            cb(entries, observer);
+        }
+    }, options);
+    for (const el of toNodes(targets)) {
+        observer.observe(el);
+    }
+    return observer;
+}
+
+const hasResizeObserver = window.ResizeObserver;
+export function observeResize(targets, cb, options = { box: 'border-box' }) {
+    if (!hasResizeObserver) {
+        return;
+    }
+
+    const observer = new ResizeObserver((entries, observer) => {
+        cb(entries, observer);
+    });
+    for (const el of toNodes(targets)) {
+        observer.observe(el, options);
+    }
+
+    return observer;
+}

package/src/js/util/options.js

@@ -1,14 +1,15 @@
-import {assign, hasOwn, includes, isArray, isFunction, isUndefined, sortBy, startsWith} from './lang';
+import { hasOwn, includes, isArray, isFunction, isUndefined, sortBy, startsWith } from './lang';
 
 const strats = {};
 
 strats.events =
-strats.created =
-strats.beforeConnect =
-strats.connected =
-strats.beforeDisconnect =
-strats.disconnected =
-strats.destroy = concatStrat;
+    strats.created =
+    strats.beforeConnect =
+    strats.connected =
+    strats.beforeDisconnect =
+    strats.disconnected =
+    strats.destroy =
+        concatStrat;
 
 // args strategy
 strats.args = function (parentVal, childVal) {
@@ -17,37 +18,33 @@ strats.args = function (parentVal, childVal) {
 
 // update strategy
 strats.update = function (parentVal, childVal) {
-    return sortBy(concatStrat(parentVal, isFunction(childVal) ? {read: childVal} : childVal), 'order');
+    return sortBy(
+        concatStrat(parentVal, isFunction(childVal) ? { read: childVal } : childVal),
+        'order'
+    );
 };
 
 // property strategy
 strats.props = function (parentVal, childVal) {
-
     if (isArray(childVal)) {
-        childVal = childVal.reduce((value, key) => {
+        const value = {};
+        for (const key of childVal) {
             value[key] = String;
-            return value;
-        }, {});
+        }
+        childVal = value;
     }
 
     return strats.methods(parentVal, childVal);
 };
 
 // extend strategy
-strats.computed =
-strats.methods = function (parentVal, childVal) {
-    return childVal
-        ? parentVal
-            ? assign({}, parentVal, childVal)
-            : childVal
-        : parentVal;
+strats.computed = strats.methods = function (parentVal, childVal) {
+    return childVal ? (parentVal ? { ...parentVal, ...childVal } : childVal) : parentVal;
 };
 
 // data strategy
 strats.data = function (parentVal, childVal, vm) {
-
     if (!vm) {
-
         if (!childVal) {
             return parentVal;
         }
@@ -59,7 +56,6 @@ strats.data = function (parentVal, childVal, vm) {
         return function (vm) {
             return mergeFnData(parentVal, childVal, vm);
         };
-
     }
 
     return mergeFnData(parentVal, childVal, vm);
@@ -67,26 +63,21 @@ strats.data = function (parentVal, childVal, vm) {
 
 function mergeFnData(parentVal, childVal, vm) {
     return strats.computed(
-        isFunction(parentVal)
-            ? parentVal.call(vm, vm)
-            : parentVal,
-        isFunction(childVal)
-            ? childVal.call(vm, vm)
-            : childVal
+        isFunction(parentVal) ? parentVal.call(vm, vm) : parentVal,
+        isFunction(childVal) ? childVal.call(vm, vm) : childVal
     );
 }
 
 // concat strategy
 function concatStrat(parentVal, childVal) {
-
     parentVal = parentVal && !isArray(parentVal) ? [parentVal] : parentVal;
 
     return childVal
         ? parentVal
             ? parentVal.concat(childVal)
             : isArray(childVal)
-                ? childVal
-                : [childVal]
+            ? childVal
+            : [childVal]
         : parentVal;
 }
 
@@ -96,7 +87,6 @@ function defaultStrat(parentVal, childVal) {
 }
 
 export function mergeOptions(parent, child, vm) {
-
     const options = {};
 
     if (isFunction(child)) {
@@ -108,8 +98,8 @@ export function mergeOptions(parent, child, vm) {
     }
 
     if (child.mixins) {
-        for (let i = 0, l = child.mixins.length; i < l; i++) {
-            parent = mergeOptions(parent, child.mixins[i], vm);
+        for (const mixin of child.mixins) {
+            parent = mergeOptions(parent, mixin, vm);
         }
     }
 
@@ -131,25 +121,21 @@ export function mergeOptions(parent, child, vm) {
 }
 
 export function parseOptions(options, args = []) {
-
     try {
-
-        return !options
-            ? {}
-            : startsWith(options, '{')
+        return options
+            ? startsWith(options, '{')
                 ? JSON.parse(options)
                 : args.length && !includes(options, ':')
-                    ? ({[args[0]]: options})
-                    : options.split(';').reduce((options, option) => {
-                        const [key, value] = option.split(/:(.*)/);
-                        if (key && !isUndefined(value)) {
-                            options[key.trim()] = value.trim();
-                        }
-                        return options;
-                    }, {});
-
+                ? { [args[0]]: options }
+                : options.split(';').reduce((options, option) => {
+                      const [key, value] = option.split(/:(.*)/);
+                      if (key && !isUndefined(value)) {
+                          options[key.trim()] = value.trim();
+                      }
+                      return options;
+                  }, {})
+            : {};
     } catch (e) {
         return {};
     }
-
 }

package/src/js/util/player.js

@@ -1,43 +1,39 @@
-import {once} from './event';
-import {Promise} from './promise';
-import {assign, includes, noop} from './lang';
+import { isTag } from './dom';
+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 +41,39 @@ export function isVideo(el) {
 }
 
 function isHTML5(el) {
-    return el && el.tagName === 'VIDEO';
+    return isTag(el, 'video');
 }
 
 function isIFrame(el) {
-    return el && el.tagName === 'IFRAME' && (isYoutube(el) || isVimeo(el));
+    return isTag(el, '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 +84,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,
     };
 }