From 5058578a7ad2fe8596a6bc450829506cd108f8ac Mon Sep 17 00:00:00 2001 From: Matteo Manzinello Date: Fri, 24 Apr 2020 18:01:25 +0200 Subject: [PATCH] working on typescript --- dist/mailgo.min.js | 2 +- gulpfile.js | 17 +- index.d.ts | 9 + mailgo.d.ts | 1 - mailgo.js | 752 ++++++++++++++++++++++++++++++++++++++- mailgo.ts | 859 +++++++++++++++++++++++++++++++++++++++++++++ src/mailgo.ts | 6 +- webpack.config.js | 10 - yarn.lock | 6 +- 9 files changed, 1642 insertions(+), 20 deletions(-) create mode 100644 index.d.ts delete mode 100644 mailgo.d.ts create mode 100644 mailgo.ts diff --git a/dist/mailgo.min.js b/dist/mailgo.min.js index 0601d19..55c40ac 100644 --- a/dist/mailgo.min.js +++ b/dist/mailgo.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.mailgo=t():e.mailgo=t()}(window,(function(){return function(e){var t={};function o(a){if(t[a])return t[a].exports;var n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=e,o.c=t,o.d=function(e,t,a){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(a,n,function(t){return e[t]}.bind(null,n));return a},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a=function(){function e(){var e=Y();e.style.display="none",e.id="mailgo",e.classList.add("m-modal");var t=Y();t.className="m-modal-back",e.appendChild(t);var o=Y();o.className="m-modal-content",e.appendChild(o),(i=Y("strong")).id="m-title",i.className="m-title",o.appendChild(i);var a=Y();a.id="m-details",a.className="m-details",(l=Y("p")).id="m-cc";var n=Y(S);n.className="w-500",n.appendChild(ee("cc ")),(m=Y(S)).id="m-cc-value",l.appendChild(n),l.appendChild(m),a.appendChild(l),(r=Y("p")).id="m-bcc";var L=Y(S);L.className="w-500",L.appendChild(ee("bcc ")),(p=Y(S)).id="m-bcc-value",r.appendChild(L),r.appendChild(p),a.appendChild(r),(c=Y("p")).id="m-subject";var z=Y(S);z.className="w-500",z.appendChild(ee("subject ")),(u=Y(S)).id="m-subject-value",c.appendChild(z),c.appendChild(u),a.appendChild(c),(s=Y("p")).id="m-body";var j=Y(S);j.className="w-500",j.appendChild(ee("body ")),(b=Y(S)).id="m-body-value",s.appendChild(j),s.appendChild(b),a.appendChild(s),o.appendChild(a),(f=Y("a")).id="m-gmail",f.href=N,f.classList.add("m-open"),f.classList.add("m-gmail"),f.appendChild(ee("open in "));var A=Y(S);A.className="w-500",A.appendChild(ee("Gmail")),f.appendChild(A),o.appendChild(f),(h=Y("a")).id="m-outlook",h.href=N,h.classList.add("m-open"),h.classList.add("m-outlook"),h.appendChild(ee("open in "));var E=Y(S);E.className="w-500",E.appendChild(ee("Outlook")),h.appendChild(E),o.appendChild(h),(g=Y("a")).id="m-open",g.href=N,g.classList.add("m-open"),g.classList.add("m-default");var R=Y(S);R.className="w-500",R.appendChild(ee("open")),g.appendChild(R),g.appendChild(ee(" default")),o.appendChild(g),(C=Y("a")).id="m-copy",C.href=N,C.classList.add("m-copy"),C.classList.add("w-500"),C.appendChild(ee("copy")),o.appendChild(C),o.appendChild(X()),document.body.appendChild(e),t.addEventListener("click",Q);var _=Y();_.style.display="none",_.id="mailgo-tel",_.classList.add("m-modal");var M=Y();M.className="m-modal-back",_.appendChild(M);var U=Y();U.className="m-modal-content",_.appendChild(U),(d=Y("strong")).id="m-tel-title",d.className="m-title",U.appendChild(d),(x=Y("a")).id="m-tg",x.href=N,x.classList.add("m-open"),x.classList.add("m-tg"),x.style.display="none",x.appendChild(ee("open in "));var I=Y(S);I.className="w-500",I.appendChild(ee("Telegram")),x.appendChild(I),U.appendChild(x),(v=Y("a")).id="m-wa",v.href=N,v.classList.add("m-open"),v.classList.add("m-wa"),v.appendChild(ee("open in "));var T=Y(S);T.className="w-500",T.appendChild(ee("WhatsApp")),v.appendChild(T),U.appendChild(v),(w=Y("a")).id="m-skype",w.href=N,w.classList.add("m-open"),w.classList.add("m-skype"),w.appendChild(ee("open in "));var O=Y(S);O.className="w-500",O.appendChild(ee("Skype")),w.appendChild(O),U.appendChild(w),(y=Y("a")).id="m-call",y.href=N,y.classList.add("m-open"),y.classList.add("m-default");var P=Y(S);P.className="w-500",P.appendChild(ee("call")),y.appendChild(P),y.appendChild(ee(" as default")),U.appendChild(y),(k=Y("a")).id="m-tel-copy",k.href=N,k.classList.add("m-copy"),k.classList.add("w-500"),k.appendChild(ee("copy")),U.appendChild(k),U.appendChild(X()),document.body.appendChild(_),M.addEventListener("click",Q)}function t(e,t){var o=0"),M?(l.style.display="block",m.innerHTML=M.split(",").join("
")):l.style.display="none",U?(r.style.display="block",p.innerHTML=U.split(",").join("
")):r.style.display="none",I?(c.style.display="block",u.textContent=I):c.style.display="none",T?(s.style.display="block",b.textContent=T):s.style.display="none",f.addEventListener("click",H),h.addEventListener("click",D),_=oe(R),g.addEventListener("click",B),C.addEventListener("click",(function(){return q(R)}))}o===E&&(a.href&&a.href.toLowerCase().startsWith(z)?O=decodeURIComponent(a.href.split("?")[0].split(z)[1].trim()):a.href&&a.href.toLowerCase().startsWith(j)?O=decodeURIComponent(a.href.split("?")[0].split(j)[1].trim()):a.hasAttribute("data-tel")&&(O=a.getAttribute("data-tel"),a.getAttribute("data-msg")),a.hasAttribute("data-telegram")&&(P=a.getAttribute("data-telegram")),a.hasAttribute("data-skype")&&(W=a.getAttribute("data-skype")),d.innerHTML=O,v.addEventListener("click",G),P&&(ie("m-tg","block"),x.addEventListener("click",Z)),w.addEventListener("click",F),y.addEventListener("click",$),k.addEventListener("click",(function(){return q(O)}))),K(o),document.addEventListener("keydown",J)}function o(e,t){var o=1()[\]\\.,;:\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(e)}var i,d,l,r,c,s,m,p,u,b,f,h,g,x,v,w,y,C,k,L="mailto:",z="tel:",j="callto:",A="mail",E="tel",N="javascript:void(0);",S="span",R="",_="",M="",U="",I="",T="",O="",P="",W="",H=function(){var e="https://mail.google.com/mail/u/0/?view=cm&source=mailto&to="+encodeURIComponent(R);M&&(e=e.concat("&cc="+encodeURIComponent(M))),U&&(e=e.concat("&bcc="+encodeURIComponent(U))),I&&(e=e.concat("&subject="+I)),T&&(e=e.concat("&body="+T)),window.open(e,"_blank"),Q()},D=function(){var e="https://outlook.live.com/owa/?path=/mail/action/compose&to="+encodeURIComponent(R);I&&(e=e.concat("&subject="+I)),T&&(e=e.concat("&body="+T)),window.open(e,"_blank"),Q()},B=function(){te(_),Q()},Z=function(){var e="https://t.me/"+P;window.open(e,"_blank"),Q()},F=function(){var e="skype:"+(""!==W?W:O);window.open(e,"_blank"),Q()},G=function(){var e="https://wa.me/"+O;window.open(e,"_blank"),Q()},$=function(){var e="tel:"+O;window.open(e),Q()},q=function(e){var t;re(e),(t=V(A)?C:k).textContent="copied",setTimeout((function(){t.textContent="copy",Q()}),999)},J=function(e){if(V(A))switch(e.keyCode){case 27:Q();break;case 71:H();break;case 79:D();break;case 32:case 13:B();break;case 67:q(R);break;default:return}else if(V(E))switch(e.keyCode){case 27:Q();break;case 84:Z();break;case 87:G();break;case 32:case 13:$();break;case 67:q(O);break;default:return}},K=function(e){var t=0"),b?(v.style.display="block",L.innerHTML=b.split(",").join("
")):v.style.display="none",u?(y.style.display="block",z.innerHTML=u.split(",").join("
")):y.style.display="none",h?(C.style.display="block",A.textContent=h):C.style.display="none",f?(k.style.display="block",E.textContent=f):k.style.display="none",N.addEventListener("click",O),j.addEventListener("click",B),p=ae(m),R.addEventListener("click",Z),M.addEventListener("click",function(){return q(m)})}a===r&&(o.href&&o.href.toLowerCase().startsWith(l)?g=decodeURIComponent(o.href.split("?")[0].split(l)[1].trim()):o.href&&o.href.toLowerCase().startsWith(s)?g=decodeURIComponent(o.href.split("?")[0].split(s)[1].trim()):o.hasAttribute("data-tel")&&(g=o.getAttribute("data-tel"),o.getAttribute("data-msg")),o.hasAttribute("data-telegram")&&(D=o.getAttribute("data-telegram")),o.hasAttribute("data-skype")&&(P=o.getAttribute("data-skype")),x.innerHTML=g,I.addEventListener("click",V),D&&(ie("m-tg","block"),U.addEventListener("click",F)),S.addEventListener("click",G),_.addEventListener("click",$),T.addEventListener("click",function(){return q(g)})),K(a),document.addEventListener("keydown",J)}function o(e,t){var a=1()[\]\\.,;:\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(e)}var w,x,v,y,C,k,L,z,A,E,N,j,R,U,I,S,_,M,T,d="mailto:",l="tel:",s="callto:",c="mail",r="tel",W="javascript:void(0);",H="span",m="",p="",b="",u="",h="",f="",g="",D="",P="",O=function(){var e="https://mail.google.com/mail/u/0/?view=cm&source=mailto&to="+encodeURIComponent(m);b&&(e=e.concat("&cc="+encodeURIComponent(b))),u&&(e=e.concat("&bcc="+encodeURIComponent(u))),h&&(e=e.concat("&subject="+h)),f&&(e=e.concat("&body="+f)),window.open(e,"_blank"),Q()},B=function(){var e="https://outlook.live.com/owa/?path=/mail/action/compose&to="+encodeURIComponent(m);h&&(e=e.concat("&subject="+h)),f&&(e=e.concat("&body="+f)),window.open(e,"_blank"),Q()},Z=function(){e(p),Q()},F=function(){var e="https://t.me/"+D;window.open(e,"_blank"),Q()},G=function(){var e="skype:"+(""!==P?P:g);window.open(e,"_blank"),Q()},V=function(){var e="https://wa.me/"+g;window.open(e,"_blank"),Q()},$=function(){var e="tel:"+g;window.open(e),Q()},q=function(e){var t;se(e),(t=X(c)?M:T).textContent="copied",setTimeout(function(){t.textContent="copy",Q()},999)},J=function(e){if(X(c))switch(e.keyCode){case 27:Q();break;case 71:O();break;case 79:B();break;case 32:case 13:Z();break;case 67:q(m);break;default:return}else if(X(r))switch(e.keyCode){case 27:Q();break;case 84:F();break;case 87:V();break;case 32:case 13:$();break;case 67:q(g);break;default:return}},K=function(e){var t=0 + +export as namespace Mailgo; + +/*~ If this module has methods, declare them as functions like so. + */ +export function mailgo(mailgoConfig: any): void; diff --git a/mailgo.d.ts b/mailgo.d.ts deleted file mode 100644 index e77933e..0000000 --- a/mailgo.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module "mailgo" {} diff --git a/mailgo.js b/mailgo.js index 0601d19..eb3dad6 100644 --- a/mailgo.js +++ b/mailgo.js @@ -1 +1,751 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.mailgo=t():e.mailgo=t()}(window,(function(){return function(e){var t={};function o(a){if(t[a])return t[a].exports;var n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=e,o.c=t,o.d=function(e,t,a){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(a,n,function(t){return e[t]}.bind(null,n));return a},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a=function(){function e(){var e=Y();e.style.display="none",e.id="mailgo",e.classList.add("m-modal");var t=Y();t.className="m-modal-back",e.appendChild(t);var o=Y();o.className="m-modal-content",e.appendChild(o),(i=Y("strong")).id="m-title",i.className="m-title",o.appendChild(i);var a=Y();a.id="m-details",a.className="m-details",(l=Y("p")).id="m-cc";var n=Y(S);n.className="w-500",n.appendChild(ee("cc ")),(m=Y(S)).id="m-cc-value",l.appendChild(n),l.appendChild(m),a.appendChild(l),(r=Y("p")).id="m-bcc";var L=Y(S);L.className="w-500",L.appendChild(ee("bcc ")),(p=Y(S)).id="m-bcc-value",r.appendChild(L),r.appendChild(p),a.appendChild(r),(c=Y("p")).id="m-subject";var z=Y(S);z.className="w-500",z.appendChild(ee("subject ")),(u=Y(S)).id="m-subject-value",c.appendChild(z),c.appendChild(u),a.appendChild(c),(s=Y("p")).id="m-body";var j=Y(S);j.className="w-500",j.appendChild(ee("body ")),(b=Y(S)).id="m-body-value",s.appendChild(j),s.appendChild(b),a.appendChild(s),o.appendChild(a),(f=Y("a")).id="m-gmail",f.href=N,f.classList.add("m-open"),f.classList.add("m-gmail"),f.appendChild(ee("open in "));var A=Y(S);A.className="w-500",A.appendChild(ee("Gmail")),f.appendChild(A),o.appendChild(f),(h=Y("a")).id="m-outlook",h.href=N,h.classList.add("m-open"),h.classList.add("m-outlook"),h.appendChild(ee("open in "));var E=Y(S);E.className="w-500",E.appendChild(ee("Outlook")),h.appendChild(E),o.appendChild(h),(g=Y("a")).id="m-open",g.href=N,g.classList.add("m-open"),g.classList.add("m-default");var R=Y(S);R.className="w-500",R.appendChild(ee("open")),g.appendChild(R),g.appendChild(ee(" default")),o.appendChild(g),(C=Y("a")).id="m-copy",C.href=N,C.classList.add("m-copy"),C.classList.add("w-500"),C.appendChild(ee("copy")),o.appendChild(C),o.appendChild(X()),document.body.appendChild(e),t.addEventListener("click",Q);var _=Y();_.style.display="none",_.id="mailgo-tel",_.classList.add("m-modal");var M=Y();M.className="m-modal-back",_.appendChild(M);var U=Y();U.className="m-modal-content",_.appendChild(U),(d=Y("strong")).id="m-tel-title",d.className="m-title",U.appendChild(d),(x=Y("a")).id="m-tg",x.href=N,x.classList.add("m-open"),x.classList.add("m-tg"),x.style.display="none",x.appendChild(ee("open in "));var I=Y(S);I.className="w-500",I.appendChild(ee("Telegram")),x.appendChild(I),U.appendChild(x),(v=Y("a")).id="m-wa",v.href=N,v.classList.add("m-open"),v.classList.add("m-wa"),v.appendChild(ee("open in "));var T=Y(S);T.className="w-500",T.appendChild(ee("WhatsApp")),v.appendChild(T),U.appendChild(v),(w=Y("a")).id="m-skype",w.href=N,w.classList.add("m-open"),w.classList.add("m-skype"),w.appendChild(ee("open in "));var O=Y(S);O.className="w-500",O.appendChild(ee("Skype")),w.appendChild(O),U.appendChild(w),(y=Y("a")).id="m-call",y.href=N,y.classList.add("m-open"),y.classList.add("m-default");var P=Y(S);P.className="w-500",P.appendChild(ee("call")),y.appendChild(P),y.appendChild(ee(" as default")),U.appendChild(y),(k=Y("a")).id="m-tel-copy",k.href=N,k.classList.add("m-copy"),k.classList.add("w-500"),k.appendChild(ee("copy")),U.appendChild(k),U.appendChild(X()),document.body.appendChild(_),M.addEventListener("click",Q)}function t(e,t){var o=0"),M?(l.style.display="block",m.innerHTML=M.split(",").join("
")):l.style.display="none",U?(r.style.display="block",p.innerHTML=U.split(",").join("
")):r.style.display="none",I?(c.style.display="block",u.textContent=I):c.style.display="none",T?(s.style.display="block",b.textContent=T):s.style.display="none",f.addEventListener("click",H),h.addEventListener("click",D),_=oe(R),g.addEventListener("click",B),C.addEventListener("click",(function(){return q(R)}))}o===E&&(a.href&&a.href.toLowerCase().startsWith(z)?O=decodeURIComponent(a.href.split("?")[0].split(z)[1].trim()):a.href&&a.href.toLowerCase().startsWith(j)?O=decodeURIComponent(a.href.split("?")[0].split(j)[1].trim()):a.hasAttribute("data-tel")&&(O=a.getAttribute("data-tel"),a.getAttribute("data-msg")),a.hasAttribute("data-telegram")&&(P=a.getAttribute("data-telegram")),a.hasAttribute("data-skype")&&(W=a.getAttribute("data-skype")),d.innerHTML=O,v.addEventListener("click",G),P&&(ie("m-tg","block"),x.addEventListener("click",Z)),w.addEventListener("click",F),y.addEventListener("click",$),k.addEventListener("click",(function(){return q(O)}))),K(o),document.addEventListener("keydown",J)}function o(e,t){var o=1()[\]\\.,;:\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(e)}var i,d,l,r,c,s,m,p,u,b,f,h,g,x,v,w,y,C,k,L="mailto:",z="tel:",j="callto:",A="mail",E="tel",N="javascript:void(0);",S="span",R="",_="",M="",U="",I="",T="",O="",P="",W="",H=function(){var e="https://mail.google.com/mail/u/0/?view=cm&source=mailto&to="+encodeURIComponent(R);M&&(e=e.concat("&cc="+encodeURIComponent(M))),U&&(e=e.concat("&bcc="+encodeURIComponent(U))),I&&(e=e.concat("&subject="+I)),T&&(e=e.concat("&body="+T)),window.open(e,"_blank"),Q()},D=function(){var e="https://outlook.live.com/owa/?path=/mail/action/compose&to="+encodeURIComponent(R);I&&(e=e.concat("&subject="+I)),T&&(e=e.concat("&body="+T)),window.open(e,"_blank"),Q()},B=function(){te(_),Q()},Z=function(){var e="https://t.me/"+P;window.open(e,"_blank"),Q()},F=function(){var e="skype:"+(""!==W?W:O);window.open(e,"_blank"),Q()},G=function(){var e="https://wa.me/"+O;window.open(e,"_blank"),Q()},$=function(){var e="tel:"+O;window.open(e),Q()},q=function(e){var t;re(e),(t=V(A)?C:k).textContent="copied",setTimeout((function(){t.textContent="copy",Q()}),999)},J=function(e){if(V(A))switch(e.keyCode){case 27:Q();break;case 71:H();break;case 79:D();break;case 32:case 13:B();break;case 67:q(R);break;default:return}else if(V(E))switch(e.keyCode){case 27:Q();break;case 84:Z();break;case 87:G();break;case 32:case 13:$();break;case 67:q(O);break;default:return}},K=function(e){var t=0 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE; + var mailgo = arguments.length > 1 ? arguments[1] : undefined; + + // mailgo mail + if (type === MAIL_TYPE) { + // if the element href=^"mailto:" + if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) { + mail = decodeURIComponent(mailgo.href.split("?")[0].split(MAILTO)[1].trim()); + url = new URL(mailgo.href); + var urlParams = url.searchParams; // optional parameters for the email + + cc = urlParams.get("cc"); + bcc = urlParams.get("bcc"); + subject = urlParams.get("subject"); + bodyMail = urlParams.get("body"); + } else { + // if the element href="#mailgo" or class="mailgo" + // mail = data-address + @ + data-domain + mail = mailgo.getAttribute("data-address") + "@" + mailgo.getAttribute("data-domain"); + url = new URL(MAILTO + encodeURIComponent(mail)); // cc = data-cc-address + @ + data-cc-domain + + cc = mailgo.getAttribute("data-cc-address") + "@" + mailgo.getAttribute("data-cc-domain"); // bcc = data-bcc-address + @ + data-bcc-domain + + bcc = mailgo.getAttribute("data-bcc-address") + "@" + mailgo.getAttribute("data-bcc-domain"); // subject = data-subject + + subject = mailgo.getAttribute("data-subject"); // body = data-body + + bodyMail = mailgo.getAttribute("data-body"); + } // validate the email address + + + if (!validateEmails(mail.split(","))) return; // if cc, bcc is not valid cc, bcc = "" + + if (cc && !validateEmails(cc.split(","))) cc = ""; + if (bcc && !validateEmails(bcc.split(","))) bcc = ""; // the title of the modal (email address) + + title.innerHTML = mail.split(",").join("
"); // add the details if provided + + cc ? (detailCc.style.display = "block", ccValue.innerHTML = cc.split(",").join("
")) : detailCc.style.display = "none"; + bcc ? (detailBcc.style.display = "block", bccValue.innerHTML = bcc.split(",").join("
")) : detailBcc.style.display = "none"; + subject ? (detailSubject.style.display = "block", subjectValue.textContent = subject) : detailSubject.style.display = "none"; + bodyMail ? (detailBody.style.display = "block", bodyValue.textContent = bodyMail) : detailBody.style.display = "none"; // add the actions + + gmail.addEventListener("click", openGmail); + outlook.addEventListener("click", openOutlook); + encEmail = encodeEmail(mail); + open.addEventListener("click", openDefault); + copyMail.addEventListener("click", function () { + return copy(mail); + }); + } // mailgo tel + + + if (type === TEL_TYPE) { + if (mailgo.href && mailgo.href.toLowerCase().startsWith(TEL)) { + tel = decodeURIComponent(mailgo.href.split("?")[0].split(TEL)[1].trim()); + } else if (mailgo.href && mailgo.href.toLowerCase().startsWith(CALLTO)) { + tel = decodeURIComponent(mailgo.href.split("?")[0].split(CALLTO)[1].trim()); + } else if (mailgo.hasAttribute("data-tel")) { + tel = mailgo.getAttribute("data-tel"); + msg = mailgo.getAttribute("data-msg"); + } // information + // let titleEl = getE("m-tel-title"); + // Telegram username + + + if (mailgo.hasAttribute("data-telegram")) { + telegramUsername = mailgo.getAttribute("data-telegram"); + } // Telegram username + + + if (mailgo.hasAttribute("data-skype")) { + skypeUsername = mailgo.getAttribute("data-skype"); + } // the title of the modal (tel) + + + titleTel.innerHTML = tel; // add the actions to buttons + + wa.addEventListener("click", openWhatsApp); + + if (telegramUsername) { + setDisplay("m-tg", "block"); + telegram.addEventListener("click", openTelegram); + } + + skype.addEventListener("click", openSkype); + call.addEventListener("click", callDefault); + copyTel.addEventListener("click", function () { + return copy(tel); + }); + } // show the mailgo + + + showMailgo(type); // add listener keyDown + + document.addEventListener("keydown", mailgoKeydown); + }; // actions + + + var openGmail = function openGmail() { + // Gmail url + var gmailUrl = "https://mail.google.com/mail/u/0/?view=cm&source=mailto&to=" + encodeURIComponent(mail); // the details if provided + + if (cc) gmailUrl = gmailUrl.concat("&cc=" + encodeURIComponent(cc)); + if (bcc) gmailUrl = gmailUrl.concat("&bcc=" + encodeURIComponent(bcc)); + if (subject) gmailUrl = gmailUrl.concat("&subject=" + subject); + if (bodyMail) gmailUrl = gmailUrl.concat("&body=" + bodyMail); // open the link + + window.open(gmailUrl, "_blank"); // hide the modal + + hideMailgo(); + }; + + var openOutlook = function openOutlook() { + // Outlook url + var outlookUrl = "https://outlook.live.com/owa/?path=/mail/action/compose&to=" + encodeURIComponent(mail); // the details if provided + + if (subject) outlookUrl = outlookUrl.concat("&subject=" + subject); + if (bodyMail) outlookUrl = outlookUrl.concat("&body=" + bodyMail); // open the link + + window.open(outlookUrl, "_blank"); // hide the modal + + hideMailgo(); + }; + + var openDefault = function openDefault() { + mailToEncoded(encEmail); + hideMailgo(); + }; + + var openTelegram = function openTelegram() { + // Telegram url + var tgUrl = "https://t.me/" + telegramUsername; // open the url + + window.open(tgUrl, "_blank"); // hide the modal + + hideMailgo(); + }; + + var openSkype = function openSkype() { + var skype = skypeUsername !== "" ? skypeUsername : tel; // Telegram url + + var skypeUrl = "skype:" + skype; // open the url + + window.open(skypeUrl, "_blank"); // hide the modal + + hideMailgo(); + }; + + var openWhatsApp = function openWhatsApp() { + // WhatsApp url + var waUrl = "https://wa.me/" + tel; // the details if provided + + if (msg) waUrl + "?text=" + msg; // open the url + + window.open(waUrl, "_blank"); // hide the modal + + hideMailgo(); + }; + + var callDefault = function callDefault() { + var callUrl = "tel:" + tel; + window.open(callUrl); + hideMailgo(); + }; + + var copy = function copy(content) { + copyToClipboard(content); + var activeCopy; // the correct copyButton (mail or tel) + + mailgoIsShowing(MAIL_TYPE) ? activeCopy = copyMail : activeCopy = copyTel; + activeCopy.textContent = "copied"; + setTimeout(function () { + activeCopy.textContent = "copy"; // hide after the timeout + + hideMailgo(); + }, 999); + }; // function that returns if an element is a mailgo + + + var isMailgo = function isMailgo(element) { + var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAIL_TYPE; + var href = element.href; // mailgo type mail + + if (type === MAIL_TYPE) { + return (// first case: it is an element with "mailto:..." in href and no no-mailgo in classList + href && href.toLowerCase().startsWith(MAILTO) && !element.classList.contains("no-mailgo") || element.hasAttribute("data-address") && ( // second case: the href=#mailgo + href && element.getAttribute("href").toLowerCase() === "#mailgo" || // third case: the classList contains mailgo + element.classList && element.classList.contains("mailgo")) + ); + } // mailgo type tel + + + if (type === TEL_TYPE) { + return (// first case: it is an element with "tel:..." or "callto:..." in href and no no-mailgo in classList + href && (href.toLowerCase().startsWith(TEL) || href.toLowerCase().startsWith(CALLTO)) && !element.classList.contains("no-mailgo") || element.hasAttribute("data-tel") && // second case: the href=#mailgo + href && element.getAttribute("href").toLowerCase() === "#mailgo" || // third case: the classList contains mailgo + element.classList && element.classList.contains("mailgo") + ); + } + + return false; + }; + /** + * mailgoCheckRender + * function to check if an element is mailgo-enabled or not referencing to + * mail: + * document.querySelectorAll( + * 'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' + * ); + * tel: + * document.querySelectorAll( + * 'a[href^="tel:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' + * ); + * or + * document.querySelectorAll( + * 'a[href^="callto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' + * ); + */ + + + var mailgoCheckRender = function mailgoCheckRender(event) { + // check if the id=mailgo exists in the body + if (!document.contains(getE("mailgo")) || !document.contains(getE("mailgo-tel"))) return; // if a mailgo is already showing do nothing + + if (mailgoIsShowing(MAIL_TYPE) || mailgoIsShowing(TEL_TYPE)) return; // the path of the event + + var path = event.composedPath && event.composedPath() || composedPath(event.target); + + if (path) { + path.forEach(function (element) { + 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)) { + // stop the normal execution of the element click + event.preventDefault(); // render mailgo + + mailgoRender(MAIL_TYPE, element); + return; + } + + if (isMailgo(element, TEL_TYPE)) { + // stop the normal execution of the element click + event.preventDefault(); // render mailgo + + mailgoRender(TEL_TYPE, element); + return; + } + }); + } + + return; + }; + /** + * mailgoKeydown + * function to manage the keydown event when the modal is showing + */ + + + var mailgoKeydown = function mailgoKeydown(event) { + // if mailgo is showing + if (mailgoIsShowing(MAIL_TYPE)) { + switch (event.keyCode) { + case 27: + // Escape + hideMailgo(); + break; + + case 71: + // g -> open GMail + openGmail(); + break; + + case 79: + // o -> open Outlook + openOutlook(); + break; + + case 32: + case 13: + // spacebar or enter -> open default + openDefault(); + break; + + case 67: + // c -> copy + copy(mail); + break; + + default: + return; + } + } else if (mailgoIsShowing(TEL_TYPE)) { + switch (event.keyCode) { + case 27: + // Escape + hideMailgo(); + break; + + case 84: + // t -> open Telegram + openTelegram(); + break; + + case 87: + // w -> open WhatsApp + openWhatsApp(); + break; + + case 32: + case 13: + // spacebar or enter -> call default + callDefault(); + break; + + case 67: + // c -> copy + copy(tel); + break; + + default: + return; + } + } + + return; + }; // show the modal + + + var showMailgo = function showMailgo() { + var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE; + + // show mailgo type mail + if (type === MAIL_TYPE) { + setDisplay("mailgo", "flex"); + return; + } // show mailgo type tel + + + if (type === TEL_TYPE) { + setDisplay("mailgo-tel", "flex"); + return; + } + }; // hide the modal + + + var hideMailgo = function hideMailgo() { + setDisplay("mailgo", "none"); + setDisplay("mailgo-tel", "none"); // remove listener keyDown + + document.removeEventListener("keydown", mailgoKeydown); + }; // is the mailgo modal hidden? + + + var mailgoIsShowing = function mailgoIsShowing() { + var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE; + return type === MAIL_TYPE ? getDisplay("mailgo") === "flex" : type === TEL_TYPE ? getDisplay("mailgo-tel") === "flex" : false; + }; + + var byElement = function byElement() { + // by + var by = createElement("a"); + by.href = "https://mailgo.js.org?ref=mailgo-modal"; + by.className = "m-by"; + by.target = "_blank"; + by.rel = "noopener noreferrer"; + by.appendChild(createTextNode("mailgo.js.org")); + return by; + }; // create element + + + var createElement = function createElement() { + var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "div"; + return document.createElement(element); + }; // create text node + + + var createTextNode = function createTextNode(element) { + return document.createTextNode(element); + }; // decrypt email + + + var mailToEncoded = function mailToEncoded(encoded) { + return window.location.href = MAILTO + atob(encoded); + }; // encode email + + + var encodeEmail = function encodeEmail(email) { + return btoa(email); + }; // getE shorthand + + + var getE = function getE(id) { + return document.getElementById(id); + }; // get display value + + + var getDisplay = function getDisplay(id) { + return getE(id).style.display; + }; // get display value + + + var setDisplay = function setDisplay(id, value) { + return getE(id).style.display = value; + }; // custom composedPath if path or event.composedPath() are not defined + + + var composedPath = function composedPath(el) { + var path = []; + + while (el) { + path.push(el); + + if (el.tagName === "HTML") { + path.push(document); + path.push(window); + return path; + } + + el = el.parentElement; + } + }; // validate a single email with regex + + + var validateEmail = function validateEmail(email) { + return /^(([^<>()[\]\\.,;:\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); + }; // validate an array of emails + + + var validateEmails = function validateEmails(arr) { + return arr.every(validateEmail); + }; // copy of a string + + + var copyToClipboard = function copyToClipboard(str) { + var el = 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; + el.select(); + document.execCommand("copy"); + document.body.removeChild(el); + + if (selected) { + document.getSelection().removeAllRanges(); + document.getSelection().addRange(selected); + } + }; // start mailgo + + + (function () { + // if the window is defined... + if (window && typeof window !== "undefined") { + // if the window object exists... + // mailgo style (gulp) + var mailgoCSS = createElement("style"); + mailgoCSS.id = "mailgo-style"; + mailgoCSS.type = "text/css"; + mailgoCSS.appendChild(createTextNode(".m-modal{position:fixed;top:0;right:0;bottom:0;left:0;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.m-modal a,.m-modal p,.m-modal span,.m-modal strong{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";text-rendering:optimizeLegibility}.m-modal strong{font-weight:700}.m-modal .m-modal-back{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(32,35,42,.75);opacity:.8}.m-modal .m-modal-content{position:relative;z-index:10002;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:.97;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 3px 20px rgba(32,35,42,.5);-moz-box-shadow:0 3px 20px rgba(32,35,42,.5);box-shadow:0 3px 20px rgba(32,35,42,.5);color:#4a4a4a;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:auto;padding:20px;-webkit-transition:.5s -webkit-box-shadow;transition:.5s -webkit-box-shadow;-o-transition:.5s box-shadow;-moz-transition:.5s box-shadow,.5s -moz-box-shadow;transition:.5s box-shadow;transition:.5s box-shadow,.5s -webkit-box-shadow,.5s -moz-box-shadow}.m-modal .m-modal-content:hover{opacity:1;-webkit-box-shadow:0 7px 20px rgba(32,35,42,.85);-moz-box-shadow:0 7px 20px rgba(32,35,42,.85);box-shadow:0 7px 20px rgba(32,35,42,.85)}.m-modal .m-modal-content .m-title{margin-bottom:8px;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}.m-modal .m-modal-content .m-details{margin-bottom:10px}.m-modal .m-modal-content .m-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.m-modal .m-modal-content a{padding:10px;color:#4a4a4a;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;text-decoration:none}.m-modal .m-modal-content a.m-gmail{color:#d44638}.m-modal .m-modal-content a.m-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.m-modal .m-modal-content a.m-outlook{color:#0072c6}.m-modal .m-modal-content a.m-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.m-modal .m-modal-content a.m-tg{color:#08c}.m-modal .m-modal-content a.m-tg:hover{background-color:rgba(0,114,198,.08);color:#08c}.m-modal .m-modal-content a.m-wa{color:#00bfa5}.m-modal .m-modal-content a.m-wa:hover{background-color:rgba(0,191,165,.08);color:#00bfa5}.m-modal .m-modal-content a.m-skype{color:#00aff0}.m-modal .m-modal-content a.m-skype:hover{background-color:rgba(0,175,240,.08);color:#00aff0}.m-modal .m-modal-content a.m-copy{padding:16px 10px;font-size:16px}.m-modal .m-modal-content a.m-copy:hover,.m-modal .m-modal-content a.m-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.m-modal .m-modal-content a.m-by{font-size:8px;margin-top:.8rem;padding:5px;color:#4a4a4a;opacity:.5}.m-modal .m-modal-content a.m-by:hover{opacity:1}.m-modal .m-modal-content .w-500{font-weight:500}")); + 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); + } + })(); +}; // if mailgo is included as a script + + +if (window && typeof window !== "undefined") { + mailgo(); +} // export mailgo + + +var _default = mailgo; +exports["default"] = _default; \ No newline at end of file diff --git a/mailgo.ts b/mailgo.ts new file mode 100644 index 0000000..f6a568e --- /dev/null +++ b/mailgo.ts @@ -0,0 +1,859 @@ +const mailgoVersion: string = "0.9.0"; + +type MailgoConfig = {}; + +const mailgo = (config?: MailgoConfig): void => { + // links + const MAILTO: string = "mailto:"; + const TEL: string = "tel:"; + const CALLTO: string = "callto:"; + + // mailgo types + const MAIL_TYPE: string = "mail"; + const TEL_TYPE: string = "tel"; + + // default href for links + const DEFAULT_BTN_HREF: string = "javascript:void(0);"; + + // html tags + const span: string = "span"; + + // mailgo variables + let url: URL, + mail: string = "", + encEmail: string = "", + cc: string = "", + bcc: string = "", + subject: string = "", + bodyMail: string = ""; + + // mailgo tel variables + let tel: string = "", + msg: string = "", + telegramUsername: string = "", + skypeUsername: string = ""; + + // the DOM elements + let title: HTMLElement, + titleTel: HTMLElement, + detailCc: HTMLElement, + detailBcc: HTMLElement, + detailSubject: HTMLElement, + detailBody: HTMLElement, + ccValue: HTMLElement, + bccValue: HTMLElement, + subjectValue: HTMLElement, + bodyValue: HTMLElement; + + // mailgo buttons (actions) + let gmail: HTMLLinkElement, + outlook: HTMLLinkElement, + open: HTMLLinkElement, + telegram: HTMLLinkElement, + wa: HTMLLinkElement, + skype: HTMLLinkElement, + call: HTMLLinkElement, + copyMail: HTMLLinkElement, + copyTel: HTMLLinkElement; + + /** + * mailgoInit + * the function that creates the mailgo elements in DOM + */ + const mailgoInit = (): void => { + // mailgo mail + { + // modal + let modal = createElement(); + modal.style.display = "none"; + modal.id = "mailgo"; + modal.classList.add("m-modal"); + + // background + let modalBackground = createElement(); + modalBackground.className = "m-modal-back"; + modal.appendChild(modalBackground); + + // modal content + let modalContent = createElement(); + modalContent.className = "m-modal-content"; + modal.appendChild(modalContent); + + // title (email address) + title = createElement("strong"); + title.id = "m-title"; + title.className = "m-title"; + modalContent.appendChild(title); + + // details + let details = createElement(); + details.id = "m-details"; + details.className = "m-details"; + + detailCc = createElement("p"); + detailCc.id = "m-cc"; + let ccSpan = createElement(span); + ccSpan.className = "w-500"; + ccSpan.appendChild(createTextNode("cc ")); + ccValue = createElement(span); + ccValue.id = "m-cc-value"; + detailCc.appendChild(ccSpan); + detailCc.appendChild(ccValue); + details.appendChild(detailCc); + + detailBcc = createElement("p"); + detailBcc.id = "m-bcc"; + let bccSpan = createElement(span); + bccSpan.className = "w-500"; + bccSpan.appendChild(createTextNode("bcc ")); + bccValue = createElement(span); + bccValue.id = "m-bcc-value"; + detailBcc.appendChild(bccSpan); + detailBcc.appendChild(bccValue); + details.appendChild(detailBcc); + + detailSubject = createElement("p"); + detailSubject.id = "m-subject"; + let subjectSpan = createElement(span); + subjectSpan.className = "w-500"; + subjectSpan.appendChild(createTextNode("subject ")); + subjectValue = createElement(span); + subjectValue.id = "m-subject-value"; + detailSubject.appendChild(subjectSpan); + detailSubject.appendChild(subjectValue); + details.appendChild(detailSubject); + + detailBody = createElement("p"); + detailBody.id = "m-body"; + let bodySpan = createElement(span); + bodySpan.className = "w-500"; + bodySpan.appendChild(createTextNode("body ")); + bodyValue = createElement(span); + bodyValue.id = "m-body-value"; + detailBody.appendChild(bodySpan); + detailBody.appendChild(bodyValue); + details.appendChild(detailBody); + + modalContent.appendChild(details); + + // Gmail + gmail = createElement("a"); + gmail.id = "m-gmail"; + gmail.href = DEFAULT_BTN_HREF; + gmail.classList.add("m-open"); + gmail.classList.add("m-gmail"); + gmail.appendChild(createTextNode("open in ")); + let gmailSpan = createElement(span); + gmailSpan.className = "w-500"; + gmailSpan.appendChild(createTextNode("Gmail")); + gmail.appendChild(gmailSpan); + + modalContent.appendChild(gmail); + + // Outlook + outlook = createElement("a"); + outlook.id = "m-outlook"; + outlook.href = DEFAULT_BTN_HREF; + outlook.classList.add("m-open"); + outlook.classList.add("m-outlook"); + outlook.appendChild(createTextNode("open in ")); + let outlookSpan = createElement(span); + outlookSpan.className = "w-500"; + outlookSpan.appendChild(createTextNode("Outlook")); + outlook.appendChild(outlookSpan); + + modalContent.appendChild(outlook); + + // open default + open = createElement("a"); + open.id = "m-open"; + open.href = DEFAULT_BTN_HREF; + open.classList.add("m-open"); + open.classList.add("m-default"); + let openSpan = createElement(span); + openSpan.className = "w-500"; + openSpan.appendChild(createTextNode("open")); + open.appendChild(openSpan); + open.appendChild(createTextNode(" default")); + + modalContent.appendChild(open); + + // copy + copyMail = createElement("a"); + copyMail.id = "m-copy"; + copyMail.href = DEFAULT_BTN_HREF; + copyMail.classList.add("m-copy"); + copyMail.classList.add("w-500"); + copyMail.appendChild(createTextNode("copy")); + + modalContent.appendChild(copyMail); + + modalContent.appendChild(byElement()); + + // 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); + } + // mailgo tel + { + // modal + let modal = createElement(); + modal.style.display = "none"; + modal.id = "mailgo-tel"; + modal.classList.add("m-modal"); + + // background + let modalBackground = createElement(); + modalBackground.className = "m-modal-back"; + modal.appendChild(modalBackground); + + // modal content + let modalContent = createElement(); + modalContent.className = "m-modal-content"; + modal.appendChild(modalContent); + + // title (telephone number) + titleTel = createElement("strong"); + titleTel.id = "m-tel-title"; + titleTel.className = "m-title"; + modalContent.appendChild(titleTel); + + // Telegram + telegram = createElement("a"); + telegram.id = "m-tg"; + telegram.href = DEFAULT_BTN_HREF; + telegram.classList.add("m-open"); + telegram.classList.add("m-tg"); + + // by default not display + telegram.style.display = "none"; + + telegram.appendChild(createTextNode("open in ")); + let telegramSpan = createElement(span); + telegramSpan.className = "w-500"; + telegramSpan.appendChild(createTextNode("Telegram")); + telegram.appendChild(telegramSpan); + + modalContent.appendChild(telegram); + + // WhatsApp + wa = createElement("a"); + wa.id = "m-wa"; + wa.href = DEFAULT_BTN_HREF; + wa.classList.add("m-open"); + wa.classList.add("m-wa"); + wa.appendChild(createTextNode("open in ")); + let waSpan = createElement(span); + waSpan.className = "w-500"; + waSpan.appendChild(createTextNode("WhatsApp")); + wa.appendChild(waSpan); + + modalContent.appendChild(wa); + + // Skype + skype = createElement("a"); + skype.id = "m-skype"; + skype.href = DEFAULT_BTN_HREF; + skype.classList.add("m-open"); + skype.classList.add("m-skype"); + skype.appendChild(createTextNode("open in ")); + let skypeSpan = createElement(span); + skypeSpan.className = "w-500"; + skypeSpan.appendChild(createTextNode("Skype")); + skype.appendChild(skypeSpan); + + modalContent.appendChild(skype); + + // call default + call = createElement("a"); + call.id = "m-call"; + call.href = DEFAULT_BTN_HREF; + call.classList.add("m-open"); + call.classList.add("m-default"); + let callSpan = createElement(span); + callSpan.className = "w-500"; + callSpan.appendChild(createTextNode("call")); + call.appendChild(callSpan); + call.appendChild(createTextNode(" as default")); + + modalContent.appendChild(call); + + // copy + copyTel = createElement("a"); + copyTel.id = "m-tel-copy"; + copyTel.href = DEFAULT_BTN_HREF; + copyTel.classList.add("m-copy"); + copyTel.classList.add("w-500"); + copyTel.appendChild(createTextNode("copy")); + + modalContent.appendChild(copyTel); + + modalContent.appendChild(byElement()); + + // 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); + } + }; + + /** + * mailgoRender + * function to render a mailgo (mail or tel) + */ + const mailgoRender = (type = MAIL_TYPE, mailgo: any) => { + // mailgo mail + if (type === MAIL_TYPE) { + // if the element href=^"mailto:" + if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) { + mail = decodeURIComponent( + mailgo.href.split("?")[0].split(MAILTO)[1].trim() + ); + + url = new URL(mailgo.href); + let urlParams: URLSearchParams = url.searchParams; + + // optional parameters for the email + cc = urlParams.get("cc"); + bcc = urlParams.get("bcc"); + subject = urlParams.get("subject"); + bodyMail = urlParams.get("body"); + } else { + // if the element href="#mailgo" or class="mailgo" + // mail = data-address + @ + data-domain + mail = + mailgo.getAttribute("data-address") + + "@" + + mailgo.getAttribute("data-domain"); + + url = new URL(MAILTO + encodeURIComponent(mail)); + + // cc = data-cc-address + @ + data-cc-domain + cc = + mailgo.getAttribute("data-cc-address") + + "@" + + mailgo.getAttribute("data-cc-domain"); + + // bcc = data-bcc-address + @ + data-bcc-domain + bcc = + mailgo.getAttribute("data-bcc-address") + + "@" + + mailgo.getAttribute("data-bcc-domain"); + + // subject = data-subject + subject = mailgo.getAttribute("data-subject"); + + // body = data-body + bodyMail = mailgo.getAttribute("data-body"); + } + + // validate the email address + if (!validateEmails(mail.split(","))) return; + + // if cc, bcc is not valid cc, bcc = "" + if (cc && !validateEmails(cc.split(","))) cc = ""; + if (bcc && !validateEmails(bcc.split(","))) bcc = ""; + + // the title of the modal (email address) + title.innerHTML = mail.split(",").join("
"); + + // add the details if provided + cc + ? ((detailCc.style.display = "block"), + (ccValue.innerHTML = cc.split(",").join("
"))) + : (detailCc.style.display = "none"); + + bcc + ? ((detailBcc.style.display = "block"), + (bccValue.innerHTML = bcc.split(",").join("
"))) + : (detailBcc.style.display = "none"); + + subject + ? ((detailSubject.style.display = "block"), + (subjectValue.textContent = subject)) + : (detailSubject.style.display = "none"); + + bodyMail + ? ((detailBody.style.display = "block"), + (bodyValue.textContent = bodyMail)) + : (detailBody.style.display = "none"); + + // add the actions + gmail.addEventListener("click", openGmail); + + outlook.addEventListener("click", openOutlook); + + encEmail = encodeEmail(mail); + open.addEventListener("click", openDefault); + + copyMail.addEventListener("click", () => copy(mail)); + } + // mailgo tel + if (type === TEL_TYPE) { + if (mailgo.href && mailgo.href.toLowerCase().startsWith(TEL)) { + tel = decodeURIComponent( + mailgo.href.split("?")[0].split(TEL)[1].trim() + ); + } else if (mailgo.href && mailgo.href.toLowerCase().startsWith(CALLTO)) { + tel = decodeURIComponent( + mailgo.href.split("?")[0].split(CALLTO)[1].trim() + ); + } else if (mailgo.hasAttribute("data-tel")) { + tel = mailgo.getAttribute("data-tel"); + msg = mailgo.getAttribute("data-msg"); + } + + // information + // let titleEl = getE("m-tel-title"); + + // Telegram username + if (mailgo.hasAttribute("data-telegram")) { + telegramUsername = mailgo.getAttribute("data-telegram"); + } + + // Telegram username + if (mailgo.hasAttribute("data-skype")) { + skypeUsername = mailgo.getAttribute("data-skype"); + } + + // the title of the modal (tel) + titleTel.innerHTML = tel; + + // add the actions to buttons + wa.addEventListener("click", openWhatsApp); + + if (telegramUsername) { + setDisplay("m-tg", "block"); + telegram.addEventListener("click", openTelegram); + } + + skype.addEventListener("click", openSkype); + + call.addEventListener("click", callDefault); + + copyTel.addEventListener("click", () => copy(tel)); + } + + // show the mailgo + showMailgo(type); + + // add listener keyDown + document.addEventListener("keydown", mailgoKeydown); + }; + + // actions + const openGmail = () => { + // Gmail url + let gmailUrl = + "https://mail.google.com/mail/u/0/?view=cm&source=mailto&to=" + + encodeURIComponent(mail); + + // the details if provided + if (cc) gmailUrl = gmailUrl.concat("&cc=" + encodeURIComponent(cc)); + if (bcc) gmailUrl = gmailUrl.concat("&bcc=" + encodeURIComponent(bcc)); + if (subject) gmailUrl = gmailUrl.concat("&subject=" + subject); + if (bodyMail) gmailUrl = gmailUrl.concat("&body=" + bodyMail); + + // open the link + window.open(gmailUrl, "_blank"); + + // hide the modal + hideMailgo(); + }; + + const openOutlook = () => { + // Outlook url + let outlookUrl = + "https://outlook.live.com/owa/?path=/mail/action/compose&to=" + + encodeURIComponent(mail); + + // the details if provided + if (subject) outlookUrl = outlookUrl.concat("&subject=" + subject); + if (bodyMail) outlookUrl = outlookUrl.concat("&body=" + bodyMail); + + // open the link + window.open(outlookUrl, "_blank"); + + // hide the modal + hideMailgo(); + }; + + const openDefault = () => { + mailToEncoded(encEmail); + hideMailgo(); + }; + + const openTelegram = () => { + // Telegram url + let tgUrl = "https://t.me/" + telegramUsername; + + // open the url + window.open(tgUrl, "_blank"); + + // hide the modal + hideMailgo(); + }; + + const openSkype = () => { + let skype = skypeUsername !== "" ? skypeUsername : tel; + + // Telegram url + let skypeUrl = "skype:" + skype; + + // open the url + window.open(skypeUrl, "_blank"); + + // hide the modal + hideMailgo(); + }; + + const openWhatsApp = () => { + // WhatsApp url + let waUrl = "https://wa.me/" + tel; + + // the details if provided + if (msg) waUrl + "?text=" + msg; + + // open the url + window.open(waUrl, "_blank"); + + // hide the modal + hideMailgo(); + }; + + const callDefault = () => { + let callUrl = "tel:" + tel; + window.open(callUrl); + hideMailgo(); + }; + + const copy = (content: string) => { + copyToClipboard(content); + let activeCopy: HTMLElement; + // the correct copyButton (mail or tel) + mailgoIsShowing(MAIL_TYPE) + ? (activeCopy = copyMail) + : (activeCopy = copyTel); + activeCopy.textContent = "copied"; + setTimeout(() => { + activeCopy.textContent = "copy"; + // hide after the timeout + hideMailgo(); + }, 999); + }; + + // function that returns if an element is a mailgo + const isMailgo = (element: HTMLElement, type: string = MAIL_TYPE) => { + let href: string = (element as HTMLLinkElement).href; + + // mailgo type mail + if (type === MAIL_TYPE) { + return ( + // first case: it is an element with "mailto:..." in href and no no-mailgo in classList + (href && + href.toLowerCase().startsWith(MAILTO) && + !element.classList.contains("no-mailgo")) || + (element.hasAttribute("data-address") && + // second case: the href=#mailgo + ((href && element.getAttribute("href").toLowerCase() === "#mailgo") || + // third case: the classList contains mailgo + (element.classList && element.classList.contains("mailgo")))) + ); + } + + // mailgo type tel + if (type === TEL_TYPE) { + return ( + // first case: it is an element with "tel:..." or "callto:..." in href and no no-mailgo in classList + (href && + (href.toLowerCase().startsWith(TEL) || + href.toLowerCase().startsWith(CALLTO)) && + !element.classList.contains("no-mailgo")) || + (element.hasAttribute("data-tel") && + // second case: the href=#mailgo + href && + element.getAttribute("href").toLowerCase() === "#mailgo") || + // third case: the classList contains mailgo + (element.classList && element.classList.contains("mailgo")) + ); + } + + return false; + }; + + /** + * mailgoCheckRender + * function to check if an element is mailgo-enabled or not referencing to + * mail: + * document.querySelectorAll( + * 'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' + * ); + * tel: + * document.querySelectorAll( + * 'a[href^="tel:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' + * ); + * or + * document.querySelectorAll( + * 'a[href^="callto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo' + * ); + */ + const mailgoCheckRender = (event: Event) => { + // check if the id=mailgo exists in the body + if ( + !document.contains(getE("mailgo")) || + !document.contains(getE("mailgo-tel")) + ) + return; + + // if a mailgo is already showing do nothing + if (mailgoIsShowing(MAIL_TYPE) || mailgoIsShowing(TEL_TYPE)) return; + + // the path of the event + let path = + (event.composedPath && event.composedPath()) || + composedPath(event.target as HTMLElement); + + if (path) { + path.forEach((element: HTMLElement) => { + 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)) { + // stop the normal execution of the element click + event.preventDefault(); + + // render mailgo + mailgoRender(MAIL_TYPE, element); + + return; + } + if (isMailgo(element, TEL_TYPE)) { + // stop the normal execution of the element click + event.preventDefault(); + + // render mailgo + mailgoRender(TEL_TYPE, element); + + return; + } + }); + } + + return; + }; + + /** + * mailgoKeydown + * function to manage the keydown event when the modal is showing + */ + const mailgoKeydown = (event: KeyboardEvent) => { + // if mailgo is showing + if (mailgoIsShowing(MAIL_TYPE)) { + switch (event.keyCode) { + case 27: + // Escape + hideMailgo(); + break; + case 71: + // g -> open GMail + openGmail(); + break; + case 79: + // o -> open Outlook + openOutlook(); + break; + case 32: + case 13: + // spacebar or enter -> open default + openDefault(); + break; + case 67: + // c -> copy + copy(mail); + break; + default: + return; + } + } else if (mailgoIsShowing(TEL_TYPE)) { + switch (event.keyCode) { + case 27: + // Escape + hideMailgo(); + break; + case 84: + // t -> open Telegram + openTelegram(); + break; + case 87: + // w -> open WhatsApp + openWhatsApp(); + break; + case 32: + case 13: + // spacebar or enter -> call default + callDefault(); + break; + case 67: + // c -> copy + copy(tel); + break; + default: + return; + } + } + return; + }; + + // show the modal + const showMailgo = (type = MAIL_TYPE) => { + // show mailgo type mail + if (type === MAIL_TYPE) { + setDisplay("mailgo", "flex"); + return; + } + // show mailgo type tel + if (type === TEL_TYPE) { + setDisplay("mailgo-tel", "flex"); + return; + } + }; + + // 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) => { + return type === MAIL_TYPE + ? getDisplay("mailgo") === "flex" + : type === TEL_TYPE + ? getDisplay("mailgo-tel") === "flex" + : false; + }; + + const byElement = () => { + // by + let by: HTMLLinkElement = createElement("a"); + by.href = "https://mailgo.js.org?ref=mailgo-modal"; + by.className = "m-by"; + by.target = "_blank"; + by.rel = "noopener noreferrer"; + by.appendChild(createTextNode("mailgo.js.org")); + + return by; + }; + + // create element + const createElement = (element: string = "div") => + document.createElement(element); + + // create text node + const createTextNode = (element: string) => document.createTextNode(element); + + // decrypt email + const mailToEncoded = (encoded: string) => + (window.location.href = MAILTO + atob(encoded)); + + // encode email + const encodeEmail = (email: string) => btoa(email); + + // getE shorthand + const getE = (id: string) => document.getElementById(id); + + // get display value + const getDisplay = (id: string) => getE(id).style.display; + + // get display value + const setDisplay = (id: string, value: string) => + (getE(id).style.display = value); + + // custom composedPath if path or event.composedPath() are not defined + const composedPath = (el: HTMLElement) => { + let path = []; + + while (el) { + path.push(el); + + if (el.tagName === "HTML") { + path.push(document); + path.push(window); + return path; + } + + el = el.parentElement; + } + }; + + // validate a single email with regex + 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( + email + ); + + // validate an array of emails + const validateEmails = (arr: string[]) => arr.every(validateEmail); + + // copy of a string + const copyToClipboard = (str: string) => { + let el: HTMLInputElement = createElement("textarea"); + el.value = str; + el.setAttribute("readonly", ""); + el.style.position = "absolute"; + el.style.left = "-9999px"; + document.body.appendChild(el); + 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); + } + }; + + // start mailgo + (() => { + // if the window is defined... + if (window && typeof window !== "undefined") { + // if the window object exists... + // mailgo style (gulp) + let mailgoCSS: HTMLStyleElement = ( + createElement("style") + ); + mailgoCSS.id = "mailgo-style"; + mailgoCSS.type = "text/css"; + mailgoCSS.appendChild( + createTextNode( + `.m-modal{position:fixed;top:0;right:0;bottom:0;left:0;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.m-modal a,.m-modal p,.m-modal span,.m-modal strong{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";text-rendering:optimizeLegibility}.m-modal strong{font-weight:700}.m-modal .m-modal-back{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(32,35,42,.75);opacity:.8}.m-modal .m-modal-content{position:relative;z-index:10002;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:.97;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 3px 20px rgba(32,35,42,.5);-moz-box-shadow:0 3px 20px rgba(32,35,42,.5);box-shadow:0 3px 20px rgba(32,35,42,.5);color:#4a4a4a;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:auto;padding:20px;-webkit-transition:.5s -webkit-box-shadow;transition:.5s -webkit-box-shadow;-o-transition:.5s box-shadow;-moz-transition:.5s box-shadow,.5s -moz-box-shadow;transition:.5s box-shadow;transition:.5s box-shadow,.5s -webkit-box-shadow,.5s -moz-box-shadow}.m-modal .m-modal-content:hover{opacity:1;-webkit-box-shadow:0 7px 20px rgba(32,35,42,.85);-moz-box-shadow:0 7px 20px rgba(32,35,42,.85);box-shadow:0 7px 20px rgba(32,35,42,.85)}.m-modal .m-modal-content .m-title{margin-bottom:8px;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}.m-modal .m-modal-content .m-details{margin-bottom:10px}.m-modal .m-modal-content .m-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.m-modal .m-modal-content a{padding:10px;color:#4a4a4a;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;text-decoration:none}.m-modal .m-modal-content a.m-gmail{color:#d44638}.m-modal .m-modal-content a.m-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.m-modal .m-modal-content a.m-outlook{color:#0072c6}.m-modal .m-modal-content a.m-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.m-modal .m-modal-content a.m-tg{color:#08c}.m-modal .m-modal-content a.m-tg:hover{background-color:rgba(0,114,198,.08);color:#08c}.m-modal .m-modal-content a.m-wa{color:#00bfa5}.m-modal .m-modal-content a.m-wa:hover{background-color:rgba(0,191,165,.08);color:#00bfa5}.m-modal .m-modal-content a.m-skype{color:#00aff0}.m-modal .m-modal-content a.m-skype:hover{background-color:rgba(0,175,240,.08);color:#00aff0}.m-modal .m-modal-content a.m-copy{padding:16px 10px;font-size:16px}.m-modal .m-modal-content a.m-copy:hover,.m-modal .m-modal-content a.m-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.m-modal .m-modal-content a.m-by{font-size:8px;margin-top:.8rem;padding:5px;color:#4a4a4a;opacity:.5}.m-modal .m-modal-content a.m-by:hover{opacity:1}.m-modal .m-modal-content .w-500{font-weight:500}` + ) + ); + 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); + } + })(); +}; + +// if mailgo is included as a script +if (window && typeof window !== "undefined") { + mailgo(); +} + +// export mailgo +export default mailgo; diff --git a/src/mailgo.ts b/src/mailgo.ts index 9529b6e..e307e4f 100644 --- a/src/mailgo.ts +++ b/src/mailgo.ts @@ -1,8 +1,8 @@ -type MailgoConfig = {}; - const mailgoVersion: string = "MAILGO_VERSION"; -const mailgo = (config?: MailgoConfig) => { +type MailgoConfig = {}; + +const mailgo = (config?: MailgoConfig): void => { // links const MAILTO: string = "mailto:"; const TEL: string = "tel:"; diff --git a/webpack.config.js b/webpack.config.js index 1cf7187..f72a332 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -11,14 +11,4 @@ module.exports = [ libraryTarget: "umd", }, }, - { - mode: "production", - entry: "./dist/mailgo.min.js", - output: { - filename: "./dist/mailgo.min.js", - path: path.resolve(__dirname), - library: "mailgo", - libraryTarget: "umd", - }, - }, ]; diff --git a/yarn.lock b/yarn.lock index 497f8cc..0406e9b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6831,9 +6831,9 @@ terser-webpack-plugin@^1.4.3: worker-farm "^1.7.0" terser@^4.0.0, terser@^4.1.2: - version "4.6.11" - resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.11.tgz#12ff99fdd62a26de2a82f508515407eb6ccd8a9f" - integrity sha512-76Ynm7OXUG5xhOpblhytE7X58oeNSmC8xnNhjWVo8CksHit0U0kO4hfNbPrrYwowLWFgM2n9L176VNx2QaHmtA== + version "4.6.12" + resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.12.tgz#44b98aef8703fdb09a3491bf79b43faffc5b4fee" + integrity sha512-fnIwuaKjFPANG6MAixC/k1TDtnl1YlPLUlLVIxxGZUn1gfUx2+l3/zGNB72wya+lgsb50QBi2tUV75RiODwnww== dependencies: commander "^2.20.0" source-map "~0.6.1"