Descrizione comandi + Evidenzia animazioni con Clipboard.js Fare clic su

Question

Ho installato con successo clipboard.js e ho ottenuto frammenti di testo da copiare negli Appunti al clic. Ho intenzione di nidificare questi frammenti di testo (o "btn" in cui sono all'interno) nelle celle di un tavolo.

La mia sfida: "copiato"

Ho bisogno dei frammenti di testo per darmi un Tooltip messaggio in modo che le persone siano consapevoli di essere cliccabili. Un grande esempio di ciò si trova nella pagina della documentazione di clipboard.js - fai clic su uno dei pulsanti che taglia o copia per vedere il messaggio del suggerimento.

Dalla documentazione clipboard.js':

Anche se le operazioni di copia/tagliato con execCommand non sono supportati su Safari ancora (comprese quelle mobili), si degrada con grazia perché selezione è supportato.

Ciò significa che è possibile visualizzare un suggerimento dicendo Copiato! quando l'evento di successo è chiamato e premere Ctrl + C per copiare quando viene chiamato l'evento di errore perché il testo è già selezionato.

Non sono particolarmente abile a JS (mi ci sono volute alcune ore per arrivare così lontano). Quindi sono a un punto morto ... era in grado di installare tutto il WP, accodare la sceneggiatura, e aggiungere il testo/funzionalità:

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

Cosa dovrei aggiungere? Grazie!

Answer 1

Sembra che tutto ciò che si vuole fare sia integrare Clipboard.js con una soluzione Tooltip.

Ecco come ottenere ciò utilizzando la descrizione comando di 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>

Answer 2

mi è venuta in mente un leggero miglioramento per il codice di Zeno, che avvolge in una funzione jQuery, e supporta la copia da un elemento arbitrario:

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>

Noterete che abbiamo il nostro pulsante con una classe di js-copy-trigger e il testo/controllo da copiare con la classe js-copy-target. Entrambi sono avvolti in una classe comune js-copy-container.

Questo è molto meglio che utilizzare gli obiettivi id, perché è spesso necessario generare più pulsanti di copia (ad esempio, in una tabella), e id s deve essere univoco in una pagina.