ccm.lang.js v1.2.0: support for dataset translation

lang/ccm.lang.js

@@ -1,9 +1,10 @@
 /**
  * @overview ccmjs-based web component for multilingualism
- * @author André Kless <[email protected]> 2021-2022
+ * @author André Kless <[email protected]> 2021-2022, 2024
  * @license The MIT License (MIT)
- * @version latest (1.1.0)
+ * @version latest (1.2.0)
  * @changes
+ * version 1.2.0 (23.04.2024): support for dataset translation
  * version 1.1.0 (11.02.2022): controllable dark mode
  * version 1.0.0 (29.12.2021)
  */
@@ -128,15 +129,23 @@
 
       /**
        * translates an index or website area
-       * @param {string|Element} [index_or_elem] - translation index or website area (default: website area of the parent instance)
-       * @returns {string} corresponding translation for the given index (if specified)
+       * @param {string|Element} [content] - translation index, dataset or website area (default: website area of the parent instance)
+       * @returns {string|void} corresponding translation for the given index (if specified)
        */
-      this.translate = index_or_elem => {
-        if ( typeof index_or_elem === 'string' )
-          return this.translations[ this.active ][ index_or_elem ];
-        else if ( !index_or_elem )
-          index_or_elem = this.parent.element;
-        index_or_elem && index_or_elem.querySelectorAll( '*[data-lang]' ).forEach( elem => {
+      this.translate = content => {
+        if ( typeof content === 'string' )
+          return translateIndex( content );
+        else if ( $.isElement( content ) )
+          return translateElement( content );
+        else if ( $.isObject( content ))
+          return translateDataset();
+        else
+          return translateElement(this.parent.element);
+      }
+
+      const translateIndex = index => this.translations[ this.active ][ index ];
+      const translateElement = elem => {
+        elem.querySelectorAll( '*[data-lang]' ).forEach( elem => {
           elem.dataset.lang.split( ' ' ).forEach( index => {
             if ( !index ) return;
             const split = index.split( '-' );
@@ -150,12 +159,15 @@
               elem.setAttribute( split[ 1 ], translation );
             else
               elem.innerHTML = translation;
-          } )
+          } );
         } );
-      }
-
+      };
+      const translateDataset = data => {
+        for ( const key in data )
+          if ( data[key + '-' + this.active] )
+            data[key] = data[key + '-' + this.active];
+      };
     }
-
   };
   let b="ccm."+component.name+(component.version?"-"+component.version.join("."):"")+".js";if(window.ccm&&null===window.ccm.files[b])return window.ccm.files[b]=component;(b=window.ccm&&window.ccm.components[component.name])&&b.ccm&&(component.ccm=b.ccm);"string"===typeof component.ccm&&(component.ccm={url:component.ccm});let c=(component.ccm.url.match(/(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)/)||[""])[0];if(window.ccm&&window.ccm[c])window.ccm[c].component(component);else{var a=document.createElement("script");document.head.appendChild(a);component.ccm.integrity&&a.setAttribute("integrity",component.ccm.integrity);component.ccm.crossorigin&&a.setAttribute("crossorigin",component.ccm.crossorigin);a.onload=function(){(c="latest"?window.ccm:window.ccm[c]).component(component);document.head.removeChild(a)};a.src=component.ccm.url}
 } )();

lang/index.html

@@ -14,5 +14,5 @@
     }
   }
 </style>
-<script src="https://ccmjs.github.io/akless-components/lang/versions/ccm.lang-1.1.0.min.js"></script>
-<ccm-lang-1-1-0 src='["ccm.load","https://ccmjs.github.io/akless-components/lang/resources/resources.mjs#demo"]'></ccm-lang-1-1-0>
+<script src="https://ccmjs.github.io/akless-components/lang/versions/ccm.lang-1.2.0.min.js"></script>
+<ccm-lang-1-2-0 src='["ccm.load","https://ccmjs.github.io/akless-components/lang/resources/resources.mjs#demo"]'></ccm-lang-1-2-0>