updated plgntls :

- renamed PLGNTLS_class -> Plgntls
- changed method 'add_to_front()' to static method
- moved fetch script as inline script, so the plgntls file is single
- improved the way inline script and styles are added
This commit is contained in:
asus
2024-03-29 21:56:12 +01:00
parent 42e8cbc4e9
commit ade0be87ce
41 changed files with 457 additions and 421 deletions

View File

@@ -12,7 +12,7 @@ if (!defined('ABSPATH')) {
* include those two lines at the top of the main plugin file
*
* include_once( plugin_dir_path(__FILE__) . '/php/utils/plugin_tools.php');
* PLGNTLS_class::set_root_dir( plugin_dir_path(__FILE__), plugin_dir_url(__FILE__) );
* Plgntls::set_root_dir( plugin_dir_path(__FILE__), plugin_dir_url(__FILE__) );
*
* PLGNTLS means PLUGIN TOOLS
*
@@ -22,11 +22,10 @@ if (!defined('ABSPATH')) {
*
* 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(
* return Plgntls::add_to_front(
* array( // files added in order by types
* 'path/to/style1.css', //
* 'path/to/script1.js', //
@@ -54,7 +53,7 @@ if (!defined('ABSPATH')) {
*
*/
class PLGNTLS_class {
class Plgntls {
/*
* const declarations
*
@@ -284,26 +283,9 @@ vous allez être redirigés vers votre espace',
}
public function add_to_front($srcs_arr = array(), $vars = array()) {
/*
* event if the function is called with no srcs
* add fetch, because it can be used just for that
*/
$this->add_fetch($srcs_arr, $vars);
$this->add_default_css($srcs_arr, $vars);
$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($srcs_arr))
$this->add_srcs_to_front($srcs);
if (!is_null($vars))
$this->add_vars_to_front($vars);
return $this->create_html($srcs, $vars);
public static function add_to_front($srcs_arr = array(), $vars = array()) {
$instance = new self();
return $instance->_add_to_front($srcs_arr, $vars);
}
@@ -325,19 +307,40 @@ vous allez être redirigés vers votre espace',
private function _add_to_front($srcs_arr, $vars) {
/*
* event if the function is called with no srcs
* add fetch, because it can be used just for that
*/
$this->_add_fetch($srcs_arr, $vars);
$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($srcs_arr))
$this->_add_srcs_to_front($srcs);
if (!is_null($vars))
$this->_add_vars_to_front($vars);
return $this->_create_html($srcs, $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
* for fetch, we add the script that contains the fetch function
* it's an inline script, but is made globally available by adding it to window
*
*/
private function add_fetch(&$srcs_arr, &$vars) {
// add fetch script at beginning of scripts list
array_unshift($srcs_arr, array(self::$_file_dir_path."/plgntls_fetch.js", 'type'=>'module'));
private function _add_fetch(&$srcs_arr, &$vars) {
// add fetch script at end of scripts list
// it will try to be added at the first script anyway,
// but for that, the scripts must be already enqueued,
// hence adding it at the end of the array
$srcs_arr[] = array('js'=>$this->_fetch_script());
// 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/
@@ -346,16 +349,26 @@ vous allez être redirigés vers votre espace',
$vars = array_merge($vars, $fetch_nonce);
$vars = array_merge($vars, $fetch_url);
}
private function _fetch_script() {
return "
if (typeof window !== 'undefined') {
window.PLGNTLS_fetch = function PLGNTLS_fetch(url, options = {}) {
url = PLGNTLS_data.fetch_url + url;
private function add_default_css(&$srcs_arr, &$vars) {
// add default css file at beginning of style list
array_unshift($srcs_arr, self::$_file_dir_path."/plgntls_default.css");
options.headers = options.headers || {};
options.headers['X-WP-Nonce'] = PLGNTLS_data.fetch_nonce;
return fetch(url, options);
}
}
";
}
/*
* @param two arguments :
* 1. html files to include in front
@@ -366,8 +379,8 @@ vous allez être redirigés vers votre espace',
* 2. list of variables to make available to this files
* - in the form of key => val
* - recommanded to do it with compact()
* ex: create_html( "file.html", compact("var1","var2",) );
* ex: create_html( array("file1.html", "file2.html"), array("var1"=>"value") );
* ex: _create_html( "file.html", compact("var1","var2",) );
* ex: _create_html( array("file1.html", "file2.html"), array("var1"=>"value") );
* @return a string of html code
*
* using ob_start() and ob_get_clean()
@@ -376,7 +389,7 @@ vous allez être redirigés vers votre espace',
*
* https://stackoverflow.com/a/4402045/9497573
*/
private function create_html($files = null, $vars = null) {
private function _create_html($files = null, $vars = null) {
if (is_null($files))
return null;
$plgn_dir = $this->root_path();
@@ -405,7 +418,7 @@ vous allez être redirigés vers votre espace',
* this name is the filename + "_" + extension :
* init.js -> init_js
*/
private function add_vars_to_front($vars_arr) {
private function _add_vars_to_front($vars_arr) {
if (is_null($this->_first_script))
return ;
if (is_null($vars_arr))
@@ -422,40 +435,40 @@ vous allez être redirigés vers votre espace',
wp_add_inline_script($handle, $front, 'before');
}
/**
* @param array : list of files :
* - with their path from root of their type of file (ex: from js/ to .js files)
* - and with their extension
* @param boolean
* - to add ajax script and variables
* - default to true
*/
private function add_srcs_to_front($srcs_arr) {
/*
* @param array : list of files :
* - with their path from root of their type of file (ex: from js/ to .js files)
* - and with their extension
* @param boolean
* - to add ajax script and variables
* - default to true
*/
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 ($srcs_arr as $src) {
if ($src->inline !== null) {
if ($src->inline === "js")
$this->add_inline_script($src);
else if ($src->inline === "css")
$this->add_inline_style($src);
if ($src->inline === "js") {
$this->_add_inline_script($src);
}
else if ($src->inline === "css") {
$this->_add_inline_style($src);
}
else if (in_array($src->ext, array("js", "url"))) {
$this->add_script($src, $previous_js_basename);
$this->_add_script($src, $previous_js_basename);
$previous_js_basename = $src->handle;
}
else if ($src->ext === "css") {
$this->add_style($src, $previous_css_basename);
$this->_add_style($src, $previous_css_basename);
$previous_css_basename = $src->handle;
}
}
// 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_attributes_to_script($attr), 10, 1 );
add_filter( 'wp_script_attributes', fn($attr)=>$this->_add_attributes_to_script($attr), 10, 1 );
/*
* uncomment to print all enqueued files, can be usefull
@@ -469,42 +482,58 @@ vous allez être redirigés vers votre espace',
error_log(json_encode($wp_styles->queue));
*/
}
private function add_script($script, $previous_js_basename) {
if (is_null($this->_first_script))
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)
}
$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) {
if (is_null($this->_first_style))
private function _add_style($style, $previous_css_basename) {
if (is_null($this->_first_style)) {
$this->_first_style = $style->handle;
$depends_on = $this->check_dependencies($style, $previous_css_basename);
if ($depends_on !== null)
}
$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_inline_script($src) {
$handle = $src->depends;
if ($handle === null || empty($handle))
$handle = $this->_first_script;
wp_add_inline_script($handle, $src->src, 'before');
private function _add_inline_script($src) {
$handle = $this->_check_inline_handles($src);
if (!is_null($handle)) {
wp_add_inline_script($handle, $src->src, 'before');
}
else {
// in last ressort, only add the script inline, it's not ideal,
// but the only situation where it should not work is if another script is loaded before
// and it should not be the case otherwise the handle would not have returned true
echo '<script>'.$src->src.'</script>';
}
}
private function add_inline_style($src) {
$handle = $src->depends;
if ($handle === null || empty($handle))
$handle = $this->_first_style;
wp_add_inline_style($handle, $src->src);
private function _add_inline_style($src) {
$handle = $this->_check_inline_handles($src);
if (!is_null($handle)) {
wp_add_inline_style($handle, $src->src);
}
else {
// in last ressort, cf script notes above
echo '<style>'.$src->src.'</style>';
}
}
private function add_attributes_to_script($attr) {
if (empty($attr['id']))
private function _add_attributes_to_script($attr) {
if (empty($attr['id'])) {
return $attr;
}
$handle = $attr['id'];
if (isset($this->_scripts_attributes[$handle]))
if (isset($this->_scripts_attributes[$handle])) {
$script = $this->_scripts_attributes[$handle];
else
}
else {
return $attr;
}
foreach($script as $key => $value){
$attr[$key] = $value;
@@ -514,53 +543,105 @@ vous allez être redirigés vers votre espace',
return $attr;
}
private function check_dependencies(&$src, $previous_basename)
{
if (in_array($src->ext, array("js", "url")))
{
private function _check_dependencies(&$src, $previous_basename) {
if (in_array($src->ext, array("js", "url"))) {
global $wp_scripts;
$already_enqueued = array_search($src->handle, $wp_scripts->queue);
if ($already_enqueued !== false)
if ($already_enqueued !== false) {
return null;
}
}
else if ($src->ext === "css")
{
else if ($src->ext === "css") {
global $wp_styles;
$already_enqueued = array_search($src->handle, $wp_styles->queue);
if ($already_enqueued !== false)
if ($already_enqueued !== false) {
return null;
}
}
$depends_on = array();
if (isset($src->depends) && $src->depends !== '')
if (isset($src->depends) && $src->depends !== '') {
$depends_on[] = $src->depends;
if (isset($previous_basename) && $previous_basename !== '')
}
if (isset($previous_basename) && $previous_basename !== '') {
$depends_on[] = $previous_basename;
}
return $depends_on;
}
/**
* @param string : name of the file, with its path from its extension directory
* - from js/ root for .js files
* - from css/ root for .css files
* @return object / null :
* - null if file is not valid
* - or an object with all the necessary infos :
* 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'
* 9. inline : array("js" => "name.js") -> js
* array("css" => "name.css") -> css
*/
private function init_src($key, $value) {
private function _check_inline_handles(&$src) {
/*
* first, try to simply get the explicit dependency
*
*/
$handle = $src->depends;
if (!empty($handle) && !is_null($handle)) {
return $handle;
}
/*
* second, try to get the first enqueued src of this call to 'add_to_front()'
* and make it the dependency
*
*/
if ($src->inline === "js") {
$handle = $this->_first_script;
}
else if ($src->inline === "css") {
$handle = $this->_first_style;
}
if (!empty($handle) && !is_null($handle)) {
return $handle;
}
/*
* third, try to get the last enqueued src of the page
* https://www.php.net/manual/en/function.array-key-last.php
*
*/
if ($src->inline === "js") {
global $wp_scripts;
$array = $wp_scripts->queue;
}
else if ($src->inline === "css") {
global $wp_styles;
$array = $wp_styles->queue;
}
$last_key = array_key_last($array);
if (!is_null($last_key)) {
return $array[$last_key];
}
/*
* didn't find any handle to add the src to it
*
*/
return null;
}
/*
* @param string : name of the file, with its path from its extension directory
* - from js/ root for .js files
* - from css/ root for .css files
* @return object / null :
* - null if file is not valid
* - or an object with all the necessary infos :
* 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'
* 9. inline : array("js" => "name.js") -> js
* array("css" => "name.css") -> css
*/
private function _init_src($key, $value) {
if (empty($value))
return null;
$src = (object)[