Stimulus.js: clipboard controller
O curso lê um controller pequeno do Stimulus que copia texto para a área de transferência sem recarregar a página. Ele mostra como os atributos data-controller e de target ligam a classe ao HTML e como o data-action funciona na forma completa e com o evento padrão de cada elemento. Explica a chamada assíncrona navigator.clipboard.writeText(), a exigência de contexto seguro e o fallback obsoleto document.execCommand('copy'). Depois abre o showToast(), que monta um toast a partir de uma string HTML e reaproveita a dispensa de outro controller. A última aula lê as três páginas que usam o controller.
O que você vai aprender
- ✓Como os atributos data-controller e data-*-target ligam um controller do Stimulus ao HTML
- ✓O descritor completo do data-action e os eventos padrão de cada elemento no Stimulus
- ✓Como o navigator.clipboard.writeText() devolve uma Promise e exige contexto seguro
- ✓Por que o fallback obsoleto execCommand('copy') depende de um .select() anterior
- ✓Montar um toast a partir de uma string HTML e reaproveitar outro controller por atributos comuns
- ✓Usar o mesmo controller com um elemento de origem visível ou escondido
Copiando sem recarregar a página
O gerenciador de imagens de uma aula mostra uma URL de imagem gerada ao lado de um pequeno ícone de copiar. Clicar no ícone coloca a URL na área de transferência, um toast confirma, e nada mais na página se mexe. Nenhum formulário é enviado, nenhuma requisição vai ao servidor e nenhuma navegação do…
Ler a aula completa grátis →Currículo
7 aulasCopiando sem recarregar a página
Lê o arquivo do controller de clipboard e explica por que escrever na área de transferência exige JavaScript.
Targets: conectando o elemento source
Mostra como data-controller e data-ui--clipboard-target prendem o controller e geram o this.sourceTarget do input.
Actions e o atalho de evento padrão
Explica o descritor completo do data-action e por que o botão usa o atalho de evento padrão e o input não.
A API de Clipboard: navigator.clipboard.writeText
Trata da Promise devolvida pelo writeText(), da exigência de contexto seguro, do preventDefault() e da chamada select().
O fallback execCommand
Abre o bloco catch e o fallback obsoleto execCommand('copy'), com seu próprio try/catch e a checagem do retorno.
showToast e reaproveitamento entre controllers
Lê o showToast(), que monta um toast no #flash-region e reaproveita a dispensa do controller ui--flash.
Os outros pontos de uso, e juntando tudo
Lê as páginas de perfil e de certificado, que usam um input de origem escondido, e revisa o curso todo.