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

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