jepler/circuitpython-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

initial working filters

Browse source
This commit is contained in:
Justin Cooper 2019-03-21 15:56:01 -05:00
parent 823b657bda
commit 1e328feefb
1 changed files with 156 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

179
assets/javascript/downloads.js
View file

@ -1,40 +1,64 @@
document.addEventListener('DOMContentLoaded',function() {
var downloadsSearch = {
initFilter: false,
manufacturers: {},
features: {},
selected: {
manufacturers: [],
features: []
}
};
document.addEventListener('DOMContentLoaded', function() {
var searchElement = document.getElementById("search");
searchElement.addEventListener('keyup', handleSearch);
var filterElement = document.querySelector(".downloads-filter .filter");
filterElement.addEventListener('click', displayFilter);
filterElement.addEventListener('click', handleFilter);
});
function handleSearch(event) {
var regex = new RegExp(event.target.value, "gi");
var i, downloads = document.getElementsByClassName("download");
for (i = 0; i < downloads.length; i++) {
download = downloads[i];
var name = download.dataset.name;
if (name.match(regex)) {
download.style.display = 'block';
} else {
download.style.display = 'none';
}
}
filterResults(event.target.value);
}
function displayFilter(event) {
var manufacturers = [];
function handleFilter(event) {
if (!downloadsSearch.initFilter) {
initFilter();
}
toggleFilterContainer();
}
function initFilter() {
var downloads = document.querySelectorAll('.download');
downloads.forEach(function(download) {
if (manufacturers.indexOf(download.dataset.manufacturer) === -1) {
manufacturers.push(download.dataset.manufacturer);
var manufacturer = download.dataset.manufacturer;
if (manufacturer in downloadsSearch.manufacturers) {
downloadsSearch.manufacturers[manufacturer].push(download.dataset.id);
} else {
downloadsSearch.manufacturers[manufacturer] = [download.dataset.id];
}
var features = download.dataset.features.split(',');
features.forEach(function(feature) {
if (!feature.length) {
return;
}
if (feature in downloadsSearch.features) {
downloadsSearch.features[feature].push(download.dataset.id);
} else {
downloadsSearch.features[feature] = [download.dataset.id];
}
});
});
setupManufacturers(manufacturers);
toggleFilterContainer();
setupManufacturers();
setupFeatures();
setupFilterListeners();
downloadsSearch.initFilter = true;
}
function toggleFilterContainer() {
@ -47,19 +71,128 @@ function toggleFilterContainer() {
}
}
function setupManufacturers(manufacturers) {
function setupManufacturers() {
var manufacturerList = document.querySelector('.manufacturers .content');
manufacturers.forEach(function(manufacturer) {
for (manufacturer in downloadsSearch.manufacturers) {
var li = document.createElement("li");
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "manufacturer";
checkbox.className = 'filter-checkbox';
checkbox.value = manufacturer;
li.appendChild(checkbox);
li.appendChild(document.createTextNode(manufacturer));
manufacturerList.appendChild(li);
}
}
function setupFeatures() {
var featureList = document.querySelector('.features .content');
for (feature in downloadsSearch.features) {
var li = document.createElement("li");
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "feature";
checkbox.className = 'filter-checkbox';
checkbox.value = feature;
li.appendChild(checkbox);
li.appendChild(document.createTextNode(feature));
featureList.appendChild(li);
}
}
function setupFilterListeners() {
document.body.addEventListener('change', function (event) {
var checkbox = event.target;
if (checkbox.name === 'manufacturer') {
if (checkbox.checked) {
downloadsSearch.selected.manufacturers.push(checkbox.value);
} else {
var index = downloadsSearch.selected.manufacturers.indexOf(checkbox.value);
if (index > -1) {
downloadsSearch.selected.manufacturers.splice(index, 1);
}
}
filterResults();
}
if (checkbox.name === 'feature') {
if (checkbox.checked) {
downloadsSearch.selected.features.push(checkbox.value);
} else {
var index = downloadsSearch.selected.features.indexOf(checkbox.value);
if (index > -1) {
downloadsSearch.selected.features.splice(index, 1);
}
}
filterResults();
}
});
}
function filterResults(searchTerm) {
var displayedManufacturers = [], displayedFeatures = [];
var selectedManufacturers = downloadsSearch.selected.manufacturers;
var selectedFeatures = downloadsSearch.selected.features;
selectedManufacturers.forEach(function(manufacturer) {
Array.prototype.push.apply(displayedManufacturers, downloadsSearch.manufacturers[manufacturer]);
});
selectedFeatures.forEach(function(feature) {
Array.prototype.push.apply(displayedFeatures, downloadsSearch.features[feature]);
});
var downloads = document.querySelectorAll('.download');
downloads.forEach(function(download) {
if (!shouldDisplayDownload(download, searchTerm, displayedManufacturers, displayedFeatures)) {
download.style.display = 'none';
} else {
download.style.display = 'block';
}
});
}
function shouldDisplayDownload(download, searchTerm, displayedManufacturers, displayedFeatures) {
var shouldFilterFeatures = displayedFeatures.length > 0;
var shouldFilterManufacturers = displayedManufacturers.length > 0;
var shouldDisplay = false;
var id = download.dataset.id;
if (!shouldFilterFeatures && !shouldFilterManufacturers) {
shouldDisplay = true;
}
if (shouldFilterManufacturers) {
if (displayedManufacturers.includes(id)) {
if (shouldFilterFeatures) {
if (displayedFeatures.includes(id)) {
shouldDisplay = true;
}
} else {
shouldDisplay = true;
}
}
} else if (shouldFilterFeatures && displayedFeatures.includes(id)) {
shouldDisplay = true;
}
if (searchTerm && searchTerm.length > 0 && shouldDisplay) {
var regex = new RegExp(searchTerm, "gi");
var name = download.dataset.name;
shouldDisplay = name.match(regex);
}
return shouldDisplay;
}