wip adding attributes, works with filter wp-script-attributes

This commit is contained in:
asus
2024-02-27 11:51:46 +01:00
parent 81f3f8a7e7
commit 7a8c0750c5
4 changed files with 87 additions and 47 deletions

View File

@@ -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');
?>

View File

@@ -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) => {

View File

@@ -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');
?>

View File

@@ -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;
}