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
parent
1e2197f0ab
commit
cc62f544c2
382
dist/mailgo.js
vendored
382
dist/mailgo.js
vendored
@ -1,21 +1,180 @@
|
|||||||
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");
|
||||||
|
modal.id = "mailgo";
|
||||||
|
modal.classList.add("mailgo-modal");
|
||||||
|
modal.style.display = "none";
|
||||||
|
|
||||||
|
// background
|
||||||
|
let modalBackground = document.createElement("div");
|
||||||
|
modalBackground.className = "mailgo-modal-background";
|
||||||
|
modal.appendChild(modalBackground);
|
||||||
|
|
||||||
|
// modal content
|
||||||
|
let modalContent = document.createElement("div");
|
||||||
|
modalContent.className = "mailgo-modal-content";
|
||||||
|
modal.appendChild(modalContent);
|
||||||
|
|
||||||
|
// title (email address)
|
||||||
|
let title = document.createElement("strong");
|
||||||
|
title.id = "mailgo-title";
|
||||||
|
title.className = "mailgo-title";
|
||||||
|
modalContent.appendChild(title);
|
||||||
|
|
||||||
|
// details
|
||||||
|
let details = document.createElement("div");
|
||||||
|
details.id = "mailgo-details";
|
||||||
|
details.className = "mailgo-details";
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
modalContent.appendChild(details);
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
modalContent.appendChild(gmail);
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
modalContent.appendChild(outlook);
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
document.body.appendChild(modal);
|
||||||
|
|
||||||
|
// allow the escape key to hide the modal
|
||||||
|
mailgo.addEventListener(
|
||||||
|
"keydown",
|
||||||
|
event => {
|
||||||
|
if (event.keyCode === 27) {
|
||||||
|
hideMailgo();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
// every click outside the modal will hide the modal
|
||||||
|
modalBackground.addEventListener(
|
||||||
|
"click",
|
||||||
|
event => {
|
||||||
|
hideMailgo();
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
mailgoRender = mailgo => {
|
||||||
let mail = "",
|
let mail = "",
|
||||||
mailtoHref = "",
|
mailtoHref = "",
|
||||||
cc = "",
|
cc = "",
|
||||||
@ -55,124 +214,44 @@ mailgoInit = () => {
|
|||||||
// validate the email address
|
// validate the email address
|
||||||
if (!validateEmail(mail)) return;
|
if (!validateEmail(mail)) return;
|
||||||
|
|
||||||
// modal
|
titleEl = document.getElementById("mailgo-title");
|
||||||
let modal = document.createElement("div");
|
detailsEl = document.getElementById("mailgo-details");
|
||||||
modal.classList.add("mailgo-modal");
|
ccEl = document.getElementById("mailgo-cc");
|
||||||
modal.style.display = "none";
|
ccValueEl = document.getElementById("mailgo-cc-value");
|
||||||
modal.setAttribute("data-index", index);
|
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");
|
||||||
|
|
||||||
// background
|
gmailButton = document.getElementById("mailgo-gmail");
|
||||||
let modalBackground = document.createElement("div");
|
outlookButton = document.getElementById("mailgo-outlook");
|
||||||
modalBackground.className = "mailgo-modal-background";
|
openButton = document.getElementById("mailgo-open");
|
||||||
modal.appendChild(modalBackground);
|
copyButton = document.getElementById("mailgo-copy");
|
||||||
|
|
||||||
// modal content
|
titleEl.textContent = mail;
|
||||||
let modalContent = document.createElement("div");
|
|
||||||
modalContent.className = "mailgo-modal-content";
|
|
||||||
modal.appendChild(modalContent);
|
|
||||||
|
|
||||||
// title (email address)
|
cc ? (ccValueEl.textContent = cc) : (ccEl.style.display = "none");
|
||||||
let strong = document.createElement("strong");
|
bcc ? (bccValueEl.textContent = bcc) : (bccEl.style.display = "none");
|
||||||
strong.className = "mailgo-title";
|
subject
|
||||||
let strongContent = document.createTextNode(mail);
|
? (subjectValueEl.textContent = subject)
|
||||||
strong.appendChild(strongContent);
|
: (subjectEl.style.display = "none");
|
||||||
modalContent.appendChild(strong);
|
bodyMail
|
||||||
|
? (bodyValueEl.textContent = bodyMail)
|
||||||
|
: (bodyEl.style.display = "none");
|
||||||
|
|
||||||
// details
|
gmailButton.href =
|
||||||
let details = document.createElement("div");
|
|
||||||
details.className = "mailgo-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);
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
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(details);
|
|
||||||
|
|
||||||
// Gmail
|
|
||||||
let gmail = document.createElement("a");
|
|
||||||
gmail.href =
|
|
||||||
"https://mail.google.com/mail?extsrc=mailto&url=" +
|
"https://mail.google.com/mail?extsrc=mailto&url=" +
|
||||||
encodeURIComponent(mailtoHref);
|
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);
|
|
||||||
|
|
||||||
modalContent.appendChild(gmail);
|
outlookButton.href =
|
||||||
|
|
||||||
// Outlook
|
|
||||||
let outlook = document.createElement("a");
|
|
||||||
outlook.href =
|
|
||||||
"https://outlook.office.com/owa/?rru=compose&to=" +
|
"https://outlook.office.com/owa/?rru=compose&to=" +
|
||||||
encodeURIComponent(mail) +
|
encodeURIComponent(mail) +
|
||||||
url.search.replace(/^[$]/, "&");
|
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);
|
|
||||||
|
|
||||||
// open default
|
|
||||||
let open = document.createElement("a");
|
|
||||||
|
|
||||||
open.href = "#mailgo-open";
|
|
||||||
let encEmail = encodeEmail(mail);
|
let encEmail = encodeEmail(mail);
|
||||||
open.addEventListener(
|
openButton.addEventListener(
|
||||||
"click",
|
"click",
|
||||||
() => {
|
() => {
|
||||||
mailToEncoded(encEmail);
|
mailToEncoded(encEmail);
|
||||||
@ -180,81 +259,36 @@ mailgoInit = () => {
|
|||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
open.classList.add("mailgo-open");
|
copyButton.addEventListener(
|
||||||
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",
|
"click",
|
||||||
event => {
|
event => {
|
||||||
copyToClipboard(mail);
|
copyToClipboard(mail);
|
||||||
copy.textContent = "copied";
|
copyButton.textContent = "copied";
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
copy.textContent = "copy";
|
copyButton.textContent = "copy";
|
||||||
}, 999);
|
}, 999);
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
modalContent.appendChild(copy);
|
|
||||||
|
|
||||||
// by
|
showMailgo();
|
||||||
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
|
// DOMContentLoaded -> mailgoInit (creates the modal)
|
||||||
mailgo.parentNode.insertBefore(modal, mailgo.nextSibling);
|
document.addEventListener("DOMContentLoaded", mailgoInit, false);
|
||||||
|
|
||||||
// show the modal on every element click
|
document.addEventListener(
|
||||||
mailgo.addEventListener(
|
|
||||||
"click",
|
"click",
|
||||||
event => {
|
event => {
|
||||||
// clock the mailto: classic behaviour
|
if (event.target.href && event.target.href.startsWith("mailto:")) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
mailgoRender(event.target);
|
||||||
// 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
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
// every click outside the modal will hide the modal
|
// validate the email with regex
|
||||||
modalBackground.addEventListener(
|
|
||||||
"click",
|
|
||||||
event => hideMailgo(mailgo.nextElementSibling),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// DOMContentLoaded -> mailgoInit
|
|
||||||
document.addEventListener("DOMContentLoaded", mailgoInit, false);
|
|
||||||
|
|
||||||
// validate the email with refgex
|
|
||||||
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
2
dist/mailgo.min.js
vendored
File diff suppressed because one or more lines are too long
381
src/mailgo.js
381
src/mailgo.js
@ -1,21 +1,180 @@
|
|||||||
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");
|
||||||
|
modal.id = "mailgo";
|
||||||
|
modal.classList.add("mailgo-modal");
|
||||||
|
modal.style.display = "none";
|
||||||
|
|
||||||
|
// background
|
||||||
|
let modalBackground = document.createElement("div");
|
||||||
|
modalBackground.className = "mailgo-modal-background";
|
||||||
|
modal.appendChild(modalBackground);
|
||||||
|
|
||||||
|
// modal content
|
||||||
|
let modalContent = document.createElement("div");
|
||||||
|
modalContent.className = "mailgo-modal-content";
|
||||||
|
modal.appendChild(modalContent);
|
||||||
|
|
||||||
|
// title (email address)
|
||||||
|
let title = document.createElement("strong");
|
||||||
|
title.id = "mailgo-title";
|
||||||
|
title.className = "mailgo-title";
|
||||||
|
modalContent.appendChild(title);
|
||||||
|
|
||||||
|
// details
|
||||||
|
let details = document.createElement("div");
|
||||||
|
details.id = "mailgo-details";
|
||||||
|
details.className = "mailgo-details";
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
modalContent.appendChild(details);
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
modalContent.appendChild(gmail);
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
modalContent.appendChild(outlook);
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
document.body.appendChild(modal);
|
||||||
|
|
||||||
|
// allow the escape key to hide the modal
|
||||||
|
mailgo.addEventListener(
|
||||||
|
"keydown",
|
||||||
|
event => {
|
||||||
|
if (event.keyCode === 27) {
|
||||||
|
hideMailgo();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
|
// every click outside the modal will hide the modal
|
||||||
|
modalBackground.addEventListener(
|
||||||
|
"click",
|
||||||
|
event => {
|
||||||
|
hideMailgo();
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
mailgoRender = mailgo => {
|
||||||
let mail = "",
|
let mail = "",
|
||||||
mailtoHref = "",
|
mailtoHref = "",
|
||||||
cc = "",
|
cc = "",
|
||||||
@ -55,124 +214,44 @@ mailgoInit = () => {
|
|||||||
// validate the email address
|
// validate the email address
|
||||||
if (!validateEmail(mail)) return;
|
if (!validateEmail(mail)) return;
|
||||||
|
|
||||||
// modal
|
titleEl = document.getElementById("mailgo-title");
|
||||||
let modal = document.createElement("div");
|
detailsEl = document.getElementById("mailgo-details");
|
||||||
modal.classList.add("mailgo-modal");
|
ccEl = document.getElementById("mailgo-cc");
|
||||||
modal.style.display = "none";
|
ccValueEl = document.getElementById("mailgo-cc-value");
|
||||||
modal.setAttribute("data-index", index);
|
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");
|
||||||
|
|
||||||
// background
|
gmailButton = document.getElementById("mailgo-gmail");
|
||||||
let modalBackground = document.createElement("div");
|
outlookButton = document.getElementById("mailgo-outlook");
|
||||||
modalBackground.className = "mailgo-modal-background";
|
openButton = document.getElementById("mailgo-open");
|
||||||
modal.appendChild(modalBackground);
|
copyButton = document.getElementById("mailgo-copy");
|
||||||
|
|
||||||
// modal content
|
titleEl.textContent = mail;
|
||||||
let modalContent = document.createElement("div");
|
|
||||||
modalContent.className = "mailgo-modal-content";
|
|
||||||
modal.appendChild(modalContent);
|
|
||||||
|
|
||||||
// title (email address)
|
cc ? (ccValueEl.textContent = cc) : (ccEl.style.display = "none");
|
||||||
let strong = document.createElement("strong");
|
bcc ? (bccValueEl.textContent = bcc) : (bccEl.style.display = "none");
|
||||||
strong.className = "mailgo-title";
|
subject
|
||||||
let strongContent = document.createTextNode(mail);
|
? (subjectValueEl.textContent = subject)
|
||||||
strong.appendChild(strongContent);
|
: (subjectEl.style.display = "none");
|
||||||
modalContent.appendChild(strong);
|
bodyMail
|
||||||
|
? (bodyValueEl.textContent = bodyMail)
|
||||||
|
: (bodyEl.style.display = "none");
|
||||||
|
|
||||||
// details
|
gmailButton.href =
|
||||||
let details = document.createElement("div");
|
|
||||||
details.className = "mailgo-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);
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
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(details);
|
|
||||||
|
|
||||||
// Gmail
|
|
||||||
let gmail = document.createElement("a");
|
|
||||||
gmail.href =
|
|
||||||
"https://mail.google.com/mail?extsrc=mailto&url=" +
|
"https://mail.google.com/mail?extsrc=mailto&url=" +
|
||||||
encodeURIComponent(mailtoHref);
|
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);
|
|
||||||
|
|
||||||
modalContent.appendChild(gmail);
|
outlookButton.href =
|
||||||
|
|
||||||
// Outlook
|
|
||||||
let outlook = document.createElement("a");
|
|
||||||
outlook.href =
|
|
||||||
"https://outlook.office.com/owa/?rru=compose&to=" +
|
"https://outlook.office.com/owa/?rru=compose&to=" +
|
||||||
encodeURIComponent(mail) +
|
encodeURIComponent(mail) +
|
||||||
url.search.replace(/^[$]/, "&");
|
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);
|
|
||||||
|
|
||||||
// open default
|
|
||||||
let open = document.createElement("a");
|
|
||||||
|
|
||||||
open.href = "#mailgo-open";
|
|
||||||
let encEmail = encodeEmail(mail);
|
let encEmail = encodeEmail(mail);
|
||||||
open.addEventListener(
|
openButton.addEventListener(
|
||||||
"click",
|
"click",
|
||||||
() => {
|
() => {
|
||||||
mailToEncoded(encEmail);
|
mailToEncoded(encEmail);
|
||||||
@ -180,81 +259,37 @@ mailgoInit = () => {
|
|||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
open.classList.add("mailgo-open");
|
copyButton.addEventListener(
|
||||||
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",
|
"click",
|
||||||
event => {
|
event => {
|
||||||
copyToClipboard(mail);
|
copyToClipboard(mail);
|
||||||
copy.textContent = "copied";
|
copyButton.textContent = "copied";
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
copy.textContent = "copy";
|
copyButton.textContent = "copy";
|
||||||
}, 999);
|
}, 999);
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
modalContent.appendChild(copy);
|
|
||||||
|
|
||||||
// by
|
showMailgo();
|
||||||
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
|
// DOMContentLoaded -> mailgoInit (creates the modal)
|
||||||
mailgo.parentNode.insertBefore(modal, mailgo.nextSibling);
|
document.addEventListener("DOMContentLoaded", mailgoInit, false);
|
||||||
|
|
||||||
// show the modal on every element click
|
document.addEventListener(
|
||||||
mailgo.addEventListener(
|
|
||||||
"click",
|
"click",
|
||||||
event => {
|
event => {
|
||||||
// clock the mailto: classic behaviour
|
// TODO add all the possibilities
|
||||||
|
if (event.target.href && event.target.href.startsWith("mailto:")) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
mailgoRender(event.target);
|
||||||
// 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
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
// every click outside the modal will hide the modal
|
// validate the email with regex
|
||||||
modalBackground.addEventListener(
|
|
||||||
"click",
|
|
||||||
event => hideMailgo(mailgo.nextElementSibling),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// DOMContentLoaded -> mailgoInit
|
|
||||||
document.addEventListener("DOMContentLoaded", mailgoInit, false);
|
|
||||||
|
|
||||||
// validate the email with refgex
|
|
||||||
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));
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user