added the support to multiple to, cc and bcc!

dist/mailgo.css

@@ -59,7 +59,8 @@
   z-index: 10002;
   box-sizing: content-box;
   text-align: center;
-  width: 200px;
+  min-width: 200px;
+  max-width: 300px;
   background-color: #fff;
   border-radius: 6px;
   box-shadow: 0 2px 6px 0 rgba(10, 10, 10, 0.39);

dist/mailgo.js

@@ -6,7 +6,7 @@ var MAILTO = "mailto:"; // mailgo style (gulp)
 var mailgoCSS = document.createElement("style");
 mailgoCSS.id = "mailgo-style";
 mailgoCSS.type = "text/css";
-var mailgoCSSContent = document.createTextNode(".mailgo-modal p,\n.mailgo-modal span,\n.mailgo-modal strong,\n.mailgo-modal a {\n  margin: 0;\n  padding: 0;\n  font-size: 100%;\n  line-height: 1;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica,\n    Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\n.mailgo-modal strong {\n  font-weight: 700;\n}\n\n.mailgo-modal {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  overflow: hidden;\n  font-size: 15px;\n  z-index: 10000;\n}\n\n.mailgo-title {\n  display: block;\n  margin-bottom: 5px;\n}\n\n.mailgo-details {\n  margin-bottom: 10px;\n}\n\n.mailgo-details p {\n  font-size: 12px;\n  margin-top: 3px;\n  margin-bottom: 3px;\n}\n\n.mailgo-modal-background {\n  position: absolute;\n  z-index: 10001;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(10, 10, 10, 0.75);\n  opacity: 0.8;\n}\n\n.mailgo-modal-content {\n  position: relative;\n  z-index: 10002;\n  box-sizing: content-box;\n  text-align: center;\n  width: 200px;\n  background-color: #fff;\n  border-radius: 6px;\n  box-shadow: 0 2px 6px 0 rgba(10, 10, 10, 0.39);\n  color: #4a4a4a;\n  display: block;\n  overflow: auto;\n  padding: 1.25rem;\n}\n\n.mailgo-modal-content:hover {\n  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.23);\n}\n\n.mailgo-modal-content a {\n  display: block;\n  padding: 10px;\n  color: #4a4a4a;\n  border-radius: 4px;\n  text-decoration: none;\n}\n\n.mailgo-modal-content a.mailgo-gmail {\n  color: #d44638;\n}\n\n.mailgo-modal-content a.mailgo-outlook {\n  color: #0072c6;\n}\n\n.mailgo-modal-content a.mailgo-copy {\n  padding: 16px 10px;\n  font-size: 16px;\n}\n\n.mailgo-modal-content a.mailgo-default:hover,\n.mailgo-modal-content a.mailgo-copy:hover {\n  background-color: rgba(0, 0, 0, 0.08);\n  color: #4a4a4a;\n}\n\n.mailgo-modal-content a.mailgo-outlook:hover {\n  background-color: rgba(0, 114, 198, 0.08);\n  color: #0072c6;\n}\n\n.mailgo-modal-content a.mailgo-gmail:hover {\n  background-color: rgba(212, 70, 56, 0.08);\n  color: #d44638;\n}\n\n.mailgo-modal-content a.mailgo-by {\n  display: block;\n  font-size: 8px;\n  margin-top: 1rem;\n  padding: 0px;\n  color: #4a4a4a;\n  opacity: 0.5;\n}\n\n.mailgo-modal-content a.mailgo-by:hover {\n  opacity: 1;\n}\n\n.mailgo-weight-500 {\n  font-weight: 500;\n}\n");
+var mailgoCSSContent = document.createTextNode(".mailgo-modal p,\n.mailgo-modal span,\n.mailgo-modal strong,\n.mailgo-modal a {\n  margin: 0;\n  padding: 0;\n  font-size: 100%;\n  line-height: 1;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica,\n    Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\n.mailgo-modal strong {\n  font-weight: 700;\n}\n\n.mailgo-modal {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  overflow: hidden;\n  font-size: 15px;\n  z-index: 10000;\n}\n\n.mailgo-title {\n  display: block;\n  margin-bottom: 5px;\n}\n\n.mailgo-details {\n  margin-bottom: 10px;\n}\n\n.mailgo-details p {\n  font-size: 12px;\n  margin-top: 3px;\n  margin-bottom: 3px;\n}\n\n.mailgo-modal-background {\n  position: absolute;\n  z-index: 10001;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(10, 10, 10, 0.75);\n  opacity: 0.8;\n}\n\n.mailgo-modal-content {\n  position: relative;\n  z-index: 10002;\n  box-sizing: content-box;\n  text-align: center;\n  min-width: 200px;\n  max-width: 300px;\n  background-color: #fff;\n  border-radius: 6px;\n  box-shadow: 0 2px 6px 0 rgba(10, 10, 10, 0.39);\n  color: #4a4a4a;\n  display: block;\n  overflow: auto;\n  padding: 1.25rem;\n}\n\n.mailgo-modal-content:hover {\n  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.23);\n}\n\n.mailgo-modal-content a {\n  display: block;\n  padding: 10px;\n  color: #4a4a4a;\n  border-radius: 4px;\n  text-decoration: none;\n}\n\n.mailgo-modal-content a.mailgo-gmail {\n  color: #d44638;\n}\n\n.mailgo-modal-content a.mailgo-outlook {\n  color: #0072c6;\n}\n\n.mailgo-modal-content a.mailgo-copy {\n  padding: 16px 10px;\n  font-size: 16px;\n}\n\n.mailgo-modal-content a.mailgo-default:hover,\n.mailgo-modal-content a.mailgo-copy:hover {\n  background-color: rgba(0, 0, 0, 0.08);\n  color: #4a4a4a;\n}\n\n.mailgo-modal-content a.mailgo-outlook:hover {\n  background-color: rgba(0, 114, 198, 0.08);\n  color: #0072c6;\n}\n\n.mailgo-modal-content a.mailgo-gmail:hover {\n  background-color: rgba(212, 70, 56, 0.08);\n  color: #d44638;\n}\n\n.mailgo-modal-content a.mailgo-by {\n  display: block;\n  font-size: 8px;\n  margin-top: 1rem;\n  padding: 0px;\n  color: #4a4a4a;\n  opacity: 0.5;\n}\n\n.mailgo-modal-content a.mailgo-by:hover {\n  opacity: 1;\n}\n\n.mailgo-weight-500 {\n  font-weight: 500;\n}\n");
 mailgoCSS.appendChild(mailgoCSSContent);
 document.head.appendChild(mailgoCSS);
 /**
@@ -207,10 +207,10 @@ var mailgoRender = function mailgoRender(mailgo) {
   var openButton = getE("mailgo-open");
   var copyButton = getE("mailgo-copy"); // the title of the modal (email address)
 
-  titleEl.textContent = mail; // add the details if provided
+  titleEl.innerHTML = mail.split(",").join("<br/>"); // add the details if provided
 
-  cc ? (ccEl.style.display = "block", ccValueEl.textContent = cc) : ccEl.style.display = "none";
-  bcc ? (bccEl.style.display = "block", bccValueEl.textContent = bcc) : bccEl.style.display = "none";
+  cc ? (ccEl.style.display = "block", ccValueEl.innerHTML = cc.split(",").join("<br/>")) : ccEl.style.display = "none";
+  bcc ? (bccEl.style.display = "block", bccValueEl.innerHTML = bcc.split(",").join("<br/>")) : bccEl.style.display = "none";
   subject ? (subjectEl.style.display = "block", subjectValueEl.textContent = subject) : subjectEl.style.display = "none";
   bodyMail ? (bodyEl.style.display = "block", bodyValueEl.textContent = bodyMail) : bodyEl.style.display = "none"; // add the actions
 

dist/mailgo.min.css

@@ -1 +1 @@
-.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-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"}.mailgo-modal strong{font-weight:700}.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.mailgo-title{display:block;margin-bottom:5px}.mailgo-details{margin-bottom:10px}.mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal-background{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(10,10,10,.75);opacity:.8}.mailgo-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;width:200px;background-color:#fff;border-radius:6px;box-shadow:0 2px 6px 0 rgba(10,10,10,.39);color:#4a4a4a;display:block;overflow:auto;padding:1.25rem}.mailgo-modal-content:hover{box-shadow:0 6px 20px rgba(10,10,10,.23)}.mailgo-modal-content a{display:block;padding:10px;color:#4a4a4a;border-radius:4px;text-decoration:none}.mailgo-modal-content a.mailgo-gmail{color:#d44638}.mailgo-modal-content a.mailgo-outlook{color:#0072c6}.mailgo-modal-content a.mailgo-copy{padding:16px 10px;font-size:16px}.mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal-content a.mailgo-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.mailgo-modal-content a.mailgo-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.mailgo-modal-content a.mailgo-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;color:#4a4a4a;opacity:.5}.mailgo-modal-content a.mailgo-by:hover{opacity:1}.mailgo-weight-500{font-weight:500}
+.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-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"}.mailgo-modal strong{font-weight:700}.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.mailgo-title{display:block;margin-bottom:5px}.mailgo-details{margin-bottom:10px}.mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal-background{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(10,10,10,.75);opacity:.8}.mailgo-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;min-width:200px;max-width:300px;background-color:#fff;border-radius:6px;box-shadow:0 2px 6px 0 rgba(10,10,10,.39);color:#4a4a4a;display:block;overflow:auto;padding:1.25rem}.mailgo-modal-content:hover{box-shadow:0 6px 20px rgba(10,10,10,.23)}.mailgo-modal-content a{display:block;padding:10px;color:#4a4a4a;border-radius:4px;text-decoration:none}.mailgo-modal-content a.mailgo-gmail{color:#d44638}.mailgo-modal-content a.mailgo-outlook{color:#0072c6}.mailgo-modal-content a.mailgo-copy{padding:16px 10px;font-size:16px}.mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal-content a.mailgo-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.mailgo-modal-content a.mailgo-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.mailgo-modal-content a.mailgo-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;color:#4a4a4a;opacity:.5}.mailgo-modal-content a.mailgo-by:hover{opacity:1}.mailgo-weight-500{font-weight:500}

dist/mailgo.min.js

@@ -1 +1 @@
-"use strict";var V="0.6.2",MAILTO="mailto:",mailgoCSS=document.createElement("style");mailgoCSS.id="mailgo-style",mailgoCSS.type="text/css";var mailgoCSSContent=document.createTextNode('.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-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"}.mailgo-modal strong{font-weight:700}.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.mailgo-title{display:block;margin-bottom:5px}.mailgo-details{margin-bottom:10px}.mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal-background{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(10,10,10,.75);opacity:.8}.mailgo-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;width:200px;background-color:#fff;border-radius:6px;box-shadow:0 2px 6px 0 rgba(10,10,10,.39);color:#4a4a4a;display:block;overflow:auto;padding:1.25rem}.mailgo-modal-content:hover{box-shadow:0 6px 20px rgba(10,10,10,.23)}.mailgo-modal-content a{display:block;padding:10px;color:#4a4a4a;border-radius:4px;text-decoration:none}.mailgo-modal-content a.mailgo-gmail{color:#d44638}.mailgo-modal-content a.mailgo-outlook{color:#0072c6}.mailgo-modal-content a.mailgo-copy{padding:16px 10px;font-size:16px}.mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal-content a.mailgo-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.mailgo-modal-content a.mailgo-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.mailgo-modal-content a.mailgo-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;color:#4a4a4a;opacity:.5}.mailgo-modal-content a.mailgo-by:hover{opacity:1}.mailgo-weight-500{font-weight:500}');mailgoCSS.appendChild(mailgoCSSContent),document.head.appendChild(mailgoCSS);var mailgoInit=function(){var e=document.createElement("div");e.id="mailgo",e.classList.add("mailgo-modal"),e.style.display="none";var a=document.createElement("div");a.className="mailgo-modal-background",e.appendChild(a);var o=document.createElement("div");o.className="mailgo-modal-content",e.appendChild(o);var t=document.createElement("strong");t.id="mailgo-title",t.className="mailgo-title",o.appendChild(t);var n=document.createElement("div");n.id="mailgo-details",n.className="mailgo-details";var i=document.createElement("p");i.id="mailgo-cc";var l=document.createElement("span");l.className="mailgo-weight-500";var d=document.createTextNode("cc ");l.appendChild(d);var c=document.createElement("span");c.id="mailgo-cc-value",i.appendChild(l),i.appendChild(c),n.appendChild(i);var m=document.createElement("p");m.id="mailgo-bcc";var r=document.createElement("span");r.className="mailgo-weight-500";var s=document.createTextNode("bcc ");r.appendChild(s);var g=document.createElement("span");g.id="mailgo-bcc-value",m.appendChild(r),m.appendChild(g),n.appendChild(m);var p=document.createElement("p");p.id="mailgo-subject";var u=document.createElement("span");u.className="mailgo-weight-500";var h=document.createTextNode("subject ");u.appendChild(h);var v=document.createElement("span");v.id="mailgo-subject-value",p.appendChild(u),p.appendChild(v),n.appendChild(p);var b=document.createElement("p");b.id="mailgo-body";var f=document.createElement("span");f.className="mailgo-weight-500";var y=document.createTextNode("body ");f.appendChild(y);var C=document.createElement("span");C.id="mailgo-body-value",b.appendChild(f),b.appendChild(C),n.appendChild(b),o.appendChild(n);var E=document.createElement("a");E.id="mailgo-gmail",E.href="#mailgo-gmail",E.classList.add("mailgo-open"),E.classList.add("mailgo-gmail");var x=document.createTextNode("open in ");E.appendChild(x);var k=document.createElement("span");k.className="mailgo-weight-500";var w=document.createTextNode("Gmail");k.appendChild(w),E.appendChild(k),o.appendChild(E);var L=document.createElement("a");L.id="mailgo-outlook",L.href="#mailgo-outlook",L.classList.add("mailgo-open"),L.classList.add("mailgo-outlook");var N=document.createTextNode("open in ");L.appendChild(N);var S=document.createElement("span");S.className="mailgo-weight-500";var T=document.createTextNode("Outlook");S.appendChild(T),L.appendChild(S),o.appendChild(L);var A=document.createElement("a");A.id="mailgo-open",A.href="#mailgo-open",A.classList.add("mailgo-open"),A.classList.add("mailgo-default");var I=document.createElement("span");I.className="mailgo-weight-500";var R=document.createTextNode("open");I.appendChild(R);var M=document.createTextNode(" default");A.appendChild(I),A.appendChild(M),o.appendChild(A);var j=document.createElement("a");j.id="mailgo-copy",j.href="#mailgo-copy",j.classList.add("mailgo-copy")Line truncated
+"use strict";var V="0.6.2",MAILTO="mailto:",mailgoCSS=document.createElement("style");mailgoCSS.id="mailgo-style",mailgoCSS.type="text/css";var mailgoCSSContent=document.createTextNode('.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-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"}.mailgo-modal strong{font-weight:700}.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.mailgo-title{display:block;margin-bottom:5px}.mailgo-details{margin-bottom:10px}.mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal-background{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(10,10,10,.75);opacity:.8}.mailgo-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;min-width:200px;max-width:300px;background-color:#fff;border-radius:6px;box-shadow:0 2px 6px 0 rgba(10,10,10,.39);color:#4a4a4a;display:block;overflow:auto;padding:1.25rem}.mailgo-modal-content:hover{box-shadow:0 6px 20px rgba(10,10,10,.23)}.mailgo-modal-content a{display:block;padding:10px;color:#4a4a4a;border-radius:4px;text-decoration:none}.mailgo-modal-content a.mailgo-gmail{color:#d44638}.mailgo-modal-content a.mailgo-outlook{color:#0072c6}.mailgo-modal-content a.mailgo-copy{padding:16px 10px;font-size:16px}.mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal-content a.mailgo-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.mailgo-modal-content a.mailgo-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.mailgo-modal-content a.mailgo-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;color:#4a4a4a;opacity:.5}.mailgo-modal-content a.mailgo-by:hover{opacity:1}.mailgo-weight-500{font-weight:500}');mailgoCSS.appendChild(mailgoCSSContent),document.head.appendChild(mailgoCSS);var mailgoInit=function(){var e=document.createElement("div");e.id="mailgo",e.classList.add("mailgo-modal"),e.style.display="none";var a=document.createElement("div");a.className="mailgo-modal-background",e.appendChild(a);var o=document.createElement("div");o.className="mailgo-modal-content",e.appendChild(o);var t=document.createElement("strong");t.id="mailgo-title",t.className="mailgo-title",o.appendChild(t);var n=document.createElement("div");n.id="mailgo-details",n.className="mailgo-details";var i=document.createElement("p");i.id="mailgo-cc";var l=document.createElement("span");l.className="mailgo-weight-500";var d=document.createTextNode("cc ");l.appendChild(d);var c=document.createElement("span");c.id="mailgo-cc-value",i.appendChild(l),i.appendChild(c),n.appendChild(i);var m=document.createElement("p");m.id="mailgo-bcc";var r=document.createElement("span");r.className="mailgo-weight-500";var s=document.createTextNode("bcc ");r.appendChild(s);var g=document.createElement("span");g.id="mailgo-bcc-value",m.appendChild(r),m.appendChild(g),n.appendChild(m);var p=document.createElement("p");p.id="mailgo-subject";var u=document.createElement("span");u.className="mailgo-weight-500";var h=document.createTextNode("subject ");u.appendChild(h);var v=document.createElement("span");v.id="mailgo-subject-value",p.appendChild(u),p.appendChild(v),n.appendChild(p);var b=document.createElement("p");b.id="mailgo-body";var f=document.createElement("span");f.className="mailgo-weight-500";var y=document.createTextNode("body ");f.appendChild(y);var C=document.createElement("span");C.id="mailgo-body-value",b.appendChild(f),b.appendChild(C),n.appendChild(b),o.appendChild(n);var E=document.createElement("a");E.id="mailgo-gmail",E.href="#mailgo-gmail",E.classList.add("mailgo-open"),E.classList.add("mailgo-gmail");var x=document.createTextNode("open in ");E.appendChild(x);var k=document.createElement("span");k.className="mailgo-weight-500";var w=document.createTextNode("Gmail");k.appendChild(w),E.appendChild(k),o.appendChild(E);var L=document.createElement("a");L.id="mailgo-outlook",L.href="#mailgo-outlook",L.classList.add("mailgo-open"),L.classList.add("mailgo-outlook");var T=document.createTextNode("open in ");L.appendChild(T);var N=document.createElement("span");N.className="mailgo-weight-500";var S=document.createTextNode("Outlook");N.appendChild(S),L.appendChild(N),o.appendChild(L);var A=document.createElement("a");A.id="mailgo-open",A.href="#mailgo-open",A.classList.add("mailgo-open"),A.classList.add("mailgo-default");var I=document.createElement("span");I.className="mailgo-weight-500";var M=document.createTextNode("open");I.appendChild(M);var j=document.createTextNode(" default");A.appendChild(I),A.appendChild(j),o.appendChild(A);var R=document.createElement("a");R.id="mailgo-copy",R.href="#mailgo-copy",R.classLisLine truncated

mailgo.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.mailgo=t():e.mailgo=t()}(window,function(){return function(e){var t={};function o(a){if(t[a])return t[a].exports;var n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=e,o.c=t,o.d=function(e,t,a){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(a,n,function(t){return e[t]}.bind(null,n));return a},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";var a=document.createElement("style");a.id="mailgo-style",a.type="text/css";var n=document.createTextNode('.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-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"}.mailgo-modal strong{font-weight:700}.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.mailgo-title{display:block;margin-bottom:5px}.mailgo-details{margin-bottom:10px}.mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal-background{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(10,10,10,.75);opacity:.8}.mailgo-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;width:200px;background-color:#fff;border-radius:6px;box-shadow:0 2px 6px 0 rgba(10,10,10,.39);color:#4a4a4a;display:block;overflow:auto;padding:1.25rem}.mailgo-modal-content:hover{box-shadow:0 6px 20px rgba(10,10,10,.23)}.mailgo-modal-content a{display:block;padding:10px;color:#4a4a4a;border-radius:4px;text-decoration:none}.mailgo-modal-content a.mailgo-gmail{color:#d44638}.mailgo-modal-content a.mailgo-outlook{color:#0072c6}.mailgo-modal-content a.mailgo-copy{padding:16px 10px;font-size:16px}.mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal-content a.mailgo-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.mailgo-modal-content a.mailgo-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.mailgo-modal-content a.mailgo-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;color:#4a4a4a;opacity:.5}.mailgo-modal-content a.mailgo-by:hover{opacity:1}.mailgo-weight-500{font-weight:500}');a.appendChild(n),document.head.appendChild(a);var i={openGmail:function(e,t,o,a,n){var i="https://mail.google.com/mail/u/0/?view=cm&source=mailto&to="+encodeURIComponent(e);t&&(i=i.concat("&cc="+encodeURIComponent(t))),o&&(i=i.concat("&bcc="+encodeURIComponent(o))),a&&(i=i.concat("&subject="+a)),n&&(i=i.concat("&body="+n)),window.open(i,"_blank")},openOutlook:function(e,t,o){var a="https://outlook.live.com/owa/?path=/mail/action/compose&to="+encodeURIComponent(e);t&&(a=a.concat("&subject="+t)),o&&(a=a.concat("&body="+o)),window.open(a,"_blank")},openDefault:function(e){u(e)},copy:function(e,t){r(e),t.textContent="copied",setTimeout(function(){return t.textContent="copy"},999)}},l=function(e,t,o,a,n,l,d){if(s())switch(event.keyCode){case 27:p();break;case 71:i.openGmail(e,t,o,a,n);break;case 79:i.openOutlook(e,a,n);break;case 32:case 13:i.openDefault(l);break;case 67:i.copy(e,d);break;default:return}};document.addEventListener("DOMContentLoaded",function(){var e=document.createElement("div");e.id="mailgo",e.classList.add("mailgo-modal"),e.style.display="none";var t=document.createElement("div");t.className="mailgo-modal-background",e.appendChild(t);var o=document.createElement("div");o.className="mailgo-modal-content",e.appendChild(o);var a=document.createElement("strong");a.id="mailgo-title",a.className="mailgo-title",o.appendChild(a);var n=document.createElement("div");n.id="mailgo-details",n.className="mailgo-details";var i=document.createElement("p");i.id="mailgo-cc";var l=document.createElement("span");l.className="mailgo-weight-500";var d=document.createTextNode("cc ");l.appendChild(d);var c=document.createElement("span");c.id="mailgo-cc-value",i.appendChild(l),i.appendChild(c),n.appendChild(i);var r=document.createElement("p");r.id="mailgo-bcc";var m=document.createElement("span");m.className="mailgo-weight-500";var s=doLine 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 n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=e,o.c=t,o.d=function(e,t,a){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(a,n,function(t){return e[t]}.bind(null,n));return a},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";var a=document.createElement("style");a.id="mailgo-style",a.type="text/css";var n=document.createTextNode('.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-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"}.mailgo-modal strong{font-weight:700}.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.mailgo-title{display:block;margin-bottom:5px}.mailgo-details{margin-bottom:10px}.mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal-background{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(10,10,10,.75);opacity:.8}.mailgo-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;min-width:200px;max-width:300px;background-color:#fff;border-radius:6px;box-shadow:0 2px 6px 0 rgba(10,10,10,.39);color:#4a4a4a;display:block;overflow:auto;padding:1.25rem}.mailgo-modal-content:hover{box-shadow:0 6px 20px rgba(10,10,10,.23)}.mailgo-modal-content a{display:block;padding:10px;color:#4a4a4a;border-radius:4px;text-decoration:none}.mailgo-modal-content a.mailgo-gmail{color:#d44638}.mailgo-modal-content a.mailgo-outlook{color:#0072c6}.mailgo-modal-content a.mailgo-copy{padding:16px 10px;font-size:16px}.mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal-content a.mailgo-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.mailgo-modal-content a.mailgo-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.mailgo-modal-content a.mailgo-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;color:#4a4a4a;opacity:.5}.mailgo-modal-content a.mailgo-by:hover{opacity:1}.mailgo-weight-500{font-weight:500}');a.appendChild(n),document.head.appendChild(a);var i={openGmail:function(e,t,o,a,n){var i="https://mail.google.com/mail/u/0/?view=cm&source=mailto&to="+encodeURIComponent(e);t&&(i=i.concat("&cc="+encodeURIComponent(t))),o&&(i=i.concat("&bcc="+encodeURIComponent(o))),a&&(i=i.concat("&subject="+a)),n&&(i=i.concat("&body="+n)),window.open(i,"_blank")},openOutlook:function(e,t,o){var a="https://outlook.live.com/owa/?path=/mail/action/compose&to="+encodeURIComponent(e);t&&(a=a.concat("&subject="+t)),o&&(a=a.concat("&body="+o)),window.open(a,"_blank")},openDefault:function(e){u(e)},copy:function(e,t){r(e),t.textContent="copied",setTimeout(function(){return t.textContent="copy"},999)}},l=function(e,t,o,a,n,l,d){if(s())switch(event.keyCode){case 27:p();break;case 71:i.openGmail(e,t,o,a,n);break;case 79:i.openOutlook(e,a,n);break;case 32:case 13:i.openDefault(l);break;case 67:i.copy(e,d);break;default:return}};document.addEventListener("DOMContentLoaded",function(){var e=document.createElement("div");e.id="mailgo",e.classList.add("mailgo-modal"),e.style.display="none";var t=document.createElement("div");t.className="mailgo-modal-background",e.appendChild(t);var o=document.createElement("div");o.className="mailgo-modal-content",e.appendChild(o);var a=document.createElement("strong");a.id="mailgo-title",a.className="mailgo-title",o.appendChild(a);var n=document.createElement("div");n.id="mailgo-details",n.className="mailgo-details";var i=document.createElement("p");i.id="mailgo-cc";var l=document.createElement("span");l.className="mailgo-weight-500";var d=document.createTextNode("cc ");l.appendChild(d);var c=document.createElement("span");c.id="mailgo-cc-value",i.appendChild(l),i.appendChild(c),n.appendChild(i);var r=document.createElement("p");r.id="mailgo-bcc";var m=document.createElement("span");m.className="mailgo-Line truncated

src/mailgo.css

@@ -59,7 +59,8 @@
   z-index: 10002;
   box-sizing: content-box;
   text-align: center;
-  width: 200px;
+  min-width: 200px;
+  max-width: 300px;
   background-color: #fff;
   border-radius: 6px;
   box-shadow: 0 2px 6px 0 rgba(10, 10, 10, 0.39);

src/mailgo.js

@@ -252,15 +252,17 @@ const mailgoRender = mailgo => {
   let copyButton = getE("mailgo-copy");
 
   // the title of the modal (email address)
-  titleEl.textContent = mail;
+  titleEl.innerHTML = mail.split(",").join("<br/>");
 
   // add the details if provided
   cc
-    ? ((ccEl.style.display = "block"), (ccValueEl.textContent = cc))
+    ? ((ccEl.style.display = "block"),
+      (ccValueEl.innerHTML = cc.split(",").join("<br/>")))
     : (ccEl.style.display = "none");
 
   bcc
-    ? ((bccEl.style.display = "block"), (bccValueEl.textContent = bcc))
+    ? ((bccEl.style.display = "block"),
+      (bccValueEl.innerHTML = bcc.split(",").join("<br/>")))
     : (bccEl.style.display = "none");
 
   subject