| 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 $defaults; |
| 15 |
protected $site_header_loaded = false; |
| 16 |
protected $site_footer_loaded = false; |
| 17 |
protected $type; // Get the loader settings |
| 18 |
public function __construct() { |
| 19 |
$this->get_settings(); |
| 20 |
$this->init_cache(); |
| 21 |
if ( $this->loader_enabled() ) { |
| 22 |
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); |
| 23 |
add_action( 'wp_head', array( $this, 'loader_custom_styles' ), 100 ); |
| 24 |
add_action( 'wp_footer', array( $this, 'load_inline_js' ), 99 ); |
| 25 |
add_filter( 'loftloader_modify_html', array( $this, 'show_loader_html' ) ); |
| 26 |
} |
| 27 |
} |
| 28 |
/** |
| 29 |
* Init cache for outputing |
| 30 |
*/ |
| 31 |
public function init_cache() { |
| 32 |
// Only for front view |
| 33 |
if ( ! is_admin() ) { |
| 34 |
add_action( 'wp_head', array( $this, 'start_cache' ) ); |
| 35 |
add_action( 'wp_footer', array( $this, 'modify_html' ), 99999 ); |
| 36 |
} |
| 37 |
} |
| 38 |
/** |
| 39 |
* Start cache for outputing |
| 40 |
*/ |
| 41 |
public function start_cache() { |
| 42 |
ob_start(); |
| 43 |
} |
| 44 |
/** |
| 45 |
* Will be called when flush cache |
| 46 |
* |
| 47 |
* @param string cached string |
| 48 |
* @return string modified cached string |
| 49 |
*/ |
| 50 |
public function modify_html() { |
| 51 |
$html = ob_get_clean(); |
| 52 |
if ( $this->site_header_loaded && $this->site_footer_loaded ) { |
| 53 |
echo apply_filters( 'loftloader_modify_html', $html ); |
| 54 |
} else { |
| 55 |
echo $html; |
| 56 |
} |
| 57 |
} |
| 58 |
/** |
| 59 |
* @description get the plugin settings |
| 60 |
*/ |
| 61 |
public function get_settings() { |
| 62 |
global $loftloader_default_settings; |
| 63 |
$this->defaults = $loftloader_default_settings; |
| 64 |
do_action( 'loftloader_settings' ); |
| 65 |
$this->type = esc_attr( $this->get_loader_setting( 'loftloader_loader_type' ) ); |
| 66 |
add_action( 'wp_head', array( $this, 'set_header_loaded' ) ); |
| 67 |
add_action( 'wp_footer', array( $this, 'set_footer_loaded' ) ); |
| 68 |
} |
| 69 |
/** |
| 70 |
* @description enqueue the scripts and styles for front end |
| 71 |
*/ |
| 72 |
public function enqueue_scripts() { |
| 73 |
$loadJSStyle = $this->get_loader_setting( 'loftloader_inline_js' ); |
| 74 |
if ( ! is_customize_preview() && ( 'inline' !== $loadJSStyle ) ) { |
| 75 |
wp_enqueue_script( 'loftloader-lite-front-main', LOFTLOADER_URI . 'assets/js/loftloader.min.js', array(), LOFTLOADER_ASSET_VERSION, true ); |
| 76 |
} |
| 77 |
wp_enqueue_style('loftloader-lite-animation', LOFTLOADER_URI . 'assets/css/loftloader.min.css', array(), LOFTLOADER_ASSET_VERSION); |
| 78 |
} |
| 79 |
/** |
| 80 |
* Load inline JavaScript code if set |
| 81 |
*/ |
| 82 |
public function load_inline_js() { |
| 83 |
$loadJSStyle = $this->get_loader_setting( 'loftloader_inline_js' ); |
| 84 |
if ( ( 'inline' === $loadJSStyle ) && ! is_customize_preview() ) { ?> |
| 85 |
<script type="text/javascript"> |
| 86 |
( function() { |
| 87 |
function loftloader_finished() { |
| 88 |
document.body.classList.add( 'loaded' ); |
| 89 |
} |
| 90 |
var loader = document.getElementById( 'loftloader-wrapper' ); |
| 91 |
if ( loader ) { |
| 92 |
window.addEventListener( 'load', function( e ) { |
| 93 |
loftloader_finished(); |
| 94 |
} ); |
| 95 |
if ( loader.dataset && loader.dataset.showCloseTime ) { |
| 96 |
var showCloseTime = parseInt( loader.dataset.showCloseTime, 10 ), maxLoadTime = false, |
| 97 |
closeBtn = loader.getElementsByClassName( 'loader-close-button' ); |
| 98 |
if ( showCloseTime && closeBtn.length ) { |
| 99 |
setTimeout( function() { |
| 100 |
closeBtn[0].style.display = ''; |
| 101 |
}, showCloseTime ); |
| 102 |
closeBtn[0].addEventListener( 'click', function( e ) { |
| 103 |
loftloader_finished(); |
| 104 |
} ); |
| 105 |
} |
| 106 |
} |
| 107 |
if ( loader.dataset.maxLoadTime ) { |
| 108 |
maxLoadTime = loader.dataset.maxLoadTime; |
| 109 |
maxLoadTime = parseInt( maxLoadTime, 10 ); |
| 110 |
if ( maxLoadTime ) { |
| 111 |
setTimeout( function() { |
| 112 |
loftloader_finished(); |
| 113 |
}, maxLoadTime ); |
| 114 |
} |
| 115 |
} |
| 116 |
} |
| 117 |
} ) (); |
| 118 |
</script> <?php |
| 119 |
} |
| 120 |
} |
| 121 |
/** |
| 122 |
* @description custom css for front end |
| 123 |
*/ |
| 124 |
public function loader_custom_styles() { |
| 125 |
$color = esc_attr( $this->get_loader_setting( 'loftloader_loader_color' ) ); |
| 126 |
$bgColor = esc_attr( $this->get_loader_setting( 'loftloader_bg_color' ) ); |
| 127 |
$bgOpacity = intval( $this->get_loader_setting('loftloader_bg_opacity' ) ) / 100; |
| 128 |
|
| 129 |
$styles = $this->generate_style( |
| 130 |
'loftloader-lite-custom-bg-color', |
| 131 |
'#loftloader-wrapper .loader-section {' . PHP_EOL . "\t" . 'background: ' . $bgColor . ';' . PHP_EOL . '}' . PHP_EOL |
| 132 |
); |
| 133 |
$styles .= $this->generate_style( |
| 134 |
'loftloader-lite-custom-bg-opacity', |
| 135 |
'#loftloader-wrapper .loader-section {' . PHP_EOL . "\t" . 'opacity: ' . $bgOpacity . ';' . PHP_EOL . '}' . PHP_EOL |
| 136 |
); |
| 137 |
$css = ''; |
| 138 |
switch ( $this->type ) { |
| 139 |
case 'sun': |
| 140 |
$css = '#loftloader-wrapper.pl-sun #loader {' . PHP_EOL . "\t" . 'color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 141 |
break; |
| 142 |
case 'circles': |
| 143 |
$css = '#loftloader-wrapper.pl-circles #loader {' . PHP_EOL . "\t" . 'color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 144 |
break; |
| 145 |
case 'wave': |
| 146 |
$css = '#loftloader-wrapper.pl-wave #loader {' . PHP_EOL . "\t" . 'color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 147 |
break; |
| 148 |
case 'square': |
| 149 |
$css = '#loftloader-wrapper.pl-square #loader span {' . PHP_EOL . "\t" . 'border: 4px solid ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 150 |
break; |
| 151 |
case 'frame': |
| 152 |
$css = '#loftloader-wrapper.pl-frame #loader {' . PHP_EOL . "\t" . 'color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 153 |
break; |
| 154 |
case 'imgloading': |
| 155 |
$width = absint($this->get_loader_setting('loftloader_img_width')); |
| 156 |
$image = esc_url($this->get_loader_setting('loftloader_custom_img')); |
| 157 |
$css = empty($width) ? '' : '#loftloader-wrapper.pl-imgloading #loader {' . PHP_EOL . "\t" . 'width: ' . $width . 'px;' . PHP_EOL . '}' . PHP_EOL; |
| 158 |
$css .= '#loftloader-wrapper.pl-imgloading #loader span {' . PHP_EOL . "\t" . 'background-size: cover;' . PHP_EOL . "\t" . 'background-image: url(' . $image . ');' . PHP_EOL . '}' . PHP_EOL; |
| 159 |
break; |
| 160 |
case 'beating': |
| 161 |
$css = '#loftloader-wrapper.pl-beating #loader {' . PHP_EOL . "\t" . 'color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL; |
| 162 |
break; |
| 163 |
} |
| 164 |
$styles .= $this->generate_style( 'loftloader-lite-custom-loader', $css ); |
| 165 |
echo wp_kses( $styles, array( |
| 166 |
'style' => array( 'type' => array(), 'id' => array(), 'media' => array() ) |
| 167 |
) ); |
| 168 |
} |
| 169 |
/** |
| 170 |
* @description loftloader html |
| 171 |
*/ |
| 172 |
public function show_loader_html( $origin ) { |
| 173 |
if ( ! empty( $origin ) ) { |
| 174 |
$regexp ='/(<body[^>]*>)/i'; |
| 175 |
$split = preg_split( $regexp, $origin, 3, PREG_SPLIT_DELIM_CAPTURE ); |
| 176 |
if ( is_array( $split ) && ( 3 <= count( $split ) ) ) { |
| 177 |
$image = esc_url($this->get_loader_setting('loftloader_custom_img')); |
| 178 |
$ending = esc_attr($this->get_loader_setting('loftloader_bg_animation')); |
| 179 |
|
| 180 |
$html = '<div id="loftloader-wrapper" class="pl-' . $this->type . '"' . $this->loader_attributes() . '>'; |
| 181 |
$html .= '<div class="loader-inner"><div id="loader">'; |
| 182 |
|
| 183 |
if ( ! empty( $image ) ) { |
| 184 |
// <!-- Only image loading need the span with background --> |
| 185 |
if ( in_array( $this->type, array( 'imgloading' ) ) ) { |
| 186 |
$html .= $this->get_loader_type_loading_bg_image( $image ); |
| 187 |
} |
| 188 |
if ( in_array( $this->type, array( 'frame', 'imgloading' ) ) ) { |
| 189 |
$html .= sprintf( |
| 190 |
'<img data-no-lazy="1" class="skip-lazy" alt="%1$s" src="%2$s">', |
| 191 |
esc_attr__( 'loader image', 'loftloader-pro' ), |
| 192 |
esc_url( $image ) |
| 193 |
); |
| 194 |
} |
| 195 |
} |
| 196 |
$html .= in_array( $this->type, array( 'imgloading' ) ) ? '' : '<span></span>'; |
| 197 |
$html .= '</div></div>'; |
| 198 |
switch($ending){ |
| 199 |
case 'fade': |
| 200 |
$html .= '<div class="loader-section section-fade"></div>'; |
| 201 |
break; |
| 202 |
case 'up': |
| 203 |
$html .= '<div class="loader-section section-slide-up"></div>'; |
| 204 |
break; |
| 205 |
case 'split-v': |
| 206 |
$html .= '<div class="loader-section section-up"></div>'; |
| 207 |
$html .= '<div class="loader-section section-down"></div>'; |
| 208 |
break; |
| 209 |
default: |
| 210 |
$html .= '<div class="loader-section section-left">'; |
| 211 |
$html .= '</div><div class="loader-section section-right"></div>'; |
| 212 |
} |
| 213 |
|
| 214 |
if(!is_customize_preview()){ |
| 215 |
$close_description = $this->get_loader_setting('loftloader_show_close_tip'); |
| 216 |
$html .= sprintf( |
| 217 |
'<div class="loader-close-button" style="display: none;"><span class="screen-reader-text">%s</span>%s</div>', |
| 218 |
esc_html__('Close', 'loftloader'), |
| 219 |
empty($close_description) ? '' : sprintf('<span class="close-des">%s</span>', $close_description) |
| 220 |
); |
| 221 |
} |
| 222 |
$html .= '</div>'; |
| 223 |
|
| 224 |
return $split[0] . $split[1] . $html . implode( '', array_slice( $split, 2 ) ); |
| 225 |
} |
| 226 |
} |
| 227 |
return $origin; |
| 228 |
} |
| 229 |
/** |
| 230 |
* Background image for loader type loading with custom image |
| 231 |
* |
| 232 |
* @param url image url |
| 233 |
* @return string html |
| 234 |
*/ |
| 235 |
private function get_loader_type_loading_bg_image( $image ) { |
| 236 |
return sprintf( |
| 237 |
'<div class="imgloading-container"><span style="background-image: url(%s);"></span></div>', |
| 238 |
esc_url( $image ) |
| 239 |
); |
| 240 |
} |
| 241 |
/** |
| 242 |
* Helper function to add manual loader settings |
| 243 |
*/ |
| 244 |
private function loader_attributes() { |
| 245 |
$attrs = ''; |
| 246 |
$show_close_time = $this->get_loader_setting( 'loftloader_show_close_timer' ); |
| 247 |
$show_close_time = number_format( $show_close_time, 0, '.', '' ); |
| 248 |
$attrs .= sprintf( ' data-show-close-time="%s"', esc_js( esc_attr( $show_close_time * 1000 ) ) ); |
| 249 |
|
| 250 |
$max_load_time = $this->get_loader_setting( 'loftloader_max_load_time' ); |
| 251 |
$max_load_time = number_format( $max_load_time, 1, '.', '' ); |
| 252 |
if ( ! empty( $max_load_time ) ) { |
| 253 |
$attrs .= sprintf( ' data-max-load-time="%s"', esc_js( esc_attr( $max_load_time * 1000 ) ) ); |
| 254 |
} |
| 255 |
|
| 256 |
return apply_filters( 'loftloader_loader_attributes', $attrs ); |
| 257 |
} |
| 258 |
/** |
| 259 |
* Helper function to test whether show loftloader |
| 260 |
* @return boolean return true if loftloader enabled and display on current page, otherwise false |
| 261 |
*/ |
| 262 |
private function loader_enabled() { |
| 263 |
if ( ( $this->get_loader_setting( 'loftloader_main_switch' ) === 'on' ) ) { |
| 264 |
$range = $this->get_loader_setting( 'loftloader_show_range' ); |
| 265 |
if ( ( $range === 'sitewide' ) || ( ( $range === 'homepage' ) && is_front_page() ) ) { |
| 266 |
return true; |
| 267 |
} else { |
| 268 |
return false; |
| 269 |
} |
| 270 |
} else { |
| 271 |
return apply_filters( 'loftloader_loader_enabled', false ); |
| 272 |
} |
| 273 |
} |
| 274 |
/** |
| 275 |
* Helper function get setting option |
| 276 |
*/ |
| 277 |
private function get_loader_setting( $setting_id ) { |
| 278 |
return apply_filters( 'loftloader_get_loader_setting', get_option( $setting_id, $this->defaults[ $setting_id ] ), $setting_id ); |
| 279 |
} |
| 280 |
/** |
| 281 |
* Helper function generate styles |
| 282 |
*/ |
| 283 |
private function generate_style( $id, $style ) { |
| 284 |
return '<style id="' . $id . '">' . $style . '</style>'; |
| 285 |
} |
| 286 |
/** |
| 287 |
* Make the head loaded flag |
| 288 |
*/ |
| 289 |
public function set_header_loaded() { |
| 290 |
$this->site_header_loaded = true; |
| 291 |
} |
| 292 |
/** |
| 293 |
* Make the footer loaded flag |
| 294 |
*/ |
| 295 |
public function set_footer_loaded() { |
| 296 |
$this->site_footer_loaded = true; |
| 297 |
} |
| 298 |
} |
| 299 |
new LoftLoader_Front(); |
| 300 |
} |
| 301 |
|
