153 lines
3.5 KiB
JavaScript
153 lines
3.5 KiB
JavaScript
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
|
|
);
|