diff --git a/dist/mailgo.css b/dist/mailgo.css index 2aefdca..a1963ff 100644 --- a/dist/mailgo.css +++ b/dist/mailgo.css @@ -24,7 +24,6 @@ align-items: center; flex-direction: column; overflow: hidden; - z-index: 100000; font-size: 15px; } @@ -45,6 +44,7 @@ .mailgo-modal-background { position: absolute; + z-index: 1000; top: 0; right: 0; bottom: 0; @@ -54,7 +54,8 @@ } .mailgo-modal-content { - z-index: 1000; + position: relative; + z-index: 1001; box-sizing: content-box; text-align: center; width: 200px; diff --git a/dist/mailgo.js b/dist/mailgo.js index d58268a..05ef9cc 100644 --- a/dist/mailgo.js +++ b/dist/mailgo.js @@ -185,7 +185,7 @@ mailgoRender = mailgo => { subject = "", bodyMail = ""; - // mailgo all the element with href=^"mailto:" + // if the element href=^"mailto:" if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) { mail = decodeURIComponent( mailgo.href @@ -204,7 +204,7 @@ mailgoRender = mailgo => { subject = urlParams.get("subject"); bodyMail = urlParams.get("body"); } else { - // mailgo all the element with href="#mailgo" or class="mailgo" + // if the element href="#mailgo" or class="mailgo" // email = data-address + @ + data-domain mail = mailgo.getAttribute("data-address") + @@ -217,6 +217,7 @@ mailgoRender = mailgo => { // validate the email address if (!validateEmail(mail)) return; + // information titleEl = getE("mailgo-title"); detailsEl = getE("mailgo-details"); ccEl = getE("mailgo-cc"); @@ -228,22 +229,34 @@ mailgoRender = mailgo => { bodyEl = getE("mailgo-body"); 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) titleEl.textContent = mail; - cc ? (ccValueEl.textContent = cc) : (ccEl.style.display = "none"); - bcc ? (bccValueEl.textContent = bcc) : (bccEl.style.display = "none"); + // 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 - ? (subjectValueEl.textContent = subject) + ? ((subjectEl.style.display = "block"), + (subjectValueEl.textContent = subject)) : (subjectEl.style.display = "none"); + bodyMail - ? (bodyValueEl.textContent = 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); @@ -274,15 +287,21 @@ mailgoRender = mailgo => { false ); + // show the mailgo showMailgo(); }; +/** + * 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' + * ); + */ 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(getE("mailgo"))) return; diff --git a/dist/mailgo.min.css b/dist/mailgo.min.css index acaaec3..513d8e2 100644 --- a/dist/mailgo.min.css +++ b/dist/mailgo.min.css @@ -1 +1 @@ -.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-modal strong{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.mailgo-modal strong{font-weight:700}.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;z-index:100000;font-size:15px}.mailgo-title{display:block;margin-bottom:5px}.mailgo-details{margin-bottom:10px}.mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal-background{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(10,10,10,.75);opacity:.8}.mailgo-modal-content{z-index:1000;box-sizing:content-box;text-align:center;width:200px;background-color:#fff;border-radius:6px;box-shadow:0 2px 6px 0 rgba(10,10,10,.39);color:#4a4a4a;display:block;overflow:auto;padding:1.25rem}.mailgo-modal-content:hover{box-shadow:0 6px 20px rgba(10,10,10,.23)}.mailgo-modal-content a{display:block;color:#4a4a4a;border-radius:4px;text-decoration:none;padding:10px}.mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal-content a.mailgo-open:hover{background-color:rgba(0,0,0,.08)}.mailgo-modal-content a.outlook{color:#0072c6}.mailgo-modal-content a.gmail{color:#d44638}.mailgo-modal-content a.outlook:hover{background-color:rgba(0,114,198,.08)}.mailgo-modal-content a.gmail:hover{background-color:rgba(212,70,56,.08)}.mailgo-modal-content a.mailgo-copy{padding:16px 10px}.mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;font-style:italic}.mailgo-weight-500{font-weight:500} \ No newline at end of file +.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-modal strong{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.mailgo-modal strong{font-weight:700}.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px}.mailgo-title{display:block;margin-bottom:5px}.mailgo-details{margin-bottom:10px}.mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal-background{position:absolute;z-index:1000;top:0;right:0;bottom:0;left:0;background-color:rgba(10,10,10,.75);opacity:.8}.mailgo-modal-content{position:relative;z-index:1001;box-sizing:content-box;text-align:center;width:200px;background-color:#fff;border-radius:6px;box-shadow:0 2px 6px 0 rgba(10,10,10,.39);color:#4a4a4a;display:block;overflow:auto;padding:1.25rem}.mailgo-modal-content:hover{box-shadow:0 6px 20px rgba(10,10,10,.23)}.mailgo-modal-content a{display:block;color:#4a4a4a;border-radius:4px;text-decoration:none;padding:10px}.mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal-content a.mailgo-open:hover{background-color:rgba(0,0,0,.08)}.mailgo-modal-content a.outlook{color:#0072c6}.mailgo-modal-content a.gmail{color:#d44638}.mailgo-modal-content a.outlook:hover{background-color:rgba(0,114,198,.08)}.mailgo-modal-content a.gmail:hover{background-color:rgba(212,70,56,.08)}.mailgo-modal-content a.mailgo-copy{padding:16px 10px}.mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;font-style:italic}.mailgo-weight-500{font-weight:500} \ No newline at end of file diff --git a/dist/mailgo.min.js b/dist/mailgo.min.js index c189ef8..a86611e 100644 --- a/dist/mailgo.min.js +++ b/dist/mailgo.min.js @@ -1 +1 @@ -const V="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 a=document.createElement("strong");a.id="mailgo-title",a.className="mailgo-title",l.appendChild(a);let o=document.createElement("div");o.id="mailgo-details",o.className="mailgo-details";let d=document.createElement("p");d.id="mailgo-cc";let n=document.createElement("span");n.className="mailgo-weight-500";let i=document.createTextNode("cc ");n.appendChild(i);let c=document.createElement("span");c.id="mailgo-cc-value",d.appendChild(n),d.appendChild(c),o.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 g=document.createElement("span");g.id="mailgo-bcc-value",m.appendChild(s),m.appendChild(g),o.appendChild(m);let u=document.createElement("p");u.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",u.appendChild(r),u.appendChild(E),o.appendChild(u);let C=document.createElement("p");C.id="mailgo-body";let y=document.createElement("span");y.className="mailgo-weight-500";let b=document.createTextNode("body ");y.appendChild(b);let L=document.createElement("span");L.id="mailgo-body-value",C.appendChild(y),C.appendChild(L),o.appendChild(C),l.appendChild(o);let v=document.createElement("a");v.id="mailgo-gmail",v.classList.add("mailgo-open"),v.classList.add("gmail");let x=document.createTextNode("open in ");v.appendChild(x);let f=document.createElement("span");f.className="mailgo-weight-500";let N=document.createTextNode("Gmail");f.appendChild(N),v.appendChild(f),l.appendChild(v);let T=document.createElement("a");T.id="mailgo-outlook",T.classList.add("mailgo-open"),T.classList.add("outlook");let w=document.createTextNode("open in ");T.appendChild(w);let k=document.createElement("span");k.className="mailgo-weight-500";let R=document.createTextNode("Outlook");k.appendChild(R),T.appendChild(k),l.appendChild(T);let A=document.createElement("a");A.id="mailgo-open",A.href="#mailgo-open",A.classList.add("mailgo-open"),A.classList.add("mailgo-weight-500");let I=document.createTextNode("open");A.appendChild(I),l.appendChild(A);let j=document.createElement("a");j.id="mailgo-copy",j.href="#mailgo-copy",j.classList.add("mailgo-copy"),j.classList.add("mailgo-weight-500");let M=document.createTextNode("copy");j.appendChild(M),l.appendChild(j);let B=document.createElement("a");B.href="https://mailgo.js.org",B.className="mailgo-by",B.target="_blank";let S=document.createTextNode("mailgo.js.org");B.appendChild(S),l.appendChild(B),document.body.appendChild(e),mailgo.addEventListener("keydown",e=>{27===e.keyCode&&hideMailgo()},!1),t.addEventListener("click",e=>{hideMailgo()},!1)}),mailgoRender=(e=>{let t="",l="",a="",o="",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 i=new URLSearchParams(url.search);a=i.get("cc"),o=i.get("bcc"),d=i.get("subject"),n=i.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=getE("mailgo-title"),detailsEl=getE("mailgo-details"),ccEl=getE("mailgo-cc"),ccValueEl=getE("mailgo-cc-value"),bccEl=getE("mailgo-bcc"),bccValueEl=getE("mailgo-bcc-value"),subjectEl=getE("mailgo-subject"),subjectValueEl=getE("mailgo-subject-value"),bodyEl=getE("mailgo-body"),bodyValueEl=getE("mailgo-body-value"),gmailButton=getE("mailgo-gmail"),outlookButton=getE("mailgo-outlook"),openButton=getE("mailgo-open"),copyButton=getE("mailgo-copy"),titleEl.textContent=t,a?ccValueEl.textContent=a:ccEl.style.display="none",o?bccValueEl.textContent=o: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 i=encodeEmail(t);openButton.addEventListener("click",()=>{mailToEncoded(i)},!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(getE("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=(()=>getE("mailgo").style.display="flex"),hideMailgo=(()=>getE("mailgo").style.display="none"),mailToEncoded=(e=>window.location.href=MAILTO+atob(e)),encodeEmail=(e=>btoa(e)),getE=(e=>document.getElementById(e)); \ No newline at end of file +const V="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 a=document.createElement("strong");a.id="mailgo-title",a.className="mailgo-title",l.appendChild(a);let o=document.createElement("div");o.id="mailgo-details",o.className="mailgo-details";let d=document.createElement("p");d.id="mailgo-cc";let n=document.createElement("span");n.className="mailgo-weight-500";let i=document.createTextNode("cc ");n.appendChild(i);let c=document.createElement("span");c.id="mailgo-cc-value",d.appendChild(n),d.appendChild(c),o.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 g=document.createElement("span");g.id="mailgo-bcc-value",m.appendChild(s),m.appendChild(g),o.appendChild(m);let u=document.createElement("p");u.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",u.appendChild(r),u.appendChild(E),o.appendChild(u);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 L=document.createElement("span");L.id="mailgo-body-value",y.appendChild(C),y.appendChild(L),o.appendChild(y),l.appendChild(o);let v=document.createElement("a");v.id="mailgo-gmail",v.classList.add("mailgo-open"),v.classList.add("gmail");let x=document.createTextNode("open in ");v.appendChild(x);let k=document.createElement("span");k.className="mailgo-weight-500";let f=document.createTextNode("Gmail");k.appendChild(f),v.appendChild(k),l.appendChild(v);let N=document.createElement("a");N.id="mailgo-outlook",N.classList.add("mailgo-open"),N.classList.add("outlook");let T=document.createTextNode("open in ");N.appendChild(T);let w=document.createElement("span");w.className="mailgo-weight-500";let R=document.createTextNode("Outlook");w.appendChild(R),N.appendChild(w),l.appendChild(N);let j=document.createElement("a");j.id="mailgo-open",j.href="#mailgo-open",j.classList.add("mailgo-open"),j.classList.add("mailgo-weight-500");let A=document.createTextNode("open");j.appendChild(A),l.appendChild(j);let I=document.createElement("a");I.id="mailgo-copy",I.href="#mailgo-copy",I.classList.add("mailgo-copy"),I.classList.add("mailgo-weight-500");let M=document.createTextNode("copy");I.appendChild(M),l.appendChild(I);let B=document.createElement("a");B.href="https://mailgo.js.org",B.className="mailgo-by",B.target="_blank";let S=document.createTextNode("mailgo.js.org");B.appendChild(S),l.appendChild(B),document.body.appendChild(e),mailgo.addEventListener("keydown",e=>{27===e.keyCode&&hideMailgo()},!1),t.addEventListener("click",e=>{hideMailgo()},!1)}),mailgoRender=(e=>{let t="",l="",a="",o="",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 i=new URLSearchParams(url.search);a=i.get("cc"),o=i.get("bcc"),d=i.get("subject"),n=i.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=getE("mailgo-title"),detailsEl=getE("mailgo-details"),ccEl=getE("mailgo-cc"),ccValueEl=getE("mailgo-cc-value"),bccEl=getE("mailgo-bcc"),bccValueEl=getE("mailgo-bcc-value"),subjectEl=getE("mailgo-subject"),subjectValueEl=getE("mailgo-subject-value"),bodyEl=getE("mailgo-body"),bodyValueEl=getE("mailgo-body-value"),gmailButton=getE("mailgo-gmail"),outlookButton=getE("mailgo-outlook"),openButton=getE("mailgo-open"),copyButton=getE("mailgo-copy"),titleEl.textContent=t,a?(ccEl.style.display="block",ccValueEl.textContent=a):ccEl.style.display="none",o?(bccEl.style.display="block",bccValueEl.textContent=o):bccEl.style.display="none",d?(subjectEl.style.display="block",subjectValueEl.textContent=d):subjectEl.style.display="none",n?(bodyEl.style.display="block",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 i=encodeEmail(t);openButton.addEventListener("click",()=>{mailToEncoded(i)},!1),copyButton.addEventListener("click",e=>{copyToClipboard(t),copyButton.textContent="copied",setTimeout(()=>{copyButton.textContent="copy"},999)},!1),showMailgo()}),mailgoCheckRender=(e=>{let t=e.target;document.body.contains(getE("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=(()=>getE("mailgo").style.display="flex"),hideMailgo=(()=>getE("mailgo").style.display="none"),mailToEncoded=(e=>window.location.href=MAILTO+atob(e)),encodeEmail=(e=>btoa(e)),getE=(e=>document.getElementById(e)); \ No newline at end of file diff --git a/src/mailgo.css b/src/mailgo.css index 2aefdca..a1963ff 100644 --- a/src/mailgo.css +++ b/src/mailgo.css @@ -24,7 +24,6 @@ align-items: center; flex-direction: column; overflow: hidden; - z-index: 100000; font-size: 15px; } @@ -45,6 +44,7 @@ .mailgo-modal-background { position: absolute; + z-index: 1000; top: 0; right: 0; bottom: 0; @@ -54,7 +54,8 @@ } .mailgo-modal-content { - z-index: 1000; + position: relative; + z-index: 1001; box-sizing: content-box; text-align: center; width: 200px;