images history improvement

javascript/images_history.js

-function init_images_history(){ 
-	if (gradioApp().getElementById('txt2img_images_history_first_page') == null) {
-		setTimeout(init_images_history, 1000)
-	} else {
-		tab_list = ["txt2img", "img2img"]
-		for (i in tab_list){
-			tab = tab_list[i]
-			gradioApp().getElementById(tab + "_images_history_first_page").click()
-			$(gradioApp().getElementById(tab + '_images_history')).addClass("images_history_gallery")
-			item = $(gradioApp().getElementById(tab + '_images_history_set_index'))
-			item.addClass("images_history_set_index")
-			item.hide()
-		}		
-	}
-	
+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(){
+    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 = []
+        buttons.forEach(function(e){
+            if (e.style.display == "none"){
+                hidden_list.push(i)
+            }
+            i += 1
+        })
+        if (hidden_list.length > 0){
+            setTimeout(images_history_hide_buttons, 10, hidden_list, gallery)
+        }
+        
+    }    
+    images_history_set_image_info(this) 
+
 }
-setTimeout(init_images_history, 1000)
 onUiUpdate(function(){
-    fullImg_preview = gradioApp().querySelectorAll('#txt2img_images_history img.w-full')
-        if(fullImg_preview.length > 0){
-	    	fullImg_preview.forEach(set_history_index_from_img);
-    }
-    fullImg_preview = gradioApp().querySelectorAll('#img2img_images_history img.w-full')
-        if(fullImg_preview.length > 0){
-	    	fullImg_preview.forEach(set_history_index_from_img);
+    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)
+         });
     }
 })
+function images_history_hide_buttons(hidden_list, gallery){
+    buttons = gallery.querySelectorAll(".gallery-item")
+    num = 0
+    buttons.forEach(function(e){
+        if (e.style.display == "none"){
+            num += 1
+        }
+    })
+    if (num == hidden_list.length){
+        setTimeout(images_history_hide_buttons, 10, hidden_list, gallery)
+    } 
+    for( i in hidden_list){
+        buttons[hidden_list[i]].style.display = "none"
+    }    
+}
 
-function set_history_gallery_index(item){
-	buttons = item.find(".gallery-item")
-	// alert(item.attr("id") + " " + buttons.length)
-	index = -1
-	i = 0
-	buttons.each(function(){
-		if($(this).hasClass("!ring-2")){ index = i }
-		i += 1
-	})
-	if (index == -1){
-		setTimeout(set_history_gallery_index, 10, item)     
-	} else {
-		item = item.find(".images_history_set_index").first()
-    	item.attr("img_index", index)
-    	item.click()
-	}
+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
+    buttons.forEach(function(e){
+        if(e==button){index = i}
+        if(e.style.display != "none"){
+            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()
 }
-function set_history_index_from_img(e){
-    if(e && e.parentElement.tagName == 'BUTTON'){
-    	bnt = $(e).parent()
-    	if (bnt.hasClass("transform")){
-    		bnt.off("click").on("click",function(){
-    		set_history_gallery_index($(this).parents(".images_history_gallery").first())  
-     		})
-    	} else {
-    		bnt.off("mousedown").on("mousedown", function(){
-    		set_history_gallery_index($(this).parents(".images_history_gallery").first())  
-    		})
 
-		}  		
-    }
+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]
 }
-function images_history_get_current_img(is_image2image, image_path, files){
-	head = is_image2image?"img2img":"txt2img"
-	s =  $(gradioApp().getElementById(head + '_images_history_set_index')).attr("img_index")
-	return [s, 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 = []
+    tab.querySelectorAll(".gallery-item").forEach(function(e){
+        if (e.style.display != 'none'){
+            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) 
+    } 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]
+        } else {
+            btn = buttons[image_index + 1]           
+        }    
+        setTimeout(function(btn){btn.click()}, 30, btn)
+    }  
+    
+    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")
+    buttons.forEach(function(elem) {
+         elem.style.display = 'block'
+    })
+    return [img_path, page_index, image_index, tabname]
+}

style.css

@@ -463,3 +463,6 @@ input[type="range"]{
     max-width: 32em;
     padding: 0;
 }
+.images-history-hidden{
+    display: none;
+}
\ No newline at end of file