events : filtres compagnie / hors-compagnie fonctionnels

Boutons de filtre actifs via data-target sur les boutons et data-company sur
les cartes. Clic sur un filtre actif réaffiche tout. Étiquette infos stylée
sous chaque carte, ajustements de mise en page de la grille.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/src/pages/_events.scss

@@ -2,11 +2,12 @@
   .events-grid {
     box-sizing: border-box;
     padding: 0 var(--space-body);
-    padding-top: 7rem;
+    padding-top: 11rem;
     width: 100%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 1rem;
+    align-items: flex-end;
+    gap: 3rem;
     background-color: #fff;
 
     .event-card {
@@ -21,7 +22,6 @@
         display: flex;
         justify-content: center;
         align-items: flex-end;
-        height: 8rem;
       }
 
       .cover-wrapper {
@@ -30,10 +30,10 @@
         margin-top: 1rem;
         .playing-now {
           position: absolute;
-          top: 2rem;
-          left: -2rem;
+          top: 2.5rem;
+          left: -2.6rem;
           transform: rotate(-45deg);
-          width: 10rem;
+          width: 12rem;
           text-align: center;
           display: flex;
           justify-content: center;
@@ -43,14 +43,21 @@
           p {
             width: max-content;
             padding: 0.2rem 0.5rem;
+            font-family: "Bartok", sans-serif;
+            font-weight: 600;
           }
         }
-        picture {
-          display: block;
-          img {
-            border-radius: 1rem;
-          }
-        }
+      }
+
+      .infos {
+        width: fit-content;
+        padding: 1.5rem 0.8rem 0.5rem 0.8rem;
+        margin-top: -1rem;
+        border-radius: 0 0 0.5rem 0.5rem;
+
+        background-color: #000;
+        color: #fff;
+        font-family: "SancySlab", serif;
       }
     }
   }

assets/js/filters.js

@@ -0,0 +1,44 @@
+const FILTER_TARGET_TO_COMPANY_VALUE = {
+  "inside-company": "true",
+  "outside-company": "",
+};
+
+export function initEventFilters() {
+  const filterButtons = document.querySelectorAll(".filter[data-target]");
+  const eventCards = document.querySelectorAll(".event-card[data-company]");
+
+  if (!eventCards.length) return;
+
+  filterButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const isAlreadyActive = button.classList.contains("active");
+
+      filterButtons.forEach((btn) => btn.classList.remove("active"));
+
+      if (isAlreadyActive) {
+        showAllCards(eventCards);
+        return;
+      }
+
+      button.classList.add("active");
+      showMatchingCards(
+        eventCards,
+        FILTER_TARGET_TO_COMPANY_VALUE[button.dataset.target]
+      );
+    });
+  });
+}
+
+function showAllCards(eventCards) {
+  eventCards.forEach((card) => card.removeAttribute("hidden"));
+}
+
+function showMatchingCards(eventCards, companyValue) {
+  eventCards.forEach((card) => {
+    if (card.dataset.company === companyValue) {
+      card.removeAttribute("hidden");
+    } else {
+      card.setAttribute("hidden", "");
+    }
+  });
+}

assets/js/script.js

@@ -1,5 +1,6 @@
 import { initCharacterJump }   from "./characters/jump.js";
 import { initPupilTracking }   from "./characters/pupilTracking.js";
+import { initEventFilters }    from "./filters.js";
 
 document.addEventListener("DOMContentLoaded", () => {
   const header            = document.querySelector(".main-header");
@@ -90,4 +91,5 @@ document.addEventListener("DOMContentLoaded", () => {
 
   initCharacterJump();
   initPupilTracking(svg);
+  initEventFilters();
 });

site/snippets/header.php

@@ -26,5 +26,10 @@
         </ul>
       </nav>
     </div>
+
+    <div class="filters">
+      <button class="filter" data-target="inside-company" title="filtrer">compagnie</button>
+      <button class="filter" data-target="outside-company" title="filtrer">hors-compagnie</button>
+    </div>
   </header>
   <main>

site/templates/events.php

@@ -3,7 +3,7 @@
 
 <ul class="events-grid">
   <?php foreach($page->children() as $event): ?>
-      <li class="event-card">
+      <li class="event-card" data-company="<?= $event->isFromCompany() ?>">
         <a href="<?= $event->url() ?>">
           <h2><?= $event->title() ?></h2>
           <div class="cover-wrapper">
@@ -17,6 +17,13 @@
               'alt'        => $event->title()->value(),
             ]) ?>
           </div>
+          <div class="infos">
+            <?php if ($event->isFromCompany()->isTrue()): ?>
+              <p>Compagnie</p>
+              <?php else: ?>
+                <p>Hors compagnie</p>
+            <?php endif ?>
+          </div>
         </a>
       </li>
   <?php endforeach ?>