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:
@@ -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)[
|
||||
|
||||
Reference in New Issue
Block a user