FEATURE Introducing revue toolbar

resources/css/app.css

@@ -30,7 +30,7 @@
 @import './components/sommaire-index.css';
 @import './components/index-panel.css';
 @import './components/footnotes-index.css';
-@import './components/article-toolbar.css';
+@import './components/article-revues-toolbar.css';
 @import './components/post-card--article.css';
 @import './components/authors-last-publications.css';
 @import './components/article-references.css';

resources/css/components/article-revues-toolbar.css

@@ -1,3 +1,4 @@
+#revue-toolbar,
 #article-toolbar {
   @apply col-span-2 container mx-auto;
 

resources/css/pages/singles.css

@@ -14,6 +14,7 @@
       }
     }
     &[data-active-tab='authors'] {
+      .edito,
       .article-informations,
       #article-references,
       .article-content,
@@ -32,6 +33,7 @@
       }
     }
     &[data-active-tab='table-of-contents'] {
+      #revue-authors,
       #article-authors,
       #article-references,
       .article-informations,
@@ -41,6 +43,8 @@
       }
     }
     &[data-active-tab='informations'] {
+      .edito,
+      #revue-authors,
       #article-authors,
       #article-references,
       .article-content,

resources/js/singles/revue-toolbar.ts

@@ -0,0 +1,33 @@
+export function handleRevueToolbar() {
+  observeTabsButtons();
+}
+
+function observeTabsButtons(): void {
+  const toolbarButtons = document.querySelectorAll('#revue-toolbar button');
+
+  toolbarButtons.forEach((toolbarButton) => {
+    toolbarButton.addEventListener('click', () => {
+      const currentTabValue = toolbarButton.getAttribute('data-tab') as string;
+      toggleActiveTab(toolbarButton as HTMLElement);
+      handleActiveTabContent(currentTabValue as string);
+    });
+  });
+}
+
+function toggleActiveTab(toolbarButton: HTMLElement): void {
+  resetActiveToolbarButtons();
+  toolbarButton.setAttribute('aria-selected', 'true');
+}
+
+function resetActiveToolbarButtons(): void {
+  const toolbarButtons = document.querySelectorAll('#revue-toolbar button');
+  toolbarButtons.forEach((toolbarButton) => {
+    toolbarButton.setAttribute('aria-selected', 'false');
+  });
+}
+
+function handleActiveTabContent(tab: string): void {
+  const contentWrapper = document.querySelector('.content-wrapper');
+  contentWrapper?.setAttribute('data-active-tab', tab);
+  console.log(tab);
+}

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 { handleArticleToolbar } from './article-toolbar.ts';
+import { handleRevueToolbar } from './revue-toolbar.ts';
 
 export default function singles(): void {
   const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue');
@@ -12,4 +13,5 @@ export default function singles(): void {
   handleFootnoteFormat();
   handleCiteButton();
   handleArticleToolbar();
+  handleRevueToolbar();
 }

single-revues.php

@@ -11,9 +11,10 @@ $articles = get_field('articles', $current_issue->ID);
 	<?php if (have_posts()) : ?>
 		<?php while (have_posts()) : the_post(); ?>
 			<?php get_template_part('template-parts/post-header'); ?>
+			<?php get_template_part('template-parts/revues/revue-toolbar'); ?>
 
 
-			<div class="content-wrapper">
+			<div class="content-wrapper" data-active-tab="table-of-contents">
 				<div class="sidebar">
 					<div class="search-field">
 						<input type="text" placeholder="Rechercher">
@@ -68,6 +69,15 @@ $articles = get_field('articles', $current_issue->ID);
 						</div>
 					</details>
 
+					<?php get_template_part('template-parts/revues/revue-authors', null, array(
+						'postId' => get_the_ID()
+					)); ?>
+
+					<?php get_template_part('template-parts/articles/article-informations', null, array(
+						'revueID' => $revueID
+					)); ?>
+
+
 					<?php get_template_part('template-parts/revues/table-matiere-revue', null, array(
 						'revueID' => get_the_ID()
 					)); ?>

template-parts/authors/authors-list.php

@@ -13,11 +13,10 @@ if ($isArticle) {
 
 if (empty($authors)) return;
 
-
 ?>
 <section class="authors-list">
 	<h3 class="authors-list__title"><?php echo $componentTitle; ?></h3>
-	<?php if ($articleTitle) : ?>
+	<?php if ($isArticle && $articleTitle) : ?>
 		<p class="authors-list__article-title"><?php echo $articleTitle; ?></p>
 	<?php endif; ?>
 	<?php foreach ($authors as $authorID) : ?>

template-parts/revues/revue-authors.php

@@ -0,0 +1,12 @@
+<?php
+
+
+?>
+
+<div id="revue-authors" class="revue-authors">
+	<?php get_template_part('template-parts/authors/authors-list', null, array(
+		'postId' => get_the_ID()
+	)); ?>
+
+
+</div>

template-parts/revues/revue-toolbar.php

@@ -0,0 +1,23 @@
+<?php
+
+
+
+?>
+
+<div id="revue-toolbar" class="revue-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" data-tab="table-of-contents">
+			<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-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1" data-tab="authors">
+			<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" data-tab="informations">
+			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-note-biographique.svg" alt="">
+			Informations
+		</button>
+	</div>
+</div>