refactoring avec claude + ajout scroll-margin-top et désaffichage du panel au click sur les liens du toc
This commit is contained in:
parent
d51fc592ed
commit
01c5b098e4
14 changed files with 149 additions and 121 deletions
|
|
@ -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);
|
||||
|
|
|
|||
47
site/plugins/toc/index.php
Normal file
47
site/plugins/toc/index.php
Normal 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()
|
||||
);
|
||||
}
|
||||
]
|
||||
]);
|
||||
|
|
@ -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() ?>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ?>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue