Finish up resume.js

root/scripts/resume.js

@@ -0,0 +1,87 @@
+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();
+});
+