refactoring avec claude + ajout scroll-margin-top et désaffichage du panel au click sur les liens du toc

This commit is contained in:
antonin gallon 2026-02-17 18:10:04 +01:00
parent d51fc592ed
commit 01c5b098e4
14 changed files with 149 additions and 121 deletions

View file

@ -12,14 +12,6 @@ function allYears ($article) {
return $years;
}
function addAnchors($content) {
$content = preg_replace_callback('/<h3>(.*?)<\/h3>/', function($matches) {
$slug = Str::slug($matches[1]);
return '<h3 id="' . $slug . '">' . $matches[1] . '</h3>';
}, $content);
return $content;
}
function setTitleFontSizeClass($title, $level = 'h1')
{
$length = strlen($title);

View file

@ -0,0 +1,47 @@
<?php
Kirby::plugin('actuel-inactuel/toc', [
'pageMethods' => [
/**
* Vérifie si la page doit afficher une TOC
*/
'hasToc' => function(): bool {
if (!$this->parent()?->parent()?->is('textes')) {
return false;
}
if (!$this->bodyBlocks()?->isNotEmpty()) {
return false;
}
return (bool) preg_match('/<h3>/', $this->bodyBlocks()->toBlocks());
},
/**
* Retourne les items de la TOC
*/
'tocItems' => function(): array {
if (!$this->bodyBlocks()?->isNotEmpty()) {
return [];
}
preg_match_all('/<h3>(.*?)<\/h3>/', $this->bodyBlocks()->toBlocks(), $matches);
return array_map(fn($title) => [
'title' => $title,
'slug' => Str::slug($title)
], $matches[1]);
},
/**
* Retourne le contenu avec les ancres ajoutées aux h3
*/
'bodyWithAnchors' => function(): string {
if (!$this->bodyBlocks()?->isNotEmpty()) {
return '';
}
return preg_replace_callback(
'/<h3>(.*?)<\/h3>/',
fn($m) => '<h3 id="' . Str::slug($m[1]) . '">' . $m[1] . '</h3>',
$this->bodyBlocks()->toBlocks()
);
}
]
]);

View file

@ -8,9 +8,9 @@ $isOpen ??= false;
<?= $slots->title() ?>
</a>
</div>
<?php if ($page->parent() && $page->parent()->parent()->is('textes')){
snippet('toc', ["content" => $page->bodyBlocks()->toBlocks()]);
} ?>
<?php if ($page->hasToc()): ?>
<?php snippet('toc') ?>
<?php endif ?>
<?php if ($slots->text()): ?>
<div class="text-wrapper">
<?= $slots->text() ?>

View file

@ -2,12 +2,12 @@
<?php if (!$page->is(page('lettre')) && !$page->is(page('a-propos'))): ?>
<footer id="main-footer">
<ul id="links">
<li class="open-nav-wrapper open-nav-wrapper_text hidden">
<button class="plus open-nav open-nav_text" title="chercher parmi les textes">textes</button>
<li class="open-nav-wrapper hidden">
<button class="plus open-nav" data-open-panel="text" title="chercher parmi les textes">textes</button>
</li>
<?php if ($page->parent() && $page->parent()->parent()->is('textes')): ?>
<li class="open-nav-wrapper open-nav-wrapper_toc hidden if_toc">
<button class="plus open-nav open-nav_toc" title="ouvrir le sommaire">sommaire</button>
<?php if ($page->hasToc()): ?>
<li class="open-nav-wrapper hidden">
<button class="plus open-nav" data-open-panel="toc" title="ouvrir le sommaire">sommaire</button>
</li>
<?php endif ?>
<li>

View file

@ -84,13 +84,7 @@ $entryTopPos ??= 20;
<body
class="background-grid <?= e($page->fullWidth() == 'true', 'full-width') ?>"
data-is_toc="<?php
if ($page->bodyBlocks() && $page->bodyBlocks()->isNotEmpty() && preg_match('/<h3>(.*?)<\/h3>/', $page->bodyBlocks())){
echo "true";
}else{
echo "false";
}
?>"
data-has-toc="<?= $page->hasToc() ? 'true' : 'false' ?>"
data-template="<?= $page->template() ?>">
<button class="theme-toggler" data-theme-toggler>
<span class="theme-toggler-icon"></span>
@ -107,8 +101,7 @@ $entryTopPos ??= 20;
</a>
</header>
<?php snippet('nav') ?>
<?php if ($page->parent() && $page->parent()->parent()->is('textes')){
snippet('panel-toc');
}
?>
<?php if ($page->hasToc()): ?>
<?php snippet('panel-toc') ?>
<?php endif ?>
<div id="nav-overlay"></div>

View file

@ -1,4 +1,4 @@
<nav class="panel panel-text" x-data="{search: ''}">
<nav class="panel panel-text" data-panel="text" x-data="{search: ''}">
<header>
<p class="sort-btns">
<button class="sort-btn sort-btn--years active">années</span></button>

View file

@ -1,6 +1,4 @@
<div class="panel panel-toc" x-data="{search: ''}">
<?php
snippet('toc', ["content" => $page->bodyBlocks()->toBlocks()]);
?>
<div class="panel panel-toc" data-panel="toc">
<?php snippet('toc') ?>
<button class="less panel-close">sommaire</button>
</div>
</div>

View file

@ -1,13 +1,8 @@
<nav class="toc">
<div class="light toc_label if_toc">Sommaire</div>
<div class="light toc_label">Sommaire</div>
<ul>
<?php
preg_match_all('/<h3>(.*?)<\/h3>/', $content, $titres);
foreach ($titres[1] as $index => $titre) {
$slug = Str::slug($titre);
echo '<li><a href="#' . $slug . '">' . $titre . '</a></li>';
}
?>
<?php foreach ($page->tocItems() as $item): ?>
<li><a href="#<?= $item['slug'] ?>"><?= $item['title'] ?></a></li>
<?php endforeach ?>
</ul>
</nav>

View file

@ -34,7 +34,7 @@
<?php if ($page->isHtmlMode()->isTrue()): ?>
<?= $page->htmlBody()->kt() ?>
<?php elseif ($page->bodyBlocks()->isNotEmpty()): ?>
<?= addAnchors($page->bodyBlocks()->toBlocks()) ?>
<?= $page->bodyWithAnchors() ?>
<?php else: ?>
<?= $page->body() ?>
<?php endif ?>