add basic swiping gestures

junaid-travelopia · junaid-travelopia · commit 3fbe07467971 · 2023-11-11T03:57:42.000+11:00
diff --git a/src/slider/README.md b/src/slider/README.md
@@ -32,7 +32,7 @@ slider.setCurrentSlide( 2 );
 ```
 
 ```html
-<tp-slider flexible-height="yes" infinite="yes">
+<tp-slider flexible-height="yes" infinite="yes" swipe="yes">
 	<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow> <-- There must be a button inside this component
 	<tp-slider-arrow direction="next"><button>Next &raquo;</button></tp-slider-arrow> <-- There must be a button inside this component
 	<tp-slider-track>
@@ -57,6 +57,7 @@ slider.setCurrentSlide( 2 );
 |-----------------|----------|--------|--------------------------------------------------------------------------------------------------------|
 | flexible-height | No       | `yes`  | Whether the height of the slider changes depending on the content inside the slides                    |
 | infinite        | No       | `yes`  | Go back to the first slide at the end of all slides, and open the last slide when navigating backwards |
+| swipe           | No       | `yes`  | Whether to add support for swiping gestures on touch devices                                           |
 
 ## Events
 
diff --git a/src/slider/index.html b/src/slider/index.html
@@ -32,7 +32,7 @@
 </head>
 <body>
 	<main>
-		<tp-slider flexible-height="yes" infinite="yes">
+		<tp-slider flexible-height="yes" infinite="yes" swipe="yes">
 			<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
 			<tp-slider-arrow direction="next"><button>Next &raquo;</button></tp-slider-arrow>
 			<tp-slider-track>
diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts
@@ -11,6 +11,11 @@ import { TPSliderArrowElement } from './tp-slider-arrow';
  * TP Slider.
  */
 export class TPSliderElement extends HTMLElement {
+	/**
+	 * Properties.
+	 */
+	protected touchStartX: number = 0;
+
 	/**
 	 * Constructor.
 	 */
@@ -28,6 +33,8 @@ export class TPSliderElement extends HTMLElement {
 
 		// Event listeners.
 		window.addEventListener( 'resize', this.handleResize.bind( this ) );
+		this.addEventListener( 'touchstart', this.handleTouchStart.bind( this ) );
+		this.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) );
 	}
 
 	/**
@@ -271,4 +278,39 @@ export class TPSliderElement extends HTMLElement {
 			_this.removeAttribute( 'resizing' );
 		}, 10 );
 	}
+
+	/**
+	 * Detect touch start event, and store the starting location.
+	 *
+	 * @param {Event} e Touch event.
+	 *
+	 * @protected
+	 */
+	protected handleTouchStart( e: TouchEvent ): void {
+		if ( 'yes' === this.getAttribute( 'swipe' ) ) {
+			this.touchStartX = e.touches[ 0 ].clientX;
+		}
+	}
+
+	/**
+	 * Detect touch end event, and check if it was a left or right swipe.
+	 *
+	 * @param {Event} e Touch event.
+	 *
+	 * @protected
+	 */
+	protected handleTouchEnd( e: TouchEvent ): void {
+		if ( 'yes' !== this.getAttribute( 'swipe' ) ) {
+			return;
+		}
+
+		const touchEndX: number = e.changedTouches[ 0 ].clientX;
+		const swipeDistance: number = touchEndX - this.touchStartX;
+
+		if ( swipeDistance > 0 ) {
+			this.previous();
+		} else if ( swipeDistance < 0 ) {
+			this.next();
+		}
+	}
 }
