Untitled

//old
// Dicionario

var block_dual = false;
var txt_audio_01;
var txt_audio_02;
var txt_audio_03;
var txt_audio_04;
var container_words;
var last_click = null;
var bt_play;
var audio;
// DICIONÁRIO
let bts_letras = [];
function dictionary() {
    let body = document.querySelector("body");
    body.id = "body";

    let rect = body.getBoundingClientRect();

    let bt_dictionary = document.querySelector('.qp-dictionary-button');
    bt_dictionary.onclick = function () {
        if (!block_dual) {
            block_dual = true;
            let dictionary_container = create('', "#body", "dictionary_filter", "pop");
            dictionary_container.style.cssText = 'height:' + rect.height + 'px';

            create('', "#dictionary_filter", "dictionary_container", "pop");

            // Column 01
            create('', "#dictionary_container", "column01", "columns");
            create('', "#column01", "row01", "rows");
            // BOTÕES ROW 02
            create('', "#column01", "row02", "rows");

            let row_1 = ["a", "c", "e", "g", "i", "k", "m", "o", "q", "s", "u", "w", "z", "b", "d", "f", "h", "j", "l", "n", "p", "r", "t", "v", "y"];

            for (let i = 0; i < row_1.length; i++) {
                var num = i;
                i < 10 ? num = ("0" + i) : num = i;
                var row = i < 13 ? row = "#row01" : row = "#row02";
                let btn = create('', row, "bt_letra_" + i, "bts_letras");
                let txt_bt_letra = create('p', "#bt_letra_" + i, "txt_bt_letra_" + i, "bts_txts");
                txt_bt_letra.innerHTML = row_1[i];
                let bclick = () => {
                    fillPanel(row_1[i]);
                }
                btn.onclick = () => {
                    bclick();
                }
            }

            // TXT CONTAINER
            container_words = create('', '#column01', 'container_words');

            fillPanel("a");

            // Column 02
            create('', "#dictionary_container", "column02", "columns");

            let search = create('input', '#column02', 'search');
            search.type = "text";
            search.oninput = () => {
                if (search.value.length >= 2) {
                    fillPanel(search.value, true);
                }
            }
            // search.addEventListener("change", (e)=>{console.log(e.target.value)});

            let bt_search = create('', '#column02', 'bt_search');
            bt_search.innerHTML = "<span>go</span>";
            bt_search.onclick = () => {
                fillPanel(search.value, true);
            }

            // CONTAINER ÁUDIO
            create('', '#column02', 'audio_container');

            txt_audio_01 = create('p', '#audio_container', 'txt_audio_01', 'audios_txts');
            txt_audio_01.innerHTML = "<i>preposition</i>";

            // ÁUDIO BOX
            create('', '#audio_container', 'box_audio');

            audio = new Audio(`dictionary\\media\\above.mp3`);

            bt_play = create('', '#box_audio', 'bt_audio', 'bt_audios');
            bt_play.onclick = () => {
                audio.play();
                bt_play.className = "bt_audios played";
            };

            audio.onended = function () {
                bt_play.className = "bt_audios";
            };

            txt_audio_02 = create('p', '#box_audio', 'txt_audio_02', 'audios_txts');
            txt_audio_02.innerHTML = "above";

            // TXTS CONTAINER ÁUDIO
            txt_audio_03 = create('p', '#audio_container', 'txt_audio_03', 'audios_txts');
            txt_audio_03.innerHTML = "in a higher position than something else";

            txt_audio_04 = create('p', '#audio_container', 'txt_audio_04', 'audios_txts');
            txt_audio_04.innerHTML = "&#8220Put the picture above the fireplace.&#8221";

            // BOTÃO DE FECHAR
            let bt_close = create('', "#column02", "bt_close");
            bt_close.innerHTML = "<span>x</span>";

            bt_close.onclick = function () {
                let pop = document.querySelectorAll(".pop");
                for (let i = 0; i < pop.length; i++) {
                    pop[i].parentNode.removeChild(pop[i]);
                }
            };
        }
        setTimeout(() => { block_dual = false }, 500);
    };
}

function fillPanel(letra, search = false) {
    // Limpar
    if (container_words.childElementCount > 0) {
        while (container_words.lastElementChild) {
            container_words.removeChild(container_words.lastElementChild)
        }
    }
    //Reset
    last_click = null;
    var index = 0;
    //Criar palavra
    let create_word = (key) => {
        let btn = create('', "#container_words", "txt_container_" + index, "div_words");
        let txt_container = create('p', "#txt_container_" + index, "txt_" + index, "containers_txts");
        txt_container.innerHTML = key;
        let nclick = () => {
            if (last_click != null) {
                last_click.style.cssText = "";
            }
            last_click = btn;
            let word = words[key];
            btn.style.cssText = "background: no-repeat rgb(255, 204, 0) !important;"
            txt_audio_01.innerHTML = word["type"];
            txt_audio_02.innerHTML = key;
            txt_audio_03.innerHTML = word["desc"];
            txt_audio_04.innerHTML = `&#8220${word["examp"]}&#8221`;
            audio = new Audio(`dictionary\\media\\${word['sound']}`);
            bt_play.onclick = () => {
                audio.play();
                bt_play.className = "bt_audios played";
            };

            audio.onended = function () {
                bt_play.className = "bt_audios";
            };
        }
        btn.onclick = () => { nclick() };
        index++;
    }
    //busca
    if (!search) {
        Object.entries(words).forEach(([key, value]) => {
            if (key.substr(0, 1).toLowerCase() == letra) {
                create_word(key);
            }
        });
    } else {
        Object.entries(words).forEach(([key, value]) => {
            if (key.search(letra) != -1) {
                create_word(key);
            }
        });
    }
}

var words = {};
function readXml(xmlFile) {
    var xmlDoc;
    if (typeof window.DOMParser != "undefined") {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", xmlFile, false);
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType('text/xml');
        }
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
    }
    else {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.load(xmlFile);
    }
    var tagObj = xmlDoc.getElementsByTagName("word").length;

    let word_xml = xmlDoc.getElementsByTagName("word");
    for (let i = 0; i < word_xml.length; i++) {
        words[word_xml[i].attributes.entry.value] = {
            "desc": word_xml[i].attributes.entryDescription.value,
            "examp": word_xml[i].attributes.entryExample.value,
            "sound": word_xml[i].attributes.entrySound.value,
            "type": word_xml[i].attributes.type.value,
        }
    }
}





//new
// Dicionario

var block_dual = false;
var txt_audio_01;
var txt_audio_02;
var txt_audio_03;
var txt_audio_04;
var container_words;
var last_click = null;
var bt_play;
var audio;
// DICIONÁRIO
let bts_letras = [];
function dictionary() {
    let body = document.querySelector("body");
    body.id = "body";

    let rect = body.getBoundingClientRect();

    let bt_dictionary = document.querySelector('.qp-dictionary-button');
    bt_dictionary.onclick = function () {
        if (!block_dual) {
            block_dual = true;
            let dictionary_container = create('', "#body", "dictionary_filter", "pop");
            dictionary_container.style.cssText = 'height:' + rect.height + 'px';

            create('', "#dictionary_filter", "dictionary_container", "pop");

            // Column 01
            create('', "#dictionary_container", "column01", "columns");
            create('', "#column01", "row01", "rows");
            // BOTÕES ROW 02
            create('', "#column01", "row02", "rows");

            let row_1 = ["a", "c", "e", "g", "i", "k", "m", "o", "q", "s", "u", "w", "z", "b", "d", "f", "h", "j", "l", "n", "p", "r", "t", "v", "y"];

            for (let i = 0; i < row_1.length; i++) {
                var num = i;
                i < 10 ? num = ("0" + i) : num = i;
                var row = i < 13 ? row = "#row01" : row = "#row02";
                let btn = create('', row, "bt_letra_" + i, "bts_letras");
                let txt_bt_letra = create('p', "#bt_letra_" + i, "txt_bt_letra_" + i, "bts_txts");
                txt_bt_letra.innerHTML = row_1[i];
                let bclick = () => {
                    fillPanel(row_1[i]);
                }
                btn.onclick = () => {
                    bclick();
                }
            }

            // TXT CONTAINER
            container_words = create('', '#column01', 'container_words');

            fillPanel("a");

            // Column 02
            create('', "#dictionary_container", "column02", "columns");

            let search = create('input', '#column02', 'search');
            search.type = "text";
            search.oninput = () => {
                if (search.value.length >= 2) {
                    fillPanel(search.value, true);
                }
            }
            // search.addEventListener("change", (e)=>{console.log(e.target.value)});

            let bt_search = create('', '#column02', 'bt_search');
            bt_search.innerHTML = "<span>go</span>";
            bt_search.onclick = () => {
                fillPanel(search.value, true);
            }

            // CONTAINER ÁUDIO
            create('', '#column02', 'audio_container');

            txt_audio_01 = create('p', '#audio_container', 'txt_audio_01', 'audios_txts');
            txt_audio_01.innerHTML = "<i>preposition</i>";

            // ÁUDIO BOX
            create('', '#audio_container', 'box_audio');

            audio = new Audio(`dictionary\\media\\above.mp3`);

            bt_play = create('', '#box_audio', 'bt_audio', 'bt_audios');
            bt_play.onclick = () => {
                audio.currentTime = 0;
                audio.play();
                bt_play.className = "bt_audios played";
            };

            audio.onended = function () {
                bt_play.className = "bt_audios";
            };

            txt_audio_02 = create('p', '#box_audio', 'txt_audio_02', 'audios_txts');
            txt_audio_02.innerHTML = "above";

            // TXTS CONTAINER ÁUDIO
            txt_audio_03 = create('p', '#audio_container', 'txt_audio_03', 'audios_txts');
            txt_audio_03.innerHTML = "in a higher position than something else";

            txt_audio_04 = create('p', '#audio_container', 'txt_audio_04', 'audios_txts');
            txt_audio_04.innerHTML = "&#8220Put the picture above the fireplace.&#8221";

            // BOTÃO DE FECHAR
            let bt_close = create('', "#column02", "bt_close");
            bt_close.innerHTML = "<span>x</span>";

            bt_close.onclick = function () {
                let pop = document.querySelectorAll(".pop");
                for (let i = 0; i < pop.length; i++) {
                    pop[i].parentNode.removeChild(pop[i]);
                }
            };
        }
        setTimeout(() => { block_dual = false }, 500);
    };
}

function fillPanel(letra, search = false) {
    // Limpar
    if (container_words.childElementCount > 0) {
        while (container_words.lastElementChild) {
            container_words.removeChild(container_words.lastElementChild)
        }
    }
    //Reset
    last_click = null;
    var index = 0;
    //Criar palavra
    let create_word = (key) => {
        let btn = create('', "#container_words", "txt_container_" + index, "div_words");
        let txt_container = create('p', "#txt_container_" + index, "txt_" + index, "containers_txts");
        txt_container.innerHTML = key;
        let nclick = () => {
            if (last_click != null) {
                last_click.style.cssText = "";
            }
            last_click = btn;
            let word = words[key];
            btn.style.cssText = "background: no-repeat rgb(255, 204, 0) !important;"
            txt_audio_01.innerHTML = word["type"];
            txt_audio_02.innerHTML = key;
            txt_audio_03.innerHTML = word["desc"];
            txt_audio_04.innerHTML = `&#8220${word["examp"]}&#8221`;
            audio = new Audio(`dictionary\\media\\${word['sound']}`);
            bt_play.onclick = () => {
                audio.currentTime = 0;
                audio.play();
                bt_play.className = "bt_audios played";
            };

            audio.onended = function () {
                bt_play.className = "bt_audios";
            };
        }
        btn.onclick = () => { nclick() };
        index++;
    }
    //busca
    if (!search) {
        Object.entries(words).forEach(([key, value]) => {
            if (key.substr(0, 1).toLowerCase() == letra) {
                create_word(key);
            }
        });
    } else {
        Object.entries(words).forEach(([key, value]) => {
            if (key.search(letra) != -1) {
                create_word(key);
            }
        });
    }
}

var words = {};
function readXml(xmlFile) {
    var xmlDoc;
    if (typeof window.DOMParser != "undefined") {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", xmlFile, false);
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType('text/xml');
        }
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
    }
    else {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.load(xmlFile);
    }
    var tagObj = xmlDoc.getElementsByTagName("word").length;

    let word_xml = xmlDoc.getElementsByTagName("word");
    for (let i = 0; i < word_xml.length; i++) {
        words[word_xml[i].attributes.entry.value] = {
            "desc": word_xml[i].attributes.entryDescription.value,
            "examp": word_xml[i].attributes.entryExample.value,
            "sound": word_xml[i].attributes.entrySound.value,
            "type": word_xml[i].attributes.type.value,
        }
    }
}