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

now mailgo is in typescript?

Browse Source
This commit is contained in:
Matteo Manzinello 2020-04-08 15:07:48 +02:00
parent e575e9762f
commit 093b8ece6d
2 changed files with 116 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
src/mailgo.ts
View File

@ -17,7 +17,7 @@ const mailgoVersion = "MAILGO_VERSION";
const span: string = "span"; const span: string = "span";
// mailgo variables // mailgo variables
let url: string = "", let url: URL,
mail: string = "", mail: string = "",
encEmail: string = "", encEmail: string = "",
cc: string = "", cc: string = "",
@ -44,15 +44,15 @@ const mailgoVersion = "MAILGO_VERSION";
bodyValue: HTMLElement; bodyValue: HTMLElement;
// mailgo buttons (actions) // mailgo buttons (actions)
let gmail: HTMLElement, let gmail: HTMLLinkElement,
outlook: HTMLElement, outlook: HTMLLinkElement,
open: HTMLElement, open: HTMLLinkElement,
telegram: HTMLElement, telegram: HTMLLinkElement,
wa: HTMLElement, wa: HTMLLinkElement,
skype: HTMLElement, skype: HTMLLinkElement,
call: HTMLElement, call: HTMLLinkElement,
copyMail: HTMLElement, copyMail: HTMLLinkElement,
copyTel: HTMLElement; copyTel: HTMLLinkElement;
/** /**
* mailgoInit * mailgoInit
@ -70,18 +70,18 @@ const mailgoVersion = "MAILGO_VERSION";
// background // background
let modalBackground = createElement(); let modalBackground = createElement();
modalBackground.className = "m-modal-back"; modalBackground.className = "m-modal-back";
modal.aC(modalBackground); modal.appendChild(modalBackground);
// modal content // modal content
let modalContent = createElement(); let modalContent = createElement();
modalContent.className = "m-modal-content"; modalContent.className = "m-modal-content";
modal.aC(modalContent); modal.appendChild(modalContent);
// title (email address) // title (email address)
title = createElement("strong"); title = createElement("strong");
title.id = "m-title"; title.id = "m-title";
title.className = "m-title"; title.className = "m-title";
modalContent.aC(title); modalContent.appendChild(title);
// details // details
let details = createElement(); let details = createElement();
@ -92,104 +92,104 @@ const mailgoVersion = "MAILGO_VERSION";
detailCc.id = "m-cc"; detailCc.id = "m-cc";
let ccSpan = createElement(span); let ccSpan = createElement(span);
ccSpan.className = "w-500"; ccSpan.className = "w-500";
ccSpan.aC(createTextNode("cc ")); ccSpan.appendChild(createTextNode("cc "));
ccValue = createElement(span); ccValue = createElement(span);
ccValue.id = "m-cc-value"; ccValue.id = "m-cc-value";
detailCc.aC(ccSpan); detailCc.appendChild(ccSpan);
detailCc.aC(ccValue); detailCc.appendChild(ccValue);
details.aC(detailCc); details.appendChild(detailCc);
detailBcc = createElement("p"); detailBcc = createElement("p");
detailBcc.id = "m-bcc"; detailBcc.id = "m-bcc";
let bccSpan = createElement(span); let bccSpan = createElement(span);
bccSpan.className = "w-500"; bccSpan.className = "w-500";
bccSpan.aC(createTextNode("bcc ")); bccSpan.appendChild(createTextNode("bcc "));
bccValue = createElement(span); bccValue = createElement(span);
bccValue.id = "m-bcc-value"; bccValue.id = "m-bcc-value";
detailBcc.aC(bccSpan); detailBcc.appendChild(bccSpan);
detailBcc.aC(bccValue); detailBcc.appendChild(bccValue);
details.aC(detailBcc); details.appendChild(detailBcc);
detailSubject = createElement("p"); detailSubject = createElement("p");
detailSubject.id = "m-subject"; detailSubject.id = "m-subject";
let subjectSpan = createElement(span); let subjectSpan = createElement(span);
subjectSpan.className = "w-500"; subjectSpan.className = "w-500";
subjectSpan.aC(createTextNode("subject ")); subjectSpan.appendChild(createTextNode("subject "));
subjectValue = createElement(span); subjectValue = createElement(span);
subjectValue.id = "m-subject-value"; subjectValue.id = "m-subject-value";
detailSubject.aC(subjectSpan); detailSubject.appendChild(subjectSpan);
detailSubject.aC(subjectValue); detailSubject.appendChild(subjectValue);
details.aC(detailSubject); details.appendChild(detailSubject);
detailBody = createElement("p"); detailBody = createElement("p");
detailBody.id = "m-body"; detailBody.id = "m-body";
let bodySpan = createElement(span); let bodySpan = createElement(span);
bodySpan.className = "w-500"; bodySpan.className = "w-500";
bodySpan.aC(createTextNode("body ")); bodySpan.appendChild(createTextNode("body "));
bodyValue = createElement(span); bodyValue = createElement(span);
bodyValue.id = "m-body-value"; bodyValue.id = "m-body-value";
detailBody.aC(bodySpan); detailBody.appendChild(bodySpan);
detailBody.aC(bodyValue); detailBody.appendChild(bodyValue);
details.aC(detailBody); details.appendChild(detailBody);
modalContent.aC(details); modalContent.appendChild(details);
// Gmail // Gmail
gmail = createElement("a"); gmail = <HTMLLinkElement>createElement("a");
gmail.id = "m-gmail"; gmail.id = "m-gmail";
gmail.href = DEFAULT_BTN_HREF; gmail.href = DEFAULT_BTN_HREF;
gmail.classList.add("m-open"); gmail.classList.add("m-open");
gmail.classList.add("m-gmail"); gmail.classList.add("m-gmail");
gmail.aC(createTextNode("open in ")); gmail.appendChild(createTextNode("open in "));
let gmailSpan = createElement(span); let gmailSpan = createElement(span);
gmailSpan.className = "w-500"; gmailSpan.className = "w-500";
gmailSpan.aC(createTextNode("Gmail")); gmailSpan.appendChild(createTextNode("Gmail"));
gmail.aC(gmailSpan); gmail.appendChild(gmailSpan);
modalContent.aC(gmail); modalContent.appendChild(gmail);
// Outlook // Outlook
outlook = createElement("a"); outlook = <HTMLLinkElement>createElement("a");
outlook.id = "m-outlook"; outlook.id = "m-outlook";
outlook.href = DEFAULT_BTN_HREF; outlook.href = DEFAULT_BTN_HREF;
outlook.classList.add("m-open"); outlook.classList.add("m-open");
outlook.classList.add("m-outlook"); outlook.classList.add("m-outlook");
outlook.aC(createTextNode("open in ")); outlook.appendChild(createTextNode("open in "));
let outlookSpan = createElement(span); let outlookSpan = createElement(span);
outlookSpan.className = "w-500"; outlookSpan.className = "w-500";
outlookSpan.aC(createTextNode("Outlook")); outlookSpan.appendChild(createTextNode("Outlook"));
outlook.aC(outlookSpan); outlook.appendChild(outlookSpan);
modalContent.aC(outlook); modalContent.appendChild(outlook);
// open default // open default
open = createElement("a"); open = <HTMLLinkElement>createElement("a");
open.id = "m-open"; open.id = "m-open";
open.href = DEFAULT_BTN_HREF; open.href = DEFAULT_BTN_HREF;
open.classList.add("m-open"); open.classList.add("m-open");
open.classList.add("m-default"); open.classList.add("m-default");
let openSpan = createElement(span); let openSpan = createElement(span);
openSpan.className = "w-500"; openSpan.className = "w-500";
openSpan.aC(createTextNode("open")); openSpan.appendChild(createTextNode("open"));
open.aC(openSpan); open.appendChild(openSpan);
open.aC(createTextNode(" default")); open.appendChild(createTextNode(" default"));
modalContent.aC(open); modalContent.appendChild(open);
// copy // copy
copyMail = createElement("a"); copyMail = <HTMLLinkElement>createElement("a");
copyMail.id = "m-copy"; copyMail.id = "m-copy";
copyMail.href = DEFAULT_BTN_HREF; copyMail.href = DEFAULT_BTN_HREF;
copyMail.classList.add("m-copy"); copyMail.classList.add("m-copy");
copyMail.classList.add("w-500"); copyMail.classList.add("w-500");
copyMail.aC(createTextNode("copy")); copyMail.appendChild(createTextNode("copy"));
modalContent.aC(copyMail); modalContent.appendChild(copyMail);
modalContent.aC(byElement()); modalContent.appendChild(byElement());
// add the modal at the end of the body // add the modal at the end of the body
document.body.aC(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);
@ -205,21 +205,21 @@ const mailgoVersion = "MAILGO_VERSION";
// background // background
let modalBackground = createElement(); let modalBackground = createElement();
modalBackground.className = "m-modal-back"; modalBackground.className = "m-modal-back";
modal.aC(modalBackground); modal.appendChild(modalBackground);
// modal content // modal content
let modalContent = createElement(); let modalContent = createElement();
modalContent.className = "m-modal-content"; modalContent.className = "m-modal-content";
modal.aC(modalContent); modal.appendChild(modalContent);
// title (telephone number) // title (telephone number)
titleTel = createElement("strong"); titleTel = createElement("strong");
titleTel.id = "m-tel-title"; titleTel.id = "m-tel-title";
titleTel.className = "m-title"; titleTel.className = "m-title";
modalContent.aC(titleTel); modalContent.appendChild(titleTel);
// Telegram // Telegram
telegram = createElement("a"); telegram = <HTMLLinkElement>createElement("a");
telegram.id = "m-tg"; telegram.id = "m-tg";
telegram.href = DEFAULT_BTN_HREF; telegram.href = DEFAULT_BTN_HREF;
telegram.classList.add("m-open"); telegram.classList.add("m-open");
@ -228,70 +228,70 @@ const mailgoVersion = "MAILGO_VERSION";
// by default not display // by default not display
telegram.style.display = "none"; telegram.style.display = "none";
telegram.aC(createTextNode("open in ")); telegram.appendChild(createTextNode("open in "));
let telegramSpan = createElement(span); let telegramSpan = createElement(span);
telegramSpan.className = "w-500"; telegramSpan.className = "w-500";
telegramSpan.aC(createTextNode("Telegram")); telegramSpan.appendChild(createTextNode("Telegram"));
telegram.aC(telegramSpan); telegram.appendChild(telegramSpan);
modalContent.aC(telegram); modalContent.appendChild(telegram);
// WhatsApp // WhatsApp
wa = createElement("a"); wa = <HTMLLinkElement>createElement("a");
wa.id = "m-wa"; wa.id = "m-wa";
wa.href = DEFAULT_BTN_HREF; wa.href = DEFAULT_BTN_HREF;
wa.classList.add("m-open"); wa.classList.add("m-open");
wa.classList.add("m-wa"); wa.classList.add("m-wa");
wa.aC(createTextNode("open in ")); wa.appendChild(createTextNode("open in "));
let waSpan = createElement(span); let waSpan = createElement(span);
waSpan.className = "w-500"; waSpan.className = "w-500";
waSpan.aC(createTextNode("WhatsApp")); waSpan.appendChild(createTextNode("WhatsApp"));
wa.aC(waSpan); wa.appendChild(waSpan);
modalContent.aC(wa); modalContent.appendChild(wa);
// Skype // Skype
skype = createElement("a"); skype = <HTMLLinkElement>createElement("a");
skype.id = "m-skype"; skype.id = "m-skype";
skype.href = DEFAULT_BTN_HREF; skype.href = DEFAULT_BTN_HREF;
skype.classList.add("m-open"); skype.classList.add("m-open");
skype.classList.add("m-skype"); skype.classList.add("m-skype");
skype.aC(createTextNode("open in ")); skype.appendChild(createTextNode("open in "));
let skypeSpan = createElement(span); let skypeSpan = createElement(span);
skypeSpan.className = "w-500"; skypeSpan.className = "w-500";
skypeSpan.aC(createTextNode("Skype")); skypeSpan.appendChild(createTextNode("Skype"));
skype.aC(skypeSpan); skype.appendChild(skypeSpan);
modalContent.aC(skype); modalContent.appendChild(skype);
// call default // call default
call = createElement("a"); call = <HTMLLinkElement>createElement("a");
call.id = "m-call"; call.id = "m-call";
call.href = DEFAULT_BTN_HREF; call.href = DEFAULT_BTN_HREF;
call.classList.add("m-open"); call.classList.add("m-open");
call.classList.add("m-default"); call.classList.add("m-default");
let callSpan = createElement(span); let callSpan = createElement(span);
callSpan.className = "w-500"; callSpan.className = "w-500";
callSpan.aC(createTextNode("call")); callSpan.appendChild(createTextNode("call"));
call.aC(callSpan); call.appendChild(callSpan);
call.aC(createTextNode(" as default")); call.appendChild(createTextNode(" as default"));
modalContent.aC(call); modalContent.appendChild(call);
// copy // copy
copyTel = createElement("a"); copyTel = <HTMLLinkElement>createElement("a");
copyTel.id = "m-tel-copy"; copyTel.id = "m-tel-copy";
copyTel.href = DEFAULT_BTN_HREF; copyTel.href = DEFAULT_BTN_HREF;
copyTel.classList.add("m-copy"); copyTel.classList.add("m-copy");
copyTel.classList.add("w-500"); copyTel.classList.add("w-500");
copyTel.aC(createTextNode("copy")); copyTel.appendChild(createTextNode("copy"));
modalContent.aC(copyTel); modalContent.appendChild(copyTel);
modalContent.aC(byElement()); modalContent.appendChild(byElement());
// add the modal at the end of the body // add the modal at the end of the body
document.body.aC(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);
@ -302,7 +302,7 @@ const mailgoVersion = "MAILGO_VERSION";
* 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: any) => {
// mailgo mail // mailgo mail
if (type === MAIL_TYPE) { if (type === MAIL_TYPE) {
// if the element href=^"mailto:" // if the element href=^"mailto:"
@ -312,7 +312,7 @@ const mailgoVersion = "MAILGO_VERSION";
); );
url = new URL(mailgo.href); url = new URL(mailgo.href);
let urlParams = new URLSearchParams(url.search); let urlParams: URLSearchParams = url.searchParams;
// optional parameters for the email // optional parameters for the email
cc = urlParams.get("cc"); cc = urlParams.get("cc");
@ -528,9 +528,9 @@ const mailgoVersion = "MAILGO_VERSION";
hideMailgo(); hideMailgo();
}; };
const copy = (content) => { const copy = (content: string) => {
copyToClipboard(content); copyToClipboard(content);
let activeCopy; let activeCopy: HTMLElement;
// the correct copyButton (mail or tel) // the correct copyButton (mail or tel)
mailgoIsShowing(MAIL_TYPE) mailgoIsShowing(MAIL_TYPE)
? (activeCopy = copyMail) ? (activeCopy = copyMail)
@ -544,18 +544,19 @@ const mailgoVersion = "MAILGO_VERSION";
}; };
// 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: HTMLElement, type: string = MAIL_TYPE) => {
let href: string = (element as HTMLLinkElement).href;
// mailgo type mail // mailgo type mail
if (type === MAIL_TYPE) { if (type === MAIL_TYPE) {
return ( return (
// first case: it is an <a> element with "mailto:..." in href and no no-mailgo in classList // first case: it is an <a> element with "mailto:..." in href and no no-mailgo in classList
(element.href && (href &&
element.href.toLowerCase().startsWith(MAILTO) && href.toLowerCase().startsWith(MAILTO) &&
!element.classList.contains("no-mailgo")) || !element.classList.contains("no-mailgo")) ||
(element.hasAttribute("data-address") && (element.hasAttribute("data-address") &&
// second case: the href=#mailgo // second case: the href=#mailgo
((element.href && ((href && element.getAttribute("href").toLowerCase() === "#mailgo") ||
element.getAttribute("href").toLowerCase() === "#mailgo") ||
// third case: the classList contains mailgo // third case: the classList contains mailgo
(element.classList && element.classList.contains("mailgo")))) (element.classList && element.classList.contains("mailgo"))))
); );
@ -565,13 +566,13 @@ const mailgoVersion = "MAILGO_VERSION";
if (type === TEL_TYPE) { if (type === TEL_TYPE) {
return ( return (
// first case: it is an <a> element with "tel:..." or "callto:..." in href and no no-mailgo in classList // first case: it is an <a> element with "tel:..." or "callto:..." in href and no no-mailgo in classList
(element.href && (href &&
(element.href.toLowerCase().startsWith(TEL) || (href.toLowerCase().startsWith(TEL) ||
element.href.toLowerCase().startsWith(CALLTO)) && href.toLowerCase().startsWith(CALLTO)) &&
!element.classList.contains("no-mailgo")) || !element.classList.contains("no-mailgo")) ||
(element.hasAttribute("data-tel") && (element.hasAttribute("data-tel") &&
// second case: the href=#mailgo // second case: the href=#mailgo
element.href && href &&
element.getAttribute("href").toLowerCase() === "#mailgo") || element.getAttribute("href").toLowerCase() === "#mailgo") ||
// third case: the classList contains mailgo // third case: the classList contains mailgo
(element.classList && element.classList.contains("mailgo")) (element.classList && element.classList.contains("mailgo"))
@ -597,7 +598,7 @@ const mailgoVersion = "MAILGO_VERSION";
* '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: MouseEvent) => { const mailgoCheckRender = (event: 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")) ||
@ -611,7 +612,7 @@ const mailgoVersion = "MAILGO_VERSION";
// the path of the event // the path of the event
let path = let path =
(event.composedPath && event.composedPath()) || (event.composedPath && event.composedPath()) ||
composedPath(event.target); composedPath(event.target as HTMLElement);
if (path) { if (path) {
path.forEach((element: HTMLElement) => { path.forEach((element: HTMLElement) => {
@ -739,12 +740,12 @@ const mailgoVersion = "MAILGO_VERSION";
const byElement = () => { const byElement = () => {
// by // by
let by: HTMLElement = createElement("a"); let by: HTMLLinkElement = <HTMLLinkElement>createElement("a");
by.href = "https://mailgo.js.org?ref=mailgo-modal"; by.href = "https://mailgo.js.org?ref=mailgo-modal";
by.className = "m-by"; by.className = "m-by";
by.target = "_blank"; by.target = "_blank";
by.rel = "noopener noreferrer"; by.rel = "noopener noreferrer";
by.aC(createTextNode("mailgo.js.org")); by.appendChild(createTextNode("mailgo.js.org"));
return by; return by;
}; };
@ -753,34 +754,31 @@ const mailgoVersion = "MAILGO_VERSION";
const windowExists = () => window && typeof window !== "undefined"; const windowExists = () => window && typeof window !== "undefined";
// create element // create element
const createElement = (element = "div") => document.createElement(element); const createElement = (element: string = "div") =>
document.createElement(element);
// append child (prototype)
HTMLElement.prototype.aC = function (childElement) {
return this.appendChild(childElement);
};
// create text node // create text node
const createTextNode = (element) => document.createTextNode(element); const createTextNode = (element: string) => document.createTextNode(element);
// decrypt email // decrypt email
const mailToEncoded = (encoded: string) => const mailToEncoded = (encoded: string) =>
(window.location.href = MAILTO + atob(encoded)); (window.location.href = MAILTO + atob(encoded));
// encode email // encode email
const encodeEmail = (email) => btoa(email); const encodeEmail = (email: string) => btoa(email);
// getE shorthand // getE shorthand
const getE = (id) => document.getElementById(id); const getE = (id: string) => document.getElementById(id);
// get display value // get display value
const getDisplay = (id) => getE(id).style.display; const getDisplay = (id: string) => getE(id).style.display;
// get display value // get display value
const setDisplay = (id, value) => (getE(id).style.display = value); const setDisplay = (id: string, value: string) =>
(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: HTMLElement) => {
let path = []; let path = [];
while (el) { while (el) {
@ -797,22 +795,22 @@ const mailgoVersion = "MAILGO_VERSION";
}; };
// validate a single email with regex // validate a single email with regex
const validateEmail = (email) => const validateEmail = (email: string) =>
/^(([^<>()[\]\\.,;:\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,}))$/.test( /^(([^<>()[\]\\.,;:\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,}))$/.test(
email email
); );
// validate an array of emails // validate an array of emails
const validateEmails = (arr) => arr.every(validateEmail); const validateEmails = (arr: string[]) => arr.every(validateEmail);
// copy of a string // copy of a string
const copyToClipboard = (str) => { const copyToClipboard = (str: string) => {
let el = createElement("textarea"); let el: HTMLInputElement = <HTMLInputElement>createElement("textarea");
el.value = str; el.value = str;
el.setAttribute("readonly", ""); el.setAttribute("readonly", "");
el.style.position = "absolute"; el.style.position = "absolute";
el.style.left = "-9999px"; el.style.left = "-9999px";
document.body.aC(el); document.body.appendChild(el);
let selected = let selected =
document.getSelection().rangeCount > 0 document.getSelection().rangeCount > 0
? document.getSelection().getRangeAt(0) ? document.getSelection().getRangeAt(0)
@ -831,11 +829,13 @@ const mailgoVersion = "MAILGO_VERSION";
// if the window object exists... // if the window object exists...
if (windowExists()) { if (windowExists()) {
// mailgo style (gulp) // mailgo style (gulp)
let mailgoCSS = createElement("style"); let mailgoCSS: HTMLStyleElement = <HTMLStyleElement>(
createElement("style")
);
mailgoCSS.id = "mailgo-style"; mailgoCSS.id = "mailgo-style";
mailgoCSS.type = "text/css"; mailgoCSS.type = "text/css";
mailgoCSS.aC(createTextNode(`MAILGO_STYLE`)); mailgoCSS.appendChild(createTextNode(`MAILGO_STYLE`));
document.head.aC(mailgoCSS); document.head.appendChild(mailgoCSS);
// DOMContentLoaded -> mailgoInit (creates the modals) // DOMContentLoaded -> mailgoInit (creates the modals)
document.addEventListener("DOMContentLoaded", mailgoInit); document.addEventListener("DOMContentLoaded", mailgoInit);

2
tsconfig.json
View File

@ -3,7 +3,7 @@
"outDir": "./dist/", "outDir": "./dist/",
"noImplicitAny": true, "noImplicitAny": true,
"module": "es6", "module": "es6",
"target": "es5", "target": "es6",
"jsx": "react", "jsx": "react",
"allowJs": true "allowJs": true
} }