gulp

dist/mailgo.js

@@ -1,4 +1,5 @@
 function mailgoInit() {
+  // style di mailgo
   const styles = `
     .mailgo-title {
       display: block;
@@ -95,7 +96,7 @@ function mailgoInit() {
 
   // ottengo tutti i mailto contenuti nella pagina
   const mailgos = document.querySelectorAll(
-    'a[href^="mailto:"]:not(.no-mailgo), a.mailgo:not(.no-mailgo)'
+    'a[href^="mailto:"]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
   );
 
   // attivo mailgo su tutti gli elementi
@@ -118,12 +119,14 @@ function mailgoInit() {
       url = new URL(mailtoHref);
       let urlParams = new URLSearchParams(url.search);
 
+      // ottengo i parametri aggiuntivi
       cc = urlParams.get("cc");
       bcc = urlParams.get("bcc");
       subject = urlParams.get("subject");
       bodyMail = urlParams.get("body");
     } else {
-      // caso in cui applico mailgo ad <a> con class="mailgo"
+      // caso in cui applico mailgo ad <a> con class="mailgo" o href=#mailgo
+      // compongo l'email con data-address e data-domain passati nell'elemento
       mail =
         mailgo.getAttribute("data-address") +
         "@" +
@@ -132,6 +135,7 @@ function mailgoInit() {
       url = new URL(mailtoHref);
     }
 
+    // valido l'email, se non valida non abilito mailgo per il singolo elemento
     if (!validateEmail(mail)) return;
 
     let modal = document.createElement("div");
@@ -143,6 +147,7 @@ function mailgoInit() {
     modalBackground.className = "mailgo-modal-background";
     modal.appendChild(modalBackground);
 
+    // modal content
     let modalContent = document.createElement("div");
     modalContent.className = "mailgo-modal-content";
     modal.appendChild(modalContent);
@@ -239,7 +244,7 @@ function mailgoInit() {
 
     modalContent.appendChild(outlook);
 
-    // default
+    // open default
     let open = document.createElement("a");
     open.href = mailtoHref;
     open.classList.add("mailgo-open");
@@ -268,19 +273,19 @@ function mailgoInit() {
     );
     modalContent.appendChild(copy);
 
-    // details
+    // by
     let by = document.createElement("a");
     by.href = "https://mailgo.js.org";
     by.className = "mailgo-by";
     by.target = "_blank";
-
     let textBy = document.createTextNode("mailgo.js.org");
     by.appendChild(textBy);
-
     modalContent.appendChild(by);
 
+    // aggiungo il modal dopo l'elemento
     mailgo.parentNode.insertBefore(modal, mailgo.nextSibling);
 
+    // se clicco sull'elemento appare il modal
     mailgo.addEventListener(
       "click",
       function(event) {
@@ -293,6 +298,7 @@ function mailgoInit() {
       false
     );
 
+    // se clicco fuori scompare
     modalBackground.addEventListener(
       "click",
       function(event) {
@@ -303,13 +309,16 @@ function mailgoInit() {
   });
 }
 
+// aggiungo l'init di mailgo al DOMContentLoaded
 document.addEventListener("DOMContentLoaded", mailgoInit, false);
 
+// funzionalità di validazione dell'email con regex
 function validateEmail(email) {
   let 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);
 }
 
+// funzionalità di copia di una stringa
 function copyToClipboard(str) {
   const el = document.createElement("textarea");
   el.value = str;

dist/mailgo.min.js

@@ -1 +1 @@
-function mailgoInit(){const e=document.createElement("style");e.type="text/css",e.innerText='\n    .mailgo-title {\n      display: block;\n      margin-bottom: 5px;\n    }\n    .mailgo-details {\n      margin-bottom: 10px;\n    }\n    .mailgo-details p {\n      font-size: 12px;\n      margin-top: 3px;\n      margin-bottom: 3px;\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      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      display: none;\n      justify-content: center;\n      align-items: center;\n      flex-direction: column;\n      overflow: hidden;\n      z-index: 100000;\n    }\n    .mailgo-modal.is-active {\n      display: flex;\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      overflow: auto;\n      padding: 1.25rem;\n    }\n    .mailgo-modal-content a {\n      display: block;\n      color: #4a4a4a;\n      border-radius: 4px;\n      text-decoration: none;\n    }\n    .mailgo-modal-content a {\n      padding: 10px;\n    }\n    .mailgo-modal-content a.mailgo-open:hover, .mailgo-modal-content a.mailgo-copy:hover  {\n      background-color: rgba(0, 0, 0, 0.08);\n    }\n    .mailgo-modal-content a.outlook {\n      color: #0072C6;\n    }\n    .mailgo-modal-content a.gmail {\n      color: #D44638;\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    .mailgo-modal-content a.mailgo-copy {\n      padding: 16px 10px;\n    }\n    .mailgo-modal-content a.mailgo-by {\n      display: block;\n      font-size: 8px;\n      margin-top: 1rem;\n      padding: 0px;\n      font-style: italic;\n    }\n    .mailgo-weight-500 {\n      font-weight: 500;\n    }',document.head.appendChild(e),document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo), a.mailgo:not(.no-mailgo)').forEach(function(e,t){let n="",a="",o="",l="",d="",i="";if(e.href&&e.href.includes("mailto:")){n=e.href.split("?")[0].split("mailto:")[1].trim(),a=e.href,url=new URL(a);let t=new URLSearchParams(url.search);o=t.get("cc"),l=t.get("bcc"),d=t.get("subject"),i=t.get("body")}else a="mailto:"+(n=e.getAttribute("data-address")+"@"+e.getAttribute("data-domain")),url=new URL(a);if(!validateEmail(n))return;let c=document.createElement("div");c.classList.add("mailgo-modal"),c.setAttribute("data-index",t);let m=document.createElement("div");m.className="mailgo-modal-background",c.appendChild(m);let p=document.createElement("div");p.className="mailgo-modal-content",c.appendChild(p);let r=document.createElement("strong");r.className="mailgo-title";let s=document.createTextNode(n);r.appendChild(s),p.appendChild(r);let g=document.createElement("div");if(g.className="mailgo-details",o&&""!=o){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let n=document.createTextNode("cc");t.appendChild(n);let a=document.createTextNode(": "+o);e.appendChild(t),e.appendChild(a),g.appendChild(e)}if(l&&""!=l){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let n=document.createTextNode("bcc");t.appendChild(n);let a=document.createTextNode(": "+l);e.appendChild(t),e.appendChild(a),g.appendChild(e)}if(d&&""!=d){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let n=document.createTextNode("cc");t.appendChild(n);let a=document.createTextNode(": "+d);e.appendChild(t),e.appendChild(a),g.appendChild(e)}if(i&&""!=i){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let n=document.createTextNode("cc");t.appendChild(n);let a=document.createTextNode(": "+i);e.appendChild(t),e.appendChild(a),g.appendChild(e)}p.appendChild(g);let u=document.createElement("a");u.href="https://mail.google.com/mail?extsrc=mailto&url="+a,u.classList.add("mailgo-open"),u.classList.add("gmail");let h=document.createTextNode("open in ");u.appendChild(h);let x=document.createElement("span");x.className="mailgo-weight-500";let b=document.createTextNode("Gmail");x.appendChild(b),u.appendChild(x),p.appendChild(u);let f=document.createElement("a");f.href="https://outlook.office.com/owa/?rru=compose&to="+n+url.search,f.classList.add("mailgo-open"),f.classList.add("outlook");let C=document.createTextNode("open in ");f.appendChild(C);let y=document.createLine truncated
+function mailgoInit(){const e=document.createElement("style");e.type="text/css",e.innerText='\n    .mailgo-title {\n      display: block;\n      margin-bottom: 5px;\n    }\n    .mailgo-details {\n      margin-bottom: 10px;\n    }\n    .mailgo-details p {\n      font-size: 12px;\n      margin-top: 3px;\n      margin-bottom: 3px;\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      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      display: none;\n      justify-content: center;\n      align-items: center;\n      flex-direction: column;\n      overflow: hidden;\n      z-index: 100000;\n    }\n    .mailgo-modal.is-active {\n      display: flex;\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      overflow: auto;\n      padding: 1.25rem;\n    }\n    .mailgo-modal-content a {\n      display: block;\n      color: #4a4a4a;\n      border-radius: 4px;\n      text-decoration: none;\n    }\n    .mailgo-modal-content a {\n      padding: 10px;\n    }\n    .mailgo-modal-content a.mailgo-open:hover, .mailgo-modal-content a.mailgo-copy:hover  {\n      background-color: rgba(0, 0, 0, 0.08);\n    }\n    .mailgo-modal-content a.outlook {\n      color: #0072C6;\n    }\n    .mailgo-modal-content a.gmail {\n      color: #D44638;\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    .mailgo-modal-content a.mailgo-copy {\n      padding: 16px 10px;\n    }\n    .mailgo-modal-content a.mailgo-by {\n      display: block;\n      font-size: 8px;\n      margin-top: 1rem;\n      padding: 0px;\n      font-style: italic;\n    }\n    .mailgo-weight-500 {\n      font-weight: 500;\n    }',document.head.appendChild(e),document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo), a[href="#mailgo"], a.mailgo').forEach(function(e,t){let n="",a="",o="",l="",d="",i="";if(e.href&&e.href.includes("mailto:")){n=e.href.split("?")[0].split("mailto:")[1].trim(),a=e.href,url=new URL(a);let t=new URLSearchParams(url.search);o=t.get("cc"),l=t.get("bcc"),d=t.get("subject"),i=t.get("body")}else a="mailto:"+(n=e.getAttribute("data-address")+"@"+e.getAttribute("data-domain")),url=new URL(a);if(!validateEmail(n))return;let c=document.createElement("div");c.classList.add("mailgo-modal"),c.setAttribute("data-index",t);let m=document.createElement("div");m.className="mailgo-modal-background",c.appendChild(m);let p=document.createElement("div");p.className="mailgo-modal-content",c.appendChild(p);let r=document.createElement("strong");r.className="mailgo-title";let s=document.createTextNode(n);r.appendChild(s),p.appendChild(r);let g=document.createElement("div");if(g.className="mailgo-details",o&&""!=o){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let n=document.createTextNode("cc");t.appendChild(n);let a=document.createTextNode(": "+o);e.appendChild(t),e.appendChild(a),g.appendChild(e)}if(l&&""!=l){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let n=document.createTextNode("bcc");t.appendChild(n);let a=document.createTextNode(": "+l);e.appendChild(t),e.appendChild(a),g.appendChild(e)}if(d&&""!=d){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let n=document.createTextNode("cc");t.appendChild(n);let a=document.createTextNode(": "+d);e.appendChild(t),e.appendChild(a),g.appendChild(e)}if(i&&""!=i){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let n=document.createTextNode("cc");t.appendChild(n);let a=document.createTextNode(": "+i);e.appendChild(t),e.appendChild(a),g.appendChild(e)}p.appendChild(g);let u=document.createElement("a");u.href="https://mail.google.com/mail?extsrc=mailto&url="+a,u.classList.add("mailgo-open"),u.classList.add("gmail");let h=document.createTextNode("open in ");u.appendChild(h);let x=document.createElement("span");x.className="mailgo-weight-500";let f=document.createTextNode("Gmail");x.appendChild(f),u.appendChild(x),p.appendChild(u);let b=document.createElement("a");b.href="https://outlook.office.com/owa/?rru=compose&to="+n+url.search,b.classList.add("mailgo-open"),b.classList.add("outlook");let C=document.createTextNode("open in ");b.appendChild(C);let y=document.creLine truncated