Optimization. Adjust number of clones according to the track width or height.

Author: NaotoshiFujita

dist/js/splide.esm.js

@@ -286,16 +286,17 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * @author    Naotoshi Fujita
  * @copyright Naotoshi Fujita. All rights reserved.
  */
-
+var keys = Object.keys;
 /**
  * Iterate an object like Array.forEach.
  * IE doesn't support forEach of HTMLCollection.
  *
  * @param {Object}    obj       - An object.
  * @param {function}  callback  - A function handling each value. Arguments are value, property and index.
  */
+
 function each(obj, callback) {
-  Object.keys(obj).some(function (key, index) {
+  keys(obj).some(function (key, index) {
     return callback(obj[key], key, index);
   });
 }
@@ -309,7 +310,7 @@ function each(obj, callback) {
  */
 
 function values(obj) {
-  return Object.keys(obj).map(function (key) {
+  return keys(obj).map(function (key) {
     return obj[key];
   });
 }
@@ -360,7 +361,7 @@ function merge(_ref, from) {
 
 function object_assign(to, from) {
   to._s = from;
-  Object.keys(from).forEach(function (key) {
+  keys(from).forEach(function (key) {
     if (!to[key]) {
       Object.defineProperty(to, key, Object.getOwnPropertyDescriptor(from, key));
     }
@@ -501,7 +502,7 @@ function find(elm, selector) {
 function child(parent, tagOrClassName) {
   if (parent) {
     return values(parent.children).filter(function (child) {
-      return hasClass(child, tagOrClassName.split(' ')[0]) || child.tagName.toLowerCase() === tagOrClassName;
+      return hasClass(child, tagOrClassName.split(' ')[0]) || child.tagName === tagOrClassName;
     })[0] || null;
   }
 
@@ -544,8 +545,9 @@ function domify(html) {
 
 function dom_remove(elms) {
   toArray(elms).forEach(function (elm) {
-    if (elm && elm.parentElement) {
-      elm.parentElement.removeChild(elm);
+    if (elm) {
+      var parent = elm.parentElement;
+      parent && parent.removeChild(elm);
     }
   });
 }
@@ -569,8 +571,9 @@ function append(parent, child) {
  */
 
 function before(elm, ref) {
-  if (elm && ref && ref.parentElement) {
-    ref.parentElement.insertBefore(elm, ref);
+  if (elm && ref) {
+    var parent = ref.parentElement;
+    parent && parent.insertBefore(elm, ref);
   }
 }
 /**
@@ -1987,7 +1990,7 @@ var STYLE_RESTORE_EVENTS = 'update.slide';
      *
      * @type {Element|null}
      */
-    container: find(slide, "." + Splide.classes.container),
+    container: child(slide, Splide.classes.container),
 
     /**
      * Whether this is a cloned slide or not.
@@ -2017,8 +2020,8 @@ var STYLE_RESTORE_EVENTS = 'update.slide';
        */
 
       if (updateOnMove) {
-        Splide.on('move.slide', function () {
-          if (Splide.index === realIndex) {
+        Splide.on('move.slide', function (newIndex) {
+          if (newIndex === realIndex) {
             _update(true, false);
           }
         });
@@ -2214,8 +2217,7 @@ var UID_NAME = 'uid';
         _this.destroy();
 
         _this.init();
-      });
-      Splide.on('updated', function () {
+      }).on('updated', function () {
         removeClass(root, getClasses());
         addClass(root, getClasses());
       });
@@ -2311,7 +2313,7 @@ var UID_NAME = 'uid';
       }
 
       if (slide instanceof Element) {
-        var ref = this.slides[index]; // This will be removed in mount() of Slide component.
+        var ref = this.slides[index]; // This will be removed in mount() of a Slide component.
 
         applyStyle(slide, {
           display: 'none'
@@ -3176,6 +3178,13 @@ var controller_floor = Math.floor;
    * @type {Array}
    */
   var clones = [];
+  /**
+   * Store the current clone count on one side.
+   *
+   * @type {number}
+   */
+
+  var cloneCount = 0;
   /**
    * Keep Elements component.
    *
@@ -3194,14 +3203,12 @@ var controller_floor = Math.floor;
      * Called when the component is mounted.
      */
     mount: function mount() {
-      var _this = this;
-
       if (Splide.is(LOOP)) {
-        generateClones();
-        Splide.on('refresh', function () {
-          _this.destroy();
-
-          generateClones();
+        init();
+        Splide.on('refresh', init).on('resize', function () {
+          if (cloneCount !== getCloneCount()) {
+            Splide.refresh();
+          }
         });
       }
     },
@@ -3233,18 +3240,29 @@ var controller_floor = Math.floor;
     }
 
   };
+  /**
+   * Initialization.
+   */
+
+  function init() {
+    Clones.destroy();
+    cloneCount = getCloneCount();
+    generateClones(cloneCount);
+  }
   /**
    * Generate and append/prepend clones.
+   *
+   * @param {number} count - The half number of clones.
    */
 
-  function generateClones() {
+
+  function generateClones(count) {
     var length = Elements.length;
 
     if (!length) {
       return;
     }
 
-    var count = getCloneCount();
     var slides = Elements.slides;
 
     while (slides.length < count) {
@@ -3283,15 +3301,15 @@ var controller_floor = Math.floor;
 
     if (options.clones) {
       return options.clones;
-    } // Use the slide length in autoWidth mode because the number candnot be calculated.
+    } // Use the slide length in autoWidth mode because the number cannot be calculated.
 
 
     var baseCount = options.autoWidth ? Elements.length : options.perPage;
     var dimension = options.direction === TTB ? 'Height' : 'Width';
     var fixedSize = options["fixed" + dimension];
 
     if (fixedSize) {
-      // Roughly determine the count. This needs not to be strict.
+      // Roughly calculate the count. This needs not to be strict.
       baseCount = Math.ceil(Elements.track["client" + dimension] / fixedSize);
     }
 
@@ -4442,7 +4460,7 @@ var PAUSE_FLAGS = {
 
   function apply(uncover) {
     Components.Elements.each(function (Slide) {
-      var img = child(Slide.slide, 'img') || child(Slide.container, 'img');
+      var img = child(Slide.slide, 'IMG') || child(Slide.container, 'IMG');
 
       if (img && img.src) {
         cover(img, uncover);
@@ -5220,6 +5238,13 @@ var TAB_INDEX = 'tabindex';
    */
 
   var Elements = Components.Elements;
+  /**
+   * All attributes related with A11y.
+   *
+   * @type {string[]}
+   */
+
+  var allAttributes = [ARIA_HIDDEN, TAB_INDEX, ARIA_CONTROLS, ARIA_LABEL, ARIA_CURRENRT, 'role'];
   /**
    * A11y component object.
    *
@@ -5242,7 +5267,9 @@ var TAB_INDEX = 'tabindex';
         updateSlide(Slide.slide, true);
       }).on('hidden', function (Slide) {
         updateSlide(Slide.slide, false);
-      }).on('arrows:mounted', initArrows).on('arrows:updated', updateArrows).on('pagination:mounted', initPagination).on('pagination:updated', updatePagination);
+      }).on('arrows:mounted', initArrows).on('arrows:updated', updateArrows).on('pagination:mounted', initPagination).on('pagination:updated', updatePagination).on('refresh', function () {
+        removeAttribute(Components.Clones.clones, allAttributes);
+      });
 
       if (Splide.options.isNavigation) {
         Splide.on('navigation:mounted', initNavigation).on('active', function (Slide) {
@@ -5259,8 +5286,9 @@ var TAB_INDEX = 'tabindex';
      * Destroy.
      */
     destroy: function destroy() {
-      var arrows = Components.Arrows ? Components.Arrows.arrows : {};
-      removeAttribute(Elements.slides.concat([arrows.prev, arrows.next, Elements.play, Elements.pause]), [ARIA_HIDDEN, TAB_INDEX, ARIA_CONTROLS, ARIA_LABEL, ARIA_CURRENRT, 'role']);
+      var Arrows = Components.Arrows;
+      var arrows = Arrows ? Arrows.arrows : {};
+      removeAttribute(Elements.slides.concat([arrows.prev, arrows.next, Elements.play, Elements.pause]), allAttributes);
     }
   };
   /**
@@ -5377,16 +5405,15 @@ var TAB_INDEX = 'tabindex';
 
 
   function initNavigation(main) {
-    Elements.each(function (_ref) {
-      var slide = _ref.slide,
-          realIndex = _ref.realIndex,
-          index = _ref.index;
+    Elements.each(function (Slide) {
+      var slide = Slide.slide;
+      var realIndex = Slide.realIndex;
 
       if (!isButton(slide)) {
         setAttribute(slide, 'role', 'button');
       }
 
-      var slideIndex = realIndex > -1 ? realIndex : index;
+      var slideIndex = realIndex > -1 ? realIndex : Slide.index;
       var label = sprintf(i18n.slideX, slideIndex + 1);
       var mainSlide = main.Components.Elements.getSlide(slideIndex);
       setAttribute(slide, ARIA_LABEL, label);
@@ -5404,8 +5431,8 @@ var TAB_INDEX = 'tabindex';
    */
 
 
-  function updateNavigation(_ref2, active) {
-    var slide = _ref2.slide;
+  function updateNavigation(_ref, active) {
+    var slide = _ref.slide;
 
     if (active) {
       setAttribute(slide, ARIA_CURRENRT, true);
@@ -5423,7 +5450,7 @@ var TAB_INDEX = 'tabindex';
 
 
   function isButton(elm) {
-    return elm.tagName.toLowerCase() === 'button';
+    return elm.tagName === 'BUTTON';
   }
 
   return A11y;