Add alt attribute support for images (using the data-si18n-alt attrib…

…ute) and small improvements

CHANGELOG.md

@@ -6,6 +6,11 @@
 > breaking changes and/or new features that you need to implement in your
 > project.
 
+## 1.4.4 (June 5, 2024)
+
+- Add `alt` attribute support for auto translating using the `data-si18n-alt` attribute with value `true` in the element (e.g.: `<img>` tag).
+- Fix: Skip elements with `data-si18n` attribute not set, instead of breaking the whole localization process.
+
 ## 1.4.3 (January 13, 2024)
 
 - Fixed a bug where the name of the saved language (via `saveLang`, `saveAs`) would be corrupted on the user side and not available, causing the page to spit out.
@@ -17,7 +22,7 @@
 - Slight performance improvement.
 - Improve documentation and demo site.
 
-## 1.4.1 (October, 2023)
+## 1.4.1 (October 30, 2023)
 
 - Ignore `data-si18n` attributes with no value.
 - Functions (`translate` and `callback`) are excluded from the result of the

src/si18n.js

@@ -317,50 +317,37 @@ export default class Si18n {
     // if you want use the string for other purposes
     // (e.g.: title, aria-label attributes, etc.).
     const htmlTags = document.querySelectorAll("[data-si18n]");
-    if (htmlTags.length > 0) {
-      htmlTags.forEach((element) => {
-        const {
-          si18nDefault,
-          si18nTitle,
-          si18nLabel,
-          si18nHtml,
-          si18nValue,
-          si18nContent,
-          si18nAriaLabel,
-          si18nPlaceholder
-        } = element.dataset;
-        const JSONPath = element.dataset.si18n;
-        if (!JSONPath) return; // If the data-si18n attribute is empty.
-        const text = this.t(JSONPath);
-
-        if (si18nDefault !== "false") {
-          if (si18nHtml === "true") element.innerHTML = text;
+    const tagsLength = htmlTags.length;
+
+    if (tagsLength > 0) {
+      // Supported attributes in which the text can be automatically set:
+      const attributesMap = {
+        title: "si18nTitle",
+        label: "si18nLabel", // e.g: for <optgroup>
+        alt: "si18nAlt", // e.g: for <img alt>
+        "aria-label": "si18nAriaLabel",
+        value: "si18nValue", // e.g: for <input>, <option> and <button>.
+        content: "si18nContent", // e.g: for <meta>
+        placeholder: "si18nPlaceholder" // e.g: for <input> and <textarea>
+      };
+
+      for (let i = 0; i < tagsLength; i++) {
+        const element = htmlTags[i];
+        if (!element.dataset.si18n) continue; // JSON path is not set in data-si18n attribute.
+        const text = this.t(element.dataset.si18n);
+
+        // Set the text to the element.
+        if (element.dataset.si18nDefault !== "false") {
+          if (element.dataset.si18nHtml === "true") element.innerHTML = text;
           else element.textContent = text;
         }
 
-        // Supported attributes in which the text can be automatically set:
-        // `title`, `label`, `aria-label`, `value`, `content`, and `placeholder`.
-
-        if (!Si18n.#isUndefined(si18nTitle))
-          element.setAttribute("title", text);
-
-        if (!Si18n.#isUndefined(si18nLabel))
-          element.setAttribute("label", text); // e.g: for <optgroup>
-
-        if (!Si18n.#isUndefined(si18nAriaLabel))
-          element.setAttribute("aria-label", text);
-
-        if (!Si18n.#isUndefined(si18nValue))
-          // e.g: for <input>, <option> and <button>.
-          element.setAttribute("value", text);
-
-        if (!Si18n.#isUndefined(si18nContent))
-          element.setAttribute("content", text); // e.g: for <meta>
-
-        if (!Si18n.#isUndefined(si18nPlaceholder))
-          // e.g: for <input> and <textarea>
-          element.setAttribute("placeholder", text);
-      });
+        // Set the text to the supported attributes.
+        Object.keys(attributesMap).forEach((attr) => {
+          if (attributesMap[attr] in element.dataset)
+            element.setAttribute(attr, text);
+        });
+      }
     }
 
     this.#options.translate();

website/locales/en.json

@@ -62,7 +62,7 @@
     "cdnDesc": "You can also use si18n.js from a CDN. There are different versions of links available for different CDN platforms. You can pick and use only one link at once.",
     "attrDescTitle": "All attributes are:",
     "attrDescType": "The following attributes are booleans. They are mandatory depending on the needs. Possible values are <code>true</code> or <code>false</code>.",
-    "attrDesc": "<li><code>data-si18n-default</code>: If set to <code>false</code>, the text will not be placed in the tag. (Reserved for attributes.)</li><li><code>data-si18n-html</code>: If set to <code>true</code>, text will be added as HTML code. Default: <code>false</code>.</li><li><code>data-si18n-value</code> for the <code>value</code> attribute of a tag like <code>option</code> and <code>input</code>.</li><li><code>data-si18n-title</code> for the <code>title</code> attribute of the tag.</li><li><code>data-si18n-label</code> for the <code>label</code> attribute of a tag like <code>optgroup</code>.</li><li><code>data-si18n-aria-label</code> for the <code>aria-label</code> attribute of the tag.</li><li><code>data-si18n-placeholder</code> for the <code>placeholder</code> attribute of the <code>input</code> tag.</li><li><code>data-si18n-content</code> for the attribute <code>content</code> of a tag like <code>meta</code> for the description of the page, for example (useful if you use <code>Prerendering</code> technology.</li>"
+    "attrDesc": "<li><code>data-si18n-default</code>: If set to <code>false</code>, the text will not be placed in the tag. (Reserved for attributes.)</li><li><code>data-si18n-html</code>: If set to <code>true</code>, text will be added as HTML code. Default: <code>false</code>.</li><li><code>data-si18n-value</code> for the <code>value</code> attribute of a tag like <code>option</code> and <code>input</code>.</li><li><code>data-si18n-alt</code> for the <code>alt</code> attribute of the <code>img</code> tag to provide a text description of the image.</li><li><code>data-si18n-title</code> for the <code>title</code> attribute of the tag.</li><li><code>data-si18n-label</code> for the <code>label</code> attribute of a tag like <code>optgroup</code>.</li><li><code>data-si18n-aria-label</code> for the <code>aria-label</code> attribute of the tag.</li><li><code>data-si18n-placeholder</code> for the <code>placeholder</code> attribute of the <code>input</code> and <code>textarea</code> tags.</li><li><code>data-si18n-content</code> for the attribute <code>content</code> of a tag like <code>meta</code> for the description of the page, for example (useful if you use <code>Prerendering</code> technology.</li>"
   },
   "utils": {
     "start": "Get started",

website/locales/fr.json

@@ -62,7 +62,7 @@
     "cdnDesc": "Vous pouvez aussi utiliser si18n.js à partir d'un CDN. Il existe différentes versions de liens disponibles pour différentes plateformes CDN. Vous pouvez choisir et utiliser un seul lien à la fois.",
     "attrDescTitle": "Tous les attributs sont :",
     "attrDescType": "Les attributs suivants sont des booléens. Ils sont obligatoires selon les besoins. Les valeurs possibles sont <code>true</code> ou <code>false</code>.",
-    "attrDesc": "<li><code>data-si18n-default</code> : si défini sur <code>false</code>, le texte ne sera pas placé dans la balise. (Réservé pour les attributs.)</li><li><code>data-si18n-html</code> : si défini sur <code>true</code>, le texte sera ajouté sous forme de code HTML. Défaut : <code>false</code>.</li><li><code>data-si18n-value</code> pour l'attribut <code>value</code> d'une balise comme <code>option</code> et <code>input</code>.</li><li><code>data-si18n-title</code> pour l'attribut <code>title</code> de la balise.</li><li><code>data-si18n-label</code> pour l'attribut <code>label</code> d'une balise comme <code>optgroup</code>.</li><li><code>data-si18n-aria-label</code> pour l'attribut <code>aria-label</code> de la balise.</li><li><code>data-si18n-placeholder</code> pour l'attribut <code>placeholder</code> de la balise <code>input</code>.</li><li><code>data-si18n-content</code> pour l'attribut <code>content</code> d'une balise comme <code>meta</code> pour la description du site, par exemple (utile si vous utilisez la technologie <code>Prerendering</code>.</li>"
+    "attrDesc": "<li><code>data-si18n-default</code> : si défini sur <code>false</code>, le texte ne sera pas placé dans la balise. (Réservé pour les attributs.)</li><li><code>data-si18n-html</code> : si défini sur <code>true</code>, le texte sera ajouté sous forme de code HTML. Défaut : <code>false</code>.</li><li><code>data-si18n-value</code> pour l'attribut <code>value</code> d'une balise comme <code>option</code> et <code>input</code>.</li><li><code>data-si18n-alt</code> pour l'attribut <code>alt</code> de la balise <code>img</code> pour fournir une description textuelle de l'image.</li><li><code>data-si18n-title</code> pour l'attribut <code>title</code> de la balise.</li><li><code>data-si18n-label</code> pour l'attribut <code>label</code> d'une balise comme <code>optgroup</code>.</li><li><code>data-si18n-aria-label</code> pour l'attribut <code>aria-label</code> de la balise.</li><li><code>data-si18n-placeholder</code> pour l'attribut <code>placeholder</code> des balises <code>input</code> et <code>textarea</code>.</li><li><code>data-si18n-content</code> pour l'attribut <code>content</code> d'une balise comme <code>meta</code> pour la description du site, par exemple (utile si vous utilisez la technologie <code>Prerendering</code>.</li>"
   },
   "utils": {
     "start": "Commencer",