@gouvfr/dsfr-roller/src/script/main/elements/copy-snippet.js

Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR

import { Element } from '../core/element.js'

class CopySnippet extends Element {
  get button () {
    return this.element;
  }

  init() {
    this._copyLabel = this.button.innerText;
    this._copiedLabel = this.button.getAttribute('data-label-copied');
    this._code = this.getCodeToCopy();
    this.listenClick(this.button);
  }

  getCodeToCopy () {
    const card = this.button.closest('.fr-card');
    const pictogramPreview = card?.querySelector('.pictogram-preview');
    if (pictogramPreview) return pictogramPreview.innerHTML.trim();

    return this.button.getAttribute('data-copy-value') || this.button.previousElementSibling?.innerText || '';
  }

  get isCopied () {
    return this._isCopied;
  }

  set isCopied (value) {
    this._isCopied = value;
    this.button.innerText = value ? this._copiedLabel : this._copyLabel;
    this.button.disabled = value;
  }

  handleClick () {
    if (!this._code) return;
    navigator.clipboard.writeText(this._code);
    this.isCopied = true;
    setTimeout(this._handleTimeout.bind(this), 1500);
  }

  _handleTimeout () {
    this.isCopied = false;
  }
}

export default CopySnippet;