Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 0 additions & 41 deletions src/slider/tp-slider-slide.ts
Original file line number Diff line number Diff line change
@@ -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 );
}
}
41 changes: 41 additions & 0 deletions src/slider/tp-slider-slides.ts
Original file line number Diff line number Diff line change
@@ -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 );
}
}
2 changes: 1 addition & 1 deletion src/slider/tp-slider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/

Expand Down