studio-variable/index-main
4
0
Fork 0
Code Issues 14 Pull requests Projects Releases Packages Wiki Activity Actions

sort js
All checks were successful
Deploy / Deploy to Production (push) Successful in 14s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-25 16:07:14 +01:00
parent a907d317b8
commit 494dd15166
10 changed files with 100 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/components/_dropdown.scss
View file

@ -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: "◀";

2
assets/css/style.css
View file

@ -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: "◀";

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

10
assets/js/script.js
View file

@ -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();
}
});
}

63
assets/js/sort.js Normal file
View file

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

2
site/languages/en.php
View file

@ -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',
],
];

2
site/languages/fr.php
View file

@ -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',
],
];

8
site/templates/impacts.php
View file

@ -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>

11
site/templates/investigations.php
View file

@ -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>

8
site/templates/news.php
View file

@ -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>