Difficulty implementing Vlibras using Javascript

Asked

Viewed 115 times

2

I need some help.

I want to implement a federal government plugin called vlibras (https://vlibras.gov.br/doc/widget/installation/webpageintegration.html?_ga=2.128060687.2041692944.1622566259-1292342778.1622566259).

The example of implementing the documentation follows below:

<!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>

Following the documentation I just need to copy and paste the code. This works but I would prefer not to replicate it on all my pages.

I created a javascript to make this implementation "at runtime", but I can’t identify the error that prevents the widget from being created. I don’t get errors on the console but the widget doesn’t appear, although the Divs structure is present.

Below the HTML of my page:

<!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>

And the 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");
    });

}

Thanks in advance!

javascript html

1 answer

1


Fockink,

Running some tests here, the script is not being generated at the right time for Vlibras to identify the DOM and execute the plugin action. I modified the event being monitored for inclusion before the document was fully loaded. In my tests it worked. Check it out for yourself. In the script below the checks are missing to already have the plugin on the screen if necessary.

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();
    });
})();

That way also the div is no longer needed:

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

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.