basic functionality of navigating projects, with two projects highlighted on the main page.

2023-05-14 20:47:06 -06:00
parent 6d1099590e
commit 7b9fbf8976
10 changed files with 401 additions and 306 deletions
@@ -1,15 +1,104 @@
-const panels = document.querySelectorAll('.panel');
+// the .panels div which contains each panel
+const panelContainer = document.querySelector('.panels');

+// each panel inside of the .panels div. this is the original copy of each panel
+const panels = [...document.querySelectorAll('.panel')];
+    // add event listeners to each panel
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+
+// buttons to filter projects
+const searchButtons = document.querySelectorAll('.search');
+  // add event listeners to each button
+  searchButtons.forEach(button => {
+    if(!button.classList.contains('input-box'))
+      button.addEventListener('click', displayMatches)
+  });
+
+// the search box to filter projects
+const searchInput = document.querySelector('.input-box');
+    // add event listeners to the search box
+    searchInput.addEventListener('change', displayMatches);
+    searchInput.addEventListener('keyup', displayMatches);
+    
+
+ /*
+  * If there is currently an open panel, toggle it.
+  * Toggle the newly selected panel to open.
+  */
 function toggleOpen() {
+  let currentOpen = document.querySelector('.open');
+  if(currentOpen !== null && currentOpen !== this) currentOpen.classList.toggle('open');
  this.classList.toggle('open');
 }

+ /*
+  * If there is currently an active panel, toggle it.
+  * Toggle the newly selected panel to be active.
+  */
 function toggleActive(e) {
-  console.log(e.propertyName);
  if (e.propertyName.includes('flex')) {
+    let currentActive = document.querySelector('.open-active');
+    if(currentActive !== null && currentActive !== this) currentActive.classList.toggle('open-active');
    this.classList.toggle('open-active');
+    updateCarousel(e);
  }
 }

-panels.forEach(panel => panel.addEventListener('click', toggleOpen));
-panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+/*
+ * Update the carousel to use the selected project's screenshot folder.
+ */
+function updateCarousel(e) {
+  console.log(e.target.id); // TODO: Need to implement.
+}
+
+ /* 
+  * Find matches based upon a letter or combination of letters.
+  * Matches are found only within the class list of each project panel.
+  */
+function findMatches(wordToMatch, isInputBox) {
+  // if the search string is empty, return the original panels
+  if(wordToMatch === "") return panels;
+
+  let results = [];
+
+  // for each of the projects
+  panels.forEach(project => {
+
+    // iterate through the class list of that project
+    project.classList.forEach(clazz => {
+
+      // if the class has a match and the class is not the panel, add it to the array
+      if ((clazz !== 'panel' && clazz == wordToMatch.toLowerCase()) && !isInputBox) results.push(project);
+      if ((clazz !== 'panel' && clazz.includes(wordToMatch.toLowerCase())) && isInputBox) results.push(project);
+    });
+
+    // reset each project to it's default state (unopened)
+    if(project.classList.contains('open')) project.classList.toggle('open');
+    if(project.classList.contains('open-active')) project.classList.toggle('open-active');
+  });
+  return results;
+}
+
+ /*
+  * Set the .panels inner HTML equal to the outer HTML of each project match. 
+  */
+function displayMatches(projects) {
+  // THIS NEEDS TO BE MOVED TO A GENERAL INPUT MANAGER
+  // TODO: Projects is a parameter, to allow for reset button (see below)
+  // get the array of matches
+  //if(matchArray.length === 0) matchArray = panels; -> if the array of matches has none, then reset
+  if(!this.classList.contains('input-box')) 
+    projects = findMatches(this.id, false);
+  else projects = findMatches(this.value, true);
+
+  //projects.forEach(project => console.log(project));
+
+  // set the inner html of the panels div to the combined HTML of each matched project.
+  panelContainer.innerHTML = projects.map(project => project.outerHTML).join('\n');
+  
+  let newPanels = [...document.querySelectorAll('.panel')];
+  // add event listeners to each panel
+  newPanels.forEach(panel => panel.addEventListener('click', toggleOpen));
+  newPanels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+}