diff --git a/dist/mailgo.js b/dist/mailgo.js index dd2cac2..afbd48b 100644 --- a/dist/mailgo.js +++ b/dist/mailgo.js @@ -1,260 +1,294 @@ -const VERSION = "0.2.9"; +const VERSION = "0.3.0"; const MAILTO = "mailto:"; -mailgoInit = () => { - const styleSheet = document.createElement("link"); - styleSheet.rel = "stylesheet"; - styleSheet.type = "text/css"; - styleSheet.href = - "https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css"; - document.head.appendChild(styleSheet); +// style of mailgo +const styleSheet = document.createElement("link"); +styleSheet.rel = "stylesheet"; +styleSheet.type = "text/css"; +styleSheet.href = + "https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css"; +document.head.appendChild(styleSheet); +mailgoInit = () => { // all mailgos in the document const mailgos = document.querySelectorAll( 'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' ); - // mailgo on every element - mailgos.forEach((mailgo, index) => { - let mail = "", - mailtoHref = "", - cc = "", - bcc = "", - subject = "", - bodyMail = ""; + // modal + let modal = document.createElement("div"); + modal.id = "mailgo"; + modal.classList.add("mailgo-modal"); + modal.style.display = "none"; - // mailgo all the element with href=^"mailto:" - if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) { - mail = decodeURIComponent( - mailgo.href - .split("?")[0] - .split(MAILTO)[1] - .trim() - ); + // background + let modalBackground = document.createElement("div"); + modalBackground.className = "mailgo-modal-background"; + modal.appendChild(modalBackground); - mailtoHref = mailgo.href; - url = new URL(mailtoHref); - let urlParams = new URLSearchParams(url.search); + // modal content + let modalContent = document.createElement("div"); + modalContent.className = "mailgo-modal-content"; + modal.appendChild(modalContent); - // optional parameters for the email - cc = urlParams.get("cc"); - bcc = urlParams.get("bcc"); - subject = urlParams.get("subject"); - bodyMail = urlParams.get("body"); - } else { - // mailgo all the element with href="#mailgo" or class="mailgo" - // email = data-address + @ + data-domain - mail = - mailgo.getAttribute("data-address") + - "@" + - mailgo.getAttribute("data-domain"); - mailtoHref = MAILTO + encodeURIComponent(mail); - url = new URL(mailtoHref); - } + // title (email address) + let title = document.createElement("strong"); + title.id = "mailgo-title"; + title.className = "mailgo-title"; + modalContent.appendChild(title); - // validate the email address - if (!validateEmail(mail)) return; + // details + let details = document.createElement("div"); + details.id = "mailgo-details"; + details.className = "mailgo-details"; - // modal - let modal = document.createElement("div"); - modal.classList.add("mailgo-modal"); - modal.style.display = "none"; - modal.setAttribute("data-index", index); + let detailCc = document.createElement("p"); + detailCc.id = "mailgo-cc"; + let ccSpan = document.createElement("span"); + ccSpan.className = "mailgo-weight-500"; + let ccContent = document.createTextNode("cc "); + ccSpan.appendChild(ccContent); + let ccValue = document.createElement("span"); + ccValue.id = "mailgo-cc-value"; + detailCc.appendChild(ccSpan); + detailCc.appendChild(ccValue); + details.appendChild(detailCc); - // background - let modalBackground = document.createElement("div"); - modalBackground.className = "mailgo-modal-background"; - modal.appendChild(modalBackground); + let detailBcc = document.createElement("p"); + detailBcc.id = "mailgo-bcc"; + let bccSpan = document.createElement("span"); + bccSpan.className = "mailgo-weight-500"; + let bccContent = document.createTextNode("bcc "); + bccSpan.appendChild(bccContent); + let bccValue = document.createElement("span"); + bccValue.id = "mailgo-bcc-value"; + detailBcc.appendChild(bccSpan); + detailBcc.appendChild(bccValue); + details.appendChild(detailBcc); - // modal content - let modalContent = document.createElement("div"); - modalContent.className = "mailgo-modal-content"; - modal.appendChild(modalContent); + let detailSubject = document.createElement("p"); + detailSubject.id = "mailgo-subject"; + let subjectSpan = document.createElement("span"); + subjectSpan.className = "mailgo-weight-500"; + let subjectContent = document.createTextNode("subject"); + subjectSpan.appendChild(subjectContent); + let subjectValue = document.createElement("span"); + subjectValue.id = "mailgo-subject-value"; + detailSubject.appendChild(subjectSpan); + detailSubject.appendChild(subjectValue); + details.appendChild(detailSubject); - // title (email address) - let strong = document.createElement("strong"); - strong.className = "mailgo-title"; - let strongContent = document.createTextNode(mail); - strong.appendChild(strongContent); - modalContent.appendChild(strong); + let detailBody = document.createElement("p"); + detailBody.id = "mailgo-body"; + let bodySpan = document.createElement("span"); + bodySpan.className = "mailgo-weight-500"; + let bodyContent = document.createTextNode("body "); + bodySpan.appendChild(bodyContent); + let bodyValue = document.createElement("span"); + bodyValue.id = "mailgo-body-value"; + detailBody.appendChild(bodySpan); + detailBody.appendChild(bodyValue); + details.appendChild(detailBody); - // details - let details = document.createElement("div"); - details.className = "mailgo-details"; + modalContent.appendChild(details); - if (cc && cc != "") { - let detailCC = document.createElement("p"); - let ccSpan = document.createElement("span"); - ccSpan.className = "mailgo-weight-500"; - let ccContent = document.createTextNode("cc"); - ccSpan.appendChild(ccContent); - let ccValue = document.createTextNode(": " + cc); - detailCC.appendChild(ccSpan); - detailCC.appendChild(ccValue); - details.appendChild(detailCC); - } + // Gmail + let gmail = document.createElement("a"); + gmail.id = "mailgo-gmail"; + gmail.classList.add("mailgo-open"); + gmail.classList.add("gmail"); + let gmailContent = document.createTextNode("open in "); + gmail.appendChild(gmailContent); + let gmailSpan = document.createElement("span"); + gmailSpan.className = "mailgo-weight-500"; + let gmailSpanContent = document.createTextNode("Gmail"); + gmailSpan.appendChild(gmailSpanContent); + gmail.appendChild(gmailSpan); - if (bcc && bcc != "") { - let detailBCC = document.createElement("p"); - let bccSpan = document.createElement("span"); - bccSpan.className = "mailgo-weight-500"; - let bccContent = document.createTextNode("bcc"); - bccSpan.appendChild(bccContent); - let bccValue = document.createTextNode(": " + bcc); - detailBCC.appendChild(bccSpan); - detailBCC.appendChild(bccValue); - details.appendChild(detailBCC); - } + modalContent.appendChild(gmail); - if (subject && subject != "") { - let detailSUBJECT = document.createElement("p"); - let subjectSpan = document.createElement("span"); - subjectSpan.className = "mailgo-weight-500"; - let subjectContent = document.createTextNode("cc"); - subjectSpan.appendChild(subjectContent); - let subjectValue = document.createTextNode(": " + subject); - detailSUBJECT.appendChild(subjectSpan); - detailSUBJECT.appendChild(subjectValue); - details.appendChild(detailSUBJECT); - } + // Outlook + let outlook = document.createElement("a"); + outlook.id = "mailgo-outlook"; + outlook.classList.add("mailgo-open"); + outlook.classList.add("outlook"); + let outlookContent = document.createTextNode("open in "); + outlook.appendChild(outlookContent); + let outlookSpan = document.createElement("span"); + outlookSpan.className = "mailgo-weight-500"; + let outlookSpanContent = document.createTextNode("Outlook"); + outlookSpan.appendChild(outlookSpanContent); + outlook.appendChild(outlookSpan); - if (bodyMail && bodyMail != "") { - let detailBODY = document.createElement("p"); - let bodySpan = document.createElement("span"); - bodySpan.className = "mailgo-weight-500"; - let bodyContent = document.createTextNode("cc"); - bodySpan.appendChild(bodyContent); - let bodyValue = document.createTextNode(": " + bodyMail); - detailBODY.appendChild(bodySpan); - detailBODY.appendChild(bodyValue); - details.appendChild(detailBODY); - } + modalContent.appendChild(outlook); - modalContent.appendChild(details); + // 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"); + let openContent = document.createTextNode("open"); + open.appendChild(openContent); + modalContent.appendChild(open); - // Gmail - let gmail = document.createElement("a"); - gmail.href = - "https://mail.google.com/mail?extsrc=mailto&url=" + - encodeURIComponent(mailtoHref); - gmail.classList.add("mailgo-open"); - gmail.classList.add("gmail"); - let gmailContent = document.createTextNode("open in "); - gmail.appendChild(gmailContent); - let gmailSpan = document.createElement("span"); - gmailSpan.className = "mailgo-weight-500"; - let gmailSpanContent = document.createTextNode("Gmail"); - gmailSpan.appendChild(gmailSpanContent); - gmail.appendChild(gmailSpan); + // 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"); + let copyContent = document.createTextNode("copy"); + copy.appendChild(copyContent); + modalContent.appendChild(copy); - modalContent.appendChild(gmail); + // 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); - // Outlook - let outlook = document.createElement("a"); - outlook.href = - "https://outlook.office.com/owa/?rru=compose&to=" + - encodeURIComponent(mail) + - url.search.replace(/^[$]/, "&"); - outlook.classList.add("mailgo-open"); - outlook.classList.add("outlook"); - let outlookContent = document.createTextNode("open in "); - outlook.appendChild(outlookContent); - let outlookSpan = document.createElement("span"); - outlookSpan.className = "mailgo-weight-500"; - let outlookSpanContent = document.createTextNode("Outlook"); - outlookSpan.appendChild(outlookSpanContent); - outlook.appendChild(outlookSpan); + document.body.appendChild(modal); - modalContent.appendChild(outlook); + // allow the escape key to hide the modal + mailgo.addEventListener( + "keydown", + event => { + if (event.keyCode === 27) { + hideMailgo(); + } + }, + false + ); - // open default - let open = document.createElement("a"); - - open.href = "#mailgo-open"; - let encEmail = encodeEmail(mail); - open.addEventListener( - "click", - () => { - mailToEncoded(encEmail); - }, - false - ); - - open.classList.add("mailgo-open"); - open.classList.add("mailgo-weight-500"); - let openContent = document.createTextNode("open"); - open.appendChild(openContent); - modalContent.appendChild(open); - - // copy - let copy = document.createElement("a"); - copy.href = "#mailgo-copy"; - copy.classList.add("mailgo-copy"); - copy.classList.add("mailgo-weight-500"); - let copyContent = document.createTextNode("copy"); - copy.appendChild(copyContent); - copy.addEventListener( - "click", - event => { - copyToClipboard(mail); - copy.textContent = "copied"; - setTimeout(() => { - copy.textContent = "copy"; - }, 999); - }, - false - ); - modalContent.appendChild(copy); - - // 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); - - // add the modal after the element - mailgo.parentNode.insertBefore(modal, mailgo.nextSibling); - - // show the modal on every element click - mailgo.addEventListener( - "click", - event => { - // clock the mailto: classic behaviour - event.preventDefault(); - - // modal is now showing - showMailgo(mailgo.nextElementSibling); - }, - false - ); - - // allow the escape key to hide the modal - mailgo.addEventListener( - "keydown", - event => { - if (event.keyCode === 27) { - hideMailgo(mailgo.nextElementSibling); - } - }, - false - ); - - // every click outside the modal will hide the modal - modalBackground.addEventListener( - "click", - event => hideMailgo(mailgo.nextElementSibling), - false - ); - }); + // every click outside the modal will hide the modal + modalBackground.addEventListener( + "click", + event => { + hideMailgo(); + }, + false + ); }; -// DOMContentLoaded -> mailgoInit +mailgoRender = mailgo => { + let mail = "", + mailtoHref = "", + cc = "", + bcc = "", + subject = "", + bodyMail = ""; + + // mailgo all the element with 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); + let 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 { + // mailgo all the element with href="#mailgo" or class="mailgo" + // email = data-address + @ + data-domain + mail = + mailgo.getAttribute("data-address") + + "@" + + mailgo.getAttribute("data-domain"); + mailtoHref = MAILTO + encodeURIComponent(mail); + url = new URL(mailtoHref); + } + + // validate the email address + if (!validateEmail(mail)) return; + + titleEl = document.getElementById("mailgo-title"); + detailsEl = document.getElementById("mailgo-details"); + ccEl = document.getElementById("mailgo-cc"); + ccValueEl = document.getElementById("mailgo-cc-value"); + bccEl = document.getElementById("mailgo-bcc"); + bccValueEl = document.getElementById("mailgo-bcc-value"); + subjectEl = document.getElementById("mailgo-subject"); + subjectValueEl = document.getElementById("mailgo-subject-value"); + bodyEl = document.getElementById("mailgo-body"); + bodyValueEl = document.getElementById("mailgo-body-value"); + + gmailButton = document.getElementById("mailgo-gmail"); + outlookButton = document.getElementById("mailgo-outlook"); + openButton = document.getElementById("mailgo-open"); + copyButton = document.getElementById("mailgo-copy"); + + titleEl.textContent = mail; + + cc ? (ccValueEl.textContent = cc) : (ccEl.style.display = "none"); + bcc ? (bccValueEl.textContent = bcc) : (bccEl.style.display = "none"); + subject + ? (subjectValueEl.textContent = subject) + : (subjectEl.style.display = "none"); + bodyMail + ? (bodyValueEl.textContent = bodyMail) + : (bodyEl.style.display = "none"); + + 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 + ); + + showMailgo(); +}; + +// DOMContentLoaded -> mailgoInit (creates the modal) document.addEventListener("DOMContentLoaded", mailgoInit, false); -// validate the email with refgex +document.addEventListener( + "click", + event => { + if (event.target.href && event.target.href.startsWith("mailto:")) { + event.preventDefault(); + mailgoRender(event.target); + } + }, + false +); + +// validate the email with regex 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); @@ -282,10 +316,10 @@ copyToClipboard = str => { }; // show the modal -showMailgo = m => (m.style.display = "flex"); +showMailgo = () => (document.getElementById("mailgo").style.display = "flex"); // hide the modal -hideMailgo = m => (m.style.display = "none"); +hideMailgo = () => (document.getElementById("mailgo").style.display = "none"); // decrypt email mailToEncoded = encoded => (window.location.href = MAILTO + atob(encoded)); diff --git a/dist/mailgo.min.js b/dist/mailgo.min.js index 8ad7ca7..fcff808 100644 --- a/dist/mailgo.min.js +++ b/dist/mailgo.min.js @@ -1 +1 @@ -const VERSION="0.2.9",MAILTO="mailto:";mailgoInit=(()=>{const e=document.createElement("link");e.rel="stylesheet",e.type="text/css",e.href="https://unpkg.com/mailgo@0.2.9/dist/mailgo.min.css",document.head.appendChild(e),document.querySelectorAll('a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo').forEach((e,t)=>{let a="",l="",d="",n="",o="",i="";if(e.href&&e.href.toLowerCase().startsWith(MAILTO)){a=decodeURIComponent(e.href.split("?")[0].split(MAILTO)[1].trim()),l=e.href,url=new URL(l);let t=new URLSearchParams(url.search);d=t.get("cc"),n=t.get("bcc"),o=t.get("subject"),i=t.get("body")}else a=e.getAttribute("data-address")+"@"+e.getAttribute("data-domain"),l=MAILTO+encodeURIComponent(a),url=new URL(l);if(!validateEmail(a))return;let c=document.createElement("div");c.classList.add("mailgo-modal"),c.style.display="none",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 s=document.createElement("strong");s.className="mailgo-title";let r=document.createTextNode(a);s.appendChild(r),p.appendChild(s);let h=document.createElement("div");if(h.className="mailgo-details",d&&""!=d){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("cc");t.appendChild(a);let l=document.createTextNode(": "+d);e.appendChild(t),e.appendChild(l),h.appendChild(e)}if(n&&""!=n){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("bcc");t.appendChild(a);let l=document.createTextNode(": "+n);e.appendChild(t),e.appendChild(l),h.appendChild(e)}if(o&&""!=o){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("cc");t.appendChild(a);let l=document.createTextNode(": "+o);e.appendChild(t),e.appendChild(l),h.appendChild(e)}if(i&&""!=i){let e=document.createElement("p"),t=document.createElement("span");t.className="mailgo-weight-500";let a=document.createTextNode("cc");t.appendChild(a);let l=document.createTextNode(": "+i);e.appendChild(t),e.appendChild(l),h.appendChild(e)}p.appendChild(h);let u=document.createElement("a");u.href="https://mail.google.com/mail?extsrc=mailto&url="+encodeURIComponent(l),u.classList.add("mailgo-open"),u.classList.add("gmail");let g=document.createTextNode("open in ");u.appendChild(g);let C=document.createElement("span");C.className="mailgo-weight-500";let E=document.createTextNode("Gmail");C.appendChild(E),u.appendChild(C),p.appendChild(u);let x=document.createElement("a");x.href="https://outlook.office.com/owa/?rru=compose&to="+encodeURIComponent(a)+url.search.replace(/^[$]/,"&"),x.classList.add("mailgo-open"),x.classList.add("outlook");let N=document.createTextNode("open in ");x.appendChild(N);let f=document.createElement("span");f.className="mailgo-weight-500";let T=document.createTextNode("Outlook");f.appendChild(T),x.appendChild(f),p.appendChild(x);let y=document.createElement("a");y.href="#mailgo-open";let L=encodeEmail(a);y.addEventListener("click",()=>{mailToEncoded(L)},!1),y.classList.add("mailgo-open"),y.classList.add("mailgo-weight-500");let b=document.createTextNode("open");y.appendChild(b),p.appendChild(y);let w=document.createElement("a");w.href="#mailgo-copy",w.classList.add("mailgo-copy"),w.classList.add("mailgo-weight-500");let v=document.createTextNode("copy");w.appendChild(v),w.addEventListener("click",e=>{copyToClipboard(a),w.textContent="copied",setTimeout(()=>{w.textContent="copy"},999)},!1),p.appendChild(w);let A=document.createElement("a");A.href="https://mailgo.js.org",A.className="mailgo-by",A.target="_blank";let k=document.createTextNode("mailgo.js.org");A.appendChild(k),p.appendChild(A),e.parentNode.insertBefore(c,e.nextSibling),e.addEventListener("click",t=>{t.preventDefault(),showMailgo(e.nextElementSibling)},!1),e.addEventListener("keydown",t=>{27===t.keyCode&&hideMailgo(e.nextElementSibling)},!1),m.addEventListener("click",t=>hideMailgo(e.nextElementSibling),!1)})}),document.addEventListener("DOMContentLoaded",mailgoInit,!1),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)}),copyToClipboard=(e=>{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t);const a=document.getSelection().rangeCount>0&&document.getSelection().getRangeAt(0);t.select(),document.execCommand("copy"),document.body.removeChild(t),a&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(a))}),showMailgo=(e=>e.style.display="flex"),hideMailgo=(e=>e.style.display="none"),mailToEncoded=(e=>window.location.href=MAILTO+atob(e)),encodeEmail=(e=>btoa(e)); \ No newline at end of file +const VERSION="0.3.0",MAILTO="mailto:",styleSheet=document.createElement("link");styleSheet.rel="stylesheet",styleSheet.type="text/css",styleSheet.href="https://unpkg.com/mailgo@0.3.0/dist/mailgo.min.css",document.head.appendChild(styleSheet),mailgoInit=(()=>{document.querySelectorAll('a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo');let e=document.createElement("div");e.id="mailgo",e.classList.add("mailgo-modal"),e.style.display="none";let t=document.createElement("div");t.className="mailgo-modal-background",e.appendChild(t);let l=document.createElement("div");l.className="mailgo-modal-content",e.appendChild(l);let o=document.createElement("strong");o.id="mailgo-title",o.className="mailgo-title",l.appendChild(o);let a=document.createElement("div");a.id="mailgo-details",a.className="mailgo-details";let d=document.createElement("p");d.id="mailgo-cc";let n=document.createElement("span");n.className="mailgo-weight-500";let c=document.createTextNode("cc ");n.appendChild(c);let i=document.createElement("span");i.id="mailgo-cc-value",d.appendChild(n),d.appendChild(i),a.appendChild(d);let m=document.createElement("p");m.id="mailgo-bcc";let s=document.createElement("span");s.className="mailgo-weight-500";let p=document.createTextNode("bcc ");s.appendChild(p);let u=document.createElement("span");u.id="mailgo-bcc-value",m.appendChild(s),m.appendChild(u),a.appendChild(m);let g=document.createElement("p");g.id="mailgo-subject";let r=document.createElement("span");r.className="mailgo-weight-500";let h=document.createTextNode("subject");r.appendChild(h);let E=document.createElement("span");E.id="mailgo-subject-value",g.appendChild(r),g.appendChild(E),a.appendChild(g);let y=document.createElement("p");y.id="mailgo-body";let C=document.createElement("span");C.className="mailgo-weight-500";let b=document.createTextNode("body ");C.appendChild(b);let I=document.createElement("span");I.id="mailgo-body-value",y.appendChild(C),y.appendChild(I),a.appendChild(y),l.appendChild(a);let B=document.createElement("a");B.id="mailgo-gmail",B.classList.add("mailgo-open"),B.classList.add("gmail");let L=document.createTextNode("open in ");B.appendChild(L);let v=document.createElement("span");v.className="mailgo-weight-500";let x=document.createTextNode("Gmail");v.appendChild(x),B.appendChild(v),l.appendChild(B);let N=document.createElement("a");N.id="mailgo-outlook",N.classList.add("mailgo-open"),N.classList.add("outlook");let f=document.createTextNode("open in ");N.appendChild(f);let T=document.createElement("span");T.className="mailgo-weight-500";let w=document.createTextNode("Outlook");T.appendChild(w),N.appendChild(T),l.appendChild(N);let k=document.createElement("a");k.id="mailgo-open",k.href="#mailgo-open",k.classList.add("mailgo-open"),k.classList.add("mailgo-weight-500");let A=document.createTextNode("open");k.appendChild(A),l.appendChild(k);let R=document.createElement("a");R.id="mailgo-copy",R.href="#mailgo-copy",R.classList.add("mailgo-copy"),R.classList.add("mailgo-weight-500");let j=document.createTextNode("copy");R.appendChild(j),l.appendChild(R);let S=document.createElement("a");S.href="https://mailgo.js.org",S.className="mailgo-by",S.target="_blank";let M=document.createTextNode("mailgo.js.org");S.appendChild(M),l.appendChild(S),document.body.appendChild(e),mailgo.addEventListener("keydown",e=>{27===e.keyCode&&hideMailgo()},!1),t.addEventListener("click",e=>{hideMailgo()},!1)}),mailgoRender=(e=>{let t="",l="",o="",a="",d="",n="";if(e.href&&e.href.toLowerCase().startsWith(MAILTO)){t=decodeURIComponent(e.href.split("?")[0].split(MAILTO)[1].trim()),l=e.href,url=new URL(l);let c=new URLSearchParams(url.search);o=c.get("cc"),a=c.get("bcc"),d=c.get("subject"),n=c.get("body")}else t=e.getAttribute("data-address")+"@"+e.getAttribute("data-domain"),l=MAILTO+encodeURIComponent(t),url=new URL(l);if(!validateEmail(t))return;titleEl=document.getElementById("mailgo-title"),detailsEl=document.getElementById("mailgo-details"),ccEl=document.getElementById("mailgo-cc"),ccValueEl=document.getElementById("mailgo-cc-value"),bccEl=document.getElementById("mailgo-bcc"),bccValueEl=document.getElementById("mailgo-bcc-value"),subjectEl=document.getElementById("mailgo-subject"),subjectValueEl=document.getElementById("mailgo-subject-value"),bodyEl=document.getElementById("mailgo-body"),bodyValueEl=document.getElementById("mailgo-body-value"),gmailButton=document.getElementById("mailgo-gmail"),outlookButton=document.getElementById("mailgo-outlook"),openButton=document.getElementById("mailgo-open"),copyButton=document.getElementById("mailgo-copy"),titleEl.textContent=t,o?ccValueEl.textContent=o:ccEl.style.display="none",a?bccValueEl.textContent=a:bccEl.style.display="none",d?subjectValueEl.textContent=d:subjectEl.style.display="none",n?bodyValueEl.textContent=n:bodyEl.style.display="none",gmailButton.href="https://mail.google.com/mail?extsrc=mailto&url="+encodeURIComponent(l),outlookButton.href="https://outlook.office.com/owa/?rru=compose&to="+encodeURIComponent(t)+url.search.replace(/^[$]/,"&");let c=encodeEmail(t);openButton.addEventListener("click",()=>{mailToEncoded(c)},!1),copyButton.addEventListener("click",e=>{copyToClipboard(t),copyButton.textContent="copied",setTimeout(()=>{copyButton.textContent="copy"},999)},!1),showMailgo()}),document.addEventListener("DOMContentLoaded",mailgoInit,!1),document.addEventListener("click",e=>{e.target.href&&e.target.href.startsWith("mailto:")&&(e.preventDefault(),mailgoRender(e.target))},!1),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)}),copyToClipboard=(e=>{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t);const l=document.getSelection().rangeCount>0&&document.getSelection().getRangeAt(0);t.select(),document.execCommand("copy"),document.body.removeChild(t),l&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(l))}),showMailgo=(()=>document.getElementById("mailgo").style.display="flex"),hideMailgo=(()=>document.getElementById("mailgo").style.display="none"),mailToEncoded=(e=>window.location.href=MAILTO+atob(e)),encodeEmail=(e=>btoa(e)); \ No newline at end of file diff --git a/src/mailgo.js b/src/mailgo.js index 56e0f91..6a09840 100644 --- a/src/mailgo.js +++ b/src/mailgo.js @@ -1,260 +1,295 @@ const VERSION = "MAILGO_VERSION"; const MAILTO = "mailto:"; -mailgoInit = () => { - const styleSheet = document.createElement("link"); - styleSheet.rel = "stylesheet"; - styleSheet.type = "text/css"; - styleSheet.href = - "https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css"; - document.head.appendChild(styleSheet); +// style of mailgo +const styleSheet = document.createElement("link"); +styleSheet.rel = "stylesheet"; +styleSheet.type = "text/css"; +styleSheet.href = + "https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css"; +document.head.appendChild(styleSheet); +mailgoInit = () => { // all mailgos in the document const mailgos = document.querySelectorAll( 'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' ); - // mailgo on every element - mailgos.forEach((mailgo, index) => { - let mail = "", - mailtoHref = "", - cc = "", - bcc = "", - subject = "", - bodyMail = ""; + // modal + let modal = document.createElement("div"); + modal.id = "mailgo"; + modal.classList.add("mailgo-modal"); + modal.style.display = "none"; - // mailgo all the element with href=^"mailto:" - if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) { - mail = decodeURIComponent( - mailgo.href - .split("?")[0] - .split(MAILTO)[1] - .trim() - ); + // background + let modalBackground = document.createElement("div"); + modalBackground.className = "mailgo-modal-background"; + modal.appendChild(modalBackground); - mailtoHref = mailgo.href; - url = new URL(mailtoHref); - let urlParams = new URLSearchParams(url.search); + // modal content + let modalContent = document.createElement("div"); + modalContent.className = "mailgo-modal-content"; + modal.appendChild(modalContent); - // optional parameters for the email - cc = urlParams.get("cc"); - bcc = urlParams.get("bcc"); - subject = urlParams.get("subject"); - bodyMail = urlParams.get("body"); - } else { - // mailgo all the element with href="#mailgo" or class="mailgo" - // email = data-address + @ + data-domain - mail = - mailgo.getAttribute("data-address") + - "@" + - mailgo.getAttribute("data-domain"); - mailtoHref = MAILTO + encodeURIComponent(mail); - url = new URL(mailtoHref); - } + // title (email address) + let title = document.createElement("strong"); + title.id = "mailgo-title"; + title.className = "mailgo-title"; + modalContent.appendChild(title); - // validate the email address - if (!validateEmail(mail)) return; + // details + let details = document.createElement("div"); + details.id = "mailgo-details"; + details.className = "mailgo-details"; - // modal - let modal = document.createElement("div"); - modal.classList.add("mailgo-modal"); - modal.style.display = "none"; - modal.setAttribute("data-index", index); + let detailCc = document.createElement("p"); + detailCc.id = "mailgo-cc"; + let ccSpan = document.createElement("span"); + ccSpan.className = "mailgo-weight-500"; + let ccContent = document.createTextNode("cc "); + ccSpan.appendChild(ccContent); + let ccValue = document.createElement("span"); + ccValue.id = "mailgo-cc-value"; + detailCc.appendChild(ccSpan); + detailCc.appendChild(ccValue); + details.appendChild(detailCc); - // background - let modalBackground = document.createElement("div"); - modalBackground.className = "mailgo-modal-background"; - modal.appendChild(modalBackground); + let detailBcc = document.createElement("p"); + detailBcc.id = "mailgo-bcc"; + let bccSpan = document.createElement("span"); + bccSpan.className = "mailgo-weight-500"; + let bccContent = document.createTextNode("bcc "); + bccSpan.appendChild(bccContent); + let bccValue = document.createElement("span"); + bccValue.id = "mailgo-bcc-value"; + detailBcc.appendChild(bccSpan); + detailBcc.appendChild(bccValue); + details.appendChild(detailBcc); - // modal content - let modalContent = document.createElement("div"); - modalContent.className = "mailgo-modal-content"; - modal.appendChild(modalContent); + let detailSubject = document.createElement("p"); + detailSubject.id = "mailgo-subject"; + let subjectSpan = document.createElement("span"); + subjectSpan.className = "mailgo-weight-500"; + let subjectContent = document.createTextNode("subject"); + subjectSpan.appendChild(subjectContent); + let subjectValue = document.createElement("span"); + subjectValue.id = "mailgo-subject-value"; + detailSubject.appendChild(subjectSpan); + detailSubject.appendChild(subjectValue); + details.appendChild(detailSubject); - // title (email address) - let strong = document.createElement("strong"); - strong.className = "mailgo-title"; - let strongContent = document.createTextNode(mail); - strong.appendChild(strongContent); - modalContent.appendChild(strong); + let detailBody = document.createElement("p"); + detailBody.id = "mailgo-body"; + let bodySpan = document.createElement("span"); + bodySpan.className = "mailgo-weight-500"; + let bodyContent = document.createTextNode("body "); + bodySpan.appendChild(bodyContent); + let bodyValue = document.createElement("span"); + bodyValue.id = "mailgo-body-value"; + detailBody.appendChild(bodySpan); + detailBody.appendChild(bodyValue); + details.appendChild(detailBody); - // details - let details = document.createElement("div"); - details.className = "mailgo-details"; + modalContent.appendChild(details); - if (cc && cc != "") { - let detailCC = document.createElement("p"); - let ccSpan = document.createElement("span"); - ccSpan.className = "mailgo-weight-500"; - let ccContent = document.createTextNode("cc"); - ccSpan.appendChild(ccContent); - let ccValue = document.createTextNode(": " + cc); - detailCC.appendChild(ccSpan); - detailCC.appendChild(ccValue); - details.appendChild(detailCC); - } + // Gmail + let gmail = document.createElement("a"); + gmail.id = "mailgo-gmail"; + gmail.classList.add("mailgo-open"); + gmail.classList.add("gmail"); + let gmailContent = document.createTextNode("open in "); + gmail.appendChild(gmailContent); + let gmailSpan = document.createElement("span"); + gmailSpan.className = "mailgo-weight-500"; + let gmailSpanContent = document.createTextNode("Gmail"); + gmailSpan.appendChild(gmailSpanContent); + gmail.appendChild(gmailSpan); - if (bcc && bcc != "") { - let detailBCC = document.createElement("p"); - let bccSpan = document.createElement("span"); - bccSpan.className = "mailgo-weight-500"; - let bccContent = document.createTextNode("bcc"); - bccSpan.appendChild(bccContent); - let bccValue = document.createTextNode(": " + bcc); - detailBCC.appendChild(bccSpan); - detailBCC.appendChild(bccValue); - details.appendChild(detailBCC); - } + modalContent.appendChild(gmail); - if (subject && subject != "") { - let detailSUBJECT = document.createElement("p"); - let subjectSpan = document.createElement("span"); - subjectSpan.className = "mailgo-weight-500"; - let subjectContent = document.createTextNode("cc"); - subjectSpan.appendChild(subjectContent); - let subjectValue = document.createTextNode(": " + subject); - detailSUBJECT.appendChild(subjectSpan); - detailSUBJECT.appendChild(subjectValue); - details.appendChild(detailSUBJECT); - } + // Outlook + let outlook = document.createElement("a"); + outlook.id = "mailgo-outlook"; + outlook.classList.add("mailgo-open"); + outlook.classList.add("outlook"); + let outlookContent = document.createTextNode("open in "); + outlook.appendChild(outlookContent); + let outlookSpan = document.createElement("span"); + outlookSpan.className = "mailgo-weight-500"; + let outlookSpanContent = document.createTextNode("Outlook"); + outlookSpan.appendChild(outlookSpanContent); + outlook.appendChild(outlookSpan); - if (bodyMail && bodyMail != "") { - let detailBODY = document.createElement("p"); - let bodySpan = document.createElement("span"); - bodySpan.className = "mailgo-weight-500"; - let bodyContent = document.createTextNode("cc"); - bodySpan.appendChild(bodyContent); - let bodyValue = document.createTextNode(": " + bodyMail); - detailBODY.appendChild(bodySpan); - detailBODY.appendChild(bodyValue); - details.appendChild(detailBODY); - } + modalContent.appendChild(outlook); - modalContent.appendChild(details); + // 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"); + let openContent = document.createTextNode("open"); + open.appendChild(openContent); + modalContent.appendChild(open); - // Gmail - let gmail = document.createElement("a"); - gmail.href = - "https://mail.google.com/mail?extsrc=mailto&url=" + - encodeURIComponent(mailtoHref); - gmail.classList.add("mailgo-open"); - gmail.classList.add("gmail"); - let gmailContent = document.createTextNode("open in "); - gmail.appendChild(gmailContent); - let gmailSpan = document.createElement("span"); - gmailSpan.className = "mailgo-weight-500"; - let gmailSpanContent = document.createTextNode("Gmail"); - gmailSpan.appendChild(gmailSpanContent); - gmail.appendChild(gmailSpan); + // 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"); + let copyContent = document.createTextNode("copy"); + copy.appendChild(copyContent); + modalContent.appendChild(copy); - modalContent.appendChild(gmail); + // 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); - // Outlook - let outlook = document.createElement("a"); - outlook.href = - "https://outlook.office.com/owa/?rru=compose&to=" + - encodeURIComponent(mail) + - url.search.replace(/^[$]/, "&"); - outlook.classList.add("mailgo-open"); - outlook.classList.add("outlook"); - let outlookContent = document.createTextNode("open in "); - outlook.appendChild(outlookContent); - let outlookSpan = document.createElement("span"); - outlookSpan.className = "mailgo-weight-500"; - let outlookSpanContent = document.createTextNode("Outlook"); - outlookSpan.appendChild(outlookSpanContent); - outlook.appendChild(outlookSpan); + document.body.appendChild(modal); - modalContent.appendChild(outlook); + // allow the escape key to hide the modal + mailgo.addEventListener( + "keydown", + event => { + if (event.keyCode === 27) { + hideMailgo(); + } + }, + false + ); - // open default - let open = document.createElement("a"); - - open.href = "#mailgo-open"; - let encEmail = encodeEmail(mail); - open.addEventListener( - "click", - () => { - mailToEncoded(encEmail); - }, - false - ); - - open.classList.add("mailgo-open"); - open.classList.add("mailgo-weight-500"); - let openContent = document.createTextNode("open"); - open.appendChild(openContent); - modalContent.appendChild(open); - - // copy - let copy = document.createElement("a"); - copy.href = "#mailgo-copy"; - copy.classList.add("mailgo-copy"); - copy.classList.add("mailgo-weight-500"); - let copyContent = document.createTextNode("copy"); - copy.appendChild(copyContent); - copy.addEventListener( - "click", - event => { - copyToClipboard(mail); - copy.textContent = "copied"; - setTimeout(() => { - copy.textContent = "copy"; - }, 999); - }, - false - ); - modalContent.appendChild(copy); - - // 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); - - // add the modal after the element - mailgo.parentNode.insertBefore(modal, mailgo.nextSibling); - - // show the modal on every element click - mailgo.addEventListener( - "click", - event => { - // clock the mailto: classic behaviour - event.preventDefault(); - - // modal is now showing - showMailgo(mailgo.nextElementSibling); - }, - false - ); - - // allow the escape key to hide the modal - mailgo.addEventListener( - "keydown", - event => { - if (event.keyCode === 27) { - hideMailgo(mailgo.nextElementSibling); - } - }, - false - ); - - // every click outside the modal will hide the modal - modalBackground.addEventListener( - "click", - event => hideMailgo(mailgo.nextElementSibling), - false - ); - }); + // every click outside the modal will hide the modal + modalBackground.addEventListener( + "click", + event => { + hideMailgo(); + }, + false + ); }; -// DOMContentLoaded -> mailgoInit +mailgoRender = mailgo => { + let mail = "", + mailtoHref = "", + cc = "", + bcc = "", + subject = "", + bodyMail = ""; + + // mailgo all the element with 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); + let 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 { + // mailgo all the element with href="#mailgo" or class="mailgo" + // email = data-address + @ + data-domain + mail = + mailgo.getAttribute("data-address") + + "@" + + mailgo.getAttribute("data-domain"); + mailtoHref = MAILTO + encodeURIComponent(mail); + url = new URL(mailtoHref); + } + + // validate the email address + if (!validateEmail(mail)) return; + + titleEl = document.getElementById("mailgo-title"); + detailsEl = document.getElementById("mailgo-details"); + ccEl = document.getElementById("mailgo-cc"); + ccValueEl = document.getElementById("mailgo-cc-value"); + bccEl = document.getElementById("mailgo-bcc"); + bccValueEl = document.getElementById("mailgo-bcc-value"); + subjectEl = document.getElementById("mailgo-subject"); + subjectValueEl = document.getElementById("mailgo-subject-value"); + bodyEl = document.getElementById("mailgo-body"); + bodyValueEl = document.getElementById("mailgo-body-value"); + + gmailButton = document.getElementById("mailgo-gmail"); + outlookButton = document.getElementById("mailgo-outlook"); + openButton = document.getElementById("mailgo-open"); + copyButton = document.getElementById("mailgo-copy"); + + titleEl.textContent = mail; + + cc ? (ccValueEl.textContent = cc) : (ccEl.style.display = "none"); + bcc ? (bccValueEl.textContent = bcc) : (bccEl.style.display = "none"); + subject + ? (subjectValueEl.textContent = subject) + : (subjectEl.style.display = "none"); + bodyMail + ? (bodyValueEl.textContent = bodyMail) + : (bodyEl.style.display = "none"); + + 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 + ); + + showMailgo(); +}; + +// DOMContentLoaded -> mailgoInit (creates the modal) document.addEventListener("DOMContentLoaded", mailgoInit, false); -// validate the email with refgex +document.addEventListener( + "click", + event => { + // TODO add all the possibilities + if (event.target.href && event.target.href.startsWith("mailto:")) { + event.preventDefault(); + mailgoRender(event.target); + } + }, + false +); + +// validate the email with regex 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); @@ -282,10 +317,10 @@ copyToClipboard = str => { }; // show the modal -showMailgo = m => (m.style.display = "flex"); +showMailgo = () => (document.getElementById("mailgo").style.display = "flex"); // hide the modal -hideMailgo = m => (m.style.display = "none"); +hideMailgo = () => (document.getElementById("mailgo").style.display = "none"); // decrypt email mailToEncoded = encoded => (window.location.href = MAILTO + atob(encoded));