Browse Source

Add the rewindSpeed option to control transition duration on rewind.

NaotoshiFujita 5 years ago
parent
commit
fac778f9a6

+ 51 - 32
dist/js/splide.js

@@ -383,6 +383,13 @@ var DEFAULTS = {
    */
   speed: 400,
 
+  /**
+   * Transition speed on rewind in milliseconds.
+   *
+   * @type {number}
+   */
+  rewindSpeed: 0,
+
   /**
    * Define slider max width.
    *
@@ -1109,6 +1116,34 @@ function dom_loaded(elm, callback) {
     callback();
   }
 }
+// CONCATENATED MODULE: ./src/js/constants/types.js
+/**
+ * Export slider types.
+ *
+ * @author    Naotoshi Fujita
+ * @copyright Naotoshi Fujita. All rights reserved.
+ */
+
+/**
+ * Normal slider.
+ *
+ * @type {string}
+ */
+var SLIDE = 'slide';
+/**
+ * Loop after the last slide and before the first one.
+ *
+ * @type {string}
+ */
+
+var LOOP = 'loop';
+/**
+ * The track doesn't move.
+ *
+ * @type {string}
+ */
+
+var FADE = 'fade';
 // CONCATENATED MODULE: ./src/js/transitions/slide/index.js
 /**
  * The component for general slide effect transition.
@@ -1117,6 +1152,7 @@ function dom_loaded(elm, callback) {
  * @copyright Naotoshi Fujita. All rights reserved.
  */
 
+
 /**
  * The component for general slide effect transition.
  *
@@ -1158,14 +1194,24 @@ function dom_loaded(elm, callback) {
      *
      * @param {number}   destIndex - Destination slide index that might be clone's.
      * @param {number}   newIndex  - New index.
+     * @param {number}   prevIndex - Previous index.
      * @param {Object}   coord     - Destination coordinates.
      * @param {function} done      - Callback function must be invoked when transition is completed.
      */
-    start: function start(destIndex, newIndex, coord, done) {
+    start: function start(destIndex, newIndex, prevIndex, coord, done) {
       var options = Splide.options;
+      var edgeIndex = Components.Controller.edgeIndex;
+      var speed = options.speed;
       endCallback = done;
+
+      if (Splide.is(SLIDE)) {
+        if (prevIndex === 0 && newIndex >= edgeIndex || prevIndex >= edgeIndex && newIndex === 0) {
+          speed = options.rewindSpeed || speed;
+        }
+      }
+
       applyStyle(list, {
-        transition: "transform " + options.speed + "ms " + options.easing,
+        transition: "transform " + speed + "ms " + options.easing,
         transform: "translate(" + coord.x + "px," + coord.y + "px)"
       });
     }
@@ -1207,10 +1253,11 @@ function dom_loaded(elm, callback) {
      *
      * @param {number}    destIndex - Destination slide index that might be clone's.
      * @param {number}    newIndex  - New index.
+     * @param {number}    prevIndex - Previous index.
      * @param {Object}    coord     - Destination coordinates.
      * @param {function}  done      - Callback function must be invoked when transition is completed.
      */
-    start: function start(destIndex, newIndex, coord, done) {
+    start: function start(destIndex, newIndex, prevIndex, coord, done) {
       apply(newIndex);
       done();
     }
@@ -1239,34 +1286,6 @@ function dom_loaded(elm, callback) {
  */
 
 
-// CONCATENATED MODULE: ./src/js/constants/types.js
-/**
- * Export slider types.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Normal slider.
- *
- * @type {string}
- */
-var SLIDE = 'slide';
-/**
- * Loop after the last slide and before the first one.
- *
- * @type {string}
- */
-
-var LOOP = 'loop';
-/**
- * The track doesn't move.
- *
- * @type {string}
- */
-
-var FADE = 'fade';
 // CONCATENATED MODULE: ./src/js/core/composer.js
 /**
  * Provide a function for composing components.
@@ -2927,7 +2946,7 @@ var controller_floor = Math.floor;
       }
 
       if (Math.abs(newPosition - currPosition) >= 1 || isFade) {
-        Components.Transition.start(destIndex, newIndex, this.toCoord(newPosition), function () {
+        Components.Transition.start(destIndex, newIndex, prevIndex, this.toCoord(newPosition), function () {
           _this2.end(destIndex, newIndex, prevIndex, silently);
         });
       } else {

File diff suppressed because it is too large
+ 0 - 0
dist/js/splide.min.js


BIN
dist/js/splide.min.js.gz


+ 1 - 1
src/js/components/track/index.js

@@ -92,7 +92,7 @@ export default ( Splide, Components ) => {
 			}
 
 			if ( Math.abs( newPosition - currPosition ) >= 1 || isFade ) {
-				Components.Transition.start( destIndex, newIndex, this.toCoord( newPosition ), () => {
+				Components.Transition.start( destIndex, newIndex, prevIndex, this.toCoord( newPosition ), () => {
 					this.end( destIndex, newIndex, prevIndex, silently );
 				} );
 			} else {

+ 7 - 0
src/js/constants/defaults.js

@@ -35,6 +35,13 @@ export const DEFAULTS = {
 	 */
 	speed: 400,
 
+	/**
+	 * Transition speed on rewind in milliseconds.
+	 *
+	 * @type {number}
+	 */
+	rewindSpeed: 0,
+
 	/**
 	 * Define slider max width.
 	 *

+ 2 - 1
src/js/transitions/fade/index.js

@@ -35,10 +35,11 @@ export default ( Splide, Components ) => {
 		 *
 		 * @param {number}    destIndex - Destination slide index that might be clone's.
 		 * @param {number}    newIndex  - New index.
+		 * @param {number}    prevIndex - Previous index.
 		 * @param {Object}    coord     - Destination coordinates.
 		 * @param {function}  done      - Callback function must be invoked when transition is completed.
 		 */
-		start( destIndex, newIndex, coord, done ) {
+		start( destIndex, newIndex, prevIndex, coord, done ) {
 			apply( newIndex );
 			done();
 		},

+ 13 - 3
src/js/transitions/slide/index.js

@@ -6,6 +6,7 @@
  */
 
 import { applyStyle } from '../../utils/dom';
+import { SLIDE } from "../../constants/types";
 
 
 /**
@@ -50,15 +51,24 @@ export default ( Splide, Components ) => {
 		 *
 		 * @param {number}   destIndex - Destination slide index that might be clone's.
 		 * @param {number}   newIndex  - New index.
+		 * @param {number}   prevIndex - Previous index.
 		 * @param {Object}   coord     - Destination coordinates.
 		 * @param {function} done      - Callback function must be invoked when transition is completed.
 		 */
-		start( destIndex, newIndex, coord, done ) {
-			const options = Splide.options;
+		start( destIndex, newIndex, prevIndex, coord, done ) {
+			const options   = Splide.options;
+			const edgeIndex = Components.Controller.edgeIndex;
+			let speed       = options.speed;
 			endCallback = done;
 
+			if ( Splide.is( SLIDE ) ) {
+				if ( ( prevIndex === 0 && newIndex >= edgeIndex ) || ( prevIndex >= edgeIndex && newIndex === 0 ) ) {
+					speed = options.rewindSpeed || speed;
+				}
+			}
+
 			applyStyle( list, {
-				transition: `transform ${ options.speed }ms ${ options.easing }`,
+				transition: `transform ${ speed }ms ${ options.easing }`,
 				transform : `translate(${ coord.x }px,${ coord.y }px)`,
 			} );
 		},

Some files were not shown because too many files changed in this diff