sort js

assets/css/components/_dropdown.scss

@@ -19,7 +19,7 @@
         visibility: hidden;
         transform: translateY(-4px);
         transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
-        z-index: 100;
+       z-index: calc(var(--z-header) - 100);
 
         &::before{
             content: "◀";

assets/css/style.css

@@ -1278,7 +1278,7 @@ button.sort[data-sort-type=up] .arrow {
   visibility: hidden;
   transform: translateY(-4px);
   transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
-  z-index: 100;
+  z-index: calc(var(--z-header) - 100);
 }
 .dropdown__content::before {
   content: "◀";

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?.();
+    });
+  });
+}

site/languages/en.php

@@ -14,5 +14,7 @@ return [
     'investigation.type'    => 'Investigation',
     'investigations.related' => 'Related investigations',
     'investigations.see_all' => 'See all investigations',
+    'filter.all'             => 'All',
+    'filter.all.m'           => 'All',
   ],
 ];

site/languages/fr.php

@@ -15,5 +15,7 @@ return [
     'investigation.type'    => 'Enquête',
     'investigations.related' => 'Enquêtes liées',
     'investigations.see_all' => 'Voir toutes les enquêtes',
+    'filter.all'             => 'Toutes',
+    'filter.all.m'           => 'Tous',
   ],
 ];

site/templates/impacts.php

@@ -22,12 +22,13 @@
                 <?php foreach (page('database')->impactCategories()->split() as $cat): ?>
                 <li><button type="button" data-filter="<?= esc(Str::slug($cat)) ?>"><?= esc($cat) ?></button></li>
                 <?php endforeach ?>
+                <li><button type="button" data-filter=""><?= t('filter.all') ?></button></li>
             </ul>
         </div>
     </div>
 </div>
 
-<div class="page__content grid-masonry">
+<div class="page__content grid-masonry" data-sort-container>
 
     <div class="grid-sizer"></div>
 
@@ -40,7 +41,10 @@
         $investigations = $impact->linkedInvestigations()->toPages();
     ?>
 
-    <div class="card--block has-link" data-impact-type="<?= esc(Str::slug($category)) ?>">
+    <div class="card--block has-link"
+        data-impact-type="<?= esc(Str::slug($category)) ?>"
+        data-filter="<?= esc(Str::slug($category)) ?>"
+        data-date="<?= $impact->created()->isNotEmpty() ? $impact->created()->toDate('yyyy-MM-dd') : '' ?>">
 
         <?php if ($cover): ?>
         <figure><?php snippet('picture', ['file' => $cover]) ?></figure>

site/templates/investigations.php

@@ -21,12 +21,13 @@
                 <?php foreach (page('database')->countries()->split() as $cat): ?>
                 <li><button type="button" data-filter="<?= esc(Str::slug($cat)) ?>"><?= esc($cat) ?></button></li>
                 <?php endforeach ?>
+                <li><button type="button" data-filter=""><?= t('filter.all.m') ?></button></li>
             </ul>
         </div>
     </div>
 </div>
 
-<section class="container-cards container-cards__investigations">
+<section class="container-cards container-cards__investigations" data-sort-container>
 
 <?php
 $superPin = $page->superPinnedInvestigation()->toPage();
@@ -55,8 +56,14 @@ foreach ($rest as $p) {
     $investigation = $item['page'];
     $type = $item['type'];
     $cover = $investigation->cover()->toFile();
+    $dateAttr = $investigation->incidentDate()->isNotEmpty()
+        ? $investigation->incidentDate()->toDate('yyyy-MM-dd')
+        : ($investigation->created()->isNotEmpty() ? $investigation->created()->toDate('yyyy-MM-dd') : '');
+    $filterAttr = implode(' ', array_map(fn($c) => Str::slug($c), $investigation->incidentCountry()->split()));
 ?>
-<article class="card--article<?= $type !== 'latest' ? ' pinned' : '' ?>">
+<article class="card--article<?= $type !== 'latest' ? ' pinned' : '' ?>"
+    data-date="<?= esc($dateAttr) ?>"
+    data-filter="<?= esc($filterAttr) ?>">
 
     <?php if ($cover): ?>
     <figure>

site/templates/news.php

@@ -25,12 +25,13 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
                 <?php foreach (page('database')->newsCategories()->split() as $cat): ?>
                 <li><button type="button" data-filter="<?= esc(Str::slug($cat)) ?>"><?= esc($cat) ?></button></li>
                 <?php endforeach ?>
+                <li><button type="button" data-filter=""><?= t('filter.all') ?></button></li>
             </ul>
         </div>
     </div>
 </div>
 
-<div class="page__content grid-masonry">
+<div class="page__content grid-masonry" data-sort-container>
 
     <div class="grid-sizer"></div>
 
@@ -43,7 +44,10 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
         $investigations = $newsItem->linkedInvestigations()->toPages();
     ?>
 
-    <div class="card--block has-link" data-news-type="<?= esc(Str::slug($category)) ?>">
+    <div class="card--block has-link"
+        data-news-type="<?= esc(Str::slug($category)) ?>"
+        data-filter="<?= esc(Str::slug($category)) ?>"
+        data-date="<?= $newsItem->created()->isNotEmpty() ? $newsItem->created()->toDate('yyyy-MM-dd') : '' ?>">
 
         <?php if ($cover): ?>
         <figure><?php snippet('picture', ['file' => $cover]) ?></figure>