Tool intro: Fix translate html by user language - refs BT#19044

assets/js/translatehtml.js

@@ -20,32 +20,32 @@ document.addEventListener('DOMContentLoaded', function () {
           userLang.style.display = 'block';
         });
       }
-    } else {
-      // it checks content from old version
-      const langs = document.querySelectorAll('span[lang]');
-      if (langs.length > 0) {
-        // it hides all contents with lang
-        langs.forEach(function (el) {
-          el.style.display = 'none';
-        });
+    }
 
-        // To show only the content by user language.
-        if (isoCode == 'pl_PL') {
-          isoCode = 'pl';
-        }
-        if (isoCode == 'fr_FR') {
-          isoCode = 'fr';
-        }
-        if (isoCode == 'en_US') {
-          isoCode = 'en';
-        }
-        const selectedLang = document.querySelectorAll('span[lang="' + isoCode + '"]');
-        if (selectedLang.length > 0) {
-          selectedLang.forEach(function (userLang) {
-            userLang.classList.remove('hidden')
-            userLang.style.display = 'block';
-          });
-        }
+    // it checks content from old version
+    const langs = document.querySelectorAll('span[lang]:not(.mce-translatehtml)');
+    if (langs.length > 0) {
+      // it hides all contents with lang
+      langs.forEach(function (el) {
+        el.style.display = 'none';
+      });
+
+      // To show only the content by user language.
+      if (isoCode == 'pl_PL') {
+        isoCode = 'pl';
+      }
+      if (isoCode == 'fr_FR') {
+        isoCode = 'fr';
+      }
+      if (isoCode == 'en_US') {
+        isoCode = 'en';
+      }
+      const selectedLang = document.querySelectorAll('span[lang="' + isoCode + '"]');
+      if (selectedLang.length > 0) {
+        selectedLang.forEach(function (userLang) {
+          userLang.classList.remove('hidden')
+          userLang.style.display = 'block';
+        });
       }
     }
   }

assets/vue/mixins/TranslateHtmlMixin.js

@@ -0,0 +1,62 @@
+
+export default {
+  methods: {
+    translate() {
+      // this script checks the tags with attribute lang to show them with the current user language
+      if (document.readyState == "loaded" || document.readyState == "interactive" || document.readyState == "complete") {
+        if (
+          window.user && window.user.locale &&
+          window.config &&
+          window.config['editor.translate_html'] &&
+          'true' === window.config['editor.translate_html']
+        ) {
+
+          var isoCode = window.user.locale;
+          const translateElement = document.querySelector('.mce-translatehtml');
+          if (translateElement) {
+            document.querySelectorAll('.mce-translatehtml').forEach(function (el) {
+              el.style.display = 'none';
+            });
+            const selectedLang = document.querySelectorAll('[lang="' + isoCode + '"]');
+            if (selectedLang.length > 0) {
+              selectedLang.forEach(function (userLang) {
+                userLang.classList.remove('hidden')
+                userLang.style.display = 'block';
+              });
+            }
+          }
+
+          // it checks content from old version
+          const langs = document.querySelectorAll('span[lang]:not(.mce-translatehtml)');
+          if (langs.length > 0) {
+            // it hides all contents with lang
+            langs.forEach(function (el) {
+              el.style.display = 'none';
+            });
+
+            // To show only the content by user language.
+            if (isoCode == 'pl_PL') {
+              isoCode = 'pl';
+            }
+            if (isoCode == 'fr_FR') {
+              isoCode = 'fr';
+            }
+            if (isoCode == 'en_US') {
+              isoCode = 'en';
+            }
+
+            const selectedLang = document.querySelectorAll('span[lang="' + isoCode + '"]');
+            if (selectedLang.length > 0) {
+              selectedLang.forEach(function (userLang) {
+                userLang.classList.remove('hidden')
+                userLang.style.display = 'block';
+              });
+            }
+          }
+
+        }
+
+      }
+    }
+  }
+};

assets/vue/views/course/Home.vue

@@ -176,10 +176,12 @@ import axios from "axios";
 import {ENTRYPOINT} from '../../config/entrypoint';
 import {computed, onMounted, reactive, toRefs} from 'vue'
 import {mapGetters, useStore} from "vuex";
+import TranslateHtmlMixin from '../../mixins/TranslateHtmlMixin';
 
 export default {
   name: 'Home',
   servicePrefix: 'Courses',
+  mixins: [TranslateHtmlMixin],
   components: {
     Loading,
     Toolbar,
@@ -235,6 +237,7 @@ export default {
           if (!isEmpty(response)) {
             // first item
             state.intro = response[0];
+            TranslateHtmlMixin.methods.translate();
           }
         });
 
@@ -250,6 +253,7 @@ export default {
             if (!isEmpty(response)) {
               state.createInSession = false;
               state.intro = response[0];
+              TranslateHtmlMixin.methods.translate();
             }
           });
         }