artdwn/stable-diffusion-backup

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