Adding mechanism to change URLs on page state changes

www/js/main.js

@@ -7,8 +7,6 @@ $(() => {
     // A specific path has been set. Display the profile for that person
     openPerson = path
 
-    // CHANGE THE DISPLAY HERE FOR JASON / FLO
-
     // Display content for the relevant person, and hide other content
     $('.main.not' + openPerson).css({
       width: 0,
@@ -32,6 +30,12 @@ $(() => {
     })
   }
 
+  // Listen for pop states
+  window.onpopstate = function(event) {
+    path = window.location.pathname.replace(/\//g, '')
+    //alert(path)
+  };
+
   // Handle clicks on profile links (by doing nothing)
   $('a.openlink').click(function(e) {
     e.preventDefault();
@@ -98,7 +102,7 @@ $(() => {
         })
       }
 
-      // Display the links
+      // Display the links and change the page URL
       setTimeout(() => {
         $('#links-' + openPerson).animate({
           height: $('#links-' + openPerson).get(0).scrollHeight
@@ -106,6 +110,8 @@ $(() => {
           duration: 300,
           queue: true
         })
+
+        window.history.pushState({ id: "100" }, '', '/' + openPerson);
       }, 300)
     } else {
       // If a profile is open, close it.
@@ -160,6 +166,9 @@ $(() => {
          }
         })
       }
+
+      // Push a new page URL
+      window.history.pushState({ id: "100" }, '', '/');
     }
   })
 })