front end clean up and address hashing, see #19

phetsims · Jul 31, 2018 · 2118f83 · 2118f83
1 parent b4691d0
commit 2118f83
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 20 deletions.
diff --git a/doc/index.html b/doc/index.html
@@ -4495,7 +4495,10 @@ <h2>Sim Examples</h2>
             </main>
         </div>
     </div>
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script
+			  src="https://code.jquery.com/jquery-3.3.1.min.js"
+			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+			  crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
@@ -4531,17 +4534,27 @@ <h2>Sim Examples</h2>
         } );
       } );
 
-      let sideLinks = document.querySelectorAll( '.bd-sidenav li a' );
+      // let sideLinks = document.querySelectorAll( '.bd-sidenav li a' );
 
-      sideLinks.forEach( li => {
-        li.addEventListener( 'click', function( event ) {
-          event.preventDefault();
-          updateUrl( event.target );
-          scrollToComponent( event.target );
-          $(event.target).parent().siblings().removeClass( 'active bd-sidenav-active' );
-          $(event.target).parent().addClass( 'active bd-sidenav-active' );
+      $( '.bd-sidenav li a' ).on( 'click', function( e ) {
+        e.preventDefault();
+        const hash = this.hash;
+        $( 'html, body' ).animate( {
+          scrollTop: $(hash).offset().top
+        }, 300, function() {
+          window.location.hash = hash;
         } );
-      } );
+      })
+
+      // sideLinks.forEach( li => {
+      //   li.addEventListener( 'click', function( event ) {
+      //     event.preventDefault();
+      //     updateUrl( event.target );
+      //     scrollToComponent( event.target );
+      //     $(event.target).parent().siblings().removeClass( 'active bd-sidenav-active' );
+      //     $(event.target).parent().addClass( 'active bd-sidenav-active' );
+      //   } );
+      // } );
 
       document.querySelectorAll( 'table' ).forEach( table => { table.classList.add( 'table' ); } );
 

diff --git a/templates/base.html b/templates/base.html
@@ -48,7 +48,10 @@ <h2 class="text-light">PhET Style Guide</h2>
             </main>
         </div>
     </div>
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script
+			  src="https://code.jquery.com/jquery-3.3.1.min.js"
+			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+			  crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
@@ -84,17 +87,27 @@ <h2 class="text-light">PhET Style Guide</h2>
         } );
       } );
 
-      let sideLinks = document.querySelectorAll( '.bd-sidenav li a' );
+      // let sideLinks = document.querySelectorAll( '.bd-sidenav li a' );
 
-      sideLinks.forEach( li => {
-        li.addEventListener( 'click', function( event ) {
-          event.preventDefault();
-          updateUrl( event.target );
-          scrollToComponent( event.target );
-          $(event.target).parent().siblings().removeClass( 'active bd-sidenav-active' );
-          $(event.target).parent().addClass( 'active bd-sidenav-active' );
+      $( '.bd-sidenav li a' ).on( 'click', function( e ) {
+        e.preventDefault();
+        const hash = this.hash;
+        $( 'html, body' ).animate( {
+          scrollTop: $(hash).offset().top
+        }, 300, function() {
+          window.location.hash = hash;
         } );
-      } );
+      })
+
+      // sideLinks.forEach( li => {
+      //   li.addEventListener( 'click', function( event ) {
+      //     event.preventDefault();
+      //     updateUrl( event.target );
+      //     scrollToComponent( event.target );
+      //     $(event.target).parent().siblings().removeClass( 'active bd-sidenav-active' );
+      //     $(event.target).parent().addClass( 'active bd-sidenav-active' );
+      //   } );
+      // } );
 
       document.querySelectorAll( 'table' ).forEach( table => { table.classList.add( 'table' ); } );