auto_sd_docker/javascript/contextMenus.js

contextMenuInit = function(){
  let eventListenerApplied=false;
  let menuSpecs = new Map();

  const uid = function(){
    return Date.now().toString(36) + Math.random().toString(36).substr(2);
  }

  function showContextMenu(event,element,menuEntries){
    let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; 

    let oldMenu = gradioApp().querySelector('#context-menu')
    if(oldMenu){
      oldMenu.remove()
    }

    let tabButton = uiCurrentTab
    let baseStyle = window.getComputedStyle(tabButton)

    const contextMenu = document.createElement('nav')
    contextMenu.id = "context-menu"
    contextMenu.style.background = baseStyle.background
    contextMenu.style.color = baseStyle.color
    contextMenu.style.fontFamily = baseStyle.fontFamily
    contextMenu.style.top = posy+'px'
    contextMenu.style.left = posx+'px'
    contextMenu.style.width = Math.min(window.innerWidth,400)+'px'

    const contextMenuList = document.createElement('ul')
    contextMenuList.className = 'context-menu-items';
    contextMenu.append(contextMenuList);

    menuEntries.forEach(function(entry){

      if(entry['isDynamicSubmenu']){
        let contextMenuEntry = document.createElement('span')
        contextMenuEntry.innerHTML = entry['name']
        contextMenuEntry.style.paddingLeft = '5px'
        contextMenuEntry.style.color = 'grey'
        contextMenuList.append(contextMenuEntry);

        entry['func']().forEach(function(innerEntry){
          let contextMenuEntry = document.createElement('a')
          contextMenuEntry.innerHTML = innerEntry['name']
          contextMenuEntry.addEventListener("click", function(e) {
            innerEntry['func']();
          })
          contextMenuList.append(contextMenuEntry);
        });

      }else{
        let contextMenuEntry = document.createElement('a')
        contextMenuEntry.innerHTML = entry['name']
        contextMenuEntry.addEventListener("click", function(e) {
          entry['func']();
        })
        contextMenuList.append(contextMenuEntry);
      }
    })

    gradioApp().getRootNode().appendChild(contextMenu)

    let menuWidth = contextMenu.offsetWidth + 4;
    let menuHeight = contextMenu.offsetHeight + 4;

    let windowWidth = window.innerWidth;
    let windowHeight = window.innerHeight;

    if ( (windowWidth - posx) < menuWidth ) {
      contextMenu.style.left = windowWidth - menuWidth + "px";
    }

    if ( (windowHeight - posy) < menuHeight ) {
      contextMenu.style.top = windowHeight - menuHeight + "px";
    }

  }

  function appendContextMenuOption(targetEmementSelector,entryName,entryFunction,isDynamicSubmenu=false,displayToggleFunc=null){
    
    currentItems = menuSpecs.get(targetEmementSelector)
    
    if(!currentItems){
      currentItems = []
      menuSpecs.set(targetEmementSelector,currentItems);
    }
    let newItem = {'id':targetEmementSelector+'_'+uid(), 
                   'name':entryName,
                   'func':entryFunction,
                   'isDynamicSubmenu':isDynamicSubmenu,
                   'displayToggleFunc':displayToggleFunc,
                   'isNew':true}

    currentItems.push(newItem)
    return newItem['id']
  }

  function removeContextMenuOption(uid){
    menuSpecs.forEach(function(v,k) {
      let index = -1
      v.forEach(function(e,ei){if(e['id']==uid){index=ei}})
      if(index>=0){
        v.splice(index, 1);
      }
    })
  }

  function addContextMenuEventListener(){
    if(eventListenerApplied){
      return;
    }
    gradioApp().addEventListener("click", function(e) {
      let source = e.composedPath()[0]
      console.log(source);
      if( source.id && source.id.indexOf('check_progress')>-1 ){
        return
      }
      
      let oldMenu = gradioApp().querySelector('#context-menu')
      if(oldMenu){
        oldMenu.remove()
      }
    });
    gradioApp().addEventListener("contextmenu", function(e) {
      let oldMenu = gradioApp().querySelector('#context-menu')
      if(oldMenu){
        oldMenu.remove()
      }
      menuSpecs.forEach(function(v,k) {
        if(e.composedPath()[0].matches(k)){
          showContextMenu(e,e.composedPath()[0],v)
          e.preventDefault()
          return
        }
      })
    });
    eventListenerApplied=true
  
  }

  return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]
}

initResponse = contextMenuInit();
appendContextMenuOption     = initResponse[0];
removeContextMenuOption     = initResponse[1];
addContextMenuEventListener = initResponse[2];

(function(){
  //Start example Context Menu Items
  let generateOnRepeat = function(genbuttonid,interruptbuttonid){
    let genbutton = gradioApp().querySelector(genbuttonid);
    let interruptbutton = gradioApp().querySelector(interruptbuttonid);
    if(!interruptbutton.offsetParent){
      genbutton.click();
    }
    clearInterval(window.generateOnRepeatInterval)
    window.generateOnRepeatInterval = setInterval(function(){
      if(!interruptbutton.offsetParent){
        genbutton.click();
      }
    },
    500)
  }

  appendContextMenuOption('#txt2img_generate','Generate forever',function(){
    generateOnRepeat('#txt2img_generate','#txt2img_interrupt');
  })
  appendContextMenuOption('#img2img_generate','Generate forever',function(){
    generateOnRepeat('#img2img_generate','#img2img_interrupt');
  })

  let cancelGenerateForever = function(){ 
    clearInterval(window.generateOnRepeatInterval) 
  }

  appendContextMenuOption('#txt2img_interrupt','Cancel generate forever',cancelGenerateForever)
  appendContextMenuOption('#txt2img_generate', 'Cancel generate forever',cancelGenerateForever)
  appendContextMenuOption('#img2img_interrupt','Cancel generate forever',cancelGenerateForever)
  appendContextMenuOption('#img2img_generate', 'Cancel generate forever',cancelGenerateForever)

  appendContextMenuOption('#roll','Roll three',
    function(){ 
      let rollbutton = get_uiCurrentTabContent().querySelector('#roll');
      setTimeout(function(){rollbutton.click()},100)
      setTimeout(function(){rollbutton.click()},200)
      setTimeout(function(){rollbutton.click()},300)
  })

  function truncate(input,len) {
     if (input.length > len) {
        return input.substring(0, len) + '...';
     }
     return input;
  };

  appendContextMenuOption('#txt2img_prompt  textarea','Prior prompts',
    function(){
      let l=[];
      let n =0;
      (Storage['promptHistory'] || []).forEach(function(prompt){
        if(n>10){
          return;
        }
        l.push({'name':truncate(prompt,20),'func':function(){ get_uiCurrentTabContent().querySelector('#txt2img_prompt  textarea').value = prompt }},)
      })
      return l;
    },
    true
  )
})();
//End example Context Menu Items

onUiUpdate(function(){
  addContextMenuEventListener()
  if(window.window.getLastGenerationArgs){
    let priorPrompts = Storage['promptHistory'] || [];
    let lastPrompt = window.getLastGenerationArgs()[0];
    if( priorPrompts[priorPrompts.length - 1] !=  lastPrompt){
      priorPrompts.push(lastPrompt)
    }
    Storage['promptHistory'] = priorPrompts
  }
});