progress on website

newVersion/js/index.js

@@ -0,0 +1,13 @@
+setInterval( backgroundSwitching, 10000 );
+
+let id = 2;
+
+function backgroundSwitching () {
+    $( `#img${id}` ).addClass( 'visible' );
+    if ( id > 6 ) {
+        id = 2;
+        $( `.hidables` ).removeClass( 'visible' );
+    } else {
+        id++;
+    }
+}

newVersion/js/scrolling.js

@@ -1,5 +1,7 @@
 $( document ).ready( function () {
 
+    sessionStorage.getItem( 'menuOpen' ) ? sessionStorage.setItem( 'menuOpen', sessionStorage.getItem( 'menuOpen' ) ) : sessionStorage.setItem( 'menuOpen', false );
+
     document.addEventListener( 'scroll', scrolled );
     document.addEventListener( 'resize', scrolled );
 
@@ -13,14 +15,63 @@ $( document ).ready( function () {
         }
     }
 
+    trackProgress();
+
+    let timeout = setTimeout( showScrollHint, 10000 );
+
+    if ( currentlyShowing >= revealables.length ) {
+        clearTimeout( timeout );
+    }
+
+    function showScrollHint () {
+        if ( !sessionStorage.getItem( 'menuOpen' ) ) {
+            $( '#scroll-hint' ).fadeIn( 300 );
+        } else {
+            timeout = setTimeout( showScrollHint, 10000 );
+        }
+    }
+
     function scrolled() {
         heights = $( document ).height() / ( revealables.length + 1 );
         let regPos = Math.round( window.scrollY / heights );
         if ( regPos < currentlyShowing && regPos < parseInt( revealables.length ) ) {
             revealables[ regPos ].classList.remove( 'active' );
+            clearTimeout( timeout );
+            $( '#scroll-hint' ).fadeOut( 300 );
+            if ( regPos < revealables.length ) {
+                timeout = setTimeout( showScrollHint, 10000 );
+            }
         } else if ( regPos > currentlyShowing && regPos < parseInt( revealables.length ) + 1 ) {
             revealables[ currentlyShowing ].classList.add( 'active' );
+            clearTimeout( timeout );
+            $( '#scroll-hint' ).fadeOut( 300 );
+            if ( regPos < revealables.length ) {
+                timeout = setTimeout( showScrollHint, 10000 );
+            }
         }
         currentlyShowing = regPos;
+        trackProgress();
     }
+
+    function trackProgress () {
+        $( '.progress-item' ).html( `radio_button_unchecked` );
+        document.getElementById( `step${currentlyShowing + 1}` ).innerHTML = `radio_button_checked`;
+    }
+
+    $( '.progress-item' ).click( function () {
+        let future = parseInt( $( this ).attr( 'id' ).substring( 4 ) ) - 1;
+        for ( let i = 0; i < future + 1; i++ ) {
+            $( `#step${i + 1}` ).html( `radio_button_checked` );
+            $( `#step-${i + 1}` ).addClass( 'active' );
+        }
+
+        for ( let i = future + 1; i < revealables.length + 1; i++ ) {
+            console.log( i + 1 );
+            $( `#step${i + 1}` ).html( `radio_button_unchecked` );
+            $( `#step-${i + 1}` ).removeClass( 'active' );
+        }
+        currentlyShowing = future;
+        trackProgress();
+        window.scrollTo( { top: ( parseInt( $( this ).attr( 'id' ).substring( 4 ) ) - 1 ) * heights, behavior: 'instant' } );
+    } );
 } );