Support drag for the fade type(#30, #62).

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.3.9
+ * Version  : 2.4.0
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -827,10 +827,6 @@ var FADE = 'fade';
  */
 
 /* harmony default export */ var fade = (function (Splide, Components) {
-  if (Components.Drag) {
-    Components.Drag.required = false;
-  }
-
   var Fade = {
     /**
      * Called when the component is mounted.
@@ -3895,7 +3891,7 @@ var FRICTION_REDUCER = 7;
   var startCoord;
   /**
    * Analyzed info on starting drag.
-   * 
+   *
    * @type {Object|null}
    */
 
@@ -3940,7 +3936,7 @@ var FRICTION_REDUCER = 7;
      *
      * @type {boolean}
      */
-    disabled: !Splide.options.drag,
+    disabled: false,
 
     /**
      * Called when the component is mounted.
@@ -3994,8 +3990,10 @@ var FRICTION_REDUCER = 7;
           e.preventDefault();
         }
 
-        var position = startCoord[axis] + currentInfo.offset[axis];
-        Track.translate(resist(position));
+        if (!Splide.is(FADE)) {
+          var position = startCoord[axis] + currentInfo.offset[axis];
+          Track.translate(resist(position));
+        }
       } else {
         if (shouldMove(currentInfo)) {
           Splide.emit('drag', startInfo);
@@ -4038,7 +4036,7 @@ var FRICTION_REDUCER = 7;
 
 
   function resist(position) {
-    if (!Splide.is(LOOP)) {
+    if (Splide.is(SLIDE)) {
       var sign = Track.sign;
 
       var _start = sign * Track.trim(Track.toPosition(0));
@@ -4086,24 +4084,35 @@ var FRICTION_REDUCER = 7;
     if (absV > 0) {
       var Layout = Components.Layout;
       var options = Splide.options;
+      var index = Splide.index;
       var sign = velocity < 0 ? -1 : 1;
-      var destination = Track.position;
+      var adjacent = index + sign * Track.sign;
+      var destIndex = index;
+
+      if (!Splide.is(FADE)) {
+        var destination = Track.position;
 
-      if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
-        destination += sign * Math.min(absV * options.flickPower, Layout.width * (options.flickMaxPages || 1));
+        if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
+          destination += sign * Math.min(absV * options.flickPower, Layout.width * (options.flickMaxPages || 1));
+        }
+
+        destIndex = Track.toIndex(destination);
       }
+      /*
+       * Do not allow the track to go to a previous position.
+       * Always use the adjacent index for the fade mode.
+       */
 
-      var index = Track.toIndex(destination); // Do not allow the track to go to a previous position.
 
-      if (index === Splide.index) {
-        index += sign * Track.sign;
+      if (destIndex === index) {
+        destIndex = adjacent;
       }
 
-      if (!Splide.is(LOOP)) {
-        index = between(index, 0, Controller.edgeIndex);
+      if (Splide.is(SLIDE)) {
+        destIndex = between(destIndex, 0, Controller.edgeIndex);
       }
 
-      Controller.go(index, options.isNavigation);
+      Controller.go(destIndex, options.isNavigation);
     }
   }
   /**

dist/js/splide.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.3.9
+ * Version  : 2.4.0
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -817,10 +817,6 @@ var FADE = 'fade';
  */
 
 /* harmony default export */ var fade = (function (Splide, Components) {
-  if (Components.Drag) {
-    Components.Drag.required = false;
-  }
-
   var Fade = {
     /**
      * Called when the component is mounted.
@@ -3885,7 +3881,7 @@ var FRICTION_REDUCER = 7;
   var startCoord;
   /**
    * Analyzed info on starting drag.
-   * 
+   *
    * @type {Object|null}
    */
 
@@ -3930,7 +3926,7 @@ var FRICTION_REDUCER = 7;
      *
      * @type {boolean}
      */
-    disabled: !Splide.options.drag,
+    disabled: false,
 
     /**
      * Called when the component is mounted.
@@ -3984,8 +3980,10 @@ var FRICTION_REDUCER = 7;
           e.preventDefault();
         }
 
-        var position = startCoord[axis] + currentInfo.offset[axis];
-        Track.translate(resist(position));
+        if (!Splide.is(FADE)) {
+          var position = startCoord[axis] + currentInfo.offset[axis];
+          Track.translate(resist(position));
+        }
       } else {
         if (shouldMove(currentInfo)) {
           Splide.emit('drag', startInfo);
@@ -4028,7 +4026,7 @@ var FRICTION_REDUCER = 7;
 
 
   function resist(position) {
-    if (!Splide.is(LOOP)) {
+    if (Splide.is(SLIDE)) {
       var sign = Track.sign;
 
       var _start = sign * Track.trim(Track.toPosition(0));
@@ -4076,24 +4074,35 @@ var FRICTION_REDUCER = 7;
     if (absV > 0) {
       var Layout = Components.Layout;
       var options = Splide.options;
+      var index = Splide.index;
       var sign = velocity < 0 ? -1 : 1;
-      var destination = Track.position;
+      var adjacent = index + sign * Track.sign;
+      var destIndex = index;
+
+      if (!Splide.is(FADE)) {
+        var destination = Track.position;
 
-      if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
-        destination += sign * Math.min(absV * options.flickPower, Layout.width * (options.flickMaxPages || 1));
+        if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
+          destination += sign * Math.min(absV * options.flickPower, Layout.width * (options.flickMaxPages || 1));
+        }
+
+        destIndex = Track.toIndex(destination);
       }
+      /*
+       * Do not allow the track to go to a previous position.
+       * Always use the adjacent index for the fade mode.
+       */
 
-      var index = Track.toIndex(destination); // Do not allow the track to go to a previous position.
 
-      if (index === Splide.index) {
-        index += sign * Track.sign;
+      if (destIndex === index) {
+        destIndex = adjacent;
       }
 
-      if (!Splide.is(LOOP)) {
-        index = between(index, 0, Controller.edgeIndex);
+      if (Splide.is(SLIDE)) {
+        destIndex = between(destIndex, 0, Controller.edgeIndex);
       }
 
-      Controller.go(index, options.isNavigation);
+      Controller.go(destIndex, options.isNavigation);
     }
   }
   /**

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.3.8",
+  "version": "2.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.3.9",
+  "version": "2.4.0",
   "description": "Splide is a lightweight and powerful slider without any dependencies.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/drag/index.js

@@ -5,7 +5,7 @@
  * @copyright Naotoshi Fujita. All rights reserved.
  */
 
-import { LOOP } from '../../constants/types';
+import { FADE, SLIDE } from '../../constants/types';
 import { TTB } from '../../constants/directions';
 import { IDLE } from '../../constants/states';
 import { between } from '../../utils/utils';
@@ -56,7 +56,7 @@ export default ( Splide, Components ) => {
 
 	/**
 	 * Analyzed info on starting drag.
-	 * 
+	 *
 	 * @type {Object|null}
 	 */
 	let startInfo;
@@ -100,7 +100,7 @@ export default ( Splide, Components ) => {
 		 *
 		 * @type {boolean}
 		 */
-		disabled: ! Splide.options.drag,
+		disabled: false,
 
 		/**
 		 * Called when the component is mounted.
@@ -153,8 +153,10 @@ export default ( Splide, Components ) => {
 					e.preventDefault();
 				}
 
-				const position = startCoord[ axis ] + currentInfo.offset[ axis ];
-				Track.translate( resist( position ) );
+				if ( ! Splide.is( FADE ) ) {
+					const position = startCoord[ axis ] + currentInfo.offset[ axis ];
+					Track.translate( resist( position ) );
+				}
 			} else {
 				if ( shouldMove( currentInfo ) ) {
 					Splide.emit( 'drag', startInfo );
@@ -193,7 +195,7 @@ export default ( Splide, Components ) => {
 	 * @return {Object} - Adjusted position.
 	 */
 	function resist( position ) {
-		if ( ! Splide.is( LOOP ) ) {
+		if ( Splide.is( SLIDE ) ) {
 			const sign  = Track.sign;
 			const start = sign * Track.trim( Track.toPosition( 0 ) );
 			const end   = sign * Track.trim( Track.toPosition( Controller.edgeIndex ) );
@@ -235,28 +237,37 @@ export default ( Splide, Components ) => {
 		const absV     = abs( velocity );
 
 		if ( absV > 0 ) {
-			const Layout  = Components.Layout;
-			const options = Splide.options;
-			const sign    = velocity < 0 ? -1 : 1;
+			const Layout   = Components.Layout;
+			const options  = Splide.options;
+			const index    = Splide.index;
+			const sign     = velocity < 0 ? -1 : 1;
+			const adjacent = index + sign * Track.sign;
 
-			let destination = Track.position;
+			let destIndex = index;
 
-			if ( absV > options.flickVelocityThreshold && abs( info.offset[ axis ] ) < options.swipeDistanceThreshold ) {
-				destination += sign * Math.min( absV * options.flickPower, Layout.width * ( options.flickMaxPages || 1 ) );
-			}
+			if ( ! Splide.is( FADE ) ) {
+				let destination = Track.position;
 
-			let index = Track.toIndex( destination );
+				if ( absV > options.flickVelocityThreshold && abs( info.offset[ axis ] ) < options.swipeDistanceThreshold ) {
+					destination += sign * Math.min( absV * options.flickPower, Layout.width * ( options.flickMaxPages || 1 ) );
+				}
+
+				destIndex = Track.toIndex( destination );
+			}
 
-			// Do not allow the track to go to a previous position.
-			if ( index === Splide.index ) {
-				index += sign * Track.sign;
+			/*
+			 * Do not allow the track to go to a previous position.
+			 * Always use the adjacent index for the fade mode.
+			 */
+			if ( destIndex === index ) {
+				destIndex = adjacent;
 			}
 
-			if ( ! Splide.is( LOOP ) ) {
-				index = between( index, 0, Controller.edgeIndex );
+			if ( Splide.is( SLIDE ) ) {
+				destIndex = between( destIndex, 0, Controller.edgeIndex );
 			}
 
-			Controller.go( index, options.isNavigation );
+			Controller.go( destIndex, options.isNavigation );
 		}
 	}
 

src/js/transitions/fade/index.js

@@ -18,10 +18,6 @@ import { unit } from "../../utils/utils";
  * @return {Object} - The component object.
  */
 export default ( Splide, Components ) => {
-	if ( Components.Drag ) {
-		Components.Drag.required = false;
-	}
-
 	const Fade = {
 		/**
 		 * Called when the component is mounted.