wip renaming plugins elements

Makefile

@@ -30,6 +30,15 @@ erase:
 new:
 	$(MAKE) $@ -C $(WP_DOCKER_D)
 
+down:
+	$(MAKE) $@ -C $(WP_DOCKER_D)
 
-.PHONY : all fclean re erase new
+up:
+	$(MAKE) $@ -C $(WP_DOCKER_D)
+
+build:
+	$(MAKE) $@ -C $(WP_DOCKER_D)
+
+
+.PHONY : all fclean re erase new down up build
 

plugins/fipf_wp_plugin/fipf_wp_hooks.php

@@ -1,80 +0,0 @@
-<?php
-/*
-Plugin Name: fipf_wp_plugin
-Plugin URI:
-Description: 
-Author: hugogogo
-Version: 1.1.0
-Author URI:
-*/
-
-
-/* * * * * * * * * * * * * * * * * * * * * * * *
- * inclusions
- */
-
-include_once(dirname(__FILE__) . '/utils/console_log.php');
-include_once(dirname(__FILE__) . '/utils/add_to_front.php');
-include_once(dirname(__FILE__) . '/utils/create_html.php');
-
-
-
-
-/* * * * * * * * * * * * * * * * * * * * * * * *
- * plugin shortcode
- */
-
-function main_shortcode() {
-
-	add_files_to_front( array(
-		"mystyle.css",
-		"myscript.js",
-		"myscript2.js",
-		"myscript3.js",
-	));
-
-	$myvar_1 = "I am one";
-	$myvar_2 = "I am two";
-	# compact creates an array containing the variables and their value
-	# as key => value
-	# from an array of variables names as strings
-	add_var_to_front( compact(
-		"myvar_1",
-		"myvar_2",
-	));
-
-
-	$names = ["hugo", "camille"];
-	$ages = ["13", "34", "56"];
-	$html_front = create_html(
-		array(
-			"index.html",
-			"index2.html",
-		),
-		compact(
-			"names",
-			"ages",
-		)
-	);
-
-	return $html_front;
-}
-add_shortcode('fipf_wp_plugin', 'main_shortcode');
-
-
-/* * * * * * * * * * * * * * * * * * * * * * * *
- * menu plugin
- */
-
-function plugin_menu() {
-	add_menu_page(
-		'FIPF wp plugin',					// webpage title
-		'FIPF',										// menu title
-		'manage_options',					// capability
-		'fipf-wp-plugin',					// menu_slug
-		'fipf_wp_plugin_content'	// callback function to display page content
-	);
-}
-add_action('admin_menu', 'plugin_menu');
-
-?>

plugins/fipf_wp_plugin/html/index.html

@@ -1,7 +0,0 @@
-<p>i am a new p</p>
-<p class="first_el_to_change">to change</p>
-<?php
-	foreach($names as $name) {
-		include($html_dir."templates/presentation.html");
-	}
-?>

plugins/fipf_wp_plugin/html/index2.html

@@ -1,9 +0,0 @@
-<?php
-	foreach($ages as $age) {
-		?>
-		<p>age <?php echo esc_html($age); ?></p>
-		<?php
-	}
-?>
-<p class="third_el_to_change">to change</p>
-<p>aaaaaand this is the end</p>

plugins/fipf_wp_plugin/scripts/myscript.js

@@ -1,5 +0,0 @@
-
-const title = document.querySelector(".first_el_to_change");
-title.innerHTML = "--- coucou ;)";
-
-console.log("myvar_1: " + myvar_1);

plugins/fipf_wp_plugin/scripts/myscript3.js

@@ -1,5 +0,0 @@
-
-const title3 = document.querySelector(".third_el_to_change");
-title3.innerHTML = "--- bye bye";
-console.log("myvar_2: " + myvar_2);
-

plugins/fipf_wp_plugin/styles/mystyle.css

@@ -1,3 +0,0 @@
-.first_el_to_change {
-	border: 1px solid red;
-}

plugins/fipf_wp_plugin/utils/add_to_front.php

@@ -1,52 +0,0 @@
-<?php
-
-function add_files_to_front($files_arr) {
-	//wp_enqueue_script(<give_it_a_name>, /url/to/file, [depends on], version, defer? );
-	//wp_enqueue_style( <give_it_a_name>, /url/to/file, [depends on], version, media );
-
-	$previous_css_basename = '';
-	$previous_js_basename = '';
-	foreach ($files_arr as $file) {
-		$file_ext = pathinfo($file, PATHINFO_EXTENSION);
-		$file_basename = pathinfo($file, PATHINFO_FILENAME);
-		if ($file_ext === "js")
-			$dir_path = 'scripts/';
-		else if ($file_ext === "css")
-			$dir_path = 'styles/';
-		else
-			continue;
-
-		$file_url = plugin_dir_url(__DIR__).$dir_path.$file;
-		$file_path = plugin_dir_path(__DIR__).$dir_path.$file;
-		$file_version = date("ymd-Gis", filemtime($file_path));
-
-		if ($file_ext === "js") {
-			wp_enqueue_script( $file_basename, $file_url, $previous_js_basename, $file_version, true);
-			$previous_js_basename = $file_basename;
-		}
-		else if ($file_ext === "css") {
-			wp_enqueue_style( $file, $file_url, $previous_css_basename, $file_version, '');
-			$previous_css_basename = $file_basename;
-		}
-	}
-}
-
-# this function expect an array of key => value
-# with the key being name of the variable, like this :
-#   'my_var' => 'value',
-# simpler way to do it is to use compact when calling the function :
-#   add_var_to_front(compact("var1", "var2", "var3"));
-function add_var_to_front($var_array) {
-	extract($var_array);
-
-	foreach ($var_array as $key => $var)
-	{
-		$js_var  = 'const ' . $key . ' = ';
-		$js_var .= json_encode($var);
-		$js_var .= ';';
-		console_log("in php, js_var: " . $js_var);
-		wp_add_inline_script('myscript', $js_var, 'before');
-	}
-}
-
-?>

plugins/fipf_wp_plugin/utils/console_log.php

@@ -1,11 +0,0 @@
-<?php
-// https://stackify.com/how-to-log-to-console-in-php/
-
-function console_log($output) {
-	$js_code = 'console.log(' . json_encode($output, JSON_HEX_TAG) . ');';
-	$js_code = '<script>' . $js_code . '</script>';
-	echo $js_code;
-}
-
-?>
-

plugins/fipf_wp_plugin/utils/create_html.php

@@ -1,25 +0,0 @@
-<?php
-
-# using ob_start() and ob_get_clean()
-# allows to have php expansion inside the html loaded
-# in opposition to the methode file_get_contents()
-#
-# https://stackoverflow.com/a/4402045/9497573
-
-# takes two arguments :
-# a list of the html files to include in front
-# a list of variables to make available to this files
-function create_html($files, $vars) {
-	$html_dir = plugin_dir_path(__DIR__).'html/';
-	extract($vars);
-
-	ob_start();
-	foreach($files as $file) {
-		include($html_dir.$file);
-	}
-	$html = ob_get_clean();
-
-	return $html;
-}
-
-?>

plugins/fipfcard_plugin/css/example_style.css

@@ -0,0 +1,7 @@
+.first_el_to_change {
+	border: 1px solid red;
+}
+#model_plugin_shortcode {
+	border: 1px solid blue;
+	padding: 10px;
+}

plugins/fipfcard_plugin/fipfcard_plugin.php

@@ -0,0 +1,119 @@
+<?php
+/*
+Plugin Name: fipfcard_plugin
+Plugin URI:
+Description: 
+Author: hugogogo
+Version: 1.1.0
+Author URI:
+*/
+
+
+
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+plugin dir root
+*/
+define( 'FIPFCARD_PLUGIN_DIR', plugin_dir_path(__FILE__) );
+define( 'FIPFCARD_PLUGIN_URL', plugin_dir_url(__FILE__) );
+
+
+
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+inclusions
+*/
+include_once(FIPFCARD_PLUGIN_DIR . '/php/utils/globals.php');
+include_once(FIPFCARD_PLUGIN_DIR . '/php/utils/console_log.php');
+include_once(FIPFCARD_PLUGIN_DIR . '/php/utils/add_to_front.php');
+include_once(FIPFCARD_PLUGIN_DIR . '/php/utils/create_html.php');
+
+include_once(FIPFCARD_PLUGIN_DIR . '/php/menu/example_menu.php');
+
+
+
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+plugin shortcode
+*/
+function fipfcard_main_shortcode() {
+
+	add_files_to_front( array(
+		"example_style.css",
+		"example_init.js",
+		"example_script2.js",
+		"example_script3.js",
+	));
+
+
+	$myvar_1 = "I am one";
+	$myvar_2 = "I am two";
+	add_var_to_front( compact(
+		"myvar_1",
+		"myvar_2",
+	));
+
+
+	$names = ["hugo", "camille"];
+	$ages = ["13", "34", "56"];
+	$html_front = create_html(
+		array(
+			"example_index.html",
+			"example_index2.html",
+		),
+		compact(
+			"names",
+			"ages",
+		)
+	);
+
+	return $html_front;
+}
+add_shortcode('fipfcard_plugin', 'fipfcard_main_shortcode');
+
+
+
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+menu plugin
+*/
+function fipfcard_plugin_menu() {
+	add_menu_page(
+		'wp model plugin',				// webpage title
+		'model plugin',						// menu title
+		'manage_options',					// capability
+		'wp-model-plugin',				// menu_slug
+		'wp_model_plugin_content'	// callback function to display page content
+	);
+}
+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 my_ajax_handler() {
+	wp_send_json_success( array(
+			'It works',
+			"data_received" => $_POST['data'],
+		),
+		200
+	);
+}
+add_action( 'wp_ajax_get_data', 'my_ajax_handler' );
+
+
+?>

plugins/fipfcard_plugin/html/example_index.html

@@ -0,0 +1,9 @@
+<div id="model_plugin_shortcode">
+	<p>i am a new p</p>
+	<p class="first_el_to_change">to change</p>
+	<button id='test_ajax_1' name="ajax_button_1" value="2024">2024</button>
+	<?php
+		foreach($names as $name) {
+			include($html_dir."templates/example_presentation.html");
+		}
+	?>

plugins/fipfcard_plugin/html/example_index2.html

@@ -0,0 +1,10 @@
+	<?php
+		foreach($ages as $age) {
+			?>
+			<p>age <?php echo esc_html($age); ?></p>
+			<?php
+		}
+	?>
+	<p class="third_el_to_change">to change</p>
+	<p>aaaaaand this is the end</p>
+</div>

plugins/fipfcard_plugin/html/menu/example_menu.html

@@ -0,0 +1,2 @@
+<input type='text' id='mytext'>
+<button id='mybutton'>send</button>

plugins/fipfcard_plugin/js/example_init.js

@@ -0,0 +1,8 @@
+
+const title = document.querySelector(".first_el_to_change");
+title.innerHTML = "--- coucou ;) " + myvar_1;
+
+const ajax_button_1 = document.querySelector("#test_ajax_1");
+ajax_button_1.addEventListener('click', () => {
+	ajax_post(ajax_button_1, 'get_data');
+});

plugins/fipfcard_plugin/js/example_script2.js

@@ -1,4 +1,3 @@
 
 const title2 = document.querySelector(".second_el_to_change");
 title2.innerHTML = "--- ho boy !";
-

plugins/fipfcard_plugin/js/example_script3.js

@@ -0,0 +1,3 @@
+
+const title3 = document.querySelector(".third_el_to_change");
+title3.innerHTML = "--- bye bye, " + myvar_2;

plugins/fipfcard_plugin/js/menu/example_menu.js

@@ -0,0 +1,7 @@
+const inputElement = document.getElementById('mytext');
+const sendButton = document.getElementById('mybutton');
+
+sendButton.addEventListener('click', () => {
+	const inputValue = inputElement.value;
+	ajax_post(inputValue, 'get_data');
+});

plugins/fipfcard_plugin/js/utils/ajax.js

@@ -0,0 +1,34 @@
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+function that create an ajax post action
+it can be "overloaded" with a callback_response and _error
+*/
+function ajax_post(ajax_data, action, callback_response, callback_error) {
+	const data = new FormData();
+	data.append('action', action);
+	data.append('_ajax_nonce', wp_ajax._nonce);
+	data.append('data', ajax_data);
+
+	fetch(wp_ajax._url, {
+		method: 'POST',
+		credentials: 'same-origin',
+		body: data
+	})
+	.then((response) => response.json())
+	.then((data) => {
+		if (callback_response)
+			callback_response(data);
+		else {
+			console.log("data: ");
+			console.log(data);
+		}
+	})
+	.catch((error) => {
+		if (callback_error)
+			callback_error(error);
+		else {
+			console.log("error: ");
+			console.log(error);
+		}
+	});
+};

plugins/fipfcard_plugin/php/menu/example_menu.php

@@ -0,0 +1,15 @@
+<?php
+
+function wp_model_plugin_content() {
+	global $first_script;
+	console_log("in menu : first_script:");
+	console_log($first_script);
+
+	add_files_to_front( array(
+		"menu/example_menu.js",
+	));
+
+	echo create_html("menu/example_menu.html");
+}
+
+?>

plugins/fipfcard_plugin/php/utils/add_to_front.php

@@ -0,0 +1,156 @@
+<?php
+
+
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+function that add the ajax script to front
+no real needs to check if already included :
+- $handle is uniq so it will not be re-enqueued
+  the first enqueued version would be kept
+- if we used add_var_to_front() (which use wp_add_inline_script())
+  the vars would be added twice
+  leading to js syntaxe error (redeclaraiton of 'let' or 'const')
+- but we use wp_localize_script() so the object will be overwritten
+  it's not a real pbm
+	(what is more efficient, check for double or overwritte object ?)
+*/
+function add_ajax_post() {
+	global $first_script;
+	global $ajax_file;
+
+	$file = init_file($ajax_file);
+
+//	// check if ajax script was already enqueued
+//	global $wp_scripts;
+//	$already_enqueued = array_search($file->handle, $wp_scripts->queue);
+//	if ($already_enqueued !== false)
+//		return ;
+
+	$first_script = $file->handle;
+	wp_enqueue_script( $file->handle, $file->url, $previous_js_basename, $file->version, true);
+
+	$_url = admin_url( 'admin-ajax.php' );
+	$_nonce = wp_create_nonce( 'wp-pageviews-nonce' );
+	$vars = compact("_url","_nonce",);
+//	add_var_to_front($vars);
+	$object_name = "wp_ajax";
+	wp_localize_script($file->handle, $object_name, $vars);
+
+}
+
+
+
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+@param string : name of the file, with its path from its extension directory
+	- from js/ root for .js files
+	- from css/ root for .css files
+@return object / null :
+	- null if file is not js or css
+	- or an object with all the necessary infos :
+		- ext      : name.js -> "js"
+		- basename : name.js -> "name"
+		- handle   : name.js -> "name_js"
+		- url     : url to file in wordpress
+		- path    : path to file in server
+		- version : used to avoid browser caching
+*/
+function init_file($file_name) {
+	$file = (object)[];
+
+	$file->ext = pathinfo($file_name, PATHINFO_EXTENSION);
+	if ($file->ext === "js")
+		$dir_path = 'js/';
+	else if ($file->ext === "css")
+		$dir_path = 'css/';
+	else
+		return null;
+
+	$file->basename = pathinfo($file_name, PATHINFO_FILENAME);
+	$file->handle = str_replace(".", "_", $file_name);
+
+	$file->url = FIPFCARD_PLUGIN_URL.$dir_path.$file_name;
+	$file->path = FIPFCARD_PLUGIN_DIR.$dir_path.$file_name;
+	$file->version = date("ymd-Gis", filemtime($file->path));
+
+	return $file;
+}
+
+
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+@param array : list of files :
+  - with their path from root of their type of file (ex: from js/ to .js files)
+	- and with their extension
+@param boolean
+	- to add ajax script and variables
+	- default to true
+*/
+function add_files_to_front($files_arr, $add_ajax = true) {
+	//wp_enqueue_script(<give_it_a_name>, /url/to/file, [depends on], version, defer? );
+	//wp_enqueue_style( <give_it_a_name>, /url/to/file, [depends on], version, media );
+	global $first_script;
+
+	if ($add_ajax === true)
+		add_ajax_post($file);
+
+	$previous_css_basename = '';
+	$previous_js_basename = '';
+	foreach ($files_arr as $file_name) {
+		$file = init_file($file_name);
+		if ($file->ext === "js") {
+			if (is_null($first_script))
+				$first_script = $file->handle;
+			wp_enqueue_script( $file->handle, $file->url, $previous_js_basename, $file->version, true);
+			$previous_js_basename = $file->basename;
+		}
+		else if ($file->ext === "css") {
+			wp_enqueue_style( $file->handle, $file->url, $previous_css_basename, $file->version, '');
+			$previous_css_basename = $file->basename;
+		}
+	}
+}
+
+
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+pass variables to js front as global variables
+@param array : list of key => value
+   with the key being name of the variable, like this :
+    'my_var' => 'value',
+   simpler way to do it is to use compact when calling the function :
+    add_var_to_front(compact("var1", "var2", "var3"));
+@param string (optionnal) : name of first embended script that need these variables
+   (it will be available to this script and all followings)
+   this name is the filename + "_" + extension :
+   init.js -> init_js
+*/
+function add_var_to_front($vars, $handle = null) {
+	if (is_null($handle)) {
+		global $first_script;
+		$handle = $first_script;
+	}
+	
+	extract($vars);
+	foreach ($vars as $key => $var)
+	{
+		$js_var = 'let '.$key.' = '.json_encode($var).';';
+		wp_add_inline_script($handle, $js_var, 'before');
+	}
+
+//	the other way with localize has multiple incidences :
+//  - it creates an object from wich you can access the variables
+//  - so if you call it again wiht the same name, it will overwrite the previous
+//	{
+//		$handle = pathinfo($handle, PATHINFO_FILENAME);
+//		$object_name = "php_data";
+//
+//		wp_localize_script($handle, $object_name, $vars);
+//	}
+}
+
+?>

plugins/fipfcard_plugin/php/utils/console_log.php

@@ -0,0 +1,16 @@
+<?php
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+https://stackify.com/how-to-log-to-console-in-php/
+*/
+function console_log($output) {
+	if (CONSOLE_OFF)
+		return;
+	$json_output = json_encode($output, JSON_HEX_TAG);
+	$js_code = '<script>console.log(' . $json_output . ');</script>';
+	echo $js_code;
+}
+
+
+?>

plugins/fipfcard_plugin/php/utils/create_html.php

@@ -0,0 +1,39 @@
+<?php
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+@param two arguments :
+1. html files to include in front
+	- can be a string of 1 filename
+	- or an array of strings of filenames
+	( https://stackoverflow.com/q/4747876/9497573 )
+	- it's probably better to only add 1 file, and let it include other files
+2. list of variables to make available to this files
+	- in the form of key => val
+	- recommanded to do it with compact()
+ex: create_html( "file.html", compact("var1","var2",) );
+ex: create_html( array("file1.html", "file2.html"), array("var1"=>"value") );
+@return a string of html code
+
+using ob_start() and ob_get_clean()
+allows to have php expansion inside the html loaded
+in opposition to the methode file_get_contents()
+
+https://stackoverflow.com/a/4402045/9497573
+*/
+function create_html($files, $vars = null) {
+	$files = (array)$files;
+	$html_dir = FIPFCARD_PLUGIN_DIR.'html/';
+	if (!is_null($vars))
+		extract($vars);
+
+	ob_start();
+	foreach($files as $file) {
+		include($html_dir.$file);
+	}
+	$html = ob_get_clean();
+
+	return $html;
+}
+
+?>

plugins/fipfcard_plugin/php/utils/globals.php

@@ -0,0 +1,22 @@
+<?php
+
+/*
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+globals variables
+const vs define : https://stackoverflow.com/questions/2447791/php-define-vs-const
+*/
+
+/* switch console_log
+const CONSOLE_OFF = true;
+*/
+const CONSOLE_OFF = false;
+
+/* a variable that will contain the name of the first script enqueued
+*/
+$first_script = null;
+
+/* path to ajax.js file, from root of js dir
+*/
+$ajax_file = "utils/ajax.js";
+
+?>