merge

assets/css/src/_index.scss

@@ -22,11 +22,19 @@ body[data-template="index"] {
     }
   }
 
-  .projects-index summary {
-    cursor: pointer;
+  .projects-index {
+    li {
+      &.filtered-out {
+        display: none;
       }
 
-  .projects-index li.filtered-out {
+      section.toggle {
+        .project-slideshow {
+          picture:not(.active) {
             display: none;
           }
         }
+      }
+    }
+  }
+}

assets/css/style.css

@@ -610,12 +610,12 @@ body[data-template=index] .filter-menu ul {
   -moz-column-gap: calc(2 * var(--body-margin));
        column-gap: calc(2 * var(--body-margin));
 }
-body[data-template=index] .projects-index summary {
-  cursor: pointer;
-}
 body[data-template=index] .projects-index li.filtered-out {
   display: none;
 }
+body[data-template=index] .projects-index li section.toggle .project-slideshow picture:not(.active) {
+  display: none;
+}
 
 @media screen and (max-width: 1000px) {
   :root {

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"));

site/templates/index.php

@@ -21,7 +21,7 @@
                         <span> <?= $project->tags() ?> </span>
                         <span class="date"> <?= $project->date()->toDate('Y') ?> </span>
                 </button>
-                <span class="slide-number">slide number/total slides</span>
+                <span class="slide-number"><span class="active-index">0</span>/<?= $project->images()->count() ?></span>
             </div>
             <section class="toggle">
                 <div class= "project-slideshow-container">