Jnf.me/www/js/main.js

openPerson = false

$(() => {
  // Detect page URL
  path = window.location.pathname.replace(/\//g, '')
  if (path == 'jason' || path == 'flo' || path == 'lucy') {
    // A specific path has been set. Display the profile for that person
    openPerson = path
    immediateOpen(openPerson)
  }

  // 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)
  $('a.openlink, a.closelink').click(function(e) {
    e.preventDefault();
  })

  // Handle clicks on the banner
  $('div.banner, div#backbutton').click(function() {
    // If there's no person to open, do nothing
    if (typeof $(this).attr('data-person') == 'undefined') return;

    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' + p).css({
        height: '50vh',
        minHeight: 0
      })

      $('.main.not' + p).animate({
        height: 0
      }, {
        duration: 300,
        queue: false
      })

      $('#main-' + p).animate({
        minHeight: '100vh'
      }, {
        duration: 300,
        queue: true,
        complete: () => {
          $('.main.not' + p).css('width', 0)
          $('#splash-' + p).css({
            width: '50vw',
            height: '100vh'
          })
        }
      })

    } else {
      // If we're opening in landscape mode...
      $('#splash-' + p).css('height', '100vh')

      $('.main.not' + p).animate({
        width: 0
      }, {
        duration: 300,
        queue: false
      })

      $('#splash-' + p).animate({
        width: '50vw'
      }, {
        duration: 300,
        queue: true,
        complete: () => {
          $('.main.not' + p).css({
            height: 0,
            minHeight: 0
          })
        }
      })
    }

    // Display the links
    setTimeout(() => {
      animateLinks(p)
    }, 300)
  }

  // Animate the closure of a defined person's profile
  function animateClose(p) {
    $('#links-' + p).animate({
      height: 0
    }, {
      duration: 300,
      queue: true
    })

    $('#backbutton').animate({
      top: '-3rem',
      right: '-3rem'
    }, {
      duration: 300,
      complete: () => {
        $('#backbutton').removeAttr('class')
      }
    })


    if (window.matchMedia('(orientation: portrait)').matches) {
      // If we're closing in portrait mode...
      $('.main.not' + p).css('width', '100vw')

      $('#main-' + p).animate({
        minHeight: '50vh'
      }, {
        duration: 300,
        queue: false
      })

      $('.main.not' + p).animate({
        height: '50vh'
      }, {
        duration: 300,
        queue: false,
        complete: () => {
          $('.main, .splash').removeAttr('style')
        }
      })

    } else {
      // If we're closing in landscape mode...
      $('.main.not' + p).css('height', '100vh')

      $('#splash-' + p).animate({
        width: 0
      }, {
        duration: 300,
        queue: false
      })

      $('.main.not' + p).animate({
        width: '50vw'
      }, {
       duration: 300,
       queue: false,
       complete: () => {
         $('.main, .splash').removeAttr('style')
       }
      })
    }
  }

  // Animate the display of links for a defined person, and show the back button
  function animateLinks(p) {
    $('#links-' + p).animate({
      height: $('#links-' + p).get(0).scrollHeight
    }, {
      duration: 300
    })

    $('#backbutton').addClass(p).animate({
      top: '2.5rem',
      right: '2.5rem'
    }, {
      duration: 300
    })
  }
})