Merge branch 'master' into patch-1
This commit is contained in:
commit
8081d73c62
2
dist/mailgo.dark.min.js
vendored
2
dist/mailgo.dark.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mailgo.dark.min.js.map
vendored
2
dist/mailgo.dark.min.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/mailgo.min.js
vendored
2
dist/mailgo.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mailgo.min.js.map
vendored
2
dist/mailgo.min.js.map
vendored
File diff suppressed because one or more lines are too long
58
examples/index.fr.html
Normal file
58
examples/index.fr.html
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Exemples Mailgo</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>mailto:</h1>
|
||||||
|
|
||||||
|
<a href="mailto:matteo@manzinello.dev">matteo@manzinello.dev</a>
|
||||||
|
<br />
|
||||||
|
<a href="mailto:matteo@manzinello.dev?cc=matteomanzinello@gmail.com"
|
||||||
|
><p>matteo@manzinello.dev</p></a
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<a href="mailto:matteo@manzinello.dev,matteomanzinello@gmail.com?cc=Salut"
|
||||||
|
>matteo@manzinello.dev</a
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<a href="mailto:matteo@manzinello.dev?subject=ciao">Salut</a>
|
||||||
|
<br />
|
||||||
|
<a href="" class="mailgo" data-address="matteo" data-domain="manzinello.dev"
|
||||||
|
>M'écrire!</a
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<a href="#mailgo" data-address="matteo" data-domain="manzinello.dev"
|
||||||
|
>M'écrire!</a
|
||||||
|
>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#mailgo"
|
||||||
|
data-address="matteo"
|
||||||
|
data-domain="manzinello.dev"
|
||||||
|
data-cc="matteomanzinello@gmail.com,m@m.it"
|
||||||
|
>En copie</a
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<a
|
||||||
|
href="mailto:matteo@manzinello.dev?cc=matteomanzinello@gmail.com&bcc=test"
|
||||||
|
>matteo@manzinello.dev</a
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<a class="dark" href="mailto:matteo@manzinello.dev"
|
||||||
|
>matteo@manzinello.dev dark mode</a
|
||||||
|
>
|
||||||
|
|
||||||
|
<h1>tel :</h1>
|
||||||
|
<a href="#mailgo" data-tel="123456568" data-telegram="telegram">chiamami</a>
|
||||||
|
<br />
|
||||||
|
<a href="tel:+39 123-456-78">skype</a>
|
||||||
|
<br />
|
||||||
|
<a href="callto:+39 123-456-78">callto</a>
|
||||||
|
|
||||||
|
<a class="dark" href="callto:+39 123-456-78">callto dark mode</a>
|
||||||
|
|
||||||
|
<script src="../dist/mailgo.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"languages": ["en", "it", "es", "de", "pt"],
|
"languages": ["en", "it", "es", "de", "fr", "pt"],
|
||||||
"translations": {
|
"translations": {
|
||||||
"en": {
|
"en": {
|
||||||
"open_in_": "open in ",
|
"open_in_": "open in ",
|
||||||
@ -75,16 +75,27 @@
|
|||||||
"bcc_": "cco ",
|
"bcc_": "cco ",
|
||||||
"subject_": "assunto ",
|
"subject_": "assunto ",
|
||||||
"body_": "corpo ",
|
"body_": "corpo ",
|
||||||
"gmail": "Gmail",
|
|
||||||
"outlook": "Outlook",
|
|
||||||
"telegram": "Telegram",
|
|
||||||
"whatsapp": "WhatsApp",
|
|
||||||
"skype": "Skype",
|
|
||||||
"call": "ligar",
|
"call": "ligar",
|
||||||
"open": "abrir",
|
"open": "abrir",
|
||||||
"_default": " padrão",
|
"_default": " padrão",
|
||||||
"_as_default": " por padrão",
|
"_as_default": " por padrão",
|
||||||
"copy": "copiar"
|
"copy": "copiar"
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"open_in_": "Ouvrir dans ",
|
||||||
|
"cc_": "cc ",
|
||||||
|
"bcc_": "cci ",
|
||||||
|
"subject_": "sujet ",
|
||||||
|
"body_": "contenu ",
|
||||||
|
"gmail": "Gmail",
|
||||||
|
"outlook": "Outlook",
|
||||||
|
"telegram": "Telegram",
|
||||||
|
"whatsapp": "WhatsApp",
|
||||||
|
"skype": "Skype",
|
||||||
|
"call": "Appeler",
|
||||||
|
"open": "Ouvrir",
|
||||||
|
"_default": " par défaut",
|
||||||
|
"_as_default": " par défaut",
|
||||||
|
"copy": "Copier"
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||||||
/* 0 */
|
/* 0 */
|
||||||
/***/ (function(module) {
|
/***/ (function(module) {
|
||||||
|
|
||||||
module.exports = JSON.parse("{\"languages\":[\"en\",\"it\",\"es\",\"de\"],\"translations\":{\"en\":{\"open_in_\":\"open in \",\"cc_\":\"cc \",\"bcc_\":\"bcc \",\"subject_\":\"subject \",\"body_\":\"body \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"call\",\"open\":\"open\",\"_default\":\" default\",\"_as_default\":\" as default\",\"copy\":\"copy\"},\"it\":{\"open_in_\":\"apri con \",\"cc_\":\"cc \",\"bcc_\":\"ccn \",\"subject_\":\"oggetto \",\"body_\":\"testo \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"chiama\",\"open\":\"apri\",\"_default\":\" \",\"_as_default\":\" \",\"copy\":\"copia\"},\"es\":{\"open_in_\":\"abrir con \",\"cc_\":\"cc \",\"bcc_\":\"cco \",\"subject_\":\"asunto \",\"body_\":\"cuerpo \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"llamar\",\"open\":\"abrir\",\"_default\":\" predefinido\",\"_as_default\":\" por defecto\",\"copy\":\"copiar\"},\"de\":{\"open_in_\":\"Öffnen in \",\"cc_\":\"cc \",\"bcc_\":\"bcc \",\"subject_\":\"Betreff \",\"body_\":\"Nachricht \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"Anrufen\",\"open\":\"Öffnen\",\"_default\":\" mit Standard\",\"_as_default\":\" mit Standard\",\"copy\":\"kopieren\"}}}");
|
module.exports = JSON.parse("{\"languages\":[\"en\",\"it\",\"es\",\"de\",\"fr\"],\"translations\":{\"en\":{\"open_in_\":\"open in \",\"cc_\":\"cc \",\"bcc_\":\"bcc \",\"subject_\":\"subject \",\"body_\":\"body \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"call\",\"open\":\"open\",\"_default\":\" default\",\"_as_default\":\" as default\",\"copy\":\"copy\"},\"it\":{\"open_in_\":\"apri con \",\"cc_\":\"cc \",\"bcc_\":\"ccn \",\"subject_\":\"oggetto \",\"body_\":\"testo \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"chiama\",\"open\":\"apri\",\"_default\":\" \",\"_as_default\":\" \",\"copy\":\"copia\"},\"es\":{\"open_in_\":\"abrir con \",\"cc_\":\"cc \",\"bcc_\":\"cco \",\"subject_\":\"asunto \",\"body_\":\"cuerpo \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"llamar\",\"open\":\"abrir\",\"_default\":\" predefinido\",\"_as_default\":\" por defecto\",\"copy\":\"copiar\"},\"de\":{\"open_in_\":\"Öffnen in \",\"cc_\":\"cc \",\"bcc_\":\"bcc \",\"subject_\":\"Betreff \",\"body_\":\"Nachricht \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"Anrufen\",\"open\":\"Öffnen\",\"_default\":\" mit Standard\",\"_as_default\":\" mit Standard\",\"copy\":\"kopieren\"},\"fr\":{\"open_in_\":\"Ouvrir dans \",\"cc_\":\"cc \",\"bcc_\":\"cci \",\"subject_\":\"sujet \",\"body_\":\"contenu \",\"gmail\":\"Gmail\",\"outlook\":\"Outlook\",\"telegram\":\"Telegram\",\"whatsapp\":\"WhatsApp\",\"skype\":\"Skype\",\"call\":\"Appeler\",\"open\":\"Ouvrir\",\"_default\":\" par défaut\",\"_as_default\":\" par défaut\",\"copy\":\"Copier\"}}}");
|
||||||
|
|
||||||
/***/ }),
|
/***/ }),
|
||||||
/* 1 */
|
/* 1 */
|
||||||
@ -280,7 +280,7 @@ var tel = "",
|
|||||||
telegramUsername = "",
|
telegramUsername = "",
|
||||||
skypeUsername = ""; // the DOM elements
|
skypeUsername = ""; // the DOM elements
|
||||||
|
|
||||||
var title, titleTel, detailCc, detailBcc, detailSubject, detailBody, ccValue, bccValue, subjectValue, bodyValue; // mailgo buttons (actions)
|
var title, titleTel, detailCc, detailBcc, detailSubject, detailBody, ccValue, bccValue, subjectValue, bodyValue, activatedLink; // mailgo buttons (actions)
|
||||||
|
|
||||||
var gmail, outlook, mailgo_open, telegram, wa, skype, call, copyMail, copyTel;
|
var gmail, outlook, mailgo_open, telegram, wa, skype, call, copyMail, copyTel;
|
||||||
/**
|
/**
|
||||||
@ -320,7 +320,10 @@ var mailgo_mailgoInit = function mailgoInit() {
|
|||||||
modalMailto = createElement();
|
modalMailto = createElement();
|
||||||
modalMailto.style.display = "none";
|
modalMailto.style.display = "none";
|
||||||
modalMailto.id = "mailgo";
|
modalMailto.id = "mailgo";
|
||||||
modalMailto.classList.add("m-modal"); // if dark is in config
|
modalMailto.classList.add("m-modal");
|
||||||
|
modalMailto.setAttribute("role", "dialog");
|
||||||
|
modalMailto.setAttribute("tabindex", "-1");
|
||||||
|
modalMailto.setAttribute("aria-labelledby", "m-title"); // if dark is in config
|
||||||
|
|
||||||
if ((_config3 = config) === null || _config3 === void 0 ? void 0 : _config3.dark) {
|
if ((_config3 = config) === null || _config3 === void 0 ? void 0 : _config3.dark) {
|
||||||
enableDarkMode(MAIL_TYPE);
|
enableDarkMode(MAIL_TYPE);
|
||||||
@ -444,7 +447,10 @@ var mailgo_mailgoInit = function mailgoInit() {
|
|||||||
modalTel = createElement();
|
modalTel = createElement();
|
||||||
modalTel.style.display = "none";
|
modalTel.style.display = "none";
|
||||||
modalTel.id = "mailgo-tel";
|
modalTel.id = "mailgo-tel";
|
||||||
modalTel.classList.add("m-modal"); // if dark is in config
|
modalTel.classList.add("m-modal");
|
||||||
|
modalTel.setAttribute("role", "dialog");
|
||||||
|
modalTel.setAttribute("tabindex", "-1");
|
||||||
|
modalTel.setAttribute("aria-labelledby", "m-tel-title"); // if dark is in config
|
||||||
|
|
||||||
if ((_config4 = config) === null || _config4 === void 0 ? void 0 : _config4.dark) {
|
if ((_config4 = config) === null || _config4 === void 0 ? void 0 : _config4.dark) {
|
||||||
enableDarkMode(TEL_TYPE);
|
enableDarkMode(TEL_TYPE);
|
||||||
@ -962,13 +968,52 @@ var getModalHTMLElement = function getModalHTMLElement() {
|
|||||||
var getModalDisplay = function getModalDisplay() {
|
var getModalDisplay = function getModalDisplay() {
|
||||||
var ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE;
|
var ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE;
|
||||||
return getModalHTMLElement(ref).style.display;
|
return getModalHTMLElement(ref).style.display;
|
||||||
}; // get display value
|
}; // set display value
|
||||||
|
|
||||||
|
|
||||||
var setModalDisplay = function setModalDisplay() {
|
var setModalDisplay = function setModalDisplay() {
|
||||||
var ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE;
|
var ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE;
|
||||||
var value = arguments.length > 1 ? arguments[1] : undefined;
|
var value = arguments.length > 1 ? arguments[1] : undefined;
|
||||||
return getModalHTMLElement(ref).style.display = value;
|
var modal = getModalHTMLElement(ref);
|
||||||
|
modal.style.display = value;
|
||||||
|
|
||||||
|
if (value === "flex") {
|
||||||
|
// "save" the activated link.
|
||||||
|
activatedLink = document.activeElement;
|
||||||
|
modal.setAttribute("aria-hidden", "false"); // Focus on the modal container.
|
||||||
|
|
||||||
|
modal.setAttribute("tabindex", "0");
|
||||||
|
modal.focus();
|
||||||
|
setFocusLoop(modal);
|
||||||
|
} else {
|
||||||
|
modal.setAttribute("aria-hidden", "true"); // focus back the activated link for getting back to the context.
|
||||||
|
|
||||||
|
modal.setAttribute("tabindex", "-1");
|
||||||
|
activatedLink.focus();
|
||||||
|
}
|
||||||
|
}; // set focus loop within modal
|
||||||
|
|
||||||
|
|
||||||
|
var setFocusLoop = function setFocusLoop(ref) {
|
||||||
|
var modal = ref;
|
||||||
|
modal.querySelector(".m-modal-content a:last-of-type").addEventListener("keydown", leaveLastLink);
|
||||||
|
modal.querySelector(".m-modal-content a:first-of-type").addEventListener("keydown", leaveFirstLink);
|
||||||
|
};
|
||||||
|
|
||||||
|
var leaveLastLink = function leaveLastLink(e) {
|
||||||
|
// going back to the first link to force looping
|
||||||
|
if (e.code === "Tab" && e.shiftKey === false) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.target.closest("div").querySelector("a:first-of-type").focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var leaveFirstLink = function leaveFirstLink(e) {
|
||||||
|
// going back to the first link to force looping
|
||||||
|
if (e.code === "Tab" && e.shiftKey === true) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.target.closest("div").querySelector("a:last-of-type").focus();
|
||||||
|
}
|
||||||
}; // enable dark mode
|
}; // enable dark mode
|
||||||
|
|
||||||
|
|
||||||
|
File diff suppressed because one or more lines are too long
@ -65,7 +65,8 @@ let title: HTMLElement,
|
|||||||
ccValue: HTMLElement,
|
ccValue: HTMLElement,
|
||||||
bccValue: HTMLElement,
|
bccValue: HTMLElement,
|
||||||
subjectValue: HTMLElement,
|
subjectValue: HTMLElement,
|
||||||
bodyValue: HTMLElement;
|
bodyValue: HTMLElement,
|
||||||
|
activatedLink: HTMLElement;
|
||||||
|
|
||||||
// mailgo buttons (actions)
|
// mailgo buttons (actions)
|
||||||
let gmail: HTMLLinkElement,
|
let gmail: HTMLLinkElement,
|
||||||
@ -115,6 +116,9 @@ const mailgoInit = (): void => {
|
|||||||
modalMailto.style.display = "none";
|
modalMailto.style.display = "none";
|
||||||
modalMailto.id = "mailgo";
|
modalMailto.id = "mailgo";
|
||||||
modalMailto.classList.add("m-modal");
|
modalMailto.classList.add("m-modal");
|
||||||
|
modalMailto.setAttribute("role", "dialog");
|
||||||
|
modalMailto.setAttribute("tabindex", "-1");
|
||||||
|
modalMailto.setAttribute("aria-labelledby", "m-title");
|
||||||
|
|
||||||
// if dark is in config
|
// if dark is in config
|
||||||
if (config?.dark) {
|
if (config?.dark) {
|
||||||
@ -269,6 +273,9 @@ const mailgoInit = (): void => {
|
|||||||
modalTel.style.display = "none";
|
modalTel.style.display = "none";
|
||||||
modalTel.id = "mailgo-tel";
|
modalTel.id = "mailgo-tel";
|
||||||
modalTel.classList.add("m-modal");
|
modalTel.classList.add("m-modal");
|
||||||
|
modalTel.setAttribute("role", "dialog");
|
||||||
|
modalTel.setAttribute("tabindex", "-1");
|
||||||
|
modalTel.setAttribute("aria-labelledby", "m-tel-title");
|
||||||
|
|
||||||
// if dark is in config
|
// if dark is in config
|
||||||
if (config?.dark) {
|
if (config?.dark) {
|
||||||
@ -882,9 +889,60 @@ const getModalHTMLElement = (type: string = MAIL_TYPE) =>
|
|||||||
const getModalDisplay = (ref: string = MAIL_TYPE): string =>
|
const getModalDisplay = (ref: string = MAIL_TYPE): string =>
|
||||||
getModalHTMLElement(ref).style.display;
|
getModalHTMLElement(ref).style.display;
|
||||||
|
|
||||||
// get display value
|
// set display value
|
||||||
const setModalDisplay = (ref: string = MAIL_TYPE, value: string): string =>
|
const setModalDisplay = (ref: string = MAIL_TYPE, value: string): void => {
|
||||||
(getModalHTMLElement(ref).style.display = value);
|
let modal = getModalHTMLElement(ref);
|
||||||
|
modal.style.display = value;
|
||||||
|
|
||||||
|
if (value === "flex") {
|
||||||
|
// "save" the activated link.
|
||||||
|
activatedLink = document.activeElement as HTMLElement;
|
||||||
|
modal.setAttribute("aria-hidden", "false");
|
||||||
|
|
||||||
|
// Focus on the modal container.
|
||||||
|
modal.setAttribute("tabindex", "0");
|
||||||
|
modal.focus();
|
||||||
|
setFocusLoop(modal);
|
||||||
|
} else {
|
||||||
|
modal.setAttribute("aria-hidden", "true");
|
||||||
|
|
||||||
|
// focus back the activated link for getting back to the context.
|
||||||
|
modal.setAttribute("tabindex", "-1");
|
||||||
|
activatedLink.focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// set focus loop within modal
|
||||||
|
const setFocusLoop = (ref: HTMLElement): void => {
|
||||||
|
let modal = ref;
|
||||||
|
modal
|
||||||
|
.querySelector(".m-modal-content a:last-of-type")
|
||||||
|
.addEventListener("keydown", leaveLastLink);
|
||||||
|
modal
|
||||||
|
.querySelector(".m-modal-content a:first-of-type")
|
||||||
|
.addEventListener("keydown", leaveFirstLink);
|
||||||
|
};
|
||||||
|
|
||||||
|
const leaveLastLink = (e: KeyboardEvent): void => {
|
||||||
|
// going back to the first link to force looping
|
||||||
|
if (e.code === "Tab" && e.shiftKey === false) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
((e.target as HTMLElement)
|
||||||
|
.closest("div")
|
||||||
|
.querySelector("a:first-of-type") as HTMLElement).focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const leaveFirstLink = (e: KeyboardEvent): void => {
|
||||||
|
// going back to the first link to force looping
|
||||||
|
if (e.code === "Tab" && e.shiftKey === true) {
|
||||||
|
e.preventDefault();
|
||||||
|
((e.target as HTMLElement)
|
||||||
|
.closest("div")
|
||||||
|
.querySelector("a:last-of-type") as HTMLElement).focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// enable dark mode
|
// enable dark mode
|
||||||
const enableDarkMode = (type: string = MAIL_TYPE) =>
|
const enableDarkMode = (type: string = MAIL_TYPE) =>
|
||||||
|
Loading…
Reference in New Issue
Block a user