- moving ajax script outside plugin class, as a js file

- wip trying to use the wordpress image editor

plugins/fipfcard_plugin/fipfcard_plugin.php

@@ -29,19 +29,18 @@ Author URI:
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 plugin dir root
 */
-define( 'FIPFCARD_PLUGIN_DIR', plugin_dir_path(__FILE__) );
-define( 'FIPFCARD_PLUGIN_URL', plugin_dir_url(__FILE__) );
 
-include_once( plugin_dir_path(__FILE__) . '/php/utils/plugin_tools.php');
+include_once( plugin_dir_path(__FILE__) . '/utils/plugin_tools.php');
 PLGNTLS_class::set_root_dir( plugin_dir_path(__FILE__), plugin_dir_url(__FILE__) );
 
 /*
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 inclusions
 */
-include_once(FIPFCARD_PLUGIN_DIR . '/php/utils/globals.php');
+include_once(PLGNTLS_class::get_path() . '/php/utils/globals.php');
+include_once(PLGNTLS_class::get_path() . '/php/menu/example_menu.php');
+//include_once(PLGNTLS_class::get_path() . '/php/images/image-edit.php');
 
-include_once(FIPFCARD_PLUGIN_DIR . '/php/menu/example_menu.php');
 
 
 
@@ -53,6 +52,7 @@ plugin shortcode
 function fipfcard_main_shortcode()
 {
 	
+
 	$fipfcard_tools = new PLGNTLS_class();
 
 
@@ -67,9 +67,9 @@ $data = $data->data;
 $data = $data->user_email;
 //error_log("data->data");
 //error_log($data);
-delete_post_meta(get_the_ID(), "_data_user_email");
+//delete_post_meta(get_the_ID(), "_data_user_email");
-delete_post_meta(get_the_ID(), "_data");
+//delete_post_meta(get_the_ID(), "_data");
-add_post_meta(get_the_ID(), "data_user_email", $data);
+//add_post_meta(get_the_ID(), "data_user_email", $data);
 
 	$post_metadata = get_metadata( 'post', get_the_ID() );
 	$post_meta = get_post_meta( get_the_ID() );
@@ -112,6 +112,31 @@ add_post_meta(get_the_ID(), "data_user_email", $data);
 add_shortcode('fipfcard_plugin', 'fipfcard_main_shortcode');
 
 
+function fipfcard_image_editor()
+{
+//	ob_start();
+//	wp_image_editor('33545');
+//	return ob_get_clean();
+$test1 = "hello";
+$test2 = "you";
+	$fipfcard_image_editor = new PLGNTLS_class();
+	return $fipfcard_image_editor->add_to_front(
+		array(
+			"js/image_editor.js",
+			"html/image_editor.html",
+		),
+		compact(
+			"test1",
+			"test2",
+		)
+	);
+/*
+*/
+}
+add_shortcode('fipfcard_image_editor', 'fipfcard_image_editor');
+
+
+
 /*
 add_action('init', 'custom_action_handler');
 function custom_action_handler() {
@@ -279,6 +304,7 @@ function PLGNTLS_my_custom_df_form_handler($form_id, $post_array, $form_type)
 }
 
 
+
 // Hook into the 'acf/save_post' action
 /*
 add_action('acf/save_post', 'handle_acf_form_submission', 5); // 20 is the priority, you can adjust it as needed
@@ -358,12 +384,10 @@ ajax
 */
 function fipfcard_ajax_handler()
 {
-	wp_send_json_success
+	wp_send_json_success( array
-	(
-		array
 		(
 			'It works',
-			"data_received" => $_POST['data'],
+			"data_received" => $_POST['postid'],
 		),
 		200
 	);

plugins/fipfcard_plugin/html/image_editor.html

@@ -0,0 +1,2 @@
+<input type='text' id='image_id' placeholder="image_id">
+<button id='edit_image'>edit image</button>

plugins/fipfcard_plugin/js/image_editor.js

@@ -0,0 +1,19 @@
+
+console.log("---------------inside image_editor.js--------------");
+const edit_image_button = document.getElementById('edit_image');
+const image_id_field = document.getElementById('image_id');
+
+edit_image_button.addEventListener('click', () => {
+	const image_id = image_id_field.value;
+
+	PLGNTLS_ajax("postid", image_id, 'image_editor')
+	.then((response) => response.json())
+	.then((data) => {
+		console.log("data: ");
+		console.log(data);
+	})
+	.catch((error) => {
+		console.log("error: ");
+		console.log(error);
+	});
+});

plugins/fipfcard_plugin/js/menu/example_menu.js

@@ -5,8 +5,7 @@ sendButton.addEventListener('click', () => {
 	const inputValue = inputElement.value;
 	console.log("inputValue:");
 	console.log(inputValue);
-	console.log(PLGNTLS_data);
+	PLGNTLS_ajax(inputValue, 'get_data')
-	PLGNTLS_data.ajax(inputValue, 'get_data')
 		.then((response) => response.json())
 		.then((data) => {
 			console.log("dataaa: ");

plugins/fipfcard_plugin/js/utils/ajax.js

@@ -1,34 +0,0 @@
-/*
- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-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', fipfcard_ajax._nonce);
-	data.append('data', ajax_data);
-
-	fetch(fipfcard_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/utils/plugin_ajax.js

@@ -0,0 +1,19 @@
+/**
+ * function that create an ajax post action
+ * - PLGNTLS_data.ajax_nonce and PLGNTLS_data.ajax_url
+ *   are passed from the class PLGNTLS_class
+ */
+console.log("PLGNTLS_data");
+console.log(PLGNTLS_data);
+function PLGNTLS_ajax(data_key, data_value, action) {
+	const data = new FormData();
+	data.append("action", action);
+	data.append("_ajax_nonce", PLGNTLS_data.ajax_nonce);
+	data.append(data_key, data_value);
+
+	return fetch(PLGNTLS_data.ajax_url, {
+		method: "POST",
+		credentials: "same-origin",
+		body: data
+	});
+}

plugins/fipfcard_plugin/utils/plugin_tools.php

@@ -43,23 +43,33 @@ class PLGNTLS_class
 		self::$_root_path = $path;
 		self::$_root_url = $url;
 	}
-	public function get_path() {
+	public static function get_path() {
 		return(self::$_root_path);
 	}
-	public function get_url() {
+	public static function get_url() {
 		return(self::$_root_url);
 	}
 
 
 	public function add_to_front($files_arr = null, $vars = null) {
+		if (!is_null($files_arr))
+		{
+			// add ajax file at beginning of files list
+			array_unshift($files_arr, "utils/plugin_ajax.js");
+			$nonce = array("ajax_nonce" => wp_create_nonce('wp-pageviews-nonce'));
+			$url = array("ajax_url" => admin_url('admin-ajax.php'));
+			$vars = array_merge($vars, $nonce);
+			$vars = array_merge($vars, $url);
+		}
+
 		$files = array();
 		foreach($files_arr as $key => $file_name) {
 			$files[] = $this->init_file($key, $file_name);
 		}
 		if (!is_null($files_arr))
 			$this->add_files_to_front($files);
-		$ajax = $this->get_ajax_script();
+		if (!is_null($vars))
-		$this->add_vars_to_front($vars, $ajax);
+			$this->add_vars_to_front($vars);
 		return $this->create_html($files, $vars);
 	}
 
@@ -137,23 +147,17 @@ class PLGNTLS_class
 	 * 	 this name is the filename + "_" + extension :
 	 * 	 init.js -> init_js
 	 */
-	private function add_vars_to_front($vars_arr, $ajax = null)
+	private function add_vars_to_front($vars_arr)
 	{
 		if (is_null($this->_first_script))
 			return ;
-		if (is_null($vars_arr) && is_null($ajax))
+		if (is_null($vars_arr))
 			return ;
 		$handle = $this->_first_script;
 		$object_name = $this->_prefix . "_data";
 
-		$front = "";
+		$vars_json = json_encode($vars_arr);
-		if (!is_null($vars_arr))
+		$front = "let $object_name = $vars_json;";
-		{
-			$vars_json = json_encode($vars_arr);
-			$front .= "let $object_name = $vars_json;";
-		}
-		if (! is_null($ajax))
-			$front .= "$ajax";
 		wp_add_inline_script($handle, $front, 'before');
 	}
 
@@ -251,47 +255,6 @@ class PLGNTLS_class
 	}
 
 
-	/**
-	 * 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 ?)
-	 */
-	/**
-	 * js function that creates an ajax post action
-	 */
-	private function get_ajax_script() {
-		if (is_null($this->_first_script))
-			return ;
-		if (self::$_ajax_already_there)
-			return ;
-		self::$_ajax_already_there = true;
-
-		ob_start();
-			?>
-			function <?php echo $this->_prefix ?>_ajax(ajax_data, action) {
-				const _ajax_nonce = "<?php echo wp_create_nonce( 'wp-pageviews-nonce' ); ?>";
-				const _ajax_url = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
-				const data = new FormData();
-				data.append("action", action);
-				data.append("_ajax_nonce", _ajax_nonce);
-				data.append("data", ajax_data);
-
-				return fetch(_ajax_url, {
-					method: "POST",
-					credentials: "same-origin",
-					body: data
-				});
-			}
-			<?php
-		return ob_get_clean();
-	}
 }