https://hotokami.jp/assets/controllers/slug_url_copy_controller-3a7a18b9.js

1import {Controller} from '@hotwired/stimulus';
2
3// /prayers/:slug の canonical URL をコピーする
4// data-controller="slug-url-copy" data-slug-url-copy-url-value="https://hotokami.jp/prayers/koya/"
5// data-action="click->slug-url-copy#copy"
6// data-slug-url-copy-target="label" を持つ要素のテキストを一時差し替えしてフィードバック
7export default class extends Controller {
8	static values = {url: String};
9	static targets = ['label'];
10
11	copy(event) {
12		event.preventDefault();
13		if (!this.urlValue) {
14			return;
15		}
16
17		navigator.clipboard.writeText(this.urlValue).then(() => {
18			this.flashLabel('<i class="fas fa-check mr-1"></i>コピーしました');
19		}).catch(err => {
20			console.error('clipboard write failed:', err);
21			this.flashLabel('<i class="fas fa-times mr-1"></i>コピーに失敗しました');
22		});
23	}
24
25	flashLabel(html) {
26		if (!this.hasLabelTarget) {
27			return;
28		}
29
30		// 連打されても元の HTML を失わないよう、最初の original のみ保持する
31		if (this._flashTimer) {
32			clearTimeout(this._flashTimer);
33		} else {
34			this._originalLabel = this.labelTarget.innerHTML;
35		}
36
37		this.labelTarget.innerHTML = html;
38		this._flashTimer = setTimeout(() => {
39			this.labelTarget.innerHTML = this._originalLabel;
40			this._flashTimer = null;
41			this._originalLabel = null;
42		}, 2000);
43	}
44}