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

package/src/js/mixin/parallax.js

@@ -1,6 +1,19 @@
 import Media from '../mixin/media';
-import {getMaxPathLength} from '../core/svg';
-import {css, Dimensions, each, isNumber, isString, isUndefined, noop, startsWith, toFloat, toPx, trigger, ucfirst} from 'uikit-util';
+import { getMaxPathLength } from '../core/svg';
+import {
+    css,
+    Dimensions,
+    each,
+    isNumber,
+    isString,
+    isUndefined,
+    noop,
+    startsWith,
+    toFloat,
+    toPx,
+    trigger,
+    ucfirst,
+} from 'uikit-util';
 
 const props = {
     x: transformFn,
@@ -20,13 +33,12 @@ const props = {
     opacity: cssPropFn,
     stroke: strokeFn,
     bgx: backgroundFn,
-    bgy: backgroundFn
+    bgy: backgroundFn,
 };
 
-const {keys} = Object;
+const { keys } = Object;
 
 export default {
-
     mixins: [Media],
 
     props: fillObject(keys(props), 'list'),
@@ -34,7 +46,6 @@ export default {
     data: fillObject(keys(props), undefined),
 
     computed: {
-
         props(properties, $el) {
             return keys(props).reduce((result, prop) => {
                 if (!isUndefined(properties[prop])) {
@@ -42,36 +53,34 @@ export default {
                 }
                 return result;
             }, {});
-        }
-
+        },
     },
 
     events: {
         bgimageload() {
             this.$emit();
-        }
+        },
     },
 
     methods: {
-
         reset() {
             each(this.getCss(0), (_, prop) => css(this.$el, prop, ''));
         },
 
         getCss(percent) {
-            return keys(this.props).reduce((css, prop) => {
-                this.props[prop](css, percent);
-                return css;
-            }, {transform: '', filter: ''});
-        }
-
-    }
-
+            return keys(this.props).reduce(
+                (css, prop) => {
+                    this.props[prop](css, percent);
+                    return css;
+                },
+                { transform: '', filter: '' }
+            );
+        },
+    },
 };
 
 function transformFn(prop, el, steps) {
-
-    const unit = getUnit(steps) || {x: 'px', y: 'px', rotate: 'deg'}[prop] || '';
+    const unit = getUnit(steps) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
 
     if (prop === 'x' || prop === 'y') {
         prop = `translate${ucfirst(prop)}`;
@@ -95,20 +104,20 @@ function transformFn(prop, el, steps) {
 }
 
 function colorFn(prop, el, steps) {
-
     if (steps.length === 1) {
         steps.unshift(getCssValue(el, prop, ''));
     }
 
-    steps = steps.map(step => parseColor(el, step));
+    steps = steps.map((step) => parseColor(el, step));
 
     return (css, percent) => {
-
         const [start, end, p] = getStep(steps, percent);
-        const value = start.map((value, i) => {
-            value += p * (end[i] - value);
-            return i === 3 ? toFloat(value) : parseInt(value, 10);
-        }).join(',');
+        const value = start
+            .map((value, i) => {
+                value += p * (end[i] - value);
+                return i === 3 ? toFloat(value) : parseInt(value, 10);
+            })
+            .join(',');
         css[prop] = `rgba(${value})`;
     };
 }
@@ -123,13 +132,12 @@ function parseColor(el, color) {
 }
 
 function filterFn(prop, el, steps) {
-
     if (steps.length === 1) {
         steps.unshift(0);
     }
 
-    const unit = getUnit(steps) || {blur: 'px', hue: 'deg'}[prop] || '%';
-    prop = {fopacity: 'opacity', hue: 'hue-rotate'}[prop] || prop;
+    const unit = getUnit(steps) || { blur: 'px', hue: 'deg' }[prop] || '%';
+    prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
     steps = steps.map(toFloat);
 
     return (css, percent) => {
@@ -139,7 +147,6 @@ function filterFn(prop, el, steps) {
 }
 
 function cssPropFn(prop, el, steps) {
-
     if (steps.length === 1) {
         steps.unshift(getCssValue(el, prop, ''));
     }
@@ -152,7 +159,6 @@ function cssPropFn(prop, el, steps) {
 }
 
 function strokeFn(prop, el, steps) {
-
     if (steps.length === 1) {
         steps.unshift(0);
     }
@@ -160,7 +166,7 @@ function strokeFn(prop, el, steps) {
     const unit = getUnit(steps);
     steps = steps.map(toFloat);
 
-    if (!steps.some(step => step)) {
+    if (!steps.some((step) => step)) {
         return noop;
     }
 
@@ -168,7 +174,7 @@ function strokeFn(prop, el, steps) {
     css(el, 'strokeDasharray', length);
 
     if (unit === '%') {
-        steps = steps.map(step => step * length / 100);
+        steps = steps.map((step) => (step * length) / 100);
     }
 
     steps = steps.reverse();
@@ -179,17 +185,15 @@ function strokeFn(prop, el, steps) {
 }
 
 function backgroundFn(prop, el, steps) {
-
     if (steps.length === 1) {
         steps.unshift(0);
     }
 
     prop = prop.substr(-1);
     const attr = prop === 'y' ? 'height' : 'width';
-    steps = steps.map(step => toPx(step, attr, el));
+    steps = steps.map((step) => toPx(step, attr, el));
 
-    css(el, `background-position-${prop}`, '');
-    const bgPos = css(el, 'backgroundPosition').split(' ')[prop === 'x' ? 0 : 1]; // IE 11 can't read background-position-[x|y]
+    const bgPos = getCssValue(el, `background-position-${prop}`, '');
 
     return getCssValue(el, 'backgroundSize', '') === 'cover'
         ? backgroundCoverFn(prop, el, steps, bgPos, attr)
@@ -197,7 +201,6 @@ function backgroundFn(prop, el, steps) {
 }
 
 function backgroundCoverFn(prop, el, steps, bgPos, attr) {
-
     const dimImage = getBackgroundImageDimensions(el);
 
     if (!dimImage.width) {
@@ -213,7 +216,7 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
 
     const dimEl = {
         width: el.offsetWidth,
-        height: el.offsetHeight
+        height: el.offsetHeight,
     };
 
     const baseDim = Dimensions.cover(dimImage, dimEl);
@@ -222,7 +225,6 @@ function backgroundCoverFn(prop, el, steps, bgPos, attr) {
     if (span < diff) {
         dimEl[attr] = baseDim[attr] + diff - span;
     } else if (span > diff) {
-
         const posPercentage = dimEl[attr] / toPx(bgPos, attr, el, true);
 
         if (posPercentage) {
@@ -266,13 +268,13 @@ function getBackgroundImageDimensions(el) {
         }
     }
 
-    return dimensions[src] = toDimensions(image);
+    return (dimensions[src] = toDimensions(image));
 }
 
 function toDimensions(image) {
     return {
         width: image.naturalWidth,
-        height: image.naturalHeight
+        height: image.naturalHeight,
     };
 }
 
@@ -282,18 +284,21 @@ function getStep(steps, percent) {
 
     return steps
         .slice(index, index + 2)
-        .concat(percent === 1 ? 1 : percent % (1 / count) * count);
+        .concat(percent === 1 ? 1 : (percent % (1 / count)) * count);
 }
 
 function getValue(steps, percent) {
     const [start, end, p] = getStep(steps, percent);
-    return isNumber(start)
-        ? start + Math.abs(start - end) * p * (start < end ? 1 : -1)
-        : +end;
+    return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
 }
 
 function getUnit(steps, defaultUnit) {
-    return steps.reduce((unit, step) => unit || isString(step) && step.replace(/[\d-]/g, '').trim(), '') || defaultUnit;
+    return (
+        steps.reduce(
+            (unit, step) => unit || (isString(step) && step.replace(/[\d-]/g, '').trim()),
+            ''
+        ) || defaultUnit
+    );
 }
 
 function getCssValue(el, prop, value) {

package/src/js/mixin/position.js

@@ -1,24 +1,31 @@
-import {$, flipPosition, offset as getOffset, isNumeric, isRtl, positionAt, removeClasses, toggleClass} from 'uikit-util';
+import {
+    $,
+    flipPosition,
+    offset as getOffset,
+    isNumeric,
+    isRtl,
+    positionAt,
+    removeClasses,
+    toggleClass,
+} from 'uikit-util';
 
 export default {
-
     props: {
         pos: String,
         offset: null,
         flip: Boolean,
-        clsPos: String
+        clsPos: String,
     },
 
     data: {
         pos: `bottom-${isRtl ? 'right' : 'left'}`,
         flip: true,
         offset: false,
-        clsPos: ''
+        clsPos: '',
     },
 
     computed: {
-
-        pos({pos}) {
+        pos({ pos }) {
             return pos.split('-').concat('center').slice(0, 2);
         },
 
@@ -28,32 +35,34 @@ export default {
 
         align() {
             return this.pos[1];
-        }
-
+        },
     },
 
     methods: {
-
         positionAt(element, target, boundary) {
-
             removeClasses(element, `${this.clsPos}-(top|bottom|left|right)(-[a-z]+)?`);
 
-            let {offset} = this;
+            let { offset } = this;
             const axis = this.getAxis();
 
             if (!isNumeric(offset)) {
                 const node = $(offset);
                 offset = node
-                    ? getOffset(node)[axis === 'x' ? 'left' : 'top'] - getOffset(target)[axis === 'x' ? 'right' : 'bottom']
+                    ? getOffset(node)[axis === 'x' ? 'left' : 'top'] -
+                      getOffset(target)[axis === 'x' ? 'right' : 'bottom']
                     : 0;
             }
 
-            const {x, y} = positionAt(
+            const { x, y } = positionAt(
                 element,
                 target,
-                axis === 'x' ? `${flipPosition(this.dir)} ${this.align}` : `${this.align} ${flipPosition(this.dir)}`,
+                axis === 'x'
+                    ? `${flipPosition(this.dir)} ${this.align}`
+                    : `${this.align} ${flipPosition(this.dir)}`,
                 axis === 'x' ? `${this.dir} ${this.align}` : `${this.align} ${this.dir}`,
-                axis === 'x' ? `${this.dir === 'left' ? -offset : offset}` : ` ${this.dir === 'top' ? -offset : offset}`,
+                axis === 'x'
+                    ? `${this.dir === 'left' ? -offset : offset}`
+                    : ` ${this.dir === 'top' ? -offset : offset}`,
                 null,
                 this.flip,
                 boundary
@@ -63,13 +72,10 @@ export default {
             this.align = axis === 'x' ? y : x;
 
             toggleClass(element, `${this.clsPos}-${this.dir}-${this.align}`, this.offset === false);
-
         },
 
         getAxis() {
             return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
-        }
-
-    }
-
+        },
+    },
 };

package/src/js/mixin/slider-autoplay.js

@@ -1,17 +1,16 @@
-import {$, attr, matches} from 'uikit-util';
+import { $, attr, matches } from 'uikit-util';
 
 export default {
-
     props: {
         autoplay: Boolean,
         autoplayInterval: Number,
-        pauseOnHover: Boolean
+        pauseOnHover: Boolean,
     },
 
     data: {
         autoplay: false,
         autoplayInterval: 7000,
-        pauseOnHover: true
+        pauseOnHover: true,
     },
 
     connected() {
@@ -27,9 +26,7 @@ export default {
     },
 
     events: [
-
         {
-
             name: 'visibilitychange',
 
             el() {
@@ -46,32 +43,26 @@ export default {
                 } else {
                     this.startAutoplay();
                 }
-            }
-
-        }
-
+            },
+        },
     ],
 
     methods: {
-
         startAutoplay() {
-
             this.stopAutoplay();
 
             this.interval = setInterval(
-                () => (!this.draggable || !$(':focus', this.$el))
-                    && (!this.pauseOnHover || !matches(this.$el, ':hover'))
-                    && !this.stack.length
-                    && this.show('next'),
+                () =>
+                    (!this.draggable || !$(':focus', this.$el)) &&
+                    (!this.pauseOnHover || !matches(this.$el, ':hover')) &&
+                    !this.stack.length &&
+                    this.show('next'),
                 this.autoplayInterval
             );
-
         },
 
         stopAutoplay() {
             this.interval && clearInterval(this.interval);
-        }
-
-    }
-
+        },
+    },
 };

package/src/js/mixin/slider-drag.js

@@ -1,39 +1,46 @@
-import {closest, css, getEventPos, includes, isRtl, isTouch, off, on, pointerCancel, pointerDown, pointerMove, pointerUp, selInput, trigger} from 'uikit-util';
+import {
+    closest,
+    css,
+    getEventPos,
+    includes,
+    isRtl,
+    isTouch,
+    off,
+    on,
+    pointerCancel,
+    pointerDown,
+    pointerMove,
+    pointerUp,
+    selInput,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
     props: {
-        draggable: Boolean
+        draggable: Boolean,
     },
 
     data: {
         draggable: true,
-        threshold: 10
+        threshold: 10,
     },
 
     created() {
-
-        ['start', 'move', 'end'].forEach(key => {
-
+        for (const key of ['start', 'move', 'end']) {
             const fn = this[key];
-            this[key] = e => {
-
+            this[key] = (e) => {
                 const pos = getEventPos(e).x * (isRtl ? -1 : 1);
 
-                this.prevPos = pos !== this.pos ? this.pos : this.prevPos;
+                this.prevPos = pos === this.pos ? this.prevPos : this.pos;
                 this.pos = pos;
 
                 fn(e);
             };
-
-        });
-
+        }
     },
 
     events: [
-
         {
-
             name: pointerDown,
 
             delegate() {
@@ -41,19 +48,18 @@ export default {
             },
 
             handler(e) {
-
-                if (!this.draggable
-                    || !isTouch(e) && hasTextNodesOnly(e.target)
-                    || closest(e.target, selInput)
-                    || e.button > 0
-                    || this.length < 2
+                if (
+                    !this.draggable ||
+                    (!isTouch(e) && hasTextNodesOnly(e.target)) ||
+                    closest(e.target, selInput) ||
+                    e.button > 0 ||
+                    this.length < 2
                 ) {
                     return;
                 }
 
                 this.start(e);
-            }
-
+            },
         },
 
         {
@@ -61,19 +67,15 @@ export default {
 
             handler(e) {
                 e.preventDefault();
-            }
-        }
-
+            },
+        },
     ],
 
     methods: {
-
         start() {
-
             this.drag = this.pos;
 
             if (this._transitioner) {
-
                 this.percent = this._transitioner.percent();
                 this.drag += this._transitioner.getDistance() * this.percent * this.dir;
 
@@ -83,25 +85,26 @@ export default {
                 this.dragging = true;
 
                 this.stack = [];
-
             } else {
                 this.prevIndex = this.index;
             }
 
-            on(document, pointerMove, this.move, {passive: false});
+            on(document, pointerMove, this.move, { passive: false });
 
             // 'input' event is triggered by video controls
             on(document, `${pointerUp} ${pointerCancel} input`, this.end, true);
 
             css(this.list, 'userSelect', 'none');
-
         },
 
         move(e) {
-
             const distance = this.pos - this.drag;
 
-            if (distance === 0 || this.prevPos === this.pos || !this.dragging && Math.abs(distance) < this.threshold) {
+            if (
+                distance === 0 ||
+                this.prevPos === this.pos ||
+                (!this.dragging && Math.abs(distance) < this.threshold)
+            ) {
                 return;
             }
 
@@ -111,23 +114,21 @@ export default {
             e.cancelable && e.preventDefault();
 
             this.dragging = true;
-            this.dir = (distance < 0 ? 1 : -1);
+            this.dir = distance < 0 ? 1 : -1;
 
-            const {slides} = this;
-            let {prevIndex} = this;
+            const { slides } = this;
+            let { prevIndex } = this;
             let dis = Math.abs(distance);
             let nextIndex = this.getIndex(prevIndex + this.dir, prevIndex);
             let width = this._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth;
 
             while (nextIndex !== prevIndex && dis > width) {
-
                 this.drag -= width * this.dir;
 
                 prevIndex = nextIndex;
                 dis -= width;
                 nextIndex = this.getIndex(prevIndex + this.dir, prevIndex);
                 width = this._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth;
-
             }
 
             this.percent = dis / width;
@@ -139,17 +140,18 @@ export default {
 
             let itemShown;
 
-            [this.index, this.prevIndex].filter(i => !includes([nextIndex, prevIndex], i)).forEach(i => {
-                trigger(slides[i], 'itemhidden', [this]);
-
-                if (edge) {
-                    itemShown = true;
-                    this.prevIndex = prevIndex;
-                }
+            [this.index, this.prevIndex]
+                .filter((i) => !includes([nextIndex, prevIndex], i))
+                .forEach((i) => {
+                    trigger(slides[i], 'itemhidden', [this]);
 
-            });
+                    if (edge) {
+                        itemShown = true;
+                        this.prevIndex = prevIndex;
+                    }
+                });
 
-            if (this.index === prevIndex && this.prevIndex !== prevIndex || itemShown) {
+            if ((this.index === prevIndex && this.prevIndex !== prevIndex) || itemShown) {
                 trigger(slides[this.index], 'itemshown', [this]);
             }
 
@@ -167,16 +169,13 @@ export default {
                 !edge && trigger(prev, 'itemhide', [this]);
                 trigger(next, 'itemshow', [this]);
             }
-
         },
 
         end() {
-
-            off(document, pointerMove, this.move, {passive: false});
+            off(document, pointerMove, this.move, { passive: false });
             off(document, `${pointerUp} ${pointerCancel} input`, this.end, true);
 
             if (this.dragging) {
-
                 this.dragging = null;
 
                 if (this.index === this.prevIndex) {
@@ -185,29 +184,29 @@ export default {
                     this._show(false, this.index, true);
                     this._transitioner = null;
                 } else {
-
-                    const dirChange = (isRtl ? this.dir * (isRtl ? 1 : -1) : this.dir) < 0 === this.prevPos > this.pos;
+                    const dirChange =
+                        (isRtl ? this.dir * (isRtl ? 1 : -1) : this.dir) < 0 ===
+                        this.prevPos > this.pos;
                     this.index = dirChange ? this.index : this.prevIndex;
 
                     if (dirChange) {
                         this.percent = 1 - this.percent;
                     }
 
-                    this.show(this.dir > 0 && !dirChange || this.dir < 0 && dirChange ? 'next' : 'previous', true);
+                    this.show(
+                        (this.dir > 0 && !dirChange) || (this.dir < 0 && dirChange)
+                            ? 'next'
+                            : 'previous',
+                        true
+                    );
                 }
-
             }
 
-            css(this.list, {userSelect: '', pointerEvents: ''});
-
-            this.drag
-                = this.percent
-                = null;
-
-        }
-
-    }
+            css(this.list, { userSelect: '', pointerEvents: '' });
 
+            this.drag = this.percent = null;
+        },
+    },
 };
 
 function hasTextNodesOnly(el) {