FEATURE Introducing component

resources/css/components/index-panel.css

@@ -7,11 +7,18 @@
     @apply flex gap-4  border-b border-gray-300 mb-8;
 
     button {
-      @apply pb-3  text-carhop-gray opacity-60 relative;
+      @apply pb-6  text-carhop-gray opacity-60 relative;
       box-sizing: border-box;
+      @apply flex items-center gap-2;
+      .icon {
+        @apply w-7 h-7 block;
+      }
     }
     button[aria-selected='true'] {
       @apply text-primary opacity-100;
+      .icon {
+        @apply filter-primary;
+      }
       &:after {
         @apply bg-primary;
         content: '';

resources/img/icons/carhop-notes.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="notes" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.22 35.69">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="18.11" cy="17.81" r="16.72"/>
+  <rect class="cls-1" x="14.06" y="14.09" width="8.08" height="8.08" transform="translate(-7.51 18.11) rotate(-45)"/>
+</svg>

resources/img/icons/carhop-resume.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="resume" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.12 36.42">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <line class="cls-1" x1="34.12" y1="12.47" x2="9.41" y2="12.47"/>
+  <line class="cls-1" x1="34.12" y1="35.42" x2="9.41" y2="35.42"/>
+  <line class="cls-1" x1="24.62" y1="1" y2="1"/>
+  <line class="cls-1" x1="27.24" y1="23.95" x2="9.41" y2="23.95"/>
+</svg>

resources/js/singles/cite-button.ts

@@ -0,0 +1,49 @@
+export default function handleCiteButton(): void {
+  const citeButton: HTMLElement | null = document.querySelector('.socials-buttons__button--cite');
+  const citeReference: HTMLElement | null = document.querySelector('#cite-reference');
+  if (!citeButton || !citeReference) return;
+
+  if (!window.isSecureContext) {
+    citeButton.setAttribute('disabled', 'true');
+    citeButton.setAttribute(
+      'title',
+      'Vous devez utiliser un navigation sécurisé (https) pour copier la citation'
+    );
+  }
+
+  citeButton.addEventListener('click', () => {
+    const textToCopy = citeReference.textContent;
+    if (!textToCopy) return;
+
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard
+        .writeText(textToCopy)
+        .then(() => {
+          const notyf = new Notyf({
+            duration: 4000,
+            ripple: false,
+            dismissible: true,
+            types: [
+              {
+                type: 'success',
+                icon: {
+                  className: 'notyf__icon--success',
+                  tagName: 'i',
+                },
+              },
+            ],
+            position: {
+              x: 'right',
+              y: 'top',
+            },
+          });
+          notyf.success(
+            'Citation copiée dans le presse-papiers ! <br> Vous pouvez maintenant la coller dans votre document.'
+          );
+        })
+        .catch((err) => {
+          console.error('Failed to copy text: ', err);
+        });
+    }
+  });
+}

resources/js/singles/singles.ts

@@ -1,5 +1,7 @@
 import handleIndexPanel from './index-panel';
 import handleFootnoteFormat from './footnote-format';
+import handleCiteButton from './cite-button';
+import { injectIdToNativeTitles } from './sommaire';
 
 export default function singles(): void {
   const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue');
@@ -12,67 +14,3 @@ export default function singles(): void {
   handleFootnoteFormat();
   handleCiteButton();
 }
-
-function handleCiteButton(): void {
-  const citeButton: HTMLElement | null = document.querySelector('.socials-buttons__button--cite');
-  const citeReference: HTMLElement | null = document.querySelector('#cite-reference');
-  if (!citeButton || !citeReference) return;
-
-  if (!window.isSecureContext) {
-    citeButton.setAttribute('disabled', 'true');
-    citeButton.setAttribute(
-      'title',
-      'Vous devez utiliser un navigation sécurisé (https) pour copier la citation'
-    );
-  }
-
-  citeButton.addEventListener('click', () => {
-    const textToCopy = citeReference.textContent;
-    if (!textToCopy) return;
-
-    if (navigator.clipboard && window.isSecureContext) {
-      navigator.clipboard
-        .writeText(textToCopy)
-        .then(() => {
-          const notyf = new Notyf({
-            duration: 4000,
-            ripple: false,
-            dismissible: true,
-            types: [
-              {
-                type: 'success',
-                icon: {
-                  className: 'notyf__icon--success',
-                  tagName: 'i',
-                },
-              },
-            ],
-            position: {
-              x: 'right',
-              y: 'top',
-            },
-          });
-          notyf.success(
-            'Citation copiée dans le presse-papiers ! <br> Vous pouvez maintenant la coller dans votre document.'
-          );
-        })
-        .catch((err) => {
-          console.error('Failed to copy text: ', err);
-        });
-    }
-  });
-}
-
-function injectIdToNativeTitles(): void {
-  const titles = document.querySelectorAll('.content-area h2, .content-area h3');
-  titles.forEach((title) => {
-    const titleText = title.textContent || '';
-    const slug = titleText
-      .toLowerCase()
-      .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '')
-      .replace(/\s+/g, '-')
-      .replace(/[^\w-]+/g, '');
-    title.setAttribute('id', slug);
-  });
-}

resources/js/singles/sommaire.ts

@@ -4,3 +4,16 @@ export function handleSmoothScrollToTitle(targetId: string): void {
 
   targetElement.scrollIntoView({ behavior: 'smooth' });
 }
+export function injectIdToNativeTitles(): void {
+  const titles = document.querySelectorAll('.content-area h2, .content-area h3');
+  titles.forEach((title) => {
+    const titleText = title.textContent || '';
+    const slug = titleText
+      .toLowerCase()
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .replace(/\s+/g, '-')
+      .replace(/[^\w-]+/g, '');
+    title.setAttribute('id', slug);
+  });
+}

single-articles.php

@@ -5,7 +5,7 @@
 			<?php get_template_part('template-parts/post-header'); ?>
 
 			<div class="content-wrapper">
-				<!-- <div class="top-toolbar">
+				<div class="top-toolbar">
 					<div role="tablist" aria-labelledby="tablist-1" class="tablist">
 						<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
 							<span class="focus">Article</span>
@@ -23,43 +23,13 @@
 							<span class="focus">Informations</span>
 						</button>
 					</div>
-				</div> -->
+				</div>
 				<aside class="sidebar">
 					<div class="search-field">
 						<input type="text" placeholder="Rechercher">
 					</div>
 
-					<div class="index-panel">
+					<?php get_template_part('template-parts/articles/index-panel'); ?>
-						<div class="index-panel__header">
-							<button class="focus" data-index="sommaire" aria-selected="true" aria-controls="sommaire-index">
-								Résumé
-							</button>
-							<button class="focus" data-index="footnotes" aria-selected="false" aria-controls="footnotes-index">
-								Notes de bas de page
-							</button>
-						</div>
-
-						<div class="index-panel__content">
-							<ul data-index="sommaire" class="sommaire-index" aria-hidden="false">
-								<?php
-								$sommaire = build_sommaire_from_content(get_the_ID());
-
-								foreach ($sommaire as $chapter) {
-									echo '<li><a href="#' . $chapter['anchor'] . '">' . $chapter['title'] . '</a></li>';
-								}
-								?>
-							</ul>
-							<ul id="footnotes-index" data-index="footnotes" class="footnotes-index" aria-hidden="true">
-								<?php
-								$footnotes = build_footnotes_index_from_content(get_the_content());
-								?>
-
-								<?php foreach ($footnotes as $footnote) : ?>
-									<li><a href="#footnote-<?php echo $footnote['anchorID']; ?>" class="footnote-reference-item"><?php echo $footnote['content']; ?></a></li>
-								<?php endforeach; ?>
-						</div>
-
-					</div>
 				</aside>
 
 				<div class="content-area">

template-parts/articles/index-panel.php

@@ -0,0 +1,34 @@
+<?php ?>
+<div class="index-panel">
+	<div class="index-panel__header">
+		<button class="focus" data-index="sommaire" aria-selected="true" aria-controls="sommaire-index">
+			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-resume.svg" alt="">
+			Résumé
+		</button>
+		<button class="focus" data-index="footnotes" aria-selected="false" aria-controls="footnotes-index">
+			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-notes.svg" alt="">
+			Notes de bas de page
+		</button>
+	</div>
+
+	<div class="index-panel__content">
+		<ul data-index="sommaire" class="sommaire-index" aria-hidden="false">
+			<?php
+			$sommaire = build_sommaire_from_content(get_the_ID());
+
+			foreach ($sommaire as $chapter) {
+				echo '<li><a href="#' . $chapter['anchor'] . '">' . $chapter['title'] . '</a></li>';
+			}
+			?>
+		</ul>
+		<ul id="footnotes-index" data-index="footnotes" class="footnotes-index" aria-hidden="true">
+			<?php
+			$footnotes = build_footnotes_index_from_content(get_the_content());
+			?>
+
+			<?php foreach ($footnotes as $footnote) : ?>
+				<li><a href="#footnote-<?php echo $footnote['anchorID']; ?>" class="footnote-reference-item"><?php echo $footnote['content']; ?></a></li>
+			<?php endforeach; ?>
+	</div>
+
+</div>