aboutsummaryrefslogtreecommitdiff
path: root/javascript/images_history.js
blob: ac5834c7e39395f43d880ffff7aca59fd9c6adb9 (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
199
200
201
202
203
204
205
206
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, img_index, files){
    return [
        tabname, 
        gradioApp().getElementById(tabname + '_images_history_set_index').getAttribute("img_index"),         
        files
    ];
}

function images_history_delete(del_num, tabname, 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_file_name, page_index, filenames, image_index];
}

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

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);

            // this refreshes history upon tab switch
            // until the history is known to work well, which is not the case now, we do not do this at startup
            //tab_btns[i].addEventListener('click', images_history_click_tab);
        }    
        tabs_box.classList.add(images_history_tab_list[0]);

        // same as above, at page load-- load very fast now
        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);
            });

            // same as load_txt2img_button.click() above
            /*
            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 });

});