From 838ebbd06d26ff36f0f94d68ce442ae7b4434220 Mon Sep 17 00:00:00 2001 From: Jason Williams Date: Sun, 20 Nov 2022 13:10:10 -0700 Subject: [PATCH] Adding mechanism to handle URL state changes --- www/js/main.js | 300 ++++++++++++++++++++++++++----------------------- 1 file changed, 158 insertions(+), 142 deletions(-) diff --git a/www/js/main.js b/www/js/main.js index ecb0784..fd88893 100644 --- a/www/js/main.js +++ b/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 - - // 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 - }) + 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) @@ -43,132 +30,161 @@ $(() => { // 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') - - if (window.matchMedia('(orientation: portrait)').matches) { - // If we're opening in portrait mode... - $('.main.not' + openPerson).css({ - height: '50vh', - minHeight: 0 - }) - - $('.main.not' + openPerson).animate({ - height: 0 - }, { - duration: 300, - queue: false - }) - - $('#main-' + openPerson).animate({ - minHeight: '100vh' - }, { - duration: 300, - queue: true, - complete: () => { - $('.main.not' + openPerson).css('width', 0) - $('#splash-' + openPerson).css({ - width: '50vw', - height: '100vh' - }) - } - }) - - } else { - // If we're opening in landscape mode... - $('#splash-' + openPerson).css('height', '100vh') - - $('.main.not' + openPerson).animate({ - width: 0 - }, { - duration: 300, - queue: false - }) - - $('#splash-' + openPerson).animate({ - width: '50vw' - }, { - duration: 300, - queue: true, - complete: () => { - $('.main.not' + openPerson).css({ - height: 0, - minHeight: 0 - }) - } - }) - } - - // Display the links and change the page URL - setTimeout(() => { - $('#links-' + openPerson).animate({ - height: $('#links-' + openPerson).get(0).scrollHeight - }, { - duration: 300, - queue: true - }) - - window.history.pushState({ id: "100" }, '', '/' + openPerson); - }, 300) + animateOpen(openPerson) + window.history.pushState({ id: "100" }, '', '/' + openPerson); } else { - // If a profile is open, close it. - $('#links-' + openPerson).animate({ - height: 0 - }, { - duration: 300, - queue: true - }) - - if (window.matchMedia('(orientation: portrait)').matches) { - // If we're closing in portrait mode... - $('.main.not' + openPerson).css('width', '100vw') - - $('#main-' + openPerson).animate({ - minHeight: '50vh' - }, { - duration: 300, - queue: false - }) - - $('.main.not' + openPerson).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') - - $('#splash-' + openPerson).animate({ - width: 0 - }, { - duration: 300, - queue: false - }) - - $('.main.not' + openPerson).animate({ - width: '50vw' - }, { - duration: 300, - queue: false, - complete: () => { - $('.main, .splash').removeAttr('style') - openPerson = false - } - }) - } - - // Push a new page URL + // 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 + }) + + 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 + function animateLinks(p) { + $('#links-' + p).animate({ + height: $('#links-' + p).get(0).scrollHeight + }, { + duration: 300, + queue: true + }) + } })