Event Handlers

A API Rybená fornece manipuladores de eventos que permitem executar código em resposta a eventos específicos, como o carregamento da API ou a conclusão de uma tradução.

handleLoaded()

Configura uma função de callback que será executada quando a Rybená terminar de carregar.

RybenaApi.getInstance().handleLoaded(callback)

Parâmetros:

callback (function): Função a ser executada quando a Rybená estiver carregada

Retorno: void

Exemplo:

RybenaApi.getInstance().handleLoaded(() => {
  console.log("Rybená está pronta!");
  RybenaApi.getInstance().openPlayer();
});

Dica: Sempre use handleLoaded() antes de fazer qualquer chamada à API para garantir que o script foi completamente carregado.

handleTranslate()

Configura uma função de callback que será executada quando a Rybená terminar de traduzir um texto.

RybenaApi.getInstance().handleTranslate(callback)

Parâmetros:

callback (function): Função a ser executada quando a tradução for concluída

Retorno: void

Exemplo:

RybenaApi.getInstance().handleTranslate(() => {
  console.log("Tradução concluída!");
});

Sugestão: Como parâmetro é necessário passar a função a ser executada. Para isso, basta passar a referência à função, não sua execução: passe func, e não func().

isTranslating()

Verifica se a Rybená está atualmente traduzindo um texto.

RybenaApi.getInstance().isTranslating()

Retorno: boolean - true se estiver traduzindo, false caso contrário

Exemplo:

const isTranslating = RybenaApi.getInstance().isTranslating();
console.log("Está traduzindo:", isTranslating);

Exemplos Completos

Exemplo 1: Inicialização Básica

Este exemplo mostra como usar handleLoaded() para garantir que a API está pronta:

RybenaApi.getInstance().handleLoaded(() => {
  console.log("Rybená API está pronta!");
  
  // Mostra o player
  RybenaApi.getInstance().openPlayer();
  
  // Traduz um texto
  RybenaApi.getInstance().translate("Olá, bem-vindo à Rybená!");
});

Exemplo 2: Callback após Tradução

Este exemplo mostra como executar código após a tradução ser concluída:

RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
  
  // Configura callback para quando a tradução terminar
  RybenaApi.getInstance().handleTranslate(() => {
    console.log("Tradução concluída!");
    alert("Tradução finalizada!");
  });
  
  // Traduz um texto
  RybenaApi.getInstance().translate("Este texto será traduzido");
});

Exemplo 3: Verificação de Estado

Este exemplo mostra como verificar se a Rybená está traduzindo:

RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
  
  // Verifica se está traduzindo
  console.log("Está traduzindo:", RybenaApi.getInstance().isTranslating());
  
  // Traduz um texto
  RybenaApi.getInstance().translate("Verificando estado...");
  
  // Verifica novamente após 1 segundo
  setTimeout(() => {
    console.log("Está traduzindo:", RybenaApi.getInstance().isTranslating());
  }, 1000);
});

Exemplo 4: Tradução em Sequência

Este exemplo mostra como traduzir múltiplos textos em sequência usando handleTranslate():

const texts = [
  "Primeira frase",
  "Segunda frase",
  "Terceira frase"
];

let currentIndex = 0;

function translateNext() {
  if (currentIndex < texts.length) {
    console.log("Traduzindo:", texts[currentIndex]);
    RybenaApi.getInstance().translate(texts[currentIndex]);
    currentIndex++;
  } else {
    console.log("Todas as traduções concluídas!");
  }
}

RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
  
  // Configura callback para traduzir o próximo texto
  RybenaApi.getInstance().handleTranslate(() => {
    translateNext();
  });
  
  // Começa a tradução
  translateNext();
});

Exemplo 5: Interface de Progresso

Este exemplo mostra como criar uma interface de progresso para traduções:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rybená - Progresso</title>
  <script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api"></script>
  <style>
    .progress-container {
      width: 100%;
      max-width: 400px;
      margin: 20px auto;
    }
    .progress-bar {
      width: 100%;
      height: 30px;
      background-color: #e0e0e0;
      border-radius: 5px;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      background-color: #4CAF50;
      width: 0%;
      transition: width 0.3s ease;
    }
    .progress-text {
      text-align: center;
      margin-top: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Progresso de Tradução</h1>
  
  <div class="progress-container">
    <div class="progress-bar">
      <div class="progress-fill" id="progressFill"></div>
    </div>
    <div class="progress-text" id="progressText">0%</div>
  </div>
  
  <button id="startBtn">Iniciar Traduções</button>

  <script>
    const texts = [
      "Primeira frase de exemplo",
      "Segunda frase de exemplo",
      "Terceira frase de exemplo",
      "Quarta frase de exemplo",
      "Quinta frase de exemplo"
    ];
    
    let currentIndex = 0;
    
    function updateProgress() {
      const progress = (currentIndex / texts.length) * 100;
      document.getElementById('progressFill').style.width = progress + '%';
      document.getElementById('progressText').textContent = Math.round(progress) + '%';
    }
    
    function translateNext() {
      if (currentIndex < texts.length) {
        updateProgress();
        RybenaApi.getInstance().translate(texts[currentIndex]);
        currentIndex++;
      } else {
        updateProgress();
        console.log("Todas as traduções concluídas!");
        alert("Todas as traduções foram concluídas!");
      }
    }
    
    RybenaApi.getInstance().handleLoaded(() => {
      RybenaApi.getInstance().openPlayer();
      
      // Configura callback para traduzir o próximo texto
      RybenaApi.getInstance().handleTranslate(() => {
        translateNext();
      });
      
      // Configura botão
      document.getElementById('startBtn').addEventListener('click', () => {
        currentIndex = 0;
        translateNext();
      });
    });
  </script>
</body>
</html>

Exemplo 6: Controle de Estado

Este exemplo mostra como controlar o estado da aplicação baseado no estado da tradução:

RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
  
  const translateBtn = document.getElementById('translateBtn');
  const pauseBtn = document.getElementById('pauseBtn');
  const playBtn = document.getElementById('playBtn');
  const stopBtn = document.getElementById('stopBtn');
  
  // Atualiza estado dos botões
  function updateButtonStates() {
    const isTranslating = RybenaApi.getInstance().isTranslating();
    
    translateBtn.disabled = isTranslating;
    pauseBtn.disabled = !isTranslating;
    playBtn.disabled = isTranslating;
    stopBtn.disabled = !isTranslating;
  }
  
  // Configura callbacks
  RybenaApi.getInstance().handleTranslate(() => {
    console.log("Tradução concluída");
    updateButtonStates();
  });
  
  // Configura botões
  translateBtn.addEventListener('click', () => {
    const text = document.getElementById('textInput').value;
    if (text) {
      RybenaApi.getInstance().translate(text);
      updateButtonStates();
    }
  });
  
  pauseBtn.addEventListener('click', () => {
    RybenaApi.getInstance().pause();
    updateButtonStates();
  });
  
  playBtn.addEventListener('click', () => {
    RybenaApi.getInstance().play();
    updateButtonStates();
  });
  
  stopBtn.addEventListener('click', () => {
    RybenaApi.getInstance().stop();
    updateButtonStates();
  });
  
  // Inicializa estado
  updateButtonStates();
});

Exemplo 7: Múltiplos Callbacks

Este exemplo mostra como configurar múltiplos callbacks para diferentes eventos:

RybenaApi.getInstance().handleLoaded(() => {
  console.log("1. Rybená carregada");
  
  RybenaApi.getInstance().openPlayer();
  
  // Callback 1: Log de tradução
  RybenaApi.getInstance().handleTranslate(() => {
    console.log("2. Tradução concluída");
  });
  
  // Callback 2: Atualizar interface
  RybenaApi.getInstance().handleTranslate(() => {
    document.getElementById('status').textContent = "Pronto";
  });
  
  // Callback 3: Traduzir próximo texto
  RybenaApi.getInstance().handleTranslate(() => {
    if (hasMoreTexts()) {
      translateNext();
    }
  });
  
  // Traduz um texto
  RybenaApi.getInstance().translate("Texto de exemplo");
});

Boas Práticas

Dica: Use handleLoaded() para garantir que a API está pronta antes de fazer qualquer chamada. Isso evita erros de "API não disponível".

Atenção: Lembre-se de passar a referência da função, não sua execução. Use func, não func().

Sugestão: Para traduções em sequência, use handleTranslate() para traduzir o próximo texto automaticamente após o anterior ser concluído.

Atenção: Tenha cuidado ao configurar múltiplos callbacks para o mesmo evento. Todos serão executados na ordem em que foram configurados.

Resumo dos Métodos

Método	Descrição	Parâmetros	Retorno
`handleLoaded(callback)`	Executa callback quando a API carrega	`callback` (function)	`void`
`handleTranslate(callback)`	Executa callback quando a tradução termina	`callback` (function)	`void`
`isTranslating()`	Verifica se está traduzindo	Nenhum	`boolean`

Event Handlers

handleLoaded()

handleTranslate()

isTranslating()

Exemplos Completos

Exemplo 1: Inicialização Básica

Exemplo 2: Callback após Tradução

Exemplo 3: Verificação de Estado

Exemplo 4: Tradução em Sequência

Exemplo 5: Interface de Progresso

Exemplo 6: Controle de Estado

Exemplo 7: Múltiplos Callbacks

Boas Práticas

Resumo dos Métodos

Conteúdo Relacionado

Controle de Tradução

Começando

Exemplos

Nesta página