ccm.dms.js v5.2.0: multilingualism for user content

ccm.dms.js

@@ -2,8 +2,9 @@
  * @overview ccmjs-based web component for a digital makerspace
  * @author André Kless <andre.kless@web.de> 2018-2022, 2024
  * @license The MIT License (MIT)
- * @version latest (5.1.0)
+ * @version latest (5.2.0)
  * @changes
+ * version 5.2.0 (24.04.2024): multilingualism for user content
  * version 5.1.0 (17.04.2024): added register form
  * version 5.0.0 (03.03.2022): reimplementation
  * (for older version changes see ccm.dms-4.5.0.js)
@@ -98,12 +99,12 @@
         this.dark === 'auto' && this.element.classList.add( 'dark_auto' );
         this.dark === true && this.element.classList.add( 'dark_mode' );
 
-        // listen to language change event
+        // listen to language change event => reload page with new language
         this.lang && this.lang.observe( lang => {
-          $.params( { lang: lang } );                               // change language in URL parameter
-          element.querySelector( '.timestamp' ) && this.refresh();  // translate timestamps
+          $.setContent( this.element, '' );
+          $.params( { lang } );
+          location.reload();
         } );
-
       };
 
       /**
@@ -112,6 +113,8 @@
        */
       this.start = async () => {
 
+        $.setContent( this.element, '' );
+
         // logging of 'start' event
         this.logger && this.logger.log( 'start' );
 
@@ -120,6 +123,9 @@
           this.components.get( { deleted: false } ),
           this.apps.get( { deleted: false } )
         ] );
+        if (this.lang) {
+          data[0].forEach(component => this.lang.translate(component));
+        }
         data = {
           components: {
             arr: data[ 0 ],
@@ -465,11 +471,7 @@
       this.refresh = () => {
         const params = $.params();
         const lang = this.lang && this.lang.active;
-        if ( lang )
-          if ( params.lang )
-            params.lang !== lang && this.lang.switch( params.lang );
-          else
-            $.params( { lang: lang } );
+        if ( this.lang ) $.params( { lang: lang } );
         switch ( params.view ) {
           case 'home':
             return this.render.home();

index.html

@@ -6,5 +6,5 @@
 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
 <title>Digital Makerspace</title>
 <style>body { margin: 0; background-color: rgb( 248, 249, 250 ) }</style>
-<script src="https://ccmjs.github.io/digital-makerspace/versions/ccm.dms-5.1.0.js"></script>
-<ccm-dms-5-1-0 src='["ccm.load","https://ccmjs.github.io/digital-makerspace/resources/resources.mjs#live"]'></ccm-dms-5-1-0>
+<script src="https://ccmjs.github.io/digital-makerspace/versions/ccm.dms-5.2.0.min.js"></script>
+<ccm-dms-5-2-0 src='["ccm.load","https://ccmjs.github.io/digital-makerspace/resources/resources.mjs#live"]'></ccm-dms-5-2-0>