diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js index a8278cca2..5160081d2 100644 --- a/javascript/aspectRatioOverlay.js +++ b/javascript/aspectRatioOverlay.js @@ -45,29 +45,24 @@ function dimensionChange(e, is_width, is_height){ var viewportOffset = targetElement.getBoundingClientRect(); - viewportscale = Math.min( targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight ) + var viewportscale = Math.min( targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight ) - scaledx = targetElement.naturalWidth*viewportscale - scaledy = targetElement.naturalHeight*viewportscale + var scaledx = targetElement.naturalWidth*viewportscale + var scaledy = targetElement.naturalHeight*viewportscale - cleintRectTop = (viewportOffset.top+window.scrollY) - cleintRectLeft = (viewportOffset.left+window.scrollX) - cleintRectCentreY = cleintRectTop + (targetElement.clientHeight/2) - cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2) + var cleintRectTop = (viewportOffset.top+window.scrollY) + var cleintRectLeft = (viewportOffset.left+window.scrollX) + var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight/2) + var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2) - viewRectTop = cleintRectCentreY-(scaledy/2) - viewRectLeft = cleintRectCentreX-(scaledx/2) - arRectWidth = scaledx - arRectHeight = scaledy + var arscale = Math.min( scaledx/currentWidth, scaledy/currentHeight ) + var arscaledx = currentWidth*arscale + var arscaledy = currentHeight*arscale - arscale = Math.min( arRectWidth/currentWidth, arRectHeight/currentHeight ) - arscaledx = currentWidth*arscale - arscaledy = currentHeight*arscale - - arRectTop = cleintRectCentreY-(arscaledy/2) - arRectLeft = cleintRectCentreX-(arscaledx/2) - arRectWidth = arscaledx - arRectHeight = arscaledy + var arRectTop = cleintRectCentreY-(arscaledy/2) + var arRectLeft = cleintRectCentreX-(arscaledx/2) + var arRectWidth = arscaledx + var arRectHeight = arscaledy arPreviewRect.style.top = arRectTop+'px'; arPreviewRect.style.left = arRectLeft+'px'; diff --git a/javascript/contextMenus.js b/javascript/contextMenus.js index 9468c1072..42f301ab7 100644 --- a/javascript/contextMenus.js +++ b/javascript/contextMenus.js @@ -4,7 +4,7 @@ contextMenuInit = function(){ let menuSpecs = new Map(); const uid = function(){ - return Date.now().toString(36) + Math.random().toString(36).substr(2); + return Date.now().toString(36) + Math.random().toString(36).substring(2); } function showContextMenu(event,element,menuEntries){ @@ -16,8 +16,7 @@ contextMenuInit = function(){ oldMenu.remove() } - let tabButton = uiCurrentTab - let baseStyle = window.getComputedStyle(tabButton) + let baseStyle = window.getComputedStyle(uiCurrentTab) const contextMenu = document.createElement('nav') contextMenu.id = "context-menu" @@ -36,7 +35,7 @@ contextMenuInit = function(){ menuEntries.forEach(function(entry){ let contextMenuEntry = document.createElement('a') contextMenuEntry.innerHTML = entry['name'] - contextMenuEntry.addEventListener("click", function(e) { + contextMenuEntry.addEventListener("click", function() { entry['func'](); }) contextMenuList.append(contextMenuEntry); @@ -63,7 +62,7 @@ contextMenuInit = function(){ function appendContextMenuOption(targetElementSelector,entryName,entryFunction){ - currentItems = menuSpecs.get(targetElementSelector) + var currentItems = menuSpecs.get(targetElementSelector) if(!currentItems){ currentItems = [] @@ -79,7 +78,7 @@ contextMenuInit = function(){ } function removeContextMenuOption(uid){ - menuSpecs.forEach(function(v,k) { + menuSpecs.forEach(function(v) { let index = -1 v.forEach(function(e,ei){if(e['id']==uid){index=ei}}) if(index>=0){ @@ -112,7 +111,6 @@ contextMenuInit = function(){ if(e.composedPath()[0].matches(k)){ showContextMenu(e,e.composedPath()[0],v) e.preventDefault() - return } }) }); diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js index 588c7b773..d2c2f1905 100644 --- a/javascript/edit-attention.js +++ b/javascript/edit-attention.js @@ -69,8 +69,8 @@ function keyupEditAttention(event){ event.preventDefault(); - closeCharacter = ')' - delta = opts.keyedit_precision_attention + var closeCharacter = ')' + var delta = opts.keyedit_precision_attention if (selectionStart > 0 && text[selectionStart - 1] == '<'){ closeCharacter = '>' @@ -91,8 +91,8 @@ function keyupEditAttention(event){ selectionEnd += 1; } - end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1; - weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end)); + var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1; + var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end)); if (isNaN(weight)) return; weight += isPlus ? delta : -delta; diff --git a/javascript/extensions.js b/javascript/extensions.js index 3c2f995aa..2a2d2f8e7 100644 --- a/javascript/extensions.js +++ b/javascript/extensions.js @@ -1,14 +1,14 @@ -function extensions_apply(_, _, disable_all){ +function extensions_apply(_disabled_list, _update_list, disable_all){ var disable = [] var update = [] gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){ if(x.name.startsWith("enable_") && ! x.checked) - disable.push(x.name.substr(7)) + disable.push(x.name.substring(7)) if(x.name.startsWith("update_") && x.checked) - update.push(x.name.substr(7)) + update.push(x.name.substring(7)) }) restart_reload() @@ -16,12 +16,12 @@ function extensions_apply(_, _, disable_all){ return [JSON.stringify(disable), JSON.stringify(update), disable_all] } -function extensions_check(_, _){ +function extensions_check(){ var disable = [] gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){ if(x.name.startsWith("enable_") && ! x.checked) - disable.push(x.name.substr(7)) + disable.push(x.name.substring(7)) }) gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){ @@ -41,7 +41,7 @@ function install_extension_from_index(button, url){ button.disabled = "disabled" button.value = "Installing..." - textarea = gradioApp().querySelector('#extension_to_install textarea') + var textarea = gradioApp().querySelector('#extension_to_install textarea') textarea.value = url updateInput(textarea) diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 253221389..c8f6b3861 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -10,11 +10,11 @@ function setupExtraNetworksForTab(tabname){ tabs.appendChild(search) tabs.appendChild(refresh) - search.addEventListener("input", function(evt){ - searchTerm = search.value.toLowerCase() + search.addEventListener("input", function(){ + var searchTerm = search.value.toLowerCase() gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){ - text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase() + var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase() elem.style.display = text.indexOf(searchTerm) == -1 ? "none" : "" }) }); @@ -55,7 +55,7 @@ function tryToRemoveExtraNetworkFromPrompt(textarea, text){ var partToSearch = m[1] var replaced = false - var newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found, index){ + var newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found){ m = found.match(re_extranet); if(m[1] == partToSearch){ replaced = true; @@ -96,9 +96,9 @@ function saveCardPreview(event, tabname, filename){ } function extraNetworksSearchButton(tabs_id, event){ - searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea') - button = event.target - text = button.classList.contains("search-all") ? "" : button.textContent.trim() + var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea') + var button = event.target + var text = button.classList.contains("search-all") ? "" : button.textContent.trim() searchTextarea.value = text updateInput(searchTextarea) @@ -133,7 +133,7 @@ function popup(contents){ } function extraNetworksShowMetadata(text){ - elem = document.createElement('pre') + var elem = document.createElement('pre') elem.classList.add('popup-metadata'); elem.textContent = text; @@ -165,7 +165,7 @@ function requestGet(url, data, handler, errorHandler){ } function extraNetworksRequestMetadata(event, extraPage, cardName){ - showError = function(){ extraNetworksShowMetadata("there was an error getting metadata"); } + var showError = function(){ extraNetworksShowMetadata("there was an error getting metadata"); } requestGet("./sd_extra_networks/metadata", {"page": extraPage, "item": cardName}, function(data){ if(data && data.metadata){ diff --git a/javascript/generationParams.js b/javascript/generationParams.js index 1266a266c..ef64ee2e5 100644 --- a/javascript/generationParams.js +++ b/javascript/generationParams.js @@ -23,7 +23,7 @@ let modalObserver = new MutationObserver(function(mutations) { }); function attachGalleryListeners(tab_name) { - gallery = gradioApp().querySelector('#'+tab_name+'_gallery') + var gallery = gradioApp().querySelector('#'+tab_name+'_gallery') gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name+"_generation_info_button").click()); gallery?.addEventListener('keydown', (e) => { if (e.keyCode == 37 || e.keyCode == 39) // left or right arrow diff --git a/javascript/hints.js b/javascript/hints.js index e7d17d36a..8d1967a76 100644 --- a/javascript/hints.js +++ b/javascript/hints.js @@ -118,7 +118,9 @@ titles = { onUiUpdate(function(){ gradioApp().querySelectorAll('span, button, select, p').forEach(function(span){ - tooltip = titles[span.textContent]; + if (span.title) return; // already has a title + + let tooltip = titles[span.textContent]; if(!tooltip){ tooltip = titles[span.value]; diff --git a/javascript/hires_fix.js b/javascript/hires_fix.js index 0629475f8..48196be40 100644 --- a/javascript/hires_fix.js +++ b/javascript/hires_fix.js @@ -1,16 +1,12 @@ -function setInactive(elem, inactive){ - if(inactive){ - elem.classList.add('inactive') - } else{ - elem.classList.remove('inactive') - } -} - function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y){ - hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale') - hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x') - hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y') + function setInactive(elem, inactive){ + elem.classList.toggle('inactive', !!inactive) + } + + var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale') + var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x') + var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y') gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "" diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js index 9fe7a6030..a612705d2 100644 --- a/javascript/imageMaskFix.js +++ b/javascript/imageMaskFix.js @@ -2,11 +2,10 @@ * temporary fix for https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/668 * @see https://github.com/gradio-app/gradio/issues/1721 */ -window.addEventListener( 'resize', () => imageMaskResize()); function imageMaskResize() { const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas'); if ( ! canvases.length ) { - canvases_fixed = false; + canvases_fixed = false; // TODO: this is unused..? window.removeEventListener( 'resize', imageMaskResize ); return; } @@ -15,7 +14,7 @@ function imageMaskResize() { const previewImage = wrapper.previousElementSibling; if ( ! previewImage.complete ) { - previewImage.addEventListener( 'load', () => imageMaskResize()); + previewImage.addEventListener( 'load', imageMaskResize); return; } @@ -24,7 +23,6 @@ function imageMaskResize() { const nw = previewImage.naturalWidth; const nh = previewImage.naturalHeight; const portrait = nh > nw; - const factor = portrait; const wW = Math.min(w, portrait ? h/nh*nw : w/nw*nw); const wH = Math.min(h, portrait ? h/nh*nh : w/nw*nh); @@ -40,6 +38,7 @@ function imageMaskResize() { c.style.maxHeight = '100%'; c.style.objectFit = 'contain'; }); - } - - onUiUpdate(() => imageMaskResize()); +} + +onUiUpdate(imageMaskResize); +window.addEventListener( 'resize', imageMaskResize); diff --git a/javascript/imageParams.js b/javascript/imageParams.js index 67404a89b..64aee93b7 100644 --- a/javascript/imageParams.js +++ b/javascript/imageParams.js @@ -1,7 +1,6 @@ window.onload = (function(){ window.addEventListener('drop', e => { const target = e.composedPath()[0]; - const idx = selected_gallery_index(); if (target.placeholder.indexOf("Prompt") == -1) return; let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image"; diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 3deffa9be..32066ab8f 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -57,7 +57,7 @@ function modalImageSwitch(offset) { }) if (result != -1) { - nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)] + var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)] nextButton.click() const modalImage = gradioApp().getElementById("modalImage"); const modal = gradioApp().getElementById("lightboxModal"); @@ -144,15 +144,11 @@ function setupImageForLightbox(e) { } function modalZoomSet(modalImage, enable) { - if (enable) { - modalImage.classList.add('modalImageFullscreen'); - } else { - modalImage.classList.remove('modalImageFullscreen'); - } + if(modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable); } function modalZoomToggle(event) { - modalImage = gradioApp().getElementById("modalImage"); + var modalImage = gradioApp().getElementById("modalImage"); modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen')) event.stopPropagation() } @@ -179,7 +175,7 @@ function galleryImageHandler(e) { } onUiUpdate(function() { - 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); } diff --git a/javascript/localization.js b/javascript/localization.js index 1a5a1dbb6..e1ffa271d 100644 --- a/javascript/localization.js +++ b/javascript/localization.js @@ -35,11 +35,11 @@ function canBeTranslated(node, text){ if(! text) return false; if(! node.parentElement) return false; - parentType = node.parentElement.nodeName + var parentType = node.parentElement.nodeName if(parentType=='SCRIPT' || parentType=='STYLE' || parentType=='TEXTAREA') return false; if (parentType=='OPTION' || parentType=='SPAN'){ - pnode = node + var pnode = node for(var level=0; level<4; level++){ pnode = pnode.parentElement if(! pnode) break; @@ -69,7 +69,7 @@ function getTranslation(text){ } function processTextNode(node){ - text = node.textContent.trim() + var text = node.textContent.trim() if(! canBeTranslated(node, text)) return @@ -105,7 +105,7 @@ function processNode(node){ } function dumpTranslations(){ - dumped = {} + var dumped = {} if (localization.rtl) { dumped.rtl = true } @@ -151,7 +151,7 @@ document.addEventListener("DOMContentLoaded", function() { }) function download_localization() { - text = JSON.stringify(dumpTranslations(), null, 4) + var text = JSON.stringify(dumpTranslations(), null, 4) var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); diff --git a/javascript/notification.js b/javascript/notification.js index 8ddd4c5d9..83fce1f86 100644 --- a/javascript/notification.js +++ b/javascript/notification.js @@ -2,15 +2,15 @@ let lastHeadImg = null; -notificationButton = null +let notificationButton = null; onUiUpdate(function(){ if(notificationButton == null){ notificationButton = gradioApp().getElementById('request_notifications') if(notificationButton != null){ - notificationButton.addEventListener('click', function (evt) { - Notification.requestPermission(); + notificationButton.addEventListener('click', () => { + void Notification.requestPermission(); },true); } } diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 23bbf2984..8d2c34924 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -1,16 +1,15 @@ // code related to showing and updating progressbar shown as the image is being made -function rememberGallerySelection(id_gallery){ +function rememberGallerySelection(){ } -function getGallerySelectedIndex(id_gallery){ +function getGallerySelectedIndex(){ } function request(url, data, handler, errorHandler){ var xhr = new XMLHttpRequest(); - var url = url; xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { @@ -107,7 +106,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre divProgress.style.width = rect.width + "px"; } - progressText = "" + let progressText = "" divInner.style.width = ((res.progress || 0) * 100.0) + '%' divInner.style.background = res.progress ? "" : "transparent" diff --git a/javascript/ui.js b/javascript/ui.js index bfe315254..b63b84b21 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -1,7 +1,7 @@ // various functions for interaction with ui.py not large enough to warrant putting them in separate files function set_theme(theme){ - gradioURL = window.location.href + var gradioURL = window.location.href if (!gradioURL.includes('?__theme=')) { window.location.replace(gradioURL + '?__theme=' + theme); } @@ -47,7 +47,7 @@ function extract_image_from_gallery(gallery){ return [gallery[0]]; } - index = selected_gallery_index() + var index = selected_gallery_index() if (index < 0 || index >= gallery.length){ // Use the first image in the gallery as the default @@ -58,7 +58,7 @@ function extract_image_from_gallery(gallery){ } function args_to_array(args){ - res = [] + var res = [] for(var i=0;i