uikit 3.11.2-dev.fb043abc2 → 3.12.0

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) {

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

@@ -1,49 +1,45 @@
-import {$, $$, data, html, toggleClass, toNumber} from 'uikit-util';
+import { $, $$, data, html, toggleClass, toNumber } from 'uikit-util';
 
 export default {
-
     data: {
-        selNav: false
+        selNav: false,
     },
 
     computed: {
-
-        nav({selNav}, $el) {
+        nav({ selNav }, $el) {
             return $(selNav, $el);
         },
 
-        selNavItem({attrItem}) {
+        selNavItem({ attrItem }) {
             return `[${attrItem}],[data-${attrItem}]`;
         },
 
         navItems(_, $el) {
             return $$(this.selNavItem, $el);
-        }
-
+        },
     },
 
     update: {
-
         write() {
-
             if (this.nav && this.length !== this.nav.children.length) {
-                html(this.nav, this.slides.map((_, i) => `<li ${this.attrItem}="${i}"><a href></a></li>`).join(''));
+                html(
+                    this.nav,
+                    this.slides
+                        .map((_, i) => `<li ${this.attrItem}="${i}"><a href></a></li>`)
+                        .join('')
+                );
             }
 
-            this.navItems.concat(this.nav).forEach(el => el && (el.hidden = !this.maxIndex));
+            this.navItems.concat(this.nav).forEach((el) => el && (el.hidden = !this.maxIndex));
 
             this.updateNav();
-
         },
 
-        events: ['resize']
-
+        events: ['resize'],
     },
 
     events: [
-
         {
-
             name: 'click',
 
             delegate() {
@@ -53,34 +49,29 @@ export default {
             handler(e) {
                 e.preventDefault();
                 this.show(data(e.current, this.attrItem));
-            }
-
+            },
         },
 
         {
-
             name: 'itemshow',
-            handler: 'updateNav'
-
-        }
-
+            handler: 'updateNav',
+        },
     ],
 
     methods: {
-
         updateNav() {
-
             const i = this.getValidIndex();
-            this.navItems.forEach(el => {
-
+            for (const el of this.navItems) {
                 const cmd = data(el, this.attrItem);
 
                 toggleClass(el, this.clsActive, toNumber(cmd) === i);
-                toggleClass(el, 'uk-invisible', this.finite && (cmd === 'previous' && i === 0 || cmd === 'next' && i >= this.maxIndex));
-            });
-
-        }
-
-    }
-
+                toggleClass(
+                    el,
+                    'uk-invisible',
+                    this.finite &&
+                        ((cmd === 'previous' && i === 0) || (cmd === 'next' && i >= this.maxIndex))
+                );
+            }
+        },
+    },
 };

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

@@ -1,9 +1,6 @@
 export default {
-
     update: {
-
         write() {
-
             if (this.stack.length || this.dragging) {
                 return;
             }
@@ -13,11 +10,8 @@ export default {
             if (!~this.prevIndex || this.index !== index) {
                 this.show(index);
             }
-
         },
 
-        events: ['resize']
-
-    }
-
+        events: ['resize'],
+    },
 };

package/src/js/mixin/slider.js

@@ -1,10 +1,20 @@
 import SliderAutoplay from './slider-autoplay';
 import SliderDrag from './slider-drag';
 import SliderNav from './slider-nav';
-import {$, $$, assign, clamp, fastdom, getIndex, hasClass, isNumber, isRtl, Promise, removeClass, trigger} from 'uikit-util';
+import {
+    $,
+    $$,
+    clamp,
+    fastdom,
+    getIndex,
+    hasClass,
+    isNumber,
+    isRtl,
+    removeClass,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
     mixins: [SliderAutoplay, SliderDrag, SliderNav],
 
     props: {
@@ -13,7 +23,7 @@ export default {
         index: Number,
         finite: Boolean,
         velocity: Number,
-        selSlides: String
+        selSlides: String,
     },
 
     data: () => ({
@@ -27,7 +37,7 @@ export default {
         clsActive: 'uk-active',
         clsActivated: false,
         Transitioner: false,
-        transitionOptions: {}
+        transitionOptions: {},
     }),
 
     connected() {
@@ -41,12 +51,11 @@ export default {
     },
 
     computed: {
-
-        duration({velocity}, $el) {
+        duration({ velocity }, $el) {
             return speedUp($el.offsetWidth / velocity);
         },
 
-        list({selList}, $el) {
+        list({ selList }, $el) {
             return $(selList, $el);
         },
 
@@ -54,45 +63,32 @@ export default {
             return this.length - 1;
         },
 
-        selSlides({selList, selSlides}) {
+        selSlides({ selList, selSlides }) {
             return `${selList} ${selSlides || '> *'}`;
         },
 
         slides: {
-
             get() {
                 return $$(this.selSlides, this.$el);
             },
 
             watch() {
                 this.$reset();
-            }
-
+            },
         },
 
         length() {
             return this.slides.length;
-        }
-
-    },
-
-    events: {
-
-        itemshown() {
-            this.$update(this.list);
-        }
-
+        },
     },
 
     methods: {
-
         show(index, force = false) {
-
             if (this.dragging || !this.length) {
                 return;
             }
 
-            const {stack} = this;
+            const { stack } = this;
             const queueIndex = force ? 0 : stack.length;
             const reset = () => {
                 stack.splice(queueIndex, 1);
@@ -105,7 +101,6 @@ export default {
             stack[force ? 'unshift' : 'push'](index);
 
             if (!force && stack.length > 1) {
-
                 if (stack.length === 2) {
                     this._transitioner.forward(Math.min(this.duration, 200));
                 }
@@ -127,8 +122,9 @@ export default {
             this.prevIndex = prevIndex;
             this.index = nextIndex;
 
-            if (prev && !trigger(prev, 'beforeitemhide', [this])
-                || !trigger(next, 'beforeitemshow', [this, prev])
+            if (
+                (prev && !trigger(prev, 'beforeitemhide', [this])) ||
+                !trigger(next, 'beforeitemshow', [this, prev])
             ) {
                 this.index = this.prevIndex;
                 reset();
@@ -136,11 +132,10 @@ export default {
             }
 
             const promise = this._show(prev, next, force).then(() => {
-
                 prev && trigger(prev, 'itemhidden', [this]);
                 trigger(next, 'itemshown', [this]);
 
-                return new Promise(resolve => {
+                return new Promise((resolve) => {
                     fastdom.write(() => {
                         stack.shift();
                         if (stack.length) {
@@ -151,14 +146,12 @@ export default {
                         resolve();
                     });
                 });
-
             });
 
             prev && trigger(prev, 'itemhide', [this]);
             trigger(next, 'itemshow', [this]);
 
             return promise;
-
         },
 
         getIndex(index = this.index, prev = this.index) {
@@ -170,28 +163,25 @@ 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);
                 return Promise.resolve();
             }
 
-            const {length} = this.stack;
-            return this._transitioner[length > 1 ? 'forward' : 'show'](length > 1 ? Math.min(this.duration, 75 + 75 / (length - 1)) : this.duration, this.percent);
-
+            const { length } = this.stack;
+            return this._transitioner[length > 1 ? 'forward' : 'show'](
+                length > 1 ? Math.min(this.duration, 75 + 75 / (length - 1)) : this.duration,
+                this.percent
+            );
         },
 
         _getDistance(prev, next) {
@@ -204,29 +194,26 @@ export default {
             return transitioner;
         },
 
-        _getTransitioner(prev = this.prevIndex, next = this.index, dir = this.dir || 1, options = this.transitionOptions) {
+        _getTransitioner(
+            prev = this.prevIndex,
+            next = this.index,
+            dir = this.dir || 1,
+            options = this.transitionOptions
+        ) {
             return new this.Transitioner(
                 isNumber(prev) ? this.slides[prev] : prev,
                 isNumber(next) ? this.slides[next] : next,
                 dir * (isRtl ? -1 : 1),
                 options
             );
-        }
-
-    }
-
+        },
+    },
 };
 
 function getDirection(index, prevIndex) {
-    return index === 'next'
-        ? 1
-        : index === 'previous'
-            ? -1
-            : index < prevIndex
-                ? -1
-                : 1;
+    return index === 'next' ? 1 : index === 'previous' ? -1 : index < prevIndex ? -1 : 1;
 }
 
 export function speedUp(x) {
-    return .5 * x + 300; // parabola through (400,500; 600,600; 1800,1200)
+    return 0.5 * x + 300; // parabola through (400,500; 600,600; 1800,1200)
 }

package/src/js/mixin/slideshow.js

@@ -1,53 +1,43 @@
 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],
 
     props: {
-        animation: String
+        animation: String,
     },
 
     data: {
         animation: 'slide',
         clsActivated: 'uk-transition-active',
         Animations,
-        Transitioner
+        Transitioner,
     },
 
     computed: {
-
-        animation({animation, Animations}) {
-            return assign(Animations[animation] || Animations.slide, {name: animation});
+        animation({ animation, Animations }) {
+            return { ...(Animations[animation] || Animations.slide), name: animation };
         },
 
         transitionOptions() {
-            return {animation: this.animation};
-        }
-
+            return { animation: this.animation };
+        },
     },
 
     events: {
-
-        'itemshow itemhide itemshown itemhidden'({target}) {
-            this.$update(target);
-        },
-
-        beforeitemshow({target}) {
+        beforeitemshow({ target }) {
             addClass(target, this.clsActive);
         },
 
-        itemshown({target}) {
+        itemshown({ target }) {
             addClass(target, this.clsActivated);
         },
 
-        itemhidden({target}) {
+        itemhidden({ target }) {
             removeClass(target, this.clsActive, this.clsActivated);
-        }
-
-    }
-
+        },
+    },
 };