.is-active type media

web/themes/custom/eql/eql.theme

@@ -277,6 +277,7 @@ function eql_preprocess_views_view_unformatted(array &$variables) {
 }
 
 
+
 function eql_preprocess_form(&$variables) {
   $terms = \Drupal::entityTypeManager()
     ->getStorage('taxonomy_term')
@@ -285,14 +286,19 @@ function eql_preprocess_form(&$variables) {
   $transliterator = \Drupal::service('transliteration');
   $media_links = [];
 
+  // Récupère la valeur actuelle du filtre dans l’URL
+  $request = \Drupal::request();
+  $active_tid = $request->query->get('field_type_de_media_target_id');
+
   foreach ($terms as $term) {
-    $slug = strtolower($transliterator->transliterate($term->name));
+    $slug = Html::cleanCssIdentifier(strtolower($transliterator->transliterate($term->name)));
     $slug = Html::cleanCssIdentifier($slug); // Nettoie pour CSS
 
     $media_links[] = [
       'tid' => $term->tid,
       'label' => $term->name,
       'slug' => $slug,
+      'active' => (string)$term->tid === $active_tid, // <-- True si c'est celui sélectionné
     ];
   }
 
@@ -305,6 +311,3 @@ function eql_preprocess_form(&$variables) {
 
 
 
-
-
-

web/themes/custom/eql/scss/pages/ressources.scss

@@ -158,6 +158,14 @@
                                                     padding-bottom: 1rem;
                                                 }
                                             }
+                                            button.is-active {
+                                                background-color: $blue-dark;
+                                                color: white;
+                                              
+                                                a {
+                                                  color: white;
+                                                }
+                                              }
                                             button{
                                                 background-color: transparent;
                                                 // border-radius: 30px;
@@ -170,6 +178,7 @@
                                                     background-color: $blue-dark;
                                                     color: white;
                                                 }
+                                           
                                                 a {
                                                     color: $blue-dark;
                                                     display: inline-flex;
@@ -190,9 +199,11 @@
                                                         content:url("../images/pictos/videos.svg");
                                                         padding-right: 0.5rem;
                                                         }
-                                                        &:hover::before{
+                                                        &:hover::before,
+                                                        .is-active &::before{
                                                             content:url("../images/pictos/videos-blanc.svg");
                                                         }
+                                                       
                                                     }
                                                 }
                                                 &.button-podcasts{
@@ -250,6 +261,55 @@
                                                         }
                                                     }
                                                 }
+
+
+                                            }
+                                            button.is-active{
+                                                &.button-videos{
+                                                    margin-top: 1rem;
+                                                    a {
+                                                         &::before,
+                                                        .is-active &::before{
+                                                            content:url("../images/pictos/videos-blanc.svg");
+                                                        }
+                                                       
+                                                    }
+                                                }
+                                                &.button-podcasts{
+                                                    a {
+                                                        &::before{
+                                                            content:url("../images/pictos/podcasts-blanc.svg");
+                                                        }
+                                                    }
+                                                }
+                                                &.button-reportage-photos{
+                                                    a {
+                                                        &::before{
+                                                            content:url("../images/pictos/en-images-blanc.svg");
+                                                        }
+                                                    }
+                                                }
+                                                &.button-livres{
+                                                    a {
+                                                        &::before{
+                                                            content:url("../images/pictos/ecrits-blanc.svg");
+                                                        }
+                                                    }
+                                                }
+                                                &.button-articles{
+                                                    a {
+                                                        &::before{
+                                                            content:url("../images/pictos/ecrits-blanc.svg");
+                                                        }
+                                                    }
+                                                }
+                                                &.button-publications---rapports{
+                                                    a {
+                                                        &::before{
+                                                            content:url("../images/pictos/ecrits-blanc.svg");
+                                                        }
+                                                    }
+                                                }
                                             }
                                         }
                                         form{

web/themes/custom/eql/templates/partials/form.html.twig

@@ -24,10 +24,10 @@
    <button class="button-publications-rapports" type="button" style=""><a href="https://stage.eql.figli.io/ressources?field_type_de_media_target_id=696&field_type_de_ressource_target_id=All&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine="> Publications/rapports</a></button>
 </div> #}
 
-<div class="buttons-filtres-ressources">
 
+<div class="buttons-filtres-ressources">
   {% for item in media_links %}
-    <button class="button-{{ item.slug }}" type="button">
+    <button class="button-{{ item.slug }}{% if item.active %} is-active{% endif %}" type="button">
       <a href="{{ path('<front>') ~ 'ressources?field_type_de_media_target_id=' ~ item.tid ~ '&field_type_de_ressource_target_id=All&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine=' }}">
         {{ item.label }}
       </a>