initial

wp-content/plugins/visual-regression-tests/components/test-run-pagination/script.js

@@ -0,0 +1,152 @@
+class VrtsTestRunPagination extends window.HTMLElement {
+	constructor() {
+		super();
+		this.resolveElements();
+		this.bindFunctions();
+		this.bindEvents();
+	}
+
+	resolveElements() {
+		this.$alerts = document.querySelectorAll( '[data-vrts-alert]' );
+		this.$buttons = this.querySelectorAll( '.button' );
+	}
+
+	bindFunctions() {
+		this.handleClick = this.handleClick.bind( this );
+		this.handleKeyDown = this.handleKeyDown.bind( this );
+	}
+
+	bindEvents() {
+		this.$buttons?.forEach( ( item ) => {
+			item.addEventListener( 'click', this.handleClick );
+		} );
+
+		document.addEventListener( 'keydown', this.handleKeyDown );
+	}
+
+	handleClick( e ) {
+		e.preventDefault();
+		const $el = e.currentTarget;
+		const nextAlertId = $el.getAttribute( 'data-vrts-alert-id' );
+		let $nextAlert = document.getElementById(
+			`vrts-alert-${ nextAlertId }`
+		);
+
+		if ( ! $nextAlert ) {
+			return;
+		}
+
+		const href = $el.getAttribute( 'href' );
+		const $content =
+			document.querySelector( 'vrts-comparisons' ) ||
+			document.querySelector( 'vrts-test-run-success' );
+		const $sidebar = document.querySelector(
+			'.vrts-test-run-page__sidebar'
+		);
+
+		this.$alerts.forEach( ( item ) => {
+			item.setAttribute( 'data-vrts-current', 'false' );
+		} );
+
+		$nextAlert.setAttribute( 'data-vrts-current', 'true' );
+
+		let loadingElapsedTime = 0;
+		let interval = null;
+
+		const timeout = setTimeout( () => {
+			$content.setAttribute( 'data-vrts-loading', 'true' );
+			const loadingStartTime = window.Date.now();
+			interval = setInterval( () => {
+				loadingElapsedTime = window.Date.now() - loadingStartTime;
+			}, 50 );
+		}, 200 );
+
+		let offsetTop = 0;
+
+		while ( $nextAlert && $nextAlert !== $sidebar ) {
+			offsetTop += $nextAlert.offsetTop;
+			$nextAlert = $nextAlert.offsetParent;
+		}
+
+		$sidebar.scrollTo( {
+			top: offsetTop - 82,
+			behavior: 'smooth',
+		} );
+
+		fetch( href )
+			.then( ( response ) => {
+				return response.text();
+			} )
+			.then( ( data ) => {
+				const parser = new window.DOMParser();
+				const $html = parser.parseFromString( data, 'text/html' );
+
+				const $newContent =
+					$html.querySelector( 'vrts-comparisons' ) ||
+					$html.querySelector( 'vrts-test-run-success' );
+				const $newPagination = $html.querySelector(
+					'vrts-test-run-pagination'
+				);
+
+				window.history.replaceState( {}, '', href );
+
+				this.scrollTo( $content.offsetTop - 62 );
+
+				const loadingTimeoutTime =
+					loadingElapsedTime > 0
+						? Math.abs( loadingElapsedTime - 400 )
+						: 0;
+
+				setTimeout( () => {
+					if ( $newContent ) {
+						$content.replaceWith( $newContent );
+					}
+
+					if ( $newPagination ) {
+						this.replaceWith( $newPagination );
+					}
+				}, loadingTimeoutTime );
+
+				clearTimeout( timeout );
+				clearInterval( interval );
+			} );
+	}
+
+	handleKeyDown( e ) {
+		if ( e.key === 'ArrowUp' ) {
+			e.preventDefault();
+			this.querySelector( '[data-vrts-pagination="prev"]' ).click();
+		}
+
+		if ( e.key === 'ArrowDown' ) {
+			e.preventDefault();
+			this.querySelector( '[data-vrts-pagination="next"]' ).click();
+		}
+	}
+
+	scrollTo( offset ) {
+		const $el =
+			document.fullscreenElement ||
+			document.webkitFullscreenElement ||
+			document.msFullscreenElement ||
+			window;
+
+		$el.scrollTo( {
+			top: offset,
+			behavior: 'smooth',
+		} );
+	}
+
+	disconnectedCallback() {
+		this.$buttons?.forEach( ( item ) => {
+			item.removeEventListener( 'click', this.handleClick );
+		} );
+
+		document.removeEventListener( 'keydown', this.handleKeyDown );
+	}
+}
+
+window.customElements.define(
+	'vrts-test-run-pagination',
+	VrtsTestRunPagination
+);