web-dev-qa-db-fra.com

Info-bulles + surligner l'animation avec Clipboard.js Cliquez sur

J'ai réussi à installer clipboard.js et j'ai obtenu des extraits de texte à copier dans le presse-papiers au clic. Je vais imbriquer ces extraits de texte (ou les "btn" dans lesquels ils se trouvent) dans les cellules d'un tableau.

Mon défi:

J'ai besoin des extraits de texte pour me donner une info-bulle "Copié!" message afin que les gens sachent qu'ils sont cliquables. Un bon exemple de cela est sur la page de documentation de clipboard.js - cliquez sur l'un des boutons qui coupent ou copient pour voir le message d'info-bulle.

De la documentation de clipboard.js:

Bien que les opérations de copie/découpe avec execCommand ne soient pas encore prises en charge sur Safari (y compris sur mobile), elles se dégradent gracieusement car la sélection est prise en charge.

Cela signifie que vous pouvez afficher une info-bulle disant Copié! lorsque l'événement de réussite est appelé et appuyez sur Ctrl + C pour copier lorsque l'événement d'erreur est appelé car le texte est déjà sélectionné.

Je ne suis pas particulièrement habile chez JS (il m'a fallu quelques heures pour en arriver là). Je suis donc dans une impasse ... j'ai pu tout installer sur WP, mettre le script en file d'attente et ajouter le texte/la fonctionnalité:

 <!-- 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>

Que dois-je ajouter? Merci!

javascriptclipboard.js
20
PercentSharp

On dirait que tout ce que vous voulez faire est d'intégrer Clipboard.js à une solution Tooltip.

Alors, voici comment vous pouvez accomplir cela en utilisant l'info-bulle de 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>
54
Zeno Rocha

J'ai trouvé une légère amélioration du code de Zeno, qui l'enveloppe dans une fonction jQuery et prend en charge la copie à partir d'un élément arbitraire:

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="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 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>

Vous remarquerez que nous avons notre bouton avec une classe de js-copy-trigger, et le texte/contrôle à copier avec le js-copy-target classe. Ces deux éléments sont enveloppés dans un js-copy-container classe.

C'est bien mieux que d'utiliser des cibles id, car vous devez souvent générer plusieurs boutons de copie (par exemple, dans un tableau) et les id doivent être uniques sur une page.

6
alexw