xsl: add lang parameter, js: translation function (according to data-attr...

xsl: add lang parameter, js: translation function (according to data-attr 'data-key' and '.trans' class). #5

XML2HTMLPlugin.php

@@ -127,10 +127,6 @@ class XML2HTMLPlugin extends GenericPlugin
         string $xmlFilePath
     )
     {
-
-//        $xml = simplexml_load_file($xmlFilePath);
-//        var_dump($xml->getName());
-
         ////// xslt transfo
         $xsltPath = dirname(__FILE__) . DIRECTORY_SEPARATOR . '2html.xsl';
         // Load the XML source
@@ -143,6 +139,8 @@ class XML2HTMLPlugin extends GenericPlugin
         // Configure the transformer
         $proc = new XSLTProcessor;
         $proc->importStyleSheet($xsl); // attach the xsl rules
+        $locale = AppLocale::getLocale();
+        $proc->setParameter('', 'lang', $locale);
         return $proc->transformToXML($xml);
 
     }

certic-jats2html.xsl

@@ -13,6 +13,8 @@
 
     <xsl:strip-space elements="*"/>
 
+    <xsl:param name="lang"/>
+
     <!-- Space is preserved in all elements allowing #PCDATA -->
     <!--<xsl:preserve-space-->
             <!--elements="abbrev abbrev-journal-title access-date addr-line-->
@@ -56,7 +58,8 @@
 
 
     <xsl:template match="/">
-        <div class="wrap">PLIP
+        <div class="wrap">
+            <a role="button" onclick="translatePage('fr')">FR</a> | <a role="button" onclick="translatePage('en')">EN</a>
             <div id="mode-color-btns">
                 <button id="sun" onclick="darkMode(true)">
                     <svg style="" class="icon" focusable="false" viewBox="0 0 32 32">
@@ -116,10 +119,10 @@
 
     <xsl:template match="front">
         <section class="front">
-
             <div class="button-tabs">
-                <button id="tabtn-toc" class="tab-btn focus-tab" onclick="openTab('toc')">Table des matières</button>
-                <button id="tabtn-refs" class="tab-btn" onclick="openTab('refs')">Références</button>
+                <button id="tabtn-toc" class="tab-btn focus-tab trans" data-key='toc' onclick="openTab('toc')"></button>
+                <button id="tabtn-refs" class="tab-btn trans" data-key='refs' onclick="openTab('refs')">
+                </button>
                 <button id="tabtn-footnotes" class="tab-btn" onclick="openTab('footnotes')">Notes</button>
                 <button id="tabtn-metas" class="tab-btn" onclick="openTab('metas')">i</button>
             </div>

resources/javascript/xml_2_html.js

+const dict = {
+    fr : {
+        'toc' : 'Table des matières',
+        'refs': 'Références',
+    },
+    en: {
+        'toc' : 'Table of contents',
+        'refs': 'References',
+    }
+}
+
+function getText(key){
+    return dict[lang][key];
+}
+
+function translatePage(newLang){
+    lang = newLang;
+    document.querySelectorAll('.trans').forEach((elt) => {
+        let key = elt.dataset.key;
+        elt.innerHTML = getText(key);
+    })
+}
+
+
 window.addEventListener('DOMContentLoaded', (event) => {
-    //@todo : how to remove it from ojs template ?
-    // document.querySelectorAll("link").forEach((e) => {
-    //     let href = e.getAttribute('href');
-    //     //@todo : removes 2 last tests (pdn-pp tests only)
-    //     if (href.indexOf('name=stylesheet') > 0 || href.indexOf('name=less') > 0 || href.indexOf('oldGregg') > 0)
-    //         e.remove();
-    // });
-    //
-    // //move galley links
-    //  if(document.querySelector("div.item.galleys"))
-    //     document.querySelector(".left-contents").prepend(document.querySelector("div.item.galleys"))
-
-    //footnotes binding
+    lang = lang.split('_')[0];
+    translatePage(lang);
     bindFootnotes();
-
     //toc hightlighing on scroll
     document.querySelector('.left-contents').addEventListener("scroll", () => {
         let scrollTop = document.querySelector('.left-contents').scrollTop;
@@ -32,15 +44,9 @@ window.addEventListener('DOMContentLoaded', (event) => {
             }
         }
     });
-
-
 });
 
 
-
-
-
-
 function openTab(tabName) {
     let i;
     let tabs = document.querySelectorAll(".content-tab");
@@ -107,3 +113,5 @@ function bindFootnotes() {
 
     })
 }
+
+

templates/HTMLGalleyView.tpl

@@ -12,8 +12,11 @@
             {$currentContext->getLocalizedName()}
         </title>
 
-        <link rel="stylesheet" type="text/css" href="{$assetsPath}/styles/xml_2_html.css">
-        <script src="{$assetsPath}/javascript/xml_2_html.js"></script>
+        <link rel="stylesheet" type="text/css" href="{$assetsPath}styles/xml_2_html.css">
+        <script>
+            let lang = "{$currentLocale}"
+        </script>
+        <script src="{$assetsPath}javascript/xml_2_html.js"></script>
     </head>
     <body>
     <div class="page">