Всплывающие подсказки + Выделите анимацию с помощью Clipboard.js Нажмите

Я успешно установил clipboard.js и получил фрагменты текста для копирования в буфер обмена после клика. Я собираюсь вставить эти фрагменты текста (или "btn" с ними внутри) в ячейках таблицы.

Моя задача:

Мне нужны фрагменты текста, чтобы дать мне подсказку "Скопировано!". чтобы люди знали, что они доступны для просмотра. Хорошим примером этого является страница документации clipboard.js - нажмите любую из кнопок, которые вырезают или копируют, чтобы увидеть всплывающее сообщение.

Из документации clipboard.js:

Хотя операции копирования/вырезания с помощью execCommand не поддерживаются Safari пока (включая мобильный), он изящно деградирует, потому что Выбор поддерживается.

Это означает, что вы можете показать всплывающую подсказку "Скопировано! когда событие успеха и нажмите Ctrl + C, чтобы скопировать, когда вызывается событие ошибки, потому что текст уже выбран.

Я не особенно разбираюсь в JS (мне потребовалось несколько часов, чтобы зайти так далеко). Итак, я в тупике... смог установить все на WP, вставить script и добавить текст/функциональность:

 <!-- 1. Define some markup -->
    <div id="btn" data-clipboard-text="1">
        <span>text to click</span>
    </div>

    <!-- 2. Include library -->
    <script src="/path/to/dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard by passing a HTML element -->
    <script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);

    clipboard.on('success', function(e) {
    console.log(e);
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    });

    clipboard.on('error', function(e) {
        console.log(e);
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
    </script>

Что я должен добавить? Спасибо!

Ответ 1

Похоже, все, что вы хотите сделать, это интегрировать Clipboard.js с помощью подсказки.

Итак, как вы можете это сделать, используя всплывающую подсказку Bootstrap.

// Tooltip

$('button').tooltip({
  trigger: 'click',
  placement: 'bottom'
});

function setTooltip(btn, message) {
  $(btn).tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip(btn) {
  setTimeout(function() {
    $(btn).tooltip('hide');
  }, 1000);
}

// Clipboard

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  setTooltip(e.trigger, 'Copied!');
  hideTooltip(e.trigger);
});

clipboard.on('error', function(e) {
  setTooltip(e.trigger, 'Failed!');
  hideTooltip(e.trigger);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary" data-clipboard-text="It worked!">Click me</button>
<button class="btn btn-primary" data-clipboard-text="It worked again!">Click me</button>

Ответ 2

Я придумал небольшое улучшение кода Zeno, который заключает его в функцию jQuery и поддерживает копирование из произвольного элемента:

if (typeof $.uf === 'undefined') {
    $.uf = {};
}

$.uf.copy = function (button) {
    var _this = this;

    var clipboard = new ClipboardJS(button, {
        text: function(trigger) {
            var el = $(trigger).closest('.js-copy-container').find('.js-copy-target');
            if (el.is(':input')) {
                return el.val();
            } else {
                return el.html();
            }
        }
    });

    clipboard.on('success', function(e) {
        setTooltip(e.trigger, 'Copied!');
        hideTooltip(e.trigger);
    });

    clipboard.on('error', function(e) {
        setTooltip(e.trigger, 'Failed!');
        hideTooltip(e.trigger);
    });

    function setTooltip(btn, message) {
        $(btn)
        .attr('data-original-title', message)
        .tooltip('show');
    }
    
    function hideTooltip(btn) {
        setTimeout(function() {
            $(btn).tooltip('hide')
            .attr('data-original-title', "");
        }, 1000);
    }

    // Tooltip
    $(button).tooltip({
        trigger: 'click'
    });
};

// Link all copy buttons
$.uf.copy('.js-copy-trigger');

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="#" onclick="location.href='https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" rel="stylesheet"/>

<form>
 <div class="form-group">
  <label>Email</label>
  <div class="input-group js-copy-container">
    <input type="text" class="form-control js-copy-target" name="email" autocomplete="off" value="[email protected]" placeholder="Email goes here" disabled>
    <span class="input-group-btn">
      <button class="btn btn-default js-copy-trigger" type="button">Copy</button>
    </span>
  </div>
 </div>
</form>