Instalação em páginas com frameworks JavaScript – Hand Talk

Páginas que utilizam AngularJS, Ember, Backbone.js ou outros frameworks de front end, também podem usar o nosso plugin sem problemas. O plugin tradutor de sites não possui dependências, tem um impacto mínimo em variáveis globais e não precisa mais ser atualizado ou reinicializado quando o conteúdo da página for modificado. Apenas é preciso certificar-se de que a janela, após ser inicializada, não seja removida por mudanças de estados/rotas ou alteração da estrutura da página.

Por exemplo: Ao utilizar o roteamento com Angular Route ou AngularUI Router, devemos determinar qual elemento em nosso template irá ser utilizado para abrir os templates descendentes, utilizando o atributo/elemento ng-view ou ui-view, respectivamente. Ou seja, tudo o que estiver dentro desses elementos será substituído pelo novo template.

Lembre-se que, ao ser inicializado, por padrão a janela do plugin é injetada no final do elemento <body>. Você pode modificar o elemento no qual será injetado a janela nas configurações. Um bom exemplo de como devemos utilizar o plugin nesses casos, é este:

<html>
 <head>
 </head>
 <body>
   <ui-view></ui-view>
 
   <script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
   <script>
     var ht = new HT({
       token: "..."
     });
   </script>
 </body>
</html>

Colocar o script no final da tag body não é obrigatório, mas é uma boa prática que deve ser encorajada. Colocando o script no final, fará com que ele seja executado apenas quando sua página estiver carregada, e assim o plugin não aumentará a percepção do tempo de abertura.

Artigos relacionados