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

382
dist/mailgo.js vendored
View File

@ -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

File diff suppressed because one or more lines are too long

View File

@ -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));