advanced-filter-system 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -4
- package/dist/AFS.esm.js +106 -73
- package/dist/AFS.esm.js.map +1 -1
- package/dist/AFS.js +106 -73
- package/dist/AFS.js.map +1 -1
- package/dist/AFS.min.js +1 -1
- package/dist/AFS.min.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -97,8 +97,7 @@ pnpm add advanced-filter-system
|
|
|
97
97
|
Or include via CDN:
|
|
98
98
|
|
|
99
99
|
```html
|
|
100
|
-
<script src="https://unpkg.com/advanced-filter-system@1.0.
|
|
101
|
-
<link rel="stylesheet" href="https://unpkg.com/advanced-filter-system@1.0.6/dist/afs.min.css">
|
|
100
|
+
<script src="https://unpkg.com/advanced-filter-system@1.0.8/dist/AFS.min.js"></script>
|
|
102
101
|
```
|
|
103
102
|
|
|
104
103
|
## Quick Start
|
|
@@ -110,7 +109,6 @@ Or include via CDN:
|
|
|
110
109
|
<html>
|
|
111
110
|
<head>
|
|
112
111
|
<title>AFS Demo</title>
|
|
113
|
-
<link rel="stylesheet" href="https://unpkg.com/advanced-filter-system@1.0.6/dist/afs.min.css">
|
|
114
112
|
</head>
|
|
115
113
|
<body>
|
|
116
114
|
<!-- Counter -->
|
|
@@ -161,7 +159,7 @@ Or include via CDN:
|
|
|
161
159
|
<div class="pagination-container"></div>
|
|
162
160
|
|
|
163
161
|
<!-- Scripts -->
|
|
164
|
-
<script src="https://unpkg.com/advanced-filter-system@1.0.
|
|
162
|
+
<script src="https://unpkg.com/advanced-filter-system@1.0.8/dist/AFS.min.js"></script>
|
|
165
163
|
<script>
|
|
166
164
|
const afs = AFS.createAFS({
|
|
167
165
|
containerSelector: '#items-container',
|
package/dist/AFS.esm.js
CHANGED
|
@@ -139,11 +139,11 @@ class Options {
|
|
|
139
139
|
*/
|
|
140
140
|
static defaults = {
|
|
141
141
|
// Selectors
|
|
142
|
-
containerSelector: '.filter-container',
|
|
143
|
-
itemSelector: '.filter-item',
|
|
144
|
-
filterButtonSelector: '.btn-filter',
|
|
145
|
-
searchInputSelector: '.filter-search',
|
|
146
|
-
counterSelector: '.filter-counter',
|
|
142
|
+
containerSelector: '.afs-filter-container',
|
|
143
|
+
itemSelector: '.afs-filter-item',
|
|
144
|
+
filterButtonSelector: '.afs-btn-filter',
|
|
145
|
+
searchInputSelector: '.afs-filter-search',
|
|
146
|
+
counterSelector: '.afs-filter-counter',
|
|
147
147
|
// Classes
|
|
148
148
|
activeClass: 'active',
|
|
149
149
|
hiddenClass: 'hidden',
|
|
@@ -170,26 +170,65 @@ class Options {
|
|
|
170
170
|
// Styles
|
|
171
171
|
styles: {
|
|
172
172
|
slider: {
|
|
173
|
-
class: 'afs-range-slider',
|
|
174
|
-
trackClass: 'afs-range-track',
|
|
175
|
-
thumbClass: 'afs-range-thumb',
|
|
176
|
-
valueClass: 'afs-range-value',
|
|
177
|
-
selectedClass: 'afs-range-selected',
|
|
178
173
|
// Add new UI options
|
|
179
174
|
ui: {
|
|
180
175
|
showHistogram: false,
|
|
181
|
-
bins: 10
|
|
176
|
+
bins: 10,
|
|
177
|
+
// Number of bins for histogram
|
|
178
|
+
track: {
|
|
179
|
+
radius: '2px',
|
|
180
|
+
// Button radius
|
|
181
|
+
background: '#e5e7eb' // Track color
|
|
182
|
+
},
|
|
183
|
+
thumb: {
|
|
184
|
+
radius: '50%',
|
|
185
|
+
// Button radius
|
|
186
|
+
size: '16px',
|
|
187
|
+
// Button size
|
|
188
|
+
background: '#000' // Button color
|
|
189
|
+
},
|
|
190
|
+
histogram: {
|
|
191
|
+
background: '#e5e7eb',
|
|
192
|
+
// Histogram background
|
|
193
|
+
bar: {
|
|
194
|
+
background: '#000' // Bar color
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
pagination: {
|
|
200
|
+
ui: {
|
|
201
|
+
button: {
|
|
202
|
+
background: 'transparent',
|
|
203
|
+
border: '1px solid #000',
|
|
204
|
+
borderRadius: '4px',
|
|
205
|
+
padding: '8px 12px',
|
|
206
|
+
color: '#000',
|
|
207
|
+
active: {
|
|
208
|
+
background: '#000',
|
|
209
|
+
color: '#fff'
|
|
210
|
+
},
|
|
211
|
+
hover: {
|
|
212
|
+
background: '#000',
|
|
213
|
+
color: '#fff'
|
|
214
|
+
}
|
|
215
|
+
}
|
|
182
216
|
}
|
|
183
217
|
},
|
|
184
218
|
colors: {
|
|
185
219
|
primary: '#000',
|
|
186
220
|
background: '#e5e7eb',
|
|
187
|
-
text: '#000'
|
|
188
|
-
histogram: '#e5e7eb',
|
|
189
|
-
// For histogram bars
|
|
190
|
-
histogramActive: '#000' // For active histogram bars
|
|
221
|
+
text: '#000'
|
|
191
222
|
}
|
|
192
223
|
},
|
|
224
|
+
// Slider
|
|
225
|
+
slider: {
|
|
226
|
+
containerClass: 'afs-range-slider',
|
|
227
|
+
trackClass: 'afs-range-track',
|
|
228
|
+
thumbClass: 'afs-range-thumb',
|
|
229
|
+
valueClass: 'afs-range-value',
|
|
230
|
+
selectedClass: 'afs-range-selected'
|
|
231
|
+
},
|
|
193
232
|
// Pagination
|
|
194
233
|
pagination: {
|
|
195
234
|
enabled: false,
|
|
@@ -515,24 +554,6 @@ class StyleManager {
|
|
|
515
554
|
constructor(options) {
|
|
516
555
|
this.options = options;
|
|
517
556
|
this.styleElement = null;
|
|
518
|
-
this.defaultStyles = {
|
|
519
|
-
slider: {
|
|
520
|
-
class: "afs-range-slider",
|
|
521
|
-
trackClass: "afs-range-track",
|
|
522
|
-
thumbClass: "afs-range-thumb",
|
|
523
|
-
valueClass: "afs-range-value",
|
|
524
|
-
selectedClass: "afs-range-selected"
|
|
525
|
-
},
|
|
526
|
-
colors: {
|
|
527
|
-
primary: "#000",
|
|
528
|
-
background: "#ddd",
|
|
529
|
-
text: "#000"
|
|
530
|
-
},
|
|
531
|
-
animation: {
|
|
532
|
-
duration: "300ms",
|
|
533
|
-
type: "ease-out"
|
|
534
|
-
}
|
|
535
|
-
};
|
|
536
557
|
}
|
|
537
558
|
|
|
538
559
|
/**
|
|
@@ -542,8 +563,8 @@ class StyleManager {
|
|
|
542
563
|
*/
|
|
543
564
|
createBaseStyles() {
|
|
544
565
|
const hiddenClass = this.options.get("hiddenClass") || "hidden";
|
|
545
|
-
const itemSelector = this.options.get("itemSelector") || ".filter-item";
|
|
546
|
-
const filterButtonSelector = this.options.get("filterButtonSelector") || ".btn-filter";
|
|
566
|
+
const itemSelector = this.options.get("itemSelector") || ".afs-filter-item";
|
|
567
|
+
const filterButtonSelector = this.options.get("filterButtonSelector") || ".afs-btn-filter";
|
|
547
568
|
const activeClass = this.options.get("activeClass") || "active";
|
|
548
569
|
const animationDuration = this.options.get("animationDuration") || '300ms';
|
|
549
570
|
const animationEasing = this.options.get("animationEasing") || 'ease-out';
|
|
@@ -584,12 +605,18 @@ class StyleManager {
|
|
|
584
605
|
* @returns {string} CSS styles
|
|
585
606
|
*/
|
|
586
607
|
createRangeStyles() {
|
|
587
|
-
const styles = this.options.get("styles")
|
|
588
|
-
const
|
|
589
|
-
const
|
|
608
|
+
const styles = this.options.get("styles");
|
|
609
|
+
const sliderOptions = this.options.get("slider") || {};
|
|
610
|
+
const sliderStyles = styles.slider;
|
|
611
|
+
const colors = styles.colors;
|
|
612
|
+
const containerClass = sliderOptions.containerClass || "afs-range-slider";
|
|
613
|
+
const trackClass = sliderOptions.trackClass || "afs-range-track";
|
|
614
|
+
const thumbClass = sliderOptions.thumbClass || "afs-range-thumb";
|
|
615
|
+
const valueClass = sliderOptions.valueClass || "afs-range-value";
|
|
616
|
+
const selectedClass = sliderOptions.selectedClass || "afs-range-selected";
|
|
590
617
|
return `
|
|
591
618
|
/* Range Slider Styles */
|
|
592
|
-
.${
|
|
619
|
+
.${containerClass} {
|
|
593
620
|
position: relative;
|
|
594
621
|
width: auto;
|
|
595
622
|
height: 40px;
|
|
@@ -597,29 +624,29 @@ class StyleManager {
|
|
|
597
624
|
padding: 0 8px;
|
|
598
625
|
}
|
|
599
626
|
|
|
600
|
-
.${
|
|
627
|
+
.${trackClass} {
|
|
601
628
|
position: absolute;
|
|
602
629
|
top: 50%;
|
|
603
630
|
transform: translateY(-50%);
|
|
604
631
|
width: 100%;
|
|
605
632
|
height: 4px;
|
|
606
|
-
background: ${colors.background};
|
|
607
|
-
border-radius: 2px;
|
|
633
|
+
background: ${sliderStyles.ui.thumb.background || colors.background};
|
|
634
|
+
border-radius: ${sliderStyles.ui.track.radius || "2px"};
|
|
608
635
|
}
|
|
609
636
|
|
|
610
|
-
.${
|
|
637
|
+
.${thumbClass} {
|
|
611
638
|
position: absolute;
|
|
612
639
|
top: 50%;
|
|
613
|
-
width: 16px;
|
|
614
|
-
height: 16px;
|
|
615
|
-
background: ${colors.primary};
|
|
616
|
-
border-radius: 50
|
|
640
|
+
width: ${sliderStyles.ui.thumb.size || "16px"};
|
|
641
|
+
height: ${sliderStyles.ui.thumb.size || "16px"};
|
|
642
|
+
background: ${sliderStyles.ui.thumb.background || colors.primary};
|
|
643
|
+
border-radius: ${sliderStyles.ui.thumb.radius || "50%"};
|
|
617
644
|
transform: translate(-50%, -50%);
|
|
618
645
|
cursor: pointer;
|
|
619
646
|
z-index: 2;
|
|
620
647
|
}
|
|
621
648
|
|
|
622
|
-
.${
|
|
649
|
+
.${valueClass} {
|
|
623
650
|
position: absolute;
|
|
624
651
|
top: -20px;
|
|
625
652
|
transform: translateX(-50%);
|
|
@@ -627,7 +654,7 @@ class StyleManager {
|
|
|
627
654
|
color: ${colors.text};
|
|
628
655
|
}
|
|
629
656
|
|
|
630
|
-
.${
|
|
657
|
+
.${selectedClass} {
|
|
631
658
|
position: absolute;
|
|
632
659
|
height: 4px;
|
|
633
660
|
background: ${colors.primary};
|
|
@@ -650,13 +677,13 @@ class StyleManager {
|
|
|
650
677
|
|
|
651
678
|
.afs-histogram-bar {
|
|
652
679
|
flex: 1;
|
|
653
|
-
background-color: ${colors.background};
|
|
680
|
+
background-color: ${sliderStyles.ui.histogram.background || colors.background};
|
|
654
681
|
min-height: 4px;
|
|
655
682
|
transition: background-color 0.2s ease;
|
|
656
683
|
}
|
|
657
684
|
|
|
658
685
|
.afs-histogram-bar.active {
|
|
659
|
-
background-color: ${colors.primary};
|
|
686
|
+
background-color: ${sliderStyles.ui.histogram.bar.background || colors.primary};
|
|
660
687
|
}
|
|
661
688
|
`;
|
|
662
689
|
}
|
|
@@ -667,7 +694,7 @@ class StyleManager {
|
|
|
667
694
|
* @returns {string} CSS styles
|
|
668
695
|
*/
|
|
669
696
|
createDateStyles() {
|
|
670
|
-
const colors =
|
|
697
|
+
const colors = this.options.get("styles").colors;
|
|
671
698
|
return `
|
|
672
699
|
.afs-date-range-container {
|
|
673
700
|
display: flex;
|
|
@@ -752,11 +779,13 @@ class StyleManager {
|
|
|
752
779
|
* @returns {string} CSS styles
|
|
753
780
|
*/
|
|
754
781
|
createPaginationStyles() {
|
|
782
|
+
const styles = this.options.get("styles");
|
|
755
783
|
const paginationOptions = this.options.get("pagination") || {};
|
|
756
|
-
const colors =
|
|
784
|
+
const colors = this.options.get("styles").colors;
|
|
757
785
|
const containerClass = paginationOptions.containerClass || "afs-pagination";
|
|
758
786
|
const buttonClass = paginationOptions.pageButtonClass || "afs-page-button";
|
|
759
787
|
const activeClass = paginationOptions.activePageClass || "afs-page-active";
|
|
788
|
+
const paginationStyles = styles.pagination;
|
|
760
789
|
return `
|
|
761
790
|
.${containerClass} {
|
|
762
791
|
display: flex;
|
|
@@ -766,23 +795,23 @@ class StyleManager {
|
|
|
766
795
|
}
|
|
767
796
|
|
|
768
797
|
.${buttonClass} {
|
|
769
|
-
padding: 8px 12px;
|
|
770
|
-
border: 1px solid
|
|
771
|
-
border-radius: 4px;
|
|
798
|
+
padding: ${paginationStyles.ui.button.padding || '8px 12px'};
|
|
799
|
+
border: ${paginationStyles.ui.button.border || '1px solid ' + colors.primary};
|
|
800
|
+
border-radius: ${paginationStyles.ui.button.borderRadius || '4px'};
|
|
772
801
|
cursor: pointer;
|
|
773
802
|
transition: all 200ms ease-out;
|
|
774
|
-
background: transparent;
|
|
775
|
-
color: ${colors.primary};
|
|
803
|
+
background: ${paginationStyles.ui.button.background || 'transparent'};
|
|
804
|
+
color: ${paginationStyles.ui.button.color || colors.primary};
|
|
776
805
|
}
|
|
777
806
|
|
|
778
807
|
.${buttonClass}:hover {
|
|
779
|
-
background: ${colors.primary};
|
|
780
|
-
color: white;
|
|
808
|
+
background: ${paginationStyles.ui.button.hover.background || colors.primary};
|
|
809
|
+
color: ${paginationStyles.ui.button.hover.color || 'white'};
|
|
781
810
|
}
|
|
782
811
|
|
|
783
812
|
.${buttonClass}.${activeClass} {
|
|
784
|
-
background: ${colors.primary};
|
|
785
|
-
color: white;
|
|
813
|
+
background: ${paginationStyles.ui.button.active.background || colors.primary};
|
|
814
|
+
color: ${paginationStyles.ui.button.active.color || 'white'};
|
|
786
815
|
}
|
|
787
816
|
|
|
788
817
|
.${buttonClass}:disabled {
|
|
@@ -799,7 +828,7 @@ class StyleManager {
|
|
|
799
828
|
*/
|
|
800
829
|
createSearchStyles() {
|
|
801
830
|
const searchClass = this.options.get("searchInputClass") || "afs-search";
|
|
802
|
-
const colors =
|
|
831
|
+
const colors = this.options.get("styles").colors;
|
|
803
832
|
return `
|
|
804
833
|
.${searchClass} {
|
|
805
834
|
padding: 8px;
|
|
@@ -3172,6 +3201,9 @@ class URLManager {
|
|
|
3172
3201
|
currentPage,
|
|
3173
3202
|
itemsPerPage
|
|
3174
3203
|
} = state.pagination;
|
|
3204
|
+
if (!this.afs.options.get('pagination.enabled')) {
|
|
3205
|
+
return;
|
|
3206
|
+
}
|
|
3175
3207
|
if (currentPage > 1) {
|
|
3176
3208
|
params.set('page', currentPage.toString());
|
|
3177
3209
|
}
|
|
@@ -3464,6 +3496,7 @@ class RangeFilter {
|
|
|
3464
3496
|
constructor(afs) {
|
|
3465
3497
|
this.afs = afs;
|
|
3466
3498
|
this.activeRanges = new Map();
|
|
3499
|
+
this.options = this.afs.options.get("slider");
|
|
3467
3500
|
if (!this.afs.styleManager) {
|
|
3468
3501
|
this.afs.styleManager = new StyleManager(this.afs.options);
|
|
3469
3502
|
}
|
|
@@ -3578,14 +3611,14 @@ class RangeFilter {
|
|
|
3578
3611
|
*/
|
|
3579
3612
|
createSliderElements(histogramData, sliderUiOptions) {
|
|
3580
3613
|
const styles = this.afs.options.get("styles") || this.afs.styleManager.defaultStyles;
|
|
3581
|
-
const sliderStyles = styles.slider || this.afs.styleManager.defaultStyles.slider;
|
|
3582
3614
|
const colors = styles.colors || this.afs.styleManager.defaultStyles.colors;
|
|
3615
|
+
const sliderOptions = this.afs.options.get("slider") || {};
|
|
3583
3616
|
const container = document.createElement("div");
|
|
3584
|
-
container.className = "
|
|
3617
|
+
container.className = "afs-range-container";
|
|
3585
3618
|
const slider = document.createElement("div");
|
|
3586
|
-
slider.className =
|
|
3619
|
+
slider.className = sliderOptions.containerClass;
|
|
3587
3620
|
const track = document.createElement("div");
|
|
3588
|
-
track.className =
|
|
3621
|
+
track.className = sliderOptions.trackClass;
|
|
3589
3622
|
|
|
3590
3623
|
// Only add histogram if enabled in the slider-specific options
|
|
3591
3624
|
if (sliderUiOptions?.showHistogram && histogramData?.counts?.length > 0) {
|
|
@@ -3593,15 +3626,15 @@ class RangeFilter {
|
|
|
3593
3626
|
slider.appendChild(histogram);
|
|
3594
3627
|
}
|
|
3595
3628
|
const selectedRange = document.createElement("div");
|
|
3596
|
-
selectedRange.className =
|
|
3629
|
+
selectedRange.className = sliderOptions.selectedClass;
|
|
3597
3630
|
const minThumb = document.createElement("div");
|
|
3598
|
-
minThumb.className =
|
|
3631
|
+
minThumb.className = sliderOptions.thumbClass;
|
|
3599
3632
|
const maxThumb = document.createElement("div");
|
|
3600
|
-
maxThumb.className =
|
|
3633
|
+
maxThumb.className = sliderOptions.thumbClass;
|
|
3601
3634
|
const minValue = document.createElement("div");
|
|
3602
|
-
minValue.className =
|
|
3635
|
+
minValue.className = sliderOptions.valueClass;
|
|
3603
3636
|
const maxValue = document.createElement("div");
|
|
3604
|
-
maxValue.className =
|
|
3637
|
+
maxValue.className = sliderOptions.valueClass;
|
|
3605
3638
|
|
|
3606
3639
|
// Build the slider
|
|
3607
3640
|
slider.appendChild(track);
|
|
@@ -4321,7 +4354,7 @@ class DateFilter {
|
|
|
4321
4354
|
*/
|
|
4322
4355
|
|
|
4323
4356
|
// Version
|
|
4324
|
-
const VERSION = '1.0.
|
|
4357
|
+
const VERSION = '1.0.8';
|
|
4325
4358
|
class AFS extends EventEmitter {
|
|
4326
4359
|
/**
|
|
4327
4360
|
* @param {Object} options - Configuration options
|