Refining archive publications

resources/css/pages/template-archive-publications.css

@@ -36,8 +36,14 @@
       }
     }
     &__comment {
-      @apply max-w-3xl pr-6 text-secondary;
+      @apply max-w-3xl pr-7 text-secondary;
       line-height: 1.6;
+      a:not(.cta) {
+        @apply underline font-bold underline-offset-2;
+      }
+      p {
+        @apply mb-2;
+      }
     }
 
     &__cover {
@@ -80,6 +86,6 @@
   .brochures-archives,
   .fiches-infos-archives,
   .videos-webinaires-archives {
-    @apply max-w-screen-xl mx-auto py-4 mt-8;
+    @apply max-w-screen-xl mx-auto pt-4 pb-16 mt-8;
   }
 }

resources/js/archive-template-publications.js

@@ -98,23 +98,27 @@ async function filterPublications(publicationType, e) {
   const sectionFichesInfos = document.querySelector('.fiches-infos-archives');
   const sectionBrochures = document.querySelector('.brochures-archives');
   const sectionWebinaires = document.querySelector('.videos-webinaires-archives');
+  const sectionHighlight = document.querySelector('#highlighted-document');
 
   sectionFichesInfos.removeAttribute('hidden');
   sectionWebinaires.removeAttribute('hidden');
   sectionBrochures.removeAttribute('hidden');
-
+  sectionHighlight.removeAttribute('hidden');
   switch (publicationType) {
     case 'all':
       sectionBrochures.setAttribute('isLoading', true);
       sectionFichesInfos.setAttribute('isLoading', true);
+      sectionHighlight.setAttribute('isLoading', true);
       await hydrateAll();
       sectionBrochures.removeAttribute('isLoading');
       sectionFichesInfos.removeAttribute('isLoading');
+      sectionHighlight.removeAttribute('isLoading');
       break;
 
     case 'brochures':
       sectionFichesInfos.setAttribute('hidden', true);
       sectionWebinaires.setAttribute('hidden', true);
+      sectionHighlight.setAttribute('hidden', true);
 
       sectionBrochures.setAttribute('isLoading', true);
       await hydrateBrochureArchiveGrid();
@@ -124,6 +128,7 @@ async function filterPublications(publicationType, e) {
     case 'fiches-infos':
       sectionBrochures.setAttribute('hidden', true);
       sectionWebinaires.setAttribute('hidden', true);
+      sectionHighlight.setAttribute('hidden', true);
 
       sectionFichesInfos.setAttribute('isLoading', true);
       await hydrateFicheInfoArchiveGrid();
@@ -133,6 +138,8 @@ async function filterPublications(publicationType, e) {
     case 'webinaires':
       sectionFichesInfos.setAttribute('hidden', true);
       sectionBrochures.setAttribute('hidden', true);
+      sectionHighlight.setAttribute('hidden', true);
+
       sectionWebinaires.setAttribute('isLoading', true);
       setTimeout(() => {
         sectionWebinaires.removeAttribute('isLoading');
@@ -143,10 +150,30 @@ async function filterPublications(publicationType, e) {
   updateSearchResultsIndications(publicationType, e);
   toggleActiveFilterButton(e);
 }
+async function loadMorePublications(publicationType, button, e) {
+  button.setAttribute('hidden', true);
+  const sectionFichesInfos = document.querySelector('.fiches-infos-archives');
+  const sectionBrochures = document.querySelector('.brochures-archives');
+
+  switch (publicationType) {
+    case 'brochures':
+      sectionBrochures.setAttribute('isLoading', true);
+      await hydrateBrochureArchiveGrid();
+      sectionBrochures.removeAttribute('isLoading');
+      break;
+
+    case 'fiches-infos':
+      sectionFichesInfos.setAttribute('isLoading', true);
+      await hydrateFicheInfoArchiveGrid();
+      sectionFichesInfos.removeAttribute('isLoading');
+      break;
+  }
+}
 
 export default function filterPublicationsInit() {
   const filterButtons = document.querySelectorAll('.filters-toolbar__action-button');
   const loadAllbutton = document.querySelector('.filters-toolbar__action-button--load-all');
+  const loadMoreButtons = document.querySelectorAll('.cta--load-more');
 
   if (!filterButtons) return;
   filterButtons.forEach((button) => {
@@ -161,4 +188,12 @@ export default function filterPublicationsInit() {
     const publicationType = loadAllbutton.getAttribute('data-publication-type');
     filterPublications(publicationType, e);
   });
+
+  if (!loadMoreButtons) return;
+  loadMoreButtons.forEach((button) => {
+    const publicationType = button.getAttribute('data-publication-type');
+    button.addEventListener('click', (e) => {
+      loadMorePublications(publicationType, button, e);
+    });
+  });
 }

template-publications.php

@@ -113,6 +113,42 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 		</ul>
 	</div>
 
+	<?php /* ---------------
+		HIGHLIGHTED BROCHURE
+ -----------------------*/ ?>
+	<div id="highlighted-document" class="highlighted-publication">
+
+		<?php
+		$highlightedDocumentDatas = get_field('highlighted_document', $current_page_id) ?? null;
+		$documentThumbnail = get_field('brochure_cover_image', $highlightedDocumentDatas['document']['ID']);
+
+
+		?>
+		<?php if ($highlightedDocumentDatas) : ?>
+			<div class="highlighted-publication__infos">
+
+				<div class="highlighted-publication__titling">
+					<div class="highlighted-publication__titling__icon">
+						<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/house-homegrade-icon.svg' ?>" alt="">
+					</div>
+					<h3 class="highlighted-publication__titling__title">
+						<?php echo $highlightedDocumentDatas['highlight_title'] ?>
+					</h3>
+				</div>
+
+				<?php if ($highlightedDocumentDatas['commentary']) : ?>
+					<div class="highlighted-publication__comment"><?php echo $highlightedDocumentDatas['commentary'] ?></div>
+				<?php endif; ?>
+				<a class="cta cta--secondary cta--button" href="<?php echo $highlightedBrochurePdf['url']  ?>" target="_blank"><?php echo __("Consulter le PDF", "homegrade-theme__texte-fonctionnel__archive-publications") ?></a>
+			</div>
+			<?php if ($documentThumbnail) : ?>
+				<img class="highlighted-publication__cover" src='<?php echo $documentThumbnail['sizes']['large'] ?>' />
+			<?php endif; ?>
+			 
+
+		<?php endif; ?>
+	</div>
+
 	<?php /* ---------
 		BROCHURES 
  -----------------*/ ?>
@@ -122,39 +158,6 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 			<h2 class="section_titling__title"><?php echo __("Nos Brochures thématiques", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></h2>
 			<p class="section_titling__subtitle">Curabitur eleifend neque eu erat lacinia tincidunt</p>
 		</div>
-		<!-- HIGHLIGHTED BROCHURE -->
-		<div class="highlighted-publication">
-
-			<?php
-			$highlightedBrochure = get_field('highlighted_brochure', $current_page_id) ?? null;
-			$highlightedBrochurePdf = get_field('brochure_pdf', $highlightedBrochure['post']) ?? null;
-			$highlightedBrochureCover = get_field('brochure_cover_image', $highlightedBrochurePdf['ID']) ?? null;
-			$highlightedBrochureComment = get_field('highlighted_brochure_comment', $current_page_id) ?? null;
-			?>
-			<?php if ($highlightedBrochurePdf) : ?>
-				<div class="highlighted-publication__infos">
-
-					<div class="highlighted-publication__titling">
-						<div class="highlighted-publication__titling__icon">
-							<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/house-homegrade-icon.svg' ?>" alt="">
-						</div>
-						<h3 class="highlighted-publication__titling__title">
-							<?php echo __("Sélection de nos conseillers", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?>
-						</h3>
-					</div>
-
-					<?php if ($highlightedBrochureComment) : ?>
-						<p class="highlighted-publication__comment"><?php echo $highlightedBrochureComment ?></p>
-					<?php endif; ?>
-					<a class="cta cta--secondary cta--button" href="<?php echo $highlightedBrochurePdf['url']  ?>" target="_blank"><?php echo __("Consulter le PDF", "homegrade-theme__texte-fonctionnel__archive-publications") ?></a>
-				</div>
-				<?php if ($highlightedBrochureCover) : ?>
-					<img class="highlighted-publication__cover" src='<?php echo $highlightedBrochureCover['sizes']['large'] ?>' />
-				<?php endif; ?>
-
-
-			<?php endif; ?>
-		</div>
 
 		<!-- BROCHURES GRID -->
 		<ul id="brochures-rows" class="publications-grid">
@@ -170,7 +173,7 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 		</ul>
 
 		<!-- LOAD MORE -->
-		<button id="load-more-brochures" class="cta cta--button cta--shadowed" target="_blank"><?php echo __("Consulter plus de brochures", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></button>
+		<button id="load-more-brochures" class="cta cta--button cta--outline cta--button cta--centered cta--load-more" data-publication-type="brochures"><?php echo __("Consulter plus de brochures", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></button>
 		<?php wp_reset_postdata(); ?>
 
 	</section>
@@ -197,7 +200,7 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 			)
 			?>
 		</ul>
-		<button id="load-more-brochures" class="cta cta--button cta--shadowed" target="_blank"><?php echo __("Consulter plus de fiches infos", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></button>
+		<button id="load-more-brochures" class="cta cta--button cta--outline cta--button cta--centered cta--load-more" data-publication-type="fiches-infos"><?php echo __("Consulter plus de fiches infos", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></button>
 		<?php wp_reset_postdata(); ?>
 	</section>
 
@@ -258,7 +261,7 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
 			)
 			?>
 		</ul>
-		<button id="load-more-brochures" class="cta cta--button cta--shadowed" target="_blank"><?php echo __("Consulter plus de fiches infos", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></button>
+		<!-- <button id="load-more-brochures" class="cta cta--button cta--outline cta--button cta--centered cta--load-more" target="_blank"><?php echo __("Consulter plus de fiches infos", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?></button> -->
 		<?php wp_reset_postdata(); ?>
 	</section>