_prompt - A pure JavaScript prompt modal

lib.modal.js

/*!
 * _prompt - A pure JavaScript prompt modal v1.0
 * https://gist.github.com/spin0us/0fbfe6b0d2cca8a0efca2b67c14b3876
 *
 * Author: Spin0us
 *
 * Date: 2022-03-30
 */
'use strict';
const _prompt = function(args){
    const fieldIdentifier="promptField65445",
          elementIdentifier=fieldIdentifier+"_wrapper",
          options=Object.assign({},{title:"",type:"text",value:"",placeholder:"",buttonApply:"OK",callback:null},args);
    // Define select option sort function
    const sortSelect=function(selElem){
        var tmpAry=new Array();
        for(var i=0;i<selElem.options.length;i++){
            tmpAry[i]=new Array();
            tmpAry[i][0]=selElem.options[i].text;
            tmpAry[i][1]=selElem.options[i].value;
        }
        tmpAry.sort();
        while(selElem.options.length>0)selElem.options[0]=null;
        for(var i=0;i<tmpAry.length;i++){
            var op=new Option(tmpAry[i][0],tmpAry[i][1]);
            selElem.options[i]=op;
        }
        return;
    };
    // Create prompt div element if not already exists
    if(document.querySelector("#"+elementIdentifier)===null){
        let w = document.createElement("div"),
            c = document.createElement("div");
        w.id = elementIdentifier;
        w.style.display = "none";
        w.appendChild(c);
        document.body.appendChild(w);
    }
    const wrapper=document.querySelector("#"+elementIdentifier),
          content=document.querySelector("#"+elementIdentifier+">div");
    // Apply style
    if(!wrapper.dataset.init || wrapper.dataset.init!="done"){
        const styleSheet = document.createElement("style")
        styleSheet.type = "text/css";
        styleSheet.innerHTML = `
#${elementIdentifier} {
    position:fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    margin:0px;
    padding:0px;
    z-index:9000;
    background-color:rgba(0,0,0,0.875);
    justify-content:center;
    align-items:center;
    font-size:12px;
    font-family:verdana;
}
#${elementIdentifier}>div {
    background-color:rgb(255,255,255);
    margin:0px;
    padding:1rem;
    display:grid;
    grid-template-columns:auto;
    gap:0.5rem;
    border-radius:5px;
}
#${elementIdentifier}>p { color:#888; font-style:italic; }
#${elementIdentifier}>div input,
#${elementIdentifier}>div textarea { color:#555; padding:.25rem .5rem; font:normal 12px verdana; }
`;
        document.head.appendChild(styleSheet);
        wrapper.dataset.init = "done";
        wrapper.onclick=function(event){
            if(event.target.nodeName=="DIV" && event.target.id==elementIdentifier) wrapper.style.display="none";
        };
    }
    wrapper.style.display="flex";
    // Remove existing content
    while(content.firstChild) content.removeChild(content.firstChild);
    let elm = null;
    // Add title
    if(options.title && options.title!=""){
        elm=document.createElement("strong");
        elm.innerHTML=options.title;
        content.appendChild(elm);
    }
    // Add some text if needed
    if(options.text && options.text!=""){
        elm=document.createElement("p");
        elm.innerHTML=options.text;
        content.appendChild(elm);
    }
    // Add input text field
    if(options.type=='text'){
        elm=document.createElement("input");
        elm.type="text";
        elm.onkeypress=function(event){
            if(event.keyCode==13){
                this.nextSibling.click();
                return true;
            }
        };
    }
    // Add textarea
    if(options.type=='textarea'){
        elm=document.createElement("textarea");
    }
    // Add select
    if(options.type=='select' && options.options){
        elm=document.createElement("select");
        for(let i in options.options){
            let opt=document.createElement("option");
            opt.value=i;
            opt.innerHTML=options.options[i];
            elm.appendChild(opt);
        }
        sortSelect(elm);
    }
    // Add checkbox
    if(options.type=='checkbox'){
        let values=options.value.split(',');
        for(let name in values){
            let container=document.createElement("p");
            container.style.cssText="margin:0;";
            elm=document.createElement("input");
            elm.type="checkbox";
            elm.value=values[name];
            elm.id=fieldIdentifier+"_chkbx-"+values[name];
            elm.style.marginRight = '.5rem';
            container.appendChild(elm);
            elm=document.createElement("label");
            elm.htmlFor=fieldIdentifier+"_chkbx-"+values[name];
            elm.appendChild(document.createTextNode(values[name]));
            container.appendChild(elm);
            content.appendChild(container);
        }
        elm=document.createElement("input");
        elm.type="hidden";
        elm.value=options.value;
    }
    elm.style.cssText="resize:none;width:400px;";
    elm.id=fieldIdentifier;
    elm.value=options.value;
    elm.placeholder=options.placeholder;
    content.appendChild(elm);
    if(elm.select) elm.select();
    elm=document.createElement("button");
    elm.innerHTML=options.buttonApply;
    elm.onclick=function(){
        if(options.callback!==null){
            if(options.type=='checkbox'){
                let elms=document.querySelectorAll('[id^='+fieldIdentifier+'_chkbx-]'),selected=[];
                for(let i in elms) if(elms[i].checked) selected.push(elms[i].value);
                this.previousSibling.value=selected.join(',');
            }
            options.callback(this.previousSibling.value);
            wrapper.style.display="none";
        }
    };
    content.appendChild(elm);
};