added switch on off for server console log

plugins/wp_model_plugin/html/index.html

@@ -0,0 +1,7 @@
+<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/wp_model_plugin/html/index2.html

@@ -0,0 +1,9 @@
+<?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/wp_model_plugin/html/templates/presentation.html

@@ -0,0 +1,2 @@
+<p>hello <?php echo esc_html($name); ?></p>
+<p class="second_el_to_change">to change</p>

plugins/wp_model_plugin/plugin_hooks.php

@@ -0,0 +1,89 @@
+<?php
+/*
+Plugin Name: wp_model_plugin
+Plugin URI:
+Description: 
+Author: hugogogo
+Version: 1.1.0
+Author URI:
+*/
+
+/* * * * * * * * * * * * * * * * * * * * * * * *
+ * globale variable to desable server side
+ * console_log all at once
+ */
+
+$CONSOLE_OFF = true;
+$CONSOLE_OFF = false;
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * *
+ * 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('wp_model_plugin', 'main_shortcode');
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * *
+ * menu plugin
+ */
+
+function 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', 'plugin_menu');
+
+?>

plugins/wp_model_plugin/scripts/myscript.js

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

plugins/wp_model_plugin/scripts/myscript2.js

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

plugins/wp_model_plugin/scripts/myscript3.js

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

plugins/wp_model_plugin/styles/mystyle.css

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

plugins/wp_model_plugin/utils/add_to_front.php

@@ -0,0 +1,52 @@
+<?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/wp_model_plugin/utils/console_log.php

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

plugins/wp_model_plugin/utils/create_html.php

@@ -0,0 +1,25 @@
+<?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;
+}
+
+?>