часто приходится копировать какой-либо текст, кусочек кода или адрес со страниц сайта. Чтобы скопировать текст, его сначала необходимо выделить и затем открыть контекстное меню браузера или воспользоваться сочетанием клавиш. Однако, если на вашем сайте часто приходится копировать контент, и вы беспокоитесь об удобстве пользователей, можно упростить этот процесс с помощью 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"
>Copy
button
>
После добавления этих двух элементов в разметку страницы можно включать Clipboard.js. Для этого необходимо добавить код ниже между тегов script или подключить код отдельным файлом.
(
function
(){
new
Clipboard(
'#copy-button'
);
})();
Готово! По клику на кнопку мы теперь можем копировать короткий URL.
Расширяем возможности
Расширяем возможности
В некоторых ситуациях просто нельзя добавить к целевому элементу ID, класс или data-* атрибут – при работе со старым контентом или с несколькими целевыми элементами может что-нибудь произойти.
Как пример, у нас есть веб-сайт. Контент сайта состоит из параграфов текста и кусков кода. Для подсветки синтаксиса мы будем использовать прекрасную библиотеку PrismJS. Но в PrismJS нет кнопки «скопировать», и мы хотим ее добавить с помощью Clipboard.js. Но проблема в том, что у нас сотни страниц на сайте с таким контентом. Тут нам поможет Clipboard.js API.
Взглянем на API
Взглянем на API
В Clipboard.js есть два события: success и error. События проверяют, удачно или неудачно был скопирован контент. В Safari, скорее всего, будет постоянно срабатывать событие error, так как браузер не поддерживает команды копировать/вырезать из метода execCommand, на который полагается Clipboard.js. События возвращают следующие свойства:
action: возвращается действие, которое мы выполнили по отношению к целевому элементу. Т.е. copy или cut
text: возвращается только по событию success. В свойстве хранится текст, скопированный или вырезанный из целевого элемента.
trigger: возвращает триггер, который копирует или вырезает текст.
С помощью API можно встроить Clipboard.js в наш сайт без изменения разметки, не надо изменять элементы-обертки. В нашем случае, мы можем воспользоваться им для добавления кнопки «скопировать» для кода.
Clipboard.js + PrismJS
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"
>Copy
button
>
pre
>
Теперь, данная кнопка должна отображаться в каждом куске кода:
Запускаем Clipboard
Запускаем 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 пока что не везет. Надеюсь, вам понравился урок и не забудьте про демо.