self-invoking functions
This commit is contained in:
Matteo Manzinello
parent
e43f387097
commit
b0ec8a49cf
2
dist/mailgo.min.js
vendored
2
dist/mailgo.min.js
vendored
File diff suppressed because one or more lines are too long
181
src/mailgo.js
181
src/mailgo.js
@ -1,22 +1,20 @@
|
||||
const V = "MAILGO_VERSION";
|
||||
(() => {
|
||||
const V = "MAILGO_VERSION";
|
||||
|
||||
// window exists
|
||||
const windowExists = () => window && typeof window !== "undefined";
|
||||
// links
|
||||
const MAILTO = "mailto:";
|
||||
const TEL = "tel:";
|
||||
const CALLTO = "callto:";
|
||||
|
||||
// links
|
||||
const MAILTO = "mailto:";
|
||||
const TEL = "tel:";
|
||||
const CALLTO = "callto:";
|
||||
// mailgo types
|
||||
const MAIL_TYPE = "mail";
|
||||
const TEL_TYPE = "tel";
|
||||
|
||||
// mailgo types
|
||||
const MAIL_TYPE = "mail";
|
||||
const TEL_TYPE = "tel";
|
||||
// default href for links
|
||||
const DEFAULT_BTN_HREF = "javascript:void(0);";
|
||||
|
||||
// default href for links
|
||||
const DEFAULT_BTN_HREF = "javascript:void(0);";
|
||||
|
||||
// mailgo variables
|
||||
let url = "",
|
||||
// mailgo variables
|
||||
let url = "",
|
||||
mail = "",
|
||||
encEmail = "",
|
||||
cc = "",
|
||||
@ -24,14 +22,14 @@ let url = "",
|
||||
subject = "",
|
||||
bodyMail = "";
|
||||
|
||||
// mailgo tel variables
|
||||
let tel = "",
|
||||
// mailgo tel variables
|
||||
let tel = "",
|
||||
msg = "",
|
||||
telegramUsername = "",
|
||||
skypeUsername = "";
|
||||
|
||||
// mailgo buttons
|
||||
let gmailButton,
|
||||
// mailgo buttons
|
||||
let gmailButton,
|
||||
outlookButton,
|
||||
openButton,
|
||||
telegramButton,
|
||||
@ -40,21 +38,11 @@ let gmailButton,
|
||||
callButton,
|
||||
copyButton;
|
||||
|
||||
if (windowExists()) {
|
||||
// mailgo style (gulp)
|
||||
let mailgoCSS = document.createElement("style");
|
||||
mailgoCSS.id = "mailgo-style";
|
||||
mailgoCSS.type = "text/css";
|
||||
let mailgoCSSContent = document.createTextNode(`MAILGO_STYLE`);
|
||||
mailgoCSS.appendChild(mailgoCSSContent);
|
||||
document.head.appendChild(mailgoCSS);
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* mailgoInit
|
||||
* the function that creates the mailgo elements in DOM
|
||||
*/
|
||||
const mailgoInit = () => {
|
||||
const mailgoInit = () => {
|
||||
// mailgo mail
|
||||
{
|
||||
// modal
|
||||
@ -330,13 +318,13 @@ const mailgoInit = () => {
|
||||
// every click outside the modal will hide the modal
|
||||
modalBackground.addEventListener("click", hideMailgo);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
/**
|
||||
* mailgoRender
|
||||
* function to render a mailgo (mail or tel)
|
||||
*/
|
||||
const mailgoRender = (type = MAIL_TYPE, mailgo) => {
|
||||
const mailgoRender = (type = MAIL_TYPE, mailgo) => {
|
||||
// mailgo mail
|
||||
if (type === MAIL_TYPE) {
|
||||
// if the element href=^"mailto:"
|
||||
@ -430,7 +418,8 @@ const mailgoRender = (type = MAIL_TYPE, mailgo) => {
|
||||
: (subjectEl.style.display = "none");
|
||||
|
||||
bodyMail
|
||||
? ((bodyEl.style.display = "block"), (bodyValueEl.textContent = bodyMail))
|
||||
? ((bodyEl.style.display = "block"),
|
||||
(bodyValueEl.textContent = bodyMail))
|
||||
: (bodyEl.style.display = "none");
|
||||
|
||||
// add the actions
|
||||
@ -507,10 +496,10 @@ const mailgoRender = (type = MAIL_TYPE, mailgo) => {
|
||||
|
||||
// add listener keyDown
|
||||
document.addEventListener("keydown", mailgoKeydown);
|
||||
};
|
||||
};
|
||||
|
||||
// actions
|
||||
const actions = {
|
||||
// actions
|
||||
const actions = {
|
||||
openGmail: () => {
|
||||
// Gmail url
|
||||
let gmailUrl =
|
||||
@ -599,10 +588,10 @@ const actions = {
|
||||
hideMailgo();
|
||||
}, 999);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// function that returns if an element is a mailgo
|
||||
const isMailgo = (element, type = MAIL_TYPE) => {
|
||||
// function that returns if an element is a mailgo
|
||||
const isMailgo = (element, type = MAIL_TYPE) => {
|
||||
// mailgo type mail
|
||||
if (type === MAIL_TYPE) {
|
||||
return (
|
||||
@ -637,9 +626,9 @@ const isMailgo = (element, type = MAIL_TYPE) => {
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
/**
|
||||
* mailgoCheckRender
|
||||
* function to check if an element is mailgo-enabled or not referencing to
|
||||
* mail:
|
||||
@ -655,7 +644,7 @@ const isMailgo = (element, type = MAIL_TYPE) => {
|
||||
* 'a[href^="callto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
|
||||
* );
|
||||
*/
|
||||
const mailgoCheckRender = event => {
|
||||
const mailgoCheckRender = event => {
|
||||
// check if the id=mailgo exists in the body
|
||||
if (
|
||||
!document.contains(getE("mailgo")) ||
|
||||
@ -674,7 +663,8 @@ const mailgoCheckRender = event => {
|
||||
|
||||
if (path) {
|
||||
path.forEach(element => {
|
||||
if (element instanceof HTMLDocument || element instanceof Window) return;
|
||||
if (element instanceof HTMLDocument || element instanceof Window)
|
||||
return;
|
||||
|
||||
// go in the event.path to find if the user has clicked on a mailgo element
|
||||
if (isMailgo(element, MAIL_TYPE)) {
|
||||
@ -699,13 +689,13 @@ const mailgoCheckRender = event => {
|
||||
}
|
||||
|
||||
return;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
/**
|
||||
* mailgoKeydown
|
||||
* function to manage the keydown event when the modal is showing
|
||||
*/
|
||||
const mailgoKeydown = event => {
|
||||
const mailgoKeydown = event => {
|
||||
// if mailgo is showing
|
||||
if (mailgoIsShowing(MAIL_TYPE)) {
|
||||
switch (event.keyCode) {
|
||||
@ -761,19 +751,10 @@ const mailgoKeydown = event => {
|
||||
}
|
||||
}
|
||||
return;
|
||||
};
|
||||
};
|
||||
|
||||
// if the window object exists...
|
||||
if (windowExists()) {
|
||||
// DOMContentLoaded -> mailgoInit (creates the modals)
|
||||
document.addEventListener("DOMContentLoaded", mailgoInit);
|
||||
|
||||
// event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
|
||||
document.addEventListener("click", mailgoCheckRender);
|
||||
}
|
||||
|
||||
// show the modal
|
||||
const showMailgo = (type = MAIL_TYPE) => {
|
||||
// show the modal
|
||||
const showMailgo = (type = MAIL_TYPE) => {
|
||||
// show mailgo type mail
|
||||
if (type === MAIL_TYPE) {
|
||||
setDisplay("mailgo", "flex");
|
||||
@ -784,45 +765,48 @@ const showMailgo = (type = MAIL_TYPE) => {
|
||||
setDisplay("mailgo-tel", "flex");
|
||||
return;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// hide the modal
|
||||
const hideMailgo = () => {
|
||||
// hide the modal
|
||||
const hideMailgo = () => {
|
||||
setDisplay("mailgo", "none");
|
||||
setDisplay("mailgo-tel", "none");
|
||||
|
||||
// remove listener keyDown
|
||||
document.removeEventListener("keydown", mailgoKeydown);
|
||||
};
|
||||
};
|
||||
|
||||
// is the mailgo modal hidden?
|
||||
const mailgoIsShowing = (type = MAIL_TYPE) => {
|
||||
// is the mailgo modal hidden?
|
||||
const mailgoIsShowing = (type = MAIL_TYPE) => {
|
||||
if (type === MAIL_TYPE) {
|
||||
return getDisplay("mailgo") === "flex";
|
||||
} else if (type === TEL_TYPE) {
|
||||
return getDisplay("mailgo-tel") === "flex";
|
||||
}
|
||||
return false;
|
||||
};
|
||||
};
|
||||
|
||||
// decrypt email
|
||||
const mailToEncoded = encoded =>
|
||||
// window exists
|
||||
const windowExists = () => window && typeof window !== "undefined";
|
||||
|
||||
// decrypt email
|
||||
const mailToEncoded = encoded =>
|
||||
(window.location.href = MAILTO + atob(encoded));
|
||||
|
||||
// encode email
|
||||
const encodeEmail = email => btoa(email);
|
||||
// encode email
|
||||
const encodeEmail = email => btoa(email);
|
||||
|
||||
// getE shorthand
|
||||
const getE = id => document.getElementById(id);
|
||||
// getE shorthand
|
||||
const getE = id => document.getElementById(id);
|
||||
|
||||
// get display value
|
||||
const getDisplay = id => getE(id).style.display;
|
||||
// get display value
|
||||
const getDisplay = id => getE(id).style.display;
|
||||
|
||||
// get display value
|
||||
const setDisplay = (id, value) => (getE(id).style.display = value);
|
||||
// get display value
|
||||
const setDisplay = (id, value) => (getE(id).style.display = value);
|
||||
|
||||
// custom composedPath if path or event.composedPath() are not defined
|
||||
const composedPath = el => {
|
||||
// custom composedPath if path or event.composedPath() are not defined
|
||||
const composedPath = el => {
|
||||
let path = [];
|
||||
|
||||
while (el) {
|
||||
@ -836,19 +820,19 @@ const composedPath = el => {
|
||||
|
||||
el = el.parentElement;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// validate a single email with regex
|
||||
const validateEmail = email => {
|
||||
// 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);
|
||||
// validate an array of emails
|
||||
const validateEmails = arr => arr.every(validateEmail);
|
||||
|
||||
// copy of a string
|
||||
const copyToClipboard = str => {
|
||||
// copy of a string
|
||||
const copyToClipboard = str => {
|
||||
let el = document.createElement("textarea");
|
||||
el.value = str;
|
||||
el.setAttribute("readonly", "");
|
||||
@ -866,4 +850,25 @@ const copyToClipboard = str => {
|
||||
document.getSelection().removeAllRanges();
|
||||
document.getSelection().addRange(selected);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// start mailgo
|
||||
(() => {
|
||||
// if the window object exists...
|
||||
if (windowExists()) {
|
||||
// mailgo style (gulp)
|
||||
let mailgoCSS = document.createElement("style");
|
||||
mailgoCSS.id = "mailgo-style";
|
||||
mailgoCSS.type = "text/css";
|
||||
let mailgoCSSContent = document.createTextNode(`MAILGO_STYLE`);
|
||||
mailgoCSS.appendChild(mailgoCSSContent);
|
||||
document.head.appendChild(mailgoCSS);
|
||||
|
||||
// DOMContentLoaded -> mailgoInit (creates the modals)
|
||||
document.addEventListener("DOMContentLoaded", mailgoInit);
|
||||
|
||||
// event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
|
||||
document.addEventListener("click", mailgoCheckRender);
|
||||
}
|
||||
})();
|
||||
})();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user