class-kirki-scripts-loading.php (3333B)
1 <?php 2 /** 3 * Adds a custom loading icon when the previewer refreshes. 4 * 5 * @package Kirki 6 * @subpackage Controls 7 * @copyright Copyright (c) 2016, Aristeides Stathopoulos 8 * @license http://opensource.org/licenses/https://opensource.org/licenses/MIT 9 * @since 2.2.0 10 */ 11 12 if ( ! class_exists( 'Kirki_Scripts_Loading' ) ) { 13 14 /** 15 * Modifies the loading overlay. 16 */ 17 class Kirki_Scripts_Loading { 18 19 /** 20 * Constructor. 21 * 22 * @access public 23 */ 24 public function __construct() { 25 global $wp_customize; 26 if ( ! $wp_customize ) { 27 return; 28 } 29 30 // Allow disabling the custom loader using the kirki/config filter. 31 $config = apply_filters( 'kirki/config', array() ); 32 if ( isset( $config['disable_loader'] ) && true === $config['disable_loader'] ) { 33 return; 34 } 35 36 // Add the "loading" icon. 37 add_action( 'wp_footer', array( $this, 'add_loader_to_footer' ) ); 38 add_action( 'wp_head', array( $this, 'add_loader_styles_to_header' ), 99 ); 39 $this->remove_default_loading_styles(); 40 } 41 42 /** 43 * Adds a custom "loading" div $ its styles when changes are made to the customizer. 44 * 45 * @access public 46 */ 47 public function add_loader_to_footer() { 48 ?> 49 <div class="kirki-customizer-loading-wrapper"> 50 <span class="kirki-customizer-loading"></span> 51 </div> 52 <?php 53 } 54 55 /** 56 * Adds the loader CSS to our `<head>`. 57 * 58 * @access public 59 */ 60 public function add_loader_styles_to_header() { 61 ?> 62 <style> 63 body.wp-customizer-unloading { 64 opacity: 1; 65 cursor: progress !important; 66 -webkit-transition: none; 67 transition: none; 68 } 69 body.wp-customizer-unloading * { 70 pointer-events: none !important; 71 } 72 .kirki-customizer-loading-wrapper { 73 width: 100%; 74 height: 100%; 75 position: fixed; 76 top: 0; 77 left: 0; 78 background: rgba(255,255,255,0.83); 79 z-index: 999999; 80 display: none; 81 opacity: 0; 82 -webkit-transition: opacity 0.5s; 83 transition: opacity 0.5s; 84 background-image: url("<?php echo esc_url_raw( Kirki::$url ); ?>/assets/images/kirki-logo.svg"); 85 background-repeat: no-repeat; 86 background-position: center center; 87 } 88 body.wp-customizer-unloading .kirki-customizer-loading-wrapper { 89 display: block; 90 opacity: 1; 91 } 92 .kirki-customizer-loading-wrapper .kirki-customizer-loading { 93 position: absolute; 94 width: 60px; 95 height: 60px; 96 top: 50%; 97 left: 50%; 98 margin: -30px; 99 background-color: rgba(0,0,0,.83); 100 border-radius: 100%; 101 -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; 102 animation: sk-scaleout 1.0s infinite ease-in-out; 103 } 104 @-webkit-keyframes sk-scaleout { 105 0% { -webkit-transform: scale(0) } 106 100% { 107 -webkit-transform: scale(1.0); 108 opacity: 0; 109 } 110 } 111 @keyframes sk-scaleout { 112 0% { 113 -webkit-transform: scale(0); 114 transform: scale(0); 115 } 116 100% { 117 -webkit-transform: scale(1.0); 118 transform: scale(1.0); 119 opacity: 0; 120 } 121 } 122 </style> 123 <?php 124 } 125 126 /** 127 * Removes the default loader styles from WP Core. 128 * 129 * @access public 130 */ 131 public function remove_default_loading_styles() { 132 global $wp_customize; 133 remove_action( 'wp_head', array( $wp_customize, 'customize_preview_loading_style' ) ); 134 } 135 } 136 }