uikit 3.11.2-dev.fb043abc2 → 3.12.2

package/src/js/components/slider.js

@@ -1,16 +1,29 @@
 import Class from '../mixin/class';
-import Slider, {speedUp} from '../mixin/slider';
+import Slider, { speedUp } from '../mixin/slider';
 import SliderReactive from '../mixin/slider-reactive';
-import Transitioner, {getMax, getWidth} from './internal/slider-transitioner';
-import {$, addClass, children, css, data, dimensions, findIndex, includes, isEmpty, last, sortBy, toFloat, toggleClass, toNumber} from 'uikit-util';
+import SliderPreload from './internal/slider-preload';
+import Transitioner, { getMax, getWidth } from './internal/slider-transitioner';
+import {
+    $,
+    addClass,
+    children,
+    css,
+    data,
+    dimensions,
+    findIndex,
+    includes,
+    last,
+    toFloat,
+    toggleClass,
+    toNumber,
+} from 'uikit-util';
 
 export default {
-
-    mixins: [Class, Slider, SliderReactive],
+    mixins: [Class, Slider, SliderReactive, SliderPreload],
 
     props: {
         center: Boolean,
-        sets: Boolean
+        sets: Boolean,
     },
 
     data: {
@@ -20,22 +33,24 @@ export default {
         selList: '.uk-slider-items',
         selNav: '.uk-slider-nav',
         clsContainer: 'uk-slider-container',
-        Transitioner
+        Transitioner,
     },
 
     computed: {
-
         avgWidth() {
             return getWidth(this.list) / this.length;
         },
 
-        finite({finite}) {
-            return finite || Math.ceil(getWidth(this.list)) < Math.floor(dimensions(this.list).width + getMaxElWidth(this.list) + this.center);
+        finite({ finite }) {
+            return (
+                finite ||
+                Math.ceil(getWidth(this.list)) <
+                    Math.floor(dimensions(this.list).width + getMaxElWidth(this.list) + this.center)
+            );
         },
 
         maxIndex() {
-
-            if (!this.finite || this.center && !this.sets) {
+            if (!this.finite || (this.center && !this.sets)) {
                 return this.length - 1;
             }
 
@@ -45,73 +60,58 @@ export default {
 
             let lft = 0;
             const max = getMax(this.list);
-            const index = findIndex(this.slides, el => {
-
+            const index = findIndex(this.slides, (el) => {
                 if (lft >= max) {
                     return true;
                 }
 
                 lft += dimensions(el).width;
-
             });
 
             return ~index ? index : this.length - 1;
         },
 
-        sets({sets}) {
-
-            if (!sets) {
+        sets({ sets: enabled }) {
+            if (!enabled) {
                 return;
             }
 
-            const width = dimensions(this.list).width / (this.center ? 2 : 1);
-
             let left = 0;
-            let leftCenter = width;
-            let slideLeft = 0;
-
-            sets = sortBy(this.slides, 'offsetLeft').reduce((sets, slide, i) => {
-
-                const slideWidth = dimensions(slide).width;
-                const slideRight = slideLeft + slideWidth;
-
-                if (slideRight > left) {
-
-                    if (!this.center && i > this.maxIndex) {
-                        i = this.maxIndex;
-                    }
-
-                    if (!includes(sets, i)) {
+            const sets = [];
+            const width = dimensions(this.list).width;
+            for (let i in this.slides) {
+                const slideWidth = dimensions(this.slides[i]).width;
 
-                        const cmp = this.slides[i + 1];
-                        if (this.center && cmp && slideWidth < leftCenter - dimensions(cmp).width / 2) {
-                            leftCenter -= slideWidth;
-                        } else {
-                            leftCenter = width;
-                            sets.push(i);
-                            left = slideLeft + width + (this.center ? slideWidth / 2 : 0);
-                        }
+                if (left + slideWidth > width) {
+                    left = 0;
+                }
 
+                if (this.center) {
+                    if (
+                        left < width / 2 &&
+                        left + slideWidth + dimensions(this.slides[+i + 1]).width / 2 > width / 2
+                    ) {
+                        sets.push(+i);
+                        left = width / 2 - slideWidth / 2;
                     }
+                } else if (left === 0) {
+                    sets.push(Math.min(+i, this.maxIndex));
                 }
 
-                slideLeft += slideWidth;
+                left += slideWidth;
+            }
 
+            if (sets.length) {
                 return sets;
-
-            }, []);
-
-            return !isEmpty(sets) && sets;
-
+            }
         },
 
         transitionOptions() {
             return {
                 center: this.center,
-                list: this.list
+                list: this.list,
             };
-        }
-
+        },
     },
 
     connected() {
@@ -119,48 +119,49 @@ export default {
     },
 
     update: {
-
         write() {
-            this.navItems.forEach(el => {
+            for (const el of this.navItems) {
                 const index = toNumber(data(el, this.attrItem));
                 if (index !== false) {
-                    el.hidden = !this.maxIndex || index > this.maxIndex || this.sets && !includes(this.sets, index);
+                    el.hidden =
+                        !this.maxIndex ||
+                        index > this.maxIndex ||
+                        (this.sets && !includes(this.sets, index));
                 }
-            });
+            }
 
             if (this.length && !this.dragging && !this.stack.length) {
                 this.reorder();
                 this._translate(1);
             }
 
-            const actives = this._getTransitioner(this.index).getActives();
-            this.slides.forEach(slide => toggleClass(slide, this.clsActive, includes(actives, slide)));
-
-            if (this.clsActivated && (!this.sets || includes(this.sets, toFloat(this.index)))) {
-                this.slides.forEach(slide => toggleClass(slide, this.clsActivated || '', includes(actives, slide)));
-            }
+            this.updateActiveClasses();
         },
 
-        events: ['resize']
-
+        events: ['resize'],
     },
 
     events: {
-
         beforeitemshow(e) {
-
-            if (!this.dragging && this.sets && this.stack.length < 2 && !includes(this.sets, this.index)) {
+            if (
+                !this.dragging &&
+                this.sets &&
+                this.stack.length < 2 &&
+                !includes(this.sets, this.index)
+            ) {
                 this.index = this.getValidIndex();
             }
 
             const diff = Math.abs(
-                this.index
-                - this.prevIndex
-                + (this.dir > 0 && this.index < this.prevIndex || this.dir < 0 && this.index > this.prevIndex ? (this.maxIndex + 1) * this.dir : 0)
+                this.index -
+                    this.prevIndex +
+                    ((this.dir > 0 && this.index < this.prevIndex) ||
+                    (this.dir < 0 && this.index > this.prevIndex)
+                        ? (this.maxIndex + 1) * this.dir
+                        : 0)
             );
 
             if (!this.dragging && diff > 1) {
-
                 for (let i = 0; i < diff; i++) {
                     this.stack.splice(1, 0, this.dir > 0 ? 'next' : 'previous');
                 }
@@ -169,25 +170,28 @@ export default {
                 return;
             }
 
-            const index = this.dir < 0 || !this.slides[this.prevIndex] ? this.index : this.prevIndex;
-            this.duration = speedUp(this.avgWidth / this.velocity) * (dimensions(this.slides[index]).width / this.avgWidth);
+            const index =
+                this.dir < 0 || !this.slides[this.prevIndex] ? this.index : this.prevIndex;
+            this.duration =
+                speedUp(this.avgWidth / this.velocity) *
+                (dimensions(this.slides[index]).width / this.avgWidth);
 
             this.reorder();
-
         },
 
         itemshow() {
             if (~this.prevIndex) {
                 addClass(this._getTransitioner().getItemIn(), this.clsActive);
             }
-        }
+        },
 
+        itemshown() {
+            this.updateActiveClasses();
+        },
     },
 
     methods: {
-
         reorder() {
-
             if (this.finite) {
                 css(this.slides, 'order', '');
                 return;
@@ -196,11 +200,10 @@ export default {
             const index = this.dir > 0 && this.slides[this.prevIndex] ? this.prevIndex : this.index;
 
             this.slides.forEach((slide, i) =>
-                css(slide, 'order', this.dir > 0 && i < index
-                    ? 1
-                    : this.dir < 0 && i >= this.index
-                        ? -1
-                        : ''
+                css(
+                    slide,
+                    'order',
+                    this.dir > 0 && i < index ? 1 : this.dir < 0 && i >= this.index ? -1 : ''
                 )
             );
 
@@ -219,11 +222,21 @@ export default {
                 css(slide, 'order', slideIndex > index ? -2 : -1);
                 width -= dimensions(slide).width;
             }
+        },
 
+        updateActiveClasses() {
+            const actives = this._getTransitioner(this.index).getActives();
+            const activeClasses = [
+                this.clsActive,
+                ((!this.sets || includes(this.sets, toFloat(this.index))) && this.clsActivated) ||
+                    '',
+            ];
+            for (const slide of this.slides) {
+                toggleClass(slide, activeClasses, includes(actives, slide));
+            }
         },
 
         getValidIndex(index = this.index, prevIndex = this.prevIndex) {
-
             index = this.getIndex(index, prevIndex);
 
             if (!this.sets) {
@@ -233,23 +246,38 @@ export default {
             let prev;
 
             do {
-
                 if (includes(this.sets, index)) {
                     return index;
                 }
 
                 prev = index;
                 index = this.getIndex(index + this.dir, prevIndex);
-
             } while (index !== prev);
 
             return index;
-        }
-
-    }
+        },
 
+        getAdjacentSlides() {
+            const { width } = dimensions(this.list);
+            const left = -width;
+            const right = width * 2;
+            const slideWidth = dimensions(this.slides[this.index]).width;
+            const slideLeft = this.center ? width / 2 - slideWidth / 2 : 0;
+            const slides = new Set();
+            for (const i of [-1, 1]) {
+                let currentLeft = slideLeft + (i > 0 ? slideWidth : 0);
+                let j = 0;
+                do {
+                    const slide = this.slides[this.getIndex(this.index + i + j++ * i)];
+                    currentLeft += dimensions(slide).width * i;
+                    slides.add(slide);
+                } while (this.slides.length > j && currentLeft > left && currentLeft < right);
+            }
+            return Array.from(slides);
+        },
+    },
 };
 
 function getMaxElWidth(list) {
-    return Math.max(0, ...children(list).map(el => dimensions(el).width));
+    return Math.max(0, ...children(list).map((el) => dimensions(el).width));
 }

package/src/js/components/slideshow-parallax.js

@@ -1 +1 @@
-export {default} from './slider-parallax';
+export { default } from './slider-parallax';

package/src/js/components/slideshow.js

@@ -2,16 +2,16 @@ import Class from '../mixin/class';
 import Slideshow from '../mixin/slideshow';
 import Animations from './internal/slideshow-animations';
 import SliderReactive from '../mixin/slider-reactive';
-import {boxModelAdjust, css} from 'uikit-util';
+import SliderPreload from './internal/slider-preload';
+import { boxModelAdjust, css } from 'uikit-util';
 
 export default {
-
-    mixins: [Class, Slideshow, SliderReactive],
+    mixins: [Class, Slideshow, SliderReactive, SliderPreload],
 
     props: {
         ratio: String,
         minHeight: Number,
-        maxHeight: Number
+        maxHeight: Number,
     },
 
     data: {
@@ -21,20 +21,18 @@ export default {
         selList: '.uk-slideshow-items',
         attrItem: 'uk-slideshow-item',
         selNav: '.uk-slideshow-nav',
-        Animations
+        Animations,
     },
 
     update: {
-
         read() {
-
             if (!this.list) {
                 return false;
             }
 
             let [width, height] = this.ratio.split(':').map(Number);
 
-            height = height * this.list.offsetWidth / width || 0;
+            height = (height * this.list.offsetWidth) / width || 0;
 
             if (this.minHeight) {
                 height = Math.max(this.minHeight, height);
@@ -44,15 +42,19 @@ export default {
                 height = Math.min(this.maxHeight, height);
             }
 
-            return {height: height - boxModelAdjust(this.list, 'height', 'content-box')};
+            return { height: height - boxModelAdjust(this.list, 'height', 'content-box') };
         },
 
-        write({height}) {
+        write({ height }) {
             height > 0 && css(this.list, 'minHeight', height);
         },
 
-        events: ['resize']
-
-    }
+        events: ['resize'],
+    },
 
+    methods: {
+        getAdjacentSlides() {
+            return [1, -1].map((i) => this.slides[this.getIndex(this.index + i)]);
+        },
+    },
 };