diff options
Diffstat (limited to 'javascript/images_history.js')
| -rw-r--r-- | javascript/images_history.js | 222 |
1 files changed, 146 insertions, 76 deletions
diff --git a/javascript/images_history.js b/javascript/images_history.js index d62eb181..c9a63166 100644 --- a/javascript/images_history.js +++ b/javascript/images_history.js @@ -1,122 +1,192 @@ -images_history_tab_list = ["txt2img", "img2img", "extras"] -function images_history_init(){ - if (gradioApp().getElementById('txt2img_images_history_first_page') == null) { - setTimeout(images_history_init, 500) - } else { - for (i in images_history_tab_list ){ - tab = images_history_tab_list[i] - gradioApp().getElementById(tab + '_images_history').classList.add("images_history_gallery") - gradioApp().getElementById(tab + '_images_history_set_index').classList.add("images_history_set_index") - - } - gradioApp().getElementById("txt2img_images_history_first_page").click() - } -} -setTimeout(images_history_init, 500) -var images_history_button_actions = function(){ +var images_history_click_image = function(){ if (!this.classList.contains("transform")){ - gallery = this.parentElement - while(!gallery.classList.contains("images_history_gallery")){gallery = gallery.parentElement} - buttons = gallery.querySelectorAll(".gallery-item") - i = 0 - hidden_list = [] + var gallery = images_history_get_parent_by_class(this, "images_history_cantainor"); + var buttons = gallery.querySelectorAll(".gallery-item"); + var i = 0; + var hidden_list = []; buttons.forEach(function(e){ if (e.style.display == "none"){ - hidden_list.push(i) + hidden_list.push(i); } - i += 1 + i += 1; }) if (hidden_list.length > 0){ - setTimeout(images_history_hide_buttons, 10, hidden_list, gallery) - } - + setTimeout(images_history_hide_buttons, 10, hidden_list, gallery); + } } - images_history_set_image_info(this) + images_history_set_image_info(this); +} +var images_history_click_tab = function(){ + var tabs_box = gradioApp().getElementById("images_history_tab"); + if (!tabs_box.classList.contains(this.getAttribute("tabname"))) { + gradioApp().getElementById(this.getAttribute("tabname") + "_images_history_renew_page").click(); + tabs_box.classList.add(this.getAttribute("tabname")) + } } -onUiUpdate(function(){ - for (i in images_history_tab_list ){ - tab = images_history_tab_list[i] - buttons = gradioApp().querySelectorAll('#' + tab + '_images_history .gallery-item') - buttons.forEach(function(bnt){ - bnt.addEventListener('click', images_history_button_actions, true) - }); + +var images_history_close_full_view = function(){ + var box = images_history_get_parent_by_class(this, "images_history_cantainor"); + box.querySelector(".images_history_del_button").setAttribute("disabled", "disabled"); +} + +function images_history_get_parent_by_class(item, class_name){ + var parent = item.parentElement; + while(!parent.classList.contains(class_name)){ + parent = parent.parentElement; } -}) + return parent; +} + +function images_history_get_parent_by_tagname(item, tagname){ + var parent = item.parentElement; + tagname = tagname.toUpperCase() + while(parent.tagName != tagname){ + console.log(parent.tagName, tagname) + parent = parent.parentElement; + } + return parent; +} function images_history_hide_buttons(hidden_list, gallery){ - buttons = gallery.querySelectorAll(".gallery-item") - num = 0 + var buttons = gallery.querySelectorAll(".gallery-item"); + var num = 0; buttons.forEach(function(e){ if (e.style.display == "none"){ - num += 1 + num += 1; } }) if (num == hidden_list.length){ - setTimeout(images_history_hide_buttons, 10, hidden_list, gallery) + setTimeout(images_history_hide_buttons, 10, hidden_list, gallery); } for( i in hidden_list){ - buttons[hidden_list[i]].style.display = "none" + buttons[hidden_list[i]].style.display = "none"; } } function images_history_set_image_info(button){ - item = button.parentElement - while(item.tagName != "DIV"){item = item.parentElement} - buttons = item.querySelectorAll(".gallery-item") - index = -1 - i = 0 + var buttons = images_history_get_parent_by_tagname(button, "DIV").querySelectorAll(".gallery-item"); + var index = -1; + var i = 0; buttons.forEach(function(e){ - if(e==button){index = i} + if(e == button){ + index = i; + } if(e.style.display != "none"){ - i += 1 + i += 1; } }) - gallery = button.parentElement - while(!gallery.classList.contains("images_history_gallery")){gallery = gallery.parentElement} - set_btn = gallery.querySelector(".images_history_set_index") - set_btn.setAttribute("img_index", index) - set_btn.click() + var gallery = images_history_get_parent_by_class(button, "images_history_cantainor"); + var set_btn = gallery.querySelector(".images_history_set_index"); + set_btn.setAttribute("img_index", index); + set_btn.click(); + gradioApp().querySelectorAll(".images_history_del_button").forEach(function(btn){ + btn.setAttribute('disabled','disabled'); + }) + } function images_history_get_current_img(tabname, image_path, files){ - s = gradioApp().getElementById(tabname + '_images_history_set_index').getAttribute("img_index") - return [s, image_path, files] + return [ + gradioApp().getElementById(tabname + '_images_history_set_index').getAttribute("img_index"), + image_path, + files + ]; } function images_history_delete(tabname, img_path, img_file_name, page_index, filenames, image_index){ - image_index = parseInt(image_index) - tab = gradioApp().getElementById(tabname + '_images_history') - set_btn = tab.querySelector(".images_history_set_index") - buttons = [] + image_index = parseInt(image_index); + var tab = gradioApp().getElementById(tabname + '_images_history'); + var set_btn = tab.querySelector(".images_history_set_index"); + var buttons = []; tab.querySelectorAll(".gallery-item").forEach(function(e){ if (e.style.display != 'none'){ - buttons.push(e) + buttons.push(e); } - }) + }); - img_num = buttons.length / 2 - if (img_num == 1){ - setTimeout(function(tabname){ - gradioApp().getElementById(tabname + '_images_history_renew_page').click() - }, 30, tabname) + var img_num = buttons.length / 2; + if (img_num === 1){ + setTimeout(function(tabname){ + gradioApp().getElementById(tabname + '_images_history_renew_page').click(); + }, 30, tabname); } else { - buttons[image_index].style.display = 'none' - buttons[image_index + img_num].style.display = 'none' - if (image_index >= img_num - 1){ - console.log(buttons.length, img_num) - btn = buttons[img_num - 2] + buttons[image_index].style.display = 'none'; + buttons[image_index + img_num].style.display = 'none'; + var bnt; + if (image_index >= img_num - 1){ + btn = buttons[img_num - 2]; } else { - btn = buttons[image_index + 1] + btn = buttons[image_index + 1] ; } - setTimeout(function(btn){btn.click()}, 30, btn) + setTimeout(function(btn){btn.click()}, 30, btn); } - return [tabname, img_path, img_file_name, page_index, filenames, image_index] + return [tabname, img_path, img_file_name, page_index, filenames, image_index]; } function images_history_turnpage(img_path, page_index, image_index, tabname){ - buttons = gradioApp().getElementById(tabname + '_images_history').querySelectorAll(".gallery-item") + var buttons = gradioApp().getElementById(tabname + '_images_history').querySelectorAll(".gallery-item"); buttons.forEach(function(elem) { - elem.style.display = 'block' + elem.style.display = 'block'; }) - return [img_path, page_index, image_index, tabname] + return [img_path, page_index, image_index, tabname]; } + +function images_history_enable_del_buttons(){ + gradioApp().querySelectorAll(".images_history_del_button").forEach(function(btn){ + btn.removeAttribute('disabled'); + }) +} + +function images_history_init(){ + if (gradioApp().getElementById('txt2img_images_history_renew_page') == null) { + setTimeout(images_history_init, 500); + } else { + for (var i in images_history_tab_list ){ + tab = images_history_tab_list[i]; + gradioApp().getElementById(tab + '_images_history').classList.add("images_history_cantainor"); + gradioApp().getElementById(tab + '_images_history_set_index').classList.add("images_history_set_index"); + gradioApp().getElementById(tab + '_images_history_del_button').classList.add("images_history_del_button"); + gradioApp().getElementById(tab + '_images_history_gallery').classList.add("images_history_gallery"); + + + } + var tabs_box = gradioApp().getElementById("tab_images_history").querySelector("div").querySelector("div").querySelector("div"); + tabs_box.setAttribute("id", "images_history_tab"); + tabs_box.classList.add(images_history_tab_list[0]); + gradioApp().getElementById("txt2img_images_history_renew_page").click(); + } +} + +var images_history_tab_list = ["txt2img", "img2img", "extras"]; +var images_history_start_flag = false; + +onUiUpdate(function(){ + var tab = gradioApp().getElementById("images_history_tab"); + if (tab) { + if (!images_history_start_flag){ + images_history_init(); + images_history_start_flag = true; + } + var tab_btns = gradioApp().getElementById("images_history_tab").querySelectorAll("button"); + for (var i in images_history_tab_list ){ + var buttons = gradioApp().querySelectorAll('#' + images_history_tab_list[i] + '_images_history .gallery-item'); + buttons.forEach(function(bnt){ + bnt.addEventListener('click', images_history_click_image, true); + }); + var tabname = images_history_tab_list[i] + tab_btns[i].setAttribute("tabname", tabname); + tab_btns[i].addEventListener('click', images_history_click_tab, true); + // var cls_btn = gradioApp().getElementById(tabname + '_images_history_gallery').querySelector("svg"); + // if (cls_btn){ + // cls_btn.addEventListener('click', images_history_close_full_view, false); + // } + // console.log(cls_btn, cls_btn.parentElement.parentElement) + // if (cls_btn) { + // cls_btn = images_history_get_parent_by_tagname(cls_btn, "BUTTON"); + // cls_btn.addEventListener('click', images_history_close_full_view, true); + // } + } + + } +}); + |