Clipboard.js

Copiando textos com estilo

Tecnicamente, essa biblioteca é incrível. Mas, antes de explicar os conceitos por trás dela e seu funcionamento, vou contextualizar uma importante informação que poucos sabem.

A Clipboard.js é desenvolvida por um brasileiro. Isso mesmo, um brasileiro. Até aí tudo bem, tem diversos brasileiros envolvidos em projetos sensacionais. Mas essa biblioteca tem algo de especial, porque ela foi eleita, pelo GitHub, como um dos 10 projetos mais populares da plataforma em 2016. Sério!

Já imaginou quantos projetos estão hospedados no GitHub? Milhões! E para mostrar que não é fácil chegar nesse TOP 10, apenas dois projetos da lista não são de uma empresa. E olhe que até para empresas é difícil, pois a lista conta com pesos pesados da indústria da tecnologia, como Apple, Facebook, Google e Microsoft.

Ranking do GitHub

O responsável por essa façanha é o curitibano Zeno Rocha, que atualmente residente em Los Angeles, nos Estados Unidos. O GitHub usou como critério, para ordenar a lista, o número de Stars (que é uma espécie de ‘Like’ do GitHub) ganhas na primeira semana de lançamento e se baseou apenas em projetos lançados de 2015 a 2016.

Inacreditáveis 6.522 foi o número de estrelas que o projeto ganhou na sua semana de lançamento, ficando com a oitava colocação, atrás de projetos como o Visual Studio Code, React, Material Design Lite e a linguagem de programação Swift.

Seguindo para o que mais interessa, vamos ver como essa belezinha funciona, mas antes vou só explicar o conceito dela, que é simplesmente copiar texto. É isso, copiar texto para a área de transferência. Sabe quando a gente usa Ctrl-C para copiar um texto e Ctrl-V para colar? Ela faz o papel do copiar. Parece simples, né? E é mesmo, o mais importante dela é a utilidade.

Imagine o seguinte cenário: você desenvolveu uma aplicação web, como o Google Docs, por exemplo, onde o usuário possa digitar um texto e copiá-lo sem precisar usar o teclado. Como você faria?

Usando a Clipboard.js seria muito simples fazer isso, como a gente vai ver. E sabe o que é melhor? A biblioteca não usa flash, não depende de framework (é escrita em Javascript puro), tem apenas 3 kb compactada, suporte aos principais navegadores do mercado e é open source.

Iniciando

O primeiro passo é instalar a biblioteca. Você pode usar os gerenciadores de pacotes npm e bower ou optar pelas maneiras tradicionais: baixá-la compactada ou clonar o repositório.

$ npm install clipboard --save

ou

$ bower install clipboard --sabe

Em seguida você precisa incluir, no seu projeto, um link para o script que tá na pasta dist ou carregá-la de um CDN, como faremos no nosso exemplo.

Pronto, agora é só começar a brincadeira. Vou mostrar alguns exemplos de como a clipboard.js pode ser usada.

Exemplo 1: Copiando texto de outro elemento.

O cenário é o seguinte, temos um elemento input onde digitaremos um endereço de e-mail e um botão, que servirá de gatilho, disparando o comando para copiar o texto inserido no input. Um elemnto do tipo textarea foi adicionado para colarmos o texto copiado.

Ah, também dá pra fazer o papel do Ctrl-X (recortar) usando a Clipboard.js. Vamos ver como recortar um texto de outro elemento, no próximo exemplo.

Exemplo 2: Recortando texto de outro elemento.

Perceba que, na linha 32, foi adicionado o atributo data-clipboard-action que recebeu o valor cut. Pronto, isso é o suficiente pra mudar a ação de copiar para recortar.

Mas, de fato, não precisamos de um elemento alvo para copiar texto, podemos copiar de um atributo do próprio elemento gatilho.

Exemplo 3: Copiando texto de um atributo.

Nesse caso, perceba que no nosso elemento gatilho, só temos um atributo referente a biblioteca: data-clipboard-text. Esse elemento recebe como valor o próprio texto que será copiado para área de transferência.

Pronto, finalizamos. Com esses exemplos dá pra ter uma boa noção de quão prática e útil é essa biblioteca made in brazil.