https://my.energytransitionmodel.com/assets/controllers/clipboard_…c7a59d6fb59856535a49418c61bf4fef03ce36f9.js

1import { useTransition } from "stimulus-use";
2import { Controller } from "@hotwired/stimulus";
3
4// https://github.com/stimulus-components/stimulus-clipboard/blob/master/src/index.ts
5// MIT Licensed
6export default class extends Controller {
7  static targets = ["button", "notice", "source"];
8
9  static values = {
10    successDuration: { type: Number, default: 5000 },
11  };
12
13  connect() {
14    if (this.hasNoticeTarget) {
15      useTransition(this, {
16        element: this.noticeTarget,
17        enterActive: "transition ease-out duration-100",
18        enterFrom: "transform opacity-0",
19        enterTo: "transform opacity-100",
20        leaveActive: "transition ease-in duration-150",
21        leaveFrom: "transform opacity-100",
22        leaveTo: "transform opacity-0",
23        transitioned: false,
24      });
25    }
26  }
27
28  copy(event) {
29    event.preventDefault();
30
31    const text = this.sourceTarget.innerText || this.sourceTarget.value;
32    navigator.clipboard.writeText(text).then(() => this.copied());
33  }
34
35  copied() {
36    if (!this.hasNoticeTarget) return;
37
38    if (this.timeout) {
39      clearTimeout(this.timeout);
40    }
41
42    this.buttonTarget.disabled = true;
43    this.enter();
44
45    this.timeout = setTimeout(() => {
46      this.buttonTarget.disabled = false;
47      this.leave();
48    }, this.successDurationValue);
49  }
50};