90 lines
3.0 KiB
JavaScript
90 lines
3.0 KiB
JavaScript
$( document ).ready( function () {
|
|
|
|
sessionStorage.getItem( 'menuOpen' ) ? sessionStorage.setItem( 'menuOpen', sessionStorage.getItem( 'menuOpen' ) ) : sessionStorage.setItem( 'menuOpen', false );
|
|
|
|
document.addEventListener( 'scroll', scrolled );
|
|
document.addEventListener( 'resize', scrolled );
|
|
|
|
let revealables = document.querySelectorAll( '.reveal' );
|
|
let heights = $( document ).height() / ( revealables.length + 1 );
|
|
let currentlyShowing = Math.round( window.scrollY / heights ) < revealables.length + 1 ? Math.round( window.scrollY / heights ) : revealables.length;
|
|
|
|
for ( let i = 0; i < currentlyShowing; i++ ) {
|
|
if ( i < parseInt( revealables.length ) ) {
|
|
revealables[ i ].classList.add( 'active' );
|
|
}
|
|
}
|
|
|
|
trackProgress();
|
|
|
|
let timeout = setTimeout( showScrollHint, 3500 );
|
|
|
|
if ( currentlyShowing >= revealables.length ) {
|
|
clearTimeout( timeout );
|
|
}
|
|
|
|
function showScrollHint () {
|
|
if ( sessionStorage.getItem( 'menuOpen' ) == 'false' ) {
|
|
$( '#scroll-hint' ).fadeIn( 300 );
|
|
} else {
|
|
timeout = setTimeout( showScrollHint, 7000 );
|
|
}
|
|
}
|
|
|
|
function scrolled() {
|
|
heights = $( document ).height() / ( revealables.length + 1 );
|
|
let regPos = Math.round( window.scrollY / heights );
|
|
if ( regPos != currentlyShowing && regPos < revealables.length + 1 ) {
|
|
for ( let i = 0; i < regPos + 1; i++ ) {
|
|
$( `#step-${i + 1}` ).addClass( 'active' );
|
|
}
|
|
|
|
for ( let i = regPos + 1; i < revealables.length + 1; i++ ) {
|
|
$( `#step-${i + 1}` ).removeClass( 'active' );
|
|
}
|
|
|
|
clearTimeout( timeout );
|
|
$( '#scroll-hint' ).fadeOut( 300 );
|
|
if ( regPos < revealables.length ) {
|
|
timeout = setTimeout( showScrollHint, 7000 );
|
|
}
|
|
currentlyShowing = regPos;
|
|
trackProgress();
|
|
}
|
|
}
|
|
|
|
function trackProgress () {
|
|
$( '.progress-item' ).html( `radio_button_unchecked` );
|
|
document.getElementById( `step${currentlyShowing + 1}` ).innerHTML = `radio_button_checked`;
|
|
}
|
|
|
|
$( '.progress-item' ).click( function () {
|
|
moveTo( parseInt( $( this ).attr( 'id' ).substring( 4 ) ) );
|
|
} );
|
|
|
|
$( '.scroll-wrapper' ).click( function () {
|
|
moveTo( currentlyShowing + 1 );
|
|
} );
|
|
|
|
function moveTo ( id ) {
|
|
$( '#scroll-hint' ).fadeOut( 300 );
|
|
let future = id - 1;
|
|
for ( let i = 0; i < future + 1; i++ ) {
|
|
$( `#step-${i + 1}` ).addClass( 'active' );
|
|
}
|
|
|
|
for ( let i = future + 1; i < revealables.length + 1; i++ ) {
|
|
$( `#step-${i + 1}` ).removeClass( 'active' );
|
|
}
|
|
|
|
clearTimeout( timeout );
|
|
$( '#scroll-hint' ).fadeOut( 300 );
|
|
if ( future < revealables.length ) {
|
|
timeout = setTimeout( showScrollHint, 7000 );
|
|
}
|
|
currentlyShowing = future;
|
|
trackProgress();
|
|
window.scrollTo( { top: id * heights, behavior: 'instant' } );
|
|
}
|
|
} );
|