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

a lot of fix of the new mailgo that intercepts all the mailto links

Browse Source
This commit is contained in:
Matteo Manzinello 2019-05-12 00:02:20 +02:00
parent 2db77f337c
commit 41b14b5ad8
3 changed files with 80 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
dist/mailgo.js vendored
View File

@ -1,7 +1,7 @@
const VERSION = "0.3.0";
const MAILTO = "mailto:";
// style of mailgo
// mailgo style
const styleSheet = document.createElement("link");
styleSheet.rel = "stylesheet";
styleSheet.type = "text/css";
@ -9,12 +9,11 @@ styleSheet.href =
"https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css";
document.head.appendChild(styleSheet);
/**
* mailgoInit
* the function that creates the mailgo element in DOM
*/
mailgoInit = () => {
// all mailgos in the document
const mailgos = document.querySelectorAll(
'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
);
// modal
let modal = document.createElement("div");
modal.id = "mailgo";
@ -151,6 +150,7 @@ mailgoInit = () => {
by.appendChild(textBy);
modalContent.appendChild(by);
// add the modal at the end of the body
document.body.appendChild(modal);
// allow the escape key to hide the modal
@ -174,6 +174,10 @@ mailgoInit = () => {
);
};
/**
* mailgoRender
* function to render a single mailgo
*/
mailgoRender = mailgo => {
let mail = "",
mailtoHref = "",
@ -274,20 +278,38 @@ mailgoRender = mailgo => {
showMailgo();
};
mailgoCheckRender = event => {
// the target element
let e = event.target;
console.log(e);
// check if the id=mailgo exists in the body
if (!document.body.contains(document.getElementById("mailgo"))) return;
if (
// first case: it is an <a> element with "mailto:..." in href and no no-mailgo in classList
(e.href &&
e.href.toLowerCase().startsWith(MAILTO) &&
!e.classList.contains("no-mailgo")) ||
// second case: the href=#mailgo
(e.href && e.href.toLowerCase() == "#mailgo") ||
//third case: the classList contains mailgo
e.classList.contains("mailgo")
) {
// stop the normal execution of the element click
event.preventDefault();
// render mailgo
mailgoRender(e);
}
};
// DOMContentLoaded -> mailgoInit (creates the modal)
document.addEventListener("DOMContentLoaded", mailgoInit, false);
document.addEventListener(
"click",
event => {
// TODO add all the possibilities
if (event.target.href && event.target.href.startsWith("mailto:")) {
event.preventDefault();
mailgoRender(event.target);
}
},
false
);
// event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
document.addEventListener("click", mailgoCheckRender, false);
// validate the email with regex
validateEmail = email => {

2
dist/mailgo.min.js vendored
View File

File diff suppressed because one or more lines are too long

57
src/mailgo.js
View File

@ -1,7 +1,7 @@
const VERSION = "MAILGO_VERSION";
const MAILTO = "mailto:";
// style of mailgo
// mailgo style
const styleSheet = document.createElement("link");
styleSheet.rel = "stylesheet";
styleSheet.type = "text/css";
@ -9,12 +9,11 @@ styleSheet.href =
"https://unpkg.com/mailgo@" + VERSION + "/dist/mailgo.min.css";
document.head.appendChild(styleSheet);
/**
* mailgoInit
* the function that creates the mailgo element in DOM
*/
mailgoInit = () => {
// all mailgos in the document
const mailgos = document.querySelectorAll(
'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
);
// modal
let modal = document.createElement("div");
modal.id = "mailgo";
@ -151,6 +150,7 @@ mailgoInit = () => {
by.appendChild(textBy);
modalContent.appendChild(by);
// add the modal at the end of the body
document.body.appendChild(modal);
// allow the escape key to hide the modal
@ -174,6 +174,10 @@ mailgoInit = () => {
);
};
/**
* mailgoRender
* function to render a single mailgo
*/
mailgoRender = mailgo => {
let mail = "",
mailtoHref = "",
@ -274,20 +278,39 @@ mailgoRender = mailgo => {
showMailgo();
};
mailgoCheckRender = event => {
// the target element
let e = event.target;
console.log(e);
// check if the id=mailgo exists in the body
if (!document.body.contains(document.getElementById("mailgo"))) return;
if (
// first case: it is an <a> element with "mailto:..." in href and no no-mailgo in classList
(e.href &&
e.href.toLowerCase().startsWith(MAILTO) &&
!e.classList.contains("no-mailgo")) ||
// second case: the href=#mailgo
// TODO FIX here
(e.href && e.href.toLowerCase() === "#mailgo") ||
//third case: the classList contains mailgo
e.classList.contains("mailgo")
) {
// stop the normal execution of the element click
event.preventDefault();
// render mailgo
mailgoRender(e);
}
};
// DOMContentLoaded -> mailgoInit (creates the modal)
document.addEventListener("DOMContentLoaded", mailgoInit, false);
document.addEventListener(
"click",
event => {
// TODO add all the possibilities
if (event.target.href && event.target.href.startsWith("mailto:")) {
event.preventDefault();
mailgoRender(event.target);
}
},
false
);
// event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
document.addEventListener("click", mailgoCheckRender, false);
// validate the email with regex
validateEmail = email => {