Commit initial
This commit is contained in:
commit
54a1e935ac
111
Views/FiltersView.php
Normal file
111
Views/FiltersView.php
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Class FiltersView
|
||||
* Gère l'affichage des filtres de mesures
|
||||
*/
|
||||
|
||||
|
||||
class FiltersView {
|
||||
public function __construct() {
|
||||
|
||||
add_shortcode('graph_mesures', __CLASS__.'::create_measures_filters');
|
||||
|
||||
/**
|
||||
** Ajout des scripts et styles
|
||||
**/
|
||||
// TODO : Réfléchir à un moyen de n'inclure tout ce bouzin uniquement si nécessaire (quand filtres appelés)
|
||||
add_action('wp_enqueue_scripts', __CLASS__.'::enqueue_filters_scripts', 20);
|
||||
add_action( 'wp_enqueue_scripts', __CLASS__.'::enqueue_filters_style' );
|
||||
}
|
||||
|
||||
static public function enqueue_filters_scripts() {
|
||||
wp_register_script('filtersJS', plugin_dir_url(__FILE__) . 'inc/filters.js', array('jquery'),'1.1', true);
|
||||
wp_enqueue_script('filtersJS');
|
||||
}
|
||||
|
||||
static public function enqueue_filters_style() {
|
||||
wp_enqueue_style( 'filters-style', plugin_dir_url(__FILE__) . 'inc/filters.css' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Génère la liste des filtres pour les mesures affichées
|
||||
*/
|
||||
public static function create_measures_filters() {
|
||||
|
||||
// Total des articles
|
||||
$total = wp_count_posts('post')->publish;
|
||||
|
||||
// Ensuite, pour chaque catégorie donnée, on va :
|
||||
// récupérer le nombre de posts de cette cat
|
||||
// récupérer la couleur associée
|
||||
// calculer le pourcentage sur le total de mesures
|
||||
// créer un bloc html avec la data correspondante
|
||||
|
||||
$stats = ["validated", "partially-validated", "discussed", "danger", "rejected", "undiscussed"];
|
||||
$obj_total = 0;
|
||||
|
||||
|
||||
$html = "";
|
||||
|
||||
// C'parti pour le cacamembert
|
||||
|
||||
$pie_chart = '<div class="pie">';
|
||||
$labels = "<div class='home-legend-items'>";
|
||||
|
||||
foreach ($stats as $stat) {
|
||||
|
||||
// TODO : Sortir la requête du foreach et monter un modèle pour les taxonomies (pour embarquer la couleur)
|
||||
$stat = get_term_by('slug', $stat, 'post-status');
|
||||
$color = get_field('couleur', "category_" . $stat->term_id);
|
||||
$percent = $stat->count * 100 / $total;
|
||||
$huge = $percent > 50 ? 1 : 0;
|
||||
|
||||
static $offset = 0;
|
||||
|
||||
$pie_chart .= "<div class='pie__segment $stat->slug' status='$stat->slug'
|
||||
style='--offset: $offset; --value: $percent; --bg: $color; --over50: $huge;'
|
||||
filter-label='$stat->name'
|
||||
filter-id='$stat->slug'>
|
||||
<p class='label statusTotal $stat->slug'>$stat->count</p>
|
||||
</div>";
|
||||
|
||||
$offset += $percent;
|
||||
|
||||
$labels .= "<div class='home-legend-item'>";
|
||||
$labels .= "<div class='legend-color' style='background-color: $color;'></div>";
|
||||
$labels .= "<p class='status-title'
|
||||
status='". $stat->slug ."'
|
||||
filter-label='$stat->name'
|
||||
filter-id='$stat->slug'>
|
||||
$stat->name ( <span class='statusTotal $stat->slug'>$stat->count</span> )</p>";
|
||||
$labels .= "</div>";
|
||||
|
||||
if (in_array($stat->slug, ['validated', 'partially-validated'])) {
|
||||
$obj_total += $stat->count;
|
||||
}
|
||||
}
|
||||
$pie_chart .= '</div>';
|
||||
$labels .= '</div>';
|
||||
|
||||
//ok, on monte les filtres par catégorie maintenant
|
||||
$cats_title = "<p class='filters-cats-label'> Thématique </p>";
|
||||
$cats = "<div class='filters-categories'>
|
||||
<select name='cat' id='filters_cat_select' class='postform'>
|
||||
<option value='' selected='selected'>Toutes les thématiques</option>";
|
||||
|
||||
foreach (get_categories(['parent' => 0]) as $the_cat) {
|
||||
$cats .= "<option class='topic'
|
||||
value='$the_cat->term_id'
|
||||
filter-label='$the_cat->name'
|
||||
filter-id='$the_cat->term_id'>
|
||||
$the_cat->name</option>";
|
||||
|
||||
}
|
||||
$cats .= "</select></div>";
|
||||
|
||||
return '<div id="measures-filters-container">' . $cats_title . $cats . $pie_chart . $labels . '</div>' ;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
94
Views/inc/filters.css
Normal file
94
Views/inc/filters.css
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/**
|
||||
** Filters graph & selection
|
||||
**/
|
||||
|
||||
/* Thematiques */
|
||||
|
||||
.filters-cats-label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.filters-categories select {
|
||||
font-size: .6em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Pie chart */
|
||||
|
||||
.pie {
|
||||
border-radius: 100%;
|
||||
height: calc(var(--size, 250) * 1px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: calc(var(--size, 250) * 1px);
|
||||
}
|
||||
.pie__segment {
|
||||
--a: calc(var(--over50, 0) * -100%);
|
||||
--b: calc((1 + var(--over50, 0)) * 100%);
|
||||
--degrees: calc((var(--offset, 0) / 100) * 360);
|
||||
-webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
|
||||
clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
|
||||
transform-origin: 50% 100%;
|
||||
width: 100%;
|
||||
z-index: calc(1 + var(--over50));
|
||||
}
|
||||
.pie__segment:after,
|
||||
.pie__segment:before {
|
||||
background: var(--bg, #e74c3c);
|
||||
content: '';
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.pie__segment:before {
|
||||
--degrees: calc((var(--value, 45) / 100) * 360);
|
||||
transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
.pie__segment:after {
|
||||
opacity: var(--over50, 0);
|
||||
}
|
||||
|
||||
/* au cas où on en revienne aux labels dans les slices :*/
|
||||
|
||||
.pie__segment .label {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
color: #fff;
|
||||
z-index: 99;
|
||||
transform: translate(0, -50%) rotate(-90deg) rotate(calc(var(--degrees) * -1deg));
|
||||
left: 8px;
|
||||
text-align: center;
|
||||
font-size: .8em;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/*** Legends ***/
|
||||
|
||||
.home-legend-items {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.home-legend-item {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.home-legend-item .legend-color {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
225
Views/inc/filters.js
Normal file
225
Views/inc/filters.js
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
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 = "<div class='measure-filter' filter-id='" + filter_id + "'><p class='name'>" + filter_label + "</p><div class='filter-close'>+</div></div>";
|
||||
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");
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
52
cent-filtres.php
Normal file
52
cent-filtres.php
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<?php
|
||||
/*
|
||||
* Plugin Name: Cent Filtres
|
||||
* Description: Plugin permettant l'affichage des mesures de la CCC selon des filtres
|
||||
* Plugin URI: https://sansfiltre.les150.fr
|
||||
* Version : 0.1
|
||||
* Requires at least: 5.6
|
||||
* Requires PHP: 7.4
|
||||
* Author: Matt Marcha
|
||||
* Author URI: https://matt.marcha.pro
|
||||
*/
|
||||
|
||||
/**
|
||||
* Options
|
||||
* Si les mettre éditable en admin n'est pas nécessaire pour l'instant
|
||||
*/
|
||||
|
||||
// Choisir le hook pour temporaliser l'initialisation de l'autoloader (si utres plugins pré-requis par exemple)
|
||||
add_action('init', 'spclInitAutoLoader');
|
||||
|
||||
/*
|
||||
* Autoloader
|
||||
*/
|
||||
function spclInitAutoLoader() {
|
||||
// La liste des dossier à parcourir
|
||||
// Par défaut les plus courants
|
||||
$spcls_folders = [
|
||||
//"Models",
|
||||
//"Controllers",
|
||||
"Views"
|
||||
];
|
||||
|
||||
foreach ($spcls_folders as $folder) {
|
||||
// dans chaque, on inclut chaque fichier php
|
||||
foreach (glob(plugin_dir_path( __FILE__ ). "$folder/*.php") as $filename) {
|
||||
include_once "$filename";
|
||||
|
||||
/* instanciation des classes statiques de hook et d'outils */
|
||||
// on précise la liste des dossiers contenant les classes à instancier directement
|
||||
if (in_array($folder, [
|
||||
//"Models",
|
||||
//"Controllers",
|
||||
"Views"
|
||||
])) {
|
||||
// On extrait la classe: il faut récupérer ce qu'il y a après le dernier slash et virer l'extension
|
||||
$class = explode(".", array_slice(explode("/", $filename), -1, 1)[0])[0];
|
||||
//et on instancie
|
||||
new $class();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue