Tooltips + Hervorhebung Animation mit Clipboard.js Klicken Sie

Question

Ich habe clipboard.js erfolgreich installiert und habe Textschnipsel erhalten, die beim Klicken in die Zwischenablage kopiert werden. Ich werde diese Textschnipsel (oder die "Btn", in denen sie sich befinden) in die Zellen einer Tabelle verschachteln.

Meine Herausforderung: „Kopierte“

Ich brauche die Textauszüge, mir einen Tooltip zu geben Nachricht, damit die Benutzer wissen, dass sie anklickbar sind. Ein gutes Beispiel dafür finden Sie auf der Dokumentationsseite der clipboard.js - klicken Sie auf eine der Schaltflächen, die ausgeschnitten oder kopiert werden, um die QuickInfo zu sehen.

Von clipboard.js' Dokumentation:

Obwohl Kopieren/Ausschneiden Operationen mit execCommand nicht auf Safari noch unterstützt (einschließlich Mobilfunk), es degradiert anmutig weil Selection unterstützt wird.

Das bedeutet, Sie können eine QuickInfo sagen Kopiert zeigen! Wenn das Erfolgsereignis aufgerufen wird, und drücken Sie Strg + C, um zu kopieren, wenn ein Fehlerereignis aufgerufen wird, da der Text bereits ausgewählt ist.

Ich bin nicht besonders geschickt in JS (ich brauchte ein paar Stunden, um so weit zu kommen). So bin ich in einer Sackgasse ... der Lage war, alles auf WP zu installieren, enqueue das Skript, und fügen Sie den Text/Funktionalität:

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

Was sollte ich hinzufügen? Danke!

Answer 1

Scheint alles, was Sie tun möchten, ist Clipboard.js mit einer Tooltip-Lösung zu integrieren.

So können Sie das mit Bootstrap Tooltip erreichen.

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

Answer 2

Ich habe mit einer leichten Verbesserung zu Zenons Code kommen, die es in einem jQuery-Funktion wickelt und unterstützt das Kopieren von einem beliebigen Element:

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

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

 
    var clipboard = new Clipboard(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="example@example.com" 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>

Sie werden feststellen, dass wir unseren Button mit einer Klasse von 01 habenund der zu kopierende Text/Steuerelement mit der Klasse js-copy-target. Beide sind in einer gemeinsamen js-copy-container Klasse verpackt.

Dies ist viel besser als die Verwendung von id Ziele, weil Sie oft mehrere Schaltflächen zum Kopieren (z. B. in einer Tabelle) generieren müssen, und id s muss auf einer Seite eindeutig sein.