REFACTOR Moving the toolbar into a dedidacted component

resources/css/app.css

@@ -30,6 +30,7 @@
 @import './components/sommaire-index.css';
 @import './components/index-panel.css';
 @import './components/footnotes-index.css';
+@import './components/article-toolbar.css';
 
 /* ########### PAGES ############ */
 @import './pages/singles.css';

resources/css/components/article-toolbar.css

@@ -0,0 +1,23 @@
+#article-toolbar {
+  @apply col-span-2;
+
+  .tablist {
+    @apply flex gap-12 border-b border-primary;
+    button {
+      @apply text-xl  mt-8  nunito pb-4 flex items-center gap-4;
+      .icon {
+        @apply w-8 h-8 block;
+      }
+
+      &[aria-selected='true'] {
+        @apply text-primary border-b-4 border-primary;
+        .icon {
+          @apply filter-primary;
+        }
+      }
+      &[aria-selected='false'] {
+        @apply text-black opacity-40;
+      }
+    }
+  }
+}

resources/css/components/footnotes-index.css

@@ -11,9 +11,15 @@
     }
   }
   a {
-    @apply text-carhop-gray opacity-80;
+    @apply text-carhop-gray opacity-80 text-lg;
+
     &[active='true'] {
-      @apply text-primary font-bold;
+      @apply text-carhop-green-700 font-semibold opacity-100;
     }
   }
+
+  li,
+  a {
+    line-height: 1.3 !important;
+  }
 }

resources/css/pages/singles.css

@@ -5,24 +5,6 @@
     grid-template-columns: 1fr 2fr;
   }
 
-  .top-toolbar {
-    @apply col-span-2;
-
-    .tablist {
-      @apply flex gap-12 border-b border-primary;
-      button {
-        @apply text-xl  mt-8  nunito pb-4;
-
-        &[aria-selected='true'] {
-          @apply text-primary border-b-4 border-primary;
-        }
-        &[aria-selected='false'] {
-          @apply text-carhop-gray opacity-80;
-        }
-      }
-    }
-  }
-
   .sidebar {
     @apply sticky top-0 left-0 h-fit;
     .search-field {

resources/img/icons/carhop-document.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="document" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.1 42.76">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <polygon class="cls-1" points="1 1 27.02 1 34.1 8.08 34.1 41.76 1 41.76 1 1"/>
+</svg>

resources/img/icons/carhop-lien.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="imprimer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.12 20.12">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M9.01,3.56l1-1c2.08-2.08,5.46-2.08,7.55,0h0c2.08,2.08,2.08,5.46,0,7.55l-4.65,4.65-3.07-3.07"/>
+  <path class="cls-1" d="M11.11,16.56l-1,1c-2.08,2.08-5.46,2.08-7.55,0h0c-2.08-2.08-2.08-5.46,0-7.55l4.65-4.65,3.18,3.18"/>
+</svg>

resources/img/icons/carhop-note-biographique.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="note-biographique" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.99 42.47">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <polygon class="cls-1" points="5.63 36.84 13.89 36.84 31.99 18.74 31.99 2.41 5.63 28.78 5.63 36.84"/>
+  <line class="cls-1" x1=".71" y1="41.76" x2="12.86" y2="29.61"/>
+</svg>

resources/img/icons/carhop-plan.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="plan" 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="0" y2="12.47"/>
+  <line class="cls-1" x1="34.12" y1="35.42" x2="0" y2="35.42"/>
+  <line class="cls-1" x1="24.62" y1="1" x2="0" y2="1"/>
+  <line class="cls-1" x1="24.62" y1="23.95" x2="0" y2="23.95"/>
+</svg>

resources/img/icons/carhop-plume.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="plume" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.06 38.66">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <polyline class="cls-1" points="38.5 7.56 34.74 10.11 34.74 23.78 11.2 36.83 14.06 11.32 26.43 4.79 26.63 .04"/>
+  <line class="cls-1" x1="11.2" y1="36.83" x2="20.95" y2="22.23"/>
+  <line class="cls-1" y1="37.66" x2="11.2" y2="37.66"/>
+</svg>

resources/js/singles/article-toolbar.ts

@@ -0,0 +1,21 @@
+export function handleArticleToolbar() {
+  observeTabsButtons();
+}
+
+function observeTabsButtons(): void {
+  const toolbarButtons = document.querySelectorAll('#article-toolbar button');
+
+  toolbarButtons.forEach((toolbarButton) => {
+    toolbarButton.addEventListener('click', () => {
+      resetToolbarButtons();
+      toolbarButton.setAttribute('aria-selected', 'true');
+    });
+  });
+}
+
+function resetToolbarButtons(): void {
+  const toolbarButtons = document.querySelectorAll('#article-toolbar button');
+  toolbarButtons.forEach((toolbarButton) => {
+    toolbarButton.setAttribute('aria-selected', 'false');
+  });
+}

resources/js/singles/index-panel.ts

@@ -51,7 +51,6 @@ export function toggleActiveTabPanel(dataIndex: string): void {
 // ********************************************************
 
 function observeSommaireLinks(): void {
-  console.log('observeSommaireLinks');
   const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
   for (const title of sommaireTitles) {
     title.addEventListener('click', (e) => {
@@ -75,8 +74,6 @@ function toggleActiveChapterLinkInIndexPanel(targetId: string): void {
   const indexPanel = document.querySelector('.index-panel') as HTMLElement;
   const currentLink = indexPanel.querySelector(`a[href="#${targetId}"]`) as HTMLElement;
 
-  console.log(currentLink);
-
   if (!currentLink) return;
 
   for (const link of sommaireLinks) {
@@ -86,23 +83,6 @@ function toggleActiveChapterLinkInIndexPanel(targetId: string): void {
   currentLink?.setAttribute('active', 'true');
 }
 
-// export function handleSmoothScrollToTitle(): void {
-//   const sommaireTitles: NodeListOf<Element> = document.querySelectorAll('.sommaire-index li a');
-//   for (const title of sommaireTitles) {
-//     title.addEventListener('click', (e) => {
-//       e.preventDefault();
-
-//       const target = title.getAttribute('href');
-//       if (!target) return;
-
-//       const targetElement = document.querySelector(target);
-//       if (!targetElement) return;
-
-//       targetElement.scrollIntoView({ behavior: 'smooth' });
-//     });
-//   }
-// }
-
 // ********************************************************
 // ************* FOOTNOTES *********************************
 // ********************************************************

resources/js/singles/singles.ts

@@ -2,6 +2,7 @@ import handleIndexPanel from './index-panel';
 import handleFootnoteFormat from './footnote-format';
 import handleCiteButton from './cite-button';
 import { injectIdToNativeTitles } from './sommaire';
+import { handleArticleToolbar } from './article-toolbar.ts';
 
 export default function singles(): void {
   const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue');
@@ -13,4 +14,5 @@ export default function singles(): void {
   handleIndexPanel();
   handleFootnoteFormat();
   handleCiteButton();
+  handleArticleToolbar();
 }

single-articles.php

@@ -5,25 +5,9 @@
 			<?php get_template_part('template-parts/post-header'); ?>
 
 			<div class="content-wrapper">
-				<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>
-						</button>
-						<button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">
-							<span class="focus">Auteur·e·s</span>
-						</button>
-						<button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1">
-							<span class="focus">Références</span>
-						</button>
-						<button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1">
-							<span class="focus">Table des matières </span>
-						</button>
-						<button id="tab-5" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-5" tabindex="-1">
-							<span class="focus">Informations</span>
-						</button>
-					</div>
-				</div>
+
+				<?php get_template_part('template-parts/articles/article-toolbar'); ?>
+
 				<aside class="sidebar">
 					<div class="search-field">
 						<input type="text" placeholder="Rechercher">

template-parts/articles/article-toolbar.php

@@ -0,0 +1,29 @@
+<?php
+
+?>
+
+<div id="article-toolbar" class="article-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">
+			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-document.svg" alt="">
+			Article
+		</button>
+		<button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">
+			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-plume.svg" alt="">
+
+			Auteur·e·s
+		</button>
+		<button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1">
+			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-lien.svg" alt="">
+			Références
+		</button>
+		<button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1">
+			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-plan.svg" alt="">
+			Table des matières
+		</button>
+		<button id="tab-5" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-5" tabindex="-1">
+			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-note-biographique.svg" alt="">
+			Informations
+		</button>
+	</div>
+</div>