go on with tel!

dist/mailgo.min.css

@@ -1 +1 @@
-.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-modal strong{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.mailgo-modal strong{font-weight:700}.mailgo-modal .mailgo-modal-background{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(32,35,42,.75);opacity:.8}.mailgo-modal .mailgo-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:.97;border-radius:5px;box-shadow:0 3px 8px 0 rgba(32,35,42,.12);color:#4a4a4a;display:block;overflow:auto;padding:20px}.mailgo-modal .mailgo-modal-content:hover{opacity:1;box-shadow:0 18px 30px 0 rgba(32,35,42,.23)}.mailgo-modal .mailgo-modal-content .mailgo-title{display:block;margin-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mailgo-modal .mailgo-modal-content .mailgo-details{margin-bottom:10px}.mailgo-modal .mailgo-modal-content .mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal .mailgo-modal-content a{display:block;padding:10px;color:#4a4a4a;border-radius:5px;text-decoration:none}.mailgo-modal .mailgo-modal-content a.mailgo-gmail{color:#d44638}.mailgo-modal .mailgo-modal-content a.mailgo-outlook{color:#0072c6}.mailgo-modal .mailgo-modal-content a.mailgo-wa{color:#00bfa5}.mailgo-modal .mailgo-modal-content a.mailgo-telegram{color:#08c}.mailgo-modal .mailgo-modal-content a.mailgo-copy{padding:16px 10px;font-size:16px}.mailgo-modal .mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal .mailgo-modal-content a.mailgo-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.mailgo-modal .mailgo-modal-content a.mailgo-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.mailgo-modal .mailgo-modal-content a.mailgo-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.mailgo-modal .mailgo-modal-content a.mailgo-wa:hover{background-color:rgba(0,114,198,.08);color:#00bfa5}.mailgo-modal .mailgo-modal-content a.mailgo-telegram:hover{background-color:rgba(0,114,198,.08);color:#08c}.mailgo-modal .mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;color:#4a4a4a;opacity:.5}.mailgo-modal .mailgo-modal-content a.mailgo-by:hover{opacity:1}.mailgo-modal .mailgo-modal-content .mailgo-weight-500{font-weight:500}
+.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-modal strong{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.mailgo-modal strong{font-weight:700}.mailgo-modal .mailgo-modal-background{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(32,35,42,.75);opacity:.8}.mailgo-modal .mailgo-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:.97;border-radius:5px;box-shadow:0 3px 8px 0 rgba(32,35,42,.12);color:#4a4a4a;display:block;overflow:auto;padding:20px}.mailgo-modal .mailgo-modal-content:hover{opacity:1;box-shadow:0 18px 30px 0 rgba(32,35,42,.23)}.mailgo-modal .mailgo-modal-content .mailgo-title{display:block;margin-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mailgo-modal .mailgo-modal-content .mailgo-details{margin-bottom:10px}.mailgo-modal .mailgo-modal-content .mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal .mailgo-modal-content a{display:block;padding:10px;color:#4a4a4a;border-radius:5px;text-decoration:none}.mailgo-modal .mailgo-modal-content a.mailgo-gmail{color:#d44638}.mailgo-modal .mailgo-modal-content a.mailgo-outlook{color:#0072c6}.mailgo-modal .mailgo-modal-content a.mailgo-wa{color:#00bfa5}.mailgo-modal .mailgo-modal-content a.mailgo-telegram{color:#08c}.mailgo-modal .mailgo-modal-content a.mailgo-copy{padding:16px 10px;font-size:16px}.mailgo-modal .mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal .mailgo-modal-content a.mailgo-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.mailgo-modal .mailgo-modal-content a.mailgo-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.mailgo-modal .mailgo-modal-content a.mailgo-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.mailgo-modal .mailgo-modal-content a.mailgo-telegram:hover{background-color:rgba(0,114,198,.08);color:#08c}.mailgo-modal .mailgo-modal-content a.mailgo-wa:hover{background-color:rgba(0,191,165,.08);color:#00bfa5}.mailgo-modal .mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;color:#4a4a4a;opacity:.5}.mailgo-modal .mailgo-modal-content a.mailgo-by:hover{opacity:1}.mailgo-modal .mailgo-modal-content .mailgo-weight-500{font-weight:500}

src/mailgo.js

@@ -8,6 +8,17 @@ const CALLTO = "callto:";
 const MAIL_TYPE = "mail";
 const TEL_TYPE = "tel";
 
+let url = "",
+  mail = "",
+  encEmail = "",
+  cc = "",
+  bcc = "",
+  subject = "",
+  bodyMail = "";
+
+let tel = "",
+  msg = "";
+
 // mailgo style (gulp)
 const mailgoCSS = document.createElement("style");
 mailgoCSS.id = "mailgo-style";
@@ -283,186 +294,164 @@ const mailgoTelInit = () => {
  * mailgoRender
  * function to render a single mailgo
  */
-const mailgoRender = mailgo => {
+const mailgoRender = (type = MAIL_TYPE, mailgo) => {
-  let url = "",
+  // mailgo mail
-    mail = "",
+  if (type === MAIL_TYPE) {
-    cc = "",
+    // if the element href=^"mailto:"
-    bcc = "",
+    if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) {
-    subject = "",
+      mail = decodeURIComponent(
-    bodyMail = "";
+        mailgo.href
+          .split("?")[0]
+          .split(MAILTO)[1]
+          .trim()
+      );
 
-  // if the element href=^"mailto:"
+      url = new URL(mailgo.href);
-  if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) {
+      let urlParams = new URLSearchParams(url.search);
-    mail = decodeURIComponent(
+
-      mailgo.href
+      // optional parameters for the email
-        .split("?")[0]
+      cc = urlParams.get("cc");
-        .split(MAILTO)[1]
+      bcc = urlParams.get("bcc");
-        .trim()
+      subject = urlParams.get("subject");
+      bodyMail = urlParams.get("body");
+    } else {
+      // if the element href="#mailgo" or class="mailgo"
+      // mail = data-address + @ + data-domain
+      mail =
+        mailgo.getAttribute("data-address") +
+        "@" +
+        mailgo.getAttribute("data-domain");
+
+      url = new URL(MAILTO + encodeURIComponent(mail));
+
+      // cc = data-cc-address + @ + data-cc-domain
+      cc =
+        mailgo.getAttribute("data-cc-address") +
+        "@" +
+        mailgo.getAttribute("data-cc-domain");
+
+      // bcc = data-bcc-address + @ + data-bcc-domain
+      bcc =
+        mailgo.getAttribute("data-bcc-address") +
+        "@" +
+        mailgo.getAttribute("data-bcc-domain");
+
+      // subject = data-subject
+      subject = mailgo.getAttribute("data-subject");
+
+      // body = data-body
+      bodyMail = mailgo.getAttribute("data-body");
+    }
+
+    // validate the email address
+    if (!validateEmails(mail.split(","))) return;
+
+    // if cc, bcc is not valid cc, bcc = ""
+    if (cc && !validateEmails(cc.split(","))) cc = "";
+    if (bcc && !validateEmails(bcc.split(","))) bcc = "";
+
+    // information
+    let titleEl = getE("mailgo-title");
+    let detailsEl = getE("mailgo-details");
+    let ccEl = getE("mailgo-cc");
+    let ccValueEl = getE("mailgo-cc-value");
+    let bccEl = getE("mailgo-bcc");
+    let bccValueEl = getE("mailgo-bcc-value");
+    let subjectEl = getE("mailgo-subject");
+    let subjectValueEl = getE("mailgo-subject-value");
+    let bodyEl = getE("mailgo-body");
+    let bodyValueEl = getE("mailgo-body-value");
+
+    // actions
+    let gmailButton = getE("mailgo-gmail");
+    let outlookButton = getE("mailgo-outlook");
+    let openButton = getE("mailgo-open");
+    let copyButton = getE("mailgo-copy");
+
+    // the title of the modal (email address)
+    titleEl.innerHTML = mail.split(",").join("<br/>");
+
+    // add the details if provided
+    cc
+      ? ((ccEl.style.display = "block"),
+        (ccValueEl.innerHTML = cc.split(",").join("<br/>")))
+      : (ccEl.style.display = "none");
+
+    bcc
+      ? ((bccEl.style.display = "block"),
+        (bccValueEl.innerHTML = bcc.split(",").join("<br/>")))
+      : (bccEl.style.display = "none");
+
+    subject
+      ? ((subjectEl.style.display = "block"),
+        (subjectValueEl.textContent = subject))
+      : (subjectEl.style.display = "none");
+
+    bodyMail
+      ? ((bodyEl.style.display = "block"), (bodyValueEl.textContent = bodyMail))
+      : (bodyEl.style.display = "none");
+
+    // add the actions
+    gmailButton.addEventListener("click", () =>
+      actions.openGmail(mail, cc, bcc, subject, bodyMail)
     );
 
-    url = new URL(mailgo.href);
+    outlookButton.addEventListener("click", () =>
-    let urlParams = new URLSearchParams(url.search);
+      actions.openOutlook(mail, subject, bodyMail)
+    );
 
-    // optional parameters for the email
+    encEmail = encodeEmail(mail);
-    cc = urlParams.get("cc");
+    openButton.addEventListener("click", () => actions.openDefault(encEmail));
-    bcc = urlParams.get("bcc");
-    subject = urlParams.get("subject");
-    bodyMail = urlParams.get("body");
-  } else {
-    // if the element href="#mailgo" or class="mailgo"
-    // mail = data-address + @ + data-domain
-    mail =
-      mailgo.getAttribute("data-address") +
-      "@" +
-      mailgo.getAttribute("data-domain");
 
-    url = new URL(MAILTO + encodeURIComponent(mail));
+    copyButton.addEventListener("click", () => actions.copy(mail, copyButton));
-
-    // cc = data-cc-address + @ + data-cc-domain
-    cc =
-      mailgo.getAttribute("data-cc-address") +
-      "@" +
-      mailgo.getAttribute("data-cc-domain");
-
-    // bcc = data-bcc-address + @ + data-bcc-domain
-    bcc =
-      mailgo.getAttribute("data-bcc-address") +
-      "@" +
-      mailgo.getAttribute("data-bcc-domain");
-
-    // subject = data-subject
-    subject = mailgo.getAttribute("data-subject");
-
-    // body = data-body
-    bodyMail = mailgo.getAttribute("data-body");
   }
+  // mailgo tel
+  if (type === TEL_TYPE) {
+    if (mailgo.href && mailgo.href.toLowerCase().startsWith(TEL)) {
+      tel = decodeURIComponent(
+        mailgo.href
+          .split("?")[0]
+          .split(TEL)[1]
+          .trim()
+      );
+    }
 
-  // validate the email address
+    if (mailgo.href && mailgo.href.toLowerCase().startsWith(CALLTO)) {
-  if (!validateEmails(mail.split(","))) return;
+      tel = decodeURIComponent(
+        mailgo.href
+          .split("?")[0]
+          .split(CALLTO)[1]
+          .trim()
+      );
+    }
 
-  // if cc, bcc is not valid cc, bcc = ""
+    // information
-  if (cc && !validateEmails(cc.split(","))) cc = "";
+    let titleEl = getE("mailgo-tel-title");
-  if (bcc && !validateEmails(bcc.split(","))) bcc = "";
 
-  // information
+    // actions
-  let titleEl = getE("mailgo-title");
+    let waButton = getE("mailgo-wa");
-  let detailsEl = getE("mailgo-details");
+    let telegramButton = getE("mailgo-telegram");
-  let ccEl = getE("mailgo-cc");
+    let callButton = getE("mailgo-call");
-  let ccValueEl = getE("mailgo-cc-value");
+    let copyButton = getE("mailgo-tel-copy");
-  let bccEl = getE("mailgo-bcc");
-  let bccValueEl = getE("mailgo-bcc-value");
-  let subjectEl = getE("mailgo-subject");
-  let subjectValueEl = getE("mailgo-subject-value");
-  let bodyEl = getE("mailgo-body");
-  let bodyValueEl = getE("mailgo-body-value");
 
-  // actions
+    // the title of the modal (tel)
-  let gmailButton = getE("mailgo-gmail");
+    titleEl.innerHTML = tel;
-  let outlookButton = getE("mailgo-outlook");
-  let openButton = getE("mailgo-open");
-  let copyButton = getE("mailgo-copy");
 
-  // the title of the modal (email address)
+    // add the actions
-  titleEl.innerHTML = mail.split(",").join("<br/>");
+    waButton.addEventListener("click", () => actions.openWhatsApp(tel));
 
-  // add the details if provided
+    telegramButton.addEventListener("click", () => actions.openTelegram(tel));
-  cc
-    ? ((ccEl.style.display = "block"),
-      (ccValueEl.innerHTML = cc.split(",").join("<br/>")))
-    : (ccEl.style.display = "none");
 
-  bcc
+    callButton.addEventListener("click", () => actions.callDefault(tel));
-    ? ((bccEl.style.display = "block"),
-      (bccValueEl.innerHTML = bcc.split(",").join("<br/>")))
-    : (bccEl.style.display = "none");
 
-  subject
+    copyButton.addEventListener("click", () => actions.copy(tel, copyButton));
-    ? ((subjectEl.style.display = "block"),
+  }
-      (subjectValueEl.textContent = subject))
-    : (subjectEl.style.display = "none");
-
-  bodyMail
-    ? ((bodyEl.style.display = "block"), (bodyValueEl.textContent = bodyMail))
-    : (bodyEl.style.display = "none");
-
-  // add the actions
-  gmailButton.addEventListener("click", () =>
-    actions.openGmail(mail, cc, bcc, subject, bodyMail)
-  );
-
-  outlookButton.addEventListener("click", () =>
-    actions.openOutlook(mail, subject, bodyMail)
-  );
-
-  let encEmail = encodeEmail(mail);
-  openButton.addEventListener("click", () => actions.openDefault(encEmail));
-
-  copyButton.addEventListener("click", () => actions.copy(mail, copyButton));
 
   // show the mailgo
-  showMailgo();
+  showMailgo(type);
 
   // listener keyDown
-  document.addEventListener("keydown", () =>
+  document.addEventListener("keydown", mailgoKeydown);
-    mailgoKeydown(mail, cc, bcc, subject, bodyMail, encEmail, copyButton)
-  );
-};
-
-/**
- * mailgoTelRender
- * function to render a single tel mailgo
- */
-const mailgoTelRender = mailgo => {
-  let tel = "";
-
-  if (mailgo.href && mailgo.href.toLowerCase().startsWith(TEL)) {
-    tel = decodeURIComponent(
-      mailgo.href
-        .split("?")[0]
-        .split(TEL)[1]
-        .trim()
-    );
-  }
-
-  if (mailgo.href && mailgo.href.toLowerCase().startsWith(CALLTO)) {
-    tel = decodeURIComponent(
-      mailgo.href
-        .split("?")[0]
-        .split(CALLTO)[1]
-        .trim()
-    );
-  }
-
-  // information
-  let titleEl = getE("mailgo-tel-title");
-
-  // actions
-  let waButton = getE("mailgo-wa");
-  let telegramButton = getE("mailgo-telegram");
-  let callButton = getE("mailgo-call");
-  let copyButton = getE("mailgo-tel-copy");
-
-  // the title of the modal (tel)
-  titleEl.innerHTML = tel;
-
-  // add the actions
-  waButton.addEventListener("click", () => actions.openWhatsApp(tel));
-
-  telegramButton.addEventListener("click", () => actions.openTelegram(tel));
-
-  callButton.addEventListener("click", () => actions.callDefault(tel));
-
-  copyButton.addEventListener("click", () => actions.copy(tel, copyButton));
-
-  // show the mailgo
-  showMailgoTel();
-
-  // listener keyDown
-  /*
-  document.addEventListener("keydown", () =>
-    mailgoKeydown(mail, cc, bcc, subject, bodyMail, encEmail, copyButton)
-  );
-  */
 };
 
 // actions
@@ -560,7 +549,7 @@ const mailgoCheckRender = event => {
         event.preventDefault();
 
         // render mailgo
-        mailgoRender(element);
+        mailgoRender(MAIL_TYPE, element);
 
         return;
       }
@@ -569,7 +558,7 @@ const mailgoCheckRender = event => {
         event.preventDefault();
 
         // render mailgo
-        mailgoTelRender(element);
+        mailgoRender(TEL_TYPE, element);
 
         return;
       }
@@ -583,41 +572,35 @@ const mailgoCheckRender = event => {
  * mailgoKeydown
  * function to manage the keydown event when the modal is showing
  */
-const mailgoKeydown = (
+const mailgoKeydown = () => {
-  mail,
+  // if mailgo is showing
-  cc,
+  if (mailgoIsShowing(MAIL_TYPE)) {
-  bcc,
+    switch (event.keyCode) {
-  subject,
+      case 27:
-  bodyMail,
+        // Escape
-  encEmail,
+        hideMailgo();
-  copyButton
+        break;
-) => {
+      case 71:
-  // if mailgo is not showing do nothing
+        // g -> open GMail
-  if (!mailgoIsShowing()) return;
+        actions.openGmail(mail, cc, bcc, subject, bodyMail);
-  switch (event.keyCode) {
+        break;
-    case 27:
+      case 79:
-      // Escape
+        // o -> open Outlook
-      hideMailgo();
+        actions.openOutlook(mail, subject, bodyMail);
-      break;
+        break;
-    case 71:
+      case 32:
-      // g -> open GMail
+      case 13:
-      actions.openGmail(mail, cc, bcc, subject, bodyMail);
+        // spacebar or enter -> open default
-      break;
+        actions.openDefault(encEmail);
-    case 79:
+        break;
-      // o -> open Outlook
+      case 67:
-      actions.openOutlook(mail, subject, bodyMail);
+        // c -> copy
-      break;
+        actions.copy(mail, copyButton);
-    case 32:
+        break;
-    case 13:
+      default:
-      // spacebar or enter -> open default
+        return;
-      actions.openDefault(encEmail);
+    }
-      break;
+  } else if (mailgoIsShowing(TEL_TYPE)) {
-    case 67:
-      // c -> copy
-      actions.copy(mail, copyButton);
-      break;
-    default:
-      return;
   }
   return;
 };
@@ -629,17 +612,11 @@ document.addEventListener("DOMContentLoaded", mailgoTelInit);
 // event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
 document.addEventListener("click", mailgoCheckRender);
 
-// validate a single email with regex
-const 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);
-};
-
 // show the modal
-const showMailgo = type => {
+const showMailgo = (type = MAIL_TYPE) => {
   type === TEL_TYPE
-    ? setDisplay("mailgo", "flex")
+    ? setDisplay("mailgo-tel", "flex")
-    : setDisplay("mailgo-tel", "flex");
+    : setDisplay("mailgo", "flex");
 };
 
 // hide the modal
@@ -649,10 +626,10 @@ const hideMailgo = () => {
 };
 
 // is the mailgo modal hidden?
-const mailgoIsShowing = (type = "mail") => {
+const mailgoIsShowing = (type = MAIL_TYPE) => {
   type === TEL_TYPE
-    ? getDisplay("mailgo") === "flex"
+    ? getDisplay("mailgo-tel") === "flex"
-    : getDisplay("mailgo-tel") === "flex";
+    : getDisplay("mailgo") === "flex";
 };
 
 // decrypt email
@@ -688,6 +665,12 @@ const composedPath = el => {
   }
 };
 
+// validate a single email with regex
+const 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);
+};
+
 // validate an array of emails
 const validateEmails = arr => arr.every(validateEmail);
 

src/mailgo.scss

@@ -129,16 +129,16 @@ $telegram-color: #0088cc;
         color: $outlook-color;
       }
 
-      &.mailgo-wa:hover {
-        background-color: rgba(0, 114, 198, 0.08);
-        color: $wa-color;
-      }
-
       &.mailgo-telegram:hover {
         background-color: rgba(0, 114, 198, 0.08);
         color: $telegram-color;
       }
 
+      &.mailgo-wa:hover {
+        background-color: rgba(0, 191, 165, 0.08);
+        color: $wa-color;
+      }
+
       &.mailgo-by {
         display: block;
         font-size: 8px;