From f5e66ae8f6b0c78219885d9ecb5d52977bd050e9 Mon Sep 17 00:00:00 2001 From: Matt Marcha Date: Mon, 24 Aug 2020 13:53:56 +0200 Subject: [PATCH] =?UTF-8?q?Ajout=20de=20la=20fonctionnalit=C3=A9=20de=20re?= =?UTF-8?q?cherche=20textuelle=20+=20ameliorations=20ergonomiques=20mineur?= =?UTF-8?q?es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + custom.js | 72 ++++++++++++++++++++++++++++++++++++++++++++------- functions.php | 2 ++ style.css | 62 +++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 127 insertions(+), 10 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..62c8935 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/ \ No newline at end of file diff --git a/custom.js b/custom.js index d5a963e..106be13 100644 --- a/custom.js +++ b/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 = "

"+ $(this).text() + "

+
"; $("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(); - $(".measure-wrapper + hr").show(); + css_selector = ".measure-wrapper"; } //sinon on parcourt les filtres et on affiche les éléments correspondants else { - - $("div.filters-container > .measure-filter").each(function () { + css_selector = ""; + $("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"); }); }); \ No newline at end of file diff --git a/functions.php b/functions.php index 6bbd727..64f92c2 100644 --- a/functions.php +++ b/functions.php @@ -70,6 +70,8 @@ function generate_home_posts_list() { // Conteneur pour les filtres $html = "
"; + // input pour la recherche + $html .= "
"; foreach ($measures as $measure) { $status = get_the_category($measure->ID)[0]; diff --git a/style.css b/style.css index 96af5a0..becb922 100644 --- a/style.css +++ b/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