|
1 | 1 | class CopyToClipboard { |
2 | | - constructor(_trigger) { |
3 | | - this.triggerSelector = _trigger; |
4 | | - this.initialize(); |
| 2 | + constructor(_ctcContainer) { |
| 3 | + this.ctcContainer = _ctcContainer; |
| 4 | + this.ctcTrigger = this.ctcContainer.querySelector(`[wt-copycb-element="trigger"]`) || null; |
| 5 | + this.ctcTarget = this.ctcContainer.querySelector(`[wt-copycb-element="target"]`) || null; |
| 6 | + this.ctcDefaultTxt = this.ctcTrigger.innerText; |
| 7 | + this.textToCopy = this.ctcTarget.innerText; |
| 8 | + this.copiedTxt = this.ctcTrigger.getAttribute("wt-copycb-message") || null; |
| 9 | + this.activeClass = this.ctcTrigger.getAttribute('wt-copycb-active') || 'is-copy'; |
| 10 | + this.timeOut = this.ctcTrigger.getAttribute('wt-copycb-timeout') || 2000; |
| 11 | + this.initialize(); |
5 | 12 | } |
6 | 13 |
|
7 | 14 | initialize() { |
8 | | - let _triggerAttr = this.triggerSelector.getAttribute('wt-copycb-element'); |
9 | | - let index = _triggerAttr.replace('trigger', ''); |
10 | | - let _target = document.querySelector(`[wt-copycb-element="target${index}"]`); |
11 | | - if (_target) { |
12 | | - this.triggerSelector.addEventListener('click', () => { |
13 | | - this.copyTextToClipboard(this.triggerSelector, _target, index); |
14 | | - }); |
15 | | - } |
| 15 | + if(!this.ctcTrigger || !this.ctcTarget) return; |
| 16 | + this.ctcTrigger.addEventListener('click', () => this.copyTextToClipboard()); |
16 | 17 | } |
17 | 18 |
|
18 | | - copyTextToClipboard(_trigger, _target, index) { |
19 | | - let textToCopy = _target.innerText; |
20 | | - let copiedTxt = _trigger.getAttribute("wt-copycb-message"); |
21 | | - let activeClass = _trigger.getAttribute('wt-copycb-active'); |
22 | | - let timeOut = _trigger.getAttribute('wt-copycb-timeout') || 2000; |
23 | | - let _defaultTxt = _trigger.innerText; |
24 | | - let textTarget = document.querySelector(`[wt-copycb-element="text-target${index}"]`); |
| 19 | + copyTextToClipboard() { |
| 20 | + this.updateTriggerDisplay(); |
| 21 | + setTimeout(() => this.resetTriggerDisplay(), this.timeOut); |
| 22 | + navigator.clipboard.writeText(this.textToCopy); |
| 23 | + } |
25 | 24 |
|
26 | | - this.updateTriggerDisplay(copiedTxt, textTarget, _trigger, activeClass); |
27 | | - setTimeout(() => { |
28 | | - this.updateTriggerDisplay(_defaultTxt, textTarget, _trigger, activeClass); |
29 | | - }, timeOut); |
30 | | - navigator.clipboard.writeText(textToCopy); |
| 25 | + updateTriggerDisplay() { |
| 26 | + if (this.copiedTxt) this.ctcTrigger.innerText = this.copiedTxt; |
| 27 | + if (this.activeClass) this.ctcTrigger.classList.toggle(this.activeClass); |
31 | 28 | } |
32 | 29 |
|
33 | | - updateTriggerDisplay(_txt, _target, _trigger, _class) { |
34 | | - if (_txt) { |
35 | | - if (_target) _target.innerText = _txt; |
36 | | - else _trigger.innerHTML = _txt; |
37 | | - } |
38 | | - if (_class) _trigger.classList.toggle(_class); |
| 30 | + resetTriggerDisplay() { |
| 31 | + if (this.copiedTxt) this.ctcTrigger.innerText = this.ctcDefaultTxt; |
| 32 | + if (this.activeClass) this.ctcTrigger.classList.toggle(this.activeClass); |
39 | 33 | } |
40 | 34 | } |
41 | 35 |
|
42 | 36 | const initializeCopyToClipboard = () => { |
43 | 37 | window.trickeries = window.trickeries || []; |
44 | | - const triggers = document.querySelectorAll('[wt-copycb-element^="trigger-"], [wt-copycb-element="trigger"]'); |
| 38 | + const triggers = document.querySelectorAll('[wt-copycb-element="container"]'); |
45 | 39 | triggers.forEach(trigger => { |
46 | 40 | let instance = new CopyToClipboard(trigger); |
47 | 41 | window.trickeries.push({'copyToClipboard': instance}); |
|
0 commit comments