Skip to content

Commit f98e1ae

Browse files
JorchCortezJorchCortez
authored
Merge pull request #7 from TheCodeRaccoons/New-Feature--Added-Scripts
New feature added scripts
2 parents 0605800 + 39ddcf9 commit f98e1ae

8 files changed

Lines changed: 350 additions & 54 deletions

File tree

‎Dist/Functional/CopyToClipboard.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,20 @@ const SetCopyToClipboard = () => {
2121
if(_target) {
2222
_trigger.addEventListener('click', () => {
2323
let textToCopy = _target.innerText;
24-
let copiedTxt = _trigger.getAttribute("wt-copycb-copiedMsg");
25-
let activeClass = _trigger.getAttribute('wt-copycb-activeClass');
24+
let copiedTxt = _trigger.getAttribute("wt-copycb-message");
25+
let activeClass = _trigger.getAttribute('wt-copycb-active');
2626
let timeOut = _trigger.getAttribute('wt-copycb-timeout') || 2000;
2727
let _defaultTxt = _trigger.innerText;
28-
let textTarget = document.querySelector(`[wt-copycb-element="textTarget${index}"]`);
29-
28+
let textTarget = document.querySelector(`[wt-copycb-element="text-target${index}"]`);
29+
3030
UpdateTriggerDisplay(copiedTxt, textTarget, _trigger, activeClass);
31-
3231
setTimeout(() => {
3332
UpdateTriggerDisplay(_defaultTxt, textTarget, _trigger, activeClass);
3433
}, timeOut);
35-
3634
navigator.clipboard.writeText(textToCopy);
3735
});
3836
}
3937
}
4038
}
4139

42-
window.addEventListener('DOMContentLoaded', SetCopyToClipboard());
40+
window.addEventListener('DOMContentLoaded', SetCopyToClipboard());

‎Dist/Functional/DateCountDown.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
'use strict'
2+
3+
function isDateValid(dateStr) {
4+
return !isNaN(new Date(dateStr));
5+
}
6+
7+
const InitializeDateCountDown = () => {
8+
9+
const targetDate = document.querySelector('[wt-datecount-element="target-date"]');
10+
11+
if (!targetDate) return;
12+
13+
var countDownDate = new Date(targetDate.innerText).getTime();
14+
15+
if (!isDateValid(countDownDate)) return;
16+
17+
// Update the count down every 1 second
18+
var x = setInterval(function () {
19+
20+
// Get today's date and time
21+
var now = new Date().getTime();
22+
23+
// Find the distance between now and the count down date
24+
var distance = countDownDate - now;
25+
26+
// If the count down is over, write some text
27+
if (distance < 0) {
28+
clearInterval(x);
29+
document.getElementById("demo").innerHTML = "EXPIRED";
30+
}
31+
32+
const _targetYear = document.querySelector('[wt-datecount-element="target-year"]');
33+
const _targetMonth = document.querySelector('[wt-datecount-element="target-month"]');
34+
const _targetDay = document.querySelector('[wt-datecount-element="target-day"]');
35+
const _targetHour = document.querySelector('[wt-datecount-element="target-hour"]');
36+
const _targetMin = document.querySelector('[wt-datecount-element="target-minute"]');
37+
const _targetSec = document.querySelector('[wt-datecount-element="target-second"]');
38+
39+
// Time calculations for days, hours, minutes and seconds
40+
var year = Math.floor(distance / (1000 * 60 * 60 * 24));
41+
var month = Math.floor(distance / (1000 * 60 * 60 * 24));
42+
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
43+
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
44+
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
45+
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
46+
47+
if (_targetYear) _targetYear.innerText = year
48+
if (_targetMonth) _targetMonth.innerText = month
49+
if (_targetDay) _targetDay.innerText = days
50+
if (_targetHour) _targetHour.innerText = hours
51+
if (_targetMin) _targetMin.innerText = minutes
52+
if (_targetSec) _targetSec.innerText = seconds
53+
54+
}, 1000);
55+
}

‎Dist/Functional/Elipsis.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
[wt-elipsis-element="single"] {
2+
display: -webkit-box;
3+
-webkit-line-clamp: 1;
4+
-webkit-box-orient: vertical;
5+
overflow: hidden;
6+
text-overflow: ellipsis;
7+
}
8+
9+
[wt-elipsis-element="double"] {
10+
display: -webkit-box;
11+
-webkit-line-clamp: 2;
12+
-webkit-box-orient: vertical;
13+
overflow: hidden;
14+
text-overflow: ellipsis;
15+
}
16+
17+
[wt-elipsis-element="triple"] {
18+
display: -webkit-box;
19+
-webkit-line-clamp: 3;
20+
-webkit-box-orient: vertical;
21+
overflow: hidden;
22+
text-overflow: ellipsis;
23+
}

‎Dist/Functional/FormCheck.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
'use strict'
2+
3+
class FormCheck {
4+
constructor(form) {
5+
this.form = form;
6+
this.pattern = /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/g;
7+
this.errorClass = form.getAttribute("wt-formcheck-class");
8+
this.submitMessage = form.getAttribute("wt-formcheck-message");
9+
this.requiredFields = form.querySelectorAll('[wt-formcheck-type="required"]');
10+
this.errorElements = form.querySelectorAll('[wt-formcheck-type="error"]');
11+
this.submitButton = form.querySelector('[wt-formcheck-type="submit"]');
12+
this.defaultSubmitText = this.submitButton.textContent;
13+
this.resetButton = form.querySelector('[wt-formcheck-element="reset"]');
14+
this.requiredFieldsAndCheckboxes = form.querySelectorAll('[wt-formcheck-type="required"], [type="checkbox"]');
15+
this.formErrors = false;
16+
17+
this.init();
18+
}
19+
20+
init() {
21+
for (let element of this.errorElements) {
22+
element.style.display = 'none';
23+
}
24+
25+
for (let field of this.requiredFields) {
26+
field.classList.remove(`${this.errorClass}`);
27+
}
28+
29+
for (let field of this.requiredFieldsAndCheckboxes) {
30+
field.addEventListener('keypress', (e) => this.clearError(e));
31+
field.addEventListener('blur', (e) => this.clearError(e));
32+
}
33+
34+
this.submitButton.addEventListener('click', (e) => this.validateAndSubmit(e));
35+
36+
if (this.resetButton) {
37+
this.resetButton.addEventListener('click', (e) => this.clearForm(e));
38+
}
39+
}
40+
41+
clearError(e) {
42+
const target = e.target;
43+
if (this.errorClass) target.classList.remove(`${this.errorClass}`);
44+
const errorElement = target.parentNode.querySelector('[wt-formcheck-type="error"]');
45+
if (errorElement) {
46+
errorElement.style.display = 'none';
47+
}
48+
this.formErrors = false;
49+
}
50+
51+
fieldError(field) {
52+
const errorElement = field.parentNode.querySelector('[wt-formcheck-type="error"]');
53+
if (errorElement) {
54+
errorElement.style.display = 'block';
55+
}
56+
field.classList.add(`${this.errorClass}`);
57+
this.formErrors = true;
58+
}
59+
60+
validateAndSubmit(e) {
61+
this.formErrors = false;
62+
63+
for (let field of this.requiredFields) {
64+
const fieldType = field.getAttribute('type');
65+
const fieldValue = field.value.trim();
66+
67+
if (fieldType === 'checkbox' && !field.checked) {
68+
this.fieldError(field);
69+
} else if (fieldValue === '') {
70+
this.fieldError(field);
71+
} else if (fieldType === 'email' && (!this.isValidEmail(fieldValue))) {
72+
this.fieldError(field);
73+
} else if (fieldType === 'number' && (fieldValue === '' || isNaN(fieldValue))) {
74+
this.fieldError(field);
75+
} else if (fieldType === 'tel' && !field.value.match(this.pattern)) {
76+
this.fieldError(field);
77+
}
78+
}
79+
80+
if (this.formErrors) {
81+
e.preventDefault();
82+
} else {
83+
this.submitButton.textContent = `${this.submitMessage}`;
84+
this.form.submit();
85+
}
86+
}
87+
88+
isValidEmail(email) {
89+
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
90+
return emailPattern.test(email);
91+
}
92+
93+
clearForm(e) {
94+
e.preventDefault();
95+
for (let element of this.errorElements) {
96+
element.style.display = 'none';
97+
}
98+
99+
for (let field of this.requiredFields) {
100+
field.classList.remove(`${this.errorClass}`);
101+
}
102+
103+
this.form.reset();
104+
this.submitButton.textContent = `${this.defaultSubmitText}`;
105+
}
106+
}
107+
108+
document.addEventListener('DOMContentLoaded', () => {
109+
const forms = document.querySelectorAll('[wt-formcheck-element="form"]');
110+
forms.forEach(form => new FormCheck(form));
111+
});

‎Dist/Functional/FormatNumbers.js‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,48 @@
1-
/*
2-
* Number formating using Intl.NumberFormat.
3-
* Requirements:
4-
* Element with custom attribute fn-formatnumber="true"
5-
* A Style in the same element to format choosing between "Currency", "decimal", "percent", "unit"
6-
* In case of the element being "Currency" or "Unit" the sent "fn-formatnumber-currency" or "fn-formatnumber-unit" option
7-
* Optional: set locales for the formatting
8-
* list of units can be found here for now: https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier
9-
* currency uses regular notation for them.
10-
*/
11-
1+
'use strict'
122

133
let FormatNo = (element, locales, number, options) => {
144
let final = Intl.NumberFormat(locales, options).format(number);
155
if (!final) return;
166
element.innerHTML = final;
177
}
8+
9+
let GetFormatStyle = (_style, _currency, _unit) => {
10+
let _options = null;
11+
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;
39+
}
40+
return _options
41+
}
42+
}
43+
1844
const InitializeFormatNumbers = () => {
45+
1946
let numbersToFormat = document.querySelectorAll('[wt-formatnumber-element="number"]');
2047

2148
if(!numbersToFormat || numbersToFormat.length === 0) return;
@@ -25,47 +52,20 @@ const InitializeFormatNumbers = () => {
2552
let style = numberContainer.getAttribute("wt-formatnumber-style");
2653
let currency = numberContainer.getAttribute("wt-formatnumber-currency");
2754
let unit = numberContainer.getAttribute("wt-formatnumber-unit");
28-
let options = null;
55+
let options = GetFormatStyle(style, currency, unit);
56+
57+
if(!options) return;
58+
59+
let value = numberContainer.textContent;
2960

30-
if (style) {
31-
switch (style) {
32-
case 'currency':
33-
if (!currency) return;
34-
options = {
35-
style: style,
36-
currency: currency
37-
}
38-
break;
39-
case 'decimal':
40-
options = {
41-
style: style
42-
};
43-
break;
44-
case 'percent':
45-
options = {
46-
style: style
47-
};
48-
break;
49-
case 'unit':
50-
options = {
51-
style: style,
52-
unit: unit
53-
};
54-
break;
55-
default:
56-
console.log(`undefined`);
57-
}
58-
}
59-
60-
let value = numberContainer.textContent
6161
if (!value) return;
6262

6363
try {
6464
FormatNo(numberContainer, locales, value, options);
6565
} catch (error) {
66-
numberContainer.innerHTML = `there was an error processing the format, ${error}`;
66+
console.error(`there was an error processing the format, ${error}`);
6767
}
6868
}
6969
}
7070

71-
window.addEventListener('DOMContentLoaded', InitializeFormatNumbers())
71+
window.addEventListener('DOMContentLoaded', InitializeFormatNumbers());

‎Dist/WebflowOnly/MirrorClick.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
'use strict'
2+
3+
const InitializeMirrorClick = () => {
4+
5+
let triggers = document.querySelectorAll('[wt-mirrorclick-element^="trigger-"], [wt-mirrorclick-element="trigger"]');
6+
7+
if(!triggers || triggers.length === 0) return;
8+
9+
for(let trigger of triggers) {
10+
let _triggerAttr = trigger.getAttribute('wt-mirrorclick-element');
11+
let _index = _triggerAttr.replace('trigger','');
12+
let _target = document.querySelector(`[wt-mirrorclick-element="target${_index}"]`);
13+
14+
if(_target) {
15+
trigger.addEventListener('click', () => {
16+
_target.click();
17+
})
18+
}
19+
}
20+
}
21+
22+
window.addEventListener('DOMContentLoaded', InitializeMirrorClick());

0 commit comments

Comments
 (0)