Многоязычный сайт в Material Design Lite не работает должным образом - PullRequest
Новая
       16

Многоязычный сайт в Material Design Lite не работает должным образом

0 голосов
/ 12 марта 2019

Товарищи разработчики,

Я пытаюсь создать мультиязычный сайт с Material Design Lite, в прошлом я использовал эту библиотеку:

Как создать многоязычное приложение с использованием JavaScript

И работает довольно хорошо, он ожидает JSON (en.json), подобный этому: 

{
  "chooseTime": "Speech type"
}

И добавляет все переводы, однако, если вы попытались сделать то же самое в MDL, ничего не произойдет.

Основной HTML выглядит так: 

<body load="load()"><!--content--></body>

Если я жестко закодирую данные, они будут выглядеть так:

img1

Но если я загружу переводы, он останется пустым.

img2

Вот полный пример: 

var langs = ["en", "es"];

function load(){
    let translate = new Translate();
    let lang = navigator.language || navigator.userLanguage;
    if (!langs.includes(lang))
        lang = "en";
    translate.init(lang);
    translate.process(); 
}

function Translate() {
    //initialization
    this.init =  function(lng){
        this.attribute = "data-tag";
        this.lng = lng;
    }

    //translate 
    this.process = function(){
                _self = this;
                let xrhFile = new XMLHttpRequest();
                //load content data 
                xrhFile.open("GET", "https://fanmixco.github.io/toastmasters-timer-material-design/js/lang/en.json", false);
                xrhFile.onreadystatechange = function ()
                {
                    if(xrhFile.readyState === 4)
                    {
                        if(xrhFile.status === 200 || xrhFile.status == 0)
                        {
                            let LngObject = JSON.parse(xrhFile.responseText);
                            //console.log(LngObject["name1"]);
                            let allDom = document.getElementsByTagName("*");
                            for(let i =0; i < allDom.length; i++){
                                let elem = allDom[i];
                                let key = elem.getAttribute(_self.attribute);

                                if(key != null) {
                                     //console.log(key);
                                     elem.innerHTML = LngObject[key];
                                }
                            }
                        }
                    }
                }
                xrhFile.send();
    }    
}
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/getmdl-select@2.0.1/getmdl-select.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/getmdl-select@2.0.1/getmdl-select.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>

<div class="mdl-textfield mdl-js-textfield getmdl-select">
     <input type="text" value="" class="mdl-textfield__input" id="cmbSpeechType" readonly>
     <input type="hidden" value="" name="hiddenSpeechType" id="hiddenSpeechType">
     <label for="cmbSpeechType" class="mdl-textfield__label">Speech type</label>
     <ul for="cmbSpeechType" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
        <li class="mdl-menu__item" data-val="0">Question of the Day (30s)</li>
     </ul>
  </div>
  
<div class="mdl-textfield mdl-js-textfield getmdl-select">
     <input type="text" value="" class="mdl-textfield__input" id="cmbSpeechTypeTrans" readonly>
     <input type="hidden" value="" name="hiddenSpeechType" id="hiddenSpeechType">
     <label for="cmbSpeechTypeTrans" class="mdl-textfield__label" data-tag="chooseTime"></label>
     <ul for="cmbSpeechTypeTrans" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
        <li class="mdl-menu__item" data-val="0" data-tag="opt1"></li>
     </ul>
  </div>

Проблема возникает во втором выборе после того, как я добавил это: data-tag = "chooseTime" и ничего не было загружено.

Если честно, я не знаю, почему, поскольку у меня есть другие сайты, работающие с плагином, и они работали, как и ожидалось, в этом случае ничего не произошло. Также я попытался добавить этот код после загрузки всех переводов: 

componentHandler.upgradeAllRegistered();

Любая идея или предложение, почему не работает? Или любой плагин перевода, который работает с MDL? Потому что я не смог найти один и единственный частичный пример, который нашел, что он был построен с Spring (Java) , и я не использую какой-либо серверный язык программирования. Спасибо за ваши идеи.

1 Ответ

0 голосов
/ 12 марта 2019

Я нашел, как это исправить, изначально плагин работает следующим образом: 

<body load="load();">
</body>

Я только что переместил загрузку в конец страницы, и теперь она работает: 

<body>
    <script>load();</script>
</body>
...