FEATURE Handling a rest button for the search on single

resources/css/pages/singles.css

@@ -71,6 +71,13 @@
     }
     .search-field {
       @apply relative;
+      .reset-search-button {
+        @apply absolute top-1/2 right-0 -translate-y-1/2;
+        @apply mr-2 w-8 h-8;
+        @apply bg-contain hidden;
+        background-image: url('../resources/img/icons/carhop-reset-search-cross-green.svg');
+      }
+
       &:after {
         content: ' ';
         @apply block w-8 h-8;
@@ -79,6 +86,16 @@
         @apply bg-contain;
         background-image: url('../resources/img/icons/carhop-rechercher-green-circle.svg');
       }
+
+      &:has(input:not(:placeholder-shown)) {
+        .reset-search-button {
+          @apply block;
+        }
+        &:after {
+          @apply hidden;
+        }
+      }
+
       input {
         @apply border border-primary text-primary w-full;
         @apply w-full p-4 relative;
@@ -91,8 +108,12 @@
     .tags {
       @apply hidden lg:block;
     }
+    .search-field + .article-tags,
+    .search-field + .revue-tags {
+      @apply mt-8;
+    }
     .tags__title {
-      @apply text-lg uppercase font-semibold mt-8 my-4 nunito;
+      @apply text-lg uppercase font-semibold mt-0 my-4 nunito;
     }
     .tags-list {
       @apply flex flex-wrap gap-4;

resources/img/icons/carhop-reset-search-cross-green.svg

@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18" cy="18" r="17" stroke="#136F63" stroke-width="2"/>
+<path d="M11.8828 25L26.0005 11" stroke="#136F63" stroke-width="2"/>
+<path d="M25.1172 25L10.9995 11" stroke="#136F63" stroke-width="2"/>
+</svg>

resources/js/singles/search-revue.ts

@@ -6,9 +6,26 @@ export default function handleSearchRevue() {
   const currentRevueId = document
     .querySelector('.page--single-revue')
     ?.getAttribute('data-revue-id') as string;
+  const revueToolbarButtons = document.querySelectorAll(
+    '.page--single-revue .revue-toolbar button'
+  ) as NodeListOf<HTMLButtonElement>;
 
   if (!searchRevue || !contentArea) return;
 
+  const resetSearchButton = document.querySelector(
+    '.page--single-revue .sidebar .search-field .reset-search-button'
+  ) as HTMLButtonElement;
+  if (!resetSearchButton) return;
+
+  function resetSearch() {
+    searchRevue.value = '';
+    contentArea.innerHTML = originalContent;
+  }
+
+  resetSearchButton.addEventListener('click', () => {
+    resetSearch();
+  });
+
   // Sauvegarder le contenu original
   const originalContent = contentArea.innerHTML;
 
@@ -40,4 +57,11 @@ export default function handleSearchRevue() {
       `;
     }
   });
+
+  revueToolbarButtons.forEach((button) => {
+    button.addEventListener('click', (e) => {
+      e.preventDefault();
+      resetSearch();
+    });
+  });
 }

single-revues.php

@@ -23,11 +23,14 @@ $articles = get_field('articles', $current_issue->ID);
 				<div class="sidebar">
 					<div class="search-field">
 						<input type="text" placeholder="Rechercher dans la revue">
+						<button type="button" class="reset-search-button" title="Réinitialiser la recherche"></button>
+
 					</div>
 					<?php
 					$tags = get_revue_terms($current_issue->ID, 'etiquettes');
 					?>
 					<?php if ($tags) : ?>
+						<div id="revue-tags" class="revue-tags">
 							<div class="tags">
 								<h3 class="tags__title">Tags</h3>
 								<ul class="tags-list">
@@ -40,6 +43,7 @@ $articles = get_field('articles', $current_issue->ID);
 									<?php endforeach; ?>
 								</ul>
 							</div>
+						</div>
 					<?php endif; ?>
 				</div>