initial

wp-content/plugins/visual-regression-tests/components/test-run-pagination/_style.scss

@@ -0,0 +1,22 @@
+.vrts-test-run-pagination {
+	display: flex;
+	gap: 0.25rem;
+	align-items: center;
+
+	&__text {
+		white-space: nowrap;
+		margin-right: 0.25rem;
+	}
+
+	.button {
+		display: inline-block;
+		vertical-align: baseline;
+		min-width: 30px;
+		min-height: 30px;
+		margin: 0;
+		padding: 0 4px;
+		font-size: 16px;
+		line-height: 1.625;
+		text-align: center;
+	}
+}

wp-content/plugins/visual-regression-tests/components/test-run-pagination/index.php

@@ -0,0 +1,38 @@
+<?php
+
+use Vrts\Core\Utilities\Url_Helpers;
+
+// don't show pagination if there is no previous or next alert.
+if ( 0 === $data['pagination']['total'] ) {
+	return;
+}
+
+?>
+<vrts-test-run-pagination class="vrts-test-run-pagination">
+	<span class="screen-reader-text"><?php esc_html_e( 'Current Page', 'visual-regression-tests' ); ?></span>
+	<span class="vrts-test-run-pagination__text">
+		<?php
+		if ( $data['is_receipt'] ) {
+			esc_html_e( 'Test Receipt', 'visual-regression-tests' );
+		} else {
+			printf(
+				/* translators: %d: pages. */
+				esc_html_x( 'Alert %1$d of %2$d', 'e.g. Alert 1 of 2', 'visual-regression-tests' ),
+				esc_html( $data['pagination']['current'] ),
+				esc_html( $data['pagination']['total'] )
+			);
+		}
+		?>
+	</span>
+	<a data-vrts-pagination="prev" data-vrts-alert-id="<?php echo esc_attr( $data['pagination']['prev_alert_id'] ); ?>" class="button <?php echo ( 0 === $data['pagination']['prev_alert_id'] ) ? 'button-disabled' : ''; ?>"
+		<?php echo ( 0 !== $data['pagination']['prev_alert_id'] ) ? 'href="' . esc_url( Url_Helpers::get_alert_page( $data['pagination']['prev_alert_id'], $data['run']->id ) ) . '"' : ''; ?>>
+		<span class="screen-reader-text"><?php esc_html_e( 'Previous alert', 'visual-regression-tests' ); ?></span>
+		<span aria-hidden="true">‹</span>
+	</a>
+	<a data-vrts-pagination="next" data-vrts-alert-id="<?php echo esc_attr( $data['pagination']['next_alert_id'] ); ?>" class="button <?php echo ( 0 === $data['pagination']['next_alert_id'] ) ? 'button-disabled' : ''; ?>"
+		<?php echo ( 0 !== $data['pagination']['next_alert_id'] ) ? 'href="' . esc_url( Url_Helpers::get_alert_page( $data['pagination']['next_alert_id'], $data['run']->id ) ) . '"' : ''; ?>>
+		<span class="screen-reader-text"><?php esc_html_e( 'Next alert', 'visual-regression-tests' ); ?></span>
+		<span aria-hidden="true">›</span>
+	</a>
+</vrts-test-run-pagination>
+

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
+);