avanti generazione del modal e funzione per copiare

dist/mailgo.js

@@ -2,6 +2,19 @@
 let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)');
 
 let styles = `
+
+    .mailgo-modal {
+      all: initial;
+      * {
+        all: unset;
+      }
+    }
+
+    .mailgo-title {
+      display: block;
+      margin-bottom: 16px;
+    }
+
     .mailgo-modal-background {
       position: absolute;
       top: 0;
@@ -27,7 +40,8 @@ let styles = `
     }
     .mailgo-modal-content {
       z-index: 1000;
-      width: 400px;
+      text-align: center;
+      width: 200px;
       background-color: #fff;
       border-radius: 6px;
       box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
@@ -35,6 +49,32 @@ let styles = `
       display: block;
       padding: 1.25rem;
     }
+    .mailgo-modal-content a {
+      display: block;
+      color: #4a4a4a;
+      padding: 10px;
+      border-radius: 4px;
+      text-decoration: none;
+    }
+    .mailgo-modal-content a:hover {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+    .mailgo-modal-content a.outlook {
+      color: rgba(0, 114, 198);
+    }
+    .mailgo-modal-content a.gmail {
+      color: rgba(212, 70, 56);
+    }
+    .mailgo-modal-content a.outlook:hover {
+      background-color: rgba(0, 114, 198, 0.08);
+    }
+    .mailgo-modal-content a.gmail:hover {
+      background-color: rgba(212, 70, 56, 0.08);
+    }
+    a.mailgo-copy {
+      margin-top: 10px;
+      padding: 16px 10px;
+    }
 `;
 
 // CSS
@@ -52,8 +92,6 @@ mailgos.forEach((mailgo, index) => {
     .split("mailto:")[1]
     .trim();
 
-  console.log(mail);
-
   if (!validateEmail(mail)) return;
 
   let url = new URL(mailgo.href);
@@ -76,11 +114,47 @@ mailgos.forEach((mailgo, index) => {
   modalContent.className = "mailgo-modal-content";
   modal.appendChild(modalContent);
 
+  // titolo (l'email)
   let strong = document.createElement("strong");
+  strong.className = "mailgo-title";
   let strongContent = document.createTextNode(mail);
   strong.appendChild(strongContent);
   modalContent.appendChild(strong);
 
+  // Gmail
+  let gmail = document.createElement("a");
+  gmail.href = "https://mail.google.com/mail?extsrc=mailto&url=" + mailgo.href;
+  gmail.classList.add("mailgo-open");
+  gmail.classList.add("gmail");
+  let gmailContent = document.createTextNode("open in Gmail");
+  gmail.appendChild(gmailContent);
+  modalContent.appendChild(gmail);
+
+  // Outlook
+  let outlook = document.createElement("a");
+  outlook.href =
+    "https://outlook.office.com/owa/?rru=compose&to=" + mail + url.search;
+  outlook.classList.add("mailgo-open");
+  outlook.classList.add("outlook");
+  let outlookContent = document.createTextNode("open in Outlook");
+  outlook.appendChild(outlookContent);
+  modalContent.appendChild(outlook);
+
+  // default
+  let open = document.createElement("a");
+  open.href = mailgo.href;
+  open.className = "mailgo-open";
+  let openContent = document.createTextNode("open");
+  open.appendChild(openContent);
+  modalContent.appendChild(open);
+
+  // copia l'email
+  let copy = document.createElement("a");
+  copy.className = "mailgo-copy";
+  let copyContent = document.createTextNode("copy");
+  copy.appendChild(copyContent);
+  modalContent.appendChild(copy);
+
   mailgo.parentNode.insertBefore(modal, mailgo.nextSibling);
 
   mailgo.addEventListener(

dist/mailgo.min.js

@@ -1 +1 @@
-let mailgos=document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)'),styles='\n    .mailgo-modal-background {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: rgba(10,10,10,.86);\n      opacity: 0.8;\n    }\n    .mailgo-modal {\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      display: none;\n      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n    }\n    .mailgo-modal.is-active {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n    .mailgo-modal-content {\n      z-index: 1000;\n      width: 400px;\n      background-color: #fff;\n      border-radius: 6px;\n      box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);\n      color: #4a4a4a;\n      display: block;\n      padding: 1.25rem;\n    }\n',styleSheet=document.createElement("style");function validateEmail(e){return/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e)}styleSheet.type="text/css",styleSheet.innerText=styles,document.head.appendChild(styleSheet),console.log("mailgo is WIP!"),mailgos.forEach((e,t)=>{let n=e.href.split("?")[0].split("mailto:")[1].trim();if(console.log(n),!validateEmail(n))return;let a=new URL(e.href),l=new URLSearchParams(a.search),o=(l.get("subject"),l.get("body"),l.get("cc"),l.get("bcc"),document.createElement("div"));o.className="mailgo-modal",o.setAttribute("data-index",t);let i=document.createElement("div");i.className="mailgo-modal-background",o.appendChild(i);let s=document.createElement("div");s.className="mailgo-modal-content",o.appendChild(s);let d=document.createElement("strong"),c=document.createTextNode(n);d.appendChild(c),s.appendChild(d),e.parentNode.insertBefore(o,e.nextSibling),e.addEventListener("click",t=>{t.preventDefault(),e.nextElementSibling.classList.add("is-active")},!1),i.addEventListener("click",t=>{e.nextElementSibling.classList.remove("is-active")},!1)});
+let mailgos=document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)'),styles='\n\n    .mailgo-modal {\n      all: initial;\n      * {\n        all: unset;\n      }\n    }\n\n    .mailgo-title {\n      display: block;\n      margin-bottom: 16px;\n    }\n\n    .mailgo-modal-background {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: rgba(10,10,10,.86);\n      opacity: 0.8;\n    }\n    .mailgo-modal {\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      display: none;\n      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n    }\n    .mailgo-modal.is-active {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n    .mailgo-modal-content {\n      z-index: 1000;\n      text-align: center;\n      width: 200px;\n      background-color: #fff;\n      border-radius: 6px;\n      box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);\n      color: #4a4a4a;\n      display: block;\n      padding: 1.25rem;\n    }\n    .mailgo-modal-content a {\n      display: block;\n      color: #4a4a4a;\n      padding: 10px;\n      border-radius: 4px;\n      text-decoration: none;\n    }\n    .mailgo-modal-content a:hover {\n      background-color: rgba(0, 0, 0, 0.08);\n    }\n    .mailgo-modal-content a.outlook {\n      color: rgba(0, 114, 198);\n    }\n    .mailgo-modal-content a.gmail {\n      color: rgba(212, 70, 56);\n    }\n    .mailgo-modal-content a.outlook:hover {\n      background-color: rgba(0, 114, 198, 0.08);\n    }\n    .mailgo-modal-content a.gmail:hover {\n      background-color: rgba(212, 70, 56, 0.08);\n    }\n    a.mailgo-copy {\n      margin-top: 10px;\n      padding: 16px 10px;\n    }\n',styleSheet=document.createElement("style");function validateEmail(e){return/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e)}styleSheet.type="text/css",styleSheet.innerText=styles,document.head.appendChild(styleSheet),console.log("mailgo is WIP!"),mailgos.forEach((e,n)=>{let t=e.href.split("?")[0].split("mailto:")[1].trim();if(!validateEmail(t))return;let o=new URL(e.href),a=new URLSearchParams(o.search),l=(a.get("subject"),a.get("body"),a.get("cc"),a.get("bcc"),document.createElement("div"));l.className="mailgo-modal",l.setAttribute("data-index",n);let i=document.createElement("div");i.className="mailgo-modal-background",l.appendChild(i);let d=document.createElement("div");d.className="mailgo-modal-content",l.appendChild(d);let c=document.createElement("strong");c.className="mailgo-title";let m=document.createTextNode(t);c.appendChild(m),d.appendChild(c);let r=document.createElement("a");r.href="https://mail.google.com/mail?extsrc=mailto&url="+e.href,r.classList.add("mailgo-open"),r.classList.add("gmail");let s=document.createTextNode("open in Gmail");r.appendChild(s),d.appendChild(r);let p=document.createElement("a");p.href="https://outlook.office.com/owa/?rru=compose&to="+t+o.search,p.classList.add("mailgo-open"),p.classList.add("outlook");let g=document.createTextNode("open in Outlook");p.appendChild(g),d.appendChild(p);let u=document.createElement("a");u.href=e.href,u.className="mailgo-open";let h=document.createTextNode("open");u.appendChild(h),d.appendChild(u);let b=document.createElement("a");b.className="mailgo-copy";let x=document.createTextNode("copy");b.appendChild(x),d.appendChild(b),e.parentNode.insertBefore(l,e.nextSibling),e.addEventListener("click",n=>{n.preventDefault(),e.nextElementSibling.classList.add("is-active")},!1),i.addEventListener("click",n=>{e.nextElementSibling.classList.remove("is-active")},!1)});

src/mailgo.js

@@ -2,6 +2,19 @@
 let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)');
 
 let styles = `
+
+    .mailgo-modal {
+      all: initial;
+      * {
+        all: unset;
+      }
+    }
+
+    .mailgo-title {
+      display: block;
+      margin-bottom: 16px;
+    }
+
     .mailgo-modal-background {
       position: absolute;
       top: 0;
@@ -27,7 +40,8 @@ let styles = `
     }
     .mailgo-modal-content {
       z-index: 1000;
-      width: 400px;
+      text-align: center;
+      width: 200px;
       background-color: #fff;
       border-radius: 6px;
       box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
@@ -35,6 +49,32 @@ let styles = `
       display: block;
       padding: 1.25rem;
     }
+    .mailgo-modal-content a {
+      display: block;
+      color: #4a4a4a;
+      padding: 10px;
+      border-radius: 4px;
+      text-decoration: none;
+    }
+    .mailgo-modal-content a:hover {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+    .mailgo-modal-content a.outlook {
+      color: rgba(0, 114, 198);
+    }
+    .mailgo-modal-content a.gmail {
+      color: rgba(212, 70, 56);
+    }
+    .mailgo-modal-content a.outlook:hover {
+      background-color: rgba(0, 114, 198, 0.08);
+    }
+    .mailgo-modal-content a.gmail:hover {
+      background-color: rgba(212, 70, 56, 0.08);
+    }
+    a.mailgo-copy {
+      margin-top: 10px;
+      padding: 16px 10px;
+    }
 `;
 
 // CSS
@@ -74,11 +114,49 @@ mailgos.forEach((mailgo, index) => {
   modalContent.className = "mailgo-modal-content";
   modal.appendChild(modalContent);
 
+  // titolo (l'email)
   let strong = document.createElement("strong");
+  strong.className = "mailgo-title";
   let strongContent = document.createTextNode(mail);
   strong.appendChild(strongContent);
   modalContent.appendChild(strong);
 
+  // Gmail
+  let gmail = document.createElement("a");
+  gmail.href = "https://mail.google.com/mail?extsrc=mailto&url=" + mailgo.href;
+  gmail.classList.add("mailgo-open");
+  gmail.classList.add("gmail");
+  let gmailContent = document.createTextNode("open in Gmail");
+  gmail.appendChild(gmailContent);
+  modalContent.appendChild(gmail);
+
+  // Outlook
+  let outlook = document.createElement("a");
+  outlook.href =
+    "https://outlook.office.com/owa/?rru=compose&to=" + mail + url.search;
+  outlook.classList.add("mailgo-open");
+  outlook.classList.add("outlook");
+  let outlookContent = document.createTextNode("open in Outlook");
+  outlook.appendChild(outlookContent);
+  modalContent.appendChild(outlook);
+
+  // default
+  let open = document.createElement("a");
+  open.href = mailgo.href;
+  open.className = "mailgo-open";
+  let openContent = document.createTextNode("open");
+  open.appendChild(openContent);
+  modalContent.appendChild(open);
+
+  // copia l'email
+  let copy = document.createElement("a");
+  copy.href = "#mailgo-copy";
+  copy.className = "mailgo-copy";
+  let copyContent = document.createTextNode("copy");
+  copy.appendChild(copyContent);
+  copy.addEventListener("click", event => {}, false);
+  modalContent.appendChild(copy);
+
   mailgo.parentNode.insertBefore(modal, mailgo.nextSibling);
 
   mailgo.addEventListener(
@@ -106,3 +184,23 @@ function validateEmail(email) {
   var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return re.test(email);
 }
+
+function copyToClipboard(str) {
+  const el = document.createElement("textarea");
+  el.value = str;
+  el.setAttribute("readonly", "");
+  el.style.position = "absolute";
+  el.style.left = "-9999px";
+  document.body.appendChild(el);
+  const selected =
+    document.getSelection().rangeCount > 0
+      ? document.getSelection().getRangeAt(0)
+      : false;
+  el.select();
+  document.execCommand("copy");
+  document.body.removeChild(el);
+  if (selected) {
+    document.getSelection().removeAllRanges();
+    document.getSelection().addRange(selected);
+  }
+}