From 8ce4a1c104d1113b213e628e090dc5c888b29205 Mon Sep 17 00:00:00 2001 From: Matteo Manzinello Date: Thu, 18 Jul 2019 10:08:27 +0200 Subject: [PATCH] init with the tel links --- src/mailgo.js | 162 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 161 insertions(+), 1 deletion(-) diff --git a/src/mailgo.js b/src/mailgo.js index d279ddf..441213a 100644 --- a/src/mailgo.js +++ b/src/mailgo.js @@ -170,6 +170,165 @@ const mailgoInit = () => { modalBackground.addEventListener("click", hideMailgo); }; +/** + * mailgoTelInit + * the function that creates the mailgo (for tel:) element in DOM + */ +const mailgoTelInit = () => { + // modal + let modal = document.createElement("div"); + modal.style.display = "none"; + modal.id = "mailgo-tel"; + modal.classList.add("mailgo-modal"); + + // 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.href = "#mailgo-gmail"; + gmail.classList.add("mailgo-open"); + gmail.classList.add("mailgo-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.href = "#mailgo-outlook"; + outlook.classList.add("mailgo-open"); + outlook.classList.add("mailgo-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-default"); + let openSpan = document.createElement("span"); + openSpan.className = "mailgo-weight-500"; + let openSpanContent = document.createTextNode("open"); + openSpan.appendChild(openSpanContent); + let openContent = document.createTextNode(" default"); + open.appendChild(openSpan); + 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?ref=mailgo-modal"; + by.className = "mailgo-by"; + by.target = "_blank"; + by.rel = "noopener noreferrer"; + let textBy = document.createTextNode("mailgo.js.org"); + by.appendChild(textBy); + + modalContent.appendChild(by); + + // add the modal at the end of the body + document.body.appendChild(modal); + + // every click outside the modal will hide the modal + modalBackground.addEventListener("click", hideMailgo); +}; + /** * mailgoRender * function to render a single mailgo @@ -424,8 +583,9 @@ const mailgoKeydown = ( return; }; -// DOMContentLoaded -> mailgoInit (creates the modal) +// DOMContentLoaded -> mailgoInit and mailgoTelInit (creates the modals) document.addEventListener("DOMContentLoaded", mailgoInit); +document.addEventListener("DOMContentLoaded", mailgoTelInit); // event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered document.addEventListener("click", mailgoCheckRender);