https://angivillers.fr/wp-content/themes/visibilite2/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    }
42
43    initEvents() {
44        this.elements.forEach((element) => {
45            element.addEventListener("click", () => {
46                this.copy(element);
47            });
48        });
49    }
50
51    /**
52     * Copie le texte dans le presse-papier
53     * @param {HTMLElement} element
54     */
55    copy(element) {
56        let text = element.getAttribute(this.attribute);
57        if (!text) {
58            text = element.innerText;
59        }
60
61        const textArea = document.createElement("textarea");
62        textArea.value = text;
63        document.body.appendChild(textArea);
64
65        textArea.select();
66        document.execCommand("copy");
67
68        document.body.removeChild(textArea);
69
70        if (this.options.popup) {
71            this.popup(`"${text}" copié !`);
72        }
73    }
74
75    /**
76     * Affiche une popup de confirmation
77     * @param {String} message
78     */
79    popup(message) {
80        let popup = document.createElement("div");
81        popup.classList.add("adico-popup");
82
83        popup.style.position = "fixed";
84        popup.style.bottom = "1rem";
85        popup.style.left = "1rem";
86        popup.style.padding = "1rem";
87        popup.style.fontSize = "0.9rem";
88        popup.style.backgroundColor = "white";
89        popup.style.zIndex = "99999";
90
91        popup.innerText = message;
92        document.body.appendChild(popup);
93
94        setTimeout(() => {
95            popup.remove();
96        }, this.options.time);
97    }
98}