Skip to content

Commit ca04fc7

Browse files
JorchCortezJorchCortez
authored
Merge pull request #16 from TheCodeRaccoons/Script-Refactory
Script refactory
2 parents f83b3c2 + eb5c4cb commit ca04fc7

13 files changed

Lines changed: 1052 additions & 313 deletions

‎Dist/Functional/CMSFilter.js‎

Lines changed: 502 additions & 0 deletions
Large diffs are not rendered by default.

‎Dist/Functional/CopyToClipboard.js‎

Lines changed: 48 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,56 @@
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.textTarget = this.ctcTrigger.querySelector(`[wt-copycb-element="texttarget"]`) || null;
7+
this.ctcDefaultTxt = this.ctcTrigger.innerText;
8+
this.textToCopy = this.ctcTarget.innerText;
9+
this.copiedTxt = this.ctcTrigger.getAttribute("wt-copycb-message") || null;
10+
this.activeClass = this.ctcTrigger.getAttribute('wt-copycb-active') || 'is-copy';
11+
this.timeOut = this.ctcTrigger.getAttribute('wt-copycb-timeout') || 2000;
12+
this.initialize();
13+
}
1314

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

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}"]`);
20+
copyTextToClipboard() {
21+
this.updateTriggerDisplay();
22+
navigator.clipboard.writeText(this.textToCopy);
23+
setTimeout(() => this.resetTriggerDisplay(), this.timeOut);
24+
}
2025

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}"]`);
26+
updateTriggerDisplay() {
27+
if (this.copiedTxt) {
28+
if(this.textTarget)this.textTarget.innerText = this.copiedTxt;
29+
else this.ctcTrigger.innerText = this.copiedTxt;
30+
}
31+
if (this.activeClass) this.ctcTrigger.classList.toggle(this.activeClass);
32+
}
2933

30-
UpdateTriggerDisplay(copiedTxt, textTarget, _trigger, activeClass);
31-
setTimeout(() => {
32-
UpdateTriggerDisplay(_defaultTxt, textTarget, _trigger, activeClass);
33-
}, timeOut);
34-
navigator.clipboard.writeText(textToCopy);
35-
});
34+
resetTriggerDisplay() {
35+
if (this.copiedTxt) {
36+
if(this.textTarget)this.textTarget.innerText = this.ctcDefaultTxt;
37+
else this.ctcTrigger.innerText = this.ctcDefaultTxt;
3638
}
39+
if (this.activeClass) this.ctcTrigger.classList.toggle(this.activeClass);
3740
}
3841
}
3942

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

‎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: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ class FormCheck {
66
this.pattern = /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/g;
77
this.errorClass = form.getAttribute("wt-formcheck-class");
88
this.submitMessage = form.getAttribute("wt-formcheck-message");
9+
this.defaultSubmitButton = form.querySelector('[wt-formcheck-element="default-submit"]');
910
this.requiredFields = form.querySelectorAll('[wt-formcheck-type="required"]');
1011
this.errorElements = form.querySelectorAll('[wt-formcheck-type="error"]');
1112
this.submitButton = form.querySelector('[wt-formcheck-type="submit"]');
@@ -80,8 +81,14 @@ class FormCheck {
8081
if (this.formErrors) {
8182
e.preventDefault();
8283
} else {
83-
this.submitButton.textContent = `${this.submitMessage}`;
84-
this.form.submit();
84+
if(this.defaultSubmitButton){
85+
if(this.submitMessage) this.submitButton.textContent = `${this.submitMessage}`;
86+
this.defaultSubmitButton.click();
87+
}
88+
else{
89+
if(this.submitMessage) this.submitButton.textContent = `${this.submitMessage}`;
90+
this.form.submit();
91+
}
8592
}
8693
}
8794

@@ -105,7 +112,17 @@ class FormCheck {
105112
}
106113
}
107114

108-
document.addEventListener('DOMContentLoaded', () => {
115+
const initializeFormCheck = () => {
116+
window.trickeries = window.trickeries || [];
109117
const forms = document.querySelectorAll('[wt-formcheck-element="form"]');
110-
forms.forEach(form => new FormCheck(form));
111-
});
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: 73 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,85 @@
1-
'use strict'
1+
'use strict';
22

3-
let FormatNo = (element, locales, number, options) => {
4-
let final = Intl.NumberFormat(locales, options).format(number);
5-
if (!final) return;
6-
element.innerHTML = final;
7-
}
3+
class NumberFormatter {
4+
constructor(_element) {
5+
try {
6+
this.element = _element;
7+
this.locales = _element.getAttribute("wt-formatnumber-locales");
8+
this.style = _element.getAttribute("wt-formatnumber-style");
9+
this.currency = _element.getAttribute("wt-formatnumber-currency");
10+
this.unit = _element.getAttribute("wt-formatnumber-unit");
11+
this.value = _element.textContent;
812

9-
let GetFormatStyle = (_style, _currency, _unit) => {
10-
let _options = null;
13+
if (!this.value) throw new Error("Number value is missing in the element.");
1114

12-
if (_style) {
13-
switch (_style) {
14-
case 'currency':
15-
if (!_currency) return;
16-
_options = {
17-
style: _style,
18-
currency: _currency
19-
}
20-
break;
21-
case 'decimal':
22-
_options = {
23-
style: _style
24-
};
25-
break;
26-
case 'percent':
27-
_options = {
28-
style: _style
29-
};
30-
break;
31-
case 'unit':
32-
_options = {
33-
style: _style,
34-
unit: _unit
35-
};
36-
break;
37-
default:
38-
return null;
15+
this.options = this.getFormatStyle(this.style, this.currency, this.unit);
16+
if (!this.options) throw new Error("Invalid format options.");
17+
18+
this.formatNumber();
19+
} catch (err) {
20+
console.error(`Error initializing NumberFormatter: ${err.message}`);
3921
}
40-
return _options
4122
}
42-
}
43-
44-
const InitializeFormatNumbers = () => {
45-
46-
let numbersToFormat = document.querySelectorAll('[wt-formatnumber-element="number"]');
47-
48-
if(!numbersToFormat || numbersToFormat.length === 0) return;
49-
50-
for(let numberContainer of numbersToFormat) {
51-
let locales = numberContainer.getAttribute("wt-formatnumber-locales");
52-
let style = numberContainer.getAttribute("wt-formatnumber-style");
53-
let currency = numberContainer.getAttribute("wt-formatnumber-currency");
54-
let unit = numberContainer.getAttribute("wt-formatnumber-unit");
55-
let options = GetFormatStyle(style, currency, unit);
56-
57-
if(!options) return;
5823

59-
let value = numberContainer.textContent;
24+
getFormatStyle(_style, _currency, _unit) {
25+
let _options = null;
26+
if (_style) {
27+
switch (_style) {
28+
case 'currency':
29+
if (!_currency) return null;
30+
_options = {
31+
style: _style,
32+
currency: _currency
33+
};
34+
break;
35+
case 'decimal':
36+
case 'percent':
37+
_options = { style: _style };
38+
break;
39+
case 'unit':
40+
if (!_unit) return null;
41+
_options = {
42+
style: _style,
43+
unit: _unit
44+
};
45+
break;
46+
default:
47+
return null;
48+
}
49+
return _options;
50+
}
51+
}
6052

61-
if (!value) return;
62-
53+
formatNumber() {
6354
try {
64-
FormatNo(numberContainer, locales, value, options);
65-
} catch (error) {
66-
console.error(`there was an error processing the format, ${error}`);
55+
const number = parseFloat(this.value.replace(/,/g, ''));
56+
if (isNaN(number)) throw new Error("Invalid number value.");
57+
58+
const formattedNumber = new Intl.NumberFormat(this.locales, this.options).format(number);
59+
if (!formattedNumber) throw new Error("Formatting failed.");
60+
61+
this.element.innerHTML = formattedNumber;
62+
} catch (err) {
63+
console.error(`Error formatting number: ${err.message}`);
6764
}
6865
}
6966
}
7067

71-
window.addEventListener('DOMContentLoaded', InitializeFormatNumbers());
68+
const InitializeFormatNumbers = () => {
69+
try {
70+
const numbersToFormat = document.querySelectorAll('[wt-formatnumber-element="number"]');
71+
if (!numbersToFormat || numbersToFormat.length === 0) throw new Error("No elements found to format.");
72+
73+
numbersToFormat.forEach((numberContainer) => {
74+
new NumberFormatter(numberContainer);
75+
});
76+
} catch (err) {
77+
console.error(`Format Number found an Error while initializing: ${err.message}`);
78+
}
79+
};
80+
81+
if (/complete|interactive|loaded/.test(document.readyState)) {
82+
InitializeFormatNumbers();
83+
} else {
84+
window.addEventListener('DOMContentLoaded', InitializeFormatNumbers);
85+
}

‎Dist/Functional/LimitText.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)