<?php
/**
 * Plugin Name: myEasy-Preloader
 * Description: Shows a full-screen preloader with your own logo and text while the page loads. Configure under Settings > myEasy-Preloader.
 * Version: 1.3.0
 * Author: Temitope Somuwa
 * Requires at least: 5.2
 * Requires PHP: 7.2
 * License: GPLv2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: myeasy-preloader
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

define( 'STOJA_PRELOADER_VERSION', '1.3.0' );

final class Stoja_Preloader {

	const OPT = 'stoja_options';
	private $printed = false;

	public static function defaults() {
		return array(
			'enabled'      => 1,
			'logo_id'      => 0,
			'text'         => '',
			'bg_color'     => '#ffffff',
			'text_color'   => '#111111',
			'accent_color' => '#d71920',
			'logo_width'   => 160,
			'text_size'    => 18,        // px
			'text_weight'  => '400',     // 400 | 600 | 700 | 800
			'text_style'   => 'normal',  // normal | italic
			'text_case'    => 'none',    // none | uppercase | capitalize
			'text_font'    => 'inherit', // inherit | sans | serif | mono | custom
			'text_font_custom' => '',
			'text_spacing' => 1,         // letter-spacing px
			'animation'    => 'ring',   // ring | pulse | dots | bars | progress | ripple | bounce | flip | none
			'min_time'     => 600,      // ms
			'fade_time'    => 500,      // ms
			'once_session' => 0,
			'display_mode' => 'all',    // all | home | include | exclude
			'pages'        => array(),  // page IDs (0 = latest-posts homepage)
		);
	}

	private function clean_font_name( $name ) {
		$name = preg_replace( '/[^A-Za-z0-9 _\-]/', '', (string) $name );
		return substr( trim( $name ), 0, 60 );
	}

	private function animation_keys() {
		return array( 'ring', 'pulse', 'dots', 'bars', 'progress', 'ripple', 'bounce', 'flip', 'none' );
	}

	private function font_stack( $key, $custom = '' ) {
		if ( 'custom' === $key ) {
			$name = $this->clean_font_name( $custom );
			return '' !== $name ? '"' . $name . '",sans-serif' : 'inherit';
		}
		$map = array(
			'inherit' => 'inherit',
			'sans'    => '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif',
			'serif'   => 'Georgia,"Times New Roman",Times,serif',
			'mono'    => 'ui-monospace,SFMono-Regular,Menlo,Consolas,monospace',
		);
		return isset( $map[ $key ] ) ? $map[ $key ] : 'inherit';
	}

	private function opts() {
		$saved = get_option( self::OPT, array() );
		if ( is_array( $saved ) && ! isset( $saved['display_mode'] ) && ! empty( $saved['home_only'] ) ) {
			$saved['display_mode'] = 'home'; // migrate from 1.0.0
		}
		return wp_parse_args( $saved, self::defaults() );
	}

	public function __construct() {
		add_action( 'admin_menu', array( $this, 'menu' ) );
		add_action( 'admin_init', array( $this, 'register' ) );
		add_action( 'admin_enqueue_scripts', array( $this, 'admin_assets' ) );

		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ), 1 );
		add_action( 'wp_body_open', array( $this, 'markup' ), 1 );
		add_action( 'wp_footer', array( $this, 'markup' ), 1 ); // fallback for themes without wp_body_open
		add_filter( 'plugin_action_links_' . plugin_basename( __FILE__ ), array( $this, 'links' ) );
	}

	/* ---------------- Front end ---------------- */

	private function should_show() {
		if ( is_admin() || is_feed() || is_embed() || is_customize_preview() || wp_doing_ajax() ) {
			return false;
		}
		// Don't interfere with page builders' editors/previews.
		if ( isset( $_GET['elementor-preview'] ) || isset( $_GET['preview'] ) || isset( $_GET['et_fb'] ) || isset( $_GET['fl_builder'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
			return false;
		}
		$o = $this->opts();
		if ( ! $o['enabled'] ) {
			return false;
		}
		$mode = $o['display_mode'];
		if ( 'home' === $mode && ! ( is_front_page() || is_home() ) ) {
			return false;
		}
		if ( 'include' === $mode || 'exclude' === $mode ) {
			$ids   = array_map( 'intval', (array) $o['pages'] );
			$cur   = (int) get_queried_object_id();
			$match = ( $cur && in_array( $cur, $ids, true ) ) || ( is_front_page() && in_array( 0, $ids, true ) );
			if ( 'include' === $mode && ! $match ) {
				return false;
			}
			if ( 'exclude' === $mode && $match ) {
				return false;
			}
		}
		return true;
	}

	public function enqueue() {
		if ( ! $this->should_show() ) {
			return;
		}
		$o      = $this->opts();
		$fade   = min( 3000, max( 0, (int) $o['fade_time'] ) );
		$min    = min( 5000, max( 0, (int) $o['min_time'] ) );
		$size   = min( 80, max( 10, (int) $o['text_size'] ) );
		$width  = min( 600, max( 40, (int) $o['logo_width'] ) );
		$space  = min( 12, max( 0, (int) $o['text_spacing'] ) );
		$weight = in_array( (string) $o['text_weight'], array( '400', '600', '700', '800' ), true ) ? (string) $o['text_weight'] : '400';
		$style  = ( 'italic' === $o['text_style'] ) ? 'italic' : 'normal';
		$case   = in_array( $o['text_case'], array( 'none', 'uppercase', 'capitalize' ), true ) ? $o['text_case'] : 'none';
		$bg     = sanitize_hex_color( $o['bg_color'] ) ? sanitize_hex_color( $o['bg_color'] ) : '#ffffff';
		$color  = sanitize_hex_color( $o['text_color'] ) ? sanitize_hex_color( $o['text_color'] ) : '#111111';
		$accent = sanitize_hex_color( $o['accent_color'] ) ? sanitize_hex_color( $o['accent_color'] ) : '#d71920';

		$css  = '#stoja-preloader{position:fixed;inset:0;z-index:999999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;';
		$css .= 'background:' . $bg . ';color:' . $color . ';opacity:1;visibility:visible;';
		$css .= 'transition:opacity ' . $fade . 'ms ease,visibility ' . $fade . 'ms ease;text-align:center;padding:24px}';
		$css .= '#stoja-preloader.stoja-hide{opacity:0;visibility:hidden;pointer-events:none}';
		$css .= '#stoja-preloader .stoja-logo-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:18px}';
		$css .= '#stoja-preloader img{display:block;width:' . $width . 'px;max-width:70vw;height:auto}';
		$css .= '#stoja-preloader .stoja-text{font-size:' . $size . 'px;font-weight:' . $weight . ';font-style:' . $style . ';';
		$css .= 'text-transform:' . $case . ';font-family:' . $this->font_stack( $o['text_font'], $o['text_font_custom'] ) . ';';
		$css .= 'letter-spacing:' . $space . 'px;line-height:1.4;max-width:90vw}';
		$css .= '@media (max-width:600px){#stoja-preloader .stoja-text{font-size:max(14px,calc(' . $size . 'px * .8))}}';
		$css .= '#stoja-preloader.stoja-ring .stoja-logo-wrap::after{content:"";position:absolute;inset:0;border:3px solid transparent;border-top-color:' . $accent . ';border-right-color:' . $accent . ';border-radius:50%;animation:stoja-spin 1s linear infinite}';
		$css .= '#stoja-preloader.stoja-pulse img,#stoja-preloader.stoja-pulse .stoja-text{animation:stoja-pulse 1.4s ease-in-out infinite}';
		$css .= '@keyframes stoja-spin{to{transform:rotate(360deg)}}';
		$css .= '@keyframes stoja-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.96)}}';
		$css .= '#stoja-preloader .stoja-loader{display:flex;align-items:center;justify-content:center;gap:8px}';
		// Dots.
		$css .= '#stoja-preloader.stoja-dots .stoja-loader span{width:12px;height:12px;border-radius:50%;background:' . $accent . ';animation:stoja-dot 1.2s ease-in-out infinite both}';
		$css .= '#stoja-preloader.stoja-dots .stoja-loader span:nth-child(1){animation-delay:-.32s}#stoja-preloader.stoja-dots .stoja-loader span:nth-child(2){animation-delay:-.16s}';
		$css .= '@keyframes stoja-dot{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}';
		// Bars.
		$css .= '#stoja-preloader.stoja-bars .stoja-loader{height:40px;gap:5px}';
		$css .= '#stoja-preloader.stoja-bars .stoja-loader span{width:5px;height:100%;background:' . $accent . ';animation:stoja-bar 1.1s ease-in-out infinite}';
		$css .= '#stoja-preloader.stoja-bars .stoja-loader span:nth-child(2){animation-delay:-1s}#stoja-preloader.stoja-bars .stoja-loader span:nth-child(3){animation-delay:-.9s}';
		$css .= '#stoja-preloader.stoja-bars .stoja-loader span:nth-child(4){animation-delay:-.8s}#stoja-preloader.stoja-bars .stoja-loader span:nth-child(5){animation-delay:-.7s}';
		$css .= '@keyframes stoja-bar{0%,40%,100%{transform:scaleY(.35)}20%{transform:scaleY(1)}}';
		// Progress bar.
		$css .= '#stoja-preloader.stoja-progress .stoja-loader{position:relative;width:min(240px,70vw);height:4px;border-radius:4px;overflow:hidden;background:rgba(128,128,128,.25)}';
		$css .= '#stoja-preloader.stoja-progress .stoja-loader span{position:absolute;top:0;bottom:0;left:-40%;width:40%;border-radius:4px;background:' . $accent . ';animation:stoja-slide 1.2s ease-in-out infinite}';
		$css .= '@keyframes stoja-slide{0%{left:-40%}100%{left:100%}}';
		// Ripple.
		$css .= '#stoja-preloader.stoja-ripple .stoja-logo-wrap::before,#stoja-preloader.stoja-ripple .stoja-logo-wrap::after{content:"";position:absolute;inset:0;border:3px solid ' . $accent . ';border-radius:50%;opacity:0;animation:stoja-ripple 1.8s ease-out infinite}';
		$css .= '#stoja-preloader.stoja-ripple .stoja-logo-wrap::after{animation-delay:.9s}';
		$css .= '@keyframes stoja-ripple{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.5);opacity:0}}';
		// Bounce and flip (logo only).
		$css .= '#stoja-preloader.stoja-bounce img{animation:stoja-bounce 1s ease-in-out infinite}';
		$css .= '@keyframes stoja-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}';
		$css .= '#stoja-preloader.stoja-flip img{animation:stoja-flip 1.8s ease-in-out infinite}';
		$css .= '@keyframes stoja-flip{0%{transform:perspective(500px) rotateY(0)}100%{transform:perspective(500px) rotateY(360deg)}}';
		$css .= 'html.stoja-skip #stoja-preloader{display:none!important}';
		$css .= '@media (prefers-reduced-motion:reduce){#stoja-preloader *,#stoja-preloader *::before,#stoja-preloader *::after{animation:none!important}}';

		$js = <<<'JS'
(function(){
	var once = __ONCE__, min = __MIN__, start = Date.now(), done = false;
	try { if (once && sessionStorage.getItem('stoja_seen')) { document.documentElement.classList.add('stoja-skip'); return; } } catch(e){}
	function hide(){
		if (done) return; done = true;
		var el = document.getElementById('stoja-preloader');
		if (!el) return;
		el.classList.add('stoja-hide');
		try { if (once) sessionStorage.setItem('stoja_seen','1'); } catch(e){}
		setTimeout(function(){ if (el.parentNode) el.parentNode.removeChild(el); }, __REMOVE__);
	}
	function onLoad(){ setTimeout(hide, Math.max(0, min - (Date.now() - start))); }
	if (document.readyState === 'complete') { onLoad(); } else { window.addEventListener('load', onLoad); }
	setTimeout(hide, 10000);
})();
JS;
		$js = str_replace(
			array( '__ONCE__', '__MIN__', '__REMOVE__' ),
			array( $o['once_session'] ? 'true' : 'false', (string) $min, (string) ( $fade + 100 ) ),
			$js
		);

		wp_register_style( 'stoja-preloader', false, array(), STOJA_PRELOADER_VERSION );
		wp_enqueue_style( 'stoja-preloader' );
		wp_add_inline_style( 'stoja-preloader', $css );

		wp_register_script( 'stoja-preloader', false, array(), STOJA_PRELOADER_VERSION, false );
		wp_enqueue_script( 'stoja-preloader' );
		wp_add_inline_script( 'stoja-preloader', $js );
	}

	public function markup() {
		if ( $this->printed || ! $this->should_show() ) {
			return;
		}
		$this->printed = true;
		$o    = $this->opts();
		$logo = $o['logo_id'] ? wp_get_attachment_image_url( (int) $o['logo_id'], 'full' ) : '';
		$anim = in_array( $o['animation'], $this->animation_keys(), true ) ? $o['animation'] : 'ring';
		if ( ! $logo && in_array( $anim, array( 'bounce', 'flip' ), true ) ) {
			$anim = 'dots'; // these two animate the logo, so fall back when there is none.
		}
		?>
<noscript><style>#stoja-preloader{display:none!important}</style></noscript>
<div id="stoja-preloader" class="stoja-<?php echo esc_attr( $anim ); ?>" role="status" aria-live="polite" aria-label="<?php esc_attr_e( 'Loading', 'myeasy-preloader' ); ?>">
	<?php if ( $logo ) : ?>
		<div class="stoja-logo-wrap"><img src="<?php echo esc_url( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>"></div>
	<?php elseif ( in_array( $anim, array( 'ring', 'ripple' ), true ) ) : ?>
		<div class="stoja-logo-wrap" style="width:60px;height:60px"></div>
	<?php endif; ?>
	<?php if ( '' !== trim( $o['text'] ) ) : ?>
		<div class="stoja-text"><?php echo esc_html( $o['text'] ); ?></div>
	<?php endif; ?>
	<?php
	$loader_spans = array(
		'dots'     => 3,
		'bars'     => 5,
		'progress' => 1,
	);
	if ( isset( $loader_spans[ $anim ] ) ) :
		?>
		<div class="stoja-loader" aria-hidden="true"><?php
		for ( $i = 0; $i < $loader_spans[ $anim ]; $i++ ) {
			echo '<span></span>';
		}
		?></div>
	<?php endif; ?>
</div>
		<?php
	}

	/* ---------------- Admin ---------------- */

	public function links( $links ) {
		array_unshift( $links, '<a href="' . esc_url( admin_url( 'options-general.php?page=myeasy-preloader' ) ) . '">' . esc_html__( 'Settings', 'myeasy-preloader' ) . '</a>' );
		return $links;
	}

	public function menu() {
		add_options_page( __( 'myEasy-Preloader', 'myeasy-preloader' ), __( 'myEasy-Preloader', 'myeasy-preloader' ), 'manage_options', 'myeasy-preloader', array( $this, 'page' ) );
	}

	public function register() {
		register_setting( 'stoja_group', self::OPT, array( 'sanitize_callback' => array( $this, 'sanitize' ) ) );
	}

	public function sanitize( $in ) {
		$d   = self::defaults();
		$out = array();
		$out['enabled']      = empty( $in['enabled'] ) ? 0 : 1;
		$out['once_session'] = empty( $in['once_session'] ) ? 0 : 1;
		$out['display_mode'] = ( isset( $in['display_mode'] ) && in_array( $in['display_mode'], array( 'all', 'home', 'include', 'exclude' ), true ) ) ? $in['display_mode'] : 'all';
		$out['pages']        = ( isset( $in['pages'] ) && is_array( $in['pages'] ) ) ? array_values( array_unique( array_map( 'intval', $in['pages'] ) ) ) : array();
		$out['logo_id']      = isset( $in['logo_id'] ) ? absint( $in['logo_id'] ) : 0;
		$out['text']         = isset( $in['text'] ) ? sanitize_text_field( $in['text'] ) : '';
		foreach ( array( 'bg_color', 'text_color', 'accent_color' ) as $k ) {
			$c = isset( $in[ $k ] ) ? sanitize_hex_color( $in[ $k ] ) : '';
			$out[ $k ] = $c ? $c : $d[ $k ];
		}
		$out['logo_width'] = isset( $in['logo_width'] ) ? min( 600, max( 40, absint( $in['logo_width'] ) ) ) : $d['logo_width'];
		$out['min_time']   = isset( $in['min_time'] ) ? min( 5000, absint( $in['min_time'] ) ) : $d['min_time'];
		$out['fade_time']  = isset( $in['fade_time'] ) ? min( 3000, absint( $in['fade_time'] ) ) : $d['fade_time'];
		$out['text_size']    = isset( $in['text_size'] ) ? min( 80, max( 10, absint( $in['text_size'] ) ) ) : $d['text_size'];
		$out['text_weight']  = ( isset( $in['text_weight'] ) && in_array( $in['text_weight'], array( '400', '600', '700', '800' ), true ) ) ? $in['text_weight'] : $d['text_weight'];
		$out['text_style']   = ( isset( $in['text_style'] ) && 'italic' === $in['text_style'] ) ? 'italic' : 'normal';
		$out['text_case']    = ( isset( $in['text_case'] ) && in_array( $in['text_case'], array( 'none', 'uppercase', 'capitalize' ), true ) ) ? $in['text_case'] : 'none';
		$out['text_font']    = ( isset( $in['text_font'] ) && in_array( $in['text_font'], array( 'inherit', 'sans', 'serif', 'mono', 'custom' ), true ) ) ? $in['text_font'] : 'inherit';
		$out['text_font_custom'] = isset( $in['text_font_custom'] ) ? $this->clean_font_name( $in['text_font_custom'] ) : '';
		$out['text_spacing'] = isset( $in['text_spacing'] ) ? min( 12, absint( $in['text_spacing'] ) ) : $d['text_spacing'];
		$out['animation']  = ( isset( $in['animation'] ) && in_array( $in['animation'], $this->animation_keys(), true ) ) ? $in['animation'] : 'ring';
		return $out;
	}

	public function admin_assets( $hook ) {
		if ( 'settings_page_myeasy-preloader' !== $hook ) {
			return;
		}
		wp_enqueue_media();
		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_style( 'stoja-admin', plugin_dir_url( __FILE__ ) . 'assets/admin.css', array(), STOJA_PRELOADER_VERSION );
		wp_enqueue_script( 'stoja-admin', plugin_dir_url( __FILE__ ) . 'assets/admin.js', array( 'jquery', 'wp-color-picker' ), STOJA_PRELOADER_VERSION, true );
		wp_localize_script(
			'stoja-admin',
			'stojaAdmin',
			array(
				'frameTitle'  => __( 'Select preloader logo', 'myeasy-preloader' ),
				'frameButton' => __( 'Use this logo', 'myeasy-preloader' ),
			)
		);
	}

	public function page() {
		if ( ! current_user_can( 'manage_options' ) ) {
			return;
		}
		$o    = $this->opts();
		$n    = self::OPT;
		$logo = $o['logo_id'] ? wp_get_attachment_image_url( (int) $o['logo_id'], 'medium' ) : '';
		?>
		<div class="wrap">
			<h1><?php esc_html_e( 'myEasy-Preloader', 'myeasy-preloader' ); ?></h1>
			<p class="description" style="margin-top:-6px"><?php echo wp_kses( sprintf( /* translators: %s: author name */ __( 'Developed by %s', 'myeasy-preloader' ), '<strong>Temitope Somuwa</strong>' ), array( 'strong' => array() ) ); ?></p>
			<div class="stoja-admin-grid">
			<div class="stoja-admin-form">
			<form method="post" action="options.php">
				<?php settings_fields( 'stoja_group' ); ?>
				<table class="form-table" role="presentation">
					<tr><th><?php esc_html_e( 'Enable preloader', 'myeasy-preloader' ); ?></th>
						<td><label><input type="checkbox" name="<?php echo esc_attr( $n ); ?>[enabled]" value="1" <?php checked( $o['enabled'], 1 ); ?>> <?php esc_html_e( 'Show on the front end', 'myeasy-preloader' ); ?></label></td></tr>
					<tr><th><?php esc_html_e( 'Logo', 'myeasy-preloader' ); ?></th>
						<td>
							<input type="hidden" id="stoja-logo-id" name="<?php echo esc_attr( $n ); ?>[logo_id]" value="<?php echo (int) $o['logo_id']; ?>">
							<div id="stoja-logo-preview" style="margin-bottom:10px;background:#f0f0f1;padding:10px;display:inline-block;min-width:120px;min-height:60px">
								<?php if ( $logo ) : ?><img src="<?php echo esc_url( $logo ); ?>" style="max-width:200px;height:auto;display:block"><?php endif; ?>
							</div><br>
							<button type="button" class="button" id="stoja-logo-select"><?php esc_html_e( 'Upload / Select Logo', 'myeasy-preloader' ); ?></button>
							<button type="button" class="button" id="stoja-logo-remove" <?php echo $logo ? '' : 'style="display:none"'; ?>><?php esc_html_e( 'Remove', 'myeasy-preloader' ); ?></button>
						</td></tr>
					<tr><th><label for="stoja-text"><?php esc_html_e( 'Text', 'myeasy-preloader' ); ?></label></th>
						<td><input type="text" id="stoja-text" class="regular-text" name="<?php echo esc_attr( $n ); ?>[text]" value="<?php echo esc_attr( $o['text'] ); ?>" placeholder="<?php echo esc_attr__( 'e.g. Loading, please wait…', 'myeasy-preloader' ); ?>"></td></tr>
					<tr><th><label for="stoja-text-size"><?php esc_html_e( 'Text size (px)', 'myeasy-preloader' ); ?></label></th>
						<td><input type="number" id="stoja-text-size" min="10" max="80" name="<?php echo esc_attr( $n ); ?>[text_size]" value="<?php echo (int) $o['text_size']; ?>">
						<p class="description"><?php esc_html_e( 'Automatically scaled down a little on phones.', 'myeasy-preloader' ); ?></p></td></tr>
					<tr><th><?php esc_html_e( 'Text style', 'myeasy-preloader' ); ?></th>
						<td>
							<select name="<?php echo esc_attr( $n ); ?>[text_font]" aria-label="<?php echo esc_attr__( 'Font', 'myeasy-preloader' ); ?>">
								<option value="inherit" <?php selected( $o['text_font'], 'inherit' ); ?>><?php esc_html_e( 'Theme font', 'myeasy-preloader' ); ?></option>
								<option value="sans" <?php selected( $o['text_font'], 'sans' ); ?>><?php esc_html_e( 'Sans-serif', 'myeasy-preloader' ); ?></option>
								<option value="serif" <?php selected( $o['text_font'], 'serif' ); ?>><?php esc_html_e( 'Serif', 'myeasy-preloader' ); ?></option>
								<option value="mono" <?php selected( $o['text_font'], 'mono' ); ?>><?php esc_html_e( 'Monospace', 'myeasy-preloader' ); ?></option>
								<option value="custom" <?php selected( $o['text_font'], 'custom' ); ?>><?php esc_html_e( 'Custom font name…', 'myeasy-preloader' ); ?></option>
							</select>
							<input type="text" id="stoja-font-custom" name="<?php echo esc_attr( $n ); ?>[text_font_custom]" value="<?php echo esc_attr( $o['text_font_custom'] ); ?>" maxlength="60" placeholder="<?php echo esc_attr__( 'e.g. Poppins', 'myeasy-preloader' ); ?>" aria-label="<?php echo esc_attr__( 'Custom font name', 'myeasy-preloader' ); ?>">
							<select name="<?php echo esc_attr( $n ); ?>[text_weight]" aria-label="<?php echo esc_attr__( 'Weight', 'myeasy-preloader' ); ?>">
								<option value="400" <?php selected( $o['text_weight'], '400' ); ?>><?php esc_html_e( 'Regular', 'myeasy-preloader' ); ?></option>
								<option value="600" <?php selected( $o['text_weight'], '600' ); ?>><?php esc_html_e( 'Semi-bold', 'myeasy-preloader' ); ?></option>
								<option value="700" <?php selected( $o['text_weight'], '700' ); ?>><?php esc_html_e( 'Bold', 'myeasy-preloader' ); ?></option>
								<option value="800" <?php selected( $o['text_weight'], '800' ); ?>><?php esc_html_e( 'Extra bold', 'myeasy-preloader' ); ?></option>
							</select>
							<select name="<?php echo esc_attr( $n ); ?>[text_style]" aria-label="<?php echo esc_attr__( 'Italic', 'myeasy-preloader' ); ?>">
								<option value="normal" <?php selected( $o['text_style'], 'normal' ); ?>><?php esc_html_e( 'Normal', 'myeasy-preloader' ); ?></option>
								<option value="italic" <?php selected( $o['text_style'], 'italic' ); ?>><?php esc_html_e( 'Italic', 'myeasy-preloader' ); ?></option>
							</select>
							<select name="<?php echo esc_attr( $n ); ?>[text_case]" aria-label="<?php echo esc_attr__( 'Capitalisation', 'myeasy-preloader' ); ?>">
								<option value="none" <?php selected( $o['text_case'], 'none' ); ?>><?php esc_html_e( 'As typed', 'myeasy-preloader' ); ?></option>
								<option value="uppercase" <?php selected( $o['text_case'], 'uppercase' ); ?>><?php esc_html_e( 'UPPERCASE', 'myeasy-preloader' ); ?></option>
								<option value="capitalize" <?php selected( $o['text_case'], 'capitalize' ); ?>><?php esc_html_e( 'Capitalize Each Word', 'myeasy-preloader' ); ?></option>
							</select>
						</td></tr>
					<tr><th><label for="stoja-text-spacing"><?php esc_html_e( 'Letter spacing (px)', 'myeasy-preloader' ); ?></label></th>
						<td><input type="number" id="stoja-text-spacing" min="0" max="12" name="<?php echo esc_attr( $n ); ?>[text_spacing]" value="<?php echo (int) $o['text_spacing']; ?>"></td></tr>
					<tr><th><?php esc_html_e( 'Logo width (px)', 'myeasy-preloader' ); ?></th>
						<td><input type="number" min="40" max="600" name="<?php echo esc_attr( $n ); ?>[logo_width]" value="<?php echo (int) $o['logo_width']; ?>"></td></tr>
					<tr><th><?php esc_html_e( 'Background colour', 'myeasy-preloader' ); ?></th>
						<td><input type="text" class="stoja-color" name="<?php echo esc_attr( $n ); ?>[bg_color]" value="<?php echo esc_attr( $o['bg_color'] ); ?>"></td></tr>
					<tr><th><?php esc_html_e( 'Text colour', 'myeasy-preloader' ); ?></th>
						<td><input type="text" class="stoja-color" name="<?php echo esc_attr( $n ); ?>[text_color]" value="<?php echo esc_attr( $o['text_color'] ); ?>"></td></tr>
					<tr><th><?php esc_html_e( 'Accent colour (spinner)', 'myeasy-preloader' ); ?></th>
						<td><input type="text" class="stoja-color" name="<?php echo esc_attr( $n ); ?>[accent_color]" value="<?php echo esc_attr( $o['accent_color'] ); ?>"></td></tr>
					<tr><th><?php esc_html_e( 'Animation', 'myeasy-preloader' ); ?></th>
						<td><select name="<?php echo esc_attr( $n ); ?>[animation]">
							<option value="ring" <?php selected( $o['animation'], 'ring' ); ?>><?php esc_html_e( 'Spinning ring', 'myeasy-preloader' ); ?></option>
							<option value="pulse" <?php selected( $o['animation'], 'pulse' ); ?>><?php esc_html_e( 'Pulse', 'myeasy-preloader' ); ?></option>
							<option value="dots" <?php selected( $o['animation'], 'dots' ); ?>><?php esc_html_e( 'Bouncing dots', 'myeasy-preloader' ); ?></option>
							<option value="bars" <?php selected( $o['animation'], 'bars' ); ?>><?php esc_html_e( 'Equaliser bars', 'myeasy-preloader' ); ?></option>
							<option value="progress" <?php selected( $o['animation'], 'progress' ); ?>><?php esc_html_e( 'Progress bar', 'myeasy-preloader' ); ?></option>
							<option value="ripple" <?php selected( $o['animation'], 'ripple' ); ?>><?php esc_html_e( 'Ripple', 'myeasy-preloader' ); ?></option>
							<option value="bounce" <?php selected( $o['animation'], 'bounce' ); ?>><?php esc_html_e( 'Bouncing logo (needs a logo)', 'myeasy-preloader' ); ?></option>
							<option value="flip" <?php selected( $o['animation'], 'flip' ); ?>><?php esc_html_e( 'Flipping logo (needs a logo)', 'myeasy-preloader' ); ?></option>
							<option value="none" <?php selected( $o['animation'], 'none' ); ?>><?php esc_html_e( 'None', 'myeasy-preloader' ); ?></option>
						</select></td></tr>
					<tr><th><?php esc_html_e( 'Minimum display time (ms)', 'myeasy-preloader' ); ?></th>
						<td><input type="number" min="0" max="5000" step="100" name="<?php echo esc_attr( $n ); ?>[min_time]" value="<?php echo (int) $o['min_time']; ?>">
						<p class="description"><?php esc_html_e( 'Prevents a flash on very fast pages.', 'myeasy-preloader' ); ?></p></td></tr>
					<tr><th><?php esc_html_e( 'Fade-out time (ms)', 'myeasy-preloader' ); ?></th>
						<td><input type="number" min="0" max="3000" step="100" name="<?php echo esc_attr( $n ); ?>[fade_time]" value="<?php echo (int) $o['fade_time']; ?>"></td></tr>
					<tr><th><?php esc_html_e( 'Display options', 'myeasy-preloader' ); ?></th>
						<td>
							<label><input type="checkbox" name="<?php echo esc_attr( $n ); ?>[once_session]" value="1" <?php checked( $o['once_session'], 1 ); ?>> <?php esc_html_e( 'Show only once per browser session', 'myeasy-preloader' ); ?></label><br>
						</td></tr>
					<tr><th><label for="stoja-display-mode"><?php esc_html_e( 'Where to show', 'myeasy-preloader' ); ?></label></th>
						<td><select id="stoja-display-mode" name="<?php echo esc_attr( $n ); ?>[display_mode]">
							<option value="all" <?php selected( $o['display_mode'], 'all' ); ?>><?php esc_html_e( 'All pages', 'myeasy-preloader' ); ?></option>
							<option value="home" <?php selected( $o['display_mode'], 'home' ); ?>><?php esc_html_e( 'Homepage only', 'myeasy-preloader' ); ?></option>
							<option value="include" <?php selected( $o['display_mode'], 'include' ); ?>><?php esc_html_e( 'Only on selected pages', 'myeasy-preloader' ); ?></option>
							<option value="exclude" <?php selected( $o['display_mode'], 'exclude' ); ?>><?php esc_html_e( 'On all pages except selected', 'myeasy-preloader' ); ?></option>
						</select></td></tr>
					<tr id="stoja-pages-row"><th><label for="stoja-pages"><?php esc_html_e( 'Select pages', 'myeasy-preloader' ); ?></label></th>
						<td>
							<select id="stoja-pages" name="<?php echo esc_attr( $n ); ?>[pages][]" multiple size="10" style="min-width:320px">
								<?php if ( 'posts' === get_option( 'show_on_front' ) ) : ?>
									<option value="0" <?php selected( in_array( 0, array_map( 'intval', (array) $o['pages'] ), true ) ); ?>><?php esc_html_e( 'Homepage (latest posts)', 'myeasy-preloader' ); ?></option>
								<?php endif; ?>
								<?php
								$sel = array_map( 'intval', (array) $o['pages'] );
								foreach ( get_pages( array( 'sort_column' => 'post_title', 'post_status' => 'publish' ) ) as $pg ) {
									printf( '<option value="%d" %s>%s</option>', (int) $pg->ID, selected( in_array( (int) $pg->ID, $sel, true ), true, false ), esc_html( $pg->post_title ) );
								}
								?>
							</select>
							<p class="description"><?php esc_html_e( 'Hold Ctrl (Windows) or Cmd (Mac) to select more than one page.', 'myeasy-preloader' ); ?></p>
						</td></tr>
				</table>
				<?php submit_button(); ?>
			</form>
			</div>
			<div class="stoja-admin-preview">
				<h2><?php esc_html_e( 'Live preview', 'myeasy-preloader' ); ?></h2>
				<div id="stoja-live-preview" class="stoja-ring" aria-hidden="true">
					<div class="stoja-pv-stage">
						<div class="stoja-logo-wrap">
							<?php if ( $logo ) : ?>
								<img src="<?php echo esc_url( $logo ); ?>" alt="">
							<?php else : ?>
								<img alt="">
							<?php endif; ?>
						</div>
						<div class="stoja-text"></div>
						<div class="stoja-loader"></div>
					</div>
				</div>
				<p><button type="button" class="button" id="stoja-preview-replay"><?php esc_html_e( 'Replay fade-out', 'myeasy-preloader' ); ?></button></p>
				<p class="description"><?php esc_html_e( 'The preview is scaled down and updates as you change settings. Theme fonts and your site\'s own fonts may look slightly different on the live site.', 'myeasy-preloader' ); ?></p>
			</div>
			</div>
			<p class="description"><?php esc_html_e( 'Tip: if you use a caching plugin, clear the cache after saving changes.', 'myeasy-preloader' ); ?></p>
		</div>
		<?php
	}
}

new Stoja_Preloader();