test with gulp and babel

dist/mailgo.js

@@ -1,163 +1,190 @@
-"use strict";
+const V = "0.3.1";
+const MAILTO = "mailto:";
 
-var V = "0.3.1";
+// mailgo style
-var MAILTO = "mailto:"; // mailgo style
+const mailgoCSS = document.createElement("link");
-
-var mailgoCSS = document.createElement("link");
 mailgoCSS.rel = "stylesheet";
 mailgoCSS.type = "text/css";
 mailgoCSS.href = "https://unpkg.com/mailgo@" + V + "/dist/mailgo.min.css";
 document.head.appendChild(mailgoCSS);
+
 /**
  * mailgoInit
  * the function that creates the mailgo element in DOM
  */
-
+mailgoInit = () => {
-mailgoInit = function mailgoInit() {
   // modal
-  var modal = document.createElement("div");
+  let modal = document.createElement("div");
   modal.id = "mailgo";
   modal.classList.add("mailgo-modal");
-  modal.style.display = "none"; // background
+  modal.style.display = "none";
 
-  var modalBackground = document.createElement("div");
+  // background
+  let modalBackground = document.createElement("div");
   modalBackground.className = "mailgo-modal-background";
-  modal.appendChild(modalBackground); // modal content
+  modal.appendChild(modalBackground);
 
-  var modalContent = document.createElement("div");
+  // modal content
+  let modalContent = document.createElement("div");
   modalContent.className = "mailgo-modal-content";
-  modal.appendChild(modalContent); // title (email address)
+  modal.appendChild(modalContent);
 
-  var title = document.createElement("strong");
+  // title (email address)
+  let title = document.createElement("strong");
   title.id = "mailgo-title";
   title.className = "mailgo-title";
-  modalContent.appendChild(title); // details
+  modalContent.appendChild(title);
 
-  var details = document.createElement("div");
+  // details
+  let details = document.createElement("div");
   details.id = "mailgo-details";
   details.className = "mailgo-details";
-  var detailCc = document.createElement("p");
+
+  let detailCc = document.createElement("p");
   detailCc.id = "mailgo-cc";
-  var ccSpan = document.createElement("span");
+  let ccSpan = document.createElement("span");
   ccSpan.className = "mailgo-weight-500";
-  var ccContent = document.createTextNode("cc ");
+  let ccContent = document.createTextNode("cc ");
   ccSpan.appendChild(ccContent);
-  var ccValue = document.createElement("span");
+  let ccValue = document.createElement("span");
   ccValue.id = "mailgo-cc-value";
   detailCc.appendChild(ccSpan);
   detailCc.appendChild(ccValue);
   details.appendChild(detailCc);
-  var detailBcc = document.createElement("p");
+
+  let detailBcc = document.createElement("p");
   detailBcc.id = "mailgo-bcc";
-  var bccSpan = document.createElement("span");
+  let bccSpan = document.createElement("span");
   bccSpan.className = "mailgo-weight-500";
-  var bccContent = document.createTextNode("bcc ");
+  let bccContent = document.createTextNode("bcc ");
   bccSpan.appendChild(bccContent);
-  var bccValue = document.createElement("span");
+  let bccValue = document.createElement("span");
   bccValue.id = "mailgo-bcc-value";
   detailBcc.appendChild(bccSpan);
   detailBcc.appendChild(bccValue);
   details.appendChild(detailBcc);
-  var detailSubject = document.createElement("p");
+
+  let detailSubject = document.createElement("p");
   detailSubject.id = "mailgo-subject";
-  var subjectSpan = document.createElement("span");
+  let subjectSpan = document.createElement("span");
   subjectSpan.className = "mailgo-weight-500";
-  var subjectContent = document.createTextNode("subject");
+  let subjectContent = document.createTextNode("subject");
   subjectSpan.appendChild(subjectContent);
-  var subjectValue = document.createElement("span");
+  let subjectValue = document.createElement("span");
   subjectValue.id = "mailgo-subject-value";
   detailSubject.appendChild(subjectSpan);
   detailSubject.appendChild(subjectValue);
   details.appendChild(detailSubject);
-  var detailBody = document.createElement("p");
+
+  let detailBody = document.createElement("p");
   detailBody.id = "mailgo-body";
-  var bodySpan = document.createElement("span");
+  let bodySpan = document.createElement("span");
   bodySpan.className = "mailgo-weight-500";
-  var bodyContent = document.createTextNode("body ");
+  let bodyContent = document.createTextNode("body ");
   bodySpan.appendChild(bodyContent);
-  var bodyValue = document.createElement("span");
+  let bodyValue = document.createElement("span");
   bodyValue.id = "mailgo-body-value";
   detailBody.appendChild(bodySpan);
   detailBody.appendChild(bodyValue);
   details.appendChild(detailBody);
-  modalContent.appendChild(details); // Gmail
 
-  var gmail = document.createElement("a");
+  modalContent.appendChild(details);
+
+  // Gmail
+  let gmail = document.createElement("a");
   gmail.id = "mailgo-gmail";
   gmail.classList.add("mailgo-open");
   gmail.classList.add("gmail");
-  var gmailContent = document.createTextNode("open in ");
+  let gmailContent = document.createTextNode("open in ");
   gmail.appendChild(gmailContent);
-  var gmailSpan = document.createElement("span");
+  let gmailSpan = document.createElement("span");
   gmailSpan.className = "mailgo-weight-500";
-  var gmailSpanContent = document.createTextNode("Gmail");
+  let gmailSpanContent = document.createTextNode("Gmail");
   gmailSpan.appendChild(gmailSpanContent);
   gmail.appendChild(gmailSpan);
-  modalContent.appendChild(gmail); // Outlook
 
-  var outlook = document.createElement("a");
+  modalContent.appendChild(gmail);
+
+  // Outlook
+  let outlook = document.createElement("a");
   outlook.id = "mailgo-outlook";
   outlook.classList.add("mailgo-open");
   outlook.classList.add("outlook");
-  var outlookContent = document.createTextNode("open in ");
+  let outlookContent = document.createTextNode("open in ");
   outlook.appendChild(outlookContent);
-  var outlookSpan = document.createElement("span");
+  let outlookSpan = document.createElement("span");
   outlookSpan.className = "mailgo-weight-500";
-  var outlookSpanContent = document.createTextNode("Outlook");
+  let outlookSpanContent = document.createTextNode("Outlook");
   outlookSpan.appendChild(outlookSpanContent);
   outlook.appendChild(outlookSpan);
-  modalContent.appendChild(outlook); // open default
 
-  var open = document.createElement("a");
+  modalContent.appendChild(outlook);
+
+  // open default
+  let open = document.createElement("a");
   open.id = "mailgo-open";
   open.href = "#mailgo-open";
   open.classList.add("mailgo-open");
   open.classList.add("mailgo-weight-500");
-  var openContent = document.createTextNode("open");
+  let openContent = document.createTextNode("open");
   open.appendChild(openContent);
-  modalContent.appendChild(open); // copy
 
-  var copy = document.createElement("a");
+  modalContent.appendChild(open);
+
+  // copy
+  let copy = document.createElement("a");
   copy.id = "mailgo-copy";
   copy.href = "#mailgo-copy";
   copy.classList.add("mailgo-copy");
   copy.classList.add("mailgo-weight-500");
-  var copyContent = document.createTextNode("copy");
+  let copyContent = document.createTextNode("copy");
   copy.appendChild(copyContent);
-  modalContent.appendChild(copy); // by
 
-  var by = document.createElement("a");
+  modalContent.appendChild(copy);
+
+  // by
+  let by = document.createElement("a");
   by.href = "https://mailgo.js.org";
   by.className = "mailgo-by";
   by.target = "_blank";
-  var textBy = document.createTextNode("mailgo.js.org");
+  let textBy = document.createTextNode("mailgo.js.org");
   by.appendChild(textBy);
-  modalContent.appendChild(by); // add the modal at the end of the body
 
-  document.body.appendChild(modal); // every click outside the modal will hide the modal
+  modalContent.appendChild(by);
 
+  // add the modal at the end of the body
+  document.body.appendChild(modal);
+
+  // every click outside the modal will hide the modal
   modalBackground.addEventListener("click", hideMailgo, false);
 };
+
 /**
  * mailgoRender
  * function to render a single mailgo
  */
+mailgoRender = mailgo => {
+  let mail = "",
+    mailtoHref = "",
+    cc = "",
+    bcc = "",
+    subject = "",
+    bodyMail = "";
 
-
+  // if the element href=^"mailto:"
-mailgoRender = function mailgoRender(mailgo) {
-  var mail = "",
-      mailtoHref = "",
-      cc = "",
-      bcc = "",
-      subject = "",
-      bodyMail = ""; // if the element href=^"mailto:"
-
   if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) {
-    mail = decodeURIComponent(mailgo.href.split("?")[0].split(MAILTO)[1].trim());
+    mail = decodeURIComponent(
+      mailgo.href
+        .split("?")[0]
+        .split(MAILTO)[1]
+        .trim()
+    );
+
     mailtoHref = mailgo.href;
     url = new URL(mailtoHref);
-    var urlParams = new URLSearchParams(url.search); // optional parameters for the email
+    let urlParams = new URLSearchParams(url.search);
 
+    // optional parameters for the email
     cc = urlParams.get("cc");
     bcc = urlParams.get("bcc");
     subject = urlParams.get("subject");
@@ -165,25 +192,40 @@ mailgoRender = function mailgoRender(mailgo) {
   } else {
     // if the element href="#mailgo" or class="mailgo"
     // mail = data-address + @ + data-domain
-    mail = mailgo.getAttribute("data-address") + "@" + mailgo.getAttribute("data-domain");
+    mail =
+      mailgo.getAttribute("data-address") +
+      "@" +
+      mailgo.getAttribute("data-domain");
     mailtoHref = MAILTO + encodeURIComponent(mail);
-    url = new URL(mailtoHref); // cc = data-cc-address + @ + data-cc-domain
+    url = new URL(mailtoHref);
 
-    cc = mailgo.getAttribute("data-cc-address") + "@" + mailgo.getAttribute("data-cc-domain"); // bcc = data-bcc-address + @ + data-bcc-domain
+    // cc = data-cc-address + @ + data-cc-domain
+    cc =
+      mailgo.getAttribute("data-cc-address") +
+      "@" +
+      mailgo.getAttribute("data-cc-domain");
 
-    bcc = mailgo.getAttribute("data-bcc-address") + "@" + mailgo.getAttribute("data-bcc-domain"); // subject = data-subject
+    // bcc = data-bcc-address + @ + data-bcc-domain
+    bcc =
+      mailgo.getAttribute("data-bcc-address") +
+      "@" +
+      mailgo.getAttribute("data-bcc-domain");
 
-    subject = mailgo.getAttribute("data-subject"); // body = data-body
+    // subject = data-subject
+    subject = mailgo.getAttribute("data-subject");
 
+    // body = data-body
     bodyMail = mailgo.getAttribute("data-body");
-  } // validate the email address
+  }
 
+  // validate the email address
+  if (!validateEmail(mail)) return;
 
-  if (!validateEmail(mail)) return; // if cc, bcc is not valid cc, bcc = ""
+  // if cc, bcc is not valid cc, bcc = ""
-
   if (!validateEmail(cc)) cc = "";
-  if (!validateEmail(bcc)) bcc = ""; // information
+  if (!validateEmail(bcc)) bcc = "";
 
+  // information
   titleEl = getE("mailgo-title");
   detailsEl = getE("mailgo-details");
   ccEl = getE("mailgo-cc");
@@ -193,36 +235,70 @@ mailgoRender = function mailgoRender(mailgo) {
   subjectEl = getE("mailgo-subject");
   subjectValueEl = getE("mailgo-subject-value");
   bodyEl = getE("mailgo-body");
-  bodyValueEl = getE("mailgo-body-value"); // actions
+  bodyValueEl = getE("mailgo-body-value");
 
+  // actions
   gmailButton = getE("mailgo-gmail");
   outlookButton = getE("mailgo-outlook");
   openButton = getE("mailgo-open");
-  copyButton = getE("mailgo-copy"); // the title of the modal (email address)
+  copyButton = getE("mailgo-copy");
 
-  titleEl.textContent = mail; // add the details if provided
+  // the title of the modal (email address)
+  titleEl.textContent = mail;
 
-  cc ? (ccEl.style.display = "block", ccValueEl.textContent = cc) : ccEl.style.display = "none";
+  // add the details if provided
-  bcc ? (bccEl.style.display = "block", bccValueEl.textContent = bcc) : bccEl.style.display = "none";
+  cc
-  subject ? (subjectEl.style.display = "block", subjectValueEl.textContent = subject) : subjectEl.style.display = "none";
+    ? ((ccEl.style.display = "block"), (ccValueEl.textContent = cc))
-  bodyMail ? (bodyEl.style.display = "block", bodyValueEl.textContent = bodyMail) : bodyEl.style.display = "none"; // add the actions
+    : (ccEl.style.display = "none");
 
-  gmailButton.href = "https://mail.google.com/mail?extsrc=mailto&url=" + encodeURIComponent(mailtoHref);
+  bcc
-  outlookButton.href = "https://outlook.office.com/owa/?rru=compose&to=" + encodeURIComponent(mail) + url.search.replace(/^[$]/, "&");
+    ? ((bccEl.style.display = "block"), (bccValueEl.textContent = bcc))
-  var encEmail = encodeEmail(mail);
+    : (bccEl.style.display = "none");
-  openButton.addEventListener("click", function () {
-    mailToEncoded(encEmail);
-  }, false);
-  copyButton.addEventListener("click", function (event) {
-    copyToClipboard(mail);
-    copyButton.textContent = "copied";
-    setTimeout(function () {
-      copyButton.textContent = "copy";
-    }, 999);
-  }, false); // show the mailgo
 
+  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.href =
+    "https://mail.google.com/mail?extsrc=mailto&url=" +
+    encodeURIComponent(mailtoHref);
+
+  outlookButton.href =
+    "https://outlook.office.com/owa/?rru=compose&to=" +
+    encodeURIComponent(mail) +
+    url.search.replace(/^[$]/, "&");
+
+  let encEmail = encodeEmail(mail);
+  openButton.addEventListener(
+    "click",
+    () => {
+      mailToEncoded(encEmail);
+    },
+    false
+  );
+
+  copyButton.addEventListener(
+    "click",
+    event => {
+      copyToClipboard(mail);
+      copyButton.textContent = "copied";
+      setTimeout(() => {
+        copyButton.textContent = "copy";
+      }, 999);
+    },
+    false
+  );
+
+  // show the mailgo
   showMailgo();
 };
+
 /**
  * mailgoCheckRender
  * function to check if an element is mailgo-enabled or not referencing to the old
@@ -230,99 +306,100 @@ mailgoRender = function mailgoRender(mailgo) {
  *   'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
  * ); and the new a[mailgo]
  */
-
+mailgoCheckRender = event => {
-
-mailgoCheckRender = function mailgoCheckRender(event) {
   // the target element
-  var e = event.target; // check if the id=mailgo exists in the body
+  let e = event.target;
 
+  // check if the id=mailgo exists in the body
   if (!document.body.contains(getE("mailgo"))) return;
 
-  if ( // first case: it is an <a> element with "mailto:..." in href and no no-mailgo in classList
+  if (
-  e.href && e.href.toLowerCase().startsWith(MAILTO) && !e.classList.contains("no-mailgo") || // second case: the href=#mailgo
+    // first case: it is an <a> element with "mailto:..." in href and no no-mailgo in classList
-  e.href && e.getAttribute("href").toLowerCase() === "#mailgo" || // third case: the classList contains mailgo
+    (e.href &&
-  e.classList.contains("mailgo") || // fourth case: exists the attribute mailgo in the <a> element
+      e.href.toLowerCase().startsWith(MAILTO) &&
-  !!e.getAttribute("mailgo")) {
+      !e.classList.contains("no-mailgo")) ||
+    // second case: the href=#mailgo
+    (e.href && e.getAttribute("href").toLowerCase() === "#mailgo") ||
+    // third case: the classList contains mailgo
+    e.classList.contains("mailgo") ||
+    // fourth case: exists the attribute mailgo in the <a> element
+    !!e.getAttribute("mailgo")
+  ) {
     // stop the normal execution of the element click
-    event.preventDefault(); // render mailgo
+    event.preventDefault();
 
+    // render mailgo
     mailgoRender(e);
   }
 };
+
 /**
  * mailgoKeydown
  * function to manage the keydown event when the modal is showing
  */
-
+mailgoKeydown = event => {
-
-mailgoKeydown = function mailgoKeydown(event) {
   switch (event.keyCode) {
     case 27:
       // Escape
       hideMailgo();
       break;
-
     default:
       return;
   }
-
   return;
-}; // DOMContentLoaded -> mailgoInit (creates the modal)
+};
 
+// DOMContentLoaded -> mailgoInit (creates the modal)
+document.addEventListener("DOMContentLoaded", mailgoInit, false);
 
-document.addEventListener("DOMContentLoaded", mailgoInit, false); // event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
+// event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
+document.body.addEventListener("click", mailgoCheckRender, false);
 
-document.body.addEventListener("click", mailgoCheckRender, false); // validate the email with regex
+// validate the email with regex
-
+validateEmail = email => {
-validateEmail = 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,}))$/;
-  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);
-}; // copy of a string
+};
 
-
+// copy of a string
-copyToClipboard = function copyToClipboard(str) {
+copyToClipboard = str => {
-  var el = document.createElement("textarea");
+  let el = document.createElement("textarea");
   el.value = str;
   el.setAttribute("readonly", "");
   el.style.position = "absolute";
   el.style.left = "-9999px";
   document.body.appendChild(el);
-  var selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
+  let 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);
   }
-}; // show the modal
+};
-
-
-showMailgo = function showMailgo() {
-  getE("mailgo").style.display = "flex"; // add mailgoKeydown
 
+// show the modal
+showMailgo = () => {
+  getE("mailgo").style.display = "flex";
+  // add mailgoKeydown
   document.body.addEventListener("keydown", mailgoKeydown, false);
-}; // hide the modal
+};
-
-
-hideMailgo = function hideMailgo() {
-  getE("mailgo").style.display = "none"; // remove mailgoKeydown
 
+// hide the modal
+hideMailgo = () => {
+  getE("mailgo").style.display = "none";
+  // remove mailgoKeydown
   document.body.removeEventListener("keydown", mailgoKeydown, false);
-}; // decrypt email
+};
+// decrypt email
+mailToEncoded = encoded => (window.location.href = MAILTO + atob(encoded));
 
+// encode email
+encodeEmail = email => btoa(email);
 
-mailToEncoded = function mailToEncoded(encoded) {
+// getE shorthand
-  return window.location.href = MAILTO + atob(encoded);
+getE = id => document.getElementById(id);
-}; // encode email
-
-
-encodeEmail = function encodeEmail(email) {
-  return btoa(email);
-}; // getE shorthand
-
-
-getE = function getE(id) {
-  return document.getElementById(id);
-};

gulpfile.js

@@ -12,22 +12,12 @@ let version = require("./package.json").version;
 function js() {
   return src("src/*.js")
     .pipe(replace("MAILGO_VERSION", version.toString()))
-    .pipe(
-      babel({
-        presets: ["@babel/env"]
-      })
-    )
     .pipe(dest("dist"));
 }
 
 function jsmin() {
   return src("src/*.js")
     .pipe(replace("MAILGO_VERSION", version))
-    .pipe(
-      babel({
-        presets: ["@babel/env"]
-      })
-    )
     .pipe(terser())
     .pipe(
       rename({

package.json

@@ -33,5 +33,5 @@
   "dependencies": {
     "@babel/polyfill": "^7.4.4"
   },
-  "browserslist": []
+  "browserslist": "> 0.25%, not dead"
 }