Copier l'URL actuelle

Permet de copier dans le presse-papier l'URL visitée

Language: Javascript

Catégorie : Utilities

<script>

let copyButton = document.querySelector('[js-util-copy="url"]');
if (copyButton) {
  copyButton.style.position = 'relative';

  copyButton.addEventListener('click', function () {
    let url = window.location.href;
    navigator.clipboard.writeText(url);

    let messageWrapper = document.querySelector('[js-util-copy-message="message"]');
    if (messageWrapper) {
      if (messageWrapper.style.display === 'none') {
        messageWrapper.style.display = 'block';
      } else if (messageWrapper.classList.contains('hide')) {
        messageWrapper.classList.remove('hide');
      }
      setTimeout(() => {
        if (messageWrapper.style.display === 'block') {
          messageWrapper.style.display = 'none';
        } else if (!messageWrapper.classList.contains('hide')) {
          messageWrapper.classList.add('hide');
        }
      }, 2000);
    } else {
      let messageText =
        document.querySelector('[js-util-copy-message')?.getAttribute('js-util-copy-message') ||
        'Copied!';
      let message = document.createElement('div');
      message.style.position = 'absolute';
      message.style.bottom = '-25px';
      message.style.left = '-15px';
      message.style.display = 'block';
      message.style.whiteSpace = 'nowrap';
      message.setAttribute('id', 'copy-message');
      message.textContent = messageText;

      let existingMessage = copyButton.querySelector('#copy-message');
      if (!existingMessage) {
        copyButton.insertBefore(message, copyButton.firstChild);
      } else {
        existingMessage.style.display = 'block';
      }
      setTimeout(() => {
        (existingMessage || message).style.display = 'none';
      }, 2000);
    }
  });
}

</script>

Sommaire

Utiliser un LLM pour résumer ou expliquer ce script

Le script

Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | Copy Current URL -->
<script src="https://cdn-scripts.justa.fr/dist/util/copy-url.js"></script>

Les attributes

Button - Identifier l'élément permettant à l'utilisateur de copier l'URL

Nom

js-util-copy

Valeur

url

Ajouter l'attribute au bouton (ou n'importe quel élément) qui va permettre à l'utilisateur de copier l'URL

Button - Modifier le message lorsque l'élément a été copié OPTIONNEL

Nom

js-util-copy-message

Valeur

[identifier]

Ajouter l'attribute au même élément que le premier. Remplacer [identifier] par le texte qui doit être affiché

‍Paragraph - Identifier l'élément qui s'affichera lorsque l'élément a été copié OPTIONNEL

Nom

js-util-copy-message

Valeur

message

Ajouter l'attribute à l'élément qui doit être affiché après le clic. Il doit être en display:none ou avec une class "hide"

Utiliser cet attribute ou le précédent. Les deux ne sont pas compatibles.

Copier l'URL actuelle : Tutoriel

Template

Code source du script

<script>

let copyButton = document.querySelector('[js-util-copy="url"]');
if (copyButton) {
  copyButton.style.position = 'relative';

  copyButton.addEventListener('click', function () {
    let url = window.location.href;
    navigator.clipboard.writeText(url);

    let messageWrapper = document.querySelector('[js-util-copy-message="message"]');
    if (messageWrapper) {
      if (messageWrapper.style.display === 'none') {
        messageWrapper.style.display = 'block';
      } else if (messageWrapper.classList.contains('hide')) {
        messageWrapper.classList.remove('hide');
      }
      setTimeout(() => {
        if (messageWrapper.style.display === 'block') {
          messageWrapper.style.display = 'none';
        } else if (!messageWrapper.classList.contains('hide')) {
          messageWrapper.classList.add('hide');
        }
      }, 2000);
    } else {
      let messageText =
        document.querySelector('[js-util-copy-message')?.getAttribute('js-util-copy-message') ||
        'Copied!';
      let message = document.createElement('div');
      message.style.position = 'absolute';
      message.style.bottom = '-25px';
      message.style.left = '-15px';
      message.style.display = 'block';
      message.style.whiteSpace = 'nowrap';
      message.setAttribute('id', 'copy-message');
      message.textContent = messageText;

      let existingMessage = copyButton.querySelector('#copy-message');
      if (!existingMessage) {
        copyButton.insertBefore(message, copyButton.firstChild);
      } else {
        existingMessage.style.display = 'block';
      }
      setTimeout(() => {
        (existingMessage || message).style.display = 'none';
      }, 2000);
    }
  });
}

</script>