go on with tel

This commit is contained in:
Matteo Manzinello 2019-09-16 23:22:04 +02:00
parent 1080b180c3
commit bf1484a2a0

View File

@ -29,265 +29,264 @@ document.head.appendChild(mailgoCSS);
/** /**
* mailgoInit * mailgoInit
* the function that creates the mailgo element in DOM * the function that creates the mailgo elements in DOM
*/ */
const mailgoInit = () => { const mailgoInit = () => {
// modal // mailgo mail
let modal = document.createElement("div"); {
modal.style.display = "none"; // modal
modal.id = "mailgo"; let modal = document.createElement("div");
modal.classList.add("mailgo-modal"); modal.style.display = "none";
modal.id = "mailgo";
modal.classList.add("mailgo-modal");
// background // background
let modalBackground = document.createElement("div"); let modalBackground = document.createElement("div");
modalBackground.className = "mailgo-modal-background"; modalBackground.className = "mailgo-modal-background";
modal.appendChild(modalBackground); modal.appendChild(modalBackground);
// modal content // modal content
let modalContent = document.createElement("div"); let modalContent = document.createElement("div");
modalContent.className = "mailgo-modal-content"; modalContent.className = "mailgo-modal-content";
modal.appendChild(modalContent); modal.appendChild(modalContent);
// title (email address) // title (email address)
let title = document.createElement("strong"); let title = document.createElement("strong");
title.id = "mailgo-title"; title.id = "mailgo-title";
title.className = "mailgo-title"; title.className = "mailgo-title";
modalContent.appendChild(title); modalContent.appendChild(title);
// details // details
let details = document.createElement("div"); let details = document.createElement("div");
details.id = "mailgo-details"; details.id = "mailgo-details";
details.className = "mailgo-details"; details.className = "mailgo-details";
let detailCc = document.createElement("p"); let detailCc = document.createElement("p");
detailCc.id = "mailgo-cc"; detailCc.id = "mailgo-cc";
let ccSpan = document.createElement("span"); let ccSpan = document.createElement("span");
ccSpan.className = "mailgo-weight-500"; ccSpan.className = "mailgo-weight-500";
let ccContent = document.createTextNode("cc "); let ccContent = document.createTextNode("cc ");
ccSpan.appendChild(ccContent); ccSpan.appendChild(ccContent);
let ccValue = document.createElement("span"); let ccValue = document.createElement("span");
ccValue.id = "mailgo-cc-value"; ccValue.id = "mailgo-cc-value";
detailCc.appendChild(ccSpan); detailCc.appendChild(ccSpan);
detailCc.appendChild(ccValue); detailCc.appendChild(ccValue);
details.appendChild(detailCc); details.appendChild(detailCc);
let detailBcc = document.createElement("p"); let detailBcc = document.createElement("p");
detailBcc.id = "mailgo-bcc"; detailBcc.id = "mailgo-bcc";
let bccSpan = document.createElement("span"); let bccSpan = document.createElement("span");
bccSpan.className = "mailgo-weight-500"; bccSpan.className = "mailgo-weight-500";
let bccContent = document.createTextNode("bcc "); let bccContent = document.createTextNode("bcc ");
bccSpan.appendChild(bccContent); bccSpan.appendChild(bccContent);
let bccValue = document.createElement("span"); let bccValue = document.createElement("span");
bccValue.id = "mailgo-bcc-value"; bccValue.id = "mailgo-bcc-value";
detailBcc.appendChild(bccSpan); detailBcc.appendChild(bccSpan);
detailBcc.appendChild(bccValue); detailBcc.appendChild(bccValue);
details.appendChild(detailBcc); details.appendChild(detailBcc);
let detailSubject = document.createElement("p"); let detailSubject = document.createElement("p");
detailSubject.id = "mailgo-subject"; detailSubject.id = "mailgo-subject";
let subjectSpan = document.createElement("span"); let subjectSpan = document.createElement("span");
subjectSpan.className = "mailgo-weight-500"; subjectSpan.className = "mailgo-weight-500";
let subjectContent = document.createTextNode("subject "); let subjectContent = document.createTextNode("subject ");
subjectSpan.appendChild(subjectContent); subjectSpan.appendChild(subjectContent);
let subjectValue = document.createElement("span"); let subjectValue = document.createElement("span");
subjectValue.id = "mailgo-subject-value"; subjectValue.id = "mailgo-subject-value";
detailSubject.appendChild(subjectSpan); detailSubject.appendChild(subjectSpan);
detailSubject.appendChild(subjectValue); detailSubject.appendChild(subjectValue);
details.appendChild(detailSubject); details.appendChild(detailSubject);
let detailBody = document.createElement("p"); let detailBody = document.createElement("p");
detailBody.id = "mailgo-body"; detailBody.id = "mailgo-body";
let bodySpan = document.createElement("span"); let bodySpan = document.createElement("span");
bodySpan.className = "mailgo-weight-500"; bodySpan.className = "mailgo-weight-500";
let bodyContent = document.createTextNode("body "); let bodyContent = document.createTextNode("body ");
bodySpan.appendChild(bodyContent); bodySpan.appendChild(bodyContent);
let bodyValue = document.createElement("span"); let bodyValue = document.createElement("span");
bodyValue.id = "mailgo-body-value"; bodyValue.id = "mailgo-body-value";
detailBody.appendChild(bodySpan); detailBody.appendChild(bodySpan);
detailBody.appendChild(bodyValue); detailBody.appendChild(bodyValue);
details.appendChild(detailBody); details.appendChild(detailBody);
modalContent.appendChild(details); modalContent.appendChild(details);
// Gmail // Gmail
let gmail = document.createElement("a"); let gmail = document.createElement("a");
gmail.id = "mailgo-gmail"; gmail.id = "mailgo-gmail";
gmail.href = "#mailgo-gmail"; gmail.href = "#mailgo-gmail";
gmail.classList.add("mailgo-open"); gmail.classList.add("mailgo-open");
gmail.classList.add("mailgo-gmail"); gmail.classList.add("mailgo-gmail");
let gmailContent = document.createTextNode("open in "); let gmailContent = document.createTextNode("open in ");
gmail.appendChild(gmailContent); gmail.appendChild(gmailContent);
let gmailSpan = document.createElement("span"); let gmailSpan = document.createElement("span");
gmailSpan.className = "mailgo-weight-500"; gmailSpan.className = "mailgo-weight-500";
let gmailSpanContent = document.createTextNode("Gmail"); let gmailSpanContent = document.createTextNode("Gmail");
gmailSpan.appendChild(gmailSpanContent); gmailSpan.appendChild(gmailSpanContent);
gmail.appendChild(gmailSpan); gmail.appendChild(gmailSpan);
modalContent.appendChild(gmail); modalContent.appendChild(gmail);
// Outlook // Outlook
let outlook = document.createElement("a"); let outlook = document.createElement("a");
outlook.id = "mailgo-outlook"; outlook.id = "mailgo-outlook";
outlook.href = "#mailgo-outlook"; outlook.href = "#mailgo-outlook";
outlook.classList.add("mailgo-open"); outlook.classList.add("mailgo-open");
outlook.classList.add("mailgo-outlook"); outlook.classList.add("mailgo-outlook");
let outlookContent = document.createTextNode("open in "); let outlookContent = document.createTextNode("open in ");
outlook.appendChild(outlookContent); outlook.appendChild(outlookContent);
let outlookSpan = document.createElement("span"); let outlookSpan = document.createElement("span");
outlookSpan.className = "mailgo-weight-500"; outlookSpan.className = "mailgo-weight-500";
let outlookSpanContent = document.createTextNode("Outlook"); let outlookSpanContent = document.createTextNode("Outlook");
outlookSpan.appendChild(outlookSpanContent); outlookSpan.appendChild(outlookSpanContent);
outlook.appendChild(outlookSpan); outlook.appendChild(outlookSpan);
modalContent.appendChild(outlook); modalContent.appendChild(outlook);
// open default // open default
let open = document.createElement("a"); let open = document.createElement("a");
open.id = "mailgo-open"; open.id = "mailgo-open";
open.href = "#mailgo-open"; open.href = "#mailgo-open";
open.classList.add("mailgo-open"); open.classList.add("mailgo-open");
open.classList.add("mailgo-default"); open.classList.add("mailgo-default");
let openSpan = document.createElement("span"); let openSpan = document.createElement("span");
openSpan.className = "mailgo-weight-500"; openSpan.className = "mailgo-weight-500";
let openSpanContent = document.createTextNode("open"); let openSpanContent = document.createTextNode("open");
openSpan.appendChild(openSpanContent); openSpan.appendChild(openSpanContent);
let openContent = document.createTextNode(" default"); let openContent = document.createTextNode(" default");
open.appendChild(openSpan); open.appendChild(openSpan);
open.appendChild(openContent); open.appendChild(openContent);
modalContent.appendChild(open); modalContent.appendChild(open);
// copy // copy
let copy = document.createElement("a"); let copy = document.createElement("a");
copy.id = "mailgo-copy"; copy.id = "mailgo-copy";
copy.href = "#mailgo-copy"; copy.href = "#mailgo-copy";
copy.classList.add("mailgo-copy"); copy.classList.add("mailgo-copy");
copy.classList.add("mailgo-weight-500"); copy.classList.add("mailgo-weight-500");
let copyContent = document.createTextNode("copy"); let copyContent = document.createTextNode("copy");
copy.appendChild(copyContent); copy.appendChild(copyContent);
modalContent.appendChild(copy); modalContent.appendChild(copy);
// by // by
let by = document.createElement("a"); let by = document.createElement("a");
by.href = "https://mailgo.js.org?ref=mailgo-modal"; by.href = "https://mailgo.js.org?ref=mailgo-modal";
by.className = "mailgo-by"; by.className = "mailgo-by";
by.target = "_blank"; by.target = "_blank";
by.rel = "noopener noreferrer"; by.rel = "noopener noreferrer";
let textBy = document.createTextNode("mailgo.js.org"); let textBy = document.createTextNode("mailgo.js.org");
by.appendChild(textBy); by.appendChild(textBy);
modalContent.appendChild(by); modalContent.appendChild(by);
// add the modal at the end of the body // add the modal at the end of the body
document.body.appendChild(modal); document.body.appendChild(modal);
// every click outside the modal will hide the modal // every click outside the modal will hide the modal
modalBackground.addEventListener("click", hideMailgo); modalBackground.addEventListener("click", hideMailgo);
}; }
// mailgo tel
{
// modal
let modal = document.createElement("div");
modal.style.display = "none";
modal.id = "mailgo-tel";
modal.classList.add("mailgo-modal");
/** // background
* mailgoTelInit let modalBackground = document.createElement("div");
* the function that creates the mailgo (for tel:) element in DOM modalBackground.className = "mailgo-modal-background";
*/ modal.appendChild(modalBackground);
const mailgoTelInit = () => {
// modal
let modal = document.createElement("div");
modal.style.display = "none";
modal.id = "mailgo-tel";
modal.classList.add("mailgo-modal");
// background // modal content
let modalBackground = document.createElement("div"); let modalContent = document.createElement("div");
modalBackground.className = "mailgo-modal-background"; modalContent.className = "mailgo-modal-content";
modal.appendChild(modalBackground); modal.appendChild(modalContent);
// modal content // title (email address)
let modalContent = document.createElement("div"); let title = document.createElement("strong");
modalContent.className = "mailgo-modal-content"; title.id = "mailgo-tel-title";
modal.appendChild(modalContent); title.className = "mailgo-title";
modalContent.appendChild(title);
// title (email address) // Telegram
let title = document.createElement("strong"); let telegram = document.createElement("a");
title.id = "mailgo-tel-title"; telegram.id = "mailgo-telegram";
title.className = "mailgo-title"; telegram.href = "#mailgo-telegram";
modalContent.appendChild(title); telegram.classList.add("mailgo-open");
telegram.classList.add("mailgo-telegram");
let telegramContent = document.createTextNode("open in ");
telegram.appendChild(telegramContent);
let telegramSpan = document.createElement("span");
telegramSpan.className = "mailgo-weight-500";
let telegramSpanContent = document.createTextNode("Telegram");
telegramSpan.appendChild(telegramSpanContent);
telegram.appendChild(telegramSpan);
// Telegram modalContent.appendChild(telegram);
let telegram = document.createElement("a");
telegram.id = "mailgo-telegram";
telegram.href = "#mailgo-telegram";
telegram.classList.add("mailgo-open");
telegram.classList.add("mailgo-telegram");
let telegramContent = document.createTextNode("open in ");
telegram.appendChild(telegramContent);
let telegramSpan = document.createElement("span");
telegramSpan.className = "mailgo-weight-500";
let telegramSpanContent = document.createTextNode("Telegram");
telegramSpan.appendChild(telegramSpanContent);
telegram.appendChild(telegramSpan);
modalContent.appendChild(telegram); // WhatsApp
let wa = document.createElement("a");
wa.id = "mailgo-wa";
wa.href = "#mailgo-wa";
wa.classList.add("mailgo-open");
wa.classList.add("mailgo-wa");
let waContent = document.createTextNode("open in ");
wa.appendChild(waContent);
let waSpan = document.createElement("span");
waSpan.className = "mailgo-weight-500";
let waSpanContent = document.createTextNode("WhatsApp");
waSpan.appendChild(waSpanContent);
wa.appendChild(waSpan);
// WhatsApp modalContent.appendChild(wa);
let wa = document.createElement("a");
wa.id = "mailgo-wa";
wa.href = "#mailgo-wa";
wa.classList.add("mailgo-open");
wa.classList.add("mailgo-wa");
let waContent = document.createTextNode("open in ");
wa.appendChild(waContent);
let waSpan = document.createElement("span");
waSpan.className = "mailgo-weight-500";
let waSpanContent = document.createTextNode("WhatsApp");
waSpan.appendChild(waSpanContent);
wa.appendChild(waSpan);
modalContent.appendChild(wa); // call default
let call = document.createElement("a");
call.id = "mailgo-call";
call.href = "#mailgo-call";
call.classList.add("mailgo-open");
call.classList.add("mailgo-default");
let callSpan = document.createElement("span");
callSpan.className = "mailgo-weight-500";
let callSpanContent = document.createTextNode("call");
callSpan.appendChild(callSpanContent);
let callContent = document.createTextNode(" as default");
call.appendChild(callSpan);
call.appendChild(callContent);
// call default modalContent.appendChild(call);
let call = document.createElement("a");
call.id = "mailgo-call";
call.href = "#mailgo-call";
call.classList.add("mailgo-open");
call.classList.add("mailgo-default");
let callSpan = document.createElement("span");
callSpan.className = "mailgo-weight-500";
let callSpanContent = document.createTextNode("call");
callSpan.appendChild(callSpanContent);
let callContent = document.createTextNode(" as default");
call.appendChild(callSpan);
call.appendChild(callContent);
modalContent.appendChild(call); // copy
let copy = document.createElement("a");
copy.id = "mailgo-tel-copy";
copy.href = "#mailgo-copy";
copy.classList.add("mailgo-copy");
copy.classList.add("mailgo-weight-500");
let copyContent = document.createTextNode("copy");
copy.appendChild(copyContent);
// copy modalContent.appendChild(copy);
let copy = document.createElement("a");
copy.id = "mailgo-tel-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);
// by modalContent.appendChild(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);
// add the modal at the end of the body // every click outside the modal will hide the modal
document.body.appendChild(modal); modalBackground.addEventListener("click", hideMailgo);
}
// every click outside the modal will hide the modal
modalBackground.addEventListener("click", hideMailgo);
}; };
/** /**
@ -530,10 +529,17 @@ const isMailgoTel = element =>
* document.querySelectorAll( * 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'
* ); * );
* document.querySelectorAll(
* 'a[href^="tel:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
* );
*/ */
const mailgoCheckRender = event => { const mailgoCheckRender = event => {
// check if the id=mailgo exists in the body // check if the id=mailgo exists in the body
if (!document.contains(getE("mailgo"))) return; if (
!document.contains(getE("mailgo")) ||
!document.contains(getE("mailgo-tel"))
)
return;
// the path of the event // the path of the event
let path = let path =
@ -605,9 +611,8 @@ const mailgoKeydown = () => {
return; return;
}; };
// DOMContentLoaded -> mailgoInit and mailgoTelInit (creates the modals) // DOMContentLoaded -> mailgoInit (creates the modals)
document.addEventListener("DOMContentLoaded", mailgoInit); document.addEventListener("DOMContentLoaded", mailgoInit);
document.addEventListener("DOMContentLoaded", mailgoTelInit);
// event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered // event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
document.addEventListener("click", mailgoCheckRender); document.addEventListener("click", mailgoCheckRender);