https://www.lihus.fr/wp-content/themes/visibilite/assets/js/inc/adico-base/AdicoClipboard.js

1/**
2 *
3 * Création de la directive d'attribut "adico-clipboard"
4 * pour pouvoir copier du texte dans le presse-papier
5 *
6 * Exemple d'utilisation :
7 * <li adico-clipboard="Texte à copier">Texte à copier</li>
8 *
9 * OU
10 *
11 * <li adico-clipboard>Texte à copier</li>
12 *
13 */
14export default class AdicoClipboard {
15    attribute = "adico-clipboard";
16    options = {
17        popup: true,
18        time: 3000,
19    };
20    elementsUsedAttribute = {};
21
22    /**
23     * @param {Object} options
24     * @param {Boolean} options.popup - Affiche une popup de confirmation
25     * @param {Number} options.time - Temps en millisecondes
26     */
27    constructor(options = undefined) {
28        if (options) {
29            this.options = { ...this.options, ...options };
30        }
31        this.init();
32    }
33
34    init() {
35        this.initElements();
36        this.initEvents();
37    }
38
39    initElements() {
40        this.elements = document.querySelectorAll(`[${this.attribute}]`);
41        const codeBlock = document.querySelectorAll('code');
42        if (codeBlock.length > 0) {
43            this.elements = [...this.elements, ...codeBlock]
44        }
45    }
46
47    initEvents() {
48        this.elements.forEach((element) => {
49            element.addEventListener("click", () => {
50                this.copy(element);
51            });
52        });
53    }
54
55    /**
56     * Copie le texte dans le presse-papier
57     * @param {HTMLElement} element
58     */
59    copy(element) {
60        let text = element.getAttribute(this.attribute);
61        if (!text) {
62            text = element.innerText;
63        }
64
65        const textArea = document.createElement("textarea");
66        textArea.value = text;
67        document.body.appendChild(textArea);
68
69        textArea.select();
70        document.execCommand("copy");
71
72        document.body.removeChild(textArea);
73
74        if (this.options.popup) {
75            this.popup(`"${text}" copié !`);
76        }
77    }
78
79    /**
80     * Affiche une popup de confirmation
81     * @param {String} message
82     */
83    popup(message) {
84        let popup = document.createElement("div");
85        popup.classList.add("adico-popup");
86
87        popup.style.position = "fixed";
88        popup.style.bottom = "1rem";
89        popup.style.left = "1rem";
90        popup.style.padding = "1rem";
91        popup.style.fontSize = "0.9rem";
92        popup.style.backgroundColor = "white";
93        popup.style.zIndex = "99999";
94
95        popup.innerText = message;
96        document.body.appendChild(popup);
97
98        setTimeout(() => {
99            popup.remove();
100        }, this.options.time);
101    }
102}