Merge pull request #49 from geoffreycrofte/master
French Translation + Accessibility Improvements
This commit is contained in:
Matteo Manzinello
GitHub
commit
749ebdd628
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
|
|
@ -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"],
|
||||
"languages": ["en", "it", "es", "de", "fr"],
|
||||
"translations": {
|
||||
"en": {
|
||||
"open_in_": "open in ",
|
||||
|
|
@ -68,6 +68,23 @@
|
|||
"_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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/* 0 */
|
||||
/***/ (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 */
|
||||
|
|
@ -280,7 +280,7 @@ var tel = "",
|
|||
telegramUsername = "",
|
||||
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;
|
||||
/**
|
||||
|
|
@ -320,7 +320,10 @@ var mailgo_mailgoInit = function mailgoInit() {
|
|||
modalMailto = createElement();
|
||||
modalMailto.style.display = "none";
|
||||
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) {
|
||||
enableDarkMode(MAIL_TYPE);
|
||||
|
|
@ -444,7 +447,10 @@ var mailgo_mailgoInit = function mailgoInit() {
|
|||
modalTel = createElement();
|
||||
modalTel.style.display = "none";
|
||||
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) {
|
||||
enableDarkMode(TEL_TYPE);
|
||||
|
|
@ -962,13 +968,52 @@ var getModalHTMLElement = function getModalHTMLElement() {
|
|||
var getModalDisplay = function getModalDisplay() {
|
||||
var ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : MAIL_TYPE;
|
||||
return getModalHTMLElement(ref).style.display;
|
||||
}; // get display value
|
||||
}; // set display value
|
||||
|
||||
|
||||
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;
|
||||
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
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -65,7 +65,8 @@ let title: HTMLElement,
|
|||
ccValue: HTMLElement,
|
||||
bccValue: HTMLElement,
|
||||
subjectValue: HTMLElement,
|
||||
bodyValue: HTMLElement;
|
||||
bodyValue: HTMLElement,
|
||||
activatedLink: HTMLElement;
|
||||
|
||||
// mailgo buttons (actions)
|
||||
let gmail: HTMLLinkElement,
|
||||
|
|
@ -115,6 +116,9 @@ const mailgoInit = (): void => {
|
|||
modalMailto.style.display = "none";
|
||||
modalMailto.id = "mailgo";
|
||||
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 (config?.dark) {
|
||||
|
|
@ -269,6 +273,9 @@ const mailgoInit = (): void => {
|
|||
modalTel.style.display = "none";
|
||||
modalTel.id = "mailgo-tel";
|
||||
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 (config?.dark) {
|
||||
|
|
@ -882,9 +889,51 @@ const getModalHTMLElement = (type: string = MAIL_TYPE) =>
|
|||
const getModalDisplay = (ref: string = MAIL_TYPE): string =>
|
||||
getModalHTMLElement(ref).style.display;
|
||||
|
||||
// get display value
|
||||
const setModalDisplay = (ref: string = MAIL_TYPE, value: string): string =>
|
||||
(getModalHTMLElement(ref).style.display = value);
|
||||
// set display value
|
||||
const setModalDisplay = (ref: string = MAIL_TYPE, value: string): string => {
|
||||
let 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
|
||||
const setFocusLoop = (ref: HTMLElement): string => {
|
||||
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): void => {
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
|
||||
const leaveFirstLink = (e): void => {
|
||||
// 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
|
||||
const enableDarkMode = (type: string = MAIL_TYPE) =>
|
||||
|
|
|
|||
Loading…
Reference in New Issue