sort js

assets/js/script.js

@@ -6,6 +6,7 @@ import { playVideo } from './hero-video.js';
 import { initDropdowns } from './dropdown.js';
 import { initSwipers } from './swipers.js';
 import { initSliderBeforeAfter, progressBar, scrollBack, navInvestigation } from './investigation.js';
+import { initSort } from './sort.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
@@ -36,7 +37,7 @@ window.onload = async function () {
     if (window.innerWidth >= responsiveSmall) {
       if (!msnry) {
         msnry = new Masonry(elem, {
-          itemSelector: '.card--block',
+          itemSelector: '.card--block:not(.is-sort-hidden)',
           columnWidth: '.grid-sizer',
           percentPosition: true,
           gutter: 26
@@ -53,6 +54,13 @@ window.onload = async function () {
   initMasonry();
   window.addEventListener('resize', initMasonry);
 
+  initSort(() => {
+    if (msnry) {
+      msnry.reloadItems();
+      msnry.layout();
+    }
+  });
+
 
 
 }

assets/js/sort.js

@@ -0,0 +1,63 @@
+const HIDDEN_CLASS = 'is-sort-hidden';
+
+// Injecte la règle CSS pour masquer les cards filtrées
+const style = document.createElement('style');
+style.textContent = `.${HIDDEN_CLASS} { display: none !important; }`;
+document.head.appendChild(style);
+
+export function initSort(onLayoutChange) {
+  const pageSort = document.querySelector('.page__sort');
+  if (!pageSort) return;
+
+  const container = document.querySelector('[data-sort-container]');
+  if (!container) return;
+
+  const getCards = () => Array.from(container.querySelectorAll('[data-date]'));
+
+  // — Sort by date —
+  const sortBtn = pageSort.querySelector('[data-sort-type]');
+  if (sortBtn) {
+    sortBtn.addEventListener('click', () => {
+      const dir = sortBtn.getAttribute('data-sort-type') === 'down' ? 'up' : 'down';
+      sortBtn.setAttribute('data-sort-type', dir);
+
+      const cards = getCards();
+      cards.sort((a, b) => {
+        const da = new Date(a.dataset.date || 0);
+        const db = new Date(b.dataset.date || 0);
+        return dir === 'up' ? da - db : db - da;
+      });
+      cards.forEach(c => container.appendChild(c));
+
+      onLayoutChange?.();
+    });
+  }
+
+  // — Filter by category / location —
+  const filterBtns = Array.from(pageSort.querySelectorAll('[data-filter]'));
+  filterBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const wasSelected = btn.classList.contains('is-selected');
+
+      // Ferme le dropdown parent
+      btn.closest('.dropdown')?.classList.remove('is-open');
+
+      // Bascule la sélection
+      filterBtns.forEach(b => b.classList.remove('is-selected'));
+      const value = wasSelected ? null : btn.getAttribute('data-filter');
+      if (!wasSelected) btn.classList.add('is-selected');
+
+      // Affiche / cache les cards
+      getCards().forEach(card => {
+        if (!value) {
+          card.classList.remove(HIDDEN_CLASS);
+        } else {
+          const cardFilters = (card.dataset.filter || '').split(' ').filter(Boolean);
+          card.classList.toggle(HIDDEN_CLASS, !cardFilters.includes(value));
+        }
+      });
+
+      onLayoutChange?.();
+    });
+  });
+}