arlet-alert/arlet-alert.js

Un componente de alertas personalizables con soporte para Bootstrap Icons.

class ArletAlert{constructor(e){this.container=e;this.alert=null;this.preventClose=false}evitarCierre(){this.preventClose=true}permitirCierre(){this.preventClose=false}Alerta({titulo:e="",texto:t="",tipo:l="warning",estilo:r="",icono:a=false,backgroundColor:i=false,AlertaId:o="arlet-alert-child",AlertaClass:s="arlet-alert-container-child",inputs:c=[],cerrarAutomatico:n=false,tiempo:d=3e3,botonCancelar:f=false,botonAceptar:u=false,textoBotonAceptar:h="Aceptar",textoBotonCancelar:$="Cancelar",colorBotonAceptar:p="#007bff",colorBotonCancelar:b="#dc3545",colorTextoBotonAceptar:v="#fff",colorTextoBotonCancelar:m="#fff",callbackAceptar:_=()=>{},callbackCancelar:y=()=>{}}){this.cerrar();const k=["success","error","warning","info","form","question","confirm","dark","blur-dark","custom"];if(!k.includes(l)){l="warning"}if(i){l="custom"}let x="";if(c.length>0){x=`<div class="form-container-arlet">`;c.forEach(e=>{x+=`<div class="form-group-arlet">`;let t=e.label||false;let l=e.textlabel||"";let r=e.class||"form-control-arlet";let a=e.id||"input"+Math.floor(Math.random()*1e3);let i=e.type||"text";let o=e.formType||"input";let s=e.placeholder||"";let c=e.required||false;let n=e.autofocus||false;let d=e.value||"";let f=e.disabled||false;let u=e.readonly||false;let h=e.options||[];let $=e.checked||false;if(t){x+=`<label for="${a}" class="form-label-arlet">${l}</label>`}if(o==="input"){x+=`<input type="${i}" class="${r}" id="${a}" placeholder="${s}" ${c?"required":""} ${n?"autofocus":""} ${d?'value="'+d+'"':""} ${f?"disabled":""} ${u?"readonly":""} ${$?"checked":""} />`}if(o==="select"){x+=`<select class="${r}" id="${a}" ${c?"required":""} ${n?"autofocus":""} ${f?"disabled":""}>`;e.options.forEach(e=>{x+=`<option value="${e.value}" ${e.value===d?"selected":""}>${e.text}</option>`});x+=`</select>`}if(o==="textarea"){x+=`<textarea class="${r}" id="${a}" placeholder="${s}" ${c?"required":""} ${n?"autofocus":""} ${f?"disabled":""} ${u?"readonly":""}>${d}</textarea>`}x+=`</div>`});x+=`</div>`}this.alert=document.createElement("div");this.alert.classList.add("arlet-alert-container",l+"-type","fade-in",r+"-style");this.alert.innerHTML=`
    <div class="arlet-alert ${s}" id="${o}" ${i?'style="background-color:'+i+'"':""}>
        ${a?`<div class="arlet-alert__icon"><i class="bi ${this.getIcono(a)}"></i></div>`:""}
        <div class="arlet-alert__text">
            <p class="arlet-alert__title">${e}</p>
            <p class="arlet-alert__message">${t}</p>
            ${x}
            <div class="arlet-alert__buttons">
                ${u?`<button class="arlet-alert__accept">${h}</button>`:""}
                ${f?`<button class="arlet-alert__cancel">${$}</button>`:""}
            </div>
        </div>
        ${c.length===0?`<button class="arlet-alert__close" id="closeAlert">
            <i class="bi bi-x"></i>
        </button>`:""}
    </div>
`;this.container.appendChild(this.alert);const C=this.alert.querySelector("[autofocus]");if(C){C.focus()}if(u){const g=this.alert.querySelector(".arlet-alert__accept");g.style.backgroundColor=p;g.style.color=v;g.addEventListener("click",()=>{let l=true;c.forEach(e=>{const t=this.alert.querySelector(`#${e.id}`);if(t&&!t.disabled&&!t.readonly){if(e.required){if(t.type==="checkbox"&&!t.checked||t.type==="number"&&t.value===""||t.value.trim()===""){l=false;t.classList.add("error")}else{t.classList.remove("error")}}}});if(l){_();if(!this.preventClose){this.cerrar()}}})}if(f){const q=this.alert.querySelector(".arlet-alert__cancel");q.style.backgroundColor=b;q.style.color=m;q.addEventListener("click",()=>{y();this.cerrar()})}if(n){setTimeout(()=>{this.cerrar()},d)}if(c.length===0){this.alert.querySelector(".arlet-alert__close").addEventListener("click",()=>this.cerrar())}}getIcono(e){const t={success:"bi-check-circle-fill",error:"bi-x-circle-fill",warning:"bi-exclamation-triangle-fill",info:"bi-info-circle-fill",form:"bi-file-earmark-text",question:"bi-question-circle-fill"};return t[e]||e}cerrar(e=null){if(this.alert){this.alert.classList.add("fade-out");this.alert.addEventListener("animationend",()=>{if(this.alert){this.alert.remove();this.alert=null;if(e)e()}})}}}