12/04/2022

Comment faire un bouton avec clipboard

Demo

Code

Javascript

(function() {
    "use strict";

    function updateClipboard(newClip) {
        navigator.clipboard.writeText(newClip).then(function() {
            // Le clip board est mis à jour
        }, function() {
            // Buge
        });
    }

    function highlightButton(btn) {
        btn.classList.add('btn-success')
        setTimeout(() => {
            btn.classList.remove('btn-success')
        }, 600); 
    }
        
    document.querySelectorAll('.btn-clipboard').forEach((btn) => {
        btn.addEventListener('click', () => {
            updateClipboard(document.querySelector('#' + btn.getAttribute('for')).value)
            highlightButton(btn)
        })
    })
})();

Html

<input disabled id="target-clipboard" type="text" placeholder="Url" value="https://google.fr">
<button type="button" class="btn-clipboard" for="target-clipboard"><i class="bi bi-clipboard"></i></button>

Avec un style bootstrap 5 ça donne ça :

<label for="document_reference_file" class="form-label">Fichier</label>
<div class="input-group">
    <input disabled id="target-clipboard" type="text" class="form-control" placeholder="Url du document" value="{{ app.request.schemeAndHttpHost ~ app.request.baseUrl }}/{{document_reference.file}}">
    <button type="button" class="btn btn-outline-secondary btn-clipboard" for="target-clipboard"><i class="bi bi-clipboard"></i></button>
    <a href="/{{document_reference.file}}" class="btn btn-outline-secondary" target="_blank"><i class="bi bi-download"></i></a>
</div>

C’est bon c’est ok

Hugo

Petite précision sur la partie demo. ça n’a rien a voir avec le clipboard mais c’est interessant. Ce blog fonctionne avec la techno hugo. J’écris mes articles au format Markdown et hugo se charge des les convertir en HTML.

Pour réaliser la partie Demo de cet article, j’ai mis directement le code dans le fichier markdown et le navigateur interprete tout ça directement. Cependant, par défaut ça ne fonctionne pas. Hugo ne charge pas le html qui est viens du fichier .md. Il considère ça comme non secure. Pour bypass, il faut dans le fichier de config config.toml Ajouter ces lignes :

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

Ajouter le code javascript un peu au pif dans la page n’est pas très pratique non plus. En effet il ne sera pas executé au chargement de la page et dans mon cas, le documment.querySelector ne retourne rien. Du coup il faut s’assurer qu’il s’execute quand la page est totalement chargée.

Je rajoute donc mon code dans un listener et c’est good

document.addEventListener("DOMContentLoaded", function(event) { 
    // Je fou js mon code ici
});

Cette partie là n’est pas necessaire mais c’est pour ne pas oublier plus tard ;)