From 4da60fd1c5fa1b93c6b8e11df10c19c21a1bffa8 Mon Sep 17 00:00:00 2001
From: Matteo Manzinello <matteo@manzinello.com>
Date: Fri, 3 May 2019 09:08:25 +0200
Subject: [PATCH] mostro al centro mailgo

---
 dist/mailgo.js | 36 ++++++++++++++++++++++++------------
 src/mailgo.js  | 36 ++++++++++++++++++++++++------------
 2 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/dist/mailgo.js b/dist/mailgo.js
index 9c03693..e8aa01b 100644
--- a/dist/mailgo.js
+++ b/dist/mailgo.js
@@ -2,12 +2,22 @@
 let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)');
 
 let styles = `
-    .mailgo-modal-container {
-      background: white;
-      color:red;
+    .mailgo-modal {
+      position:fixed;
+      top:0;
+      right:0;
+      bottom:0;
+      left:0;
+      display:none;
+    }
+    .mailgo-modal.is-active {
+      display:flex;
+      justify-content:center;
+      align-items:center;
     }
 `;
 
+// CSS
 let styleSheet = document.createElement("style");
 styleSheet.type = "text/css";
 styleSheet.innerText = styles;
@@ -16,27 +26,29 @@ document.head.appendChild(styleSheet);
 console.log("mailgo is WIP!");
 
 // attivo mailgo su tutti gli elementi
-mailgos.forEach(mailgo => {
-  let modalContainer = document.createElement("div");
-  modalContainer.className = "mailgo-modal-container";
+mailgos.forEach((mailgo, index) => {
   let modal = document.createElement("div");
   modal.className = "mailgo-modal";
+  modal.id = "mailgo-modal-" + index;
 
-  modalContainer.appendChild(modal);
-
-  let modalContent = document.createTextNode("mailgo");
+  let modalContent = document.createElement("div");
+  modalContent.className = "mailgo-modal-content";
 
   modal.appendChild(modalContent);
 
-  modalContainer.style.display = "none";
-  mailgo.parentNode.insertBefore(modalContainer, mailgo.nextSibling);
+  let text = document.createTextNode("mailgo");
+  modalContent.appendChild(text);
+
+  mailgo.parentNode.insertBefore(modal, mailgo.nextSibling);
 
   mailgo.addEventListener(
     "click",
     event => {
       // blocco l'esecuzione normale del mailto:
       event.preventDefault();
-      mailgo.nextElementSibling.style.display = "block";
+
+      // setto il modal come attivo
+      mailgo.nextElementSibling.classList.add("is-active");
     },
     false
   );
diff --git a/src/mailgo.js b/src/mailgo.js
index 9c03693..e8aa01b 100644
--- a/src/mailgo.js
+++ b/src/mailgo.js
@@ -2,12 +2,22 @@
 let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)');
 
 let styles = `
-    .mailgo-modal-container {
-      background: white;
-      color:red;
+    .mailgo-modal {
+      position:fixed;
+      top:0;
+      right:0;
+      bottom:0;
+      left:0;
+      display:none;
+    }
+    .mailgo-modal.is-active {
+      display:flex;
+      justify-content:center;
+      align-items:center;
     }
 `;
 
+// CSS
 let styleSheet = document.createElement("style");
 styleSheet.type = "text/css";
 styleSheet.innerText = styles;
@@ -16,27 +26,29 @@ document.head.appendChild(styleSheet);
 console.log("mailgo is WIP!");
 
 // attivo mailgo su tutti gli elementi
-mailgos.forEach(mailgo => {
-  let modalContainer = document.createElement("div");
-  modalContainer.className = "mailgo-modal-container";
+mailgos.forEach((mailgo, index) => {
   let modal = document.createElement("div");
   modal.className = "mailgo-modal";
+  modal.id = "mailgo-modal-" + index;
 
-  modalContainer.appendChild(modal);
-
-  let modalContent = document.createTextNode("mailgo");
+  let modalContent = document.createElement("div");
+  modalContent.className = "mailgo-modal-content";
 
   modal.appendChild(modalContent);
 
-  modalContainer.style.display = "none";
-  mailgo.parentNode.insertBefore(modalContainer, mailgo.nextSibling);
+  let text = document.createTextNode("mailgo");
+  modalContent.appendChild(text);
+
+  mailgo.parentNode.insertBefore(modal, mailgo.nextSibling);
 
   mailgo.addEventListener(
     "click",
     event => {
       // blocco l'esecuzione normale del mailto:
       event.preventDefault();
-      mailgo.nextElementSibling.style.display = "block";
+
+      // setto il modal come attivo
+      mailgo.nextElementSibling.classList.add("is-active");
     },
     false
   );