From 176fadd60a210d06c05fcf0d057b0b7b2052d559 Mon Sep 17 00:00:00 2001 From: Matteo Manzinello Date: Fri, 24 Apr 2020 21:51:34 +0200 Subject: [PATCH] go on with typescript and export --- dist/mailgo.min.js | 2 +- gulpfile.js | 4 +- index.d.ts | 4 +- mailgo.js | 1312 ++++++++++++++++------------------ mailgo.ts | 859 ---------------------- src/mailgo.ts | 1701 ++++++++++++++++++++++---------------------- 6 files changed, 1475 insertions(+), 2407 deletions(-) delete mode 100644 mailgo.ts diff --git a/dist/mailgo.min.js b/dist/mailgo.min.js index 55c40ac..a9f8d14 100644 --- a/dist/mailgo.min.js +++ b/dist/mailgo.min.js @@ -1 +1 @@ -"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var mailgoVersion="0.9.0",mailgo=function(){function t(){var e=ee();e.style.display="none",e.id="mailgo",e.classList.add("m-modal");var t=ee();t.className="m-modal-back",e.appendChild(t);var a=ee();a.className="m-modal-content",e.appendChild(a),(w=ee("strong")).id="m-title",w.className="m-title",a.appendChild(w);var o=ee();o.id="m-details",o.className="m-details",(v=ee("p")).id="m-cc";var n=ee(H);n.className="w-500",n.appendChild(te("cc ")),(L=ee(H)).id="m-cc-value",v.appendChild(n),v.appendChild(L),o.appendChild(v),(y=ee("p")).id="m-bcc";var i=ee(H);i.className="w-500",i.appendChild(te("bcc ")),(z=ee(H)).id="m-bcc-value",y.appendChild(i),y.appendChild(z),o.appendChild(y),(C=ee("p")).id="m-subject";var d=ee(H);d.className="w-500",d.appendChild(te("subject ")),(A=ee(H)).id="m-subject-value",C.appendChild(d),C.appendChild(A),o.appendChild(C),(k=ee("p")).id="m-body";var l=ee(H);l.className="w-500",l.appendChild(te("body ")),(E=ee(H)).id="m-body-value",k.appendChild(l),k.appendChild(E),o.appendChild(k),a.appendChild(o),(N=ee("a")).id="m-gmail",N.href=W,N.classList.add("m-open"),N.classList.add("m-gmail"),N.appendChild(te("open in "));var s=ee(H);s.className="w-500",s.appendChild(te("Gmail")),N.appendChild(s),a.appendChild(N),(j=ee("a")).id="m-outlook",j.href=W,j.classList.add("m-open"),j.classList.add("m-outlook"),j.appendChild(te("open in "));var c=ee(H);c.className="w-500",c.appendChild(te("Outlook")),j.appendChild(c),a.appendChild(j),(R=ee("a")).id="m-open",R.href=W,R.classList.add("m-open"),R.classList.add("m-default");var r=ee(H);r.className="w-500",r.appendChild(te("open")),R.appendChild(r),R.appendChild(te(" default")),a.appendChild(R),(M=ee("a")).id="m-copy",M.href=W,M.classList.add("m-copy"),M.classList.add("w-500"),M.appendChild(te("copy")),a.appendChild(M),a.appendChild(Y()),document.body.appendChild(e),t.addEventListener("click",Q);var m=ee();m.style.display="none",m.id="mailgo-tel",m.classList.add("m-modal");var p=ee();p.className="m-modal-back",m.appendChild(p);var b=ee();b.className="m-modal-content",m.appendChild(b),(x=ee("strong")).id="m-tel-title",x.className="m-title",b.appendChild(x),(U=ee("a")).id="m-tg",U.href=W,U.classList.add("m-open"),U.classList.add("m-tg"),U.style.display="none",U.appendChild(te("open in "));var u=ee(H);u.className="w-500",u.appendChild(te("Telegram")),U.appendChild(u),b.appendChild(U),(I=ee("a")).id="m-wa",I.href=W,I.classList.add("m-open"),I.classList.add("m-wa"),I.appendChild(te("open in "));var h=ee(H);h.className="w-500",h.appendChild(te("WhatsApp")),I.appendChild(h),b.appendChild(I),(S=ee("a")).id="m-skype",S.href=W,S.classList.add("m-open"),S.classList.add("m-skype"),S.appendChild(te("open in "));var f=ee(H);f.className="w-500",f.appendChild(te("Skype")),S.appendChild(f),b.appendChild(S),(_=ee("a")).id="m-call",_.href=W,_.classList.add("m-open"),_.classList.add("m-default");var g=ee(H);g.className="w-500",g.appendChild(te("call")),_.appendChild(g),_.appendChild(te(" as default")),b.appendChild(_),(T=ee("a")).id="m-tel-copy",T.href=W,T.classList.add("m-copy"),T.classList.add("w-500"),T.appendChild(te("copy")),b.appendChild(T),b.appendChild(Y()),document.body.appendChild(m),p.addEventListener("click",Q)}function a(e,t){var a=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"),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",gmail.addEventListener("click",openGmail),outlook.addEventListener("click",openOutlook),encEmail=encodeEmail(mail),open.addEventListener("click",openDefault),copyMail.addEventListener("click",function(){return copy(mail)})}t===TEL_TYPE&&(a.href&&a.href.toLowerCase().startsWith(TEL)?tel=decodeURIComponent(a.href.split("?")[0].split(TEL)[1].trim()):a.href&&a.href.toLowerCase().startsWith(CALLTO)?tel=decodeURIComponent(a.href.split("?")[0].split(CALLTO)[1].trim()):a.hasAttribute("data-tel")&&(tel=a.getAttribute("data-tel"),msg=a.getAttribute("data-msg")),a.hasAttribute("data-telegram")&&(telegramUsername=a.getAttribute("data-telegram")),a.hasAttribute("data-skype")&&(skypeUsername=a.getAttribute("data-skype")),titleTel.innerHTML=tel,wa.addEventListener("click",openWhatsApp),telegramUsername&&(setDisplay("m-tg","block"),telegram.addEventListener("click",openTelegram)),skype.addEventListener("click",openSkype),call.addEventListener("click",callDefault),copyTel.addEventListener("click",function(){return copy(tel)})),showMailgo(t),document.addEventListener("keydown",mailgoKeydown)},openGmail=function(){var e="https://mail.google.com/mail/u/0/?view=cm&source=mailto&to="+encodeURIComponent(mail);cc&&(e=e.concat("&cc="+encodeURIComponent(cc))),bcc&&(e=e.concat("&bcc="+encodeURIComponent(bcc))),subject&&(e=e.concat("&subject="+subject)),bodyMail&&(e=e.concat("&body="+bodyMail)),window.open(e,"_blank"),hideMailgo()},openOutlook=function(){var e="https://outlook.live.com/owa/?path=/mail/action/compose&to="+encodeURIComponent(mail);subject&&(e=e.concat("&subject="+subject)),bodyMail&&(e=e.concat("&body="+bodyMail)),window.open(e,"_blank"),hideMailgo()},openDefault=function(){mailToEncoded(encEmail),hideMailgo()},openTelegram=function(){var e="https://t.me/"+telegramUsername;window.open(e,"_blank"),hideMailgo()},openSkype=function(){var e="skype:"+(""!==skypeUsername?skypeUsername:tel);window.open(e,"_blank"),hideMailgo()},openWhatsApp=function(){var e="https://wa.me/"+tel;window.open(e,"_blank"),hideMailgo()},callDefault=function(){var e="tel:"+tel;window.open(e),hideMailgo()},copy=function(e){var o;copyToClipboard(e),(o=mailgoIsShowing(MAIL_TYPE)?copyMail:copyTel).textContent="copied",setTimeout(function(){o.textContent="copy",hideMailgo()},999)},isMailgo=function(e,o){var t=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)},validateEmails=function(e){return e.every(validateEmail)},copyToClipboard=function(e){var o=createElement("textarea");o.value=e,o.setAttribute("readonly",""),o.style.position="absolute",o.style.left="-9999px",document.body.appendChild(o);var t=0 { // mailgo mail { - // modal - var modal = createElement(); - modal.style.display = "none"; - modal.id = "mailgo"; - modal.classList.add("m-modal"); // background - - var modalBackground = createElement(); - modalBackground.className = "m-modal-back"; - modal.appendChild(modalBackground); // modal content - - var 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 - - var details = createElement(); - details.id = "m-details"; - details.className = "m-details"; - detailCc = createElement("p"); - detailCc.id = "m-cc"; - var 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"; - var 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"; - var 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"; - var 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 ")); - var 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 ")); - var 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"); - var 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 - var _modal = createElement(); - - _modal.style.display = "none"; - _modal.id = "mailgo-tel"; - - _modal.classList.add("m-modal"); // background - - - var _modalBackground = createElement(); - - _modalBackground.className = "m-modal-back"; - - _modal.appendChild(_modalBackground); // modal content - - - var _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 ")); - var 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 ")); - var 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 ")); - var 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"); - var 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); + // 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); } - }; - /** - * mailgoRender - * function to render a mailgo (mail or tel) - */ - - - var mailgoRender = function mailgoRender() { - var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE; - var mailgo = arguments.length > 1 ? arguments[1] : undefined; - + // 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) => { // 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 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 = 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", function () { - return copy(tel); - }); - } // show the mailgo - - - showMailgo(type); // add listener keyDown - + 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 - - - var openGmail = function openGmail() { +}; +// actions +const 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 - + 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(); - }; - - var openOutlook = function openOutlook() { +}; +const 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 - + 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(); - }; - - var openDefault = function openDefault() { +}; +const openDefault = () => { mailToEncoded(encEmail); hideMailgo(); - }; - - var openTelegram = function openTelegram() { +}; +const openTelegram = () => { // Telegram url - var tgUrl = "https://t.me/" + telegramUsername; // open the url - - window.open(tgUrl, "_blank"); // hide the modal - + let 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 - +}; +const openSkype = () => { + let skype = skypeUsername !== "" ? skypeUsername : tel; + // Telegram url + let skypeUrl = "skype:" + skype; + // open the url + window.open(skypeUrl, "_blank"); + // hide the modal hideMailgo(); - }; - - var openWhatsApp = function openWhatsApp() { +}; +const 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 - + 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(); - }; - - var callDefault = function callDefault() { - var callUrl = "tel:" + tel; +}; +const callDefault = () => { + let callUrl = "tel:" + tel; window.open(callUrl); hideMailgo(); - }; - - var copy = function copy(content) { +}; +const copy = (content) => { copyToClipboard(content); - var activeCopy; // the correct copyButton (mail or tel) - - mailgoIsShowing(MAIL_TYPE) ? activeCopy = copyMail : activeCopy = copyTel; + let 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(); + setTimeout(() => { + 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 - +}; +// function that returns if an element is a mailgo +const isMailgo = (element, type = MAIL_TYPE) => { + let 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 - - + 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 ( + // 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) { +}; +/** + * 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) => { // 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 (!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); 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; - } - }); + path.forEach((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) { +}; +/** + * mailgoKeydown + * function to manage the keydown event when the modal is showing + */ +const 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; - } + 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 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; + setDisplay("mailgo", "flex"); + return; } - }; // hide the modal - - - var hideMailgo = function hideMailgo() { + // 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 - + 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() { +}; +// 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 - var by = createElement("a"); + let 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 = []; - +}; +// create element +const createElement = (element = "div") => document.createElement(element); +// create text node +const createTextNode = (element) => document.createTextNode(element); +// decrypt email +const mailToEncoded = (encoded) => (window.location.href = MAILTO + atob(encoded)); +// encode email +const encodeEmail = (email) => btoa(email); +// getE shorthand +const getE = (id) => document.getElementById(id); +// get display value +const getDisplay = (id) => getE(id).style.display; +// get display value +const setDisplay = (id, value) => (getE(id).style.display = value); +// custom composedPath if path or event.composedPath() are not defined +const composedPath = (el) => { + let path = []; while (el) { - path.push(el); - - if (el.tagName === "HTML") { - path.push(document); - path.push(window); - return path; - } - - el = el.parentElement; + 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"); +}; +// validate a single email with regex +const validateEmail = (email) => /^(([^<>()[\]\\.,;:\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) => arr.every(validateEmail); +// copy of a string +const copyToClipboard = (str) => { + let 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; + 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); + document.getSelection().removeAllRanges(); + document.getSelection().addRange(selected); } - }; // start mailgo - - - (function () { +}; +// start default mailgo +export const defaultMailgo = () => { // 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 the window object exists... + // mailgo style (gulp) + let 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 +}; +export const mailgo = () => { + // if the window is defined... + if (window && typeof window !== "undefined") { + // if the window object exists... + // mailgo style (gulp) + let 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); + mailgoInit(); + // event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered + document.addEventListener("click", mailgoCheckRender); + } +}; diff --git a/mailgo.ts b/mailgo.ts deleted file mode 100644 index f6a568e..0000000 --- a/mailgo.ts +++ /dev/null @@ -1,859 +0,0 @@ -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 e307e4f..e539a55 100644 --- a/src/mailgo.ts +++ b/src/mailgo.ts @@ -1,855 +1,852 @@ -const mailgoVersion: string = "MAILGO_VERSION"; - -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(`MAILGO_STYLE`)); - 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); - } - })(); +// 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); + } }; -// if mailgo is included as a script -if (window && typeof window !== "undefined") { - mailgo(); -} +/** + * 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() + ); -// export mailgo -export default mailgo; + 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 default mailgo +export const defaultMailgo = () => { + // 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(`MAILGO_STYLE`)); + 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); + } +}; + +export const 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(`MAILGO_STYLE`)); + document.head.appendChild(mailgoCSS); + + mailgoInit(); + + // event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered + document.addEventListener("click", mailgoCheckRender); + } +};