87 lines
2.7 KiB
JavaScript
87 lines
2.7 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) {
|
|
const btn = projectsElement.querySelector('button[data-category="all"]');
|
|
this._setupAllButton(btn);
|
|
|
|
projectsElement.querySelectorAll('button[data-category]').forEach(function(btn) {
|
|
let category = btn.dataset.category;
|
|
if (category != null && category != 'all') {
|
|
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() {
|
|
let toggledOn = this.classList.contains('selected');
|
|
if (!toggledOn) {
|
|
return;
|
|
}
|
|
|
|
sideProjects.categoryButtons.forEach((cBtn) => {
|
|
cBtn.classList.remove('selected');
|
|
});
|
|
|
|
sideProjects.updateProjectVisibility();
|
|
});
|
|
},
|
|
|
|
_setupCategoryButton(btn) {
|
|
btn.addEventListener('click', function() {
|
|
const stat = sideProjects.categoryStatus();
|
|
let noCategoriesSelected = Object.values(stat).every((v) => !v);
|
|
let allCategoriesSelected = Object.values(stat).every((v) => v);
|
|
if (noCategoriesSelected || allCategoriesSelected) {
|
|
sideProjects.allButton.click();
|
|
} else {
|
|
sideProjects.allButton.classList.remove('selected');
|
|
}
|
|
sideProjects.updateProjectVisibility();
|
|
});
|
|
},
|
|
};
|
|
|
|
window.addEventListener('load', function() {
|
|
// Set up toggle buttons.
|
|
document.querySelectorAll('button.toggle').forEach((btn) => {
|
|
btn.addEventListener('click', function(event) {
|
|
event.currentTarget.classList.toggle('selected');
|
|
});
|
|
});
|
|
|
|
const projectsElement = document.querySelector('#side-projects');
|
|
sideProjects.populate(projectsElement);
|
|
sideProjects.allButton.click();
|
|
});
|
|
|