Refactoring the Move component.

dist/js/splide.js

@@ -1339,6 +1339,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         on = _EventInterface6.on,
         emit = _EventInterface6.emit;
 
+    var set = Splide2.state.set;
     var _Components2$Layout = Components2.Layout,
         slideSize = _Components2$Layout.slideSize,
         getPadding = _Components2$Layout.getPadding,
@@ -1367,7 +1368,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function move(dest, index, prev, callback) {
-      var set = Splide2.state.set;
       var position = getPosition();
 
       if (dest !== index) {
@@ -1377,16 +1377,18 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
       set(MOVING);
       emit(EVENT_MOVE, index, prev, dest);
-      Transition.start(index, function () {
-        set(IDLE);
-        emit(EVENT_MOVED, index, prev, dest);
+      Transition.start(index, apply(onTransitionEnd, position, dest, index, prev, callback));
+    }
 
-        if (options.trimSpace === "move" && dest !== prev && position === getPosition()) {
-          Components2.Controller.go(dest > prev ? ">" : "<", false, callback);
-        } else {
-          callback && callback();
-        }
-      });
+    function onTransitionEnd(from, dest, index, prev, callback) {
+      set(IDLE);
+      emit(EVENT_MOVED, index, prev, dest);
+
+      if (options.trimSpace === "move" && dest !== prev && from === getPosition()) {
+        Components2.Controller.go(dest > prev ? ">" : "<", false, callback);
+      } else {
+        callback && callback();
+      }
     }
 
     function jump(index) {

src/js/components/Controller/test/isBusy.test.ts

@@ -0,0 +1,30 @@
+import { fire, init } from '../../../test';
+
+
+describe( 'Controller#isBusy', () => {
+  test( 'can check if the slider is moving or not.', () => {
+    const splide = init( { width: 200, height: 100 } );
+    const { Controller, Move } = splide.Components;
+
+    expect( Controller.isBusy() ).toBe( false );
+
+    Move.move( 1, 1, -1 );
+    expect( Controller.isBusy() ).toBe( true );
+
+    fire( splide.Components.Elements.list, 'transitionend' );
+    expect( Controller.isBusy() ).toBe( false );
+  } );
+
+  test( 'can check if the slider is being scrolled or not.', () => {
+    const splide = init( { width: 200, height: 100 } );
+    const { Controller, Scroll } = splide.Components;
+
+    expect( Controller.isBusy() ).toBe( false );
+
+    Scroll.scroll( 10, 0 );
+    expect( Controller.isBusy() ).toBe( true );
+
+    Scroll.cancel();
+    expect( Controller.isBusy() ).toBe( false );
+  } );
+} );

src/js/components/Keyboard/test/general.test.ts

@@ -4,7 +4,7 @@ import { init, keydown, wait } from '../../../test';
 
 describe( 'Keyboard', () => {
   test( 'can control the slider by keyboards.', async () => {
-    const splide = init( { speed: 0 } );
+    const splide = init( { speed: 0, keyboard: true } );
 
     keydown( 'ArrowRight' );
     expect( splide.index ).toBe( 1 );
@@ -26,7 +26,7 @@ describe( 'Keyboard', () => {
   } );
 
   test( 'can control the slider by keyboards in TTB mode.', async () => {
-    const splide = init( { direction: TTB, height: 1, speed: 0 } );
+    const splide = init( { direction: TTB, height: 1, speed: 0, keyboard: true } );
 
     keydown( 'ArrowDown' );
     expect( splide.index ).toBe( 1 );
@@ -48,7 +48,7 @@ describe( 'Keyboard', () => {
   } );
 
   test( 'can control the slider by keyboards in RTL mode.', async () => {
-    const splide = init( { direction: RTL, speed: 0 } );
+    const splide = init( { direction: RTL, speed: 0, keyboard: true } );
 
     keydown( 'ArrowLeft' );
     expect( splide.index ).toBe( 1 );
@@ -89,7 +89,7 @@ describe( 'Keyboard', () => {
   } );
 
   test( 'can disable the keyboard input.', async () => {
-    const splide = init( { speed: 0 } );
+    const splide = init( { speed: 0, keyboard: true } );
     const { disable } = splide.Components.Keyboard;
 
     keydown( 'ArrowRight' );

src/js/components/Move/Move.ts

@@ -13,7 +13,7 @@ import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { AnyFunction, BaseComponent, Components, Options, TransitionComponent } from '../../types';
-import { abs, ceil, clamp, isUndefined, rect } from '../../utils';
+import { abs, apply, ceil, clamp, isUndefined, rect } from '../../utils';
 
 
 /**
@@ -51,6 +51,7 @@ export interface MoveComponent extends BaseComponent {
  */
 export function Move( Splide: Splide, Components: Components, options: Options ): MoveComponent {
   const { on, emit } = EventInterface( Splide );
+  const { set } = Splide.state;
   const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components.Layout;
   const { resolve, orient } = Components.Direction;
   const { list, track } = Components.Elements;
@@ -91,7 +92,6 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    * @param callback - Optional. A callback function invoked after transition ends.
    */
   function move( dest: number, index: number, prev: number, callback?: AnyFunction ): void {
-    const { set } = Splide.state;
     const position = getPosition();
 
     // todo shift...
@@ -103,17 +103,27 @@ export function Move( Splide: Splide, Components: Components, options: Options )
     set( MOVING );
     emit( EVENT_MOVE, index, prev, dest );
 
-    // todo
-    Transition.start( index, () => {
-      set( IDLE );
-      emit( EVENT_MOVED, index, prev, dest );
+    Transition.start( index, apply( onTransitionEnd, position, dest, index, prev, callback ) );
+  }
 
-      if ( options.trimSpace === 'move' && dest !== prev && position === getPosition() ) {
-        Components.Controller.go( dest > prev ? '>' : '<', false, callback );
-      } else {
-        callback && callback();
-      }
-    } );
+  /**
+   * Called just after the transition ends.
+   *
+   * @param from     - A position where transition starts.
+   * @param dest     - A destination index to go to, including clones'.
+   * @param prev     - A previous index.
+   * @param index    - A slide index.
+   * @param callback - Optional. A callback function invoked after transition ends.
+   */
+  function onTransitionEnd( from: number, dest: number, index: number, prev: number, callback?: AnyFunction ): void {
+    set( IDLE );
+    emit( EVENT_MOVED, index, prev, dest );
+
+    if ( options.trimSpace === 'move' && dest !== prev && from === getPosition() ) {
+      Components.Controller.go( dest > prev ? '>' : '<', false, callback );
+    } else {
+      callback && callback();
+    }
   }
 
   /**

src/js/components/Move/test/general.test.ts

@@ -1,4 +1,4 @@
-import { fire, init } from '../../../test';
+import { init } from '../../../test';
 
 
 describe( 'Move', () => {
@@ -102,19 +102,4 @@ describe( 'Move', () => {
 
     splide.destroy();
   } );
-
-  // test( 'can check if the slider can move or not.', () => {
-  //   const splide   = init( { width: 200, height: 100 } );
-  //   const { Move } = splide.Components;
-  //
-  //   expect( Move.isBusy() ).toBe( false );
-  //
-  //   Move.move( 1, 1, -1 );
-  //   expect( Move.isBusy() ).toBe( true );
-  //
-  //   fire( splide.Components.Elements.list, 'transitionend' );
-  //   expect( Move.isBusy() ).toBe( false );
-  //
-  //   splide.destroy();
-  // } );
 } );

src/js/test/assets/css/styles.css

@@ -31,7 +31,7 @@ button:focus {
 }
 
 .splide__slide.is-active {
-  border: 2px solid deepskyblue;
+  border: 2px solid yellowgreen;
 }
 
 /*.splide__slide:focus, .splide__arrow:focus, .splide__pagination__page:focus {*/

src/js/test/php/examples/default.php

@@ -21,22 +21,23 @@ $settings = get_settings();
       var splide = new Splide( '#splide01', {
 				width: 800,
         type   : 'loop',
-        // perPage: 2,
+        perPage: 3,
         // perMove: 1,
         rewind: true,
 	      rewindByDrag: true,
-        // padding: {
-        //   right: 0,
-        //   left: 40,
-        // },
+        padding: 40,
         // updateOnMove: true,
         // focus: 'center',
 	      // keyboard: false,
+	      waitForTransition: false,
+	      // flickPower: 1,
+	      // flickMaxSlides: 2,
 	      dragMinThreshold: {
 					mouse: 20,
 		      touch: 0,
 	      },
 	      speed: 1000,
+	      // useScroll: true,
 				// waitForTransition: false,
         // noDrag: 'button',
       } );

src/js/test/php/examples/sync.php

@@ -90,22 +90,36 @@ $settings = get_settings();
       ?>
     </ul>
   </div>
-</div>
 
-<div id="splide02" class="splide">
-  <div class="splide__track">
-    <ul class="splide__list">
-      <?php
-      for ( $i = 0; $i < 10; $i++ ) {
-        echo '<li class="splide__slide">';
-        printf( '<img src="../../assets/images/pics/slide%1$02d.jpg" alt="Thumbnail %1$d">', $i + 1 );
-        echo '</li>' . PHP_EOL;
-      }
-      ?>
-    </ul>
-  </div>
+	<div id="splide02" class="splide">
+		<div class="splide__track">
+			<ul class="splide__list">
+				<?php
+				for ( $i = 0; $i < 10; $i++ ) {
+					echo '<li class="splide__slide">';
+					printf( '<img src="../../assets/images/pics/slide%1$02d.jpg" alt="Thumbnail %1$d">', $i + 1 );
+					echo '</li>' . PHP_EOL;
+				}
+				?>
+			</ul>
+		</div>
+	</div>
 </div>
 
+<!--<div id="splide02" class="splide">-->
+<!--  <div class="splide__track">-->
+<!--    <ul class="splide__list">-->
+<!--      --><?php
+//      for ( $i = 0; $i < 10; $i++ ) {
+//        echo '<li class="splide__slide">';
+//        printf( '<img src="../../assets/images/pics/slide%1$02d.jpg" alt="Thumbnail %1$d">', $i + 1 );
+//        echo '</li>' . PHP_EOL;
+//      }
+//      ?>
+<!--    </ul>-->
+<!--  </div>-->
+<!--</div>-->
+
 <div id="splide03" class="splide">
   <div class="splide__track">
     <ul class="splide__list">