|
1
|
1 |
|
(function() { |
|
2
|
|
|
/** |
|
3
|
|
|
* Create VanillaFilter instance |
|
4
|
|
|
*/ |
|
5
|
1 |
|
this.VanillaFilter = function() { |
|
6
|
|
|
/** |
|
7
|
|
|
* Default options for filtering |
|
8
|
|
|
* @type {Object} |
|
9
|
|
|
*/ |
|
10
|
5 |
|
this.options = { |
|
11
|
|
|
vanillaTrigger: 'vanillatrigger', |
|
12
|
|
|
vanillaTarget: 'vanillatarget', |
|
13
|
|
|
vanillaDisplayType: 'block', |
|
14
|
|
|
vanillaFallbackSelector: '.vanilla-no-results' |
|
15
|
|
|
} |
|
16
|
|
|
|
|
17
|
|
|
/** |
|
18
|
|
|
* Override defaults by settings from user |
|
19
|
|
|
* @param {Object} |
|
20
|
|
|
*/ |
|
21
|
5 |
|
if (arguments[0] && typeof arguments[0] === "object") { |
|
22
|
1 |
|
this.options = extendDefaults(this.options, arguments[0]); |
|
23
|
|
|
} |
|
24
|
|
|
|
|
25
|
|
|
/** |
|
26
|
|
|
* Get all the filterTrigger elements to trigger filtering |
|
27
|
|
|
* @type {Elements Object} | {Element} |
|
28
|
|
|
*/ |
|
29
|
5 |
|
this.vanillaFallback = document.querySelectorAll(this.options.vanillaFallbackSelector); |
|
30
|
5 |
|
this.filterTrigger = document.querySelectorAll('[data-' + this.options.vanillaTrigger + ']'); |
|
31
|
5 |
|
this.filterValues = []; |
|
32
|
|
|
|
|
33
|
|
|
/** |
|
34
|
|
|
* Check if we have any filterTrigger instances |
|
35
|
|
|
* @param {Elements Object} | {Element} |
|
36
|
|
|
*/ |
|
37
|
5 |
|
if (this.filterTrigger) { |
|
38
|
5 |
|
var _ = this; |
|
39
|
|
|
|
|
40
|
5 |
|
Object.keys(_.filterTrigger).map(function(index) { |
|
41
|
|
|
return _.bind(_.filterTrigger[index], getTriggerHandler(_.filterTrigger[index])); |
|
42
|
|
|
}); |
|
43
|
|
|
} |
|
44
|
|
|
|
|
45
|
|
|
/** |
|
46
|
|
|
* If we have a fallback element, hide it on init |
|
47
|
|
|
* @param {Element} element |
|
48
|
|
|
*/ |
|
49
|
5 |
|
if(this.vanillaFallback) { |
|
50
|
5 |
|
this.fallback(false); |
|
51
|
|
|
} |
|
52
|
|
|
} |
|
53
|
|
|
|
|
54
|
|
|
/** |
|
55
|
|
|
* Bind the filter logic to a filterTrigger element |
|
56
|
|
|
* @param {Element} element |
|
57
|
|
|
* @param {String} handler |
|
58
|
|
|
*/ |
|
59
|
1 |
|
VanillaFilter.prototype.bind = function(element, handler) { |
|
|
|
|
|
|
60
|
|
|
return element.addEventListener(handler, this.triggerFilter.bind(this), true); |
|
61
|
|
|
} |
|
62
|
|
|
|
|
63
|
|
|
/** |
|
64
|
|
|
* Filter logic to show/hide elements based on their value |
|
65
|
|
|
*/ |
|
66
|
1 |
|
VanillaFilter.prototype.triggerFilter = function(event) { |
|
|
|
|
|
|
67
|
|
|
event.preventDefault(); |
|
68
|
|
|
|
|
69
|
|
|
var _ = this, |
|
70
|
|
|
activeFilter = event.target; |
|
71
|
|
|
|
|
72
|
|
|
/** |
|
73
|
|
|
* Set the correct active filters |
|
74
|
|
|
*/ |
|
75
|
|
|
_.filterValues = getFilterValues(activeFilter, _.options.vanillaTrigger, _.filterValues); |
|
76
|
|
|
|
|
77
|
|
|
/** |
|
78
|
|
|
* Get all the targets to filter on |
|
79
|
|
|
*/ |
|
80
|
|
|
var allTargets = Object.keys(document.querySelectorAll('[data-' + _.options.vanillaTarget + ']')).map(function(index) { |
|
81
|
|
|
return document.querySelectorAll('[data-' + _.options.vanillaTarget + ']')[index]; |
|
82
|
|
|
}); |
|
83
|
|
|
|
|
84
|
|
|
/** |
|
85
|
|
|
* Filter the correct results and show/hide them |
|
86
|
|
|
* @param {Element} item |
|
87
|
|
|
*/ |
|
88
|
|
|
var results = []; |
|
89
|
|
|
|
|
90
|
|
|
allTargets.filter(function(item) { |
|
91
|
2 |
|
if(_.filterValues.length === 0) { |
|
92
|
|
|
item.style.display = _.options.vanillaDisplayType; |
|
93
|
|
|
} else { |
|
94
|
|
|
var intersect = false; |
|
95
|
|
|
|
|
96
|
|
|
_.filterValues.filter(function(activeFilter) { |
|
97
|
|
|
var targetValues = getTargetValues(item, _.options.vanillaTarget); |
|
98
|
|
|
|
|
99
|
2 |
|
if(!intersect) { |
|
100
|
|
|
intersect = targetValues.includes(activeFilter); |
|
101
|
|
|
} |
|
102
|
|
|
}); |
|
103
|
|
|
|
|
104
|
2 |
|
item.style.display = intersect ? _.options.vanillaDisplayType : 'none'; |
|
105
|
|
|
|
|
106
|
2 |
|
if(intersect) { |
|
107
|
|
|
results.push(item); |
|
108
|
|
|
} |
|
109
|
|
|
} |
|
110
|
|
|
}); |
|
111
|
|
|
|
|
112
|
|
|
/** |
|
113
|
|
|
* Trigger the fallback function on every filter change |
|
114
|
|
|
*/ |
|
115
|
2 |
|
if(this.vanillaFallback.length) { |
|
116
|
2 |
|
this.fallback(_.filterValues.length && !results.length); |
|
117
|
|
|
} |
|
118
|
|
|
} |
|
119
|
|
|
|
|
120
|
|
|
/** |
|
121
|
|
|
* Show a fallback element when we have active filters, but no results are returned. |
|
122
|
|
|
*/ |
|
123
|
1 |
|
VanillaFilter.prototype.fallback = function(show) { |
|
|
|
|
|
|
124
|
5 |
|
var _ = this, |
|
125
|
|
|
display = (show ? 'block' : 'none'); |
|
126
|
|
|
|
|
127
|
5 |
|
Object.keys(_.vanillaFallback).map(function(index) { |
|
128
|
|
|
_.vanillaFallback[index].style.display = display; |
|
129
|
|
|
}); |
|
130
|
|
|
} |
|
131
|
|
|
|
|
132
|
|
|
/** |
|
133
|
|
|
* Extend default options by user input options |
|
134
|
|
|
* @param {Object} options |
|
135
|
|
|
* @param {Object} overrides |
|
136
|
|
|
*/ |
|
137
|
1 |
|
function extendDefaults(options, overrides) { |
|
138
|
1 |
|
for (var option in overrides) { |
|
139
|
2 |
|
if (overrides.hasOwnProperty(option)) { |
|
140
|
1 |
|
options[option] = overrides[option]; |
|
141
|
|
|
} |
|
142
|
|
|
} |
|
143
|
|
|
|
|
144
|
1 |
|
return options; |
|
145
|
|
|
} |
|
146
|
|
|
|
|
147
|
|
|
/** |
|
148
|
|
|
* Get the correct handler for the clicked filter trigger |
|
149
|
|
|
* @param {Element} element |
|
150
|
|
|
*/ |
|
151
|
1 |
|
function getTriggerHandler(element) { |
|
152
|
2 |
|
var handler = ['SELECT', 'INPUT'].includes(element.tagName) ? 'change' : 'click'; |
|
153
|
|
|
|
|
154
|
|
|
return handler; |
|
155
|
|
|
} |
|
156
|
|
|
|
|
157
|
|
|
/** |
|
158
|
|
|
* Get the currenct active filter values from filter triggers to filter on |
|
159
|
|
|
* @param {Element} filterElem |
|
160
|
|
|
* @param {String} filterTriggerValue |
|
161
|
|
|
*/ |
|
162
|
1 |
|
function getFilterValues(filterElem, filterTriggerValue, currentFilters) { |
|
163
|
|
|
var value, |
|
164
|
|
|
newFilters = currentFilters; |
|
165
|
|
|
|
|
166
|
2 |
|
if(['SELECT', 'INPUT'].includes(filterElem.tagName)) { |
|
167
|
|
|
value = filterElem.value; |
|
168
|
|
|
} else { |
|
169
|
|
|
value = filterElem.dataset[filterTriggerValue]; |
|
170
|
|
|
} |
|
171
|
|
|
|
|
172
|
2 |
|
if(value === "") { |
|
173
|
|
|
newFilters = []; |
|
174
|
|
|
} else { |
|
175
|
2 |
|
if(currentFilters.includes(value)) { |
|
176
|
|
|
newFilters.splice(newFilters.indexOf(value), 1); |
|
177
|
|
|
} else { |
|
178
|
|
|
newFilters.push(value); |
|
179
|
|
|
} |
|
180
|
|
|
} |
|
181
|
|
|
|
|
182
|
|
|
return newFilters; |
|
183
|
|
|
} |
|
184
|
|
|
|
|
185
|
|
|
/** |
|
186
|
|
|
* Get the filter values from a target element that should be filtered |
|
187
|
|
|
* @param {Element} targetElem |
|
188
|
|
|
* @param {String} targetFilterValue |
|
189
|
|
|
*/ |
|
190
|
1 |
|
function getTargetValues(targetElem, targetFilterValue) { |
|
191
|
|
|
var targetValues = targetElem.dataset[targetFilterValue], |
|
192
|
|
|
trimmedTargetValues = targetValues.replace(/\s/g, ''), |
|
193
|
|
|
separateTrimmedTargetValues = trimmedTargetValues.split(','); |
|
194
|
|
|
|
|
195
|
|
|
return separateTrimmedTargetValues.filter(Boolean); |
|
196
|
|
|
} |
|
197
|
|
|
|
|
198
|
|
|
})(); |
|
199
|
|
|
|
dverleg /
vanillafilter
Loading history...
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.