Skip to content
This repository has been archived by the owner on Jan 1, 2024. It is now read-only.

French Translation + Accessibility Improvements #49

Merged
merged 2 commits into from
Jul 24, 2020
Merged

French Translation + Accessibility Improvements #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5b1acf
French Available
Jul 24, 2020
30289af
Accessibility Improvement
Jul 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/mailgo.dark.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/mailgo.dark.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/mailgo.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/mailgo.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

58 changes: 58 additions & 0 deletions examples/index.fr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 18 additions & 1 deletion i18n/i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"languages": ["en", "it", "es", "de"],
"languages": ["en", "it", "es", "de", "fr"],
"translations": {
"en": {
"open_in_": "open in ",
Expand Down Expand Up @@ -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"
}
}
}
57 changes: 51 additions & 6 deletions lib/mailgo.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion lib/mailgo.js.map
View file
Open in desktop

Large diffs are not rendered by default.

57 changes: 53 additions & 4 deletions src/mailgo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) =>
Expand Down