go on with typescript and ssr

dist/mailgo.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.mailgo=exports.defaultMailgo=void 0;var url,title,titleTel,detailCc,detailBcc,detailSubject,detailBody,ccValue,bccValue,subjectValue,bodyValue,gmail,outlook,open,telegram,wa,skype,call,copyMail,copyTel,MAILTO="mailto:",TEL="tel:",CALLTO="callto:",MAIL_TYPE="mail",TEL_TYPE="tel",DEFAULT_BTN_HREF="javascript:void(0);",span="span",mail="",encEmail="",cc="",bcc="",subject="",bodyMail="",tel="",msg="",telegramUsername="",skypeUsername="",mailgoInit=function(){var e=createElement();e.style.display="none",e.id="mailgo",e.classList.add("m-modal");var o=createElement();o.className="m-modal-back",e.appendChild(o);var t=createElement();t.className="m-modal-content",e.appendChild(t),(title=createElement("strong")).id="m-title",title.className="m-title",t.appendChild(title);var a=createElement();a.id="m-details",a.className="m-details",(detailCc=createElement("p")).id="m-cc";var l=createElement(span);l.className="w-500",l.appendChild(createTextNode("cc ")),(ccValue=createElement(span)).id="m-cc-value",detailCc.appendChild(l),detailCc.appendChild(ccValue),a.appendChild(detailCc),(detailBcc=createElement("p")).id="m-bcc";var i=createElement(span);i.className="w-500",i.appendChild(createTextNode("bcc ")),(bccValue=createElement(span)).id="m-bcc-value",detailBcc.appendChild(i),detailBcc.appendChild(bccValue),a.appendChild(detailBcc),(detailSubject=createElement("p")).id="m-subject";var n=createElement(span);n.className="w-500",n.appendChild(createTextNode("subject ")),(subjectValue=createElement(span)).id="m-subject-value",detailSubject.appendChild(n),detailSubject.appendChild(subjectValue),a.appendChild(detailSubject),(detailBody=createElement("p")).id="m-body";var d=createElement(span);d.className="w-500",d.appendChild(createTextNode("body ")),(bodyValue=createElement(span)).id="m-body-value",detailBody.appendChild(d),detailBody.appendChild(bodyValue),a.appendChild(detailBody),t.appendChild(a),(gmail=createElement("a")).id="m-gmail",gmail.href=DEFAULT_BTN_HREF,gmail.classList.add("m-open"),gmail.classList.add("m-gmail"),gmail.appendChild(createTextNode("open in "));var c=createElement(span);c.className="w-500",c.appendChild(createTextNode("Gmail")),gmail.appendChild(c),t.appendChild(gmail),(outlook=createElement("a")).id="m-outlook",outlook.href=DEFAULT_BTN_HREF,outlook.classList.add("m-open"),outlook.classList.add("m-outlook"),outlook.appendChild(createTextNode("open in "));var m=createElement(span);m.className="w-500",m.appendChild(createTextNode("Outlook")),outlook.appendChild(m),t.appendChild(outlook),(open=createElement("a")).id="m-open",open.href=DEFAULT_BTN_HREF,open.classList.add("m-open"),open.classList.add("m-default");var r=createElement(span);r.className="w-500",r.appendChild(createTextNode("open")),open.appendChild(r),open.appendChild(createTextNode(" default")),t.appendChild(open),(copyMail=createElement("a")).id="m-copy",copyMail.href=DEFAULT_BTN_HREF,copyMail.classList.add("m-copy"),copyMail.classList.add("w-500"),copyMail.appendChild(createTextNode("copy")),t.appendChild(copyMail),t.appendChild(byElement()),document.body.appendChild(e),o.addEventListener("click",hideMailgo);var s=createElement();s.style.display="none",s.id="mailgo-tel",s.classList.add("m-modal");var p=createElement();p.className="m-modal-back",s.appendChild(p);var b=createElement();b.className="m-modal-content",s.appendChild(b),(titleTel=createElement("strong")).id="m-tel-title",titleTel.className="m-title",b.appendChild(titleTel),(telegram=createElement("a")).id="m-tg",telegram.href=DEFAULT_BTN_HREF,telegram.classList.add("m-open"),telegram.classList.add("m-tg"),telegram.style.display="none",telegram.appendChild(createTextNode("open in "));var g=createElement(span);g.className="w-500",g.appendChild(createTextNode("Telegram")),telegram.appendChild(g),b.appendChild(telegram),(wa=createElement("a")).id="m-wa",wa.href=DEFAULT_BTN_HREF,wa.classList.add("m-open"),wa.classList.add("m-wa"),wa.appendChild(createTextNode("open in "));var u=createElement(span);u.className="w-500",u.appendChild(createTextNode("WhatsApp")),wa.appendChild(u),b.appendChild(wa),(skype=createElement("a")).id="m-skype",skype.href=DEFAULT_BTN_HREF,skype.classList.add("m-open"),skype.classList.add("m-skype"),skype.appendChild(createTextNode("open in "));var h=createElement(span);h.className="w-500",h.appendChild(createTextNode("Skype")),skype.appendChild(h),b.appendChild(skype),(call=createElement("a")).id="m-call",call.href=DEFAULT_BTN_HREF,call.classList.add("m-open"),call.classList.add("m-default");var x=createElement(span);x.className="w-500",x.appendChild(createTextNode("call")),call.appendChild(x),call.appendChild(createTextNode(" as default")),b.appendChild(call),(copyTel=createElement("a")).id="m-tel-copy",copyTel.href=DEFAULT_BTN_HREF,copyTel.classList.add("m-copy"),copyTel.classList.add("w-500"),copyTel.appendChild(createTextNode("copy")),b.appendChild(copyTel),b.appendChild(byElement()),Line truncated
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.mailgo=t():e.mailgo=t()}(window,(function(){return function(e){var t={};function o(a){if(t[a])return t[a].exports;var l=t[a]={i:a,l:!1,exports:{}};return e[a].call(l.exports,l,l.exports,o),l.l=!0,l.exports}return o.m=e,o.c=t,o.d=function(e,t,a){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(a,l,function(t){return e[t]}.bind(null,l));return a},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";o.r(t);const a="javascript:void(0);",l="span";let n,d,i,s,m,c,r,p,b,u,h,f,g,x,w,y,C,k,v,L,z="",j="",A="",E="",N="",S="",R="",U="",I="",M="";const _=()=>{{let e=X();e.style.display="none",e.id="mailgo",e.classList.add("m-modal");let t=X();t.className="m-modal-back",e.appendChild(t);let o=X();o.className="m-modal-content",e.appendChild(o),d=X("strong"),d.id="m-title",d.className="m-title",o.appendChild(d);let n=X();n.id="m-details",n.className="m-details",s=X("p"),s.id="m-cc";let i=X(l);i.className="w-500",i.appendChild(Y("cc ")),p=X(l),p.id="m-cc-value",s.appendChild(i),s.appendChild(p),n.appendChild(s),m=X("p"),m.id="m-bcc";let w=X(l);w.className="w-500",w.appendChild(Y("bcc ")),b=X(l),b.id="m-bcc-value",m.appendChild(w),m.appendChild(b),n.appendChild(m),c=X("p"),c.id="m-subject";let y=X(l);y.className="w-500",y.appendChild(Y("subject ")),u=X(l),u.id="m-subject-value",c.appendChild(y),c.appendChild(u),n.appendChild(c),r=X("p"),r.id="m-body";let C=X(l);C.className="w-500",C.appendChild(Y("body ")),h=X(l),h.id="m-body-value",r.appendChild(C),r.appendChild(h),n.appendChild(r),o.appendChild(n),f=X("a"),f.id="m-gmail",f.href=a,f.classList.add("m-open"),f.classList.add("m-gmail"),f.appendChild(Y("open in "));let k=X(l);k.className="w-500",k.appendChild(Y("Gmail")),f.appendChild(k),o.appendChild(f),g=X("a"),g.id="m-outlook",g.href=a,g.classList.add("m-open"),g.classList.add("m-outlook"),g.appendChild(Y("open in "));let L=X(l);L.className="w-500",L.appendChild(Y("Outlook")),g.appendChild(L),o.appendChild(g),x=X("a"),x.id="m-open",x.href=a,x.classList.add("m-open"),x.classList.add("m-default");let z=X(l);z.className="w-500",z.appendChild(Y("open")),x.appendChild(z),x.appendChild(Y(" default")),o.appendChild(x),v=X("a"),v.id="m-copy",v.href=a,v.classList.add("m-copy"),v.classList.add("w-500"),v.appendChild(Y("copy")),o.appendChild(v),o.appendChild(V()),document.body.appendChild(e),t.addEventListener("click",K)}{let e=X();e.style.display="none",e.id="mailgo-tel",e.classList.add("m-modal");let t=X();t.className="m-modal-back",e.appendChild(t);let o=X();o.className="m-modal-content",e.appendChild(o),i=X("strong"),i.id="m-tel-title",i.className="m-title",o.appendChild(i),w=X("a"),w.id="m-tg",w.href=a,w.classList.add("m-open"),w.classList.add("m-tg"),w.style.display="none",w.appendChild(Y("open in "));let n=X(l);n.className="w-500",n.appendChild(Y("Telegram")),w.appendChild(n),o.appendChild(w),y=X("a"),y.id="m-wa",y.href=a,y.classList.add("m-open"),y.classList.add("m-wa"),y.appendChild(Y("open in "));let d=X(l);d.className="w-500",d.appendChild(Y("WhatsApp")),y.appendChild(d),o.appendChild(y),C=X("a"),C.id="m-skype",C.href=a,C.classList.add("m-open"),C.classList.add("m-skype"),C.appendChild(Y("open in "));let s=X(l);s.className="w-500",s.appendChild(Y("Skype")),C.appendChild(s),o.appendChild(C),k=X("a"),k.id="m-call",k.href=a,k.classList.add("m-open"),k.classList.add("m-default");let m=X(l);m.className="w-500",m.appendChild(Y("call")),k.appendChild(m),k.appendChild(Y(" as default")),o.appendChild(k),L=X("a"),L.id="m-tel-copy",L.href=a,L.classList.add("m-copy"),L.classList.add("w-500"),L.appendChild(Y("copy")),o.appendChild(L),o.appendChild(V()),document.body.appendChild(e),t.addEventListener("click",K)}},T=(e="mail",t)=>{if("mail"===e){if(t.href&&t.href.toLowerCase().startsWith("mailto:")){z=decodeURIComponent(t.href.split("?")[0].split("mailto:")[1].trim()),n=new URL(t.href);let e=n.searchParams;A=e.get("cc"),E=e.get("bcc"),N=e.get("subject"),S=e.get("body")}else z=t.getAttribute("data-address")+"@"+t.getAttribute("data-domain"),n=new URL("mailto:"+encodeURIComponent(z)),A=t.getAttribute("data-cc-address")+"@"+t.getAttribute("data-cc-domain"),E=t.getAttribute("data-bcc-address")+"@"+t.getAttribute("data-bcc-domain"),N=t.getAttribute("data-subject"),S=t.getAttribute("data-body"Line truncated

gulpfile.js

@@ -1,4 +1,4 @@
-const { src, dest, parallel, series } = require("gulp");
+const { src, dest, series } = require("gulp");
 
 const ts = require("gulp-typescript");
 const tsProject = ts.createProject("tsconfig.json");
@@ -16,8 +16,6 @@ const babel = require("gulp-babel");
 
 const fs = require("fs");
 
-let version = require("./package.json").version;
-
 function style() {
   return src("src/*.scss")
     .pipe(sass().on("error", sass.logError))

mailgo.js

@@ -651,17 +651,20 @@ const copyToClipboard = (str) => {
         document.getSelection().addRange(selected);
     }
 };
+const mailgoStyle = () => {
+    // mailgo style
+    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);
+};
 // start default mailgo
-export const defaultMailgo = () => {
+export const mailgoDOMContentLoaded = () => {
     // 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);
+        // add the style for mailgo
+        mailgoStyle();
         // 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
@@ -671,13 +674,9 @@ export const defaultMailgo = () => {
 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);
+        // add the style for mailgo
+        mailgoStyle();
+        // mailgo init
         mailgoInit();
         // event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered
         document.addEventListener("click", mailgoCheckRender);

src/mailgo.script.js

@@ -0,0 +1,2 @@
+import { mailgoDOMContentLoaded } from "../mailgo";
+mailgoDOMContentLoaded();

src/mailgo.ts

@@ -813,17 +813,21 @@ const copyToClipboard = (str: string) => {
   }
 };
 
+const mailgoStyle = () => {
+  // mailgo style
+  let mailgoCSS: HTMLStyleElement = <HTMLStyleElement>createElement("style");
+  mailgoCSS.id = "mailgo-style";
+  mailgoCSS.type = "text/css";
+  mailgoCSS.appendChild(createTextNode(`MAILGO_STYLE`));
+  document.head.appendChild(mailgoCSS);
+};
+
 // start default mailgo
-export const defaultMailgo = () => {
+export const mailgoDOMContentLoaded = () => {
   // if the window is defined...
   if (window && typeof window !== "undefined") {
-    // if the window object exists...
-    // mailgo style (gulp)
-    let mailgoCSS: HTMLStyleElement = <HTMLStyleElement>createElement("style");
-    mailgoCSS.id = "mailgo-style";
-    mailgoCSS.type = "text/css";
-    mailgoCSS.appendChild(createTextNode(`MAILGO_STYLE`));
-    document.head.appendChild(mailgoCSS);
+    // add the style for mailgo
+    mailgoStyle();
 
     // DOMContentLoaded -> mailgoInit (creates the modals)
     document.addEventListener("DOMContentLoaded", mailgoInit);
@@ -836,14 +840,10 @@ export const defaultMailgo = () => {
 export const mailgo = () => {
   // if the window is defined...
   if (window && typeof window !== "undefined") {
-    // if the window object exists...
-    // mailgo style (gulp)
-    let mailgoCSS: HTMLStyleElement = <HTMLStyleElement>createElement("style");
-    mailgoCSS.id = "mailgo-style";
-    mailgoCSS.type = "text/css";
-    mailgoCSS.appendChild(createTextNode(`MAILGO_STYLE`));
-    document.head.appendChild(mailgoCSS);
+    // add the style for mailgo
+    mailgoStyle();
 
+    // mailgo init
     mailgoInit();
 
     // event listener on body, if the element is mailgo-compatible the mailgo modal will be rendered

webpack.config.js

@@ -3,9 +3,9 @@ const path = require("path");
 module.exports = [
   {
     mode: "production",
-    entry: "./dist/mailgo.min.js",
+    entry: "./src/mailgo.script.js",
     output: {
-      filename: "mailgo.js",
+      filename: "./dist/mailgo.min.js",
       path: path.resolve(__dirname),
       library: "mailgo",
       libraryTarget: "umd",