FIX issue z-index Safari

dist/mailgo.css

@@ -24,7 +24,6 @@
   align-items: center;
   flex-direction: column;
   overflow: hidden;
-  z-index: 100000;
   font-size: 15px;
 }
 
@@ -45,6 +44,7 @@
 
 .mailgo-modal-background {
   position: absolute;
+  z-index: 1000;
   top: 0;
   right: 0;
   bottom: 0;
@@ -54,7 +54,8 @@
 }
 
 .mailgo-modal-content {
-  z-index: 1000;
+  position: relative;
+  z-index: 1001;
   box-sizing: content-box;
   text-align: center;
   width: 200px;

dist/mailgo.js

@@ -185,7 +185,7 @@ mailgoRender = mailgo => {
     subject = "",
     bodyMail = "";
 
-  // mailgo all the element with href=^"mailto:"
+  // if the element href=^"mailto:"
   if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) {
     mail = decodeURIComponent(
       mailgo.href
@@ -204,7 +204,7 @@ mailgoRender = mailgo => {
     subject = urlParams.get("subject");
     bodyMail = urlParams.get("body");
   } else {
-    // mailgo all the element with href="#mailgo" or class="mailgo"
+    // if the element href="#mailgo" or class="mailgo"
     // email = data-address + @ + data-domain
     mail =
       mailgo.getAttribute("data-address") +
@@ -217,6 +217,7 @@ mailgoRender = mailgo => {
   // validate the email address
   if (!validateEmail(mail)) return;
 
+  // information
   titleEl = getE("mailgo-title");
   detailsEl = getE("mailgo-details");
   ccEl = getE("mailgo-cc");
@@ -228,22 +229,34 @@ mailgoRender = mailgo => {
   bodyEl = getE("mailgo-body");
   bodyValueEl = getE("mailgo-body-value");
 
+  // actions
   gmailButton = getE("mailgo-gmail");
   outlookButton = getE("mailgo-outlook");
   openButton = getE("mailgo-open");
   copyButton = getE("mailgo-copy");
 
+  // the title of the modal (email address)
   titleEl.textContent = mail;
 
-  cc ? (ccValueEl.textContent = cc) : (ccEl.style.display = "none");
+  // add the details if provided
-  bcc ? (bccValueEl.textContent = bcc) : (bccEl.style.display = "none");
+  cc
+    ? ((ccEl.style.display = "block"), (ccValueEl.textContent = cc))
+    : (ccEl.style.display = "none");
+
+  bcc
+    ? ((bccEl.style.display = "block"), (bccValueEl.textContent = bcc))
+    : (bccEl.style.display = "none");
+
   subject
-    ? (subjectValueEl.textContent = subject)
+    ? ((subjectEl.style.display = "block"),
+      (subjectValueEl.textContent = subject))
     : (subjectEl.style.display = "none");
+
   bodyMail
-    ? (bodyValueEl.textContent = bodyMail)
+    ? ((bodyEl.style.display = "block"), (bodyValueEl.textContent = bodyMail))
     : (bodyEl.style.display = "none");
 
+  // add the actions
   gmailButton.href =
     "https://mail.google.com/mail?extsrc=mailto&url=" +
     encodeURIComponent(mailtoHref);
@@ -274,15 +287,21 @@ mailgoRender = mailgo => {
     false
   );
 
+  // show the mailgo
   showMailgo();
 };
 
+/**
+ * mailgoCheckRender
+ * function to check if an element is mailgo-enabled or not referencing to the old
+ * document.querySelectorAll(
+ *   'a[href^="mailto:" i]:not(.no-mailgo), a[href="#mailgo"], a.mailgo'
+ * );
+ */
 mailgoCheckRender = event => {
   // the target element
   let e = event.target;
 
-  console.log(e);
-
   // check if the id=mailgo exists in the body
   if (!document.body.contains(getE("mailgo"))) return;
 

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;z-index:100000;font-size:15px}.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;top:0;right:0;bottom:0;left:0;background-color:rgba(10,10,10,.75);opacity:.8}.mailgo-modal-content{z-index:1000;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;color:#4a4a4a;border-radius:4px;text-decoration:none;padding:10px}.mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal-content a.mailgo-open:hover{background-color:rgba(0,0,0,.08)}.mailgo-modal-content a.outlook{color:#0072c6}.mailgo-modal-content a.gmail{color:#d44638}.mailgo-modal-content a.outlook:hover{background-color:rgba(0,114,198,.08)}.mailgo-modal-content a.gmail:hover{background-color:rgba(212,70,56,.08)}.mailgo-modal-content a.mailgo-copy{padding:16px 10px}.mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;font-style:italic}.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}.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:1000;top:0;right:0;bottom:0;left:0;background-color:rgba(10,10,10,.75);opacity:.8}.mailgo-modal-content{position:relative;z-index:1001;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;color:#4a4a4a;border-radius:4px;text-decoration:none;padding:10px}.mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal-content a.mailgo-open:hover{background-color:rgba(0,0,0,.08)}.mailgo-modal-content a.outlook{color:#0072c6}.mailgo-modal-content a.gmail{color:#d44638}.mailgo-modal-content a.outlook:hover{background-color:rgba(0,114,198,.08)}.mailgo-modal-content a.gmail:hover{background-color:rgba(212,70,56,.08)}.mailgo-modal-content a.mailgo-copy{padding:16px 10px}.mailgo-modal-content a.mailgo-by{display:block;font-size:8px;margin-top:1rem;padding:0;font-style:italic}.mailgo-weight-500{font-weight:500}

src/mailgo.css

@@ -24,7 +24,6 @@
   align-items: center;
   flex-direction: column;
   overflow: hidden;
-  z-index: 100000;
   font-size: 15px;
 }
 
@@ -45,6 +44,7 @@
 
 .mailgo-modal-background {
   position: absolute;
+  z-index: 1000;
   top: 0;
   right: 0;
   bottom: 0;
@@ -54,7 +54,8 @@
 }
 
 .mailgo-modal-content {
-  z-index: 1000;
+  position: relative;
+  z-index: 1001;
   box-sizing: content-box;
   text-align: center;
   width: 200px;