wip adding attributes, works with filter wp-script-attributes
This commit is contained in:
@@ -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');
|
||||
|
||||
?>
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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');
|
||||
|
||||
?>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user