Скопіювати в буфер обміну за допомогою Clipboard.js

Від автора: часто доводиться копіювати текст, шматочок коду або адресу зі сторінок сайту. Щоб скопіювати текст, потрібно спочатку його виділити і потім відкрити контекстне меню браузера або скористатися поєднанням клавіш. Однак, якщо на вашому сайті часто доводиться копіювати контент, і ви турбуєтеся про зручність користувачів, можна спростити цей процес за допомогою clipboard.js. На сайті GitHub, приміром, є кнопка скопіювати URL репозиторію.

На сайті Bit.ly є схожа кнопка для копіювання коротких url’ов. Є контент, який просто необхідно скопіювати. Ось в таких випадках дуже зручна ця кнопка.

Раніше додати таку кнопку було дуже важко, все із-за заборони в браузерах. Більшості розробників доводилося користуватися Flash бібліотеками типу Clippy. На наше щастя, тепер у нас є JS бібліотека, полегшує це завдання. І це Clipboard.js. В цьому уроці для новачків я розповім, як ефективно використовувати даний інструмент.

Установка

Щоб встановити Clipboard.js необхідно завантажити файл у відповідну папку на сайті і дати посилання на неї в документі. Чи можна дати посилання на CDN, додайте посилання нижче, в HTML-код сторінки:

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

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

Після додавання цих двох елементів розмітку сторінки можна включати 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. Події повертають наступні властивості:

З допомогою API можна вбудувати Clipboard.js у наш сайт без зміни розмітки, не треба змінювати елементи-обгортки. У нашому випадку, ми можемо скористатися ним для додавання кнопки «копіювати» коду.

Clipboard.js + PrismJS

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

@bg: transparent;
.element {
& when not (@bg = transaprent) {
background: @bg;
}
}

Додаємо кнопку Копіювати

Тепер, для того, щоб скопіювати відповідний шматок коду, необхідно додати в кожен тег 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, а на кнопці написано «Копіювати»:

@bg: transparent;
.element {
& when not (@bg = transparent) {
background: @bg;
}
}
Copy

Тепер, дана кнопка повинна відображатися в кожному шматку коду:

Запускаємо 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 дії:

Для події 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’;
}, 2000);
});

От і все! Тепер у нас повністю робоча і інтерактивна кнопка копіювання тексту. Нам залишилося тільки стилізувати її. З цим завданням впораєтеся самі.

Висновок

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

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