From 7a8c0750c54ab44862bfe72259667e7de36a453e Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Tue, 27 Feb 2024 11:51:46 +0100
Subject: [PATCH] wip adding attributes, works with filter wp-script-attributes

---
 plugins/fipfcard_plugin/fipfcard_plugin.php   | 30 --------
 .../fipfcard_plugin/js/menu/example_menu.js   |  6 +-
 .../fipfcard_plugin/php/menu/example_menu.php | 24 ++++++
 .../fipfcard_plugin/utils/plgntls_class.php   | 74 +++++++++++++++----
 4 files changed, 87 insertions(+), 47 deletions(-)

diff --git a/plugins/fipfcard_plugin/fipfcard_plugin.php b/plugins/fipfcard_plugin/fipfcard_plugin.php
index 407280b..546c623 100644
--- a/plugins/fipfcard_plugin/fipfcard_plugin.php
+++ b/plugins/fipfcard_plugin/fipfcard_plugin.php
@@ -353,34 +353,4 @@ add_action('admin_menu', 'fipfcard_plugin_menu');
 
 
 
-
-/*
- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-ajax
-- https://stackoverflow.com/questions/43557755/how-to-call-ajax-in-wordpress
-- in `add_action( 'wp_ajax_get_data', 'my_ajax_handler' );`
-  the 'wp_ajax_get_data' is a hooks formated as 'wp_ajax_{$action}'
-	the `$action` param is passed in the data object of the ajax call
-- to access the content of the data object properties of the ajax call :
-  use $_POST['property_name']
-*/
-function fipfcard_ajax_handler()
-{
-	wp_send_json_success( array
-		(
-			'It works',
-			"data_received" => $_POST,
-		),
-		200
-	);
-}
-function fipfcard_menu_endpoint()
-{
-	register_rest_route('', '/get_data', array(
-		'methods' => 'POST',
-		'callback' => 'fipfcard_ajax_handler',
-	));
-};
-add_action('rest_api_init', 'fipfcard_menu_endpoint');
-
 ?>
diff --git a/plugins/fipfcard_plugin/js/menu/example_menu.js b/plugins/fipfcard_plugin/js/menu/example_menu.js
index d0e8423..e3fd784 100644
--- a/plugins/fipfcard_plugin/js/menu/example_menu.js
+++ b/plugins/fipfcard_plugin/js/menu/example_menu.js
@@ -1,3 +1,5 @@
+import {PLGNTLS_fetch} from '../../utils/plgntls_fetch.js';
+
 const inputElement = document.getElementById('mytext');
 const sendButton = document.getElementById('mybutton');
 
@@ -10,7 +12,9 @@ sendButton.addEventListener('click', () => {
 	inputValue = JSON.stringify(inputValue);
 	console.log("inputValue:");
 	console.log(inputValue);
-	PLGNTLS_fetch('/get_data', {inputValue})
+	PLGNTLS_fetch('/plgntls/get_data', {
+		method: "POST",
+	})
 	//PLGNTLS_fetch('get_data', {body: {inputValue}})
 	.then((response) => response.json())
 	.then((data) => {
diff --git a/plugins/fipfcard_plugin/php/menu/example_menu.php b/plugins/fipfcard_plugin/php/menu/example_menu.php
index 82e1c9b..fa5ba59 100644
--- a/plugins/fipfcard_plugin/php/menu/example_menu.php
+++ b/plugins/fipfcard_plugin/php/menu/example_menu.php
@@ -16,4 +16,28 @@ function fipfcard_plugin_content() {
 	));
 }
 
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ajax
+- https://stackoverflow.com/questions/43557755/how-to-call-ajax-in-wordpress
+- in `add_action( 'wp_ajax_get_data', 'my_ajax_handler' );`
+  the 'wp_ajax_get_data' is a hooks formated as 'wp_ajax_{$action}'
+	the `$action` param is passed in the data object of the ajax call
+- to access the content of the data object properties of the ajax call :
+  use $_POST['property_name']
+*/
+function fipfcard_ajax_handler()
+{
+	return new WP_REST_Response('hello', 200);
+}
+function fipfcard_menu_endpoint()
+{
+	register_rest_route('plgntls', '/get_data', array(
+		'methods' => 'POST',
+		'callback' => 'fipfcard_ajax_handler',
+	));
+};
+add_action('rest_api_init', 'fipfcard_menu_endpoint');
+
 ?>
diff --git a/plugins/fipfcard_plugin/utils/plgntls_class.php b/plugins/fipfcard_plugin/utils/plgntls_class.php
index 7cac44d..89ea749 100644
--- a/plugins/fipfcard_plugin/utils/plgntls_class.php
+++ b/plugins/fipfcard_plugin/utils/plgntls_class.php
@@ -7,6 +7,43 @@
  * PLGNTLS_class::set_root_dir( plugin_dir_path(__FILE__), plugin_dir_url(__FILE__) );
  *
  * PLGNTLS means PLUGIN TOOLS
+ *
+ *
+ * ex:
+ *
+ * $my_plugin_class = new PLGNTLS_class();
+ * $var_1 = 'value_1';
+ * $var_2 = 'value_2';
+ * $var_3 = 'value_3';
+ * return $my_plugin_class->add_to_front(
+ *   array(
+ *     'path/to/style.css'  // those files are added to front
+ *     'path/to/script.js'  // in the order you put them
+ *     'http://my_url.com'  // it can be urls
+ *     'path/to/file.html'  // html are just rendered then returned
+ *   ),
+ *   compact(     // these variables are added to html and js files
+ *     'var_1',   // in html files you can access them directly
+ *     'var_2',   // in js files they are properties of object PLGNTLS_data
+ *     'var_3',   // like PLGNTLS_data.var_1;
+ *   )
+ * );
+ *
+ * complete syntax to include js scripts :
+ *
+ *     key         =>  value
+ * 1:                 'src'
+ * 2: 'dependence' => 'src'
+ * 3:                  array( 'src', 'attr_1' => 'value_1', ... )
+ * 4: 'dependence' =>  array( 'src', 'attr_1' => 'value_1', ... )
+ *
+ * -> 'src' is required
+ * -> 'dependence' is optional
+ *    explicit key is always a dependence 
+ * -> value can be a string 'src', or an array('srcs', ...)
+ *    if value is array, first element is 'src' and following
+ *    are attributes for <script> html elements
+ *
  */
 
 class PLGNTLS_class
@@ -54,17 +91,9 @@ class PLGNTLS_class
 		if (!is_array($vars))
 			$vars = array();
 		if (!is_null($scripts_arr))
-		{
-			// add fetch script at beginning of scripts list
-			array_unshift($scripts_arr, "utils/plgntls_fetch.js");
-			// for the custom endpoints in rest api to work
-			// they need to have a nonce named 'wp_rest'
-			// see : https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/
-			$fetch_nonce = array("fetch_nonce" => wp_create_nonce('wp_rest'));
-			$fetch_url = array("fetch_url" => get_site_url() . "/wp-json");
-			$vars = array_merge($vars, $fetch_nonce);
-			$vars = array_merge($vars, $fetch_url);
-		}
+			$this->add_fetch($scripts_arr, $vars);
+
+		array_push($this->_scripts_modules, 'PLGNTLS_example_menu_js', 'PLGNTLS_plgntls_fetch_js');
 
 		$scripts = array();
 		foreach($scripts_arr as $key => $script_name) {
@@ -98,6 +127,17 @@ class PLGNTLS_class
 
 
 
+	private function add_fetch(&$scripts_arr, &$vars) {
+		// add fetch script at beginning of scripts list
+		array_unshift($scripts_arr, "utils/plgntls_fetch.js");
+		// for the custom endpoints in rest api to work
+		// they need to have a nonce named 'wp_rest'
+		// see : https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/
+		$fetch_nonce = array("fetch_nonce" => wp_create_nonce('wp_rest'));
+		$fetch_url = array("fetch_url" => get_site_url() . "/wp-json");
+		$vars = array_merge($vars, $fetch_nonce);
+		$vars = array_merge($vars, $fetch_url);
+	}
 
 
 
@@ -201,22 +241,24 @@ class PLGNTLS_class
 
 		/*
 		 * uncomment to print all enqueued scripts, can be usefull
+		 */
 				global $wp_scripts;
 				error_log("wp_scripts->queue:");
 				error_log(json_encode($wp_scripts->queue));
-		 */
 	}
-	// funciton is just a wrapper, only to facilitate writing
+	// function is just a wrapper, only to facilitate writing
 	private function make_scripts_modules() {
 		// https://developer.wordpress.org/reference/hooks/wp_script_attributes/
 		// https://wordpress.stackexchange.com/questions/66843/attach-a-private-function-at-a-hook
-		add_filter( 'wp_script_attributes', fn() => $this->add_type_module(), 10, 1 );
+		add_filter( 'wp_script_attributes', fn($attr)=>$this->add_type_module($attr), 10, 1 );
 	}
 	private function add_type_module($attr) {
 		if (empty($attr['id']))
 			return $attr;
-		if ($attr['id'] === 'PLGNTLS_plgntls_fetch_js-js') {
-			$attr['type'] = 'module';
+		foreach($this->_scripts_modules as $script){
+			if ($attr['id'] === $script.'-js') {
+				$attr['type'] = 'module';
+			}
 		}
 		return $attr;
 	}