Finish up resume.js

root/resume.html

@@ -156,6 +156,6 @@
     </dl>
   </section>
 </main>
-<script src="resume.js"></script>
+<script src="./scripts/resume.js"></script>
 </body>
 </html>

root/resume.js

@@ -1,43 +0,0 @@
-window.addEventListener('load', function() {
-  function toggleSelected(element) {
-    element.classList.toggle('selected');
-  }
-
-  function showAllElementsInList(list, show) {
-    for (var i = 0; i < list.length; i++) {
-      console.log('show');
-    }
-  }
-
-  var toggleButtons = document.querySelectorAll('button.toggle');
-  for (var i = 0; i < toggleButtons.length; i++) {
-    toggleButtons[i].addEventListener('click', function(event) {
-      toggleSelected(event.currentTarget);
-    });
-  }
-
-  var categoryButtons = document.querySelectorAll('.buttons button[class*="category-"]');
-  for (var i = 0; i < categoryButtons.length; i++) {
-    var btn = categoryButtons[i];
-    if (btn.classList.contains('category-all')) {
-      btn.addEventListener('click', function() {
-        showAllElementsInList(document.querySelectorAll('#side-projects .project'), true);
-
-        for (var i = 0; i < categoryButtons.length; i++) {
-          var btn = categoryButtons[i];
-          if (btn.classList.contains('category-all')) {
-            continue;
-          }
-          btn.classList.remove('selected');
-        }
-      });
-    } else {
-      btn.addEventListener('click', function() {
-        var allButton = document.querySelector('.buttons .category-all');
-        allButton.classList.remove('selected');
-        showAllElementsInList(document.querySelectorAll('#side-projects .
-      });
-    }
-  }
-});
-

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();
+});
+