"use strict"; var V = "0.5.1"; var MAILTO = "mailto:"; // mailgo style (gulp) var mailgoCSS = document.createElement("style"); mailgoCSS.id = "mailgo-style"; mailgoCSS.type = "text/css"; var mailgoCSSContent = document.createTextNode(".mailgo-modal p,\n.mailgo-modal span,\n.mailgo-modal strong,\n.mailgo-modal a {\n margin: 0;\n padding: 0;\n font-size: 100%;\n line-height: 1;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica,\n Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\n.mailgo-modal strong {\n font-weight: 700;\n}\n\n.mailgo-modal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n overflow: hidden;\n font-size: 15px;\n z-index: 10000;\n}\n\n.mailgo-title {\n display: block;\n margin-bottom: 5px;\n}\n\n.mailgo-details {\n margin-bottom: 10px;\n}\n\n.mailgo-details p {\n font-size: 12px;\n margin-top: 3px;\n margin-bottom: 3px;\n}\n\n.mailgo-modal-background {\n position: absolute;\n z-index: 10001;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(10, 10, 10, 0.75);\n opacity: 0.8;\n}\n\n.mailgo-modal-content {\n position: relative;\n z-index: 10002;\n box-sizing: content-box;\n text-align: center;\n width: 200px;\n background-color: #fff;\n border-radius: 6px;\n box-shadow: 0 2px 6px 0 rgba(10, 10, 10, 0.39);\n color: #4a4a4a;\n display: block;\n overflow: auto;\n padding: 1.25rem;\n}\n\n.mailgo-modal-content:hover {\n box-shadow: 0 6px 20px rgba(10, 10, 10, 0.23);\n}\n\n.mailgo-modal-content a {\n display: block;\n padding: 10px;\n color: #4a4a4a;\n border-radius: 4px;\n text-decoration: none;\n}\n\n.mailgo-modal-content a.mailgo-gmail {\n color: #d44638;\n}\n\n.mailgo-modal-content a.mailgo-outlook {\n color: #0072c6;\n}\n\n.mailgo-modal-content a.mailgo-copy {\n padding: 16px 10px;\n font-size: 16px;\n}\n\n.mailgo-modal-content a.mailgo-default:hover,\n.mailgo-modal-content a.mailgo-copy:hover {\n background-color: rgba(0, 0, 0, 0.08);\n color: #4a4a4a;\n}\n\n.mailgo-modal-content a.mailgo-outlook:hover {\n background-color: rgba(0, 114, 198, 0.08);\n color: #0072c6;\n}\n\n.mailgo-modal-content a.mailgo-gmail:hover {\n background-color: rgba(212, 70, 56, 0.08);\n color: #d44638;\n}\n\n.mailgo-modal-content a.mailgo-by {\n display: block;\n font-size: 8px;\n margin-top: 1rem;\n padding: 0px;\n color: #4a4a4a;\n opacity: 0.5;\n}\n\n.mailgo-modal-content a.mailgo-by:hover {\n opacity: 1;\n}\n\n.mailgo-weight-500 {\n font-weight: 500;\n}\n"); mailgoCSS.appendChild(mailgoCSSContent); document.head.appendChild(mailgoCSS); /** * mailgoInit * the function that creates the mailgo element in DOM */ var mailgoInit = function mailgoInit() { // modal var modal = document.createElement("div"); modal.id = "mailgo"; modal.classList.add("mailgo-modal"); modal.style.display = "none"; // background var modalBackground = document.createElement("div"); modalBackground.className = "mailgo-modal-background"; modal.appendChild(modalBackground); // modal content var modalContent = document.createElement("div"); modalContent.className = "mailgo-modal-content"; modal.appendChild(modalContent); // title (email address) var title = document.createElement("strong"); title.id = "mailgo-title"; title.className = "mailgo-title"; modalContent.appendChild(title); // details var details = document.createElement("div"); details.id = "mailgo-details"; details.className = "mailgo-details"; var detailCc = document.createElement("p"); detailCc.id = "mailgo-cc"; var ccSpan = document.createElement("span"); ccSpan.className = "mailgo-weight-500"; var ccContent = document.createTextNode("cc "); ccSpan.appendChild(ccContent); var ccValue = document.createElement("span"); ccValue.id = "mailgo-cc-value"; detailCc.appendChild(ccSpan); detailCc.appendChild(ccValue); details.appendChild(detailCc); var detailBcc = document.createElement("p"); detailBcc.id = "mailgo-bcc"; var bccSpan = document.createElement("span"); bccSpan.className = "mailgo-weight-500"; var bccContent = document.createTextNode("bcc "); bccSpan.appendChild(bccContent); var bccValue = document.createElement("span"); bccValue.id = "mailgo-bcc-value"; detailBcc.appendChild(bccSpan); detailBcc.appendChild(bccValue); details.appendChild(detailBcc); var detailSubject = document.createElement("p"); detailSubject.id = "mailgo-subject"; var subjectSpan = document.createElement("span"); subjectSpan.className = "mailgo-weight-500"; var subjectContent = document.createTextNode("subject "); subjectSpan.appendChild(subjectContent); var subjectValue = document.createElement("span"); subjectValue.id = "mailgo-subject-value"; detailSubject.appendChild(subjectSpan); detailSubject.appendChild(subjectValue); details.appendChild(detailSubject); var detailBody = document.createElement("p"); detailBody.id = "mailgo-body"; var bodySpan = document.createElement("span"); bodySpan.className = "mailgo-weight-500"; var bodyContent = document.createTextNode("body "); bodySpan.appendChild(bodyContent); var 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"); gmail.id = "mailgo-gmail"; gmail.href = "#mailgo-gmail"; gmail.classList.add("mailgo-open"); gmail.classList.add("mailgo-gmail"); var gmailContent = document.createTextNode("open in "); gmail.appendChild(gmailContent); var gmailSpan = document.createElement("span"); gmailSpan.className = "mailgo-weight-500"; var gmailSpanContent = document.createTextNode("Gmail"); gmailSpan.appendChild(gmailSpanContent); gmail.appendChild(gmailSpan); modalContent.appendChild(gmail); // Outlook var outlook = document.createElement("a"); outlook.id = "mailgo-outlook"; outlook.href = "#mailgo-outlook"; outlook.classList.add("mailgo-open"); outlook.classList.add("mailgo-outlook"); var outlookContent = document.createTextNode("open in "); outlook.appendChild(outlookContent); var outlookSpan = document.createElement("span"); outlookSpan.className = "mailgo-weight-500"; var outlookSpanContent = document.createTextNode("Outlook"); outlookSpan.appendChild(outlookSpanContent); outlook.appendChild(outlookSpan); modalContent.appendChild(outlook); // open default var open = document.createElement("a"); open.id = "mailgo-open"; open.href = "#mailgo-open"; open.classList.add("mailgo-open"); open.classList.add("mailgo-default"); var openSpan = document.createElement("span"); openSpan.className = "mailgo-weight-500"; var openSpanContent = document.createTextNode("open"); openSpan.appendChild(openSpanContent); var openContent = document.createTextNode(" default"); open.appendChild(openSpan); open.appendChild(openContent); modalContent.appendChild(open); // copy var 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"); copy.appendChild(copyContent); modalContent.appendChild(copy); // by var by = document.createElement("a"); by.href = "https://mailgo.js.org?ref=mailgo-modal"; by.className = "mailgo-by"; by.target = "_blank"; by.rel = "noopener noreferrer"; var 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 modalBackground.addEventListener("click", hideMailgo); }; /** * mailgoRender * function to render a single mailgo */ var mailgoRender = function mailgoRender(mailgo) { var mail = "", url = "", 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()); mailtoHref = mailgo.href; url = new URL(mailtoHref); var urlParams = new URLSearchParams(url.search); // optional parameters for the email cc = urlParams.get("cc"); 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"); mailtoHref = MAILTO + encodeURIComponent(mail); url = new URL(mailtoHref); // 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 (!validateEmail(mail)) return; // if cc, bcc is not valid cc, bcc = "" if (!validateEmail(cc)) cc = ""; if (!validateEmail(bcc)) bcc = ""; // information var titleEl = getE("mailgo-title"); var detailsEl = getE("mailgo-details"); var ccEl = getE("mailgo-cc"); var ccValueEl = getE("mailgo-cc-value"); var bccEl = getE("mailgo-bcc"); var bccValueEl = getE("mailgo-bcc-value"); var subjectEl = getE("mailgo-subject"); var subjectValueEl = getE("mailgo-subject-value"); var bodyEl = getE("mailgo-body"); var bodyValueEl = getE("mailgo-body-value"); // actions var gmailButton = getE("mailgo-gmail"); var outlookButton = getE("mailgo-outlook"); var openButton = getE("mailgo-open"); var copyButton = getE("mailgo-copy"); // the title of the modal (email address) titleEl.textContent = mail; // add the details if provided cc ? (ccEl.style.display = "block", ccValueEl.textContent = cc) : ccEl.style.display = "none"; bcc ? (bccEl.style.display = "block", bccValueEl.textContent = bcc) : 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", function () { return actions.openGmail(mailtoHref); }); outlookButton.addEventListener("click", function () { return actions.openOutlook(mail, subject, bodyMail); }); var encEmail = encodeEmail(mail); openButton.addEventListener("click", function () { return actions.openDefault(encEmail); }); copyButton.addEventListener("click", function () { return actions.copy(mail, copyButton); }); // show the mailgo showMailgo(); // listener keyDown document.addEventListener("keydown", function () { return mailgoKeydown(mail, cc, bcc, subject, bodyMail, url, mailtoHref, encEmail, copyButton); }); }; // actions var actions = { openGmail: function openGmail(mailtoHref) { var gmailUrl = "https://mail.google.com/mail?extsrc=mailto&url=" + encodeURIComponent(mailtoHref); window.open(gmailUrl, "_blank"); }, openOutlook: function openOutlook(mail, subject, bodyMail) { var outlookUrl = "https://outlook.live.com/owa/?path=/mail/action/compose&to=" + encodeURIComponent(mail); if (subject) outlookUrl = outlookUrl.concat("&subject=" + subject); if (bodyMail) outlookUrl = outlookUrl.concat("&body=" + bodyMail); window.open(outlookUrl, "_blank"); }, openDefault: function openDefault(encEmail) { mailToEncoded(encEmail); }, copy: function copy(mail, copyButton) { copyToClipboard(mail); copyButton.textContent = "copied"; setTimeout(function () { return copyButton.textContent = "copy"; }, 999); } }; // function that returns if an element is a mailgo var isMailgo = function isMailgo(element) { return (// first case: it is an element with "mailto:..." in href and no no-mailgo in classList element.href && element.href.toLowerCase().startsWith(MAILTO) && !element.classList.contains("no-mailgo") || // second case: the href=#mailgo element.href && element.getAttribute("href").toLowerCase() === "#mailgo" || // third case: the classList contains mailgo element.classList && element.classList.contains("mailgo") ); }; /** * mailgoCheckRender * function to check if an element is mailgo-enabled or not referencing to the old * document.querySelectorAll( * 'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' * ); */ var mailgoCheckRender = function mailgoCheckRender(event) { // check if the id=mailgo exists in the body if (!document.contains(getE("mailgo"))) return; // the path of the event var path = event.path || event.composedPath && event.composedPath() || composedPath(event.target); if (path) { path.forEach(function (element) { // go in the event.path to find if the user has clicked on a mailgo element if (isMailgo(element)) { // stop the normal execution of the element click event.preventDefault(); // render mailgo mailgoRender(element); return; } }); } return; }; /** * mailgoKeydown * function to manage the keydown event when the modal is showing */ var mailgoKeydown = function mailgoKeydown(mail, cc, bcc, subject, bodyMail, url, mailtoHref, encEmail, copyButton) { // if mailgo is not showing do nothing if (!mailgoIsShowing()) return; switch (event.keyCode) { case 27: // Escape hideMailgo(); break; case 71: // g -> open GMail actions.openGmail(mailtoHref); break; case 79: // o -> open Outlook actions.openOutlook(mail, subject, bodyMail); break; case 32: case 13: // spacebar or enter -> open default actions.openDefault(encEmail); break; case 67: // c -> copy actions.copy(mail, copyButton); break; default: return; } return; }; // DOMContentLoaded -> mailgoInit (creates the modal) document.addEventListener("DOMContentLoaded", mailgoInit); // event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered document.addEventListener("click", mailgoCheckRender); // validate the email with regex var validateEmail = 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); }; // copy of a string var copyToClipboard = function copyToClipboard(str) { var 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; el.select(); document.execCommand("copy"); document.body.removeChild(el); if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); } }; // show the modal var showMailgo = function showMailgo() { return getE("mailgo").style.display = "flex"; }; // hide the modal var hideMailgo = function hideMailgo() { return getE("mailgo").style.display = "none"; }; // is the modal hidden? var mailgoIsShowing = function mailgoIsShowing() { return getE("mailgo").style.display === "flex"; }; // decrypt email var mailToEncoded = function mailToEncoded(encoded) { return window.location.href = MAILTO + atob(encoded); }; // encode email var encodeEmail = function encodeEmail(email) { return btoa(email); }; // getE shorthand var getE = function getE(id) { return document.getElementById(id); }; // custom composedPath if path or event.composedPath() are not defined var composedPath = function composedPath(el) { var path = []; while (el) { path.push(el); if (el.tagName === "HTML") { path.push(document); path.push(window); return path; } el = el.parentElement; } };