From 37e1dc5229b3d45c2b9c5326a61ec748072c755b Mon Sep 17 00:00:00 2001 From: Matteo Manzinello Date: Sat, 4 May 2019 01:12:09 +0200 Subject: [PATCH] avanti generazione del modal e funzione per copiare --- dist/mailgo.js | 80 ++++++++++++++++++++++++++++++++++-- dist/mailgo.min.js | 2 +- src/mailgo.js | 100 ++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 177 insertions(+), 5 deletions(-) diff --git a/dist/mailgo.js b/dist/mailgo.js index 834242a..d1cbc45 100644 --- a/dist/mailgo.js +++ b/dist/mailgo.js @@ -2,6 +2,19 @@ let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)'); let styles = ` + + .mailgo-modal { + all: initial; + * { + all: unset; + } + } + + .mailgo-title { + display: block; + margin-bottom: 16px; + } + .mailgo-modal-background { position: absolute; top: 0; @@ -27,7 +40,8 @@ let styles = ` } .mailgo-modal-content { z-index: 1000; - width: 400px; + text-align: center; + width: 200px; background-color: #fff; border-radius: 6px; box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1); @@ -35,6 +49,32 @@ let styles = ` display: block; padding: 1.25rem; } + .mailgo-modal-content a { + display: block; + color: #4a4a4a; + padding: 10px; + border-radius: 4px; + text-decoration: none; + } + .mailgo-modal-content a:hover { + background-color: rgba(0, 0, 0, 0.08); + } + .mailgo-modal-content a.outlook { + color: rgba(0, 114, 198); + } + .mailgo-modal-content a.gmail { + color: rgba(212, 70, 56); + } + .mailgo-modal-content a.outlook:hover { + background-color: rgba(0, 114, 198, 0.08); + } + .mailgo-modal-content a.gmail:hover { + background-color: rgba(212, 70, 56, 0.08); + } + a.mailgo-copy { + margin-top: 10px; + padding: 16px 10px; + } `; // CSS @@ -52,8 +92,6 @@ mailgos.forEach((mailgo, index) => { .split("mailto:")[1] .trim(); - console.log(mail); - if (!validateEmail(mail)) return; let url = new URL(mailgo.href); @@ -76,11 +114,47 @@ mailgos.forEach((mailgo, index) => { modalContent.className = "mailgo-modal-content"; modal.appendChild(modalContent); + // titolo (l'email) let strong = document.createElement("strong"); + strong.className = "mailgo-title"; let strongContent = document.createTextNode(mail); strong.appendChild(strongContent); modalContent.appendChild(strong); + // Gmail + let gmail = document.createElement("a"); + gmail.href = "https://mail.google.com/mail?extsrc=mailto&url=" + mailgo.href; + gmail.classList.add("mailgo-open"); + gmail.classList.add("gmail"); + let gmailContent = document.createTextNode("open in Gmail"); + gmail.appendChild(gmailContent); + modalContent.appendChild(gmail); + + // Outlook + let outlook = document.createElement("a"); + outlook.href = + "https://outlook.office.com/owa/?rru=compose&to=" + mail + url.search; + outlook.classList.add("mailgo-open"); + outlook.classList.add("outlook"); + let outlookContent = document.createTextNode("open in Outlook"); + outlook.appendChild(outlookContent); + modalContent.appendChild(outlook); + + // default + let open = document.createElement("a"); + open.href = mailgo.href; + open.className = "mailgo-open"; + let openContent = document.createTextNode("open"); + open.appendChild(openContent); + modalContent.appendChild(open); + + // copia l'email + let copy = document.createElement("a"); + copy.className = "mailgo-copy"; + let copyContent = document.createTextNode("copy"); + copy.appendChild(copyContent); + modalContent.appendChild(copy); + mailgo.parentNode.insertBefore(modal, mailgo.nextSibling); mailgo.addEventListener( diff --git a/dist/mailgo.min.js b/dist/mailgo.min.js index 497905a..147f95c 100644 --- a/dist/mailgo.min.js +++ b/dist/mailgo.min.js @@ -1 +1 @@ -let mailgos=document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)'),styles='\n .mailgo-modal-background {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(10,10,10,.86);\n opacity: 0.8;\n }\n .mailgo-modal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: none;\n font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n }\n .mailgo-modal.is-active {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .mailgo-modal-content {\n z-index: 1000;\n width: 400px;\n background-color: #fff;\n border-radius: 6px;\n box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);\n color: #4a4a4a;\n display: block;\n padding: 1.25rem;\n }\n',styleSheet=document.createElement("style");function 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)}styleSheet.type="text/css",styleSheet.innerText=styles,document.head.appendChild(styleSheet),console.log("mailgo is WIP!"),mailgos.forEach((e,t)=>{let n=e.href.split("?")[0].split("mailto:")[1].trim();if(console.log(n),!validateEmail(n))return;let a=new URL(e.href),l=new URLSearchParams(a.search),o=(l.get("subject"),l.get("body"),l.get("cc"),l.get("bcc"),document.createElement("div"));o.className="mailgo-modal",o.setAttribute("data-index",t);let i=document.createElement("div");i.className="mailgo-modal-background",o.appendChild(i);let s=document.createElement("div");s.className="mailgo-modal-content",o.appendChild(s);let d=document.createElement("strong"),c=document.createTextNode(n);d.appendChild(c),s.appendChild(d),e.parentNode.insertBefore(o,e.nextSibling),e.addEventListener("click",t=>{t.preventDefault(),e.nextElementSibling.classList.add("is-active")},!1),i.addEventListener("click",t=>{e.nextElementSibling.classList.remove("is-active")},!1)}); \ No newline at end of file +let mailgos=document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)'),styles='\n\n .mailgo-modal {\n all: initial;\n * {\n all: unset;\n }\n }\n\n .mailgo-title {\n display: block;\n margin-bottom: 16px;\n }\n\n .mailgo-modal-background {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(10,10,10,.86);\n opacity: 0.8;\n }\n .mailgo-modal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: none;\n font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n }\n .mailgo-modal.is-active {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .mailgo-modal-content {\n z-index: 1000;\n text-align: center;\n width: 200px;\n background-color: #fff;\n border-radius: 6px;\n box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);\n color: #4a4a4a;\n display: block;\n padding: 1.25rem;\n }\n .mailgo-modal-content a {\n display: block;\n color: #4a4a4a;\n padding: 10px;\n border-radius: 4px;\n text-decoration: none;\n }\n .mailgo-modal-content a:hover {\n background-color: rgba(0, 0, 0, 0.08);\n }\n .mailgo-modal-content a.outlook {\n color: rgba(0, 114, 198);\n }\n .mailgo-modal-content a.gmail {\n color: rgba(212, 70, 56);\n }\n .mailgo-modal-content a.outlook:hover {\n background-color: rgba(0, 114, 198, 0.08);\n }\n .mailgo-modal-content a.gmail:hover {\n background-color: rgba(212, 70, 56, 0.08);\n }\n a.mailgo-copy {\n margin-top: 10px;\n padding: 16px 10px;\n }\n',styleSheet=document.createElement("style");function 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)}styleSheet.type="text/css",styleSheet.innerText=styles,document.head.appendChild(styleSheet),console.log("mailgo is WIP!"),mailgos.forEach((e,n)=>{let t=e.href.split("?")[0].split("mailto:")[1].trim();if(!validateEmail(t))return;let o=new URL(e.href),a=new URLSearchParams(o.search),l=(a.get("subject"),a.get("body"),a.get("cc"),a.get("bcc"),document.createElement("div"));l.className="mailgo-modal",l.setAttribute("data-index",n);let i=document.createElement("div");i.className="mailgo-modal-background",l.appendChild(i);let d=document.createElement("div");d.className="mailgo-modal-content",l.appendChild(d);let c=document.createElement("strong");c.className="mailgo-title";let m=document.createTextNode(t);c.appendChild(m),d.appendChild(c);let r=document.createElement("a");r.href="https://mail.google.com/mail?extsrc=mailto&url="+e.href,r.classList.add("mailgo-open"),r.classList.add("gmail");let s=document.createTextNode("open in Gmail");r.appendChild(s),d.appendChild(r);let p=document.createElement("a");p.href="https://outlook.office.com/owa/?rru=compose&to="+t+o.search,p.classList.add("mailgo-open"),p.classList.add("outlook");let g=document.createTextNode("open in Outlook");p.appendChild(g),d.appendChild(p);let u=document.createElement("a");u.href=e.href,u.className="mailgo-open";let h=document.createTextNode("open");u.appendChild(h),d.appendChild(u);let b=document.createElement("a");b.className="mailgo-copy";let x=document.createTextNode("copy");b.appendChild(x),d.appendChild(b),e.parentNode.insertBefore(l,e.nextSibling),e.addEventListener("click",n=>{n.preventDefault(),e.nextElementSibling.classList.add("is-active")},!1),i.addEventListener("click",n=>{e.nextElementSibling.classList.remove("is-active")},!1)}); \ No newline at end of file diff --git a/src/mailgo.js b/src/mailgo.js index d5fe4b3..6a255a5 100644 --- a/src/mailgo.js +++ b/src/mailgo.js @@ -2,6 +2,19 @@ let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)'); let styles = ` + + .mailgo-modal { + all: initial; + * { + all: unset; + } + } + + .mailgo-title { + display: block; + margin-bottom: 16px; + } + .mailgo-modal-background { position: absolute; top: 0; @@ -27,7 +40,8 @@ let styles = ` } .mailgo-modal-content { z-index: 1000; - width: 400px; + text-align: center; + width: 200px; background-color: #fff; border-radius: 6px; box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1); @@ -35,6 +49,32 @@ let styles = ` display: block; padding: 1.25rem; } + .mailgo-modal-content a { + display: block; + color: #4a4a4a; + padding: 10px; + border-radius: 4px; + text-decoration: none; + } + .mailgo-modal-content a:hover { + background-color: rgba(0, 0, 0, 0.08); + } + .mailgo-modal-content a.outlook { + color: rgba(0, 114, 198); + } + .mailgo-modal-content a.gmail { + color: rgba(212, 70, 56); + } + .mailgo-modal-content a.outlook:hover { + background-color: rgba(0, 114, 198, 0.08); + } + .mailgo-modal-content a.gmail:hover { + background-color: rgba(212, 70, 56, 0.08); + } + a.mailgo-copy { + margin-top: 10px; + padding: 16px 10px; + } `; // CSS @@ -74,11 +114,49 @@ mailgos.forEach((mailgo, index) => { modalContent.className = "mailgo-modal-content"; modal.appendChild(modalContent); + // titolo (l'email) let strong = document.createElement("strong"); + strong.className = "mailgo-title"; let strongContent = document.createTextNode(mail); strong.appendChild(strongContent); modalContent.appendChild(strong); + // Gmail + let gmail = document.createElement("a"); + gmail.href = "https://mail.google.com/mail?extsrc=mailto&url=" + mailgo.href; + gmail.classList.add("mailgo-open"); + gmail.classList.add("gmail"); + let gmailContent = document.createTextNode("open in Gmail"); + gmail.appendChild(gmailContent); + modalContent.appendChild(gmail); + + // Outlook + let outlook = document.createElement("a"); + outlook.href = + "https://outlook.office.com/owa/?rru=compose&to=" + mail + url.search; + outlook.classList.add("mailgo-open"); + outlook.classList.add("outlook"); + let outlookContent = document.createTextNode("open in Outlook"); + outlook.appendChild(outlookContent); + modalContent.appendChild(outlook); + + // default + let open = document.createElement("a"); + open.href = mailgo.href; + open.className = "mailgo-open"; + let openContent = document.createTextNode("open"); + open.appendChild(openContent); + modalContent.appendChild(open); + + // copia l'email + let copy = document.createElement("a"); + copy.href = "#mailgo-copy"; + copy.className = "mailgo-copy"; + let copyContent = document.createTextNode("copy"); + copy.appendChild(copyContent); + copy.addEventListener("click", event => {}, false); + modalContent.appendChild(copy); + mailgo.parentNode.insertBefore(modal, mailgo.nextSibling); mailgo.addEventListener( @@ -106,3 +184,23 @@ 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); } + +function copyToClipboard(str) { + const el = document.createElement("textarea"); + el.value = str; + el.setAttribute("readonly", ""); + el.style.position = "absolute"; + el.style.left = "-9999px"; + document.body.appendChild(el); + const 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); + } +}