go on with tel!

This commit is contained in:
Matteo Manzinello 2019-09-16 23:06:40 +02:00
parent 8f0c439492
commit 1080b180c3
5 changed files with 202 additions and 219 deletions

2
dist/mailgo.min.css vendored
View File

@ -1 +1 @@
.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-modal strong{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.mailgo-modal strong{font-weight:700}.mailgo-modal .mailgo-modal-background{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(32,35,42,.75);opacity:.8}.mailgo-modal .mailgo-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:.97;border-radius:5px;box-shadow:0 3px 8px 0 rgba(32,35,42,.12);color:#4a4a4a;display:block;overflow:auto;padding:20px}.mailgo-modal .mailgo-modal-content:hover{opacity:1;box-shadow:0 18px 30px 0 rgba(32,35,42,.23)}.mailgo-modal .mailgo-modal-content .mailgo-title{display:block;margin-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mailgo-modal .mailgo-modal-content .mailgo-details{margin-bottom:10px}.mailgo-modal .mailgo-modal-content .mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal .mailgo-modal-content a{display:block;padding:10px;color:#4a4a4a;border-radius:5px;text-decoration:none}.mailgo-modal .mailgo-modal-content a.mailgo-gmail{color:#d44638}.mailgo-modal .mailgo-modal-content a.mailgo-outlook{color:#0072c6}.mailgo-modal .mailgo-modal-content a.mailgo-wa{color:#00bfa5}.mailgo-modal .mailgo-modal-content a.mailgo-telegram{color:#08c}.mailgo-modal .mailgo-modal-content a.mailgo-copy{padding:16px 10px;font-size:16px}.mailgo-modal .mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal .mailgo-modal-content a.mailgo-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.mailgo-modal .mailgo-modal-content a.mailgo-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.mailgo-modal .mailgo-modal-content a.mailgo-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.mailgo-modal .mailgo-modal-content a.mailgo-wa:hover{background-color:rgba(0,114,198,.08);color:#00bfa5}.mailgo-modal .mailgo-modal-content a.mailgo-telegram:hover{background-color:rgba(0,114,198,.08);color:#08c}.mailgo-modal .mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;color:#4a4a4a;opacity:.5}.mailgo-modal .mailgo-modal-content a.mailgo-by:hover{opacity:1}.mailgo-modal .mailgo-modal-content .mailgo-weight-500{font-weight:500}
.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-modal strong{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.mailgo-modal strong{font-weight:700}.mailgo-modal .mailgo-modal-background{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(32,35,42,.75);opacity:.8}.mailgo-modal .mailgo-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:.97;border-radius:5px;box-shadow:0 3px 8px 0 rgba(32,35,42,.12);color:#4a4a4a;display:block;overflow:auto;padding:20px}.mailgo-modal .mailgo-modal-content:hover{opacity:1;box-shadow:0 18px 30px 0 rgba(32,35,42,.23)}.mailgo-modal .mailgo-modal-content .mailgo-title{display:block;margin-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mailgo-modal .mailgo-modal-content .mailgo-details{margin-bottom:10px}.mailgo-modal .mailgo-modal-content .mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal .mailgo-modal-content a{display:block;padding:10px;color:#4a4a4a;border-radius:5px;text-decoration:none}.mailgo-modal .mailgo-modal-content a.mailgo-gmail{color:#d44638}.mailgo-modal .mailgo-modal-content a.mailgo-outlook{color:#0072c6}.mailgo-modal .mailgo-modal-content a.mailgo-wa{color:#00bfa5}.mailgo-modal .mailgo-modal-content a.mailgo-telegram{color:#08c}.mailgo-modal .mailgo-modal-content a.mailgo-copy{padding:16px 10px;font-size:16px}.mailgo-modal .mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal .mailgo-modal-content a.mailgo-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.mailgo-modal .mailgo-modal-content a.mailgo-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.mailgo-modal .mailgo-modal-content a.mailgo-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.mailgo-modal .mailgo-modal-content a.mailgo-telegram:hover{background-color:rgba(0,114,198,.08);color:#08c}.mailgo-modal .mailgo-modal-content a.mailgo-wa:hover{background-color:rgba(0,191,165,.08);color:#00bfa5}.mailgo-modal .mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;color:#4a4a4a;opacity:.5}.mailgo-modal .mailgo-modal-content a.mailgo-by:hover{opacity:1}.mailgo-modal .mailgo-modal-content .mailgo-weight-500{font-weight:500}

2
dist/mailgo.min.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -8,6 +8,17 @@ const CALLTO = "callto:";
const MAIL_TYPE = "mail";
const TEL_TYPE = "tel";
let url = "",
mail = "",
encEmail = "",
cc = "",
bcc = "",
subject = "",
bodyMail = "";
let tel = "",
msg = "";
// mailgo style (gulp)
const mailgoCSS = document.createElement("style");
mailgoCSS.id = "mailgo-style";
@ -283,186 +294,164 @@ const mailgoTelInit = () => {
* mailgoRender
* function to render a single mailgo
*/
const mailgoRender = mailgo => {
let url = "",
mail = "",
cc = "",
bcc = "",
subject = "",
bodyMail = "";
const mailgoRender = (type = MAIL_TYPE, mailgo) => {
// mailgo mail
if (type === MAIL_TYPE) {
// if the element href=^"mailto:"
if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) {
mail = decodeURIComponent(
mailgo.href
.split("?")[0]
.split(MAILTO)[1]
.trim()
);
// if the element href=^"mailto:"
if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) {
mail = decodeURIComponent(
mailgo.href
.split("?")[0]
.split(MAILTO)[1]
.trim()
url = new URL(mailgo.href);
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 {
// if the element href="#mailgo" or class="mailgo"
// mail = data-address + @ + data-domain
mail =
mailgo.getAttribute("data-address") +
"@" +
mailgo.getAttribute("data-domain");
url = new URL(MAILTO + encodeURIComponent(mail));
// cc = data-cc-address + @ + data-cc-domain
cc =
mailgo.getAttribute("data-cc-address") +
"@" +
mailgo.getAttribute("data-cc-domain");
// bcc = data-bcc-address + @ + data-bcc-domain
bcc =
mailgo.getAttribute("data-bcc-address") +
"@" +
mailgo.getAttribute("data-bcc-domain");
// subject = data-subject
subject = mailgo.getAttribute("data-subject");
// body = data-body
bodyMail = mailgo.getAttribute("data-body");
}
// validate the email address
if (!validateEmails(mail.split(","))) return;
// if cc, bcc is not valid cc, bcc = ""
if (cc && !validateEmails(cc.split(","))) cc = "";
if (bcc && !validateEmails(bcc.split(","))) bcc = "";
// information
let titleEl = getE("mailgo-title");
let detailsEl = getE("mailgo-details");
let ccEl = getE("mailgo-cc");
let ccValueEl = getE("mailgo-cc-value");
let bccEl = getE("mailgo-bcc");
let bccValueEl = getE("mailgo-bcc-value");
let subjectEl = getE("mailgo-subject");
let subjectValueEl = getE("mailgo-subject-value");
let bodyEl = getE("mailgo-body");
let bodyValueEl = getE("mailgo-body-value");
// actions
let gmailButton = getE("mailgo-gmail");
let outlookButton = getE("mailgo-outlook");
let openButton = getE("mailgo-open");
let copyButton = getE("mailgo-copy");
// the title of the modal (email address)
titleEl.innerHTML = mail.split(",").join("<br/>");
// add the details if provided
cc
? ((ccEl.style.display = "block"),
(ccValueEl.innerHTML = cc.split(",").join("<br/>")))
: (ccEl.style.display = "none");
bcc
? ((bccEl.style.display = "block"),
(bccValueEl.innerHTML = bcc.split(",").join("<br/>")))
: (bccEl.style.display = "none");
subject
? ((subjectEl.style.display = "block"),
(subjectValueEl.textContent = subject))
: (subjectEl.style.display = "none");
bodyMail
? ((bodyEl.style.display = "block"), (bodyValueEl.textContent = bodyMail))
: (bodyEl.style.display = "none");
// add the actions
gmailButton.addEventListener("click", () =>
actions.openGmail(mail, cc, bcc, subject, bodyMail)
);
url = new URL(mailgo.href);
let urlParams = new URLSearchParams(url.search);
outlookButton.addEventListener("click", () =>
actions.openOutlook(mail, subject, bodyMail)
);
// optional parameters for the email
cc = urlParams.get("cc");
bcc = urlParams.get("bcc");
subject = urlParams.get("subject");
bodyMail = urlParams.get("body");
} else {
// if the element href="#mailgo" or class="mailgo"
// mail = data-address + @ + data-domain
mail =
mailgo.getAttribute("data-address") +
"@" +
mailgo.getAttribute("data-domain");
encEmail = encodeEmail(mail);
openButton.addEventListener("click", () => actions.openDefault(encEmail));
url = new URL(MAILTO + encodeURIComponent(mail));
// cc = data-cc-address + @ + data-cc-domain
cc =
mailgo.getAttribute("data-cc-address") +
"@" +
mailgo.getAttribute("data-cc-domain");
// bcc = data-bcc-address + @ + data-bcc-domain
bcc =
mailgo.getAttribute("data-bcc-address") +
"@" +
mailgo.getAttribute("data-bcc-domain");
// subject = data-subject
subject = mailgo.getAttribute("data-subject");
// body = data-body
bodyMail = mailgo.getAttribute("data-body");
copyButton.addEventListener("click", () => actions.copy(mail, copyButton));
}
// mailgo tel
if (type === TEL_TYPE) {
if (mailgo.href && mailgo.href.toLowerCase().startsWith(TEL)) {
tel = decodeURIComponent(
mailgo.href
.split("?")[0]
.split(TEL)[1]
.trim()
);
}
// validate the email address
if (!validateEmails(mail.split(","))) return;
if (mailgo.href && mailgo.href.toLowerCase().startsWith(CALLTO)) {
tel = decodeURIComponent(
mailgo.href
.split("?")[0]
.split(CALLTO)[1]
.trim()
);
}
// if cc, bcc is not valid cc, bcc = ""
if (cc && !validateEmails(cc.split(","))) cc = "";
if (bcc && !validateEmails(bcc.split(","))) bcc = "";
// information
let titleEl = getE("mailgo-tel-title");
// information
let titleEl = getE("mailgo-title");
let detailsEl = getE("mailgo-details");
let ccEl = getE("mailgo-cc");
let ccValueEl = getE("mailgo-cc-value");
let bccEl = getE("mailgo-bcc");
let bccValueEl = getE("mailgo-bcc-value");
let subjectEl = getE("mailgo-subject");
let subjectValueEl = getE("mailgo-subject-value");
let bodyEl = getE("mailgo-body");
let bodyValueEl = getE("mailgo-body-value");
// actions
let waButton = getE("mailgo-wa");
let telegramButton = getE("mailgo-telegram");
let callButton = getE("mailgo-call");
let copyButton = getE("mailgo-tel-copy");
// actions
let gmailButton = getE("mailgo-gmail");
let outlookButton = getE("mailgo-outlook");
let openButton = getE("mailgo-open");
let copyButton = getE("mailgo-copy");
// the title of the modal (tel)
titleEl.innerHTML = tel;
// the title of the modal (email address)
titleEl.innerHTML = mail.split(",").join("<br/>");
// add the actions
waButton.addEventListener("click", () => actions.openWhatsApp(tel));
// add the details if provided
cc
? ((ccEl.style.display = "block"),
(ccValueEl.innerHTML = cc.split(",").join("<br/>")))
: (ccEl.style.display = "none");
telegramButton.addEventListener("click", () => actions.openTelegram(tel));
bcc
? ((bccEl.style.display = "block"),
(bccValueEl.innerHTML = bcc.split(",").join("<br/>")))
: (bccEl.style.display = "none");
callButton.addEventListener("click", () => actions.callDefault(tel));
subject
? ((subjectEl.style.display = "block"),
(subjectValueEl.textContent = subject))
: (subjectEl.style.display = "none");
bodyMail
? ((bodyEl.style.display = "block"), (bodyValueEl.textContent = bodyMail))
: (bodyEl.style.display = "none");
// add the actions
gmailButton.addEventListener("click", () =>
actions.openGmail(mail, cc, bcc, subject, bodyMail)
);
outlookButton.addEventListener("click", () =>
actions.openOutlook(mail, subject, bodyMail)
);
let encEmail = encodeEmail(mail);
openButton.addEventListener("click", () => actions.openDefault(encEmail));
copyButton.addEventListener("click", () => actions.copy(mail, copyButton));
copyButton.addEventListener("click", () => actions.copy(tel, copyButton));
}
// show the mailgo
showMailgo();
showMailgo(type);
// listener keyDown
document.addEventListener("keydown", () =>
mailgoKeydown(mail, cc, bcc, subject, bodyMail, encEmail, copyButton)
);
};
/**
* mailgoTelRender
* function to render a single tel mailgo
*/
const mailgoTelRender = mailgo => {
let tel = "";
if (mailgo.href && mailgo.href.toLowerCase().startsWith(TEL)) {
tel = decodeURIComponent(
mailgo.href
.split("?")[0]
.split(TEL)[1]
.trim()
);
}
if (mailgo.href && mailgo.href.toLowerCase().startsWith(CALLTO)) {
tel = decodeURIComponent(
mailgo.href
.split("?")[0]
.split(CALLTO)[1]
.trim()
);
}
// information
let titleEl = getE("mailgo-tel-title");
// actions
let waButton = getE("mailgo-wa");
let telegramButton = getE("mailgo-telegram");
let callButton = getE("mailgo-call");
let copyButton = getE("mailgo-tel-copy");
// the title of the modal (tel)
titleEl.innerHTML = tel;
// add the actions
waButton.addEventListener("click", () => actions.openWhatsApp(tel));
telegramButton.addEventListener("click", () => actions.openTelegram(tel));
callButton.addEventListener("click", () => actions.callDefault(tel));
copyButton.addEventListener("click", () => actions.copy(tel, copyButton));
// show the mailgo
showMailgoTel();
// listener keyDown
/*
document.addEventListener("keydown", () =>
mailgoKeydown(mail, cc, bcc, subject, bodyMail, encEmail, copyButton)
);
*/
document.addEventListener("keydown", mailgoKeydown);
};
// actions
@ -560,7 +549,7 @@ const mailgoCheckRender = event => {
event.preventDefault();
// render mailgo
mailgoRender(element);
mailgoRender(MAIL_TYPE, element);
return;
}
@ -569,7 +558,7 @@ const mailgoCheckRender = event => {
event.preventDefault();
// render mailgo
mailgoTelRender(element);
mailgoRender(TEL_TYPE, element);
return;
}
@ -583,41 +572,35 @@ const mailgoCheckRender = event => {
* mailgoKeydown
* function to manage the keydown event when the modal is showing
*/
const mailgoKeydown = (
mail,
cc,
bcc,
subject,
bodyMail,
encEmail,
copyButton
) => {
// if mailgo is not showing do nothing
if (!mailgoIsShowing()) return;
switch (event.keyCode) {
case 27:
// Escape
hideMailgo();
break;
case 71:
// g -> open GMail
actions.openGmail(mail, cc, bcc, subject, bodyMail);
break;
case 79:
// o -> open Outlook
actions.openOutlook(mail, subject, bodyMail);
break;
case 32:
case 13:
// spacebar or enter -> open default
actions.openDefault(encEmail);
break;
case 67:
// c -> copy
actions.copy(mail, copyButton);
break;
default:
return;
const mailgoKeydown = () => {
// if mailgo is showing
if (mailgoIsShowing(MAIL_TYPE)) {
switch (event.keyCode) {
case 27:
// Escape
hideMailgo();
break;
case 71:
// g -> open GMail
actions.openGmail(mail, cc, bcc, subject, bodyMail);
break;
case 79:
// o -> open Outlook
actions.openOutlook(mail, subject, bodyMail);
break;
case 32:
case 13:
// spacebar or enter -> open default
actions.openDefault(encEmail);
break;
case 67:
// c -> copy
actions.copy(mail, copyButton);
break;
default:
return;
}
} else if (mailgoIsShowing(TEL_TYPE)) {
}
return;
};
@ -629,17 +612,11 @@ document.addEventListener("DOMContentLoaded", mailgoTelInit);
// event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
document.addEventListener("click", mailgoCheckRender);
// validate a single email with regex
const 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,}))$/;
return re.test(email);
};
// show the modal
const showMailgo = type => {
const showMailgo = (type = MAIL_TYPE) => {
type === TEL_TYPE
? setDisplay("mailgo", "flex")
: setDisplay("mailgo-tel", "flex");
? setDisplay("mailgo-tel", "flex")
: setDisplay("mailgo", "flex");
};
// hide the modal
@ -649,10 +626,10 @@ const hideMailgo = () => {
};
// is the mailgo modal hidden?
const mailgoIsShowing = (type = "mail") => {
const mailgoIsShowing = (type = MAIL_TYPE) => {
type === TEL_TYPE
? getDisplay("mailgo") === "flex"
: getDisplay("mailgo-tel") === "flex";
? getDisplay("mailgo-tel") === "flex"
: getDisplay("mailgo") === "flex";
};
// decrypt email
@ -688,6 +665,12 @@ const composedPath = el => {
}
};
// validate a single email with regex
const 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,}))$/;
return re.test(email);
};
// validate an array of emails
const validateEmails = arr => arr.every(validateEmail);

View File

@ -129,16 +129,16 @@ $telegram-color: #0088cc;
color: $outlook-color;
}
&.mailgo-wa:hover {
background-color: rgba(0, 114, 198, 0.08);
color: $wa-color;
}
&.mailgo-telegram:hover {
background-color: rgba(0, 114, 198, 0.08);
color: $telegram-color;
}
&.mailgo-wa:hover {
background-color: rgba(0, 191, 165, 0.08);
color: $wa-color;
}
&.mailgo-by {
display: block;
font-size: 8px;