От автора: часто приходится копировать какой-либо текст, кусочек кода или адрес со страниц сайта. Чтобы скопировать текст, его сначала необходимо выделить и затем открыть контекстное меню браузера или воспользоваться сочетанием клавиш. Однако, если на вашем сайте часто приходится копировать контент, и вы беспокоитесь об удобстве пользователей, можно упростить этот процесс с помощью clipboard.js. На сайте GitHub, к примеру, есть кнопка скопировать URL репозитория.
На сайте Bit.ly есть похожая кнопка для копирования коротких URL’ов. Есть контент, который просто необходимо скопировать. Вот в таких случаях очень удобна эта кнопка.
Раньше добавить такую кнопку было очень трудно, все из-за запрета в браузерах. Большинству разработчиков приходилось пользоваться Flash библиотеками типа Clippy. К нашему счастью, теперь у нас есть JS библиотека, облегчающая эту задачу. И это Clipboard.js. В этом уроке для новичков я расскажу, как эффективно использовать данный инструмент.
Установка
Чтобы установить Clipboard.js, необходимо загрузить файл в подходящую папку на сайте и дать на нее ссылку в документе. Или можно дать ссылку на CDN, добавьте ссылку ниже в HTML код страницы:
|
1 |
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script> |
Нам необходимо создать два элемента. Один, целевой, для хранения копируемого контента. Целевым элементом может быть, к примеру, input (с ID), содержащий короткий URL:
|
1 |
<input id="post-shortlink" value="//ac.me/qmE_jpnYXFo"> |
Второй элемент это триггер. В нашем случае – кнопка. В триггере указывается data атрибут data-clipboard-target. В качестве значения задается ID целевого элемента:
|
1 |
<button class="button" id="copy-button" data-clipboard-target="#post-shortlink">Copy</button> |
После добавления этих двух элементов в разметку страницы можно включать Clipboard.js. Для этого необходимо добавить код ниже между тегов script или подключить код отдельным файлом.
|
1 2 3 |
(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:
|
1 2 3 4 5 6 7 |
<pre> @bg: transparent; .element { & when not (@bg = transaprent) { background: @bg; } } |
Добавляем кнопку Скопировать
Теперь, для того, чтобы скопировать соответствующий кусок кода, необходимо добавить в каждый тег pre кнопку. Для начала, найдем все теги pre с помощью метода getElementsByTagName.
|
1 |
var pre = document.getElementsByTagName('pre'); |
У нас два или больше тегов pre. Необходимо пройтись по каждому элементу в цикле.
|
1 2 3 |
for (var i = 0; i < pre.length; i++) { } |
Для добавления кнопки, добавьте код ниже в цикл for.
|
1 2 3 4 5 6 7 8 9 10 |
for (var i = 0; i < pre.length; i++) { var isLanguage = pre[i].children[0].className.indexOf('language-'); if ( isLanguage === 0 ) { var button = document.createElement('button'); button.className = 'copy-button'; button.textContent = 'Copy'; pre[i].appendChild(button); } } |
Пройдемся по коду. Первым делом мы проверяем, есть ли у нас тег code с классом language-. Если нет, мы не добавляем кнопку. Мы добавили кнопку к каждому тегу pre. У каждой кнопки есть класс copy-button, а на кнопке написано «Копировать»:
|
1 2 3 4 5 6 7 8 |
<pre> @bg: transparent; .element { & when not (@bg = transparent) { background: @bg; } } <button class="copy-button">Copy</button> |
Теперь, данная кнопка должна отображаться в каждом куске кода:
Запускаем Clipboard
Запускаем библиотеку Clipboard. Каждая кнопка копирует код. В качестве целевого элемента задается элемент перед триггером .copy-button. В нашем случае этот элемент code.
|
1 2 3 4 5 |
var copyCode = new Clipboard('.copy-button', { target: function(trigger) { return trigger.previousElementSibling; } }); |
Теперь наша кнопка полностью работает. По клику на нее, код должен скопироваться. Давайте пойдем немного дальше и поработаем с кастомными событиями.
Работаем с кастомными событиями
Скажем, мы хотим добавить немного интерактивности в процесс копирования контента. При успешном копировании текста, мы хотим изменить текст кнопки с «Копировать» на «Скопировано». Чтобы это сделать, добавьте код ниже:
|
1 2 3 4 5 6 7 |
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’». Добавьте код ниже:
|
1 2 3 4 5 6 |
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 пока что не везет. Надеюсь, вам понравился урок и не забудьте про демо.
Автор: Thoriq Firdaus
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (4)