working on dark mode as considered in ISSUE #41
This commit is contained in:
Matteo Manzinello
parent
af8eb662ef
commit
0249c109be
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
112
lib/mailgo.js
112
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)) {
|
||||
mail = decodeURIComponent(mailgo.href.split("?")[0].split(MAILTO)[1].trim());
|
||||
url = new URL(mailgo.href);
|
||||
if (mailgoElement.href && mailgoElement.href.toLowerCase().startsWith(MAILTO)) {
|
||||
mail = decodeURIComponent(mailgoElement.href.split("?")[0].split(MAILTO)[1].trim());
|
||||
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 (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");
|
||||
} // validate the phone number
|
||||
if (!validateTel(tel)) return; // Telegram username
|
||||
|
||||
if (mailgoElement.hasAttribute("data-telegram")) {
|
||||
telegramUsername = mailgoElement.getAttribute("data-telegram");
|
||||
} else {
|
||||
telegramUsername = null;
|
||||
} // Telegram username
|
||||
|
||||
|
||||
if (!validateTel(tel)) return; // Telegram username
|
||||
|
||||
if (mailgo.hasAttribute("data-telegram")) {
|
||||
telegramUsername = mailgo.getAttribute("data-telegram");
|
||||
} else {
|
||||
telegramUsername = null;
|
||||
} // Telegram username
|
||||
if (mailgoElement.hasAttribute("data-skype")) {
|
||||
skypeUsername = mailgoElement.getAttribute("data-skype");
|
||||
} // the title of the modal (tel)
|
||||
|
||||
|
||||
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); // 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
|
||||
|
||||
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);
|
||||
});
|
||||
if (mailgoElement.classList.contains("dark")) {
|
||||
enableDarkMode(type);
|
||||
} // 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
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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) {
|
||||
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)) {
|
||||
else if (type === TEL_TYPE) {
|
||||
if (
|
||||
mailgoElement.href &&
|
||||
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")) {
|
||||
tel = mailgo.getAttribute("data-tel");
|
||||
msg = mailgo.getAttribute("data-msg");
|
||||
} 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 (!validateTel(tel)) return;
|
||||
|
||||
// Telegram username
|
||||
if (mailgo.hasAttribute("data-telegram")) {
|
||||
telegramUsername = mailgo.getAttribute("data-telegram");
|
||||
if (mailgoElement.hasAttribute("data-telegram")) {
|
||||
telegramUsername = mailgoElement.getAttribute("data-telegram");
|
||||
} else {
|
||||
telegramUsername = null;
|
||||
}
|
||||
|
||||
// Telegram username
|
||||
if (mailgo.hasAttribute("data-skype")) {
|
||||
skypeUsername = mailgo.getAttribute("data-skype");
|
||||
if (mailgoElement.hasAttribute("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);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue