PortaleOrdiniGruppo/PortalStudio/portalstudio/modalBox.js

/* exported
    jsonConfirm createModal
*/
/**
 * ESEMPIO FUNZIONAMENTO MODALBOX (Guardare Portalstudio JS Funzioni : jsonConfirmAccessDenied, jsonImportE, jsonIExport)
 */

var css = `
	.bloccoDialogIE {
  background: #fff;
  min-height: 100px;
  min-width: 350px;
  box-shadow: 0px 0px 14px 2px rgb(0 0 0 / 39%);
  border-radius: 2px;
  border: 0px;
  padding: 0;
  font-family: Roboto;
  position: absolute;
  top: -100px;
  display: flex;
  flex-direction: column;
}
.flexBaseIE{
  flex: 1;
}

.iconIE {
  flex-direction: row;
  background-color: #00558d;
  color: white;
  text-align: center;
  text-transform: capitalize;
  vertical-align: middle;
  padding: 10px 0px;
}

.bodyAlertIE {
  flex: 1;
  text-align: center;
  font-size: 15px;
  margin: 20px;
}

.iconaDentroIE {
  color: white;
  font-size: 27px;
  height: 100%;
  width: 100%;
  text-align: center;
  flex: 0;
  vertical-align: middle;
  margin-right: .5em;
}

.buttonIE{
  flex: 0;
  font-family: Open Sans;
  font-weight: 400;
  font-size: 12px;
  /* display: inline-block; */
  color: #FFFFFF;
  padding: 4px 6px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  background-color: #333333;
  border: 0;
}

.buttonIE:hover{
  background-color: #504d4d; 
}
.buttonIE.S:hover{
  background-color: #1f879a; 
}

.footerIE {
  flex: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 10px;
  align-content: center;
  justify-content: center;
}

.buttonIE.S{
  background-color: #00A0BD; 
}

.hideIE{
  display:hidden;
}

.notAccepted{
  opacity: 0.6;
  pointer-events: none;
}

.testoRossoIE{
  font-weight: bold;
  color: darkred;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

.testoVerdeIE{
  font-weight: bold;
  color: green;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

#inputIE{
  margin: 1em 0em;
}
`;

let style = document.createElement("style");
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

function createModal(obj) {
  if (document.getElementById(obj.id)) {
    document.getElementById(obj.id).remove();
  } else if (document.getElementById("dialogAlert")) {
    document.getElementById("dialogAlert").remove();
  }
  let containerAlert = document.body;
  let dialog = document.createElement("dialog");
  dialog.classList.add("bloccoDialogIE");
  dialog.id = obj ? obj.id : "dialogAlert";
  let icon = document.createElement("div");
  icon.id = "icon";
  icon.classList.add("iconIE");
  let iconaDentro = document.createElement("span");
  iconaDentro.style.fontFamily = "icons8_win10";
  if (obj.tipologia == "alert") {
    iconaDentro.innerHTML = ""
  } else if (obj.tipologia == "error") {
    iconaDentro.innerHTML = ""
  } else {
    iconaDentro.innerHTML = obj.tipologia;
  }
  iconaDentro.id = "iconaDentro";
  iconaDentro.classList.add("iconaDentroIE");
  let head = document.createTextNode(obj.title);
  let body = document.createElement("div");
  body.innerHTML = obj.content;
  body.id = "bodyAlert";
  body.classList.add("bodyAlertIE");
  let footer = document.createElement("div");
  footer.id = "footer";
  footer.classList.add("footerIE");
  creationList(obj, footer);
  icon.appendChild(iconaDentro);
  icon.appendChild(head);
  dialog.appendChild(icon);
  dialog.appendChild(body);
  document.querySelector("style").appendChild(document.createTextNode("#"+obj.id+"{"+obj.ctmCss+"}"));
  dialog.appendChild(footer);
  dialog.addEventListener("close", obj.onCLose);
  containerAlert.appendChild(dialog);
  dialog.showModal();
}

function creationList(obj, appender){
  obj.button.forEach((obj) => {
    let footerBtn = document.createElement(obj.type);
    footerBtn.id = obj.id;
    document.querySelector("style").appendChild(document.createTextNode("#"+obj.id+"{"+obj.ctmCss+"}"));
    footerBtn.classList.add(obj.class);
    footerBtn.classList.remove(obj.classRM);
    footerBtn.textContent = obj.text;
    
    if (obj.action) {
      if (typeof obj.action === "function") {
        footerBtn.addEventListener("click", obj.action);
      }
    }
    appender.appendChild(footerBtn);
  });
}