From 356ea8df9c265514ba36d101d20415ec21d8da32 Mon Sep 17 00:00:00 2001 From: MrRaph_ Date: Fri, 23 May 2025 11:34:40 +0000 Subject: [PATCH] feat: add more customizations --- css/style.css | 21 +++- widgets/category-grid-widget.php | 205 +++++++++++++++++++++++++++++++ 2 files changed, 220 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 75aaef4..0ebbd55 100644 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,20 @@ /* css/style.css */ +.elementor-category-grid .category-card { + position: relative; + overflow: hidden; +} + +/* pseudo-élément overlay */ +.elementor-category-grid .category-card::before { + content: ""; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + background-color: transparent; + transition: opacity .3s ease; + pointer-events: none; /* laisse passer le clic */ +} /* 1) Mise en place de la grille */ -/* .elementor-category-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 1rem; -} */ .elementor-category-grid { display: grid; gap: 1rem; @@ -25,7 +34,7 @@ overflow: hidden; height: 0; padding-bottom: 40%; /* ratio 5:2 – ajustez selon vos images */ - border-radius: 8px; + /* border-radius: 8px; */ } /* 3) Image pleine carte */ diff --git a/widgets/category-grid-widget.php b/widgets/category-grid-widget.php index 16679d0..a2b3f77 100644 --- a/widgets/category-grid-widget.php +++ b/widgets/category-grid-widget.php @@ -3,6 +3,10 @@ if (!defined('ABSPATH')) { exit; // Empêche l'accès direct. } +use Elementor\Controls_Manager; +use Elementor\Group_Control_Typography; +use Elementor\Group_Control_Box_Shadow; + /** * Classe Elementor_Category_Grid_Widget. * @@ -61,6 +65,205 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base { return ['category', 'catégorie', 'grid', 'grille']; } + protected function register_style_controls() + { + // 1) Styles de la grille (espacement) + $this->start_controls_section( + 'section_style_grid', + [ + 'label' => esc_html__('Grille', 'category-grid-widget'), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + $this->add_responsive_control( + 'grid_gap', + [ + 'label' => esc_html__('Espacement (gap)', 'category-grid-widget'), + 'type' => Controls_Manager::SLIDER, + 'size_units' => ['px', 'em', '%'], + 'range' => [ + 'px' => ['min' => 0, 'max' => 100], + 'em' => ['min' => 0, 'max' => 10], + ], + 'selectors' => [ + '{{WRAPPER}} .elementor-category-grid' => 'gap: {{SIZE}}{{UNIT}};', + ], + ] + ); + $this->end_controls_section(); + + // 2) Styles des cartes (fond, bordure, ombre) + $this->start_controls_section( + 'section_style_card', + [ + 'label' => esc_html__('Carte', 'category-grid-widget'), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + $this->add_control( + 'card_bg_color', + [ + 'label' => esc_html__('Fond de la carte', 'category-grid-widget'), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'selectors' => [ + '{{WRAPPER}} .category-card' => 'background-color: {{VALUE}};', + ], + ] + ); + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'card_title_typography', + 'label' => esc_html__('Typographie du titre', 'category-grid-widget'), + 'selector' => '{{WRAPPER}} .category-card-name', + ] + ); + $this->add_control( + 'card_border_radius', + [ + 'label' => esc_html__('Border radius', 'category-grid-widget'), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => ['px', '%'], + 'selectors' => [ + '{{WRAPPER}} .category-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + $this->add_group_control( + \Elementor\Group_Control_Box_Shadow::get_type(), + [ + 'name' => 'card_box_shadow', + 'label' => esc_html__('Ombre de la carte', 'category-grid-widget'), + 'selector' => '{{WRAPPER}} .category-card', + ] + ); + $this->end_controls_section(); + + // 3) Styles du titre (couleur, arrière-plan du badge) + $this->start_controls_section( + 'section_style_title', + [ + 'label' => esc_html__('Titre', 'category-grid-widget'), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + // 3.1) Switcher pour désactiver le fond + $this->add_control( + 'disable_title_bg', + [ + 'label' => esc_html__('Désactiver le fond du titre', 'category-grid-widget'), + 'type' => Controls_Manager::SWITCHER, + 'label_on' => esc_html__('Oui', 'category-grid-widget'), + 'label_off' => esc_html__('Non', 'category-grid-widget'), + 'return_value' => 'yes', + 'default' => 'no', + 'selectors' => [ + // Quand activé => on rend le fond totalement transparent + '{{WRAPPER}} .category-card-name' => 'background-color: transparent !important;', + ], + ] + ); + + // 3.2) Couleur du texte + $this->add_control( + 'title_text_color', + [ + 'label' => esc_html__('Couleur du texte', 'category-grid-widget'), + 'type' => Controls_Manager::COLOR, + 'default' => '#ffffff', + 'selectors' => [ + '{{WRAPPER}} .category-card-name' => 'color: {{VALUE}};', + ], + ] + ); + + // 3.3) Couleur de fond du titre, **uniquement si** le fond n'est pas désactivé + $this->add_control( + 'title_bg_color', + [ + 'label' => esc_html__('Fond du titre', 'category-grid-widget'), + 'type' => Controls_Manager::COLOR, + 'default' => 'rgba(0,0,0,0.4)', + 'selectors' => [ + '{{WRAPPER}} .category-card-name' => 'background-color: {{VALUE}};', + ], + 'condition' => [ + // n'affiche ce picker que si disable_title_bg != 'yes' + 'disable_title_bg!' => 'yes', + ], + ] + ); + + // 3.4) Typographie du titre + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'card_title_typography', + 'label' => esc_html__('Typographie du titre', 'category-grid-widget'), + 'selector' => '{{WRAPPER}} .category-card-name', + ] + ); + + $this->end_controls_section(); + + // 4) Section Hover + $this->start_controls_section( + 'section_style_hover', + [ + 'label' => esc_html__('Hover', 'category-grid-widget'), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + // 4.1) Couleur de l'overlay + $this->add_control( + 'hover_overlay_color', + [ + 'label' => esc_html__('Couleur de l’overlay', 'category-grid-widget'), + 'type' => Controls_Manager::COLOR, + 'default' => 'rgba(0,0,0,0.3)', + 'selectors' => [ + // sur l’élément ::before (défini en CSS ci-dessous) + '{{WRAPPER}} .category-card::before' => 'background-color: {{VALUE}};', + ], + ] + ); + + // 4.2) Opacité de l'overlay + $this->add_control( + 'hover_overlay_opacity', + [ + 'label' => esc_html__('Opacité de l’overlay', 'category-grid-widget'), + 'type' => Controls_Manager::SLIDER, + 'size_units' => ['%'], + 'range' => [ + '%' => ['min' => 0, 'max' => 100], + ], + 'default' => ['size' => 30], + 'selectors' => [ + '{{WRAPPER}} .category-card::before' => 'opacity: 0;', + '{{WRAPPER}} .category-card:hover::before' => 'opacity: {{SIZE}}%;', + ], + ] + ); + + // 4.3) Couleur du titre au hover + $this->add_control( + 'title_hover_color', + [ + 'label' => esc_html__('Couleur du titre au hover', 'category-grid-widget'), + 'type' => Controls_Manager::COLOR, + 'default' => '#ffffff', + 'selectors' => [ + '{{WRAPPER}} .category-card:hover .category-card-name' => 'color: {{VALUE}};', + ], + ] + ); + + $this->end_controls_section(); + } /** * Enregistrer les contrôles du widget (champs configurables dans Elementor). @@ -198,6 +401,8 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base ); $this->end_controls_section(); + + $this->register_style_controls(); } /**