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 2019-05-11 19:09:41 +02:00
parent 1e2197f0ab
commit cc62f544c2
3 changed files with 525 additions and 456 deletions

490
dist/mailgo.js vendored
View File

@ -1,260 +1,294 @@
const VERSION = "0.2.9"; const VERSION = "0.3.0";
const MAILTO = "mailto:"; const MAILTO = "mailto:";
mailgoInit = () => { // style of mailgo
const styleSheet = document.createElement("link"); const styleSheet = document.createElement("link");
styleSheet.rel = "stylesheet"; styleSheet.rel = "stylesheet";
styleSheet.type = "text/css"; styleSheet.type = "text/css";
styleSheet.href = styleSheet.href =
"https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css"; "https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css";
document.head.appendChild(styleSheet); document.head.appendChild(styleSheet);
mailgoInit = () => {
// all mailgos in the document // all mailgos in the document
const mailgos = document.querySelectorAll( const mailgos = document.querySelectorAll(
'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' 'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
); );
// mailgo on every element // modal
mailgos.forEach((mailgo, index) => { let modal = document.createElement("div");
let mail = "", modal.id = "mailgo";
mailtoHref = "", modal.classList.add("mailgo-modal");
cc = "", modal.style.display = "none";
bcc = "",
subject = "",
bodyMail = "";
// mailgo all the element with href=^"mailto:" // background
if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) { let modalBackground = document.createElement("div");
mail = decodeURIComponent( modalBackground.className = "mailgo-modal-background";
mailgo.href modal.appendChild(modalBackground);
.split("?")[0]
.split(MAILTO)[1]
.trim()
);
mailtoHref = mailgo.href; // modal content
url = new URL(mailtoHref); let modalContent = document.createElement("div");
let urlParams = new URLSearchParams(url.search); modalContent.className = "mailgo-modal-content";
modal.appendChild(modalContent);
// optional parameters for the email // title (email address)
cc = urlParams.get("cc"); let title = document.createElement("strong");
bcc = urlParams.get("bcc"); title.id = "mailgo-title";
subject = urlParams.get("subject"); title.className = "mailgo-title";
bodyMail = urlParams.get("body"); modalContent.appendChild(title);
} 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 // details
if (!validateEmail(mail)) return; let details = document.createElement("div");
details.id = "mailgo-details";
details.className = "mailgo-details";
// modal let detailCc = document.createElement("p");
let modal = document.createElement("div"); detailCc.id = "mailgo-cc";
modal.classList.add("mailgo-modal"); let ccSpan = document.createElement("span");
modal.style.display = "none"; ccSpan.className = "mailgo-weight-500";
modal.setAttribute("data-index", index); 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 detailBcc = document.createElement("p");
let modalBackground = document.createElement("div"); detailBcc.id = "mailgo-bcc";
modalBackground.className = "mailgo-modal-background"; let bccSpan = document.createElement("span");
modal.appendChild(modalBackground); 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 detailSubject = document.createElement("p");
let modalContent = document.createElement("div"); detailSubject.id = "mailgo-subject";
modalContent.className = "mailgo-modal-content"; let subjectSpan = document.createElement("span");
modal.appendChild(modalContent); 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 detailBody = document.createElement("p");
let strong = document.createElement("strong"); detailBody.id = "mailgo-body";
strong.className = "mailgo-title"; let bodySpan = document.createElement("span");
let strongContent = document.createTextNode(mail); bodySpan.className = "mailgo-weight-500";
strong.appendChild(strongContent); let bodyContent = document.createTextNode("body ");
modalContent.appendChild(strong); bodySpan.appendChild(bodyContent);
let bodyValue = document.createElement("span");
bodyValue.id = "mailgo-body-value";
detailBody.appendChild(bodySpan);
detailBody.appendChild(bodyValue);
details.appendChild(detailBody);
// details modalContent.appendChild(details);
let details = document.createElement("div");
details.className = "mailgo-details";
if (cc && cc != "") { // Gmail
let detailCC = document.createElement("p"); let gmail = document.createElement("a");
let ccSpan = document.createElement("span"); gmail.id = "mailgo-gmail";
ccSpan.className = "mailgo-weight-500"; gmail.classList.add("mailgo-open");
let ccContent = document.createTextNode("cc"); gmail.classList.add("gmail");
ccSpan.appendChild(ccContent); let gmailContent = document.createTextNode("open in ");
let ccValue = document.createTextNode(": " + cc); gmail.appendChild(gmailContent);
detailCC.appendChild(ccSpan); let gmailSpan = document.createElement("span");
detailCC.appendChild(ccValue); gmailSpan.className = "mailgo-weight-500";
details.appendChild(detailCC); let gmailSpanContent = document.createTextNode("Gmail");
} gmailSpan.appendChild(gmailSpanContent);
gmail.appendChild(gmailSpan);
if (bcc && bcc != "") { modalContent.appendChild(gmail);
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);
}
if (subject && subject != "") { // Outlook
let detailSUBJECT = document.createElement("p"); let outlook = document.createElement("a");
let subjectSpan = document.createElement("span"); outlook.id = "mailgo-outlook";
subjectSpan.className = "mailgo-weight-500"; outlook.classList.add("mailgo-open");
let subjectContent = document.createTextNode("cc"); outlook.classList.add("outlook");
subjectSpan.appendChild(subjectContent); let outlookContent = document.createTextNode("open in ");
let subjectValue = document.createTextNode(": " + subject); outlook.appendChild(outlookContent);
detailSUBJECT.appendChild(subjectSpan); let outlookSpan = document.createElement("span");
detailSUBJECT.appendChild(subjectValue); outlookSpan.className = "mailgo-weight-500";
details.appendChild(detailSUBJECT); let outlookSpanContent = document.createTextNode("Outlook");
} outlookSpan.appendChild(outlookSpanContent);
outlook.appendChild(outlookSpan);
if (bodyMail && bodyMail != "") { modalContent.appendChild(outlook);
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(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 // copy
let gmail = document.createElement("a"); let copy = document.createElement("a");
gmail.href = copy.id = "mailgo-copy";
"https://mail.google.com/mail?extsrc=mailto&url=" + copy.href = "#mailgo-copy";
encodeURIComponent(mailtoHref); copy.classList.add("mailgo-copy");
gmail.classList.add("mailgo-open"); copy.classList.add("mailgo-weight-500");
gmail.classList.add("gmail"); let copyContent = document.createTextNode("copy");
let gmailContent = document.createTextNode("open in "); copy.appendChild(copyContent);
gmail.appendChild(gmailContent); modalContent.appendChild(copy);
let gmailSpan = document.createElement("span");
gmailSpan.className = "mailgo-weight-500";
let gmailSpanContent = document.createTextNode("Gmail");
gmailSpan.appendChild(gmailSpanContent);
gmail.appendChild(gmailSpan);
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 document.body.appendChild(modal);
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);
modalContent.appendChild(outlook); // allow the escape key to hide the modal
mailgo.addEventListener(
"keydown",
event => {
if (event.keyCode === 27) {
hideMailgo();
}
},
false
);
// open default // every click outside the modal will hide the modal
let open = document.createElement("a"); modalBackground.addEventListener(
"click",
open.href = "#mailgo-open"; event => {
let encEmail = encodeEmail(mail); hideMailgo();
open.addEventListener( },
"click", false
() => { );
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
);
});
}; };
// 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); 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 => { 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,}))$/; 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); return re.test(email);
@ -282,10 +316,10 @@ copyToClipboard = str => {
}; };
// show the modal // show the modal
showMailgo = m => (m.style.display = "flex"); showMailgo = () => (document.getElementById("mailgo").style.display = "flex");
// hide the modal // hide the modal
hideMailgo = m => (m.style.display = "none"); hideMailgo = () => (document.getElementById("mailgo").style.display = "none");
// decrypt email // decrypt email
mailToEncoded = encoded => (window.location.href = MAILTO + atob(encoded)); mailToEncoded = encoded => (window.location.href = MAILTO + atob(encoded));

2
dist/mailgo.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -1,260 +1,295 @@
const VERSION = "MAILGO_VERSION"; const VERSION = "MAILGO_VERSION";
const MAILTO = "mailto:"; const MAILTO = "mailto:";
mailgoInit = () => { // style of mailgo
const styleSheet = document.createElement("link"); const styleSheet = document.createElement("link");
styleSheet.rel = "stylesheet"; styleSheet.rel = "stylesheet";
styleSheet.type = "text/css"; styleSheet.type = "text/css";
styleSheet.href = styleSheet.href =
"https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css"; "https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css";
document.head.appendChild(styleSheet); document.head.appendChild(styleSheet);
mailgoInit = () => {
// all mailgos in the document // all mailgos in the document
const mailgos = document.querySelectorAll( const mailgos = document.querySelectorAll(
'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' 'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
); );
// mailgo on every element // modal
mailgos.forEach((mailgo, index) => { let modal = document.createElement("div");
let mail = "", modal.id = "mailgo";
mailtoHref = "", modal.classList.add("mailgo-modal");
cc = "", modal.style.display = "none";
bcc = "",
subject = "",
bodyMail = "";
// mailgo all the element with href=^"mailto:" // background
if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) { let modalBackground = document.createElement("div");
mail = decodeURIComponent( modalBackground.className = "mailgo-modal-background";
mailgo.href modal.appendChild(modalBackground);
.split("?")[0]
.split(MAILTO)[1]
.trim()
);
mailtoHref = mailgo.href; // modal content
url = new URL(mailtoHref); let modalContent = document.createElement("div");
let urlParams = new URLSearchParams(url.search); modalContent.className = "mailgo-modal-content";
modal.appendChild(modalContent);
// optional parameters for the email // title (email address)
cc = urlParams.get("cc"); let title = document.createElement("strong");
bcc = urlParams.get("bcc"); title.id = "mailgo-title";
subject = urlParams.get("subject"); title.className = "mailgo-title";
bodyMail = urlParams.get("body"); modalContent.appendChild(title);
} 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 // details
if (!validateEmail(mail)) return; let details = document.createElement("div");
details.id = "mailgo-details";
details.className = "mailgo-details";
// modal let detailCc = document.createElement("p");
let modal = document.createElement("div"); detailCc.id = "mailgo-cc";
modal.classList.add("mailgo-modal"); let ccSpan = document.createElement("span");
modal.style.display = "none"; ccSpan.className = "mailgo-weight-500";
modal.setAttribute("data-index", index); 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 detailBcc = document.createElement("p");
let modalBackground = document.createElement("div"); detailBcc.id = "mailgo-bcc";
modalBackground.className = "mailgo-modal-background"; let bccSpan = document.createElement("span");
modal.appendChild(modalBackground); 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 detailSubject = document.createElement("p");
let modalContent = document.createElement("div"); detailSubject.id = "mailgo-subject";
modalContent.className = "mailgo-modal-content"; let subjectSpan = document.createElement("span");
modal.appendChild(modalContent); 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 detailBody = document.createElement("p");
let strong = document.createElement("strong"); detailBody.id = "mailgo-body";
strong.className = "mailgo-title"; let bodySpan = document.createElement("span");
let strongContent = document.createTextNode(mail); bodySpan.className = "mailgo-weight-500";
strong.appendChild(strongContent); let bodyContent = document.createTextNode("body ");
modalContent.appendChild(strong); bodySpan.appendChild(bodyContent);
let bodyValue = document.createElement("span");
bodyValue.id = "mailgo-body-value";
detailBody.appendChild(bodySpan);
detailBody.appendChild(bodyValue);
details.appendChild(detailBody);
// details modalContent.appendChild(details);
let details = document.createElement("div");
details.className = "mailgo-details";
if (cc && cc != "") { // Gmail
let detailCC = document.createElement("p"); let gmail = document.createElement("a");
let ccSpan = document.createElement("span"); gmail.id = "mailgo-gmail";
ccSpan.className = "mailgo-weight-500"; gmail.classList.add("mailgo-open");
let ccContent = document.createTextNode("cc"); gmail.classList.add("gmail");
ccSpan.appendChild(ccContent); let gmailContent = document.createTextNode("open in ");
let ccValue = document.createTextNode(": " + cc); gmail.appendChild(gmailContent);
detailCC.appendChild(ccSpan); let gmailSpan = document.createElement("span");
detailCC.appendChild(ccValue); gmailSpan.className = "mailgo-weight-500";
details.appendChild(detailCC); let gmailSpanContent = document.createTextNode("Gmail");
} gmailSpan.appendChild(gmailSpanContent);
gmail.appendChild(gmailSpan);
if (bcc && bcc != "") { modalContent.appendChild(gmail);
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);
}
if (subject && subject != "") { // Outlook
let detailSUBJECT = document.createElement("p"); let outlook = document.createElement("a");
let subjectSpan = document.createElement("span"); outlook.id = "mailgo-outlook";
subjectSpan.className = "mailgo-weight-500"; outlook.classList.add("mailgo-open");
let subjectContent = document.createTextNode("cc"); outlook.classList.add("outlook");
subjectSpan.appendChild(subjectContent); let outlookContent = document.createTextNode("open in ");
let subjectValue = document.createTextNode(": " + subject); outlook.appendChild(outlookContent);
detailSUBJECT.appendChild(subjectSpan); let outlookSpan = document.createElement("span");
detailSUBJECT.appendChild(subjectValue); outlookSpan.className = "mailgo-weight-500";
details.appendChild(detailSUBJECT); let outlookSpanContent = document.createTextNode("Outlook");
} outlookSpan.appendChild(outlookSpanContent);
outlook.appendChild(outlookSpan);
if (bodyMail && bodyMail != "") { modalContent.appendChild(outlook);
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(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 // copy
let gmail = document.createElement("a"); let copy = document.createElement("a");
gmail.href = copy.id = "mailgo-copy";
"https://mail.google.com/mail?extsrc=mailto&url=" + copy.href = "#mailgo-copy";
encodeURIComponent(mailtoHref); copy.classList.add("mailgo-copy");
gmail.classList.add("mailgo-open"); copy.classList.add("mailgo-weight-500");
gmail.classList.add("gmail"); let copyContent = document.createTextNode("copy");
let gmailContent = document.createTextNode("open in "); copy.appendChild(copyContent);
gmail.appendChild(gmailContent); modalContent.appendChild(copy);
let gmailSpan = document.createElement("span");
gmailSpan.className = "mailgo-weight-500";
let gmailSpanContent = document.createTextNode("Gmail");
gmailSpan.appendChild(gmailSpanContent);
gmail.appendChild(gmailSpan);
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 document.body.appendChild(modal);
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);
modalContent.appendChild(outlook); // allow the escape key to hide the modal
mailgo.addEventListener(
"keydown",
event => {
if (event.keyCode === 27) {
hideMailgo();
}
},
false
);
// open default // every click outside the modal will hide the modal
let open = document.createElement("a"); modalBackground.addEventListener(
"click",
open.href = "#mailgo-open"; event => {
let encEmail = encodeEmail(mail); hideMailgo();
open.addEventListener( },
"click", false
() => { );
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
);
});
}; };
// 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); 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 => { 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,}))$/; 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); return re.test(email);
@ -282,10 +317,10 @@ copyToClipboard = str => {
}; };
// show the modal // show the modal
showMailgo = m => (m.style.display = "flex"); showMailgo = () => (document.getElementById("mailgo").style.display = "flex");
// hide the modal // hide the modal
hideMailgo = m => (m.style.display = "none"); hideMailgo = () => (document.getElementById("mailgo").style.display = "none");
// decrypt email // decrypt email
mailToEncoded = encoded => (window.location.href = MAILTO + atob(encoded)); mailToEncoded = encoded => (window.location.href = MAILTO + atob(encoded));