Плагин для копирования — clipboard

Привет, в этой статье разберем плагин clipboard. js и варианты его применения.

Что будем делать. Я покажу как мы можем копировать текст, как сделать это на множестве кнопок, как сделать это если кнопки создавать не хочется.

Для начала работы нам нужно подключить плагин.
Страница плагина — https://clipboardjs.com/.
cdnjs — https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js

Подключаем плагин в начале, после него будем писать наш код. К счастью кода совсем мало — 1 строка:

var clipboard = new ClipboardJS('.js-btn-copy');

В параметре функции нужно указать класс, который будет кнопкой для копирования текст.
Мы поставим — .js-copy-btn.

Вот все, всем спасибо, расходимся … да шучу :-), еще немножко кода будет

Просто скопируем текст

Для копирования текста, нам нужно показать кнопке, откуда его нужно копировать. Для этого мы укажем в атрибуте класс или id того элемента, который нужно копировать. Сделаем это пошагово:

Создадим тег с текстом и кнопку:

<p>текст 3</p>
<button>Копировать</button>   

Кнопке, тексту укажем классы и добавим кнопке атрибут для копирования:

<p class="cb-target-1">текст 3</p>
<button class="js-btn-copy" data-clipboard-target=".cb-target-1">Копировать</button>  

Вот что получилось в итоге, в инпуте можете вставить скопированный текст:

See the Pen clipboard-1 article by Postnov Daniil (@dan_postnov) on CodePen.

Не очень интересно, не правда ли?

Сделаем несколько кнопок

Менять цифры у классов, в дата атрибуте … долго и нудно, программисты мы или кто!

Что сделаем. С помощью чистого Js или Jquery циклом переберем кнопки и теги с текстом и установим необходимые классы и дата атрибуты. Создадим чистую от clipboard.js разметку, добавив только классы для js:

<p class="js-copy-text">текст 1</p>
<button class="js-copy-btn">Копировать</button>

<p class="js-copy-text">текст 2</p>
<button class="js-copy-btn">Копировать</button>

<p class="js-copy-text">текст 3</p>
<button class="js-copy-btn">Копировать</button>

Теперь мы должны запустить 2 цикла, в которых добавим тексту класс, кнопке добавим дата атрибут с классом текстового тега:

$('.js-copy-text').each(function(i, item) {
    $(item).addClass('cb-target-' + i);
});

$('.js-copy-btn').each(function(i, item) {
    $(item).attr('data-clipboard-target','.cb-target-' + i);
});

Что получилось с разметкой в итоге: 

В итоге можно добавлять кнопки указывая им классы для js и они автоматически будут связаны друг с другом.

Вот что получилось:

See the Pen clipboard.js 2 by Postnov Daniil (@dan_postnov) on CodePen.

Добавляем кнопки после текста.

Совсем для ленивых программистов 🙂

Вернемся в исходную. Ставим разметку с базовыми классами и уберем кнопки:

<p class="js-copy-text">текст 1</p> 

<p class="js-copy-text">текст 2</p>  

<p class="js-copy-text">текст 3</p>

Что будем делать. Циклом перебираем текст, назначаем классы, каждую итерацию создаем кнопку, добавляем ей классы и атрибут, добавляем после кнопки. Поехали!:

$('.js-copy-text').each(function(i, item) {
   var btn = $('<button>Копировать</button>');
   btn.addClass('js-copy-btn');
   btn.attr('data-clipboard-target','.cb-target-' + i);

   $(item).addClass('cb-target-' + i);
   $(item).after(btn);
});

Создали кнопку и поместили ее в переменную btn. Этой кнопке добавили класс и атрибут data-clipboard с классом нашего текста. Добавили класс нашему тексту и вставили эту кнопку сразу за нашим текстом.

Демо:

See the Pen Overview clipboard. js by Postnov Daniil (@dan_postnov) on CodePen.

Немного о событиях

Пользователи могут не понять что их текст был скопирован, поэтому нам нужно это показать.

В clipboard есть 2 события: success и error

В событиях мы имеем 3 свойства:

• e.action — показывает событие, которое произошло
• e.text — скопированный текст
• e.trigger — элемент, который отвечает за копирование текста

 Как это использовать?

Самое примитивное — показывать пользователю скопирован текст или нет. Сделать смену текста в кнопке и фоновый цвет кнопки.

Мы конечно можем сделать смену с помощью метода css в jquery, я так делать не советую, проще сделать добавление и удаление класса.

Создадим класс .is-copy для успешного копирования, покрасим кнопку в зеленый и сделаем белый цвет текста:

.is-copy {
   background-color: green;
   color: #fff;
}

И при успешном копировании будем добавлять класс к кнопке и менять ее текст:

clipboard.on('success', function(e) {
   $(e.trigger).text('Скопировано');
   $(e.trigger).addClass('is-copy');
});

Но согласитесь, если все кнопки закрасятся в зеленый — пользователь запутается. Давайте перед тем как покрасить кнопку, удалим активный класс и переименуем все кнопки в прежний вид, чтобы пользователь был уведомлен только о последнем копировании:

clipboard.on('success', function(e) {
   $('.js-copy-btn.is-copy').removeClass('is-copy').text('Копировать');
   
   $(e.trigger).text('Скопировано');
   $(e.trigger).addClass('is-copy');
});

Вот что получилось в итоге:

See the Pen Clipboard 4 article by Postnov Daniil (@dan_postnov) on CodePen.

Для события error вы сможете сами сделать обработку.