Skip to content

Commit 20f385f

Browse files
JorchCortezJorchCortez
authored
Merge pull request #15 from TheCodeRaccoons/Script-Refactory
Bringing changes to Main
2 parents 619e154 + d0e93cc commit 20f385f

8 files changed

Lines changed: 214 additions & 160 deletions

File tree

‎Dist/Functional/CopyToClipboard.js‎

Lines changed: 42 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,49 @@
1-
'use strict'
2-
3-
const UpdateTriggerDisplay = (_txt, _target, _trigger, _class ) => {
4-
if (_txt){
5-
if(_target) _target.innerText = _txt;
6-
else _trigger.innerHTML = _txt;
7-
}
8-
if (_class) _trigger.classList.toggle(_class);
9-
}
10-
11-
const SetCopyToClipboard = () => {
12-
const copyTriggers = document.querySelectorAll('[wt-copycb-element^="trigger-"], [wt-copycb-element="trigger"]');
1+
class CopyToClipboard {
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();
12+
}
1313

14-
if(!copyTriggers || copyTriggers.length === 0) return;
14+
initialize() {
15+
if(!this.ctcTrigger || !this.ctcTarget) return;
16+
this.ctcTrigger.addEventListener('click', () => this.copyTextToClipboard());
17+
}
1518

16-
for(let _trigger of copyTriggers) {
17-
let _triggerAttr = _trigger.getAttribute(`wt-copycb-element`);
18-
let index = _triggerAttr.replace('trigger','');
19-
let _target = document.querySelector(`[wt-copycb-element="target${index}"]`);
19+
copyTextToClipboard() {
20+
this.updateTriggerDisplay();
21+
setTimeout(() => this.resetTriggerDisplay(), this.timeOut);
22+
navigator.clipboard.writeText(this.textToCopy);
23+
}
2024

21-
if(_target) {
22-
_trigger.addEventListener('click', () => {
23-
let textToCopy = _target.innerText;
24-
let copiedTxt = _trigger.getAttribute("wt-copycb-message");
25-
let activeClass = _trigger.getAttribute('wt-copycb-active');
26-
let timeOut = _trigger.getAttribute('wt-copycb-timeout') || 2000;
27-
let _defaultTxt = _trigger.innerText;
28-
let textTarget = document.querySelector(`[wt-copycb-element="text-target${index}"]`);
25+
updateTriggerDisplay() {
26+
if (this.copiedTxt) this.ctcTrigger.innerText = this.copiedTxt;
27+
if (this.activeClass) this.ctcTrigger.classList.toggle(this.activeClass);
28+
}
2929

30-
UpdateTriggerDisplay(copiedTxt, textTarget, _trigger, activeClass);
31-
setTimeout(() => {
32-
UpdateTriggerDisplay(_defaultTxt, textTarget, _trigger, activeClass);
33-
}, timeOut);
34-
navigator.clipboard.writeText(textToCopy);
35-
});
36-
}
30+
resetTriggerDisplay() {
31+
if (this.copiedTxt) this.ctcTrigger.innerText = this.ctcDefaultTxt;
32+
if (this.activeClass) this.ctcTrigger.classList.toggle(this.activeClass);
3733
}
3834
}
3935

40-
window.addEventListener('DOMContentLoaded', SetCopyToClipboard());
36+
const initializeCopyToClipboard = () => {
37+
window.trickeries = window.trickeries || [];
38+
const triggers = document.querySelectorAll('[wt-copycb-element="container"]');
39+
triggers.forEach(trigger => {
40+
let instance = new CopyToClipboard(trigger);
41+
window.trickeries.push({'CopyToClipboard': instance});
42+
});
43+
}
44+
45+
if (/complete|interactive|loaded/.test(document.readyState)) {
46+
initializeCopyToClipboard();
47+
} else {
48+
window.addEventListener('DOMContentLoaded', initializeCopyToClipboard);
49+
}

‎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/Functional/FormCheck.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,17 @@ class FormCheck {
112112
}
113113
}
114114

115-
document.addEventListener('DOMContentLoaded', () => {
115+
const initializeFormCheck = () => {
116+
window.trickeries = window.trickeries || [];
116117
const forms = document.querySelectorAll('[wt-formcheck-element="form"]');
117-
forms.forEach(form => new FormCheck(form));
118-
});
118+
forms.forEach(form => {
119+
let instance = new FormCheck(form);
120+
window.trickeries.push({'FormCheck': instance});
121+
});
122+
}
123+
124+
if (/complete|interactive|loaded/.test(document.readyState)) {
125+
initializeFormCheck();
126+
} else {
127+
window.addEventListener('DOMContentLoaded', initializeFormCheck)
128+
}

‎Dist/Functional/FormatNumbers.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,8 @@ const InitializeFormatNumbers = () => {
6868
}
6969
}
7070

71-
window.addEventListener('DOMContentLoaded', InitializeFormatNumbers());
71+
if (/complete|interactive|loaded/.test(document.readyState)) {
72+
InitializeFormatNumbers();
73+
} else {
74+
window.addEventListener('DOMContentLoaded', InitializeFormatNumbers)
75+
}

‎Dist/Functional/LimitText.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,8 @@ const LimitText = () => {
1616
}
1717
}
1818

19-
window.addEventListener('DOMContentLoaded', LimitText());
19+
if (/complete|interactive|loaded/.test(document.readyState)) {
20+
LimitText();
21+
} else {
22+
window.addEventListener('DOMContentLoaded', LimitText)
23+
}

‎Dist/Functional/ReadTime.js‎

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,46 @@
11
'use strict'
22

3-
const SetReadTime = () => {
4-
const timeDisplays = document.querySelectorAll('[wt-readtime-element="display"]');
5-
const container = document.querySelector('[wt-readtime-element="article"]');
6-
7-
let valid = true;
8-
let err = []
9-
10-
if(!timeDisplays || timeDisplays.length === 0) {
11-
err.push(`%c display element is missing`);
12-
valid = false;
13-
}
14-
if(!container){
15-
err.push(`%c article element is missing`);
16-
valid = false;
3+
class ReadTime {
4+
constructor(_container) {
5+
this.articleContainer = _container;
6+
this.timeDisplays = document.querySelectorAll('[wt-readtime-element="display"]');
7+
this.text = this.articleContainer ? this.articleContainer.innerText : "";
8+
this.words = this.text.trim().split(/\s+/).length;
9+
this.wpm = this.articleContainer.getAttribute("wt-readtime-words") || 225;
10+
this.suffix = this.articleContainer.getAttribute('wt-readtime-suffix') || "";
11+
this.smallsuffix = this.articleContainer.getAttribute('wt-readtime-smallsuffix') || "";
12+
this.rawTime = this.words / this.wpm;
13+
this.init();
1714
}
1815

19-
if (!valid) {
20-
console.log("%cThanks for using Webflow Trickery","color: blue; font-size: 18px; padding: 8px; font-weight:500");
21-
console.log("%cIt seems like you're missing an element that is required for the integration.","color: red; font-size: 12px; padding: 8px; font-weight:500");
22-
for(let e of err){
23-
console.log(e,"color: red; font-size: 12px; padding: 8px; font-weight:500")
24-
}
25-
return;
16+
init = () => {
17+
if(this.timeDisplays && this.timeDisplays.length > 0) this.SetReadTime();
2618
}
2719

28-
const text = container.innerText;
29-
const words = text.trim().split(/\s+/).length;
30-
const wpm = container.getAttribute("wt-readtime-words") || 225;
31-
const suffix = container.getAttribute('wt-readtime-suffix');
32-
const smallsuffix = container.getAttribute('wt-readtime-smallsuffix');
33-
const rawTime = words / wpm;
34-
35-
for(let display of timeDisplays) {
36-
if(rawTime < 1 ) {
37-
display.innerText = smallsuffix ? smallsuffix : "less than a minute.";
38-
}
39-
else if(rawTime == 1 ) {
40-
display.innerText = "a minute.";
41-
}
42-
else {
43-
display.innerText = suffix ? `${Math.ceil(rawTime)} ${suffix}` : `${Math.ceil(rawTime)} minutes.`;
20+
SetReadTime = () => {
21+
for(let _display of this.timeDisplays) {
22+
if(this.rawTime < 1 )
23+
_display.innerText = this.smallsuffix ? this.smallsuffix : "less than a minute.";
24+
else if(this.rawTime == 1 )
25+
_display.innerText = "a minute.";
26+
else
27+
_display.innerText = this.suffix ? `${Math.ceil(this.rawTime)} ${this.suffix}` : `${Math.ceil(this.rawTime)} minutes.`;
4428
}
4529
}
4630
}
4731

48-
window.addEventListener('DOMContentLoaded', SetReadTime());
32+
const InitializeReadTime = () => {
33+
window.trickeries = window.trickeries || [];
34+
let articleContainers = document.querySelectorAll('[wt-readtime-element="article"]');
35+
if(!articleContainers || articleContainers.length === 0) return;
36+
articleContainers.forEach(article => {
37+
let instance = new ReadTime(article);
38+
window.trickeries.push({'ReadTime': instance});
39+
});
40+
}
41+
42+
if (/complete|interactive|loaded/.test(document.readyState)) {
43+
InitializeReadTime();
44+
} else {
45+
window.addEventListener('DOMContentLoaded',InitializeReadTime )
46+
}

‎Dist/Functional/ShareLink.js‎

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,57 @@
1-
'use strict'
1+
'use strict';
22

3-
const CheckNodelist = (arr) => {
4-
return (arr && arr.length !== 0);
5-
}
6-
7-
const SetLinks = (_arr, link) => {
8-
for(let elem of _arr) {
9-
elem.setAttribute("href", link );
10-
elem.setAttribute("target", '_blank');
3+
class ShareLink {
4+
constructor(element) {
5+
this.element = element;
6+
this.platform = element.getAttribute('wt-share-element');
7+
this.title = document.title;
8+
this.url = window.location.href;
9+
this.encoded = this.encodeURIParams();
10+
this.initializeShareLinks();
1111
}
12-
}
1312

14-
const SetShareLinks = () => {
15-
let title = document.title;
16-
let url = window.location.href;
17-
let unencodedURI = `${url}&title='${title}'&description='${title}'`;
18-
let encoded = encodeURI(unencodedURI);
19-
20-
let social_fb = document.querySelectorAll('[wt-share-element="facebook"]');
21-
let social_tw = document.querySelectorAll('[wt-share-element="twitter"]');
22-
let social_ln = document.querySelectorAll('[wt-share-element="linkedin"]');
23-
let social_wp = document.querySelectorAll('[wt-share-element="whatsapp"]');
24-
let social_pi = document.querySelectorAll('[wt-share-element="pinterest"]');
25-
let social_red = document.querySelectorAll('[wt-share-element="reddit"]');
26-
let social_cp = document.querySelectorAll('[wt-share-element="copy"]');
27-
28-
if (CheckNodelist(social_fb)) {
29-
SetLinks(social_fb,`https://www.facebook.com/sharer/sharer.php?u=${encoded}`);
30-
}
31-
if (CheckNodelist(social_tw)) {
32-
SetLinks(social_tw,`https://twitter.com/share?url=${encoded}`);
33-
}
34-
if (CheckNodelist(social_ln)) {
35-
SetLinks(social_ln,`https://www.linkedin.com/shareArticle?mini=true&url='${encoded}`);
36-
}
37-
if (CheckNodelist(social_wp)) {
38-
SetLinks(social_wp,`https://wa.me/?text=${encoded}`);
39-
}
40-
if (CheckNodelist(social_pi)) {
41-
SetLinks(social_pi,`http://pinterest.com/pin/create/button/?url=${encoded}`);
13+
encodeURIParams() {
14+
let unencodedURI = `${this.url}&title='${this.title}'&description='${this.title}'`;
15+
return encodeURI(unencodedURI);
4216
}
43-
if (CheckNodelist(social_red)) {
44-
SetLinks(social_red,`http://www.reddit.com/submit?url=${encoded}`);
45-
}
46-
if (CheckNodelist(social_cp)) {
47-
for(let btn of social_cp) {
48-
btn.addEventListener('click', () => navigator.clipboard.writeText(`${url}`));
17+
18+
initializeShareLinks() {
19+
const socialSelectors = {
20+
facebook: `https://www.facebook.com/sharer/sharer.php?u=${this.encoded}`,
21+
twitter: `https://twitter.com/share?url=${this.encoded}`,
22+
linkedin: `https://www.linkedin.com/shareArticle?mini=true&url='${this.encoded}`,
23+
whatsapp: `https://wa.me/?text=${this.encoded}`,
24+
pinterest: `http://pinterest.com/pin/create/button/?url=${this.encoded}`,
25+
reddit: `http://www.reddit.com/submit?url=${this.encoded}`
26+
};
27+
28+
let _link = socialSelectors[this.platform];
29+
if(!_link) return; // handle errors if the platform has issues
30+
31+
if(_link === 'copy') {
32+
this.element.addEventListener('click', () => navigator.clipboard.writeText(`${this.url}`));
33+
}
34+
else{
35+
this.element.setAttribute("href", _link);
36+
this.element.setAttribute("target", '_blank');
4937
}
5038
}
5139
}
5240

53-
window.addEventListener('DOMContentLoaded', SetShareLinks());
41+
const InitializeShareLink = () => {
42+
window.trickeries = window.trickeries || [];
43+
let links = document.querySelectorAll("[wt-share-element]");
44+
if (!links || links.length === 0) return;
45+
46+
links.forEach(link => {
47+
let instance = new ShareLink(link);
48+
window.trickeries.push({ 'ShareLink': instance });
49+
});
50+
};
51+
52+
// Execute InitializeShareLink when the DOM is fully loaded
53+
if (/complete|interactive|loaded/.test(document.readyState)) {
54+
InitializeShareLink();
55+
} else {
56+
window.addEventListener('DOMContentLoaded', InitializeShareLink);
57+
}

0 commit comments

Comments
 (0)