pro/2024_WEBSITE_fipf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

now we can add attributes to js files using the tools class

Browse Source
This commit is contained in:
asus
2024-02-27 15:23:07 +01:00
parent 7a8c0750c5
commit 2ce603e644
8 changed files with 217 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/fipfcard_plugin/html/menu/example_menu.html
View File

@@ -1,2 +1,5 @@
<input type='text' id='mytext'>
<button id='mybutton'>send</button>
<input type='text' id='mytext_2'>
<button id='mybutton_2'>send</button>

29
plugins/fipfcard_plugin/js/menu/example_menu.js
View File

@@ -1,29 +1,4 @@
import {PLGNTLS_fetch} from '../../utils/plgntls_fetch.js';
const inputElement = document.getElementById('mytext');
const sendButton = document.getElementById('mybutton');
sendButton.addEventListener('click', () => {
let inputValue = inputElement.value;
inputValue = {
key1: 'value1',
key2: 'value2'
};
inputValue = JSON.stringify(inputValue);
console.log("inputValue:");
console.log(inputValue);
PLGNTLS_fetch('/plgntls/get_data', {
method: "POST",
})
//PLGNTLS_fetch('get_data', {body: {inputValue}})
.then((response) => response.json())
.then((data) => {
console.log("dataaa: ");
console.log(data);
})
.catch((error) => {
console.log("error: ");
console.log(error);
});
});
import { test_fetch } from './example_submenu.js';
test_fetch();

29
plugins/fipfcard_plugin/js/menu/example_menu_2.js Normal file
View File

@@ -0,0 +1,29 @@
const inputElement2 = document.getElementById('mytext_2');
const sendButton2 = document.getElementById('mybutton_2');
sendButton2.addEventListener('click', () => {
let inputValue = inputElement2.value;
inputValue = {
key1: 'value1',
key2: 'value2'
};
inputValue = JSON.stringify(inputValue);
console.log("inputValue:");
console.log(inputValue);
PLGNTLS_fetch('/plgntls/get_data', {
method: "POST",
})
//PLGNTLS_fetch('get_data', {body: {inputValue}})
.then((response) => response.json())
.then((data) => {
console.log("dataaa: ");
console.log(data);
})
.catch((error) => {
console.log("error: ");
console.log(error);
});
});

33
plugins/fipfcard_plugin/js/menu/example_submenu.js Normal file
View File

@@ -0,0 +1,33 @@
import { PLGNTLS_fetch } from '../../utils/plgntls_fetch.js';
export function test_fetch() {
const inputElement = document.getElementById('mytext');
const sendButton = document.getElementById('mybutton');
sendButton.addEventListener('click', () => {
let inputValue = inputElement.value;
inputValue = {
key1: 'value1',
key2: 'value2'
};
inputValue = JSON.stringify(inputValue);
console.log("inputValue:");
console.log(inputValue);
PLGNTLS_fetch('/plgntls/get_data', {
method: "POST",
})
//PLGNTLS_fetch('get_data', {body: {inputValue}})
.then((response) => response.json())
.then((data) => {
console.log("dataaa: ");
console.log(data);
})
.catch((error) => {
console.log("error: ");
console.log(error);
});
});
}

7
plugins/fipfcard_plugin/php/menu/example_menu.php
View File

@@ -11,7 +11,8 @@ function fipfcard_plugin_content() {
$fipfcard = new PLGNTLS_class();
echo $fipfcard->add_to_front( array(
"js/menu/example_menu.js",
array("js/menu/example_menu.js", 'type'=>'module'),
"js/menu/example_menu_2.js",
"html/menu/example_menu.html",
));
}
@@ -27,7 +28,7 @@ ajax
- to access the content of the data object properties of the ajax call :
use $_POST['property_name']
*/
function fipfcard_ajax_handler()
function fipfcard_menu_fetch_handler()
{
return new WP_REST_Response('hello', 200);
}
@@ -35,7 +36,7 @@ function fipfcard_menu_endpoint()
{
register_rest_route('plgntls', '/get_data', array(
'methods' => 'POST',
'callback' => 'fipfcard_ajax_handler',
'callback' => 'fipfcard_menu_fetch_handler',
));
};
add_action('rest_api_init', 'fipfcard_menu_endpoint');

5
plugins/fipfcard_plugin/php/paypal/paypal.php
View File

@@ -59,7 +59,8 @@ function fipf_paypal_shortcode_content()
// 'js/paypal/result_message.js',
// 'js/paypal/create_order.js',
// 'js/paypal/on_approve.js',
"js/paypal/paypal.js",
//"js/paypal/paypal.js",
array("js/paypal/paypal.js", 'type'=>'module'),
"html/paypal/paypal.html",
),
);
@@ -71,7 +72,6 @@ function fipf_paypal_shortcode_content()
/**
* the js file paypal.js needs to be imported as a module to use import
* @see https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
function fipf_add_id_to_script( $tag, $handle, $src ) {
if ( $handle === 'PLGNTLS_paypal_js' ) {
$tag = '<script type="module" src="' . esc_url( $src ) . '" ></script>';
@@ -79,6 +79,7 @@ function fipf_add_id_to_script( $tag, $handle, $src ) {
return $tag;
}
add_filter( 'script_loader_tag', 'fipf_add_id_to_script', 10, 3 );
*/
// handling routes and endpoints

207
plugins/fipfcard_plugin/utils/plgntls_class.php
View File

@@ -56,6 +56,7 @@ class PLGNTLS_class
private $_js_dependencies;
private $_css_dependencies;
private $_scripts_modules;
private $_scripts_attributes;
/**
*/
@@ -65,6 +66,7 @@ class PLGNTLS_class
$this->_js_dependencies = array();
$this->_css_dependencies = array();
$this->_scripts_modules = array();
$this->_scripts_attributes = array();
}
/**
@@ -87,24 +89,26 @@ class PLGNTLS_class
}
public function add_to_front($scripts_arr = null, $vars = null) {
public function add_to_front($srcs_arr = null, $vars = null) {
if (!is_array($vars))
$vars = array();
if (!is_null($scripts_arr))
$this->add_fetch($scripts_arr, $vars);
if (!is_null($srcs_arr))
$this->add_fetch($srcs_arr, $vars);
array_push($this->_scripts_modules, 'PLGNTLS_example_menu_js', 'PLGNTLS_plgntls_fetch_js');
$scripts = array();
foreach($scripts_arr as $key => $script_name) {
$scripts[] = $this->init_script($key, $script_name);
$srcs = array();
foreach($srcs_arr as $src_key => $src_value) {
$init = $this->init_src($src_key, $src_value);
if ($init !== null)
$srcs[] = $init;
}
if (!is_null($scripts_arr))
$this->add_scripts_to_front($scripts);
if (!is_null($srcs_arr))
$this->add_srcs_to_front($srcs);
if (!is_null($vars))
$this->add_vars_to_front($vars);
return $this->create_html($scripts, $vars);
return $this->create_html($srcs, $vars);
}
@@ -127,9 +131,18 @@ class PLGNTLS_class
private function add_fetch(&$scripts_arr, &$vars) {
/**
* for fetch, we add the file script that contains the fetch function
* it is an es6 module with the export keyword
* that way, it can also be used by modules scripts
* to achieve that, we wouldn't need to include it here though
* but we need that the fetch function is also available for inline scripts
* so we could attach a copy of the script file without the export keyword
* but instead, inside the file, we add the fetch function to the global scope
*/
private function add_fetch(&$srcs_arr, &$vars) {
// add fetch script at beginning of scripts list
array_unshift($scripts_arr, "utils/plgntls_fetch.js");
array_unshift($srcs_arr, array("utils/plgntls_fetch.js", 'type'=>'module'));
// 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/
@@ -214,75 +227,86 @@ class PLGNTLS_class
* - to add ajax script and variables
* - default to true
*/
private function add_scripts_to_front($scripts_arr) {
private function add_srcs_to_front($srcs_arr) {
//wp_enqueue_script(<give_it_a_name>, /url/to/script, [depends on], version, defer? );
//wp_enqueue_style( <give_it_a_name>, /url/to/script, [depends on], version, media );
$previous_css_basename = '';
$previous_js_basename = '';
foreach ($scripts_arr as $script) {
if (in_array($script->ext, array("js", "url"))) {
if (is_null($this->_first_script))
$this->_first_script = $script->handle;
$depends_on = $this->check_dependencies($script, $previous_js_basename);
if ($depends_on !== null)
wp_enqueue_script( $script->handle, $script->url, $depends_on, $script->version, true);
$previous_js_basename = $script->handle;
foreach ($srcs_arr as $src) {
if (in_array($src->ext, array("js", "url"))) {
$this->add_script($src, $previous_js_basename);
$previous_js_basename = $src->handle;
}
else if ($script->ext === "css") {
$depends_on = $this->check_dependencies($script, $previous_css_basename);
if ($depends_on !== null)
wp_enqueue_style( $script->handle, $script->url, $depends_on, $script->version, '');
$previous_css_basename = $script->handle;
else if ($src->ext === "css") {
$this->add_style($src, $previous_css_basename);
$previous_css_basename = $src->handle;
}
}
$this->make_scripts_modules();
/*
* uncomment to print all enqueued scripts, can be usefull
*/
global $wp_scripts;
error_log("wp_scripts->queue:");
error_log(json_encode($wp_scripts->queue));
}
// 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($attr)=>$this->add_type_module($attr), 10, 1 );
/*
* uncomment to print all enqueued scripts, can be usefull
global $wp_scripts;
error_log("wp_scripts->queue:");
error_log(json_encode($wp_scripts->queue));
*/
}
private function add_script($script, $previous_js_basename) {
if (is_null($this->_first_script))
$this->_first_script = $script->handle;
$depends_on = $this->check_dependencies($script, $previous_js_basename);
if ($depends_on !== null)
wp_enqueue_script( $script->handle, $script->url, $depends_on, $script->version, true);
}
private function add_style($style, $previous_css_basename) {
$depends_on = $this->check_dependencies($style, $previous_css_basename);
if ($depends_on !== null)
wp_enqueue_style( $style->handle, $style->url, $depends_on, $style->version, '');
}
private function add_type_module($attr) {
if (empty($attr['id']))
return $attr;
foreach($this->_scripts_modules as $script){
if ($attr['id'] === $script.'-js') {
$attr['type'] = 'module';
}
$handle = $attr['id'];
if (isset($this->_scripts_attributes[$handle]))
$script = $this->_scripts_attributes[$handle];
else
return $attr;
foreach($script as $key => $value){
$attr[$key] = $value;
}
unset($this->_scripts_attributes[$handle]);
return $attr;
}
private function check_dependencies(&$script, $previous_basename)
private function check_dependencies(&$src, $previous_basename)
{
if (in_array($script->ext, array("js", "url")))
if (in_array($src->ext, array("js", "url")))
{
global $wp_scripts;
$already_enqueued = array_search($script->handle, $wp_scripts->queue);
$already_enqueued = array_search($src->handle, $wp_scripts->queue);
if ($already_enqueued !== false)
return null;
}
else if ($script->ext === "css")
{
global $wp_styles;
$already_enqueued = array_search($script->handle, $wp_styles->queue);
$already_enqueued = array_search($src->handle, $wp_styles->queue);
if ($already_enqueued !== false)
return null;
}
$depends_on = array();
if (isset($script->depends) && $script->depends !== '')
$depends_on[] = $script->depends;
if (isset($src->depends) && $src->depends !== '')
$depends_on[] = $src->depends;
if (isset($previous_basename) && $previous_basename !== '')
$depends_on[] = $previous_basename;
@@ -294,48 +318,83 @@ class PLGNTLS_class
* - from js/ root for .js files
* - from css/ root for .css files
* @return object / null :
* - null if file is not js or css
* - null if file is not valid
* - or an object with all the necessary infos :
* - ext : name.js -> "js"
* - basename : name.js -> "name"
* - handle : name.js -> "name_js"
* - url : url to file in wordpress
* - path : path to file in server
* - version : used to avoid browser caching
* - depends : string if depends on a handle, or ''
* 0. src : array("name.js", ...) -> "name.js"
* "name.js" -> "name.js"
* 1. ext : name.js -> "js"
* 2. basename : name.js -> "name"
* 3. handle : name.js -> "name_js"
* 4. url : url to file in wordpress
* 5. path : path to file in server
* 6. version : used to avoid browser caching
* 7. depends : string if depends on a handle, or ''
* 8. attr : associative array of html attribute like 'type'=>'module'
*/
private function init_script($key, $script_name) {
$script = (object)[];
private function init_src($key, $value) {
if (empty($value))
return null;
$src = (object)[];
if(filter_var($script_name, FILTER_VALIDATE_URL))
$script->ext = "url";
// 0. src
// 8. attr
if (is_array($value)){
$src->src = array_shift($value);
$src->attr = $value;
}
else
$script->ext = pathinfo($script_name, PATHINFO_EXTENSION);
if (! in_array($script->ext, array("js", "css", "html", "url")))
{
$src->src = $value;
$src->attr = null;
}
// 1. ext
if(filter_var($src->src, FILTER_VALIDATE_URL))
$src->ext = "url";
else
$src->ext = pathinfo($src->src, PATHINFO_EXTENSION);
if (! in_array($src->ext, array("js", "css", "html", "url")))
return null;
if ($script->ext === "url")
$script->basename = parse_url($script_name, PHP_URL_HOST);
// 2. basename
// 3. handle
// basename handle
// https://www.url.com/route -> www.url.com/route -> www_url_com_route
// path/to/script.js -> script.js -> script_js
if ($src->ext === "url")
{
$url = parse_url($src->src);
$src->basename = $url['host'] . $url['path'];
}
else
$script->basename = pathinfo($script_name, PATHINFO_BASENAME);
$script->handle = "PLGNTLS_" . str_replace(".", "_", $script->basename);
$src->basename = pathinfo($src->src, PATHINFO_BASENAME);
$src->handle = "PLGNTLS_" . str_replace(array('.', '/'), "_", $src->basename);
if ($script->ext === "url") {
$script->url = $script_name;
$script->path = null;
$script->version = null;
// 4. url
// 5. path
// 6. version
if ($src->ext === "url") {
$src->url = $src->src;
$src->path = null;
$src->version = null;
}
else {
$script->url = $this->get_url().$script_name;
$script->path = $this->get_path().$script_name;
$script->version = date("ymd-Gis", filemtime($script->path));
$src->url = $this->get_url().$src->src;
$src->path = $this->get_path().$src->src;
$src->version = date("ymd-Gis", filemtime($src->path));
}
$script->depends = '';
// 7. depends
$src->depends = '';
if (is_string($key))
$script->depends = $key;
$src->depends = $key;
return $script;
// also add to global variable to access in 'wp_script_attributes' filter
if ($src->attr !== null) {
$this->_scripts_attributes[$src->handle.'-js'] = $src->attr;
}
return $src;
}

11
plugins/fipfcard_plugin/utils/plgntls_fetch.js
View File

@@ -1,5 +1,7 @@
//function PLGNTLS_fetch(url, options = {}) {
/**
* this file is there for scripts that uses modules import
*/
export function PLGNTLS_fetch(url, options = {}) {
console.log("inside PLGNTLS_fetch");
url = PLGNTLS_data.fetch_url + url;
@@ -11,3 +13,10 @@ export function PLGNTLS_fetch(url, options = {}) {
return fetch(url, options);
}
/**
* For non-module scripts, attach to the global scope
*/
if (typeof window !== 'undefined') {
window.PLGNTLS_fetch = PLGNTLS_fetch;
}