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 inputElement = document.getElementById('mytext');
|
||||||
const sendButton = document.getElementById('mybutton');
|
const sendButton = document.getElementById('mybutton');
|
||||||
|
|
||||||
@@ -10,7 +12,9 @@ sendButton.addEventListener('click', () => {
|
|||||||
inputValue = JSON.stringify(inputValue);
|
inputValue = JSON.stringify(inputValue);
|
||||||
console.log("inputValue:");
|
console.log("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}})
|
//PLGNTLS_fetch('get_data', {body: {inputValue}})
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then((data) => {
|
.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_class::set_root_dir( plugin_dir_path(__FILE__), plugin_dir_url(__FILE__) );
|
||||||
*
|
*
|
||||||
* PLGNTLS means PLUGIN TOOLS
|
* 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
|
class PLGNTLS_class
|
||||||
@@ -54,17 +91,9 @@ class PLGNTLS_class
|
|||||||
if (!is_array($vars))
|
if (!is_array($vars))
|
||||||
$vars = array();
|
$vars = array();
|
||||||
if (!is_null($scripts_arr))
|
if (!is_null($scripts_arr))
|
||||||
{
|
$this->add_fetch($scripts_arr, $vars);
|
||||||
// add fetch script at beginning of scripts list
|
|
||||||
array_unshift($scripts_arr, "utils/plgntls_fetch.js");
|
array_push($this->_scripts_modules, 'PLGNTLS_example_menu_js', 'PLGNTLS_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);
|
|
||||||
}
|
|
||||||
|
|
||||||
$scripts = array();
|
$scripts = array();
|
||||||
foreach($scripts_arr as $key => $script_name) {
|
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
|
* uncomment to print all enqueued scripts, can be usefull
|
||||||
|
*/
|
||||||
global $wp_scripts;
|
global $wp_scripts;
|
||||||
error_log("wp_scripts->queue:");
|
error_log("wp_scripts->queue:");
|
||||||
error_log(json_encode($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() {
|
private function make_scripts_modules() {
|
||||||
// https://developer.wordpress.org/reference/hooks/wp_script_attributes/
|
// https://developer.wordpress.org/reference/hooks/wp_script_attributes/
|
||||||
// https://wordpress.stackexchange.com/questions/66843/attach-a-private-function-at-a-hook
|
// 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) {
|
private function add_type_module($attr) {
|
||||||
if (empty($attr['id']))
|
if (empty($attr['id']))
|
||||||
return $attr;
|
return $attr;
|
||||||
if ($attr['id'] === 'PLGNTLS_plgntls_fetch_js-js') {
|
foreach($this->_scripts_modules as $script){
|
||||||
$attr['type'] = 'module';
|
if ($attr['id'] === $script.'-js') {
|
||||||
|
$attr['type'] = 'module';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return $attr;
|
return $attr;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user