From f96d8a601c782885d33ce021ad2c3f20b801dd24 Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 15:29:06 +0100 Subject: [PATCH 1/4] Block event propagation when lightbox is triggered --- script.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/script.js b/script.js index a016eb4e..9e3d42b5 100644 --- a/script.js +++ b/script.js @@ -80,11 +80,14 @@ function closeModal() { gradioApp().getElementById("lightboxModal").style.display = "none"; } -function showModal(elem) { - gradioApp().getElementById("modalImage").src = elem.src +function showModal(event) { + var source = event.target || event.srcElement; + gradioApp().getElementById("modalImage").src = source.src gradioApp().getElementById("lightboxModal").style.display = "block"; + event.stopPropagation() } + function showGalleryImage(){ setTimeout(function() { fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain') @@ -92,12 +95,13 @@ function showGalleryImage(){ if(fullImg_preview != null){ fullImg_preview.forEach(function function_name(e) { if(e && e.parentElement.tagName == 'DIV'){ + e.style.cursor='pointer' - elemfunc = function(elem){ - elem.onclick = function(){showModal(elem)}; - } - elemfunc(e) + e.addEventListener('click', function (evt) { + showModal(evt) + + },true); } }); } From fb668c58ef9bfe7ab63af0a70c27c5ff8a70cf64 Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 17:56:53 +0100 Subject: [PATCH 2/4] add previous and next styles --- style.css | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/style.css b/style.css index 36d073fa..9a236185 100644 --- a/style.css +++ b/style.css @@ -230,3 +230,29 @@ input[type="range"]{ width: auto; } +.modalPrev, +.modalNext { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -50px; + color: white; + font-weight: bold; + font-size: 20px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + -webkit-user-select: none; +} + +.modalNext { + right: 0; + border-radius: 3px 0 0 3px; +} + +.modalPrev:hover, +.modalNext:hover { + background-color: rgba(0, 0, 0, 0.8); +} From 0e5527b4df6199d52aa6a424dcf95954cfd87d1f Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 17:58:33 +0100 Subject: [PATCH 3/4] Add previous and next to modal with key shortcuts --- script.js | 88 ++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 64 insertions(+), 24 deletions(-) diff --git a/script.js b/script.js index 9e3d42b5..276158e9 100644 --- a/script.js +++ b/script.js @@ -83,35 +83,53 @@ function closeModal() { function showModal(event) { var source = event.target || event.srcElement; gradioApp().getElementById("modalImage").src = source.src - gradioApp().getElementById("lightboxModal").style.display = "block"; + var lb = gradioApp().getElementById("lightboxModal") + lb.style.display = "block"; + lb.focus() event.stopPropagation() } - -function showGalleryImage(){ - setTimeout(function() { - fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain') - - if(fullImg_preview != null){ - fullImg_preview.forEach(function function_name(e) { - if(e && e.parentElement.tagName == 'DIV'){ - - e.style.cursor='pointer' - - e.addEventListener('click', function (evt) { - showModal(evt) - - },true); - } - }); - } - - }, 100); +function negmod(n, m) { + return ((n % m) + m) % m; } -function galleryImageHandler(e){ - if(e && e.parentElement.tagName == 'BUTTON'){ - e.onclick = showGalleryImage; +function modalImageSwitch(offset){ + var galleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all") + + if(galleryButtons.length>1){ + var currentButton = gradioApp().querySelector(".gallery-item.transition-all.\\!ring-2") + + var result = -1 + galleryButtons.forEach(function(v, i){ if(v==currentButton) { result = i } }) + + if(result != -1){ + nextButton = galleryButtons[negmod((result+offset),galleryButtons.length)] + nextButton.click() + gradioApp().getElementById("modalImage").src = nextButton.children[0].src + setTimeout( function(){gradioApp().getElementById("lightboxModal").focus()},10) + } + } + +} + +function modalNextImage(event){ + modalImageSwitch(1) + event.stopPropagation() +} + +function modalPrevImage(event){ + modalImageSwitch(-1) + event.stopPropagation() +} + +function modalKeyHandler(event){ + switch (event.key) { + case "ArrowLeft": + modalPrevImage(event) + break; + case "ArrowRight": + modalNextImage(event) + break; } } @@ -185,13 +203,35 @@ document.addEventListener("DOMContentLoaded", function() { modalClose.innerHTML = '×' modalClose.onclick = closeModal; modal.id = "lightboxModal"; + modal.tabIndex=0 + modal.addEventListener('keydown', modalKeyHandler, true) modal.appendChild(modalClose) const modalImage = document.createElement('img') modalImage.id = 'modalImage'; modalImage.onclick = closeModal; + modalImage.tabIndex=0 + modalImage.addEventListener('keydown', modalKeyHandler, true) modal.appendChild(modalImage) + const modalPrev = document.createElement('a') + modalPrev.className = 'modalPrev'; + modalPrev.innerHTML = '❮' + modalPrev.tabIndex=0 + modalPrev.addEventListener('click',modalPrevImage,true); + modalPrev.addEventListener('keydown', modalKeyHandler, true) + modal.appendChild(modalPrev) + + const modalNext = document.createElement('a') + modalNext.className = 'modalNext'; + modalNext.innerHTML = '❯' + modalNext.tabIndex=0 + modalNext.addEventListener('click',modalNextImage,true); + modalNext.addEventListener('keydown', modalKeyHandler, true) + + modal.appendChild(modalNext) + + gradioApp().getRootNode().appendChild(modal) document.body.appendChild(modalFragment); From f9cae046cb0a676efeda2577761474e58c27abed Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 18:03:52 +0100 Subject: [PATCH 4/4] typo --- script.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/script.js b/script.js index 276158e9..113d4335 100644 --- a/script.js +++ b/script.js @@ -133,6 +133,33 @@ function modalKeyHandler(event){ } } +function showGalleryImage(){ + setTimeout(function() { + fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain') + + if(fullImg_preview != null){ + fullImg_preview.forEach(function function_name(e) { + if(e && e.parentElement.tagName == 'DIV'){ + + e.style.cursor='pointer' + + e.addEventListener('click', function (evt) { + showModal(evt) + + },true); + } + }); + } + + }, 100); +} + +function galleryImageHandler(e){ + if(e && e.parentElement.tagName == 'BUTTON'){ + e.onclick = showGalleryImage; + } +} + function addTitles(root){ root.querySelectorAll('span, button, select').forEach(function(span){ tooltip = titles[span.textContent];