LunaTranslator/LunaTranslator/files/anki/back.html

<div class="hide-style">
    <div id="audio">{{audio}}</div>
    <div id="audio_sentence">{{audio_sentence}}</div>
</div>
<div class="centerdiv" onclick='playAudio("audio")'>
    <div class="ruby-div" id="word">{{ word }}</div>
    <div id="rubyword" class="ruby-div"></div>
</div>

<script>
    var ruby = JSON.parse(decodeURIComponent("{{ rubytext }}"))
    var html = ''
    if (ruby.length) {
        for (var i = 0; i < ruby.length; i++) {
            html += ruby[i]['orig'];
            if (ruby[i]['orig'] != ruby[i]['hira'])
                html += '<rt>' + ruby[i]['hira'] + '</rt>';
            else
                html += '<rt></rt>';
        }
        html = '<ruby>' + html + '</ruby>'
        document.getElementById('rubyword').innerHTML = html
        document.getElementById('word').classList.add("hide-style");
    }
    else {
        document.getElementById('rubyword').classList.add("hide-style");
    }

</script>

<div id="example_sentence" class="example-div" onclick='playAudio("audio_sentence")'>
    {{example_sentence}}
</div>
<div id="image" class="centerdiv">
    {{image}}
</div>

<div id="remarks" class="centerdiv remark-div">
    {{remarks}}
</div>

<div class="tab-widget">
    <div class="centerdiv" id="tab_buttons">
    </div>
    <div class="centerdiv">
        <div class="tab-content" id="tab_contents">
        </div>
    </div>
</div>

<script>
    var explains = JSON.parse(decodeURIComponent("{{ explain }}"))

    function safehtml(html) {
        html = decodeURIComponent(html)
        var tempParent = document.createElement('div');
        tempParent.innerHTML = html;

        var fragment = document.createElement('div');
        while (tempParent.firstChild) {
            fragment.appendChild(tempParent.firstChild);
        }
        return fragment, fragment.innerHTML
    }
    var htmltabbuttons = ''
    var htmlcontents = ''
    function onclickbtn(_id) {

        var tabButtons = document.querySelectorAll('.tab-widget .tab-button');
        var tabPanes = document.querySelectorAll('.tab-widget .tab-pane');
        for (var i = 0; i < tabButtons.length; i++)
            tabButtons[i].classList.remove('active');
        for (var i = 0; i < tabPanes.length; i++)
            tabPanes[i].classList.remove('active');

        document.getElementById(_id).classList.add('active');

        var tabId = document.getElementById(_id).getAttribute('data-tab');
        var tabPane = document.getElementById(tabId);
        tabPane.classList.add('active');
    }
    var scriptElementss = []
    for (var iiii = 0; iiii < explains.length; iiii++) {
        htmltabbuttons += '<button type="button" onclick="onclickbtn(\'buttonid' + (iiii).toString() + '\')" id="buttonid' + (iiii).toString() + '" class="tab-button" data-tab="tab' + (iiii).toString() + '">' + explains[iiii]['source'] + '</button>'

        var tempParent = document.createElement('div');
        tempParent.innerHTML = explains[iiii]['content'];

        var fragment = document.createElement('div');
        while (tempParent.firstChild) {
            fragment.appendChild(tempParent.firstChild);
        }

        htmlcontents += '<div id="tab' + (iiii).toString() + '" class="tab-pane">' + fragment.innerHTML + '</div>'
        var scriptElements = fragment.getElementsByTagName('script');

        for (var jjjj = 0; jjjj < scriptElements.length; jjjj++) {
            scriptElementss.push(scriptElements[jjjj].textContent)
        }
    }
    document.getElementById('tab_contents').innerHTML = htmlcontents;
    document.getElementById('tab_buttons').innerHTML = htmltabbuttons;
    if (document.querySelectorAll('.tab-widget .tab-button').length) {
        document.querySelectorAll('.tab-widget .tab-button')[0].click()
    }
    for (var iiii = 0; iiii < scriptElementss.length; iiii++) {
        eval(scriptElementss[iiii])
    }
</script>

<script>
    function playAudio(audioId) {
        var audioDiv = document.getElementById(audioId);
        var audio = audioDiv.getElementsByTagName('*');
        if (audio.length > 0) {
            audio[0].click();
        }
    }
    function checkhide(eid) {
        var emptyDiv = document.getElementById(eid);
        if (emptyDiv && emptyDiv.innerText.trim() === "") {
            emptyDiv.classList.add("hide-style");
        }
    }
    function checkhide2(eid) {
        var emptyDiv = document.getElementById(eid);
        if (emptyDiv && emptyDiv.children.length == 0) {
            emptyDiv.classList.add("hide-style");
        }
    }
    checkhide("example_sentence")
    checkhide2("image")
    checkhide("remarks")
</script>