diff --git a/dist/mailgo.js b/dist/mailgo.js index c125e25..2ca64fc 100644 --- a/dist/mailgo.js +++ b/dist/mailgo.js @@ -1,7 +1,7 @@ const VERSION = "0.3.0"; const MAILTO = "mailto:"; -// style of mailgo +// mailgo style const styleSheet = document.createElement("link"); styleSheet.rel = "stylesheet"; styleSheet.type = "text/css"; @@ -9,12 +9,11 @@ styleSheet.href = "https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css"; document.head.appendChild(styleSheet); +/** + * mailgoInit + * the function that creates the mailgo element in DOM + */ mailgoInit = () => { - // all mailgos in the document - const mailgos = document.querySelectorAll( - 'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' - ); - // modal let modal = document.createElement("div"); modal.id = "mailgo"; @@ -151,6 +150,7 @@ mailgoInit = () => { by.appendChild(textBy); modalContent.appendChild(by); + // add the modal at the end of the body document.body.appendChild(modal); // allow the escape key to hide the modal @@ -174,6 +174,10 @@ mailgoInit = () => { ); }; +/** + * mailgoRender + * function to render a single mailgo + */ mailgoRender = mailgo => { let mail = "", mailtoHref = "", @@ -274,20 +278,38 @@ mailgoRender = mailgo => { showMailgo(); }; +mailgoCheckRender = event => { + // the target element + let e = event.target; + + console.log(e); + + // check if the id=mailgo exists in the body + if (!document.body.contains(document.getElementById("mailgo"))) return; + + if ( + // first case: it is an element with "mailto:..." in href and no no-mailgo in classList + (e.href && + e.href.toLowerCase().startsWith(MAILTO) && + !e.classList.contains("no-mailgo")) || + // second case: the href=#mailgo + (e.href && e.href.toLowerCase() == "#mailgo") || + //third case: the classList contains mailgo + e.classList.contains("mailgo") + ) { + // stop the normal execution of the element click + event.preventDefault(); + + // render mailgo + mailgoRender(e); + } +}; + // DOMContentLoaded -> mailgoInit (creates the modal) document.addEventListener("DOMContentLoaded", mailgoInit, false); -document.addEventListener( - "click", - event => { - // TODO add all the possibilities - if (event.target.href && event.target.href.startsWith("mailto:")) { - event.preventDefault(); - mailgoRender(event.target); - } - }, - false -); +// event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered +document.addEventListener("click", mailgoCheckRender, false); // validate the email with regex validateEmail = email => { diff --git a/dist/mailgo.min.js b/dist/mailgo.min.js index fcff808..c0a03d5 100644 --- a/dist/mailgo.min.js +++ b/dist/mailgo.min.js @@ -1 +1 @@ -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 +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=(()=>{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 L=document.createElement("a");L.id="mailgo-gmail",L.classList.add("mailgo-open"),L.classList.add("gmail");let B=document.createTextNode("open in ");L.appendChild(B);let v=document.createElement("span");v.className="mailgo-weight-500";let x=document.createTextNode("Gmail");v.appendChild(x),L.appendChild(v),l.appendChild(L);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 R=document.createTextNode("open");k.appendChild(R),l.appendChild(k);let A=document.createElement("a");A.id="mailgo-copy",A.href="#mailgo-copy",A.classList.add("mailgo-copy"),A.classList.add("mailgo-weight-500");let j=document.createTextNode("copy");A.appendChild(j),l.appendChild(A);let M=document.createElement("a");M.href="https://mailgo.js.org",M.className="mailgo-by",M.target="_blank";let S=document.createTextNode("mailgo.js.org");M.appendChild(S),l.appendChild(M),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()}),mailgoCheckRender=(e=>{let t=e.target;console.log(t),document.body.contains(document.getElementById("mailgo"))&&(t.href&&t.href.toLowerCase().startsWith(MAILTO)&&!t.classList.contains("no-mailgo")||t.href&&"#mailgo"==t.href.toLowerCase()||t.classList.contains("mailgo"))&&(e.preventDefault(),mailgoRender(t))}),document.addEventListener("DOMContentLoaded",mailgoInit,!1),document.addEventListener("click",mailgoCheckRender,!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 6a09840..9a874cd 100644 --- a/src/mailgo.js +++ b/src/mailgo.js @@ -1,7 +1,7 @@ const VERSION = "MAILGO_VERSION"; const MAILTO = "mailto:"; -// style of mailgo +// mailgo style const styleSheet = document.createElement("link"); styleSheet.rel = "stylesheet"; styleSheet.type = "text/css"; @@ -9,12 +9,11 @@ styleSheet.href = "https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css"; document.head.appendChild(styleSheet); +/** + * mailgoInit + * the function that creates the mailgo element in DOM + */ mailgoInit = () => { - // all mailgos in the document - const mailgos = document.querySelectorAll( - 'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' - ); - // modal let modal = document.createElement("div"); modal.id = "mailgo"; @@ -151,6 +150,7 @@ mailgoInit = () => { by.appendChild(textBy); modalContent.appendChild(by); + // add the modal at the end of the body document.body.appendChild(modal); // allow the escape key to hide the modal @@ -174,6 +174,10 @@ mailgoInit = () => { ); }; +/** + * mailgoRender + * function to render a single mailgo + */ mailgoRender = mailgo => { let mail = "", mailtoHref = "", @@ -274,20 +278,39 @@ mailgoRender = mailgo => { showMailgo(); }; +mailgoCheckRender = event => { + // the target element + let e = event.target; + + console.log(e); + + // check if the id=mailgo exists in the body + if (!document.body.contains(document.getElementById("mailgo"))) return; + + if ( + // first case: it is an element with "mailto:..." in href and no no-mailgo in classList + (e.href && + e.href.toLowerCase().startsWith(MAILTO) && + !e.classList.contains("no-mailgo")) || + // second case: the href=#mailgo + // TODO FIX here + (e.href && e.href.toLowerCase() === "#mailgo") || + //third case: the classList contains mailgo + e.classList.contains("mailgo") + ) { + // stop the normal execution of the element click + event.preventDefault(); + + // render mailgo + mailgoRender(e); + } +}; + // DOMContentLoaded -> mailgoInit (creates the modal) document.addEventListener("DOMContentLoaded", mailgoInit, false); -document.addEventListener( - "click", - event => { - // TODO add all the possibilities - if (event.target.href && event.target.href.startsWith("mailto:")) { - event.preventDefault(); - mailgoRender(event.target); - } - }, - false -); +// event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered +document.addEventListener("click", mailgoCheckRender, false); // validate the email with regex validateEmail = email => {