Skip to content

Commit 003f35c

Browse files
committed
refactor: refactoring scripts, need pre validation before publishing
1 parent b926dcc commit 003f35c

3 files changed

Lines changed: 88 additions & 69 deletions

File tree

Dist/Functional/CopyToClipboard.js

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,41 @@
11
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();
512
}
613

714
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());
1617
}
1718

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+
}
2524

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);
3128
}
3229

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);
3933
}
4034
}
4135

4236
const initializeCopyToClipboard = () => {
4337
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"]');
4539
triggers.forEach(trigger => {
4640
let instance = new CopyToClipboard(trigger);
4741
window.trickeries.push({'copyToClipboard': instance});

Dist/Functional/CountUp.js

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,47 @@
11
'use strict'
22

3+
class CountUp {
4+
constructor(_counter) {
5+
this.counter = _counter;
6+
this.counterTarget = +_counter.getAttribute("wt-countup-target") || 0;
7+
this.prefix = _counter.getAttribute("wt-countup-prefix") || "";
8+
this.suffix = _counter.getAttribute("wt-countup-suffix") || "";
9+
this.step = +_counter.getAttribute("wt-countup-step") || 1 ;
10+
this.speed = +_counter.getAttribute("wt-countup-speed") || 10;
11+
this.currentVal = 0;
12+
this.counterUp();
13+
}
14+
15+
counterUp = () => {
16+
this.counter.innerHTML = `${this.prefix}${this.currentVal}${this.suffix}`;
17+
if (this.step) this.currentVal += this.step;
18+
else this.currentVal++;
19+
if (this.currentVal > this.counterTarget) clearInterval(this.stop);
20+
}
21+
22+
stop = setInterval(() => {
23+
try {
24+
this.counterUp();
25+
} catch (err) {
26+
clearInterval(this.stop);
27+
}
28+
}, this.speed);
29+
}
30+
331
const InitializeCountUp = () => {
32+
window.trickeries = window.trickeries || [];
433
let counters = document.querySelectorAll("[wt-countup-element='counter']");
5-
634
if(!counters || counters.length === 0) return;
735

8-
for(let c of counters) {
9-
let target = c.getAttribute("wt-countup-target") || 0;
10-
if (!target) return;
11-
let prefix = c.getAttribute("wt-countup-prefix") || "";
12-
let suffix = c.getAttribute("wt-countup-suffix") || "";
13-
let step = +c.getAttribute("wt-countup-step") || 1 ;
14-
let speed = +c.getAttribute("wt-countup-speed") || 10;
15-
let v = 0;
36+
counters.forEach(counter => {
37+
let instance = new CountUp(counter);
38+
window.trickeries.push({'CountUp': instance});
39+
});
1640

17-
let counterUp = () => {
18-
c.innerHTML = `${prefix}${v}${suffix}`;
19-
if (step) v += step;
20-
else v++;
21-
if (v > target) clearInterval(stop);
22-
}
23-
24-
let stop = setInterval(() => {
25-
try {
26-
counterUp();
27-
} catch (err) {
28-
clearInterval(stop);
29-
}
30-
}, speed);
31-
}
32-
};
41+
}
3342

34-
window.addEventListener("DOMContentLoaded", InitializeCountUp());
43+
if (/complete|interactive|loaded/.test(document.readyState)) {
44+
InitializeCountUp();
45+
} else {
46+
window.addEventListener('DOMContentLoaded', InitializeCountUp);
47+
}

Dist/WebflowOnly/HideContainer.js

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,35 @@
11
'use strict'
22

3-
const SetHideContainers = () => {
4-
let containers = document.querySelectorAll('[wt-hidecontainer-element="container"], [wt-hidecontainer-element^="container-"]');
3+
class HideContainer {
4+
constructor(_container) {
5+
this.container = _container;
6+
this.cmsEmptyState = this.container.querySelector('[wt-hidecontainer-element="empty"]') || null;
7+
this.isRemoveContainer= this.container.getAttribute('wt-hidecontainer-remove');
8+
this.init();
9+
}
510

6-
if(!containers || containers.length === 0) return;
11+
init = () => {
12+
this.container
13+
if(this.cmsEmptyState) {
14+
if(this.isRemoveContainer) {this.container.remove();}
15+
else{this.container.style.display = 'none';}
16+
}
17+
}
18+
}
719

8-
containers.forEach((cmsContainer) => {
9-
let _cmsList = cmsContainer.querySelector('[wt-hidecontainer-element="list"]');
10-
if(!_cmsList) return;
11-
let _r = cmsContainer.getAttribute('wt-hidecontainer-remove');
12-
if(_r) {if(_cmsList.classList.contains("w-dyn-empty")) cmsContainer.remove();}
13-
else{if(_cmsList.classList.contains("w-dyn-empty")) cmsContainer.style.display = 'none';}
20+
const InitializeHideContainer = () => {
21+
window.trickeries = window.trickeries || [];
22+
let hcElements = document.querySelectorAll('[wt-hidecontainer-element="container"]');
23+
if(!hcElements || hcElements.length === 0) return;
24+
hcElements.forEach(hcElement => {
25+
let instance = new HideContainer(hcElement);
26+
window.trickeries.push({'CountUp': instance});
1427
});
28+
1529
}
1630

1731
if (/complete|interactive|loaded/.test(document.readyState)) {
18-
SetHideContainers();
32+
InitializeHideContainer();
1933
} else {
20-
window.addEventListener('DOMContentLoaded', function () {
21-
SetHideContainers();
22-
})
34+
window.addEventListener('DOMContentLoaded',InitializeHideContainer )
2335
}

0 commit comments

Comments
 (0)