2

Preciso de uma ajuda.

Quero implementar um plugin do governo federal chamado vlibras (https://vlibras.gov.br/doc/widget/installation/webpageintegration.html?_ga=2.128060687.2041692944.1622566259-1292342778.1622566259).

O exemplo de implementação da documentação segue abaixo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <p>Dessa forma o vlibras é carregado!</p>
    <div vw class="enabled">
      <div vw-access-button class="active"></div>
      <div vw-plugin-wrapper>
        <div class="vw-plugin-top-wrapper"></div>
      </div>
    </div>
    <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
    <script>
      new window.VLibras.Widget("https://vlibras.gov.br/app");
    </script>
  </body>
</html>

Seguindo a documentação só preciso copiar e colar o código. Isso funciona mas eu preferiria não replica-lo em todas as minhas páginas.

Criei um javascript para fazer essa implementação "em tempo de execução", mas não consigo identificar o erro que impede o widget de ser criado. Não recebo erros no console mas o widget não aparece, apesar da estrutura de divs estar presente.

Abaixo o HTML da minha página:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='./vlibras_new.js'></script>
</head>
<body>
    <div id="ptifrmtarget">
    </div>
</body>
</html>

E o vibras_new.js:

//Quando o HTML termina de carregar, executa a função vlibras
window.addEventListener('load', () => {
    vlibras();
});

function vlibras() {

    //cria a tag que importa o vlibras
    var scriptVlibras = document.createElement("script");
    scriptVlibras.setAttribute("src", "https://vlibras.gov.br/app/vlibras-plugin.js");


    //Obtém a div "target"
    var targetDiv = document.getElementById("ptifrmtarget");
    console.log(targetDiv);

    //Verifica se as divs já existem
    var divsVlibras = targetDiv.getElementsByClassName("enabled")[0];
    console.log("divsVlibras: ", divsVlibras);

    if (divsVlibras == undefined) {
        //Cria as novas divs
        var div1 = document.createElement("div");
        div1.setAttribute("vw", "");
        div1.setAttribute("class", "enabled");
        div1.setAttribute("id", "divVlibras");

        var div2 = document.createElement("div");
        div2.setAttribute("vw-access-button", "");
        div2.setAttribute("class", "active");

        var div3 = document.createElement("div");
        div3.setAttribute("vw-plugin-wrapper", "");

        var div4 = document.createElement("div");
        div4.setAttribute("class", "vw-plugin-top-wrapper");

        //Monta a estrutura das divs
        div3.appendChild(div4);
        div1.appendChild(div2);
        div1.appendChild(div3);

        //Insere as divs criadas
        targetDiv.appendChild(scriptVlibras);
        targetDiv.appendChild(div1);
        console.log(targetDiv);
    }

    //Apos carregar o vlibras, abre o widget
    scriptVlibras.addEventListener('load', () => {
        console.log("Chamando widget!");
        new window.VLibras.Widget("https://vlibras.gov.br/app");
    });

}

Obrigado desde já!

1 Resposta 1

1

Fockink,

Fazendo alguns testes aqui, o script não está sendo gerado no momento correto para que o VLibras identifique o DOM e execute a ação do plugin. Modifiquei o evento que está sendo monitorado para a inclusão antes do documento estar completamente carregado. Nos meus testes funcionou. verifique como ficou para você. No script abaixo faltam as verificações de já haver o plugin na tela, caso necessário.

let CreateDOMObjects = () => {
    const DOM = `
        <div vw class="enabled">
        <div vw-access-button class="active"></div>
        <div vw-plugin-wrapper>
            <div class="vw-plugin-top-wrapper"></div>
        </div>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', DOM);
}

let ImportScriptFile = () => {
    let script = document.createElement('script');
    script.src = 'https://vlibras.gov.br/app/vlibras-plugin.js';
    script.onload = () => {
        new window.VLibras.Widget('https://vlibras.gov.br/app');
    };
    document.head.appendChild(script)
}

(() => {
    window.addEventListener('DOMContentLoaded', e => {
        CreateDOMObjects();
        ImportScriptFile();
    });
})();

Dessa forma também não é mais necessária a div:

<div id="ptifrmtarget"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .