// Create by: Miguel Salinas Nicoletti
// Date: 2022-04-15
// Description: This file contains the functions to create the MSalert
"use strict";
class MSalert{
constructor(){
this.principalResponse = false;
this.principalOption = null;
let $this = this;
$(function(){
let styleContainer = document.createElement("div");
styleContainer.setAttribute("id", "MSalertStyleContainer");
styleContainer.setAttribute("style", "display: none;");
$("body").append(styleContainer);
$("#MSalertStyleContainer").append($this.cssPrincipal());
$("#MSalertStyleContainer").append($this.cssAlertas());
})
console.log("MSalert inicializado")
}
cssPrincipal(){
return `
`;
}
static closePrincipal(){
$("#MSalert").remove();
}
static confirmationPrincipal(confirm){
this.principalResponse = true;
this.principalOption = confirm;
this.closePrincipal();
}
static principal( datos2 = {}){
//limpiamos datos de confirmacion
this.principalResponse = false;
this.principalOption = null;
let datos = {
icon : datos2.icon,
iconColor: "#545454",
iconWidth: 120,
iconHeight: 120,
title : datos2.title,
description: datos2.description,
button:false,
extra:''
}
//comprobacion de datos ingresados
if(datos2.iconColor){
datos.iconColor = datos2.iconColor;
}
if(datos2.iconWidth){
datos.iconWidth = datos2.iconWidth;
}
if(datos2.iconHeight){
datos.iconHeight = datos2.iconHeight;
}
if(datos2.button){
datos.button = true;
}
if(datos2.extra){
datos.extra = datos2.extra;
}
// create te alert
//console.log('datos',datos)
let icono = this.icons(datos.icon,datos.iconColor,datos.iconWidth,datos.iconHeight)
$(function(){
// crear el item principal que se encuentra en el body
let alert = document.createElement("div");
alert.setAttribute("id", "MSalert");
alert.classList.add("MSalert-principal");
alert.classList.add("MSalert-principal-hide");
$("body").append(alert);
// crear item con la descripcion
let ventana = document.createElement("div");
ventana.setAttribute("id", "MSalert-principal-ventana");
ventana.classList.add("MSalert-principal-ventana");
$("#MSalert").append(ventana);
let content = `
${datos.title}
${datos.description}
${datos.extra ? `` : ''}
${datos.button
? `
`
: ``}
`
$("#MSalert-principal-ventana").append(content);
})
if(datos.button){
let $this = this;
return new Promise((resolve, reject) => {
let timer = setInterval(function(){
if($this.principalResponse){
clearInterval(timer)
resolve($this.principalOption)
}
},500)
});
}
}
static icons(name,color='#000',width=24,height=24){
let atributes1 = `fill="${color}"`;
let content = '';
switch(name){
case "gear": content = ``;break;
case "error" : content = `
`;break;
case "warning" : content = `
`; break;
case "success" : content = `
`;break;
}
return ``
}
cssAlertas(){
return `
`;
}
static alerta(info){
let datos = {
id : info.id,
position : info.position,
status : info.status,
text : info.text,
duration : 0,
}
if(info.duration == '' || info.duration < 2000){
datos.duration = '3000';
}else{
datos.duration = info.duration;
}
$(function(){
if($('#'+datos.id).length){
console.log("alerta",datos.id)
let element = $('#'+datos.id)
let posicion = element.position()
let width = element.width()
let height = element.height()
let tipo = element.prop('nodeName');
console.log('posicion',posicion)
console.log('width',width)
console.log('height',height)
console.log('tipo',tipo)
let posAbajo = {
top: posicion.top + height + 15,
left: posicion.left
}
let posArriba = {
top: posicion.top - (height*2) + 18,
left: posicion.left
}
let posDerecha = {
top: posicion.top + 7,
left: posicion.left + width + 8
}
if(tipo == "DIV"){
posAbajo.top = posAbajo.top + 40;
posArriba.top = posicion.top - 45;
posDerecha.left = posDerecha.left + 40;
}
//STYLE CONTROL POS
let marginTop = element.css("margin-top");
let marginLeft = element.css("margin-left");
let marginRight = element.css("margin-right");
let marginBottom = element.css("margin-bottom");
posArriba.top = posArriba.top + parseInt(marginTop);
// status colors
let color = "#fff";
let fontColor = "#000";
switch(datos.status){
case "success" :
color = "#32DE14"
fontColor = "#114B07"
; break;
case "warning" :
color = "#F1C40F"
fontColor = "#2B2B2B"
; break;
case "error" :
color = "#E74C3C";
fontColor = "#fff";
break;
}
// control de posicion
let posSelected = ''
switch(datos.position){
case 'down' : posSelected = posAbajo; break;
case 'up' : posSelected = posArriba; break;
case 'right' : posSelected = posDerecha; break;
}
let divAlerta = `
${datos.text}
`
$("body").append(divAlerta);
let timer = datos.duration
let contadorAnimation = setTimeout(function(){
$("#MSalert-"+datos.id).css("animation","fade-out 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both");
clearTimeout(contadorAnimation);
},timer-1000);
let contador = setTimeout(function(){
$("#MSalert-"+datos.id).remove();
clearTimeout(contador);
},timer);
}else{
console.error("MSalert: You must enter a valid ID!")
}
})
}
}
globalThis.MSalert = new MSalert();