<?php

/**
 * ------------ Modèle Chronologie Animé --------------
   source: https://developer.wordpress.org/news/2024/06/13/how-to-create-an-animated-timeline-plugin/
		   https://github.com/wptrainingteam/animated-timeline-plugin
		   
    La disposition et l’apparence de la chronologie est crée avec des blocs suivants
	• Un bloc Groupe avec une classe attribuée: animated-timeline. 
	On ajoute aussi la classe animated-timeline--circles
        pour avoir un séparateur de démarcation de forme circulaire uniquement en Front end
		en back office le séparateur reste un "t"
		si l'on souhaite le séparateur en "t" pour l'interface publique il faudra supprimer
		la classe: animated-timeline--circles		
		•Un bloc Colonnes avec trois colonnes imbriquées.
			• Le premier bloc colonne représente la date de l'événement. Exemple : « 2024, 2 avril »
			• Le deuxième bloc colonne représente un séparateur visuel de chronologie. 
			  le verrouillage de bloc est actif pour empêcher l'éditeur de supprimer 
			  ou de déplacer accidentellement ce bloc.
			• Le troisième bloc colonne est l'endroit où le contenu sera affiché 
			  pour chaque événement sur la chronologie.
			  
		il suffit donc de dupliquer le bloc colonnes container des trois colonnes
		pour ajouter un évènement dans la chronologie
	
	
	------------ Modèle Navigation Par Onglets --------------

	 Crédit code: https://redpishi.com/wordpress-tutorials/add-tabs-in-wordpress-without-plugins/
		   
	La disposition et l’apparence de la composition est crée avec des blocs suivants:
		• Le bloc Boutons avec trois boutons ou chaque bouton va représenter un onglet 
		  avec son item de menu.
		• Trois blocs Groupe Gutenberg pour le contenu de chaque onglet.

	Chaque bloc bouton se voit attribuer la classe: is-style-tab-item en sélectionnant 
	le style Tab Item au panneau styles des paramètres du bloc
	Chaque bloc groupe se voit attribuer la classe: is-style-tab-content en sélectionnant 
	le style Tab Content au panneau styles des paramètres du bloc

	Ces classes vont permettre d'appliquer des régles CSS en Front End via
	le fichier asset\eccp-custom-front-end.php pour le bloc Boutons

	On utilise un script js\eccp-tabs-blocks.js

	Résumé des fonctionnalités du script:

	• Au chargement de la page, le premier onglet et le premier contenu 
	  sont définis comme actifs (affichés).
	• Lorsque l'utilisateur clique sur un onglet, la fonction activeTab est appelée.
	• La fonction activeTab désactive tous les onglets et masque les contenus 
	  en supprimant la classe active.
	• La fonction activeTab active l'onglet cliqué et affiche le contenu correspondant 
	  en ajoutant respectivement la classe active à l'onglet et le bloc groupe correspondant.	
	  
	Pour ajouter un onglet et son contenu il suffit de dupliquer un bloc bouton
	& un bloc groupe. 
	
 */


/**
 * Enregistre le script et le style personnalisé pour la composition:
 *  Chronologie Animé
 */
function eccp_animated_timeline_register_scripts() {

	// Enregistre le script personnalisé à utiliser plus tard.
	// surveiller le défilement de la fenêtre et ajouter la classe: loaded 
	// pour animer les éléments ciblés, c'est a dire les trois colonnes
	// qui ont la classe animated__item.
	// cette classe a été ajoutée par la fonction: eccp_animated_timeline_filter_group_content
	// via le hook render_block_core/group
	wp_register_script(
		'eccp-animated-timeline-script',
		plugin_dir_url( __FILE__ ) . 'animated-timeline/assets/scripts/core-blocks/eccp-group--animated-timeline.js',
		array(),
		'1.0.0',
		true
	);

	// Enregistre le style personnalisé à utiliser plus tard.
	// CSS pour effectuer la transition, retarder et animer des éléments
	wp_register_style(
		'eccp-animated-timeline-style',
		plugin_dir_url( __FILE__ ) . 'animated-timeline/assets/styles/core-blocks/eccp-group--animated-timeline.css',
		array(),
		'1.0.0',
	);
}
add_action( 'wp_enqueue_scripts', 'eccp_animated_timeline_register_scripts' );

/**
 * Modification du bloc Groupe container de la chronologie Animé
 *
 * @param string $block_content le contenu du bloc sur le point d'être rendu.
 *
 * @return string Le contenu du bloc Groupe Modifié ou pas 
 *
 * Le processeur de balises HTML est un outil puissant qui permet de parcourir 
 * Le contenu des blocs imbriqués et d'attribuer des classes à chaque bloc de colonne. 
 * Le code utilise wp_enqueue_script()et wp_enqueue_style()pour mettre en file d'attente 
 * des fichiers CSS et JavaScript personnalisés,
 * mais uniquement si le bloc Groupe avec la classe .animated-timeline se trouve sur 
 * le front-end du site. Cela garantit que les scripts ne sont chargés que lorsqu'un 
 * bloc de groupe avec la classe .animated-timeline est affiché sur la page.
 */
function eccp_animated_timeline_filter_group_content( $block_content ) {
	
	$processor = new WP_HTML_Tag_Processor( $block_content );
	$counter   = 0;

	// On ne modifie le bloc groupe que s'il y a présence de la classe: animated-timeline
	if ( ! $processor->next_tag( array( 'class_name' => 'animated-timeline' ) ) ) {
		return $block_content;
	}

	// Boucle dans chaque bloc enfant avec le nom de classe "wp-block-column".
	while ( $processor->next_tag( array( 'class_name' => 'wp-block-column' ) ) ) {
		
		// Pour chaque colonne on ajoute la classe: animated__item
		// Cela va permettre d'être ciblé par le script JS qui va ajouter
		// la classe: loaded lorsque cette colonne sera visible dans la fenêtre,
		// permettant ainsi l'animation.
		$processor->add_class( 'animated__item' );
		++$counter;

		switch ( $counter ) {
			// 1ère colonne
			case 1:
				$processor->add_class( 'animated__item--first' );
				break;
			// 2ème colonne
			case 2:
				$processor->add_class( 'animated__item--line' );
				break;
			// 3ème colonne
			case 3:
				$processor->add_class( 'animated__item--last' );
				$counter = 0;
				break;
		}
	}

	$block_content = $processor->get_updated_html();

	// Enqueue le script & style personnalisé
	wp_enqueue_script( 'eccp-animated-timeline-script' );
	wp_enqueue_style( 'eccp-animated-timeline-style' );

	// On retourne le contenu du bloc modifié ou pas 
	return $block_content;
}
add_filter( 'render_block_core/group', 'eccp_animated_timeline_filter_group_content', 10 );


/**
 * Enregistre les modèles de bloc pour nos compositions personnalisées
 *
 * On vérifie si le fichier de modèle existe sinon on sort.
 * On enregistre une catégorie de modèle personnalisé: compositions ECCP
 * On enregistre le modèle à l'aide de la fonction `register_block_pattern`.
 */
function eccp_register_block_pattern() {
	
	/*------- Composition Chronologie Animée ---------*/
	// plugin_dir_path( __FILE__) donne le chemin du dossier 
	// pour le fichier eccp-animated-timeline.php avec un '/' a la fin
	/* le fichier eccp-timeline-pattern.php 
	   retourne un array pour la fonction register_block_pattern() qui permet 
	   d'enregistrer notre modèle de chronologie animé:
		array(
			'title'      => __( 'Animated Timeline', 'editor-custom-color-palette' ),
			'categories' =>  array( 'composition-eccp' ),
			'description' => __( 'Establish a timeline', 'editor-custom-color-palette' ),
			'keywords' => 'timeline',
			'content' => ' le code HTML du modèle'
		)
	*/
	$pattern_animated_timeline_file = plugin_dir_path( __FILE__ ) . 'animated-timeline/patterns/eccp-timeline-pattern.php';
	
	
	/*------- Composition Navigation par onglets --------*/
	$pattern_tabs_nav_file = plugin_dir_path( __FILE__ ) . 'tabs-nav/eccp-tabs-nav.php';
	
	
	if ( function_exists( 'register_block_pattern' ) ) {
		
		if ( function_exists( 'register_block_pattern_category' ) ) {
			register_block_pattern_category( 'composition-eccp', array( 'label' => __( 'ECCP Patterns','editor-custom-color-palette' ) ) );
		}
		
		if ( file_exists( $pattern_animated_timeline_file ) ) {
			register_block_pattern(
				'eccp-animated-timeline/eccp-animated-timeline',
				require $pattern_animated_timeline_file
			);
		}
		
		if ( file_exists( $pattern_tabs_nav_file ) ) {
			register_block_pattern(
				'eccp-tabs-nav/eccp-tabs-nav',
				require $pattern_tabs_nav_file
			);
		}

	}
	
}
add_action( 'init', 'eccp_register_block_pattern' );
