78 lines
2.5 KiB
JavaScript
78 lines
2.5 KiB
JavaScript
const sideProjects = {
|
|
allButton: null,
|
|
categoryButtons: [],
|
|
projects: [],
|
|
|
|
categoryStatus() {
|
|
const stat = {};
|
|
let showAll = this.allButton.classList.contains('selected');
|
|
this.categoryButtons.forEach((btn) => {
|
|
let c = btn.dataset.category;
|
|
stat[c] = showAll ? showAll : btn.classList.contains('selected');
|
|
});
|
|
return stat;
|
|
},
|
|
|
|
populate(projectsElement) {
|
|
projectsElement.querySelectorAll('button[data-category]').forEach((btn) => {
|
|
let category = btn.dataset.category;
|
|
if (category == 'all') {
|
|
sideProjects._setupAllButton(btn);
|
|
} else if (category != null) {
|
|
sideProjects.categoryButtons.push(btn);
|
|
sideProjects._setupCategoryButton(btn);
|
|
}
|
|
});
|
|
|
|
this.projects = projectsElement.querySelectorAll('.project');
|
|
},
|
|
|
|
updateProjectVisibility() {
|
|
const stat = this.categoryStatus();
|
|
this.projects.forEach((proj) => {
|
|
let category = proj.dataset.category;
|
|
if (!stat[category]) {
|
|
proj.setAttribute('hidden', '');
|
|
} else {
|
|
proj.removeAttribute('hidden');
|
|
}
|
|
});
|
|
},
|
|
|
|
_setupAllButton(btn) {
|
|
this.allButton = btn;
|
|
btn.addEventListener('click', function() {
|
|
this.classList.add('selected');
|
|
sideProjects.categoryButtons.forEach((btn) => {
|
|
btn.classList.remove('selected');
|
|
});
|
|
sideProjects.updateProjectVisibility();
|
|
});
|
|
},
|
|
|
|
_setupCategoryButton(btn) {
|
|
btn.addEventListener('click', function() {
|
|
this.classList.toggle('selected');
|
|
|
|
if (this.classList.contains('selected')) {
|
|
sideProjects.allButton.classList.remove('selected');
|
|
} else {
|
|
const stat = sideProjects.categoryStatus();
|
|
const noCategoriesSelected = Object.values(stat).every((v) => !v);
|
|
const allCategoriesSelected = Object.values(stat).every((v) => v);
|
|
if (noCategoriesSelected || allCategoriesSelected) {
|
|
sideProjects.allButton.classList.add('selected');
|
|
}
|
|
}
|
|
|
|
sideProjects.updateProjectVisibility();
|
|
});
|
|
},
|
|
};
|
|
|
|
window.addEventListener('load', function() {
|
|
const projectsElement = document.querySelector('#side-projects');
|
|
sideProjects.populate(projectsElement);
|
|
sideProjects.allButton.click();
|
|
});
|
|
|