Skip to content

Commit dbf1e01

Browse files
JorchCortezJorchCortez
authored
Merge pull request #48 from TheCodeRaccoons/Develop
Develop
2 parents 8a59c5f + c1a3905 commit dbf1e01

18 files changed

Lines changed: 2038 additions & 11 deletions

‎Dist/Functional/RangeSlider.js‎

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

‎Dist/WebflowOnly/CMSFilter.js‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
'use strict';
32

43
class CMSFilter {
@@ -7,8 +6,9 @@ class CMSFilter {
76
this.filterForm = document.querySelector('[wt-cmsfilter-element="filter-form"]');
87
this.listElement = document.querySelector('[wt-cmsfilter-element="list"]');
98
this.filterElements = this.filterForm.querySelectorAll('[wt-cmsfilter-category]');
10-
this.currentPage = 1;
11-
this.itemsPerPage = 0;
9+
this.currentPage = 1; // default value
10+
this.itemsPerPage = 0; // gets updated during init
11+
this.debounceDelay = parseInt(this.filterForm.getAttribute('wt-cmsfilter-debounce') || '300');
1212

1313
//TAG elements
1414
this.tagTemplate = document.querySelector('[wt-cmsfilter-element="tag-template"]');
@@ -58,29 +58,30 @@ class CMSFilter {
5858
this.activeFilters = this.GetFilters();
5959
this.ShowResultCount();
6060
this.InitializeTagTemplate();
61-
}
62-
63-
SetupEventListeners() {
61+
} SetupEventListeners() {
62+
// Create a debounced version of ApplyFilters
63+
const debouncedApplyFilters = this.debounce(() => this.ApplyFilters(), this.debounceDelay);
64+
6465
if(this.filterForm.hasAttribute('wt-cmsfilter-trigger')){
6566
if (this.filterForm.getAttribute('wt-cmsfilter-trigger') === 'button') {
6667
this.filterForm.addEventListener('submit', (event) => {
6768
event.preventDefault();
68-
this.ApplyFilters();
69+
this.ApplyFilters(); // No debounce needed for button submission
6970
});
7071
} else {
7172
this.filterForm.addEventListener('change', () => {
72-
this.ApplyFilters();
73+
debouncedApplyFilters();
7374
});
7475
this.filterForm.addEventListener('input', () => {
75-
this.ApplyFilters();
76+
debouncedApplyFilters();
7677
});
7778
}
7879
} else {
7980
this.filterForm.addEventListener('change', () => {
80-
this.ApplyFilters();
81+
debouncedApplyFilters();
8182
});
8283
this.filterForm.addEventListener('input', () => {
83-
this.ApplyFilters();
84+
debouncedApplyFilters();
8485
});
8586
}
8687

@@ -618,6 +619,19 @@ class CMSFilter {
618619
}
619620
return filterData;
620621
}
622+
623+
// Utility method for debouncing function calls
624+
debounce(func, wait) {
625+
let timeout;
626+
return function executedFunction(...args) {
627+
const later = () => {
628+
clearTimeout(timeout);
629+
func.apply(this, args);
630+
};
631+
clearTimeout(timeout);
632+
timeout = setTimeout(later, wait);
633+
};
634+
}
621635
}
622636

623637
const InitializeCMSFilter = () => {

‎docs/Functional/CookieConsent.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# CookieConsent
2+
3+
## Version
4+
Current Version: 1.0.0
5+
6+
## Description
7+
CookieConsent is a GDPR-compliant cookie consent management system that provides granular control over cookie preferences and script loading. It supports multiple consent categories, manages consent persistence, and controls script loading based on user preferences.
8+
9+
## Functionality
10+
- Cookie consent banner management
11+
- Multiple consent categories
12+
- Granular script loading control
13+
- Consent persistence
14+
- Consent management interface
15+
- Automatic script injection
16+
- Cookie expiration handling
17+
- Category-based script loading
18+
19+
## Usage
20+
Add the script to your project and include the required attributes on your banner and script elements.
21+
22+
### Installation
23+
```html
24+
<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/CookieConsent.min.js"></script>
25+
```
26+
27+
### Required Attributes
28+
- `wt-cookieconsent-element="banner"` - Applied to the main cookie banner container
29+
- `wt-cookieconsent-script="category"` - Applied to scripts that require consent
30+
31+
### Optional Elements and Attributes
32+
- `wt-cookieconsent-element="accept-all"` - Accept all cookies button
33+
- `wt-cookieconsent-element="accept-necessary"` - Accept necessary cookies only button
34+
- `wt-cookieconsent-element="manage-cookies"` - Manage cookies settings button
35+
- `wt-cookieconsent-element="categories-form"` - Form for custom category selection
36+
- `wt-cookieconsent-category="category-name"` - Category checkbox inputs
37+
38+
## Considerations
39+
1. **GDPR Compliance**: Supports granular consent management
40+
2. **Script Loading**: Automatically handles script loading based on consent
41+
3. **Persistence**: Stores consent in cookies with configurable expiry
42+
4. **Categories**: Supports unlimited custom consent categories
43+
5. **Performance**: Efficient script injection and management
44+
45+
## Examples
46+
47+
### Basic Implementation
48+
```html
49+
<!-- Cookie Banner -->
50+
<div wt-cookieconsent-element="banner">
51+
<p>We use cookies to improve your experience.</p>
52+
<button wt-cookieconsent-element="accept-all">Accept All</button>
53+
<button wt-cookieconsent-element="accept-necessary">Necessary Only</button>
54+
</div>
55+
56+
<!-- Scripts requiring consent -->
57+
<script wt-cookieconsent-script="analytics" src="analytics.js"></script>
58+
<script wt-cookieconsent-script="marketing" src="marketing.js"></script>
59+
```
60+
61+
### Advanced Implementation with Categories
62+
```html
63+
<div wt-cookieconsent-element="banner">
64+
<p>Choose your cookie preferences</p>
65+
66+
<!-- Categories Form -->
67+
<form wt-cookieconsent-element="categories-form">
68+
<label>
69+
<input type="checkbox"
70+
wt-cookieconsent-category="necessary"
71+
checked disabled>
72+
Necessary
73+
</label>
74+
75+
<label>
76+
<input type="checkbox"
77+
wt-cookieconsent-category="analytics">
78+
Analytics
79+
</label>
80+
81+
<label>
82+
<input type="checkbox"
83+
wt-cookieconsent-category="marketing">
84+
Marketing
85+
</label>
86+
87+
<button type="submit">Save Preferences</button>
88+
</form>
89+
90+
<button wt-cookieconsent-element="accept-all">Accept All</button>
91+
</div>
92+
93+
<!-- Manage Cookies Button (shows banner again) -->
94+
<button wt-cookieconsent-element="manage-cookies">
95+
Manage Cookie Preferences
96+
</button>
97+
98+
<!-- Categorized Scripts -->
99+
<script wt-cookieconsent-script="necessary" src="essential.js"></script>
100+
<script wt-cookieconsent-script="analytics" src="analytics.js"></script>
101+
<script wt-cookieconsent-script="marketing" src="marketing.js"></script>
102+
```
103+
104+
### Inline Script Implementation
105+
```html
106+
<!-- Inline script with consent -->
107+
<script wt-cookieconsent-script="analytics">
108+
// Analytics code here
109+
console.log('Analytics initialized');
110+
</script>
111+
```
112+
113+
### Common Use Cases
114+
1. GDPR compliance implementation
115+
2. Analytics script management
116+
3. Marketing pixel control
117+
4. A/B testing script management
118+
5. Third-party service integration

‎docs/Functional/CopyToClipboard.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# CopyToClipboard
2+
3+
## Version
4+
Current Version: 1.0.0
5+
6+
## Description
7+
CopyToClipboard is a utility script that enables copying text to clipboard with visual feedback. It supports custom success messages, styling, and timeout durations for the feedback display.
8+
9+
## Functionality
10+
- One-click text copying
11+
- Customizable success messages
12+
- Visual feedback through classes
13+
- Configurable feedback duration
14+
- Separate text target support
15+
- Automatic state reset
16+
- Multiple instances support
17+
18+
## Usage
19+
Add the script to your project and include the required attributes on your copy elements.
20+
21+
### Installation
22+
```html
23+
<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/CopyToClipboard.min.js"></script>
24+
```
25+
26+
### Required Attributes
27+
- `wt-copycb-element="container"` - Applied to the container element
28+
- `wt-copycb-element="trigger"` - Applied to the click trigger element
29+
- `wt-copycb-element="target"` - Applied to the element containing text to copy
30+
31+
### Optional Attributes
32+
- `wt-copycb-message="Copied!"` - Custom success message
33+
- `wt-copycb-active="is-copy"` - CSS class for active state
34+
- `wt-copycb-timeout="2000"` - Duration to show success state (ms)
35+
- `wt-copycb-element="texttarget"` - Element within trigger to update with success message
36+
37+
## Considerations
38+
1. **Clipboard API**: Uses modern navigator.clipboard API
39+
2. **State Management**: Automatically resets to original state
40+
3. **Visual Feedback**: Supports both text and class-based feedback
41+
4. **Multiple Instances**: Supports multiple copy buttons on the same page
42+
5. **Performance**: Lightweight with minimal DOM manipulation
43+
44+
## Examples
45+
46+
### Basic Implementation
47+
```html
48+
<div wt-copycb-element="container">
49+
<button wt-copycb-element="trigger">Copy Text</button>
50+
<div wt-copycb-element="target">Text to be copied</div>
51+
</div>
52+
```
53+
54+
### Advanced Implementation
55+
```html
56+
<div wt-copycb-element="container">
57+
<button wt-copycb-element="trigger"
58+
wt-copycb-message="Copied!"
59+
wt-copycb-active="is-active"
60+
wt-copycb-timeout="3000">
61+
<span wt-copycb-element="texttarget">Copy to Clipboard</span>
62+
<i class="icon"></i>
63+
</button>
64+
<div wt-copycb-element="target">
65+
Complex text that needs to be copied
66+
</div>
67+
</div>
68+
```
69+
70+
### CSS Styling Example
71+
```css
72+
/* Default state */
73+
[wt-copycb-element="trigger"] {
74+
transition: all 0.3s ease;
75+
}
76+
77+
/* Active state */
78+
.is-copy {
79+
background-color: #4CAF50;
80+
color: white;
81+
}
82+
```
83+
84+
### Common Use Cases
85+
1. Code snippet copying
86+
2. Share link buttons
87+
3. Reference number copying
88+
4. Contact information copying
89+
5. Form field duplication
90+
91+
### Best Practices
92+
1. Always provide visual feedback for copy action
93+
2. Use clear and concise success messages
94+
3. Consider mobile touch interactions
95+
4. Maintain original styling during state changes
96+
5. Include fallback for unsupported browsers

‎docs/Functional/CountUp.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# CountUp
2+
3+
## Version
4+
Current Version: 1.0.0
5+
6+
## Description
7+
CountUp is a lightweight animation script that creates counting animations from zero to a target number. It supports customizable counting speed, step size, and allows adding prefix and suffix text to the displayed number.
8+
9+
## Functionality
10+
- Animated number counting
11+
- Configurable target number
12+
- Adjustable animation speed
13+
- Custom step size
14+
- Prefix and suffix support
15+
- Automatic initialization
16+
- Error handling
17+
18+
## Usage
19+
Add the script to your project and include the required attributes on your counter elements.
20+
21+
### Installation
22+
```html
23+
<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/CountUp.min.js"></script>
24+
```
25+
26+
### Required Attributes
27+
- `wt-countup-element="counter"` - Applied to the element that will display the counting animation
28+
- `wt-countup-target="100"` - The target number to count up to
29+
30+
### Optional Attributes
31+
- `wt-countup-prefix="$"` - Text to display before the number
32+
- `wt-countup-suffix="+"` - Text to display after the number
33+
- `wt-countup-step="5"` - Number to increment by (default: 1)
34+
- `wt-countup-speed="10"` - Animation speed in milliseconds (default: 10)
35+
36+
## Considerations
37+
1. **Performance**: Uses setInterval for animation timing
38+
2. **Memory Management**: Automatically clears interval when target is reached
39+
3. **Error Handling**: Gracefully handles initialization errors
40+
4. **Format Support**: Numbers only (use FormatNumbers.js for formatted output)
41+
5. **Animation Speed**: Lower speed values create faster animations
42+
43+
## Examples
44+
45+
### Basic Implementation
46+
```html
47+
<div wt-countup-element="counter"
48+
wt-countup-target="100">
49+
0
50+
</div>
51+
```
52+
53+
### Advanced Implementation
54+
```html
55+
<div wt-countup-element="counter"
56+
wt-countup-target="1000"
57+
wt-countup-prefix="$"
58+
wt-countup-suffix=".00"
59+
wt-countup-step="10"
60+
wt-countup-speed="20">
61+
0
62+
</div>
63+
```
64+
65+
### Multiple Counters
66+
```html
67+
<!-- Basic counter -->
68+
<div wt-countup-element="counter"
69+
wt-countup-target="500">
70+
0
71+
</div>
72+
73+
<!-- Percentage counter -->
74+
<div wt-countup-element="counter"
75+
wt-countup-target="100"
76+
wt-countup-suffix="%"
77+
wt-countup-speed="50">
78+
0
79+
</div>
80+
81+
<!-- Currency counter -->
82+
<div wt-countup-element="counter"
83+
wt-countup-target="999"
84+
wt-countup-prefix="$"
85+
wt-countup-step="3">
86+
0
87+
</div>
88+
```
89+
90+
### Common Use Cases
91+
1. Statistics displays
92+
2. Progress indicators
93+
3. Achievement counters
94+
4. Price animations
95+
5. Loading indicators

0 commit comments

Comments
 (0)