go on with tel!
This commit is contained in:
Matteo Manzinello
parent
8f0c439492
commit
1080b180c3
2
dist/mailgo.min.css
vendored
2
dist/mailgo.min.css
vendored
@ -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
2
dist/mailgo.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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,14 +294,9 @@ 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(
|
||||
@ -394,27 +400,13 @@ const mailgoRender = mailgo => {
|
||||
actions.openOutlook(mail, subject, bodyMail)
|
||||
);
|
||||
|
||||
let encEmail = encodeEmail(mail);
|
||||
encEmail = encodeEmail(mail);
|
||||
openButton.addEventListener("click", () => actions.openDefault(encEmail));
|
||||
|
||||
copyButton.addEventListener("click", () => actions.copy(mail, copyButton));
|
||||
|
||||
// show the mailgo
|
||||
showMailgo();
|
||||
|
||||
// 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 = "";
|
||||
|
||||
}
|
||||
// mailgo tel
|
||||
if (type === TEL_TYPE) {
|
||||
if (mailgo.href && mailgo.href.toLowerCase().startsWith(TEL)) {
|
||||
tel = decodeURIComponent(
|
||||
mailgo.href
|
||||
@ -453,16 +445,13 @@ const mailgoTelRender = mailgo => {
|
||||
callButton.addEventListener("click", () => actions.callDefault(tel));
|
||||
|
||||
copyButton.addEventListener("click", () => actions.copy(tel, copyButton));
|
||||
}
|
||||
|
||||
// show the mailgo
|
||||
showMailgoTel();
|
||||
showMailgo(type);
|
||||
|
||||
// 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,17 +572,9 @@ 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;
|
||||
const mailgoKeydown = () => {
|
||||
// if mailgo is showing
|
||||
if (mailgoIsShowing(MAIL_TYPE)) {
|
||||
switch (event.keyCode) {
|
||||
case 27:
|
||||
// Escape
|
||||
@ -619,6 +600,8 @@ const mailgoKeydown = (
|
||||
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);
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user