diff options
Diffstat (limited to 'src/static/client3.js')
-rw-r--r-- | src/static/client3.js | 40 |
1 files changed, 31 insertions, 9 deletions
diff --git a/src/static/client3.js b/src/static/client3.js index deeac6aa..1c813472 100644 --- a/src/static/client3.js +++ b/src/static/client3.js @@ -186,6 +186,7 @@ clientSteps.mutatePageContent.push(mutateCSSCompatibilityContent); const scriptedLinkInfo = initInfo('scriptedLinkInfo', { randomLinks: null, revealLinks: null, + revealContainers: null, nextNavLink: null, previousNavLink: null, @@ -204,7 +205,11 @@ function getScriptedLinkReferences() { document.querySelectorAll('[data-random]'); scriptedLinkInfo.revealLinks = - document.getElementsByClassName('reveal'); + document.querySelectorAll('.reveal .image-inner-area'); + + scriptedLinkInfo.revealContainers = + Array.from(scriptedLinkInfo.revealLinks) + .map(link => link.closest('.reveal')); scriptedLinkInfo.nextNavLink = document.getElementById('next-button'); @@ -372,18 +377,29 @@ function addNavigationKeyPressListeners() { } function addRevealLinkClickListeners() { - for (const reveal of scriptedLinkInfo.revealLinks ?? []) { - reveal.addEventListener('click', (event) => { - if (!reveal.classList.contains('revealed')) { - reveal.classList.add('revealed'); - event.preventDefault(); - event.stopPropagation(); - reveal.dispatchEvent(new CustomEvent('hsmusic-reveal')); - } + const info = scriptedLinkInfo; + + for (const {revealLink, revealContainer} of stitchArrays({ + revealLink: Array.from(info.revealLinks ?? []), + revealContainer: Array.from(info.revealContainers ?? []), + })) { + revealLink.addEventListener('click', (event) => { + handleRevealLinkClicked(event, revealLink, revealContainer); }); } } +function handleRevealLinkClicked(domEvent, _revealLink, revealContainer) { + if (revealContainer.classList.contains('revealed')) { + return; + } + + revealContainer.classList.add('revealed'); + domEvent.preventDefault(); + domEvent.stopPropagation(); + revealContainer.dispatchEvent(new CustomEvent('hsmusic-reveal')); +} + clientSteps.getPageReferences.push(getScriptedLinkReferences); clientSteps.addPageListeners.push(addRandomLinkListeners); clientSteps.addPageListeners.push(addNavigationKeyPressListeners); @@ -1698,8 +1714,14 @@ function handleImageLinkClicked(evt) { if (evt.metaKey || evt.shiftKey || evt.altKey) { return; } + evt.preventDefault(); + // Don't show the overlay if the image still needs to be revealed. + if (evt.target.closest('a').querySelector('.reveal:not(.revealed)')) { + return; + } + const container = document.getElementById('image-overlay-container'); container.classList.add('visible'); container.classList.remove('loaded'); |