Course intro: Inprove translate html - refs BT#19044

assets/js/document.js

@@ -1,3 +1,6 @@
 /** This JS  will be included when loading an HTML in the Document tool */
 
-require('./translatehtml.js');
+import translateHtml from './translatehtml.js';
+document.addEventListener('DOMContentLoaded', function () {
+  translateHtml();
+});

assets/js/translatehtml.js

@@ -1,52 +1,52 @@
 /* For licensing terms, see /license.txt */
 
-document.addEventListener('DOMContentLoaded', function () {
+export default function translateHtml() {
-  if (
+    if (
       window.user && window.user.locale &&
       window.config &&
       window.config['editor.translate_html'] &&
       'true' === window.config['editor.translate_html']
-  ) {
+    ) {
-    var isoCode = window.user.locale;
+      var isoCode = window.user.locale;
-    const translateElement = document.querySelector('.mce-translatehtml');
+      const translateElement = document.querySelector('.mce-translatehtml');
-    if (translateElement) {
+      if (translateElement) {
-      document.querySelectorAll('.mce-translatehtml').forEach(function (el) {
+        document.querySelectorAll('.mce-translatehtml').forEach(function (el) {
-        el.style.display = 'none';
+          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';
         });
+        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.
+      // it checks content from old version
-      if (isoCode == 'pl_PL') {
+      const langs = document.querySelectorAll('span[lang]:not(.mce-translatehtml)');
-        isoCode = 'pl';
+      if (langs.length > 0) {
-      }
+        // it hides all contents with lang
-      if (isoCode == 'fr_FR') {
+        langs.forEach(function (el) {
-        isoCode = 'fr';
+          el.style.display = 'none';
-      }
-      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';
         });
+
+        // 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/js/vendor.js

@@ -21,4 +21,7 @@ global.textcomplete = textcomplete;
 
 require('chart.js');
 require('./annotation.js');
-require('./translatehtml.js');
+import translateHtml from './translatehtml.js';
+document.addEventListener('DOMContentLoaded', function () {
+  translateHtml();
+});

assets/vue/mixins/TranslateHtmlMixin.js

@@ -1,62 +0,0 @@
-
-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,12 +176,11 @@ 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';
+import translateHtml from '../../../js/translatehtml.js';
 
 export default {
   name: 'Home',
   servicePrefix: 'Courses',
-  mixins: [TranslateHtmlMixin],
   components: {
     Loading,
     Toolbar,
@@ -237,7 +236,7 @@ export default {
           if (!isEmpty(response)) {
             // first item
             state.intro = response[0];
-            TranslateHtmlMixin.methods.translate();
+            translateHtml();
           }
         });
 
@@ -253,7 +252,7 @@ export default {
             if (!isEmpty(response)) {
               state.createInSession = false;
               state.intro = response[0];
-              TranslateHtmlMixin.methods.translate();
+              translateHtml();
             }
           });
         }