working on dark mode as considered in ISSUE #41

lib/mailgo.js

@@ -325,7 +325,9 @@ var mailgo_mailgoInit = function mailgoInit(mailgoConfig) {
     modalMailto.classList.add("m-modal"); // if dark is in config
 
     if ((_config3 = config) === null || _config3 === void 0 ? void 0 : _config3.dark) {
-      modalMailto.classList.add("m-dark");
+      enableDarkMode(MAIL_TYPE);
+    } else {
+      disableDarkMode(MAIL_TYPE);
     } // background
 
 
@@ -447,7 +449,9 @@ var mailgo_mailgoInit = function mailgoInit(mailgoConfig) {
     modalTel.classList.add("m-modal"); // if dark is in config
 
     if ((_config4 = config) === null || _config4 === void 0 ? void 0 : _config4.dark) {
-      modalTel.classList.add("m-dark");
+      enableDarkMode(TEL_TYPE);
+    } else {
+      disableDarkMode(TEL_TYPE);
     } // background
 
 
@@ -553,16 +557,16 @@ var mailgo_mailgoInit = function mailgoInit(mailgoConfig) {
 
 var mailgoRender = function mailgoRender() {
   var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE;
-  var mailgo = arguments.length > 1 ? arguments[1] : undefined;
+  var mailgoElement = arguments.length > 1 ? arguments[1] : undefined;
 
   // mailgo mail
   if (type === MAIL_TYPE) {
     var _config5, _config6;
 
     // if the element href=^"mailto:"
-    if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) {
+    if (mailgoElement.href && mailgoElement.href.toLowerCase().startsWith(MAILTO)) {
-      mail = decodeURIComponent(mailgo.href.split("?")[0].split(MAILTO)[1].trim());
+      mail = decodeURIComponent(mailgoElement.href.split("?")[0].split(MAILTO)[1].trim());
-      url = new URL(mailgo.href);
+      url = new URL(mailgoElement.href);
       var urlParams = url.searchParams; // optional parameters for the email
 
       cc = urlParams.get("cc");
@@ -572,16 +576,16 @@ var mailgoRender = function mailgoRender() {
     } else {
       // if the element href="#mailgo" or class="mailgo"
       // mail = data-address + @ + data-domain
-      mail = mailgo.getAttribute("data-address") + "@" + mailgo.getAttribute("data-domain");
+      mail = mailgoElement.getAttribute("data-address") + "@" + mailgoElement.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
+      cc = mailgoElement.getAttribute("data-cc-address") + "@" + mailgoElement.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
+      bcc = mailgoElement.getAttribute("data-bcc-address") + "@" + mailgoElement.getAttribute("data-bcc-domain"); // subject = data-subject
 
-      subject = mailgo.getAttribute("data-subject"); // body = data-body
+      subject = mailgoElement.getAttribute("data-subject"); // body = data-body
 
-      bodyMail = mailgo.getAttribute("data-body");
+      bodyMail = mailgoElement.getAttribute("data-body");
     } // TODO test this
 
 
@@ -609,49 +613,53 @@ var mailgoRender = function mailgoRender() {
       return copy(mail);
     });
   } // mailgo tel
+  else if (type === TEL_TYPE) {
+      if (mailgoElement.href && mailgoElement.href.toLowerCase().startsWith(TEL)) {
+        tel = decodeURIComponent(mailgoElement.href.split("?")[0].split(TEL)[1].trim());
+      } else if (mailgoElement.href && mailgoElement.href.toLowerCase().startsWith(CALLTO)) {
+        tel = decodeURIComponent(mailgoElement.href.split("?")[0].split(CALLTO)[1].trim());
+      } else if (mailgoElement.hasAttribute("data-tel")) {
+        tel = mailgoElement.getAttribute("data-tel");
+        msg = mailgoElement.getAttribute("data-msg");
+      } // validate the phone number
 
 
-  if (type === TEL_TYPE) {
+      if (!validateTel(tel)) return; // Telegram username
-    if (mailgo.href && mailgo.href.toLowerCase().startsWith(TEL)) {
+
-      tel = decodeURIComponent(mailgo.href.split("?")[0].split(TEL)[1].trim());
+      if (mailgoElement.hasAttribute("data-telegram")) {
-    } else if (mailgo.href && mailgo.href.toLowerCase().startsWith(CALLTO)) {
+        telegramUsername = mailgoElement.getAttribute("data-telegram");
-      tel = decodeURIComponent(mailgo.href.split("?")[0].split(CALLTO)[1].trim());
+      } else {
-    } else if (mailgo.hasAttribute("data-tel")) {
+        telegramUsername = null;
-      tel = mailgo.getAttribute("data-tel");
+      } // Telegram username
-      msg = mailgo.getAttribute("data-msg");
-    } // validate the phone number
 
 
-    if (!validateTel(tel)) return; // Telegram username
+      if (mailgoElement.hasAttribute("data-skype")) {
-
+        skypeUsername = mailgoElement.getAttribute("data-skype");
-    if (mailgo.hasAttribute("data-telegram")) {
+      } // the title of the modal (tel)
-      telegramUsername = mailgo.getAttribute("data-telegram");
-    } else {
-      telegramUsername = null;
-    } // Telegram username
 
 
-    if (mailgo.hasAttribute("data-skype")) {
+      titleTel.innerHTML = tel; // add the actions to buttons
-      skypeUsername = mailgo.getAttribute("data-skype");
+
-    } // the title of the modal (tel)
+      wa.addEventListener("click", openWhatsApp); // telegram must be shown only if data-telegram is provided
+
+      if (telegramUsername) {
+        document.getElementById("m-tg").style.display = "block";
+        telegram.addEventListener("click", openTelegram);
+      } else {
+        document.getElementById("m-tg").style.display = "none";
+      }
+
+      skype.addEventListener("click", openSkype);
+      call.addEventListener("click", callDefault);
+      copyTel.addEventListener("click", function () {
+        return copy(tel);
+      });
+    } // dark mode as class of the element
+  // check only if is present to set the dark mode, because if the dark mode is set in config it have not to be disabled
 
 
-    titleTel.innerHTML = tel; // add the actions to buttons
+  if (mailgoElement.classList.contains("dark")) {
-
+    enableDarkMode(type);
-    wa.addEventListener("click", openWhatsApp); // telegram must be shown only if data-telegram is provided
-
-    if (telegramUsername) {
-      document.getElementById("m-tg").style.display = "block";
-      telegram.addEventListener("click", openTelegram);
-    } else {
-      document.getElementById("m-tg").style.display = "none";
-    }
-
-    skype.addEventListener("click", openSkype);
-    call.addEventListener("click", callDefault);
-    copyTel.addEventListener("click", function () {
-      return copy(tel);
-    });
   } // show the mailgo
 
 
@@ -961,6 +969,18 @@ var setModalDisplay = function setModalDisplay() {
   var ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE;
   var value = arguments.length > 1 ? arguments[1] : undefined;
   return getModalHTMLElement(ref).style.display = value;
+}; // enable dark mode
+
+
+var enableDarkMode = function enableDarkMode() {
+  var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE;
+  return getModalHTMLElement(type).classList.add("m-dark");
+}; // disable dark mode
+
+
+var disableDarkMode = function disableDarkMode() {
+  var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE;
+  return getModalHTMLElement(type).classList.remove("m-dark");
 }; // custom composedPath if path or event.composedPath() are not defined
 
 

src/mailgo.ts

@@ -395,16 +395,22 @@ const mailgoInit = (mailgoConfig?: MailgoConfig): void => {
  * mailgoRender
  * function to render a mailgo (mail or tel)
  */
-const mailgoRender = (type = MAIL_TYPE, mailgo: HTMLLinkElement): void => {
+const mailgoRender = (
+  type = MAIL_TYPE,
+  mailgoElement: HTMLLinkElement
+): void => {
   // mailgo mail
   if (type === MAIL_TYPE) {
     // if the element href=^"mailto:"
-    if (mailgo.href && mailgo.href.toLowerCase().startsWith(MAILTO)) {
+    if (
+      mailgoElement.href &&
+      mailgoElement.href.toLowerCase().startsWith(MAILTO)
+    ) {
       mail = decodeURIComponent(
-        mailgo.href.split("?")[0].split(MAILTO)[1].trim()
+        mailgoElement.href.split("?")[0].split(MAILTO)[1].trim()
       );
 
-      url = new URL(mailgo.href);
+      url = new URL(mailgoElement.href);
       let urlParams: URLSearchParams = url.searchParams;
 
       // optional parameters for the email
@@ -416,29 +422,29 @@ const mailgoRender = (type = MAIL_TYPE, mailgo: HTMLLinkElement): void => {
       // if the element href="#mailgo" or class="mailgo"
       // mail = data-address + @ + data-domain
       mail =
-        mailgo.getAttribute("data-address") +
+        mailgoElement.getAttribute("data-address") +
         "@" +
-        mailgo.getAttribute("data-domain");
+        mailgoElement.getAttribute("data-domain");
 
       url = new URL(MAILTO + encodeURIComponent(mail));
 
       // cc = data-cc-address + @ + data-cc-domain
       cc =
-        mailgo.getAttribute("data-cc-address") +
+        mailgoElement.getAttribute("data-cc-address") +
         "@" +
-        mailgo.getAttribute("data-cc-domain");
+        mailgoElement.getAttribute("data-cc-domain");
 
       // bcc = data-bcc-address + @ + data-bcc-domain
       bcc =
-        mailgo.getAttribute("data-bcc-address") +
+        mailgoElement.getAttribute("data-bcc-address") +
         "@" +
-        mailgo.getAttribute("data-bcc-domain");
+        mailgoElement.getAttribute("data-bcc-domain");
 
       // subject = data-subject
-      subject = mailgo.getAttribute("data-subject");
+      subject = mailgoElement.getAttribute("data-subject");
 
       // body = data-body
-      bodyMail = mailgo.getAttribute("data-body");
+      bodyMail = mailgoElement.getAttribute("data-body");
     }
 
     // TODO test this
@@ -489,31 +495,39 @@ const mailgoRender = (type = MAIL_TYPE, mailgo: HTMLLinkElement): void => {
     copyMail.addEventListener("click", () => copy(mail));
   }
   // mailgo tel
-  if (type === TEL_TYPE) {
+  else if (type === TEL_TYPE) {
-    if (mailgo.href && mailgo.href.toLowerCase().startsWith(TEL)) {
+    if (
-      tel = decodeURIComponent(mailgo.href.split("?")[0].split(TEL)[1].trim());
+      mailgoElement.href &&
-    } else if (mailgo.href && mailgo.href.toLowerCase().startsWith(CALLTO)) {
+      mailgoElement.href.toLowerCase().startsWith(TEL)
+    ) {
       tel = decodeURIComponent(
-        mailgo.href.split("?")[0].split(CALLTO)[1].trim()
+        mailgoElement.href.split("?")[0].split(TEL)[1].trim()
       );
-    } else if (mailgo.hasAttribute("data-tel")) {
+    } else if (
-      tel = mailgo.getAttribute("data-tel");
+      mailgoElement.href &&
-      msg = mailgo.getAttribute("data-msg");
+      mailgoElement.href.toLowerCase().startsWith(CALLTO)
+    ) {
+      tel = decodeURIComponent(
+        mailgoElement.href.split("?")[0].split(CALLTO)[1].trim()
+      );
+    } else if (mailgoElement.hasAttribute("data-tel")) {
+      tel = mailgoElement.getAttribute("data-tel");
+      msg = mailgoElement.getAttribute("data-msg");
     }
 
     // validate the phone number
     if (!validateTel(tel)) return;
 
     // Telegram username
-    if (mailgo.hasAttribute("data-telegram")) {
+    if (mailgoElement.hasAttribute("data-telegram")) {
-      telegramUsername = mailgo.getAttribute("data-telegram");
+      telegramUsername = mailgoElement.getAttribute("data-telegram");
     } else {
       telegramUsername = null;
     }
 
     // Telegram username
-    if (mailgo.hasAttribute("data-skype")) {
+    if (mailgoElement.hasAttribute("data-skype")) {
-      skypeUsername = mailgo.getAttribute("data-skype");
+      skypeUsername = mailgoElement.getAttribute("data-skype");
     }
 
     // the title of the modal (tel)
@@ -537,6 +551,12 @@ const mailgoRender = (type = MAIL_TYPE, mailgo: HTMLLinkElement): void => {
     copyTel.addEventListener("click", () => copy(tel));
   }
 
+  // dark mode as class of the element
+  // check only if is present to set the dark mode, because if the dark mode is set in config it have not to be disabled
+  if (mailgoElement.classList.contains("dark")) {
+    enableDarkMode(type);
+  }
+
   // show the mailgo
   showMailgo(type);