Adding mechanism to handle URL state changes

www/js/main.js

@@ -6,34 +6,21 @@ $(() => {
   if (path == 'jason' || path == 'flo' || path == 'lucy') {
     // A specific path has been set. Display the profile for that person
     openPerson = path
-
+    immediateOpen(openPerson)
-    // Display content for the relevant person, and hide other content
-    $('.main.not' + openPerson).css({
-      width: 0,
-      height: 0,
-      minHeight: 0
-    })
-
-    $('#main-' + openPerson).css('min-height', '100vh')
-
-    $('#splash-' + openPerson).css({
-      width: '50vw',
-      height: '100vh'
-    })
-
-    // Animate the display of links
-    $('#links-' + openPerson).animate({
-      height: $('#links-' + openPerson).get(0).scrollHeight
-    }, {
-      duration: 300,
-      queue: true
-    })
   }
 
   // Listen for pop states
   window.onpopstate = function(event) {
     path = window.location.pathname.replace(/\//g, '')
     //alert(path)
+
+    if (path == '' && openPerson) {
+      animateClose(openPerson)
+      openPerson = false
+    } else if (!openPerson && (path == 'jason' || path == 'flo')) {
+      openPerson = path
+      animateOpen(openPerson)
+    }
   };
 
   // Handle clicks on profile links (by doing nothing)
@@ -43,34 +30,64 @@ $(() => {
 
   // Handle clicks on the banner
   $('div.banner').click(function() {
+    // If there's no person to open, do nothing
     if (typeof $(this).attr('data-person') == 'undefined') return;
 
-    // If no profile is open, open one...
     if (!openPerson) {
+      // If no profile is open, open one, and push a new page URL
       openPerson = $(this).attr('data-person')
+      animateOpen(openPerson)
+      window.history.pushState({ id: "100" }, '', '/' + openPerson);
+    } else {
+      // If a profile is open, close it, and push a new page URL
+      animateClose(openPerson)
+      openPerson = false
+      window.history.pushState({ id: "100" }, '', '/');
+    }
+  })
 
+  // Immediately open the content for a defined person, with only the display of links being animated
+  function immediateOpen(p) {
+    $('.main.not' + p).css({
+      width: 0,
+      height: 0,
+      minHeight: 0
+    })
+
+    $('#main-' + p).css('min-height', '100vh')
+
+    $('#splash-' + p).css({
+      width: '50vw',
+      height: '100vh'
+    })
+
+    animateLinks(p)
+  }
+
+  // Animate the opening of content for a defined person
+  function animateOpen(p) {
     if (window.matchMedia('(orientation: portrait)').matches) {
       // If we're opening in portrait mode...
-        $('.main.not' + openPerson).css({
+      $('.main.not' + p).css({
         height: '50vh',
         minHeight: 0
       })
 
-        $('.main.not' + openPerson).animate({
+      $('.main.not' + p).animate({
         height: 0
       }, {
         duration: 300,
         queue: false
       })
 
-        $('#main-' + openPerson).animate({
+      $('#main-' + p).animate({
         minHeight: '100vh'
       }, {
         duration: 300,
         queue: true,
         complete: () => {
-            $('.main.not' + openPerson).css('width', 0)
+          $('.main.not' + p).css('width', 0)
-            $('#splash-' + openPerson).css({
+          $('#splash-' + p).css({
             width: '50vw',
             height: '100vh'
           })
@@ -79,22 +96,22 @@ $(() => {
 
     } else {
       // If we're opening in landscape mode...
-        $('#splash-' + openPerson).css('height', '100vh')
+      $('#splash-' + p).css('height', '100vh')
 
-        $('.main.not' + openPerson).animate({
+      $('.main.not' + p).animate({
         width: 0
       }, {
         duration: 300,
         queue: false
       })
 
-        $('#splash-' + openPerson).animate({
+      $('#splash-' + p).animate({
         width: '50vw'
       }, {
         duration: 300,
         queue: true,
         complete: () => {
-            $('.main.not' + openPerson).css({
+          $('.main.not' + p).css({
             height: 0,
             minHeight: 0
           })
@@ -102,20 +119,15 @@ $(() => {
       })
     }
 
-      // Display the links and change the page URL
+    // Display the links
     setTimeout(() => {
-        $('#links-' + openPerson).animate({
+      animateLinks(p)
-          height: $('#links-' + openPerson).get(0).scrollHeight
-        }, {
-          duration: 300,
-          queue: true
-        })
-
-        window.history.pushState({ id: "100" }, '', '/' + openPerson);
     }, 300)
-    } else {
+  }
-      // If a profile is open, close it.
+
-      $('#links-' + openPerson).animate({
+  // Animate the closure of a defined person's profile
+  function animateClose(p) {
+    $('#links-' + p).animate({
       height: 0
     }, {
       duration: 300,
@@ -124,51 +136,55 @@ $(() => {
 
     if (window.matchMedia('(orientation: portrait)').matches) {
       // If we're closing in portrait mode...
-        $('.main.not' + openPerson).css('width', '100vw')
+      $('.main.not' + p).css('width', '100vw')
 
-        $('#main-' + openPerson).animate({
+      $('#main-' + p).animate({
         minHeight: '50vh'
       }, {
         duration: 300,
         queue: false
       })
 
-        $('.main.not' + openPerson).animate({
+      $('.main.not' + p).animate({
         height: '50vh'
       }, {
         duration: 300,
         queue: false,
         complete: () => {
           $('.main, .splash').removeAttr('style')
-            openPerson = false
         }
       })
 
     } else {
       // If we're closing in landscape mode...
-        $('.main.not' + openPerson).css('height', '100vh')
+      $('.main.not' + p).css('height', '100vh')
 
-        $('#splash-' + openPerson).animate({
+      $('#splash-' + p).animate({
         width: 0
       }, {
         duration: 300,
         queue: false
       })
 
-        $('.main.not' + openPerson).animate({
+      $('.main.not' + p).animate({
         width: '50vw'
       }, {
        duration: 300,
        queue: false,
        complete: () => {
          $('.main, .splash').removeAttr('style')
-           openPerson = false
        }
       })
     }
+  }
 
-      // Push a new page URL
+  // Animate the display of links for a defined person
-      window.history.pushState({ id: "100" }, '', '/');
+  function animateLinks(p) {
-    }
+    $('#links-' + p).animate({
+      height: $('#links-' + p).get(0).scrollHeight
+    }, {
+      duration: 300,
+      queue: true
     })
+  }
 })