| 1 |
<?php |
| 2 |
/** |
| 3 |
* Main class for front display |
| 4 |
* |
| 5 |
* @package LoftLoader |
| 6 |
* @link http://www.loftocean.com/ |
| 7 |
* @author Suihai Huang from Loft Ocean Team |
| 8 |
|
| 9 |
* @since version 1.0 |
| 10 |
*/ |
| 11 |
|
| 12 |
if ( ! class_exists( 'LoftLoader_Front' ) ) { |
| 13 |
class LoftLoader_Front { |
| 14 |
protected $html_loaded = false; |
| 15 |
protected $defaults; |
| 16 |
protected $site_header_loaded = false; |
| 17 |
protected $site_footer_loaded = false; |
| 18 |
protected $type; // Get the loader settings |
| 19 |
public function __construct() { |
| 20 |
$this->get_settings(); |
| 21 |
$this->init_cache(); |
| 22 |
if ( $this->loader_enabled() ) { |
| 23 |
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); |
| 24 |
add_action( 'wp_head', array( $this, 'loader_custom_styles' ), 100 ); |
| 25 |
add_action( 'wp_footer', array( $this, 'load_inline_js' ), 99 ); |
| 26 |
add_filter( 'loftloader_modify_html', array( $this, 'show_loader_html' ) ); |
| 27 |
add_filter( 'loftloader_html', array( $this, 'loader_html' ) ); |
| 28 |
add_filter( 'body_class', array( $this, 'body_class' ) ); |
| 29 |
} |
| 30 |
} |
| 31 |
/** |
| 32 |
* Init cache for outputing |
| 33 |
*/ |
| 34 |
public function init_cache() { |
| 35 |
// Only for front view |
| 36 |
if ( ! is_admin() ) { |
| 37 |
add_action( 'template_redirect', array( $this, 'start_cache' ), 2 ); |
| 38 |
} |
| 39 |
} |
| 40 |
/** |
| 41 |
* Start cache for outputing |
| 42 |
*/ |
| 43 |
public function start_cache() { |
| 44 |
if ( ! wp_doing_ajax() ) { |
| 45 |
// Start cache the output with callback function |
| 46 |
ob_start( array( $this, 'modify_html' ) ); |
| 47 |
} |
| 48 |
} |
| 49 |
/** |
| 50 |
* Will be called when flush cache |
| 51 |
* |
| 52 |
* @param string cached string |
| 53 |
* @return string modified cached string |
| 54 |
*/ |
| 55 |
public function modify_html( $html ) { |
| 56 |
if ( $this->site_header_loaded && $this->site_footer_loaded ) { |
| 57 |
return apply_filters( 'loftloader_modify_html', $html ); |
| 58 |
} else { |
| 59 |
return $html; |
| 60 |
} |
| 61 |
} |
| 62 |
/** |
| 63 |
* @description get the plugin settings |
| 64 |
*/ |
| 65 |
public function get_settings() { |
| 66 |
global $loftloader_default_settings; |
| 67 |
$this->defaults = $loftloader_default_settings; |
| 68 |
do_action( 'loftloader_settings' ); |
| 69 |
$this->type = esc_attr( $this->get_loader_setting( 'loftloader_loader_type' ) ); |
| 70 |
add_action( 'wp_head', array( $this, 'set_header_loaded' ) ); |
| 71 |
add_action( 'wp_footer', array( $this, 'set_footer_loaded' ) ); |
| 72 |
} |
| 73 |
/** |
| 74 |
* @description enqueue the scripts and styles for front end |
| 75 |
*/ |
| 76 |
public function enqueue_scripts() { |
| 77 |
$loadJSStyle = $this->get_loader_setting( 'loftloader_inline_js' ); |
| 78 |
if ( ! is_customize_preview() && ( 'inline' !== $loadJSStyle ) ) { |
| 79 |
wp_enqueue_script( 'loftloader-lite-front-main', LOFTLOADER_URI . 'assets/js/loftloader.min.js', array(), LOFTLOADER_ASSET_VERSION, true ); |
| 80 |
} |
| 81 |
wp_enqueue_style('loftloader-lite-animation', LOFTLOADER_URI . 'assets/css/loftloader.min.css', array(), LOFTLOADER_ASSET_VERSION); |
| 82 |
} |
| 83 |
/** |
| 84 |
* Load inline JavaScript code if set |
| 85 |
*/ |
| 86 |
public function load_inline_js() { |
| 87 |
$loadJSStyle = $this->get_loader_setting( 'loftloader_inline_js' ); |
| 88 |
if ( ( 'inline' === $loadJSStyle ) && ! is_customize_preview() ) { ?> |
| 89 |
<script type="text/javascript"> |
| 90 |
( function() { |
| 91 |
function loftloader_finished() { |
| 92 |
document.body.classList.add( 'loaded' ); |
| 93 |
} |
| 94 |
var loader = document.getElementById( 'loftloader-wrapper' ); |
| 95 |
if ( loader ) { |
| 96 |
window.addEventListener( 'load', function( e ) { |
| 97 |
loftloader_finished(); |
| 98 |
} ); |
| 99 |
if ( loader.dataset && loader.dataset.showCloseTime ) { |
| 100 |
var showCloseTime = parseInt( loader.dataset.showCloseTime, 10 ), maxLoadTime = false, |
| 101 |
closeBtn = loader.getElementsByClassName( 'loader-close-button' ); |
| 102 |
if ( showCloseTime && closeBtn.length ) { |
| 103 |
setTimeout( function() { |
| 104 |
closeBtn[0].style.display = ''; |
| 105 |
}, showCloseTime ); |
| 106 |
closeBtn[0].addEventListener( 'click', function( e ) { |
| 107 |
loftloader_finished(); |
| 108 |
} ); |
| 109 |
} |
| 110 |
} |
| 111 |
if ( loader.dataset.maxLoadTime ) { |
| 112 |
maxLoadTime = loader.dataset.maxLoadTime; |
| 113 |
maxLoadTime = parseInt( maxLoadTime, 10 ); |
| 114 |
if ( maxLoadTime ) { |
| 115 |
setTimeout( function() { |
| 116 |
loftloader_finished(); |
| 117 |
}, maxLoadTime ); |
| 118 |
} |
| 119 |
} |
| 120 |
} |
| 121 |
} ) (); |
| 122 |
</script> <?php |
| 123 |
} |
| 124 |
} |
| 125 |
/** |
| 126 |
* @description custom css for front end |
| 127 |
*/ |
| 128 |
public function loader_custom_styles() { |
| 129 |
$color = esc_attr( $this->get_loader_setting( 'loftloader_loader_color' ) ); |
| 130 |
$bgColor = esc_attr( $this->get_loader_setting( 'loftloader_bg_color' ) ); |
| 131 |
$bgOpacity = intval( $this->get_loader_setting('loftloader_bg_opacity' ) ) / 100; |
| 132 |
|
| 133 |
$styles = $this->generate_style( |
| 134 |
'loftloader-lite-custom-bg-color', |
| 135 |
'#loftloader-wrapper .loader-section {' . PHP_EOL . "\t" . 'background: ' . $bgColor . ';' . PHP_EOL . '}' . PHP_EOL |
| 136 |
); |
| 137 |
$styles .= $this->generate_style( |
| 138 |
'loftloader-lite-custom-bg-opacity', |
| 139 |
'#loftloader-wrapper .loader-section {' . PHP_EOL . "\t" . 'opacity: ' . $bgOpacity . ';' . PHP_EOL . '}' . PHP_EOL |
| 140 |
); |
| 141 |
$css = ''; |
| 142 |
switch ( $this->type ) { |
| 143 |
case 'sun': |
| 144 |
$css = '#loftloader-wrapper.pl-sun #loader {' . PHP_EOL . "\t" . 'color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 145 |
break; |
| 146 |
case 'circles': |
| 147 |
$css = '#loftloader-wrapper.pl-circles #loader {' . PHP_EOL . "\t" . 'color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 148 |
break; |
| 149 |
case 'wave': |
| 150 |
$css = '#loftloader-wrapper.pl-wave #loader {' . PHP_EOL . "\t" . 'color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 151 |
break; |
| 152 |
case 'square': |
| 153 |
$css = '#loftloader-wrapper.pl-square #loader span {' . PHP_EOL . "\t" . 'border: 4px solid ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 154 |
break; |
| 155 |
case 'frame': |
| 156 |
$css = '#loftloader-wrapper.pl-frame #loader {' . PHP_EOL . "\t" . 'color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 157 |
break; |
| 158 |
case 'imgloading': |
| 159 |
$width = absint($this->get_loader_setting('loftloader_img_width')); |
| 160 |
$image = esc_url($this->get_loader_setting('loftloader_custom_img')); |
| 161 |
$css = empty($width) ? '' : '#loftloader-wrapper.pl-imgloading #loader {' . PHP_EOL . "\t" . 'width: ' . $width . 'px;' . PHP_EOL . '}' . PHP_EOL; |
| 162 |
$css .= '#loftloader-wrapper.pl-imgloading #loader span {' . PHP_EOL . "\t" . 'background-size: cover;' . PHP_EOL . "\t" . 'background-image: url(' . $image . ');' . PHP_EOL . '}' . PHP_EOL; |
| 163 |
break; |
| 164 |
case 'beating': |
| 165 |
$css = '#loftloader-wrapper.pl-beating #loader {' . PHP_EOL . "\t" . 'color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 166 |
break; |
| 167 |
} |
| 168 |
$styles .= $this->generate_style( 'loftloader-lite-custom-loader', $css ); |
| 169 |
echo wp_kses( $styles, array( |
| 170 |
'style' => array( 'type' => array(), 'id' => array(), 'media' => array() ) |
| 171 |
) ); |
| 172 |
} |
| 173 |
/** |
| 174 |
* Loader HTML |
| 175 |
*/ |
| 176 |
public function loader_html( $loader ) { |
| 177 |
if ( $this->html_loaded ) { |
| 178 |
return ''; |
| 179 |
} |
| 180 |
$image = esc_url($this->get_loader_setting('loftloader_custom_img')); |
| 181 |
$ending = esc_attr($this->get_loader_setting('loftloader_bg_animation')); |
| 182 |
$wrap_class = array( 'pl-' . $this->type ); |
| 183 |
|
| 184 |
$html = '<div id="loftloader-wrapper" class="' . implode( ' ', $wrap_class ) . '"' . $this->loader_attributes() . '>'; |
| 185 |
switch( $ending ) { |
| 186 |
case 'fade': |
| 187 |
$html .= '<div class="loader-section section-fade"></div>'; |
| 188 |
break; |
| 189 |
case 'up': |
| 190 |
$html .= '<div class="loader-section section-slide-up"></div>'; |
| 191 |
break; |
| 192 |
case 'split-v': |
| 193 |
$html .= '<div class="loader-section section-up"></div>'; |
| 194 |
$html .= '<div class="loader-section section-down"></div>'; |
| 195 |
break; |
| 196 |
case 'no-animation': |
| 197 |
$html .= '<div class="loader-section end-no-animation"></div>'; |
| 198 |
break; |
| 199 |
default: |
| 200 |
$html .= '<div class="loader-section section-left">'; |
| 201 |
$html .= '</div><div class="loader-section section-right"></div>'; |
| 202 |
} |
| 203 |
|
| 204 |
$html .= '<div class="loader-inner"><div id="loader">'; |
| 205 |
|
| 206 |
if ( ! empty( $image ) ) { |
| 207 |
// <!-- Only image loading need the span with background --> |
| 208 |
if ( in_array( $this->type, array( 'imgloading' ) ) ) { |
| 209 |
$html .= $this->get_loader_type_loading_bg_image( $image ); |
| 210 |
} |
| 211 |
if ( in_array( $this->type, array( 'frame', 'imgloading' ) ) ) { |
| 212 |
$html .= $this->get_loader_image( $image, $this->type ); |
| 213 |
} |
| 214 |
} |
| 215 |
$html .= in_array( $this->type, array( 'imgloading' ) ) ? '' : '<span></span>'; |
| 216 |
$html .= '</div></div>'; |
| 217 |
|
| 218 |
if ( ! is_customize_preview() ) { |
| 219 |
$close_description = $this->get_loader_setting( 'loftloader_show_close_tip' ); |
| 220 |
$html .= sprintf( |
| 221 |
'<div class="loader-close-button" style="display: none;"><span class="screen-reader-text">%s</span>%s</div>', |
| 222 |
esc_html__('Close', 'loftloader'), |
| 223 |
empty($close_description) ? '' : sprintf('<span class="close-des">%s</span>', $close_description) |
| 224 |
); |
| 225 |
} |
| 226 |
$html .= '</div>'; |
| 227 |
$this->html_loaded = true; |
| 228 |
return $html; |
| 229 |
} |
| 230 |
/** |
| 231 |
* @description loftloader html |
| 232 |
*/ |
| 233 |
public function show_loader_html( $origin ) { |
| 234 |
if ( ! empty( $origin ) ) { |
| 235 |
$regexp ='/(<body[^>]*>)/i'; |
| 236 |
$split = preg_split( $regexp, $origin, 3, PREG_SPLIT_DELIM_CAPTURE ); |
| 237 |
if ( is_array( $split ) && ( 3 <= count( $split ) ) ) { |
| 238 |
$html = apply_filters( 'loftloader_html', '' ); |
| 239 |
|
| 240 |
return empty( $html ) ? $origin : $split[0] . $split[1] . $html . implode( '', array_slice( $split, 2 ) ); |
| 241 |
} |
| 242 |
} |
| 243 |
return $origin; |
| 244 |
} |
| 245 |
/** |
| 246 |
* Background image for loader type loading with custom image |
| 247 |
* |
| 248 |
* @param url image url |
| 249 |
* @return string html |
| 250 |
*/ |
| 251 |
private function get_loader_type_loading_bg_image( $image ) { |
| 252 |
return sprintf( |
| 253 |
'<div class="imgloading-container"><span style="background-image: url(%s);"></span></div>', |
| 254 |
esc_url( $image ) |
| 255 |
); |
| 256 |
} |
| 257 |
/** |
| 258 |
* Helper function to add manual loader settings |
| 259 |
*/ |
| 260 |
private function loader_attributes() { |
| 261 |
$attrs = ''; |
| 262 |
$show_close_time = $this->get_loader_setting( 'loftloader_show_close_timer' ); |
| 263 |
$show_close_time = number_format( $show_close_time, 0, '.', '' ); |
| 264 |
$attrs .= sprintf( ' data-show-close-time="%s"', esc_js( esc_attr( $show_close_time * 1000 ) ) ); |
| 265 |
|
| 266 |
$max_load_time = $this->get_loader_setting( 'loftloader_max_load_time' ); |
| 267 |
$max_load_time = number_format( $max_load_time, 1, '.', '' ); |
| 268 |
if ( ! empty( $max_load_time ) ) { |
| 269 |
$attrs .= sprintf( ' data-max-load-time="%s"', esc_js( esc_attr( $max_load_time * 1000 ) ) ); |
| 270 |
} |
| 271 |
|
| 272 |
return apply_filters( 'loftloader_loader_attributes', $attrs ); |
| 273 |
} |
| 274 |
/** |
| 275 |
* Helper function to test whether show loftloader |
| 276 |
* @return boolean return true if loftloader enabled and display on current page, otherwise false |
| 277 |
*/ |
| 278 |
private function loader_enabled() { |
| 279 |
if ( $this->test_builder() ) { |
| 280 |
return false; |
| 281 |
} else { |
| 282 |
if ( ( $this->get_loader_setting( 'loftloader_main_switch' ) === 'on' ) ) { |
| 283 |
$range = $this->get_loader_setting( 'loftloader_show_range' ); |
| 284 |
if ( ( $range === 'sitewide' ) || ( ( $range === 'homepage' ) && is_front_page() ) ) { |
| 285 |
return true; |
| 286 |
} else { |
| 287 |
return false; |
| 288 |
} |
| 289 |
} else { |
| 290 |
return apply_filters( 'loftloader_loader_enabled', false ); |
| 291 |
} |
| 292 |
} |
| 293 |
} |
| 294 |
/** |
| 295 |
* Helper function get setting option |
| 296 |
*/ |
| 297 |
private function get_loader_setting( $setting_id ) { |
| 298 |
return apply_filters( 'loftloader_get_loader_setting', get_option( $setting_id, $this->defaults[ $setting_id ] ), $setting_id ); |
| 299 |
} |
| 300 |
/** |
| 301 |
* Helper function generate styles |
| 302 |
*/ |
| 303 |
private function generate_style( $id, $style ) { |
| 304 |
return '<style id="' . $id . '">' . $style . '</style>'; |
| 305 |
} |
| 306 |
/** |
| 307 |
* Make the head loaded flag |
| 308 |
*/ |
| 309 |
public function set_header_loaded() { |
| 310 |
$this->site_header_loaded = true; |
| 311 |
} |
| 312 |
/** |
| 313 |
* Make the footer loaded flag |
| 314 |
*/ |
| 315 |
public function set_footer_loaded() { |
| 316 |
$this->site_footer_loaded = true; |
| 317 |
} |
| 318 |
/** |
| 319 |
* Not show loader in builder and theme customizer |
| 320 |
*/ |
| 321 |
protected function test_builder() { |
| 322 |
if ( defined( 'ELEMENTOR_PATH' ) && isset( $_GET['elementor-preview'] ) && ! empty( sanitize_text_field( wp_unslash( $_GET['elementor-preview'] ) ) ) ) { |
| 323 |
return true; |
| 324 |
} else if ( class_exists( 'FLBuilderLoader' ) && isset( $_GET['fl_builder'] ) ) { |
| 325 |
return true; |
| 326 |
} else if ( defined( 'WPB_VC_VERSION' ) && ( ! empty( $_GET['vc_editable'] ) ) ) { |
| 327 |
return true; |
| 328 |
} else if ( is_customize_preview() && ( empty( $_GET['plugin'] ) || ( 'loftloader-lite' != sanitize_text_field( wp_unslash( $_GET['plugin'] ) ) ) ) ) { |
| 329 |
return true; |
| 330 |
} |
| 331 |
return false; |
| 332 |
} |
| 333 |
/** |
| 334 |
* Identify from loftloader lite |
| 335 |
*/ |
| 336 |
public function body_class( $class ) { |
| 337 |
array_push( $class, 'loftloader-lite-enabled' ); |
| 338 |
return $class; |
| 339 |
} |
| 340 |
/** |
| 341 |
* Get loader image |
| 342 |
*/ |
| 343 |
protected function get_loader_image( $img, $type ) { |
| 344 |
if ( empty( $img ) ) return ''; |
| 345 |
|
| 346 |
$width = 80; |
| 347 |
$height = 80; |
| 348 |
$is_frame = ( 'frame' == $type ); |
| 349 |
|
| 350 |
$pid = attachment_url_to_postid( $img ); |
| 351 |
$has_valid_image_attrs = false; |
| 352 |
$image_attrs = array(); |
| 353 |
if ( empty( $pid ) ) { |
| 354 |
$info = getimagesize( $img ); |
| 355 |
if ( $has_valid_image_attrs = ( ! empty( $info[1] ) ) && ( $info[0] > 1 ) ) { |
| 356 |
$image_attrs = array( 'width' => $info[0], 'height' => $info[1] ); |
| 357 |
} |
| 358 |
} else { |
| 359 |
$image = wp_get_attachment_image_src( $pid, 'full' ); |
| 360 |
if ( $has_valid_image_attrs = ( $image[1] > 1 ) ) { |
| 361 |
$image_attrs = array( 'width' => $image[1], 'height' => $image[2] ); |
| 362 |
} |
| 363 |
} |
| 364 |
if ( $is_frame ) { |
| 365 |
if ( $has_valid_image_attrs ) { |
| 366 |
$width = $image_attrs['width']; |
| 367 |
$height = $image_attrs['height']; |
| 368 |
} |
| 369 |
} else { |
| 370 |
$width = intval( $this->get_loader_setting( 'loftloader_img_width' ) ); |
| 371 |
$width = ( $width > 0 ) ? $width : 76; |
| 372 |
$height = $has_valid_image_attrs ? ( $image_attrs['height'] / $image_attrs['width'] * $width ) : $width; |
| 373 |
} |
| 374 |
return sprintf( |
| 375 |
'<img width="%3$s" height="%4$s" data-no-lazy="1" class="skip-lazy" alt="%1$s" src="%2$s">', |
| 376 |
esc_attr__( 'loader image', 'loftloader' ), |
| 377 |
esc_url( $img ), |
| 378 |
esc_attr( $width ), |
| 379 |
esc_attr( intval( $height ) ) |
| 380 |
); |
| 381 |
} |
| 382 |
} |
| 383 |
new LoftLoader_Front(); |
| 384 |
} |
| 385 |
|
