Skip to content

Commit e609745

Browse files
JorchCortezJorchCortez
authored
Merge pull request #17 from TheCodeRaccoons/Develop
Develop
2 parents 20f385f + ca04fc7 commit e609745

9 files changed

Lines changed: 842 additions & 167 deletions

File tree

‎Dist/Functional/CMSFilter.js‎

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

‎Dist/Functional/CopyToClipboard.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ class CopyToClipboard {
33
this.ctcContainer = _ctcContainer;
44
this.ctcTrigger = this.ctcContainer.querySelector(`[wt-copycb-element="trigger"]`) || null;
55
this.ctcTarget = this.ctcContainer.querySelector(`[wt-copycb-element="target"]`) || null;
6+
this.textTarget = this.ctcTrigger.querySelector(`[wt-copycb-element="texttarget"]`) || null;
67
this.ctcDefaultTxt = this.ctcTrigger.innerText;
78
this.textToCopy = this.ctcTarget.innerText;
89
this.copiedTxt = this.ctcTrigger.getAttribute("wt-copycb-message") || null;
@@ -18,17 +19,23 @@ class CopyToClipboard {
1819

1920
copyTextToClipboard() {
2021
this.updateTriggerDisplay();
21-
setTimeout(() => this.resetTriggerDisplay(), this.timeOut);
2222
navigator.clipboard.writeText(this.textToCopy);
23+
setTimeout(() => this.resetTriggerDisplay(), this.timeOut);
2324
}
2425

2526
updateTriggerDisplay() {
26-
if (this.copiedTxt) this.ctcTrigger.innerText = this.copiedTxt;
27+
if (this.copiedTxt) {
28+
if(this.textTarget)this.textTarget.innerText = this.copiedTxt;
29+
else this.ctcTrigger.innerText = this.copiedTxt;
30+
}
2731
if (this.activeClass) this.ctcTrigger.classList.toggle(this.activeClass);
2832
}
2933

3034
resetTriggerDisplay() {
31-
if (this.copiedTxt) this.ctcTrigger.innerText = this.ctcDefaultTxt;
35+
if (this.copiedTxt) {
36+
if(this.textTarget)this.textTarget.innerText = this.ctcDefaultTxt;
37+
else this.ctcTrigger.innerText = this.ctcDefaultTxt;
38+
}
3239
if (this.activeClass) this.ctcTrigger.classList.toggle(this.activeClass);
3340
}
3441
}

‎Dist/Functional/FormCheck.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,11 @@ class FormCheck {
8282
e.preventDefault();
8383
} else {
8484
if(this.defaultSubmitButton){
85-
this.submitButton.textContent = `${this.submitMessage}`;
86-
this.defaultSubmitButton.click();
85+
if(this.submitMessage) this.submitButton.textContent = `${this.submitMessage}`;
86+
this.defaultSubmitButton.click();
8787
}
8888
else{
89-
this.submitButton.textContent = `${this.submitMessage}`;
89+
if(this.submitMessage) this.submitButton.textContent = `${this.submitMessage}`;
9090
this.form.submit();
9191
}
9292
}

‎Dist/Functional/FormatNumbers.js‎

Lines changed: 71 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +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

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+
7181
if (/complete|interactive|loaded/.test(document.readyState)) {
7282
InitializeFormatNumbers();
73-
} else {
74-
window.addEventListener('DOMContentLoaded', InitializeFormatNumbers)
75-
}
83+
} else {
84+
window.addEventListener('DOMContentLoaded', InitializeFormatNumbers);
85+
}

‎Dist/Functional/LimitText.js‎

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

‎Dist/Functional/Marquee.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
'use strict';
2+
3+
class Marquee {
4+
constructor(_container) {
5+
try {
6+
this.container = _container;
7+
this.elements = Array.from(this.container.children);
8+
if (this.elements.length === 0) throw new Error("No elements found inside the marquee container.");
9+
this.speed =_container.getAttribute('wt-marquee-speed') || 50;
10+
this.direction = _container.getAttribute('wt-marquee-direction') || 'left'
11+
this.viewportWidth = window.innerWidth;
12+
this.parentWidth = this.container.parentElement.offsetWidth;
13+
this.totalWidth = this.calculateTotalWidth();
14+
this.scrollPosition = 0;
15+
this.gapSize = this.getGapSize();
16+
17+
this.fillContainer();
18+
this.startMarquee();
19+
this.handleResize();
20+
} catch (err) {
21+
console.error(`Error initializing Marquee: ${err.message}`);
22+
}
23+
}
24+
25+
calculateTotalWidth() {
26+
const gapTotal = (this.elements.length - 1) * this.gapSize;
27+
return this.elements.reduce((total, el) => total + el.offsetWidth, 0) + gapTotal;
28+
}
29+
30+
getGapSize() {
31+
const styles = getComputedStyle(this.container);
32+
return parseFloat(styles.gap) || 0;
33+
}
34+
35+
fillContainer() {
36+
let totalWidth = this.calculateTotalWidth();
37+
const targetWidth = this.parentWidth * 1.5;
38+
39+
while (totalWidth < targetWidth) {
40+
this.elements.forEach(el => {
41+
const clone = el.cloneNode(true);
42+
this.container.appendChild(clone);
43+
});
44+
this.elements = Array.from(this.container.children);
45+
totalWidth = this.calculateTotalWidth();
46+
}
47+
}
48+
49+
startMarquee() {
50+
this.marqueeInterval = setInterval(() => {
51+
this.scrollPosition += this.direction === 'left' ? -1 : 1;
52+
53+
this.moveOffscreenElement();
54+
55+
this.container.style.transform = `translateX(${this.scrollPosition}px)`;
56+
}, this.speed);
57+
}
58+
59+
moveOffscreenElement() {
60+
const firstElement = this.container.firstElementChild;
61+
const firstElementWidth = firstElement.offsetWidth + this.gapSize;
62+
63+
if (this.direction === 'left' && this.scrollPosition <= -firstElementWidth) {
64+
this.container.style.transition = 'none';
65+
this.container.appendChild(firstElement);
66+
this.scrollPosition += firstElementWidth;
67+
requestAnimationFrame(() => {
68+
this.container.style.transition = '';
69+
});
70+
} else if (this.direction === 'right' && this.scrollPosition >= -firstElementWidth / 2) {
71+
const lastElement = this.container.lastElementChild;
72+
this.container.style.transition = 'none';
73+
this.container.insertBefore(lastElement, firstElement);
74+
this.scrollPosition -= firstElementWidth;
75+
requestAnimationFrame(() => {
76+
this.container.style.transition = '';
77+
});
78+
}
79+
}
80+
81+
handleResize() {
82+
window.addEventListener('resize', () => {
83+
clearInterval(this.marqueeInterval);
84+
this.viewportWidth = window.innerWidth;
85+
this.parentWidth = this.container.parentElement.offsetWidth;
86+
this.totalWidth = this.calculateTotalWidth();
87+
this.fillContainer();
88+
this.startMarquee();
89+
});
90+
}
91+
92+
stopMarquee() {
93+
clearInterval(this.marqueeInterval);
94+
}
95+
}
96+
97+
const InitializeMarquee = () => {
98+
try {
99+
const marqueeContainers = document.querySelectorAll('[wt-marquee-element="container"]');
100+
if (!marqueeContainers || marqueeContainers.length === 0) throw new Error("No marquee containers found.");
101+
102+
marqueeContainers.forEach(container => {
103+
new Marquee(container);
104+
});
105+
} catch (err) {
106+
console.error(`Error in InitializeMarquee: ${err.message}`);
107+
}
108+
};
109+
110+
if (/complete|interactive|loaded/.test(document.readyState)) {
111+
InitializeMarquee();
112+
} else {
113+
window.addEventListener('DOMContentLoaded', InitializeMarquee);
114+
}

‎Dist/Functional/ShareLink.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const InitializeShareLink = () => {
4545

4646
links.forEach(link => {
4747
let instance = new ShareLink(link);
48-
window.trickeries.push({ 'ShareLink': instance });
48+
window.trickeries.push({'ShareLink': instance });
4949
});
5050
};
5151

0 commit comments

Comments
 (0)