CoolFace
Apppublic

SD-online/Fooocus-Docker

sourceHugging Facegpl-3.0updated 3y agoView on Hugging Face
2likes
contextMenus.js167 linesDownload Raw Back to javascript
1// based on https://github.com/AUTOMATIC1111/stable-diffusion-webui/blob/v1.6.0/javascript/contextMenus.js2 3var contextMenuInit = function() {4    let eventListenerApplied = false;5    let menuSpecs = new Map();6 7    const uid = function() {8        return Date.now().toString(36) + Math.random().toString(36).substring(2);9    };10 11    function showContextMenu(event, element, menuEntries) {12        let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;13        let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;14 15        let oldMenu = gradioApp().querySelector('#context-menu');16        if (oldMenu) {17            oldMenu.remove();18        }19 20        let baseStyle = window.getComputedStyle(gradioApp().querySelector('button.selected'));21 22        const contextMenu = document.createElement('nav');23        contextMenu.id = "context-menu";24        contextMenu.style.background = baseStyle.background;25        contextMenu.style.color = baseStyle.color;26        contextMenu.style.fontFamily = baseStyle.fontFamily;27        contextMenu.style.top = posy + 'px';28        contextMenu.style.left = posx + 'px';29 30        const contextMenuList = document.createElement('ul');31        contextMenuList.className = 'context-menu-items';32        contextMenu.append(contextMenuList);33 34        menuEntries.forEach(function(entry) {35            let contextMenuEntry = document.createElement('a');36            contextMenuEntry.innerHTML = entry['name'];37            contextMenuEntry.addEventListener("click", function() {38                entry['func']();39            });40            contextMenuList.append(contextMenuEntry);41 42        });43 44        gradioApp().appendChild(contextMenu);45 46        let menuWidth = contextMenu.offsetWidth + 4;47        let menuHeight = contextMenu.offsetHeight + 4;48 49        let windowWidth = window.innerWidth;50        let windowHeight = window.innerHeight;51 52        if ((windowWidth - posx) < menuWidth) {53            contextMenu.style.left = windowWidth - menuWidth + "px";54        }55 56        if ((windowHeight - posy) < menuHeight) {57            contextMenu.style.top = windowHeight - menuHeight + "px";58        }59 60    }61 62    function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {63 64        var currentItems = menuSpecs.get(targetElementSelector);65 66        if (!currentItems) {67            currentItems = [];68            menuSpecs.set(targetElementSelector, currentItems);69        }70        let newItem = {71            id: targetElementSelector + '_' + uid(),72            name: entryName,73            func: entryFunction,74            isNew: true75        };76 77        currentItems.push(newItem);78        return newItem['id'];79    }80 81    function removeContextMenuOption(uid) {82        menuSpecs.forEach(function(v) {83            let index = -1;84            v.forEach(function(e, ei) {85                if (e['id'] == uid) {86                    index = ei;87                }88            });89            if (index >= 0) {90                v.splice(index, 1);91            }92        });93    }94 95    function addContextMenuEventListener() {96        if (eventListenerApplied) {97            return;98        }99        gradioApp().addEventListener("click", function(e) {100            if (!e.isTrusted) {101                return;102            }103 104            let oldMenu = gradioApp().querySelector('#context-menu');105            if (oldMenu) {106                oldMenu.remove();107            }108        });109        gradioApp().addEventListener("contextmenu", function(e) {110            let oldMenu = gradioApp().querySelector('#context-menu');111            if (oldMenu) {112                oldMenu.remove();113            }114            menuSpecs.forEach(function(v, k) {115                if (e.composedPath()[0].matches(k)) {116                    showContextMenu(e, e.composedPath()[0], v);117                    e.preventDefault();118                }119            });120        });121        eventListenerApplied = true;122 123    }124 125    return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];126};127 128var initResponse = contextMenuInit();129var appendContextMenuOption = initResponse[0];130var removeContextMenuOption = initResponse[1];131var addContextMenuEventListener = initResponse[2];132 133let cancelGenerateForever = function() {134    clearInterval(window.generateOnRepeatInterval);135};136 137(function() {138    //Start example Context Menu Items139    let generateOnRepeat = function(genbuttonid, interruptbuttonid) {140        let genbutton = gradioApp().querySelector(genbuttonid);141        let interruptbutton = gradioApp().querySelector(interruptbuttonid);142        if (!interruptbutton.offsetParent) {143            genbutton.click();144        }145        clearInterval(window.generateOnRepeatInterval);146        window.generateOnRepeatInterval = setInterval(function() {147            if (!interruptbutton.offsetParent) {148                genbutton.click();149            }150        },151        500);152    };153 154    let generateOnRepeatForButtons = function() {155        generateOnRepeat('#generate_button', '#stop_button');156    };157    appendContextMenuOption('#generate_button', 'Generate forever', generateOnRepeatForButtons);158 159})();160//End example Context Menu Items161 162document.onreadystatechange = function () {163    if (document.readyState == "complete") {164        addContextMenuEventListener();165    }166};167