jQuery( document ).ready(function($) { /** Filtrage des propositions **/ // On crée les var : boite à filtre, et un tableua pour stocker lesdits filtres var filters_div = $('#filters-container'); var current_filters = new Object(); /** * filter_actions * ajoute ou supprime les filtres au tableau et la classe selected aux filtres, en fonction de l'élément (et de si c'est select ou statut) * */ function filters_action(elem, currentFilters) { //Si c'est le select qui a changé, on supprime les filtres par catégorie existants if (elem.nodeName === 'OPTION') { $('#filters_cat_select option').removeClass('active'); currentFilters = new Object(); $(filters_div).children().remove(); } // Si la valeur est nulle on arrête tout if (!elem.hasAttribute('filter-id')) { $(filters_div).trigger("filters-changed", [currentFilters]); changePie(elem, currentFilters); return currentFilters; } //Sinon s'occupe du tableau et de la classe var filter_id = elem.getAttribute('filter-id'); var filter_label = elem.getAttribute('filter-label'); // Si c'est un filtre de thématique qui a été supprimé, on réinitialise le select et les filtres if ($(elem).hasClass('measure-filter') && !isNaN(parseInt(filter_id))) { $('#filters_cat_select').prop('selectedIndex', 0); // TODO : supprimer les autres filtres (status) si on supprime une catégorie } // Il y est déjà : on supprime le filtre if (filter_id in currentFilters) { //suppression du tableau delete currentFilters[filter_id]; //suppression de la barre des filtres $(filters_div).children('[filter-id="' + filter_id + '"]').remove(); } // il y est pas : on l'ajoute else { //ajout dans le tableau currentFilters[filter_id] = filter_label; // Ajout dans la barre var htmlFilter = "

" + filter_label + "

+
"; filters_div.append(htmlFilter); } // on switche la classe $('#measures-filters-container [filter-id="' + filter_id + '"]').toggleClass('active'); console.log($(elem).attr('filter-id')); if(!isNaN(filter_id)){ changePie(elem, currentFilters); } // Enfin on déclenche l'event filters-change $(filters_div).trigger("filters-changed", [currentFilters]); // On renvoie la liste des filtres mise à jour; return currentFilters; } // Au clic sur un élément (ou change du select), on appelle la fonction avec l'élément (id&label) en argument //Les statuts $(".home-legend-item .status-title, .pie .pie__segment").click(function(){ current_filters = filters_action(this, current_filters); }); // les catégories $("#filters_cat_select").change(function(){ var elem = $(this).children(':selected').get(0); current_filters = filters_action(elem, current_filters); // on change la pie changePie(elem, current_filters); }); // La barre de filtres $("body").on("click", "div.filters-container .filter-close", function (){ elem = $(this).closest('.measure-filter').get(0); current_filters = filters_action(elem, current_filters); }); /** * filters-changed * Evènement gérant l'affichage/masquage des mesures selon les filtres */ $(filters_div).on("filters-changed", function(event, currentFilters) { var measures = $("article.measure-wrapper"); // si aucun filtre on affiche tout if ($.isEmptyObject(currentFilters)) { measures.show(); return; } // On récupère les filtres triés var filters = filtersSeparation(currentFilters); // On filtre pour afficher/masquer ce qui correspond aux bonnes classe measures.filter(filters[0] + filters[1].join(', ' + filters[0] )).show(); measures.not(filters[0] + filters[1].join(', ' + filters[0] )).hide(); }); /** * filtersSeparation * Spare les filtres en catégories et statuts */ function filtersSeparation(currentFilters){ // On parcourt le tableau actuel des filtres, et on récupère les ID var idsToShow = Object.keys(currentFilters); // séparer catégories et statut : si une valeur nupérique est présente dans les filtres, on la récupère et l'extrait. var cat = ''; var status = []; // On parcourt la liste des id et on sépare cat et stat for (var i = 0; i < idsToShow.length; i++) { // Si c'est numérique c'est une catégorie (AND) if (!isNaN(parseInt(idsToShow[i]))) { cat = '.' + idsToShow[i]; } //sinon c'est un statut (OR) else { status.push('.' + idsToShow[i]); } } return [cat, status]; } /** * ChangePie * Met à jour le pie chart à partir de l'option selectionnée */ function changePie(elem, currentFilters) { var container = $('div#measures-filters-container'); var measures = $('div#measures-container'); // On récupère les filtres triés var filters = filtersSeparation(currentFilters); // C'est parti pour les calculs ! // Pour chaque statut, on calcule en fonction des filtres var statusNames = ["validated", 'partially-validated', "discussed", "danger", "rejected", "undiscussed"]; //total des mesures var counts = {'total': measures.children('.measure-wrapper' + filters[0]).length}; var offset = 0; for (var i = 0; i < statusNames.length; i++) { // on compte counts[statusNames[i]] = measures.children('.measure-wrapper' + filters[0] + '.' + statusNames[i]).length; var percent = counts[statusNames[i]] * 100 / counts['total']; var huge = percent > 50 ? 1 : 0; // on change les custom val container.find('.pie .pie__segment.' + statusNames[i]).css('--value', percent); container.find('.pie .pie__segment.' + statusNames[i]).css('--offset', offset); container.find('.pie .pie__segment.' + statusNames[i]).css('--over50', huge); container.find('.statusTotal.' + statusNames[i]).text(counts[statusNames[i]]); //mise à jour de l'offset offset = offset + percent; } } /** * Recherche de type texte * */ var css_selector = ".measure-wrapper, .measure-wrapper"; /* Par recherche texte */ function clearSearchField() { $(".search-container #measure-search").val(""); } $(".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"); }); });