Skip to content

Commit 028b9b4

Browse files
beverleyybeverleyy
committed
Make filter generation more maintainer-friendly
1 parent ecc04e0 commit 028b9b4

File tree

3 files changed

+237
-210
lines changed

3 files changed

+237
-210
lines changed

‎_data/filters.yml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
- title: "Flow Type"
2+
group: "Reynolds"
3+
items:
4+
- { name: "Laminar", filter: ".laminar" }
5+
- { name: "Turbulent", filter: ".turbulent" }
6+
7+
- title: "Combustion"
8+
group: "Combustion"
9+
items:
10+
- { name: "Reacting", filter: ".reacting" }
11+
- { name: "Non-reacting", filter: ".nonreacting" }
12+
13+
- title: "Dimensionality"
14+
group: "Dimensionality"
15+
items:
16+
- { name: "2D", filter: ".twoD" }
17+
- { name: "3D", filter: ".threeD" }
18+
19+
- title: "Flow Configuration"
20+
group: "FlowType"
21+
items:
22+
- { name: "HIT", filter: ".hit" }
23+
- { name: "Pipe", filter: ".pipe" }
24+
- { name: "Channel", filter: ".channel" }
25+
- { name: "Jet", filter: ".jet" }
26+
- { name: "Environmental", filter: ".environmental" }
27+
28+
- title: ""
29+
group: "ML"
30+
comb: true
31+
exclusive: false
32+
items:
33+
- { name: "Benchmark Datasets", filter: ".benchmark" }
34+
35+
- title: ""
36+
group: "DataType"
37+
items:
38+
- { name: "Numerical", filter: ".numerical" }
39+
- { name: "Experimental", filter: ".experimental" }
40+

‎_includes/datasets_filters.html‎

Lines changed: 28 additions & 210 deletions
Original file line numberDiff line numberDiff line change
@@ -10,44 +10,33 @@ <h4 class="nav__title">
1010
<li class="filter-group">
1111
<a href="#" data-filter="" class="show-all is-checked">Show All</a>
1212
</li>
13-
<li class="filter-group filter-categories excl" data-filter-group="Reynolds">
14-
<a href="#" data-filter='' class="is-checked">Flow Type</a>
15-
<ul>
16-
<li><a href="#" data-filter=".laminar">Laminar</a></li>
17-
<li><a href="#" data-filter=".turbulent">Turbulent</a></li>
18-
</ul>
19-
</li>
20-
<li class="filter-group filter-categories excl" data-filter-group="Combustion">
21-
<a href="#" data-filter='' class="is-checked">Combustion</a>
22-
<ul>
23-
<li><a href="#" data-filter=".reacting">Reacting</a></li>
24-
<li><a href="#" data-filter=".nonreacting">Non-reacting</a></li>
25-
</ul>
26-
</li>
27-
<li class="filter-group filter-categories excl" data-filter-group="Dimensionality">
28-
<a href="#" data-filter='' class="is-checked">Dimensionality</a>
29-
<ul>
30-
<li><a href="#" data-filter=".twoD">2D</a></li>
31-
<li><a href="#" data-filter=".threeD">3D</a></li>
32-
</ul>
33-
</li>
34-
<li class="filter-group filter-categories excl" data-filter-group="FlowType">
35-
<a href="#" data-filter='' class="is-checked">Flow Configuration</a>
36-
<ul>
37-
<li><a href="#" data-filter=".hit">HIT</a></li>
38-
<li><a href="#" data-filter=".pipe">Pipe</a></li>
39-
<li><a href="#" data-filter=".channel">Channel</a></li>
40-
<li><a href="#" data-filter=".jet">Jet</a></li>
41-
<li><a href="#" data-filter=".environmental">Environmental</a></li>
42-
</ul>
43-
</li>
44-
<li class="filter-group filter-categories comb" data-filter-group="ML">
45-
<a href="#" data-filter=".benchmark">Benchmark Datasets</a>
46-
</li>
47-
<li class="filter-group filter-categories excl" data-filter-group="DataType">
48-
<a href="#" data-filter=".numerical">Numerical Datasets</a>
49-
<a href="#" data-filter=".experimental">Experimental Datasets</a>
50-
</li>
13+
{% for filter in site.data.filters %}
14+
{% assign exclusive = filter.exclusive | default: true %}
15+
{% assign comb = filter.comb | default: false %}
16+
<li class="filter-group filter-categories
17+
{% if exclusive %}excl{% endif %}
18+
{% if comb %} comb{% endif %}"
19+
{% if filter.group != "" %} data-filter-group="{{ filter.group }}"{% endif %}>
20+
21+
{% if filter.title != "" %}
22+
<a href="#" data-filter='' class="is-checked">{{ filter.title }}</a>
23+
24+
{% if filter.items and filter.items.size > 0 %}
25+
<ul>
26+
{% for item in filter.items %}
27+
<li><a href="#" data-filter="{{ item.filter }}">{{ item.name }}</a></li>
28+
{% endfor %}
29+
</ul>
30+
{% endif %}
31+
{% else %}
32+
{% if filter.items and filter.items.size > 0 %}
33+
{% for item in filter.items %}
34+
<a href="#" data-filter="{{ item.filter }}">{{ item.name }}</a>
35+
{% endfor %}
36+
{% endif %}
37+
{% endif %}
38+
</li>
39+
{% endfor %}
5140
</ul>
5241
</nav>
5342
</aside>
@@ -59,176 +48,5 @@ <h2>BLASTNet Datasets</h2>
5948

6049
<script src="https://cdn.jsdelivr.net/npm/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
6150
<script src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
62-
63-
<script>
64-
var grid;
65-
document.addEventListener('DOMContentLoaded',function(){
66-
var container = document.querySelector('.entries-grid');
67-
var filters = {};
68-
69-
grid = new Isotope(container, {
70-
itemSelector: '.grid__item',
71-
layoutMode: 'fitRows'
72-
});
73-
74-
window.addEventListener('resize', function(){
75-
grid.layout();
76-
});
77-
78-
imagesLoaded(container).on('progress',function(){
79-
grid.layout();
80-
});
81-
82-
var activeClass = "is-checked",
83-
comboClass = "comb",
84-
exclClass = "excl",
85-
resetClass = "show-all";
86-
87-
var defaults = document.querySelectorAll("a." + activeClass + '[data-filter=""]');
88-
89-
document.querySelectorAll(".filter-group a").forEach(function(element) {
90-
element.addEventListener("click", function(e) {
91-
var thisElement = this;
92-
var comboFilter,
93-
filterAttr = "data-filter";
94-
if (resetClass && !thisElement.classList.contains(resetClass)) {
95-
var filterValue = thisElement.getAttribute(filterAttr);
96-
var optionSet = thisElement.closest(".filter-group");
97-
var group = optionSet.getAttribute("data-filter-group");
98-
var filterGroup = filters[group];
99-
if (!filterGroup) {
100-
filterGroup = filters[group] = [];
101-
}
102-
var selectAll = optionSet.querySelectorAll("a[" + filterAttr + '=""]');
103-
document.querySelectorAll("." + resetClass).forEach(function(element) {
104-
element.classList.remove(activeClass);
105-
});
106-
comboFiltering(
107-
thisElement,
108-
filters,
109-
filterAttr,
110-
filterValue,
111-
optionSet,
112-
group,
113-
selectAll,
114-
activeClass,
115-
comboClass,
116-
exclClass
117-
);
118-
comboFilter = getComboFilter(filters);
119-
if (!comboFilter.length) document.querySelector("a." + resetClass).classList.add(activeClass);
120-
thisElement.classList.toggle(activeClass);
121-
} else {
122-
filters = {};
123-
comboFilter = "";
124-
document.querySelectorAll(".filter-group a").forEach(function(element) {
125-
element.classList.remove(activeClass);
126-
});
127-
thisElement.classList.add(activeClass);
128-
defaults.forEach(function(element) {
129-
element.classList.add(activeClass);
130-
});
131-
}
132-
grid.arrange({filter: comboFilter});
133-
e.preventDefault();
134-
});
135-
});
136-
grid.arrange();
137-
});
138-
139-
function comboFiltering(
140-
element,
141-
filters,
142-
filterAttr,
143-
filterValue,
144-
optionSet,
145-
group,
146-
selectAll,
147-
activeClass,
148-
comboClass,
149-
exclClass
150-
) {
151-
if (!optionSet.classList.contains(exclClass)) {
152-
if (!element.classList.contains(activeClass) && filterValue.length) {
153-
filters[group].push(filterValue);
154-
selectAll.forEach(function(element) {
155-
element.classList.remove(activeClass);
156-
});
157-
} else if (filterValue.length) {
158-
if (optionSet.classList.contains(comboClass)) {
159-
filters[group][0] = filters[group][0].replace(filterValue, "");
160-
if (!filters[group][0].length)
161-
filters[group].splice(0, 1);
162-
} else {
163-
var curIndex = filters[group].indexOf(filterValue);
164-
if (curIndex > -1) filters[group].splice(curIndex, 1);
165-
}
166-
if (!optionSet.querySelectorAll("a." + activeClass + ":not(["+filterAttr+"=''])").length)
167-
selectAll.forEach(function(element) {
168-
element.classList.add(activeClass);
169-
});
170-
} else {
171-
optionSet.querySelectorAll("a." + activeClass).forEach(function(element) {
172-
element.classList.remove(activeClass);
173-
});
174-
filters[group] = [];
175-
}
176-
if (optionSet.classList.contains(comboClass) && filters[group].length)
177-
filters[group] = [filters[group].join("")];
178-
} else {
179-
if (!element.classList.contains(activeClass) && filterValue.length) {
180-
optionSet.querySelectorAll("a." + activeClass).forEach(function(filterLink) {
181-
var removeFilter = filterLink.getAttribute(filterAttr);
182-
var removeIndex = filters[group].indexOf(removeFilter);
183-
filters[group].splice(removeIndex, 1);
184-
});
185-
filters[group].push(filterValue);
186-
optionSet.querySelectorAll("a." + activeClass).forEach(function(element) {
187-
element.classList.remove(activeClass);
188-
});
189-
} else if (filterValue.length) {
190-
var curIndex = filters[group].indexOf(filterValue);
191-
if (curIndex > -1) filters[group].splice(curIndex, 1);
192-
//if (!optionSet.querySelectorAll("a." + activeClass + ":not(["+filterAttr+"=''])").length)
193-
if (!filters[group].length)
194-
selectAll.forEach(function(element) {
195-
element.classList.add(activeClass);
196-
});
197-
} else {
198-
optionSet.querySelectorAll("a." + activeClass).forEach(function(element) {
199-
element.classList.remove(activeClass);
200-
});
201-
filters[group] = [];
202-
}
203-
}
204-
}
205-
206-
function getComboFilter(filters) {
207-
var i = 0;
208-
var comboFilters = [];
209-
210-
for (var prop in filters) {
211-
var filterGroup = filters[prop];
212-
if (!filterGroup.length) {
213-
continue;
214-
}
215-
if (i === 0) {
216-
comboFilters = filterGroup.slice(0);
217-
} else {
218-
var filterSelectors = [];
219-
var groupCombo = comboFilters.slice(0);
220-
for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
221-
for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
222-
filterSelectors.push(groupCombo[j] + filterGroup[k]);
223-
}
224-
}
225-
comboFilters = filterSelectors;
226-
}
227-
i++;
228-
}
229-
230-
var comboFilter = comboFilters.join(", ");
231-
return comboFilter;
232-
}
233-
</script>
51+
<script src="/assets/js/dataset_filters.js"></script>
23452

0 commit comments

Comments
 (0)