javascript - variable - window clipboard js

Tooltips+Resaltar animación con Clipboard.js Haga clic en

Question

He instalado exitosamente clipboard.js y he obtenido fragmentos de texto para copiar al portapapeles al hacer clic. Voy a anidar estos fragmentos de texto (o los "btn" que están dentro) en las celdas de una tabla.

Mi reto:

Necesito los fragmentos de texto para darme una información sobre herramientas "¡Copiado!" Mensaje para que las personas estén conscientes de que se puede hacer clic. Un gran ejemplo de esto se encuentra en la página de documentación de clipboard.js: haga clic en cualquiera de los botones que cortan o copian para ver el mensaje de información sobre herramientas.

De la documentación de clipboard.js:

Aunque las operaciones de copia / corte con execCommand aún no son compatibles con Safari (incluido el móvil), se degradan con gracia porque se admite la selección.

Eso significa que puedes mostrar una información sobre herramientas que dice Copiado! cuando se llama al evento de éxito y Presione Ctrl + C para copiar cuando se llama el evento de error porque el texto ya está seleccionado.

No soy particularmente adepto en JS (me tomó algunas horas llegar hasta aquí). Así que estoy en un callejón sin salida ... pude instalar todo en WP, poner en cola el script y agregar el texto / funcionalidad:

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

¿Qué debo añadir? ¡Gracias!

Answer 1

He encontrado una pequeña mejora en el código de Zeno, que lo envuelve en una función jQuery, y soporta la copia desde 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="[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>

Notará que tenemos nuestro botón con una clase de js-copy-trigger y el texto / control que se copiará con la clase js-copy-target . Ambos están envueltos en una clase común js-copy-container .

Esto es mucho mejor que usar objetivos de id , ya que a menudo es necesario generar múltiples botones de copia (por ejemplo, en una tabla), y las id deben ser únicas en una página.

Answer 2

Parece que todo lo que quieres hacer es integrar Clipboard.js con una solución Tooltip.

Así que aquí está cómo puedes lograr eso usando la información sobre herramientas 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>