From 9c54b78d9dde5601e916f308d9a9d6953ec39430 Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Wed, 17 May 2023 15:46:58 +0300 Subject: Run `eslint --fix` (and normalize tabs to spaces) --- javascript/imageviewer.js | 221 +++++++++++++++++++++++----------------------- 1 file changed, 111 insertions(+), 110 deletions(-) (limited to 'javascript/imageviewer.js') diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 32066ab8..ecd12379 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -5,24 +5,24 @@ function closeModal() { function showModal(event) { const source = event.target || event.srcElement; - const modalImage = gradioApp().getElementById("modalImage") - const lb = gradioApp().getElementById("lightboxModal") - modalImage.src = source.src + const modalImage = gradioApp().getElementById("modalImage"); + const lb = gradioApp().getElementById("lightboxModal"); + modalImage.src = source.src; if (modalImage.style.display === 'none') { lb.style.setProperty('background-image', 'url(' + source.src + ')'); } lb.style.display = "flex"; - lb.focus() + lb.focus(); - const tabTxt2Img = gradioApp().getElementById("tab_txt2img") - const tabImg2Img = gradioApp().getElementById("tab_img2img") + const tabTxt2Img = gradioApp().getElementById("tab_txt2img"); + const tabImg2Img = gradioApp().getElementById("tab_img2img"); // show the save button in modal only on txt2img or img2img tabs if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") { - gradioApp().getElementById("modal_save").style.display = "inline" + gradioApp().getElementById("modal_save").style.display = "inline"; } else { - gradioApp().getElementById("modal_save").style.display = "none" + gradioApp().getElementById("modal_save").style.display = "none"; } - event.stopPropagation() + event.stopPropagation(); } function negmod(n, m) { @@ -30,14 +30,14 @@ function negmod(n, m) { } function updateOnBackgroundChange() { - const modalImage = gradioApp().getElementById("modalImage") + const modalImage = gradioApp().getElementById("modalImage"); if (modalImage && modalImage.offsetParent) { let currentButton = selected_gallery_button(); if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) { modalImage.src = currentButton.children[0].src; if (modalImage.style.display === 'none') { - modal.style.setProperty('background-image', `url(${modalImage.src})`) + modal.style.setProperty('background-image', `url(${modalImage.src})`); } } } @@ -49,108 +49,109 @@ function modalImageSwitch(offset) { if (galleryButtons.length > 1) { var currentButton = selected_gallery_button(); - var result = -1 + var result = -1; galleryButtons.forEach(function(v, i) { if (v == currentButton) { - result = i + result = i; } - }) + }); if (result != -1) { - var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)] - nextButton.click() + var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]; + nextButton.click(); const modalImage = gradioApp().getElementById("modalImage"); const modal = gradioApp().getElementById("lightboxModal"); modalImage.src = nextButton.children[0].src; if (modalImage.style.display === 'none') { - modal.style.setProperty('background-image', `url(${modalImage.src})`) + modal.style.setProperty('background-image', `url(${modalImage.src})`); } setTimeout(function() { - modal.focus() - }, 10) + modal.focus(); + }, 10); } } } -function saveImage(){ - const tabTxt2Img = gradioApp().getElementById("tab_txt2img") - const tabImg2Img = gradioApp().getElementById("tab_img2img") - const saveTxt2Img = "save_txt2img" - const saveImg2Img = "save_img2img" +function saveImage() { + const tabTxt2Img = gradioApp().getElementById("tab_txt2img"); + const tabImg2Img = gradioApp().getElementById("tab_img2img"); + const saveTxt2Img = "save_txt2img"; + const saveImg2Img = "save_img2img"; if (tabTxt2Img.style.display != "none") { - gradioApp().getElementById(saveTxt2Img).click() + gradioApp().getElementById(saveTxt2Img).click(); } else if (tabImg2Img.style.display != "none") { - gradioApp().getElementById(saveImg2Img).click() + gradioApp().getElementById(saveImg2Img).click(); } else { - console.error("missing implementation for saving modal of this type") + console.error("missing implementation for saving modal of this type"); } } function modalSaveImage(event) { - saveImage() - event.stopPropagation() + saveImage(); + event.stopPropagation(); } function modalNextImage(event) { - modalImageSwitch(1) - event.stopPropagation() + modalImageSwitch(1); + event.stopPropagation(); } function modalPrevImage(event) { - modalImageSwitch(-1) - event.stopPropagation() + modalImageSwitch(-1); + event.stopPropagation(); } function modalKeyHandler(event) { switch (event.key) { - case "s": - saveImage() - break; - case "ArrowLeft": - modalPrevImage(event) - break; - case "ArrowRight": - modalNextImage(event) - break; - case "Escape": - closeModal(); - break; + case "s": + saveImage(); + break; + case "ArrowLeft": + modalPrevImage(event); + break; + case "ArrowRight": + modalNextImage(event); + break; + case "Escape": + closeModal(); + break; } } function setupImageForLightbox(e) { - if (e.dataset.modded) - return; + if (e.dataset.modded) { + return; + } - e.dataset.modded = true; - e.style.cursor='pointer' - e.style.userSelect='none' + e.dataset.modded = true; + e.style.cursor = 'pointer'; + e.style.userSelect = 'none'; - var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1 + var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; - // For Firefox, listening on click first switched to next image then shows the lightbox. - // If you know how to fix this without switching to mousedown event, please. - // For other browsers the event is click to make it possiblr to drag picture. - var event = isFirefox ? 'mousedown' : 'click' + // For Firefox, listening on click first switched to next image then shows the lightbox. + // If you know how to fix this without switching to mousedown event, please. + // For other browsers the event is click to make it possiblr to drag picture. + var event = isFirefox ? 'mousedown' : 'click'; - e.addEventListener(event, function (evt) { - if(!opts.js_modal_lightbox || evt.button != 0) return; + e.addEventListener(event, function(evt) { + if (!opts.js_modal_lightbox || evt.button != 0) return; - modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed) - evt.preventDefault() - showModal(evt) - }, true); + modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed); + evt.preventDefault(); + showModal(evt); + }, true); } function modalZoomSet(modalImage, enable) { - if(modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable); + if (modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable); } function modalZoomToggle(event) { var modalImage = gradioApp().getElementById("modalImage"); - modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen')) - event.stopPropagation() + modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen')); + event.stopPropagation(); } function modalTileImageToggle(event) { @@ -159,99 +160,99 @@ function modalTileImageToggle(event) { const isTiling = modalImage.style.display === 'none'; if (isTiling) { modalImage.style.display = 'block'; - modal.style.setProperty('background-image', 'none') + modal.style.setProperty('background-image', 'none'); } else { modalImage.style.display = 'none'; - modal.style.setProperty('background-image', `url(${modalImage.src})`) + modal.style.setProperty('background-image', `url(${modalImage.src})`); } - event.stopPropagation() + event.stopPropagation(); } function galleryImageHandler(e) { //if (e && e.parentElement.tagName == 'BUTTON') { - e.onclick = showGalleryImage; + e.onclick = showGalleryImage; //} } onUiUpdate(function() { - var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img') + var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img'); if (fullImg_preview != null) { fullImg_preview.forEach(setupImageForLightbox); } updateOnBackgroundChange(); -}) +}); document.addEventListener("DOMContentLoaded", function() { //const modalFragment = document.createDocumentFragment(); - const modal = document.createElement('div') + const modal = document.createElement('div'); modal.onclick = closeModal; modal.id = "lightboxModal"; - modal.tabIndex = 0 - modal.addEventListener('keydown', modalKeyHandler, true) + modal.tabIndex = 0; + modal.addEventListener('keydown', modalKeyHandler, true); - const modalControls = document.createElement('div') + const modalControls = document.createElement('div'); modalControls.className = 'modalControls gradio-container'; modal.append(modalControls); - const modalZoom = document.createElement('span') + const modalZoom = document.createElement('span'); modalZoom.className = 'modalZoom cursor'; - modalZoom.innerHTML = '⤡' - modalZoom.addEventListener('click', modalZoomToggle, true) + modalZoom.innerHTML = '⤡'; + modalZoom.addEventListener('click', modalZoomToggle, true); modalZoom.title = "Toggle zoomed view"; - modalControls.appendChild(modalZoom) + modalControls.appendChild(modalZoom); - const modalTileImage = document.createElement('span') + const modalTileImage = document.createElement('span'); modalTileImage.className = 'modalTileImage cursor'; - modalTileImage.innerHTML = '⊞' - modalTileImage.addEventListener('click', modalTileImageToggle, true) + modalTileImage.innerHTML = '⊞'; + modalTileImage.addEventListener('click', modalTileImageToggle, true); modalTileImage.title = "Preview tiling"; - modalControls.appendChild(modalTileImage) + modalControls.appendChild(modalTileImage); - const modalSave = document.createElement("span") - modalSave.className = "modalSave cursor" - modalSave.id = "modal_save" - modalSave.innerHTML = "🖫" - modalSave.addEventListener("click", modalSaveImage, true) - modalSave.title = "Save Image(s)" - modalControls.appendChild(modalSave) + const modalSave = document.createElement("span"); + modalSave.className = "modalSave cursor"; + modalSave.id = "modal_save"; + modalSave.innerHTML = "🖫"; + modalSave.addEventListener("click", modalSaveImage, true); + modalSave.title = "Save Image(s)"; + modalControls.appendChild(modalSave); - const modalClose = document.createElement('span') + const modalClose = document.createElement('span'); modalClose.className = 'modalClose cursor'; - modalClose.innerHTML = '×' + modalClose.innerHTML = '×'; modalClose.onclick = closeModal; modalClose.title = "Close image viewer"; - modalControls.appendChild(modalClose) + modalControls.appendChild(modalClose); - const modalImage = document.createElement('img') + const modalImage = document.createElement('img'); modalImage.id = 'modalImage'; modalImage.onclick = closeModal; - modalImage.tabIndex = 0 - modalImage.addEventListener('keydown', modalKeyHandler, true) - modal.appendChild(modalImage) + modalImage.tabIndex = 0; + modalImage.addEventListener('keydown', modalKeyHandler, true); + modal.appendChild(modalImage); - const modalPrev = document.createElement('a') + const modalPrev = document.createElement('a'); modalPrev.className = 'modalPrev'; - modalPrev.innerHTML = '❮' - modalPrev.tabIndex = 0 + modalPrev.innerHTML = '❮'; + modalPrev.tabIndex = 0; modalPrev.addEventListener('click', modalPrevImage, true); - modalPrev.addEventListener('keydown', modalKeyHandler, true) - modal.appendChild(modalPrev) + modalPrev.addEventListener('keydown', modalKeyHandler, true); + modal.appendChild(modalPrev); - const modalNext = document.createElement('a') + const modalNext = document.createElement('a'); modalNext.className = 'modalNext'; - modalNext.innerHTML = '❯' - modalNext.tabIndex = 0 + modalNext.innerHTML = '❯'; + modalNext.tabIndex = 0; modalNext.addEventListener('click', modalNextImage, true); - modalNext.addEventListener('keydown', modalKeyHandler, true) + modalNext.addEventListener('keydown', modalKeyHandler, true); - modal.appendChild(modalNext) + modal.appendChild(modalNext); try { - gradioApp().appendChild(modal); - } catch (e) { - gradioApp().body.appendChild(modal); - } + gradioApp().appendChild(modal); + } catch (e) { + gradioApp().body.appendChild(modal); + } document.body.appendChild(modal); -- cgit v1.2.1 From 57b75f4a037658c1122aa092d1775ac52036b2cf Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Thu, 18 May 2023 09:59:10 +0300 Subject: eslint related file edits --- javascript/imageviewer.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'javascript/imageviewer.js') diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index ecd12379..78e24eb9 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -37,6 +37,7 @@ function updateOnBackgroundChange() { if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) { modalImage.src = currentButton.children[0].src; if (modalImage.style.display === 'none') { + const modal = gradioApp().getElementById("lightboxModal"); modal.style.setProperty('background-image', `url(${modalImage.src})`); } } @@ -169,12 +170,6 @@ function modalTileImageToggle(event) { event.stopPropagation(); } -function galleryImageHandler(e) { - //if (e && e.parentElement.tagName == 'BUTTON') { - e.onclick = showGalleryImage; - //} -} - onUiUpdate(function() { var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img'); if (fullImg_preview != null) { -- cgit v1.2.1