SD-online/Fooocus-Docker

1// From A11112 3function closeModal() {4    gradioApp().getElementById("lightboxModal").style.display = "none";5}6 7function showModal(event) {8    const source = event.target || event.srcElement;9    const modalImage = gradioApp().getElementById("modalImage");10    const lb = gradioApp().getElementById("lightboxModal");11    modalImage.src = source.src;12    if (modalImage.style.display === 'none') {13        lb.style.setProperty('background-image', 'url(' + source.src + ')');14    }15    lb.style.display = "flex";16    lb.focus();17 18    event.stopPropagation();19}20 21function negmod(n, m) {22    return ((n % m) + m) % m;23}24 25function updateOnBackgroundChange() {26    const modalImage = gradioApp().getElementById("modalImage");27    if (modalImage && modalImage.offsetParent) {28        let currentButton = selected_gallery_button();29 30        if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {31            modalImage.src = currentButton.children[0].src;32            if (modalImage.style.display === 'none') {33                const modal = gradioApp().getElementById("lightboxModal");34                modal.style.setProperty('background-image', `url(${modalImage.src})`);35            }36        }37    }38}39 40function all_gallery_buttons() {41    var allGalleryButtons = gradioApp().querySelectorAll('.image_gallery .thumbnails > .thumbnail-item.thumbnail-small');42    var visibleGalleryButtons = [];43    allGalleryButtons.forEach(function(elem) {44        if (elem.parentElement.offsetParent) {45            visibleGalleryButtons.push(elem);46        }47    });48    return visibleGalleryButtons;49}50 51function selected_gallery_button() {52    return all_gallery_buttons().find(elem => elem.classList.contains('selected')) ?? null;53}54 55function selected_gallery_index() {56    return all_gallery_buttons().findIndex(elem => elem.classList.contains('selected'));57}58 59function modalImageSwitch(offset) {60    var galleryButtons = all_gallery_buttons();61 62    if (galleryButtons.length > 1) {63        var currentButton = selected_gallery_button();64 65        var result = -1;66        galleryButtons.forEach(function(v, i) {67            if (v == currentButton) {68                result = i;69            }70        });71 72        if (result != -1) {73            var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)];74            nextButton.click();75            const modalImage = gradioApp().getElementById("modalImage");76            const modal = gradioApp().getElementById("lightboxModal");77            modalImage.src = nextButton.children[0].src;78            if (modalImage.style.display === 'none') {79                modal.style.setProperty('background-image', `url(${modalImage.src})`);80            }81            setTimeout(function() {82                modal.focus();83            }, 10);84        }85    }86}87 88function saveImage() {89 90}91 92function modalSaveImage(event) {93    event.stopPropagation();94}95 96function modalNextImage(event) {97    modalImageSwitch(1);98    event.stopPropagation();99}100 101function modalPrevImage(event) {102    modalImageSwitch(-1);103    event.stopPropagation();104}105 106function modalKeyHandler(event) {107    switch (event.key) {108    case "s":109        saveImage();110        break;111    case "ArrowLeft":112        modalPrevImage(event);113        break;114    case "ArrowRight":115        modalNextImage(event);116        break;117    case "Escape":118        closeModal();119        break;120    }121}122 123function setupImageForLightbox(e) {124    if (e.dataset.modded) {125        return;126    }127 128    e.dataset.modded = true;129    e.style.cursor = 'pointer';130    e.style.userSelect = 'none';131 132    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;133 134    // For Firefox, listening on click first switched to next image then shows the lightbox.135    // If you know how to fix this without switching to mousedown event, please.136    // For other browsers the event is click to make it possiblr to drag picture.137    var event = isFirefox ? 'mousedown' : 'click';138 139    e.addEventListener(event, function(evt) {140        if (evt.button == 1) {141            open(evt.target.src);142            evt.preventDefault();143            return;144        }145        if (evt.button != 0) return;146 147        modalZoomSet(gradioApp().getElementById('modalImage'), true);148        evt.preventDefault();149        showModal(evt);150    }, true);151 152}153 154function modalZoomSet(modalImage, enable) {155    if (modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);156}157 158function modalZoomToggle(event) {159    var modalImage = gradioApp().getElementById("modalImage");160    modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'));161    event.stopPropagation();162}163 164function modalTileImageToggle(event) {165    const modalImage = gradioApp().getElementById("modalImage");166    const modal = gradioApp().getElementById("lightboxModal");167    const isTiling = modalImage.style.display === 'none';168    if (isTiling) {169        modalImage.style.display = 'block';170        modal.style.setProperty('background-image', 'none');171    } else {172        modalImage.style.display = 'none';173        modal.style.setProperty('background-image', `url(${modalImage.src})`);174    }175 176    event.stopPropagation();177}178 179onAfterUiUpdate(function() {180    var fullImg_preview = gradioApp().querySelectorAll('.image_gallery > div > img');181    if (fullImg_preview != null) {182        fullImg_preview.forEach(setupImageForLightbox);183    }184    updateOnBackgroundChange();185});186 187document.addEventListener("DOMContentLoaded", function() {188    //const modalFragment = document.createDocumentFragment();189    const modal = document.createElement('div');190    modal.onclick = closeModal;191    modal.id = "lightboxModal";192    modal.tabIndex = 0;193    modal.addEventListener('keydown', modalKeyHandler, true);194 195    const modalControls = document.createElement('div');196    modalControls.className = 'modalControls gradio-container';197    modal.append(modalControls);198 199    const modalZoom = document.createElement('span');200    modalZoom.className = 'modalZoom cursor';201    modalZoom.innerHTML = '⤡';202    modalZoom.addEventListener('click', modalZoomToggle, true);203    modalZoom.title = "Toggle zoomed view";204    modalControls.appendChild(modalZoom);205 206    // const modalTileImage = document.createElement('span');207    // modalTileImage.className = 'modalTileImage cursor';208    // modalTileImage.innerHTML = '⊞';209    // modalTileImage.addEventListener('click', modalTileImageToggle, true);210    // modalTileImage.title = "Preview tiling";211    // modalControls.appendChild(modalTileImage);212    //213    // const modalSave = document.createElement("span");214    // modalSave.className = "modalSave cursor";215    // modalSave.id = "modal_save";216    // modalSave.innerHTML = "🖫";217    // modalSave.addEventListener("click", modalSaveImage, true);218    // modalSave.title = "Save Image(s)";219    // modalControls.appendChild(modalSave);220 221    const modalClose = document.createElement('span');222    modalClose.className = 'modalClose cursor';223    modalClose.innerHTML = '×';224    modalClose.onclick = closeModal;225    modalClose.title = "Close image viewer";226    modalControls.appendChild(modalClose);227 228    const modalImage = document.createElement('img');229    modalImage.id = 'modalImage';230    modalImage.onclick = closeModal;231    modalImage.tabIndex = 0;232    modalImage.addEventListener('keydown', modalKeyHandler, true);233    modal.appendChild(modalImage);234 235    const modalPrev = document.createElement('a');236    modalPrev.className = 'modalPrev';237    modalPrev.innerHTML = '❮';238    modalPrev.tabIndex = 0;239    modalPrev.addEventListener('click', modalPrevImage, true);240    modalPrev.addEventListener('keydown', modalKeyHandler, true);241    modal.appendChild(modalPrev);242 243    const modalNext = document.createElement('a');244    modalNext.className = 'modalNext';245    modalNext.innerHTML = '❯';246    modalNext.tabIndex = 0;247    modalNext.addEventListener('click', modalNextImage, true);248    modalNext.addEventListener('keydown', modalKeyHandler, true);249 250    modal.appendChild(modalNext);251 252    try {253        gradioApp().appendChild(modal);254    } catch (e) {255        gradioApp().body.appendChild(modal);256    }257 258    document.body.appendChild(modal);259 260});261