Улучшить clipboard.js

Question

Улучшить clipboard.js

Рейтинг: 1Ответов: 1Опубликовано: 08.07.2023

При нажатии на кнопку "скопировать" добавить к ней еще один класс, чтобы потом через него стилизовать кнопку иначе: цвет другой или иконку "галочки" добавить и т.д.

А через 3 секунды очистить этот класс, чтобы кнопка стала в исходное положение "скопировать".

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1

Да, собственно, делать тут особо ничего не надо, на эвенте success уже и так есть обработка кнопки, добавляете класс и убираете.

//после загрузки страницы
window.addEventListener('load', function() {
  // получить коллекцию элементов pre на странице
  var pre = document.getElementsByTagName('pre');
  // перебрать все элементы pre с помощью цикла for
  for (var i = 0; i < pre.length; i++) {
    // создать контейнер div 
    var divClipboard = document.createElement('div');
    // добавить к контейнеру div класс .bd-clipboard
    divClipboard.className = 'bd-clipboard';
    // создать элемент span (кнопку Копировать)
    var button = document.createElement('span');
    // добавить к элементу span класс .btn-clipboard
    button.className = 'btn-clipboard';
    // элементу span установить контент Копировать
    button.textContent = 'Скопировать';
    // добавить элемент span в качестве дочернего к элементу div
    divClipboard.appendChild(button);
    // добавить элемент div перед pre
    pre[i].parentElement.insertBefore(divClipboard, pre[i]);
  }
  // инициализируем Clipboard для каждой кнопки
  var btnClipboard = new ClipboardJS('.btn-clipboard', {
    target: function(trigger) {
      console.log(trigger.parentElement.nextElementSibling);
      trigger.clearSelection;
      return trigger.parentElement.nextElementSibling;
    }
  });
  // при успешном копировании
  btnClipboard.on('success', function(event) {
    // убираем выделение
    event.clearSelection();
    // изменяем текст триггера на Скопировано
    event.trigger.textContent = 'Скопировано!';

    /* Доавили класс на кнопку */
    $(event.trigger).addClass('copied');

    // Возращаем через 3 секунды текст триггеру на Копировать 
    window.setTimeout(function() {
      event.trigger.textContent = 'Скопировать';

      /* Удалили класс с кнопки */
      $(event.trigger).removeClass('copied');
    }, 3000);
  });

  // если копирование завершилось с ошибкой
  btnClipboard.on('error', function(event) {
    // изменяем текст кнопки 
    event.trigger.textContent = 'Нажмите "Ctrl + C" для копирования';
    // через 3 секунды возвращаем кнопки текст "Копировать"
    window.setTimeout(function() {
      event.trigger.textContent = 'Копировать';
    }, 3000);
  });

  $('.btn-clipboard').each(function() {
    $(this).attr('data-element-height', $(this).height());
  });

});

.copied {
  border: 2px solid green;
  color: green;
}

.copied:before {
  content: "✔";
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
<pre>Test</pre>

Улучшить clipboard.js

Ответы