| 1 |
<?php |
| 2 |
/** |
| 3 |
* Preloader Extension. |
| 4 |
* |
| 5 |
* @package Easyel\EasyElements\Extensions\Preloader |
| 6 |
*/ |
| 7 |
|
| 8 |
namespace Easyel\EasyElements\Extensions\Preloader; |
| 9 |
|
| 10 |
if ( ! defined( 'ABSPATH' ) ) { |
| 11 |
exit; |
| 12 |
} |
| 13 |
|
| 14 |
/** |
| 15 |
* Preloader extension class. |
| 16 |
*/ |
| 17 |
class EasyelPreloader { |
| 18 |
|
| 19 |
/** |
| 20 |
* Singleton instance. |
| 21 |
* |
| 22 |
* @var EasyelPreloader|null |
| 23 |
*/ |
| 24 |
private static $instance = null; |
| 25 |
|
| 26 |
/** |
| 27 |
* Whether preloader HTML has been printed already. |
| 28 |
* |
| 29 |
* @var bool |
| 30 |
*/ |
| 31 |
private $rendered = false; |
| 32 |
|
| 33 |
/** |
| 34 |
* Constructor. |
| 35 |
*/ |
| 36 |
private function __construct() { |
| 37 |
|
| 38 |
$tab_slug = 'extensions'; |
| 39 |
$extensions_settings = get_option( 'easy_element_' . $tab_slug, array() ); |
| 40 |
|
| 41 |
$enabled = isset( $extensions_settings['enable_preloader'] ) ? (int) $extensions_settings['enable_preloader'] : 0; |
| 42 |
|
| 43 |
if ( 1 !== $enabled ) { |
| 44 |
return; |
| 45 |
} |
| 46 |
|
| 47 |
if ( is_admin() ) { |
| 48 |
return; |
| 49 |
} |
| 50 |
|
| 51 |
add_action( 'wp_body_open', array( $this, 'render_preloader_html' ), 1 ); |
| 52 |
add_action( 'wp_footer', array( $this, 'render_preloader_html_fallback' ), 1 ); |
| 53 |
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); |
| 54 |
} |
| 55 |
|
| 56 |
/** |
| 57 |
* Get singleton instance. |
| 58 |
* |
| 59 |
* @return EasyelPreloader |
| 60 |
*/ |
| 61 |
public static function get_instance() { |
| 62 |
if ( null === self::$instance ) { |
| 63 |
self::$instance = new self(); |
| 64 |
} |
| 65 |
return self::$instance; |
| 66 |
} |
| 67 |
|
| 68 |
/** |
| 69 |
* Get sanitized settings merged with defaults. |
| 70 |
* |
| 71 |
* @return array |
| 72 |
*/ |
| 73 |
private function get_settings() { |
| 74 |
|
| 75 |
$defaults = array( |
| 76 |
'preloader_style' => 'circle', |
| 77 |
'preloader_bg_color' => '#ffffff', |
| 78 |
'preloader_color' => '#5933ff', |
| 79 |
'preloader_secondary_color' => '#e0e0e0', |
| 80 |
'preloader_size' => 60, |
| 81 |
'preloader_speed' => 1.0, |
| 82 |
'preloader_min_time' => 500, |
| 83 |
'preloader_fadeout_time' => 600, |
| 84 |
'preloader_logo' => '', |
| 85 |
'preloader_logo_width' => 36, |
| 86 |
'preloader_logo_height' => 36, |
| 87 |
'preloader_disable_mobile' => 0, |
| 88 |
); |
| 89 |
|
| 90 |
$saved = get_option( 'easyel_preloader_settings', array() ); |
| 91 |
|
| 92 |
if ( ! is_array( $saved ) ) { |
| 93 |
$saved = array(); |
| 94 |
} |
| 95 |
|
| 96 |
return wp_parse_args( $saved, $defaults ); |
| 97 |
} |
| 98 |
|
| 99 |
/** |
| 100 |
* Enqueue CSS/JS and inline dynamic styles. |
| 101 |
*/ |
| 102 |
public function enqueue_scripts() { |
| 103 |
|
| 104 |
$settings = $this->get_settings(); |
| 105 |
|
| 106 |
if ( ! empty( $settings['preloader_disable_mobile'] ) && wp_is_mobile() ) { |
| 107 |
return; |
| 108 |
} |
| 109 |
|
| 110 |
wp_enqueue_style( |
| 111 |
'easyel-preloader', |
| 112 |
EASYELEMENTS_DIR_URL . 'includes/Extensions/Preloader/assets/css/preloader.css', |
| 113 |
array(), |
| 114 |
EASYELEMENTS_VER |
| 115 |
); |
| 116 |
|
| 117 |
$bg = sanitize_hex_color( $settings['preloader_bg_color'] ); |
| 118 |
if ( ! $bg ) { |
| 119 |
$bg = '#ffffff'; |
| 120 |
} |
| 121 |
|
| 122 |
$color = sanitize_hex_color( $settings['preloader_color'] ); |
| 123 |
if ( ! $color ) { |
| 124 |
$color = '#5933ff'; |
| 125 |
} |
| 126 |
|
| 127 |
$sec_color = sanitize_hex_color( $settings['preloader_secondary_color'] ); |
| 128 |
if ( ! $sec_color ) { |
| 129 |
$sec_color = '#e0e0e0'; |
| 130 |
} |
| 131 |
|
| 132 |
$size = absint( $settings['preloader_size'] ); |
| 133 |
$size = $size > 0 ? $size : 60; |
| 134 |
|
| 135 |
$speed = (float) $settings['preloader_speed']; |
| 136 |
$speed = $speed > 0 ? $speed : 1.0; |
| 137 |
|
| 138 |
$fadeout = absint( $settings['preloader_fadeout_time'] ); |
| 139 |
|
| 140 |
$custom_css = '.easyel-preloader{'; |
| 141 |
$custom_css .= '--easyel-preloader-bg:' . $bg . ';'; |
| 142 |
$custom_css .= '--easyel-preloader-color:' . $color . ';'; |
| 143 |
$custom_css .= '--easyel-preloader-secondary:' . $sec_color . ';'; |
| 144 |
$custom_css .= '--easyel-preloader-size:' . $size . 'px;'; |
| 145 |
$custom_css .= '--easyel-preloader-speed:' . $speed . 's;'; |
| 146 |
$custom_css .= '--easyel-preloader-fadeout:' . $fadeout . 'ms;'; |
| 147 |
$custom_css .= '}'; |
| 148 |
|
| 149 |
wp_add_inline_style( 'easyel-preloader', $custom_css ); |
| 150 |
|
| 151 |
wp_enqueue_script( |
| 152 |
'easyel-preloader', |
| 153 |
EASYELEMENTS_DIR_URL . 'includes/Extensions/Preloader/assets/js/preloader.js', |
| 154 |
array( 'jquery' ), |
| 155 |
EASYELEMENTS_VER, |
| 156 |
true |
| 157 |
); |
| 158 |
|
| 159 |
wp_localize_script( |
| 160 |
'easyel-preloader', |
| 161 |
'easyelPreloaderData', |
| 162 |
array( |
| 163 |
'minTime' => absint( $settings['preloader_min_time'] ), |
| 164 |
'fadeoutTime' => $fadeout, |
| 165 |
) |
| 166 |
); |
| 167 |
} |
| 168 |
|
| 169 |
/** |
| 170 |
* Render preloader HTML markup. |
| 171 |
*/ |
| 172 |
public function render_preloader_html() { |
| 173 |
|
| 174 |
if ( $this->rendered ) { |
| 175 |
return; |
| 176 |
} |
| 177 |
|
| 178 |
$settings = $this->get_settings(); |
| 179 |
|
| 180 |
if ( ! empty( $settings['preloader_disable_mobile'] ) && wp_is_mobile() ) { |
| 181 |
$this->rendered = true; |
| 182 |
return; |
| 183 |
} |
| 184 |
|
| 185 |
$allowed_styles = array( 'circle', 'dotted_circle', 'dots', 'bars', 'pulse', 'custom_logo' ); |
| 186 |
$style = isset( $settings['preloader_style'] ) ? sanitize_key( $settings['preloader_style'] ) : 'circle'; |
| 187 |
|
| 188 |
if ( ! in_array( $style, $allowed_styles, true ) ) { |
| 189 |
$style = 'circle'; |
| 190 |
} |
| 191 |
|
| 192 |
$logo = isset( $settings['preloader_logo'] ) ? esc_url( $settings['preloader_logo'] ) : ''; |
| 193 |
|
| 194 |
$inner = ''; |
| 195 |
|
| 196 |
$inner .= '<div class="easyel-preloader-spinner">'; |
| 197 |
|
| 198 |
switch ( $style ) { |
| 199 |
case 'dots': |
| 200 |
$inner .= '<span class="easyel-preloader-dot"></span>'; |
| 201 |
$inner .= '<span class="easyel-preloader-dot"></span>'; |
| 202 |
$inner .= '<span class="easyel-preloader-dot"></span>'; |
| 203 |
break; |
| 204 |
|
| 205 |
case 'bars': |
| 206 |
$inner .= '<span class="easyel-preloader-bar"></span>'; |
| 207 |
$inner .= '<span class="easyel-preloader-bar"></span>'; |
| 208 |
$inner .= '<span class="easyel-preloader-bar"></span>'; |
| 209 |
$inner .= '<span class="easyel-preloader-bar"></span>'; |
| 210 |
break; |
| 211 |
|
| 212 |
case 'pulse': |
| 213 |
$inner .= '<span class="easyel-preloader-pulse"></span>'; |
| 214 |
break; |
| 215 |
|
| 216 |
case 'dotted_circle': |
| 217 |
$inner .= '<span class="easyel-preloader-dotted-circle">'; |
| 218 |
$inner .= '<div></div><div></div><div></div><div></div>'; |
| 219 |
$inner .= '<div></div><div></div><div></div><div></div>'; |
| 220 |
$inner .= '</span>'; |
| 221 |
break; |
| 222 |
|
| 223 |
case 'custom_logo': |
| 224 |
$inner .= '<span class="easyel-preloader-logo-ring"></span>'; |
| 225 |
if ( ! empty( $logo ) ) { |
| 226 |
$logo_w = absint( $settings['preloader_logo_width'] ); |
| 227 |
$logo_w = $logo_w > 0 ? $logo_w : 36; |
| 228 |
$logo_h = absint( $settings['preloader_logo_height'] ); |
| 229 |
$logo_h = $logo_h > 0 ? $logo_h : 36; |
| 230 |
$inner .= '<img class="easyel-preloader-logo-img" src="' . $logo . '" alt=""' |
| 231 |
. ' style="width:' . $logo_w . 'px;height:' . $logo_h . 'px;">'; |
| 232 |
} |
| 233 |
break; |
| 234 |
|
| 235 |
case 'circle': |
| 236 |
default: |
| 237 |
$inner .= '<span class="easyel-preloader-circle"></span>'; |
| 238 |
break; |
| 239 |
} |
| 240 |
|
| 241 |
$inner .= '</div>'; |
| 242 |
|
| 243 |
$html = '<div class="easyel-preloader easyel-preloader-style-' . esc_attr( $style ) . '" aria-hidden="true">'; |
| 244 |
$html .= $inner; |
| 245 |
$html .= '</div>'; |
| 246 |
|
| 247 |
// Markup is built from sanitized values via esc_attr/esc_url; pass through wp_kses for defense in depth. |
| 248 |
echo wp_kses( $html, easyel_allowed_html() ); |
| 249 |
|
| 250 |
$this->rendered = true; |
| 251 |
} |
| 252 |
|
| 253 |
/** |
| 254 |
* Fallback rendering for themes that do not implement wp_body_open(). |
| 255 |
*/ |
| 256 |
public function render_preloader_html_fallback() { |
| 257 |
|
| 258 |
if ( $this->rendered ) { |
| 259 |
return; |
| 260 |
} |
| 261 |
|
| 262 |
$this->render_preloader_html(); |
| 263 |
} |
| 264 |
} |
| 265 |
|