Ajout de la fonctionnalité de recherche textuelle + ameliorations ergonomiques mineures

.gitignore

@@ -0,0 +1 @@
+.idea/

custom.js

@@ -1,4 +1,13 @@
 jQuery( document ).ready(function($) {
+    // ajout d'un contains non sensible à la casse
+    $.expr[":"].Contains = $.expr.createPseudo(function(arg) {
+        return function( elem ) {
+            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
+        };
+    });
+
+
+
     $(".measure-wrapper .measure-title").click(function() {
         $(this).next(".measure-content").slideToggle(500, "swing");
     })
@@ -8,6 +17,14 @@ jQuery( document ).ready(function($) {
 
     /** Filtrage des propositions **/
 
+    var css_selector = ".measure-wrapper, .measure-wrapper";
+
+    function clearSearchField() {
+        $(".search-container #measure-search").val("");
+    }
+
+    /* Par catégories */
+
     // Au clic sur un des titres des catégories : on crée le div de filtre correspondnt (avec le slug en attr "statut") et on trigger l'event filtre
     $(".home-graph-item .status-title").click(function(){
         var stat = $(this).attr("status");
@@ -17,6 +34,14 @@ jQuery( document ).ready(function($) {
             var htmlFilter = "<div class='measure-filter filter-" + stat +"' status='" + stat + "'><p class='name'>"+ $(this).text() + "</p><div class='filter-close'>+</div></div>";
             $("div.filters-container").append(htmlFilter);
             $("div.filters-container").trigger("filters-change");
+
+            $([document.documentElement, document.body]).animate({
+                scrollTop: $(".measures-col").offset().top
+            }, 200);
+        }
+        else {
+            $("div.filters-container .filter-" + stat).remove();
+            $("div.filters-container").trigger("filters-change");
         }
     }
     );
@@ -24,33 +49,62 @@ jQuery( document ).ready(function($) {
     // Au clic sur une croix d'un filtre on supprime le div concerné et on trigger l'event filtre
     $("body").on("click", "div.filters-container .filter-close",  function (){
         $(this).closest('.measure-filter').remove();
-
         $("div.filters-container").trigger("filters-change");
-        console.log($("div.filters-container").length);
     });
 
 
 
     // Event filtre : on récupère les slugs des catégories présente dans la div des filtres, et on masque tous les autres. Si il n'y a aucun filtre on affiche tout.
     $("div.filters-container").on("filters-change", function() {
+        clearSearchField();
+
         // d'abord on remasque tout
         $(".measure-wrapper").hide();
-        $(".measure-wrapper + hr").hide();
         // si aucun filtre on affiche tout
         if (!$.trim($("div.filters-container").html() )) {
-            $(".measure-wrapper").show();
+            css_selector = ".measure-wrapper";
-            $(".measure-wrapper + hr").show();
         }
 
         //sinon on parcourt les filtres et on affiche les éléments correspondants
         else {
-
+            css_selector = "";
-            $("div.filters-container > .measure-filter").each(function () {
+            $("div.filters-container > .measure-filter").each(function (index) {
                 var stat = $(this).attr("status");
-                $(".measure-wrapper.measure-"+ stat).show();
+
-                $(".measure-wrapper.measure-"+ stat + " + hr").show();
+                if (index !== 0) {
+                    css_selector += ", ";
+                }
+                css_selector += ".measure-wrapper.measure-" + stat;
             })
         }
+
+        //on affiche les mesures correspondant au sélecteur
+        $(css_selector).show();
+
+    });
+
+
+
+    /* Par recherche texte */
+
+    $(".search-container #measure-search").keyup(function() {
+
+        // récupération du query actuel
+        var query = $.trim($(this).val());
+
+        if (query === "") { // si il est vide on affiche tout
+            // on affiche toutes les propositions, en tenant compte des filtres éventuels
+            $(css_selector).show();
+        }
+        else {
+            // on va chercher les mentions de ce query dans les mesures et on cache celles qui ne l'ont pas
+            $(css_selector).show().not(':Contains(' + query + ')').hide();
+        }
+    });
+
+    $(".search-container #measure-search-reset").click(function () {
+        clearSearchField();
+        $(".search-container #measure-search").trigger("keyup");
     });
 
 });

functions.php

@@ -70,6 +70,8 @@ function generate_home_posts_list() {
 
 	// Conteneur pour les filtres
 	$html = "<div class='filters-container'></div>";
+	// input pour la recherche
+    $html .= "<div class='search-container'><input id='measure-search' type='text' name='filters-search' placeholder='Rechercher'><button type='reset' id='measure-search-reset'><span class='dashicons dashicons-no-alt'></span></button>  </div>";
 
     foreach ($measures as $measure) {
         $status = get_the_category($measure->ID)[0];

style.css

@@ -69,6 +69,7 @@ Version: 0.1
 .measure-wrapper {
     border: 2px solid;
     border-bottom: 0;
+    border-radius: 3px;
 }
 
 .entry-content h3.measure-title,
@@ -128,6 +129,11 @@ Version: 0.1
     background-color: #FFFFFF9E;
 }
 
+
+.measure-wrapper[style*="display: none;"] + hr {
+    display: none;
+}
+
 /** homepage graphs ***/
 
 .home-graph-item h3 {
@@ -167,7 +173,7 @@ Version: 0.1
 /* filters */
 
 .filters-container {
-    margin-bottom: 1em;
+    margin-bottom: 8px;
 }
 
 .measure-filter {
@@ -205,6 +211,60 @@ Version: 0.1
     cursor: pointer;
 }
 
+/* search */
+.search-container {
+    position: relative;
+    margin-bottom: 1em;
+}
+
+.search-container::before {
+    content: "\f179";
+    font-family: "dashicons";
+    display: block;
+    font-size: 32px;
+    color: #686868;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    width: 51px;
+    height: 51px;
+    text-align: center;
+}
+
+.search-container input {
+    padding-left: 51px;
+    border-radius: 30px;
+    border: 1px solid #686868;
+}
+
+.search-container #measure-search-reset {
+    position: absolute;
+    background-color: transparent;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    padding: 0;
+    color: #686868;
+}
+
+.search-container #measure-search-reset span {
+    font-size: 2em;
+    display: inline;
+}
+
+.search-container #measure-search-reset:hover {
+    text-decoration: none;
+}
+
+.search-container input:placeholder-shown + #measure-search-reset {
+    display: none;
+}
+
+
+
 /*****************
 
  RESPONSIVE