code completely rewritten with full support to SPA, html of modal more simple, a lot of CSS problems solved
This commit is contained in:
Matteo Manzinello committed
1 parent
1e2197f0ab
commit
cc62f544c2
3 files changed
+525
-456
No files matched your search
Vendored
+262
-228
@@ -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));
|
||||
|
||||
Vendored
+1
-1
@@ -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));
|
||||
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=comp
Line truncated
|
||||
+262
-227
@@ -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));
|
||||
|
||||
Reference in new issue
Block a user