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

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git show:*)"
+    ]
+  }
+}

assets/css/src/article.css

@@ -30,11 +30,16 @@ article #main-content #chapo::after {
 article #main-content li:not(.text) {
   list-style-type: inherit;
 }
-
 article h3 {
+  scroll-margin-top: calc(var(--unit--vertical) * 1);
   margin-top: calc(3 * var(--unit--vertical));
   margin-bottom: calc(1 * var(--unit--vertical));
 }
+@media screen and (max-width: 640px) {
+  article h3 {
+    scroll-margin-top: calc(var(--unit--vertical) * 5);
+  }
+}
 
 article li, article ol{
   margin-left: var(--unit--horizontal);

assets/css/src/footer.css

@@ -20,12 +20,14 @@
     border-top: 1px solid var(--color-primary);
     background-color: var(--color-background);
   }
-  #main-footer .open-nav-wrapper_toc{
+  #main-footer .open-nav-wrapper:has([data-open-panel="toc"]) {
     margin-right: 50px;
   }
 }
+
 @media screen and (min-width: 1100px) {
-  #main-footer .open-nav-wrapper_toc{
+  /* On mobile > 1100px, le bouton sommaire n'est pas nécessaire car la TOC est visible */
+  #main-footer .open-nav-wrapper:has([data-open-panel="toc"]) {
     display: none !important;
   }
 }
@@ -52,16 +54,14 @@
 @media screen and (max-width: 640px) {
   #main-footer .open-nav {
     display: flex;
+    justify-content: center;
     outline: none;
     font-size: var(--font-size-m);
     background-color: var(--color-background);
     color: var(--color-primary);
     line-height: 1;
     padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
-  }    
-  [data-is_toc="false"] #main-footer .open-nav {
-    justify-content: center;
-  }    
+  }
 }
 
 @media screen and (min-width: 640px) {

assets/css/src/toc.css

@@ -1,47 +1,39 @@
-
-.toc{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-.page-cover .toc{
-    flex: 1;
-}
-@media (min-width: 1100px){
-    .page-cover .toc{
-        position: fixed;
-        width: calc(var(--body-padding) - var(--unit--horizontal) * 2) ;
-        left: 0;
-        top: 15vw;
-        padding-inline: var(--unit--horizontal);
-        padding-top: calc(var(--unit--vertical) / 2);
-    }
-}
-.page-cover .toc{
-    flex: 1;
-}
-.panel-toc .toc{
-    padding: var(--unit--vertical) var(--unit--horizontal);
-
-}
-.toc_label{
-    font-size: var(--font-size-m);
-    margin-bottom: calc(var(--unit--vertical) / 4); /*option 1*/
-}
-.toc ul{
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--unit--vertical) / 4); /*option 1*/
-}
-.toc li{
-    margin-left: 0;
-    /* text-indent: var(--unit--horizontal) hanging; */ /*option 2*/
-
-    /* list-style: square; */ /*option 3*/
+.toc {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-
-[data-is_toc="false"] .if_toc,
-[data-is_toc="false"] #main-footer li.if_toc{ /*obliger d'être si précis car si non pas la priorité*/
-    display: none !important;
+.page-cover .toc {
+  flex: 1;
+}
+
+@media (min-width: 1100px) {
+  .page-cover .toc {
+    position: fixed;
+    width: calc(var(--body-padding) - var(--unit--horizontal) * 2);
+    left: 0;
+    top: 15vw;
+    padding-inline: var(--unit--horizontal);
+    padding-top: calc(var(--unit--vertical) / 2);
+  }
+}
+
+.panel-toc .toc {
+  padding: var(--unit--vertical) var(--unit--horizontal);
+}
+
+.toc_label {
+  font-size: var(--font-size-m);
+  margin-bottom: calc(var(--unit--vertical) / 4);
+}
+
+.toc ul {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit--vertical) / 4);
+}
+
+.toc li {
+  margin-left: 0;
 }

assets/js/script.js

@@ -129,20 +129,24 @@ function subscribe(event) {
   }
 }
 
-const panelsNav = document.querySelectorAll(".panel");
-const panelNavText = document.querySelector(".panel-text");
-const panelNavToc = document.querySelector(".panel-toc");
+const panels = document.querySelectorAll(".panel[data-panel]");
 const navOverlay = document.querySelector("#nav-overlay");
-const openNavBtns = document.querySelectorAll("button.open-nav");
-const closeNavBtns = document.querySelectorAll(".panel-close");
-function closeNav() {
-  panelsNav.forEach(element => {
-   element.classList.remove("panel--visible");
-  });
+
+function closeAllPanels() {
+  panels.forEach(panel => panel.classList.remove("panel--visible"));
   navOverlay.classList.remove("nav-overlay--visible");
   document.body.classList.remove("no-scroll");
 }
 
+function openPanel(name) {
+  const panel = document.querySelector(`.panel[data-panel="${name}"]`);
+  if (panel) {
+    panel.classList.add("panel--visible");
+    navOverlay.classList.add("nav-overlay--visible");
+    document.body.classList.add("no-scroll");
+  }
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   ragadjust("h1, h2, h4, h5", ["all"]);
   window.window.scrollTo({
@@ -166,10 +170,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
   window.addEventListener("keyup", (event) => {
     if (event.key === "Escape") {
-      closeNav();
+      closeAllPanels();
     }
   });
-  document.querySelectorAll(".panel").forEach((panel) => {
+  panels.forEach((panel) => {
     panel.addEventListener("click", (event) => {
       event.stopPropagation();
     });
@@ -201,25 +205,20 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 
-  openNavBtns.forEach((openNavBtn) => {
-    openNavBtn.addEventListener("click", (event) => {
-      target = event.currentTarget;
-      if(target.classList.contains("open-nav_text")){
-        panelNavText.classList.add("panel--visible");
-      }else if(target.classList.contains("open-nav_toc")){
-        panelNavToc.classList.add("panel--visible");
-      }
-      navOverlay.classList.add("nav-overlay--visible");
-      document.body.classList.add("no-scroll");
+  document.querySelectorAll("[data-open-panel]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      openPanel(btn.dataset.openPanel);
     });
   });
 
-  closeNavBtns.forEach(element => {
-    element.addEventListener("click", () => {
-      closeNav();
-    });
+  document.querySelectorAll(".panel-close").forEach((btn) => {
+    btn.addEventListener("click", closeAllPanels);
   });
-  navOverlay.addEventListener("click", () => {
-    closeNav();
+
+  navOverlay.addEventListener("click", closeAllPanels);
+
+  // Fermer le panel TOC quand on clique sur un lien
+  document.querySelectorAll(".panel-toc .toc a").forEach((link) => {
+    link.addEventListener("click", closeAllPanels);
   });
 });

site/plugins/helpers/index.php

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

site/plugins/toc/index.php

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

site/snippets/cover.php

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

site/snippets/footer.php

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

site/snippets/header.php

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

site/snippets/nav.php

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

site/snippets/panel-toc.php

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

site/snippets/toc.php

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

site/templates/linear.php

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