часто приходится копировать какой-либо текст, кусочек кода или адрес со страниц сайта. Чтобы скопировать текст, его сначала необходимо выделить и затем открыть контекстное меню браузера или воспользоваться сочетанием клавиш. Однако, если на вашем сайте часто приходится копировать контент, и вы беспокоитесь об удобстве пользователей, можно упростить этот процесс с помощью clipboard.js. На сайте GitHub, к примеру, есть кнопка скопировать URL репозитория.

На сайте Bit.ly есть похожая кнопка для копирования коротких URL’ов. Есть контент, который просто необходимо скопировать. Вот в таких случаях очень удобна эта кнопка.

Раньше добавить такую кнопку было очень трудно, все из-за запрета в браузерах. Большинству разработчиков приходилось пользоваться Flash библиотеками типа Clippy. К нашему счастью, теперь у нас есть JS библиотека, облегчающая эту задачу. И это Clipboard.js. В этом уроке для новичков я расскажу, как эффективно использовать данный инструмент.

Установка

Чтобы установить Clipboard.js, необходимо загрузить файл в подходящую папку на сайте и дать на нее ссылку в документе. Или можно дать ссылку на CDN, добавьте ссылку ниже в HTML код страницы:

<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js">script>

Нам необходимо создать два элемента. Один, целевой, для хранения копируемого контента. Целевым элементом может быть, к примеру, input (с ID), содержащий короткий URL:

<input id="post-shortlink" value="https://ac.me/qmE_jpnYXFo">

Второй элемент это триггер. В нашем случае – кнопка. В триггере указывается data атрибут data-clipboard-target. В качестве значения задается ID целевого элемента:

<button class="button" id="copy-button" data-clipboard-target="#post-shortlink">Copybutton>

После добавления этих двух элементов в разметку страницы можно включать Clipboard.js. Для этого необходимо добавить код ниже между тегов script или подключить код отдельным файлом.

(function(){

new Clipboard('#copy-button');

})();

Готово! По клику на кнопку мы теперь можем копировать короткий URL.

Расширяем возможности

В некоторых ситуациях просто нельзя добавить к целевому элементу ID, класс или data-* атрибут – при работе со старым контентом или с несколькими целевыми элементами может что-нибудь произойти.

Как пример, у нас есть веб-сайт. Контент сайта состоит из параграфов текста и кусков кода. Для подсветки синтаксиса мы будем использовать прекрасную библиотеку PrismJS. Но в PrismJS нет кнопки «скопировать», и мы хотим ее добавить с помощью Clipboard.js. Но проблема в том, что у нас сотни страниц на сайте с таким контентом. Тут нам поможет Clipboard.js API.

Взглянем на API

В Clipboard.js есть два события: success и error. События проверяют, удачно или неудачно был скопирован контент. В Safari, скорее всего, будет постоянно срабатывать событие error, так как браузер не поддерживает команды копировать/вырезать из метода execCommand, на который полагается Clipboard.js. События возвращают следующие свойства:

action: возвращается действие, которое мы выполнили по отношению к целевому элементу. Т.е. copy или cut

text: возвращается только по событию success. В свойстве хранится текст, скопированный или вырезанный из целевого элемента.

trigger: возвращает триггер, который копирует или вырезает текст.

С помощью API можно встроить Clipboard.js в наш сайт без изменения разметки, не надо изменять элементы-обертки. В нашем случае, мы можем воспользоваться им для добавления кнопки «скопировать» для кода.

Clipboard.js + PrismJS

На этом этапе у нас уже должен быть установлен PrismJS (загрузите файл в папку на сайте и дайте ссылку на него). Каждый кусок кода в нашей разметке помещен в теги pre и code с классом language-{name}. В нашем примере мы используем код LESS, т.е. необходимо добавить класс language-less:

<pre>

<code class="language-less">@bg: transparent;

element {

& when not (@bg = transaprent) {

background: @bg;

}

}code>

pre>

Добавляем кнопку Скопировать

Теперь, для того, чтобы скопировать соответствующий кусок кода, необходимо добавить в каждый тег pre кнопку. Для начала, найдем все теги pre с помощью метода getElementsByTagName.

var pre = document.getElementsByTagName('pre');

У нас два или больше тегов pre. Необходимо пройтись по каждому элементу в цикле.

for (var i = 0; i < pre.length; i++) {

}

Для добавления кнопки, добавьте код ниже в цикл for.

for (var i = 0; i < pre.length; i++) {

var isLanguage = pre.children[0].className.indexOf('language-');

if ( isLanguage === 0 ) {

var button           = document.createElement('button');

button.className = 'copy-button';

button.textContent = 'Copy';

pre.appendChild(button);

}

}

Пройдемся по коду. Первым делом мы проверяем, есть ли у нас тег code с классом language-. Если нет, мы не добавляем кнопку. Мы добавили кнопку к каждому тегу pre. У каждой кнопки есть класс copy-button, а на кнопке написано «Копировать»:

<pre>

<code class="language-less">@bg: transparent;

element {

& when not (@bg = transparent) {

background: @bg;

}

}code>

<button class="copy-button">Copybutton>

pre>

Теперь, данная кнопка должна отображаться в каждом куске кода:

Запускаем Clipboard

Запускаем библиотеку Clipboard. Каждая кнопка копирует код. В качестве целевого элемента задается элемент перед триггером .copy-button. В нашем случае этот элемент code.

var copyCode = new Clipboard('.copy-button', {

target: function(trigger) {

return trigger.previousElementSibling;

}

});

Теперь наша кнопка полностью работает. По клику на нее, код должен скопироваться. Давайте пойдем немного дальше и поработаем с кастомными событиями.

Работаем с кастомными событиями

Скажем, мы хотим добавить немного интерактивности в процесс копирования контента. При успешном копировании текста, мы хотим изменить текст кнопки с «Копировать» на «Скопировано». Чтобы это сделать, добавьте код ниже:

copyCode.on('success', function(event) {

event.clearSelection();

event.trigger.textContent = 'Скопировано';

window.setTimeout(function() {

event.trigger.textContent = 'Копировать';

}, 2000);

});

Код выше выполняет 3 действия:

Сперва, мы очищаем выборку с помощью функции Clipboard clearSelection(). Необязательно.

Затем меняем значение на «Скопировано»

Через 2 секунды возвращаем значение «Копировать».

Для события error в браузерах, где не поддерживается метод execCommand, таких как Safari (на момент написания статьи), мы изменим текст на «Нажмите ‘CTRL+C’». Добавьте код ниже:

copyCode.on('error', function(event) {

event.trigger.textContent = 'Press "Ctrl + C" to copy';

window.setTimeout(function() {

event.trigger.textContent = 'Copy';

5.}, 2000);

6.});

Вот и все! Теперь у нас полностью рабочая и интерактивная кнопка копирования текста. Нам осталось только стилизовать ее. С этой задачей справитесь сами.

Заключение

Библиотека Clipboard.js – очень полезный инструмент, позволяющий почти бескровно добавить на веб-страницу кнопку «Копировать». В этом уроке мы рассмотрели основы и немного улучшили нашу кнопку при помощи API и кастомных событий.

В Clipboard.js используется методы Selection и execCommand, т.е. наш способ будет работать только в браузерах, поддерживающих эти два метода: Chrome 42, Firefox 41, Internet Explorer 9 и Opera 9. Как говорилось выше, пользователям Safari пока что не везет. Надеюсь, вам понравился урок и не забудьте про демо.