Merge pull request #114 from Travelopia/fix/WP-204-handle-responsive-settings

WP-204 Responsive settings not applied on breakpoint changes in <tp-slider> component

Author: junaid-travelopia

src/slider/tp-slider-slide.ts

@@ -1,46 +1,5 @@
-/**
- * Internal dependencies.
- */
-import { TPSliderElement } from './tp-slider';
-
 /**
  * TP Slider Slide.
  */
 export class TPSliderSlideElement extends HTMLElement {
-	/**
-	 * Constructor.
-	 */
-	constructor() {
-		// Initialize parent.
-		super();
-
-		// Resize observer.
-		if ( 'ResizeObserver' in window ) {
-			new ResizeObserver( this.handleHeightChange.bind( this ) ).observe( this );
-		}
-	}
-
-	/**
-	 * Handle slide height change.
-	 */
-	protected handleHeightChange(): void {
-		// Get the parent tp-slider element.
-		const slider: TPSliderElement | null = this.closest( 'tp-slider' );
-
-		// Bail if not found.
-		if ( ! slider ) {
-			// Bail early if not found.
-			return;
-		}
-
-		/**
-		 * Yield to main thread to avoid observation errors.
-		 *
-		 * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
-		 */
-		setTimeout( (): void => {
-			// Handle resize.
-			slider.handleResize();
-		}, 0 );
-	}
 }

src/slider/tp-slider-slides.ts

@@ -1,5 +1,46 @@
+/**
+ * Internal dependencies.
+ */
+import { TPSliderElement } from './tp-slider';
+
 /**
  * TP Slider Slides.
  */
 export class TPSliderSlidesElement extends HTMLElement {
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		// Initialize parent.
+		super();
+
+		// Resize observer.
+		if ( 'ResizeObserver' in window ) {
+			new ResizeObserver( this.handleHeightChange.bind( this ) ).observe( this );
+		}
+	}
+
+	/**
+	 * Handle slide height change.
+	 */
+	protected handleHeightChange(): void {
+		// Get the parent tp-slider element.
+		const slider: TPSliderElement | null = this.closest( 'tp-slider' );
+
+		// Bail if not found.
+		if ( ! slider ) {
+			// Bail early if not found.
+			return;
+		}
+
+		/**
+		 * Yield to main thread to avoid observation errors.
+		 *
+		 * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
+		 */
+		setTimeout( (): void => {
+			// Handle resize.
+			slider.handleResize();
+		}, 0 );
+	}
 }

src/slider/tp-slider.ts

@@ -57,7 +57,7 @@ export class TPSliderElement extends HTMLElement {
 		// Event listeners.
 		if ( ! ( 'ResizeObserver' in window ) ) {
 			/**
-			 * We set the resize observer in `tp-slider-slide`
+			 * We set the resize observer in `tp-slider-slides`
 			 * because These are just fallbacks for browsers that don't support ResizeObserver.
 			 */