var isPopMenuVisible=false;
class PopMenu{
constructor(event,isSearchable){
if(isPopMenuVisible)throw new Error("An existing menu is already being displayed");
this.div=AddElement(document.body,'div','left:'+event.pageX+'px;top:'+event.pageY+'px;');
this.div.className='popMenu';
this.div.style.maxHeight=(window.innerHeight-8)+'px';
this.xPos=event.pageX;
this.yPos=event.pageY;
this.firstTarget=event.target;
this.ticks=false;
this.length=0;
isPopMenuVisible=true;
this.handleClickOutside=this.handleClickOutside.bind(this);
document.addEventListener('mousedown',this.handleClickOutside);
event.myFlag=true;
event.stopPropagation();
if(isSearchable){
let searchDiv=AddElement(this.div,'div','');
searchDiv.className='popMenuSearch';
this.searchInput=AddElement(searchDiv,'input','');
this.searchInput.type='text';
this.searchInput.autocomplete='off';
this.searchInput.autocorrect='off';
this.searchInput.autocapitalize='off';
this.searchInput.spellcheck=false;
this.searchInput.placeholder='\uD83D\uDD0D';
this.searchClear=AddElement(searchDiv,'span','');
this.searchClear.className='popMenuSearchClear';
this.searchClear.textContent='\u2715';
this.searchClear.onclick=()=>{
this.searchInput.value='';
this.searchInput.dispatchEvent(new Event('input'));
this.searchInput.focus();
};
this.searchInput.oninput=()=>{
let text=this.searchInput.value.toLowerCase();
let hasText=text.length>0;
if(!this.sizeLocked){
this.div.style.minWidth=this.div.offsetWidth+'px';
this.div.style.minHeight=this.div.offsetHeight+'px';
this.sizeLocked=true;
}
this.searchClear.style.display=hasText ? 'block' : 'none';
for(let el of this.div.children){
if(el===searchDiv)continue;
if(el.tagName==='H1' || el.tagName==='HR')
el.style.display=hasText ? 'none' : '';
else if(el.tagName==='BUTTON')
el.style.display=(!hasText || el.textContent.toLowerCase().includes(text))? '' : 'none';
}
};
this.searchInput.focus()
}
}
handleClickOutside(event){
if(!event.myFlag && event.target!==this.div && !this.div.contains(event.target))this.close();
}
close(){
this.div.remove();
document.removeEventListener('mousedown',this.handleClickOutside);
isPopMenuVisible=false;
}
addItem(title,tick,callback){
let item=AddElement(this.div,'button','');
item.type='button';
item.innerHTML=title;
item.onclick=(event)=>{if(callback)callback(event);this.close();}
let xOverflow=this.xPos+this.div.offsetWidth-window.pageXOffset-window.innerWidth+4;
if(xOverflow>0)this.div.style.left=Math.max(window.pageXOffset+4,this.xPos-xOverflow)+'px';
let yOverflow=this.yPos+this.div.offsetHeight-window.pageYOffset-window.innerHeight+4;
if(yOverflow>0)this.div.style.top=Math.max(window.pageYOffset+4,this.yPos-yOverflow)+'px';
if(tick){
item.value=2;
this.ticks=true;
for(let b of this.div.querySelectorAll('button'))if(!b.value)b.value=1;
}else if(this.ticks){
item.value=1;
}
if(!callback)item.disabled=true;
this.length++;
}
addSectionTitle(title){
let item=AddElement(this.div,'h1','');
item.textContent=title;
let yOverflow=this.yPos+this.div.offsetHeight-window.pageYOffset-window.innerHeight+4;
if(yOverflow>0)this.div.style.top=Math.max(window.pageYOffset+4,this.yPos-yOverflow)+'px';
}
addSeparator(){
let item=AddElement(this.div,'hr','');
}
}
