update lang template

ccmjs · Jul 11, 2024 · eb68621 · eb68621
1 parent f41cb12
commit eb68621
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/lang/resources/templates.mjs b/lang/resources/templates.mjs
@@ -14,12 +14,12 @@ export { render };
  * @example main( { de: 'German', en: 'English' }, 'en', lang => {} )
  * @returns {TemplateResult}
  */
-export function main( app ) {
+export function main( languages, active, onChange ) {
   return html`
-    <select @change=${ event => app.switch( event.target.value ) }>
-      ${ Object.keys( app.languages[app.active] ).map( lang => html`
-        <option .selected=${ lang === app.active } value="${ lang.toLowerCase() }">
-          ${ lang.toUpperCase() } - ${ app.languages[app.active][ lang ] }
+    <select @change=${ event => onChange( event.target.value ) }>
+      ${ Object.keys( languages ).map( lang => html`
+        <option .selected=${ lang === active } value="${ lang.toLowerCase() }">
+          ${ lang.toUpperCase() } - ${ languages[ lang ] }
         </option>
       ` ) }
     </select>

diff --git a/lang/resources/templates_v1.mjs b/lang/resources/templates_v1.mjs
@@ -0,0 +1,27 @@
+/**
+ * @overview HTML templates of ccmjs-based web component for multilingualism
+ * @author André Kless <[email protected]> 2021
+ */
+
+import { html, render } from 'https://ccmjs.github.io/akless-components/libs/lit/lit.min.js';
+export { render };
+
+/**
+ * main HTML template
+ * @param {Object.<string,string>} languages - selectable languages
+ * @param {string} active - active language
+ * @param {Function} onChange - when another language is selected
+ * @example main( { de: 'German', en: 'English' }, 'en', lang => {} )
+ * @returns {TemplateResult}
+ */
+export function main( app ) {
+  return html`
+    <select @change=${ event => app.switch( event.target.value ) }>
+      ${ Object.keys( app.languages[app.active] ).map( lang => html`
+        <option .selected=${ lang === app.active } value="${ lang.toLowerCase() }">
+          ${ lang.toUpperCase() } - ${ app.languages[app.active][ lang ] }
+        </option>
+      ` ) }
+    </select>
+  `;
+}
diff --git a/lang/versions/ccm.lang-1.2.1.js b/lang/versions/ccm.lang-1.2.1.js
@@ -18,7 +18,7 @@
 //    "active": "en",
       "css": [ "ccm.load", "https://ccmjs.github.io/akless-components/lang/resources/styles.min.css" ],
       "dark": false,
-      "html": [ "ccm.load", "https://ccmjs.github.io/akless-components/lang/resources/templates.mjs" ],
+      "html": [ "ccm.load", "https://ccmjs.github.io/akless-components/lang/resources/templates_v1.mjs" ],
       "languages": {
         "de": {
           "de": "Deutsch",