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.jsdelivr.net/npm/@justaa/scripts/dist/util/copy-url.js"></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>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.
Nom
Valeur
Nom
Valeur
Nom
Valeur
Nom
Valeur
Tuto
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>.svg)
