odit/mailymaily
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

self-invoking functions

Browse Source
This commit is contained in:
Matteo Manzinello 2019-10-27 14:05:42 +01:00
parent e43f387097
commit b0ec8a49cf
3 changed files with 794 additions and 789 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/mailgo.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
mailgo.js
View File

File diff suppressed because one or more lines are too long

181
src/mailgo.js
View File

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