Déplacement de la gestion des filtres dans plugin

This commit is contained in:
Matt Marcha 2021-02-19 19:17:18 +01:00
parent d86d9634f3
commit 4f1158c910
4 changed files with 67 additions and 417 deletions

102
custom.js
View file

@ -7,7 +7,6 @@ jQuery( document ).ready(function($) {
});
$(".measure-wrapper .measure-title").click(function() {
$(this).next(".measure-content").slideToggle(500, "swing");
$(this).toggleClass("open");
@ -15,101 +14,6 @@ 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");
// on conditionne l'action au fait que le filtre ne soit pas déjà actif
if ( $("div.filters-container .filter-" + stat).length === 0) {
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");
}
}
);
// 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");
});
// 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();
// si aucun filtre on affiche tout
if (!$.trim($("div.filters-container").html() )) {
css_selector = ".measure-wrapper";
}
//sinon on parcourt les filtres et on affiche les éléments correspondants
else {
css_selector = "";
$("div.filters-container > .measure-filter").each(function (index) {
var stat = $(this).attr("status");
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");
});
/*** Rien à voir avec la choucroute : on déplace le chap commentaire en bas ****/
if ($( "#commentform" ).length ) {
@ -117,9 +21,9 @@ jQuery( document ).ready(function($) {
//Et on remplit le champ commentaire si il a été laissé vide
$('#commentform #submit').click(function (){
if($('#commentform .comment-form-comment').val().length === 0) {
$('#commentform .comment-form-comment textarea').val("Aucun commentaire");
}
if($('#commentform .comment-form-comment').val().length === 0) {
$('#commentform .comment-form-comment textarea').val("Aucun commentaire");
}
});
}

View file

@ -8,7 +8,7 @@
**/
add_action( 'wp_enqueue_scripts', 'enqueue_style_parent' );
function enqueue_style_parent() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_template_directory_uri() . '/style.css' );
}
/**
@ -16,12 +16,52 @@ function enqueue_style_parent() {
**/
add_action('wp_enqueue_scripts', 'enqueue_scripts_child', 20);
function enqueue_scripts_child() {
wp_register_script('customJS', get_stylesheet_directory_uri() . '/custom.js', array('jquery'),'1.1', true);
wp_enqueue_script('customJS');
wp_register_script('customJS', get_stylesheet_directory_uri() . '/custom.js', array('jquery'),'1.1', true);
wp_enqueue_script('customJS');
wp_enqueue_style('dashicons');
//wp_enqueue_style( 'responsive-child', get_stylesheet_directory_uri() . '/path/to/file.css' );
}
/**
** Ajout du code HTML pour les stats
**/
function add_stats_html() {
?>
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push([function() {
var self = this;
function getOriginalVisitorCookieTimeout() {
var now = new Date(),
nowTs = Math.round(now.getTime() / 1000),
visitorInfo = self.getVisitorInfo();
var createTs = parseInt(visitorInfo[2]);
var cookieTimeout = 33696000; // 13 mois en secondes
var originalTimeout = createTs + cookieTimeout - nowTs;
return originalTimeout;
}
this.setVisitorCookieTimeout( getOriginalVisitorCookieTimeout() );
}]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//stats.marcha.pro/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="//stats.marcha.pro/matomo.php?idsite=2&amp;rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
<?php
}
add_action('wp_head', 'add_stats_html');
/**
* changement du terme "articles" par "mesures"
*/
@ -70,10 +110,11 @@ function generate_home_posts_list() {
]);
// Conteneur pour les filtres
$html = "<div class='filters-container'></div>";
$html = "<div id='filters-container' 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>";
$html .= '<div id="measures-container">';
foreach ($measures as $measure) {
$status = get_the_terms($measure->ID, 'post-status')[0];
$color = get_field('couleur', 'category_'.$status->term_id);
@ -81,11 +122,11 @@ function generate_home_posts_list() {
$date = get_the_modified_date("d/m/Y à H:i", $measure);
$cats = wp_get_object_terms($measure->ID, 'category', ['orderby'=>'parent', 'fields'=>'id=>name']);
$html .= "<article class='measure-wrapper measure-".$status->slug."' style='border-color: $color'>";
$html .= "<article class='measure-wrapper ".$status->slug." ". implode(' ',array_keys($cats)) ."' style='border-color: $color'>";
$html .= "<h3 class='measure-title' style='background-color: $color'>". $measure->post_title ."</h3>";
$html .= "<div class='measure-content'>";
$html .= "<div class='measure-meta' style='background-color: $color'>
<p class='measure-meta-categories ". implode(' ',array_keys($cats)) ."'>" . implode(' > ', $cats) . "</p>
<p class='measure-meta-categories'>" . implode(' > ', $cats) . "</p>
<p class='measure-meta-desc'>". $measure->post_excerpt ." <a href='$link' target='_blank' class='external'>Lire la mesure</a></p>
</div>";
$html .= "<div class='status-desc' style='background-color: $color'><p>". $status->description . "</p></div>";
@ -95,6 +136,8 @@ function generate_home_posts_list() {
$html .= "<hr />";
}
$html .= '</div>';
return $html;
}
@ -102,63 +145,6 @@ add_shortcode('mesures', 'generate_home_posts_list');
/**
* Shortcode affichant le graphique de suivi des statuts
*/
function generate_home_status_graph() {
// 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 l data correspondante
$stats = ["validated", "partially-validated", "discussed", "danger", "rejected", "undiscussed"];
$obj_total = 0;
$html = "";
foreach ($stats as $stat) {
$stat = get_term_by('slug', $stat, 'post-status');
$color = get_field('couleur', "category_" . $stat->term_id);
$percent = $stat->count * 100 / $total;
$html .= "<div class='home-graph-item'>";
$html .= "<h3 class='status-title' status='". $stat->slug ."'>" . $stat->name . "</h3>";
$html .= "<div class='progress-bar-wrapper'>";
$html .= "<div class='progress-bar' style='background-color: $color; width: $percent%; '></div>";
$html .= "<div class='progress-bar bottom'></div>";
$html .= "</div>";
$html .= "<p>" . $stat->count . "</p>";
$html .= "</div>";
if (in_array($stat->slug, ['validated', 'partially-validated'])) {
$obj_total += $stat->count;
}
}
$total_percent = $obj_total * 100 / $total;
$html .= "<div class='home-graph-item obj-total'>";
$html .= "<h3> Objectif </h3>";
$html .= "<div class='progress-bar-wrapper'>";
$html .= "<div class='progress-bar' style='width: $total_percent%; background-color: #97C5E0; '></div>";
$html .= "<div class='progress-bar bottom'></div>";
$html .= "</div>";
$html .= "<p> $obj_total / $total </p>";
$html .= "</div>";
return $html;
}
add_shortcode('graph_mesures', 'generate_home_status_graph');
if ( ! function_exists( 'status_taxonomy' ) ) {

View file

@ -1,222 +0,0 @@
<?php
/**
* Header file for the Twenty Twenty WordPress default theme.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since Twenty Twenty 1.0
*/
?><!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push([function() {
var self = this;
function getOriginalVisitorCookieTimeout() {
var now = new Date(),
nowTs = Math.round(now.getTime() / 1000),
visitorInfo = self.getVisitorInfo();
var createTs = parseInt(visitorInfo[2]);
var cookieTimeout = 33696000; // 13 mois en secondes
var originalTimeout = createTs + cookieTimeout - nowTs;
return originalTimeout;
}
this.setVisitorCookieTimeout( getOriginalVisitorCookieTimeout() );
}]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//stats.marcha.pro/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="//stats.marcha.pro/matomo.php?idsite=2&amp;rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
</head>
<body <?php body_class(); ?>>
<?php
wp_body_open();
?>
<header id="site-header" class="header-footer-group" role="banner">
<div class="header-inner section-inner">
<div class="header-titles-wrapper">
<?php
// Check whether the header search is activated in the customizer.
$enable_header_search = get_theme_mod( 'enable_header_search', true );
if ( true === $enable_header_search ) {
?>
<button class="toggle search-toggle mobile-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false">
<span class="toggle-inner">
<span class="toggle-icon">
<?php twentytwenty_the_theme_svg( 'search' ); ?>
</span>
<span class="toggle-text"><?php _e( 'Search', 'twentytwenty' ); ?></span>
</span>
</button><!-- .search-toggle -->
<?php } ?>
<div class="header-titles">
<?php
// Site title or logo.
twentytwenty_site_logo();
// Site description.
twentytwenty_site_description();
?>
</div><!-- .header-titles -->
<button class="toggle nav-toggle mobile-nav-toggle" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle">
<span class="toggle-inner">
<span class="toggle-icon">
<?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
</span>
<span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); ?></span>
</span>
</button><!-- .nav-toggle -->
</div><!-- .header-titles-wrapper -->
<div class="header-navigation-wrapper">
<?php
if ( has_nav_menu( 'primary' ) || ! has_nav_menu( 'expanded' ) ) {
?>
<nav class="primary-menu-wrapper" aria-label="<?php esc_attr_e( 'Horizontal', 'twentytwenty' ); ?>" role="navigation">
<ul class="primary-menu reset-list-style">
<?php
if ( has_nav_menu( 'primary' ) ) {
wp_nav_menu(
array(
'container' => '',
'items_wrap' => '%3$s',
'theme_location' => 'primary',
)
);
} elseif ( ! has_nav_menu( 'expanded' ) ) {
wp_list_pages(
array(
'match_menu_classes' => true,
'show_sub_menu_icons' => true,
'title_li' => false,
'walker' => new TwentyTwenty_Walker_Page(),
)
);
}
?>
</ul>
</nav><!-- .primary-menu-wrapper -->
<?php
}
if ( true === $enable_header_search || has_nav_menu( 'expanded' ) ) {
?>
<div class="header-toggles hide-no-js">
<?php
if ( has_nav_menu( 'expanded' ) ) {
?>
<div class="toggle-wrapper nav-toggle-wrapper has-expanded-menu">
<button class="toggle nav-toggle desktop-nav-toggle" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle">
<span class="toggle-inner">
<span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); ?></span>
<span class="toggle-icon">
<?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
</span>
</span>
</button><!-- .nav-toggle -->
</div><!-- .nav-toggle-wrapper -->
<?php
}
if ( true === $enable_header_search ) {
?>
<div class="toggle-wrapper search-toggle-wrapper">
<button class="toggle search-toggle desktop-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false">
<span class="toggle-inner">
<?php twentytwenty_the_theme_svg( 'search' ); ?>
<span class="toggle-text"><?php _e( 'Search', 'twentytwenty' ); ?></span>
</span>
</button><!-- .search-toggle -->
</div>
<?php
}
?>
</div><!-- .header-toggles -->
<?php
}
?>
</div><!-- .header-navigation-wrapper -->
</div><!-- .header-inner -->
<?php
// Output the search modal (if it is activated in the customizer).
if ( true === $enable_header_search ) {
get_template_part( 'template-parts/modal-search' );
}
?>
</header><!-- #site-header -->
<?php
// Output the menu modal.
get_template_part( 'template-parts/modal-menu' );

View file

@ -12,6 +12,12 @@ Version: 1.0
font-family: Arial, Roboto, sans-serif;
}
/** Footer **/
.powered-by-wordpress {
display: none;
}
/** Home **/
.home header.entry-header,
@ -160,40 +166,10 @@ Version: 1.0
margin: 0.5em auto;
}
/** homepage graphs ***/
/** Filters graph & selection ***/
.home-graph-item h3 {
font-size: 0.9em;
font-weight: 400;
margin: 0.5em 0 5px !important;
}
.progress-bar {
position: relative;
height: 1em;
z-index: 2;
}
.progress-bar.bottom {
position: absolute;
top: 0;
height: 1em;
width: 100%;
background-color: #f0f0f0;
z-index: 0;
}
.home-graph-item p {
font-size: 1.2em;
.filters-cats-label {
font-weight: 500;
margin-bottom: 5px;
}
.progress-bar-wrapper {
position: relative;
width: 100%;
}
/* filters */
@ -232,6 +208,12 @@ Version: 1.0
top: -0.18em;
}
.status-title {
margin-bottom: .2em;
font-size: .8em;
}
.status-title:hover,
.filter-close:hover {
cursor: pointer;
@ -349,4 +331,4 @@ Version: 1.0
.home-measures-title + p {
display: none;
}
}
}