test with gulp and babel

This commit is contained in:
Matteo Manzinello 2019-05-15 09:31:45 +02:00
parent 62170ecf4c
commit f14de7320f
4 changed files with 223 additions and 156 deletions

365
dist/mailgo.js vendored
View File

@ -1,163 +1,190 @@
"use strict";
const V = "0.3.1";
const MAILTO = "mailto:";
var V = "0.3.1";
var MAILTO = "mailto:"; // mailgo style
var mailgoCSS = document.createElement("link");
// mailgo style
const mailgoCSS = document.createElement("link");
mailgoCSS.rel = "stylesheet";
mailgoCSS.type = "text/css";
mailgoCSS.href = "https://unpkg.com/mailgo@" + V + "/dist/mailgo.min.css";
document.head.appendChild(mailgoCSS);
/**
* mailgoInit
* the function that creates the mailgo element in DOM
*/
mailgoInit = function mailgoInit() {
mailgoInit = () => {
// modal
var modal = document.createElement("div");
let modal = document.createElement("div");
modal.id = "mailgo";
modal.classList.add("mailgo-modal");
modal.style.display = "none"; // background
modal.style.display = "none";
var modalBackground = document.createElement("div");
// background
let modalBackground = document.createElement("div");
modalBackground.className = "mailgo-modal-background";
modal.appendChild(modalBackground); // modal content
modal.appendChild(modalBackground);
var modalContent = document.createElement("div");
// modal content
let modalContent = document.createElement("div");
modalContent.className = "mailgo-modal-content";
modal.appendChild(modalContent); // title (email address)
modal.appendChild(modalContent);
var title = document.createElement("strong");
// title (email address)
let title = document.createElement("strong");
title.id = "mailgo-title";
title.className = "mailgo-title";
modalContent.appendChild(title); // details
modalContent.appendChild(title);
var details = document.createElement("div");
// details
let details = document.createElement("div");
details.id = "mailgo-details";
details.className = "mailgo-details";
var detailCc = document.createElement("p");
let detailCc = document.createElement("p");
detailCc.id = "mailgo-cc";
var ccSpan = document.createElement("span");
let ccSpan = document.createElement("span");
ccSpan.className = "mailgo-weight-500";
var ccContent = document.createTextNode("cc ");
let ccContent = document.createTextNode("cc ");
ccSpan.appendChild(ccContent);
var ccValue = document.createElement("span");
let ccValue = document.createElement("span");
ccValue.id = "mailgo-cc-value";
detailCc.appendChild(ccSpan);
detailCc.appendChild(ccValue);
details.appendChild(detailCc);
var detailBcc = document.createElement("p");
let detailBcc = document.createElement("p");
detailBcc.id = "mailgo-bcc";
var bccSpan = document.createElement("span");
let bccSpan = document.createElement("span");
bccSpan.className = "mailgo-weight-500";
var bccContent = document.createTextNode("bcc ");
let bccContent = document.createTextNode("bcc ");
bccSpan.appendChild(bccContent);
var bccValue = document.createElement("span");
let bccValue = document.createElement("span");
bccValue.id = "mailgo-bcc-value";
detailBcc.appendChild(bccSpan);
detailBcc.appendChild(bccValue);
details.appendChild(detailBcc);
var detailSubject = document.createElement("p");
let detailSubject = document.createElement("p");
detailSubject.id = "mailgo-subject";
var subjectSpan = document.createElement("span");
let subjectSpan = document.createElement("span");
subjectSpan.className = "mailgo-weight-500";
var subjectContent = document.createTextNode("subject");
let subjectContent = document.createTextNode("subject");
subjectSpan.appendChild(subjectContent);
var subjectValue = document.createElement("span");
let subjectValue = document.createElement("span");
subjectValue.id = "mailgo-subject-value";
detailSubject.appendChild(subjectSpan);
detailSubject.appendChild(subjectValue);
details.appendChild(detailSubject);
var detailBody = document.createElement("p");
let detailBody = document.createElement("p");
detailBody.id = "mailgo-body";
var bodySpan = document.createElement("span");
let bodySpan = document.createElement("span");
bodySpan.className = "mailgo-weight-500";
var bodyContent = document.createTextNode("body ");
let bodyContent = document.createTextNode("body ");
bodySpan.appendChild(bodyContent);
var bodyValue = document.createElement("span");
let bodyValue = document.createElement("span");
bodyValue.id = "mailgo-body-value";
detailBody.appendChild(bodySpan);
detailBody.appendChild(bodyValue);
details.appendChild(detailBody);
modalContent.appendChild(details); // Gmail
var gmail = document.createElement("a");
modalContent.appendChild(details);
// Gmail
let gmail = document.createElement("a");
gmail.id = "mailgo-gmail";
gmail.classList.add("mailgo-open");
gmail.classList.add("gmail");
var gmailContent = document.createTextNode("open in ");
let gmailContent = document.createTextNode("open in ");
gmail.appendChild(gmailContent);
var gmailSpan = document.createElement("span");
let gmailSpan = document.createElement("span");
gmailSpan.className = "mailgo-weight-500";
var gmailSpanContent = document.createTextNode("Gmail");
let gmailSpanContent = document.createTextNode("Gmail");
gmailSpan.appendChild(gmailSpanContent);
gmail.appendChild(gmailSpan);
modalContent.appendChild(gmail); // Outlook
var outlook = document.createElement("a");
modalContent.appendChild(gmail);
// Outlook
let outlook = document.createElement("a");
outlook.id = "mailgo-outlook";
outlook.classList.add("mailgo-open");
outlook.classList.add("outlook");
var outlookContent = document.createTextNode("open in ");
let outlookContent = document.createTextNode("open in ");
outlook.appendChild(outlookContent);
var outlookSpan = document.createElement("span");
let outlookSpan = document.createElement("span");
outlookSpan.className = "mailgo-weight-500";
var outlookSpanContent = document.createTextNode("Outlook");
let outlookSpanContent = document.createTextNode("Outlook");
outlookSpan.appendChild(outlookSpanContent);
outlook.appendChild(outlookSpan);
modalContent.appendChild(outlook); // open default
var open = document.createElement("a");
modalContent.appendChild(outlook);
// open default
let open = document.createElement("a");
open.id = "mailgo-open";
open.href = "#mailgo-open";
open.classList.add("mailgo-open");
open.classList.add("mailgo-weight-500");
var openContent = document.createTextNode("open");
let openContent = document.createTextNode("open");
open.appendChild(openContent);
modalContent.appendChild(open); // copy
var copy = document.createElement("a");
modalContent.appendChild(open);
// copy
let copy = document.createElement("a");
copy.id = "mailgo-copy";
copy.href = "#mailgo-copy";
copy.classList.add("mailgo-copy");
copy.classList.add("mailgo-weight-500");
var copyContent = document.createTextNode("copy");
let copyContent = document.createTextNode("copy");
copy.appendChild(copyContent);
modalContent.appendChild(copy); // by
var by = document.createElement("a");
modalContent.appendChild(copy);
// by
let by = document.createElement("a");
by.href = "https://mailgo.js.org";
by.className = "mailgo-by";
by.target = "_blank";
var textBy = document.createTextNode("mailgo.js.org");
let textBy = document.createTextNode("mailgo.js.org");
by.appendChild(textBy);
modalContent.appendChild(by); // add the modal at the end of the body
document.body.appendChild(modal); // every click outside the modal will hide the modal
modalContent.appendChild(by);
// add the modal at the end of the body
document.body.appendChild(modal);
// every click outside the modal will hide the modal
modalBackground.addEventListener("click", hideMailgo, false);
};
/**
* mailgoRender
* function to render a single mailgo
*/
mailgoRender = mailgo => {
let mail = "",
mailtoHref = "",
cc = "",
bcc = "",
subject = "",
bodyMail = "";
mailgoRender = function mailgoRender(mailgo) {
var mail = "",
mailtoHref = "",
cc = "",
bcc = "",
subject = "",
bodyMail = ""; // if the element href=^"mailto:"
// if the element href=^"mailto:"
if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) {
mail = decodeURIComponent(mailgo.href.split("?")[0].split(MAILTO)[1].trim());
mail = decodeURIComponent(
mailgo.href
.split("?")[0]
.split(MAILTO)[1]
.trim()
);
mailtoHref = mailgo.href;
url = new URL(mailtoHref);
var urlParams = new URLSearchParams(url.search); // optional parameters for the email
let urlParams = new URLSearchParams(url.search);
// optional parameters for the email
cc = urlParams.get("cc");
bcc = urlParams.get("bcc");
subject = urlParams.get("subject");
@ -165,25 +192,40 @@ mailgoRender = function mailgoRender(mailgo) {
} else {
// if the element href="#mailgo" or class="mailgo"
// mail = data-address + @ + data-domain
mail = mailgo.getAttribute("data-address") + "@" + mailgo.getAttribute("data-domain");
mail =
mailgo.getAttribute("data-address") +
"@" +
mailgo.getAttribute("data-domain");
mailtoHref = MAILTO + encodeURIComponent(mail);
url = new URL(mailtoHref); // cc = data-cc-address + @ + data-cc-domain
url = new URL(mailtoHref);
cc = mailgo.getAttribute("data-cc-address") + "@" + mailgo.getAttribute("data-cc-domain"); // bcc = data-bcc-address + @ + data-bcc-domain
// cc = data-cc-address + @ + data-cc-domain
cc =
mailgo.getAttribute("data-cc-address") +
"@" +
mailgo.getAttribute("data-cc-domain");
bcc = mailgo.getAttribute("data-bcc-address") + "@" + mailgo.getAttribute("data-bcc-domain"); // subject = data-subject
// bcc = data-bcc-address + @ + data-bcc-domain
bcc =
mailgo.getAttribute("data-bcc-address") +
"@" +
mailgo.getAttribute("data-bcc-domain");
subject = mailgo.getAttribute("data-subject"); // body = data-body
// subject = data-subject
subject = mailgo.getAttribute("data-subject");
// body = data-body
bodyMail = mailgo.getAttribute("data-body");
} // validate the email address
}
// validate the email address
if (!validateEmail(mail)) return;
if (!validateEmail(mail)) return; // if cc, bcc is not valid cc, bcc = ""
// if cc, bcc is not valid cc, bcc = ""
if (!validateEmail(cc)) cc = "";
if (!validateEmail(bcc)) bcc = ""; // information
if (!validateEmail(bcc)) bcc = "";
// information
titleEl = getE("mailgo-title");
detailsEl = getE("mailgo-details");
ccEl = getE("mailgo-cc");
@ -193,36 +235,70 @@ mailgoRender = function mailgoRender(mailgo) {
subjectEl = getE("mailgo-subject");
subjectValueEl = getE("mailgo-subject-value");
bodyEl = getE("mailgo-body");
bodyValueEl = getE("mailgo-body-value"); // actions
bodyValueEl = getE("mailgo-body-value");
// actions
gmailButton = getE("mailgo-gmail");
outlookButton = getE("mailgo-outlook");
openButton = getE("mailgo-open");
copyButton = getE("mailgo-copy"); // the title of the modal (email address)
copyButton = getE("mailgo-copy");
titleEl.textContent = mail; // add the details if provided
// the title of the modal (email address)
titleEl.textContent = mail;
cc ? (ccEl.style.display = "block", ccValueEl.textContent = cc) : ccEl.style.display = "none";
bcc ? (bccEl.style.display = "block", bccValueEl.textContent = bcc) : bccEl.style.display = "none";
subject ? (subjectEl.style.display = "block", subjectValueEl.textContent = subject) : subjectEl.style.display = "none";
bodyMail ? (bodyEl.style.display = "block", bodyValueEl.textContent = bodyMail) : bodyEl.style.display = "none"; // add the actions
// add the details if provided
cc
? ((ccEl.style.display = "block"), (ccValueEl.textContent = cc))
: (ccEl.style.display = "none");
gmailButton.href = "https://mail.google.com/mail?extsrc=mailto&url=" + encodeURIComponent(mailtoHref);
outlookButton.href = "https://outlook.office.com/owa/?rru=compose&to=" + encodeURIComponent(mail) + url.search.replace(/^[$]/, "&");
var encEmail = encodeEmail(mail);
openButton.addEventListener("click", function () {
mailToEncoded(encEmail);
}, false);
copyButton.addEventListener("click", function (event) {
copyToClipboard(mail);
copyButton.textContent = "copied";
setTimeout(function () {
copyButton.textContent = "copy";
}, 999);
}, false); // show the mailgo
bcc
? ((bccEl.style.display = "block"), (bccValueEl.textContent = bcc))
: (bccEl.style.display = "none");
subject
? ((subjectEl.style.display = "block"),
(subjectValueEl.textContent = subject))
: (subjectEl.style.display = "none");
bodyMail
? ((bodyEl.style.display = "block"), (bodyValueEl.textContent = bodyMail))
: (bodyEl.style.display = "none");
// add the actions
gmailButton.href =
"https://mail.google.com/mail?extsrc=mailto&url=" +
encodeURIComponent(mailtoHref);
outlookButton.href =
"https://outlook.office.com/owa/?rru=compose&to=" +
encodeURIComponent(mail) +
url.search.replace(/^[$]/, "&");
let encEmail = encodeEmail(mail);
openButton.addEventListener(
"click",
() => {
mailToEncoded(encEmail);
},
false
);
copyButton.addEventListener(
"click",
event => {
copyToClipboard(mail);
copyButton.textContent = "copied";
setTimeout(() => {
copyButton.textContent = "copy";
}, 999);
},
false
);
// show the mailgo
showMailgo();
};
/**
* mailgoCheckRender
* function to check if an element is mailgo-enabled or not referencing to the old
@ -230,99 +306,100 @@ mailgoRender = function mailgoRender(mailgo) {
* 'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
* ); and the new a[mailgo]
*/
mailgoCheckRender = function mailgoCheckRender(event) {
mailgoCheckRender = event => {
// the target element
var e = event.target; // check if the id=mailgo exists in the body
let e = event.target;
// check if the id=mailgo exists in the body
if (!document.body.contains(getE("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.getAttribute("href").toLowerCase() === "#mailgo" || // third case: the classList contains mailgo
e.classList.contains("mailgo") || // fourth case: exists the attribute mailgo in the <a> element
!!e.getAttribute("mailgo")) {
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.getAttribute("href").toLowerCase() === "#mailgo") ||
// third case: the classList contains mailgo
e.classList.contains("mailgo") ||
// fourth case: exists the attribute mailgo in the <a> element
!!e.getAttribute("mailgo")
) {
// stop the normal execution of the element click
event.preventDefault(); // render mailgo
event.preventDefault();
// render mailgo
mailgoRender(e);
}
};
/**
* mailgoKeydown
* function to manage the keydown event when the modal is showing
*/
mailgoKeydown = function mailgoKeydown(event) {
mailgoKeydown = event => {
switch (event.keyCode) {
case 27:
// Escape
hideMailgo();
break;
default:
return;
}
return;
}; // DOMContentLoaded -> mailgoInit (creates the modal)
};
// DOMContentLoaded -> mailgoInit (creates the modal)
document.addEventListener("DOMContentLoaded", mailgoInit, false);
document.addEventListener("DOMContentLoaded", mailgoInit, false); // event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
// event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
document.body.addEventListener("click", mailgoCheckRender, false);
document.body.addEventListener("click", mailgoCheckRender, false); // validate the email with regex
validateEmail = function validateEmail(email) {
var 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,}))$/;
// validate the email with regex
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);
}; // copy of a string
};
copyToClipboard = function copyToClipboard(str) {
var el = document.createElement("textarea");
// copy of a string
copyToClipboard = str => {
let el = document.createElement("textarea");
el.value = str;
el.setAttribute("readonly", "");
el.style.position = "absolute";
el.style.left = "-9999px";
document.body.appendChild(el);
var selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
let selected =
document.getSelection().rangeCount > 0
? document.getSelection().getRangeAt(0)
: false;
el.select();
document.execCommand("copy");
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
}; // show the modal
showMailgo = function showMailgo() {
getE("mailgo").style.display = "flex"; // add mailgoKeydown
};
// show the modal
showMailgo = () => {
getE("mailgo").style.display = "flex";
// add mailgoKeydown
document.body.addEventListener("keydown", mailgoKeydown, false);
}; // hide the modal
hideMailgo = function hideMailgo() {
getE("mailgo").style.display = "none"; // remove mailgoKeydown
};
// hide the modal
hideMailgo = () => {
getE("mailgo").style.display = "none";
// remove mailgoKeydown
document.body.removeEventListener("keydown", mailgoKeydown, false);
}; // decrypt email
};
// decrypt email
mailToEncoded = encoded => (window.location.href = MAILTO + atob(encoded));
// encode email
encodeEmail = email => btoa(email);
mailToEncoded = function mailToEncoded(encoded) {
return window.location.href = MAILTO + atob(encoded);
}; // encode email
encodeEmail = function encodeEmail(email) {
return btoa(email);
}; // getE shorthand
getE = function getE(id) {
return document.getElementById(id);
};
// getE shorthand
getE = id => document.getElementById(id);

2
dist/mailgo.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -12,22 +12,12 @@ let version = require("./package.json").version;
function js() {
return src("src/*.js")
.pipe(replace("MAILGO_VERSION", version.toString()))
.pipe(
babel({
presets: ["@babel/env"]
})
)
.pipe(dest("dist"));
}
function jsmin() {
return src("src/*.js")
.pipe(replace("MAILGO_VERSION", version))
.pipe(
babel({
presets: ["@babel/env"]
})
)
.pipe(terser())
.pipe(
rename({

View File

@ -33,5 +33,5 @@
"dependencies": {
"@babel/polyfill": "^7.4.4"
},
"browserslist": []
"browserslist": "> 0.25%, not dead"
}