FEATURE introducing component

resources/css/app.css

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

resources/css/components/article-toolbar.css

@@ -1,5 +1,5 @@
 #article-toolbar {
-  @apply col-span-2;
+  @apply col-span-2 container mx-auto;
 
   .tablist {
     @apply flex gap-12 border-b border-primary;

resources/css/components/post-card--article.css

@@ -0,0 +1,5 @@
+.post-card--article {
+  .post-card__title {
+    @apply text-2xl;
+  }
+}

resources/css/components/sommaire-index.css

@@ -4,9 +4,14 @@
     @apply mb-4;
   }
   a {
-    @apply text-xl text-carhop-gray opacity-80;
+    @apply text-lg text-carhop-gray opacity-80;
   }
   a[active='true'] {
     @apply text-carhop-green-700 font-bold;
   }
+
+  li,
+  a {
+    line-height: 1.3 !important;
+  }
 }

resources/css/pages/singles.css

@@ -3,6 +3,42 @@
   .content-wrapper {
     @apply container mx-auto grid grid-cols-12 gap-12 py-12 items-start;
     grid-template-columns: 1fr 2fr;
+    &[data-active-tab='article'] {
+      .sidebar .search-field,
+      .table-matieres {
+        @apply hidden;
+      }
+    }
+    &[data-active-tab='authors'] {
+      .article-informations,
+      .article-content,
+      .sidebar .index-panel,
+      .table-matieres {
+        @apply hidden;
+      }
+    }
+    &[data-active-tab='references'] {
+      .article-informations,
+      .article-content,
+      .sidebar .index-panel,
+      .table-matieres {
+        @apply hidden;
+      }
+    }
+    &[data-active-tab='table-of-contents'] {
+      .article-informations,
+      .article-content,
+      .sidebar .index-panel {
+        @apply hidden;
+      }
+    }
+    &[data-active-tab='informations'] {
+      .article-content,
+      .table-matieres,
+      .sidebar .index-panel {
+        @apply hidden;
+      }
+    }
   }
 
   .sidebar {
@@ -77,4 +113,8 @@
   #cite-reference {
     @apply hidden;
   }
+
+  .content-tab__title {
+    @apply text-4xl  uppercase font-thin mb-12;
+  }
 }

resources/js/singles/article-toolbar.ts

@@ -7,15 +7,27 @@ function observeTabsButtons(): void {
 
   toolbarButtons.forEach((toolbarButton) => {
     toolbarButton.addEventListener('click', () => {
-      resetToolbarButtons();
+      const currentTabValue = toolbarButton.getAttribute('data-tab') as string;
-      toolbarButton.setAttribute('aria-selected', 'true');
+      toggleActiveTab(toolbarButton as HTMLElement);
+      handleActiveTabContent(currentTabValue as string);
     });
   });
 }
 
-function resetToolbarButtons(): void {
+function toggleActiveTab(toolbarButton: HTMLElement): void {
+  resetActiveToolbarButtons();
+  toolbarButton.setAttribute('aria-selected', 'true');
+}
+
+function resetActiveToolbarButtons(): void {
   const toolbarButtons = document.querySelectorAll('#article-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);
+}

single-articles.php

@@ -1,13 +1,16 @@
-<?php get_header(); ?>
+<?php
+get_header();
+$revueID = get_field('related_revue', get_the_ID());
+
+
+?>
 <div class="page--single-articles" data-revue-id="<?php echo get_the_ID(); ?>">
 	<?php if (have_posts()) : ?>
 		<?php while (have_posts()) : the_post(); ?>
 			<?php get_template_part('template-parts/post-header'); ?>
 
-			<div class="content-wrapper">
+			<?php get_template_part('template-parts/articles/article-toolbar'); ?>
-
+			<div class="content-wrapper" data-active-tab="article">
-				<?php get_template_part('template-parts/articles/article-toolbar'); ?>
-
 				<aside class="sidebar">
 					<div class="search-field">
 						<input type="text" placeholder="Rechercher">
@@ -17,9 +20,19 @@
 				</aside>
 
 				<div class="content-area">
+					<?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' => $revueID
+					)); ?>
 					<?php get_template_part('template-parts/articles/article-content', null, array(
 						'ID' => get_the_ID()
 					)); ?>
+
+
+
 				</div>
 
 			</div>

single-revues.php

@@ -68,21 +68,10 @@ $articles = get_field('articles', $current_issue->ID);
 						</div>
 					</details>
 
+					<?php get_template_part('template-parts/revues/table-matiere-revue', null, array(
+						'revueID' => get_the_ID()
+					)); ?>
 
-					<section class="table-matieres">
-						<h2 class="table-matieres__title">Table des matières</h2>
-						<ul class="post-grid__list article-grid__list">
-							<?php foreach ($issue_related_articles  as $article) : ?>
-								<?php get_template_part('template-parts/articles/card-article', null, array(
-
-									'date' => $article->post_date,
-									'image' => get_the_post_thumbnail_url($article->ID),
-									'link' => get_the_permalink($article->ID),
-									'ID' => $article->ID
-								)); ?>
-							<?php endforeach; ?>
-						</ul>
-					</section>
 
 				</div>
 

template-parts/articles/article-informations.php

@@ -0,0 +1,28 @@
+<?php
+$revueID = $args['revueID'];
+
+$issue_number = get_field('issue_number', $revueID);
+$issue_parution_date = get_field('issue_parution_date', $revueID);
+$issue_updated_date = get_field('issue_updated_date', $revueID);
+
+
+?>
+
+
+<div class="article-informations">
+	<h3 class="content-tab__title">Informations</h2>
+	<div class="issue-number">
+		<span class="issue-number__label">Numéro</span>
+		<span class="issue-number__value"><?php echo $issue_number; ?></span>
+	</div>
+	<div class="issue-parution-date">
+		<span class="issue-parution-date__label">Parution</span>
+		<time class="post-details__value" datetime="<?php echo get_the_date('Y-m-d', $revueID); ?>"><?php echo get_the_date('d F Y', $revueID); ?></time>
+
+	</div>
+	<div class="issue-updated-date">
+		<span class="issue-updated-date__label">Mise à jour</span>
+		<time class="post-details__value" datetime="<?php echo get_the_modified_date('Y-m-d', $revueID); ?>"><?php echo get_the_modified_date('d F Y', $revueID); ?></time>
+
+	</div>
+</div>

template-parts/articles/article-toolbar.php

@@ -4,24 +4,24 @@
 
 <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">
+		<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1" data-tab="article">
 			<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">
+		<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">
+		<button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1" data-tab="references">
 			<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">
+		<button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-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-5" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-5" tabindex="-1">
+		<button id="tab-5" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-5" 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>

template-parts/revues/table-matiere-revue.php

@@ -0,0 +1,20 @@
+<?php
+
+$revueID = $args['revueID'];
+$issue_related_articles = get_field('articles', $revueID);
+?>
+
+<section class="table-matieres">
+	<h3 class="content-tab__title">Table des matières</h3>
+	<ul class="post-grid__list article-grid__list">
+		<?php foreach ($issue_related_articles  as $article) : ?>
+			<?php get_template_part('template-parts/articles/card-article', null, array(
+
+				'date' => $article->post_date,
+				'image' => get_the_post_thumbnail_url($article->ID),
+				'link' => get_the_permalink($article->ID),
+				'ID' => $article->ID
+			)); ?>
+		<?php endforeach; ?>
+	</ul>
+</section>