aboutsummaryrefslogtreecommitdiff
path: root/javascript/images_history.js
blob: 3a20056b92bacc354628074f887bee465a1b48a0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
var images_history_click_image = function(){
    if (!this.classList.contains("transform")){        
        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);
            }
            i += 1;
        })
        if (hidden_list.length > 0){
            setTimeout(images_history_hide_buttons, 10, hidden_list, gallery);
        }        
    }    
    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"))
    }                
}

function images_history_disabled_del(){
    gradioApp().querySelectorAll(".images_history_del_button").forEach(function(btn){
        btn.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){
    var buttons = gallery.querySelectorAll(".gallery-item");
    var 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 images_history_set_image_info(button){
    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.style.display != "none"){
            i += 1;
        }        
    });
    var gallery = images_history_get_parent_by_class(button, "images_history_cantainor");
    var set_btn = gallery.querySelector(".images_history_set_index");
    var curr_idx = set_btn.getAttribute("img_index", index);  
    if (curr_idx != index) {
        set_btn.setAttribute("img_index", index);        
        images_history_disabled_del();
    }
    set_btn.click();
    
}

function images_history_get_current_img(tabname, image_path, files){
    return [
        gradioApp().getElementById(tabname + '_images_history_set_index').getAttribute("img_index"), 
        image_path, 
        files
    ];
}

function images_history_delete(del_num, tabname, img_path, img_file_name, page_index, filenames, image_index){
    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);
        }
    });    
    var img_num = buttons.length / 2;
    if (img_num <= del_num){
        setTimeout(function(tabname){
            gradioApp().getElementById(tabname + '_images_history_renew_page').click();
        }, 30, tabname); 
    } else {
        var next_img  
        for (var i = 0; i < del_num; i++){
            if (image_index + i < image_index + img_num){
                buttons[image_index + i].style.display = 'none';
                buttons[image_index + img_num + 1].style.display = 'none';
                next_img = image_index + i + 1
            }
        }
        var bnt;
        if (next_img  >= img_num){
            btn = buttons[image_index - del_num];
        } else {            
            btn = buttons[next_img];          
        } 
        setTimeout(function(btn){btn.click()}, 30, btn);
    }
    images_history_disabled_del();  
    return [del_num, tabname, img_path, img_file_name, page_index, filenames, image_index];
}

function images_history_turnpage(img_path, page_index, image_index, tabname){
    var 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];
}

function images_history_enable_del_buttons(){
    gradioApp().querySelectorAll(".images_history_del_button").forEach(function(btn){
        btn.removeAttribute('disabled');
    })
}

function images_history_init(){ 
    var load_txt2img_button = gradioApp().getElementById('txt2img_images_history_renew_page')
    if (load_txt2img_button){        
        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");        
        var tab_btns = tabs_box.querySelectorAll("button");        
        for (var i in images_history_tab_list){               
            var tabname = images_history_tab_list[i]
            tab_btns[i].setAttribute("tabname", tabname);
            tab_btns[i].addEventListener('click', images_history_click_tab);
        }    
        tabs_box.classList.add(images_history_tab_list[0]);   
           load_txt2img_button.click();
    } else {
        setTimeout(images_history_init, 500);
    } 
}

var images_history_tab_list = ["txt2img", "img2img", "extras"];
setTimeout(images_history_init, 500);
document.addEventListener("DOMContentLoaded", function() {
    var mutationObserver = new MutationObserver(function(m){
        for (var i in images_history_tab_list ){
            let tabname = images_history_tab_list[i]
            var buttons = gradioApp().querySelectorAll('#' + tabname + '_images_history .gallery-item');
            buttons.forEach(function(bnt){    
                bnt.addEventListener('click', images_history_click_image, true);
            });
            var cls_btn = gradioApp().getElementById(tabname + '_images_history_gallery').querySelector("svg");
            if (cls_btn){
                cls_btn.addEventListener('click', function(){
                    gradioApp().getElementById(tabname + '_images_history_renew_page').click();
                }, false);
            }

        }     
    });
    mutationObserver.observe( gradioApp(), { childList:true, subtree:true });

});