Check the dimension of the root element before resizing the slider.

Splidejs · Nov 3, 2021 · 5351ec3 · 5351ec3
1 parent 15898b5
commit 5351ec3
Show file tree

Hide file tree

Showing 15 changed files with 81 additions and 49 deletions.
diff --git a/dist/js/splide-renderer.min.js b/dist/js/splide-renderer.min.js
diff --git a/dist/js/splide.cjs.js b/dist/js/splide.cjs.js
@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.3
+ * Version  : 3.2.4
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1001,28 +1001,34 @@ function Layout(Splide2, Components2, options) {
   const { on, bind, emit } = EventInterface(Splide2);
   const { Slides } = Components2;
   const { resolve } = Components2.Direction;
-  const { track, list } = Components2.Elements;
+  const { root, track, list } = Components2.Elements;
   const { getAt } = Slides;
   let vertical;
+  let rootRect;
   function mount() {
     init();
     bind(window, "resize load", Throttle(emit.bind(this, EVENT_RESIZE)));
     on([EVENT_UPDATED, EVENT_REFRESH], init);
     on(EVENT_RESIZE, resize);
   }
   function init() {
+    rootRect = null;
     vertical = options.direction === TTB;
-    style(Splide2.root, "maxWidth", unit(options.width));
+    style(root, "maxWidth", unit(options.width));
     style(track, resolve("paddingLeft"), cssPadding(false));
     style(track, resolve("paddingRight"), cssPadding(true));
     resize();
   }
   function resize() {
-    style(track, "height", cssTrackHeight());
-    Slides.style(resolve("marginRight"), unit(options.gap));
-    Slides.style("width", cssSlideWidth() || null);
-    setSlidesHeight();
-    emit(EVENT_RESIZED);
+    const newRect = rect(root);
+    if (!rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
+      style(track, "height", cssTrackHeight());
+      Slides.style(resolve("marginRight"), unit(options.gap));
+      Slides.style("width", cssSlideWidth() || null);
+      setSlidesHeight();
+      rootRect = newRect;
+      emit(EVENT_RESIZED);
+    }
   }
   function setSlidesHeight() {
     Slides.style("height", cssSlideHeight() || null, true);
@@ -1173,7 +1179,7 @@ function Move(Splide2, Components2, options) {
     removeAttribute(list, "style");
   }
   function reposition() {
-    if (!isBusy() && !Components2.Drag.isDragging()) {
+    if (!isBusy()) {
       Components2.Scroll.cancel();
       jump(Splide2.index);
       emit(EVENT_REPOSITIONED);

diff --git a/dist/js/splide.esm.js b/dist/js/splide.esm.js
@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.3
+ * Version  : 3.2.4
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -997,28 +997,34 @@ function Layout(Splide2, Components2, options) {
   const { on, bind, emit } = EventInterface(Splide2);
   const { Slides } = Components2;
   const { resolve } = Components2.Direction;
-  const { track, list } = Components2.Elements;
+  const { root, track, list } = Components2.Elements;
   const { getAt } = Slides;
   let vertical;
+  let rootRect;
   function mount() {
     init();
     bind(window, "resize load", Throttle(emit.bind(this, EVENT_RESIZE)));
     on([EVENT_UPDATED, EVENT_REFRESH], init);
     on(EVENT_RESIZE, resize);
   }
   function init() {
+    rootRect = null;
     vertical = options.direction === TTB;
-    style(Splide2.root, "maxWidth", unit(options.width));
+    style(root, "maxWidth", unit(options.width));
     style(track, resolve("paddingLeft"), cssPadding(false));
     style(track, resolve("paddingRight"), cssPadding(true));
     resize();
   }
   function resize() {
-    style(track, "height", cssTrackHeight());
-    Slides.style(resolve("marginRight"), unit(options.gap));
-    Slides.style("width", cssSlideWidth() || null);
-    setSlidesHeight();
-    emit(EVENT_RESIZED);
+    const newRect = rect(root);
+    if (!rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
+      style(track, "height", cssTrackHeight());
+      Slides.style(resolve("marginRight"), unit(options.gap));
+      Slides.style("width", cssSlideWidth() || null);
+      setSlidesHeight();
+      rootRect = newRect;
+      emit(EVENT_RESIZED);
+    }
   }
   function setSlidesHeight() {
     Slides.style("height", cssSlideHeight() || null, true);
@@ -1169,7 +1175,7 @@ function Move(Splide2, Components2, options) {
     removeAttribute(list, "style");
   }
   function reposition() {
-    if (!isBusy() && !Components2.Drag.isDragging()) {
+    if (!isBusy()) {
       Components2.Scroll.cancel();
       jump(Splide2.index);
       emit(EVENT_REPOSITIONED);

diff --git a/dist/js/splide.js b/dist/js/splide.js
diff --git a/dist/js/splide.js.map b/dist/js/splide.js.map
diff --git a/dist/js/splide.min.js b/dist/js/splide.min.js
diff --git a/dist/js/splide.min.js.gz b/dist/js/splide.min.js.gz
diff --git a/dist/types/components/Layout/Layout.d.ts.map b/dist/types/components/Layout/Layout.d.ts.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

diff --git a/src/js/components/Layout/Layout.ts b/src/js/components/Layout/Layout.ts
@@ -34,14 +34,19 @@ export function Layout( Splide: Splide, Components: Components, options: Options
   const { on, bind, emit } = EventInterface( Splide );
   const { Slides } = Components;
   const { resolve } = Components.Direction;
-  const { track, list } = Components.Elements;
+  const { root, track, list } = Components.Elements;
   const { getAt } = Slides;
 
   /**
    * Indicates whether the slider direction is vertical or not.
    */
   let vertical: boolean;
 
+  /**
+   * Keeps the DOMRect object of the root element.
+   */
+  let rootRect: DOMRect;
+
   /**
    * Called when the component is mounted.
    */
@@ -57,9 +62,10 @@ export function Layout( Splide: Splide, Components: Components, options: Options
    * Uses `max-width` for the root to prevent the slider from exceeding the parent element.
    */
   function init(): void {
+    rootRect = null;
     vertical = options.direction === TTB;
 
-    style( Splide.root, 'maxWidth', unit( options.width ) );
+    style( root, 'maxWidth', unit( options.width ) );
     style( track, resolve( 'paddingLeft' ), cssPadding( false ) );
     style( track, resolve( 'paddingRight' ), cssPadding( true ) );
 
@@ -70,13 +76,18 @@ export function Layout( Splide: Splide, Components: Components, options: Options
    * Updates dimensions of some elements when the slider is resized.
    */
   function resize(): void {
-    style( track, 'height', cssTrackHeight() );
+    const newRect = rect( root );
 
-    Slides.style( resolve( 'marginRight' ), unit( options.gap ) );
-    Slides.style( 'width', cssSlideWidth() || null );
-    setSlidesHeight();
+    if ( ! rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height ) {
+      style( track, 'height', cssTrackHeight() );
 
-    emit( EVENT_RESIZED );
+      Slides.style( resolve( 'marginRight' ), unit( options.gap ) );
+      Slides.style( 'width', cssSlideWidth() || null );
+      setSlidesHeight();
+
+      rootRect = newRect;
+      emit( EVENT_RESIZED );
+    }
   }
 
   /**

diff --git a/src/js/components/Layout/test/general.test.ts b/src/js/components/Layout/test/general.test.ts
@@ -29,7 +29,7 @@ describe( 'Layout', () => {
 
     expect( style.maxWidth ).toBe( '100px' );
 
-    splide.options.width = 200;
+    splide.options = { width: 200 };
     splide.refresh();
 
     expect( style.maxWidth ).toBe( '200px' );
@@ -43,7 +43,7 @@ describe( 'Layout', () => {
 
     expect( style.height ).toBe( '500px' );
 
-    splide.options.heightRatio = 0.2;
+    splide.options = { heightRatio: 0.2 };
     splide.emit( EVENT_RESIZE );
 
     expect( style.height ).toBe( '200px' );

diff --git a/src/js/components/Move/Move.ts b/src/js/components/Move/Move.ts
@@ -77,7 +77,7 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    * - iOS Safari emits window resize event while the user swipes the slider because of the bottom bar.
    */
   function reposition(): void {
-    if ( ! isBusy() && ! Components.Drag.isDragging() ) {
+    if ( ! isBusy() ) {
       Components.Scroll.cancel();
       jump( Splide.index );
       emit( EVENT_REPOSITIONED );

diff --git a/src/js/test/php/examples/default.php b/src/js/test/php/examples/default.php
@@ -28,11 +28,6 @@
           left: 40,
         },
         noDrag: 'button',
-        breakpoints: {
-          1000: {
-            destroy: true,
-          },
-        },
       } );
 
       splide.on( 'moved', () => {

diff --git a/src/js/test/php/examples/drag-free.php b/src/js/test/php/examples/drag-free.php
@@ -19,7 +19,7 @@
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
-        perPage: 3,
+        perPage: 2,
         gap    : '1.5rem',
         drag   : 'free',
         height : 200,
@@ -30,6 +30,12 @@
       splide.mount();
     } );
   </script>
+
+  <style>
+    body {
+      margin: 50em 0;
+    }
+  </style>
 </head>
 <body>