merge

assets/js/project-slideshow.js

@@ -0,0 +1,32 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const prevButtons = document.querySelectorAll("button.prev");
+  const nextButtons = document.querySelectorAll("button.next");
+
+  nextButtons.forEach((nextButton) => {
+    nextButton.addEventListener("click", () => {
+      const activePicture = nextButton.closest(".project-slideshow").querySelector("picture.active");
+      const targetPicture =
+        activePicture.nextElementSibling &&
+        activePicture.nextElementSibling.tagName === "PICTURE"
+          ? activePicture.nextElementSibling
+          : nextButton.closest(".project-slideshow").querySelector("picture");
+      activePicture.classList.remove("active");
+      targetPicture.classList.add("active");
+    });
+  });
+
+  prevButtons.forEach((prevButton) => {
+    prevButton.addEventListener("click", () => {
+      const slideshow = prevButton.closest(".project-slideshow");
+      const activePicture = slideshow.querySelector("picture.active");
+      const pictures = [...slideshow.querySelectorAll("picture")];
+      const targetPicture =
+        activePicture.previousElementSibling &&
+        activePicture.previousElementSibling.tagName === "PICTURE"
+          ? activePicture.previousElementSibling
+          : pictures[pictures.length - 1];
+      activePicture.classList.remove("active");
+      targetPicture.classList.add("active");
+    });
+  });
+});

assets/js/project-toggle.js

@@ -16,30 +16,32 @@ function selectProject(slug) {
 }
 
 allProjects.forEach((project) => {
-  project.addEventListener("click", () => {
+  project.querySelector("button").addEventListener("click", () => {
     allProjects.forEach((p) => {
       p.classList.add("unselected");
       p.classList.remove("selected");
     });
+
     project.classList.add("selected");
     project.classList.remove("unselected");
+
     Router.setParam("project", project.dataset.slug);
   });
 });
 
-const toggleProjects = document.querySelectorAll(".project-toggler");
+// const toggleProjects = document.querySelectorAll(".project-toggler");
 
-toggleProjects.forEach((button) => {
-  button.addEventListener("click", (event) => {
-    const parentLi = button.closest("li");
-    if (parentLi.classList.contains("selected")) {
-      event.stopPropagation();
-      allProjects.forEach((p) => p.classList.remove("unselected"));
-      parentLi.classList.remove("selected");
-      Router.setParam("project", null);
-    }
-  });
-});
+// toggleProjects.forEach((button) => {
+//   button.addEventListener("click", (event) => {
+//     const parentLi = button.closest("li");
+//     if (parentLi.classList.contains("selected")) {
+//       event.stopPropagation();
+//       allProjects.forEach((p) => p.classList.remove("unselected"));
+//       parentLi.classList.remove("selected");
+//       Router.setParam("project", null);
+//     }
+//   });
+// });
 
 const closeAllProjects = document.querySelectorAll(".all-projects-closer");
 closeAllProjects.forEach((closeProject) => {
@@ -49,7 +51,7 @@ closeAllProjects.forEach((closeProject) => {
 });
 
 window.addEventListener("routechange", () =>
-  selectProject(Router.getParam("project")),
+  selectProject(Router.getParam("project"))
 );
 
 selectProject(Router.getParam("project"));