Changeset 31697

Timestamp:

03/10/2015 03:55:28 PM (10 years ago)

Author:

ocean90

Message:

Customizer: Add loading indicators for the Customizer preview.

props Fab1en, westonruter.
fixes #31196.

Location:

trunk/src

Files:

• wp-admin/css/themes.css (modified) (2 diffs)
• wp-admin/js/customize-controls.js (modified) (4 diffs)
• wp-includes/class-wp-customize-manager.php (modified) (4 diffs)
• wp-includes/js/customize-preview.js (modified) (1 diff)

trunk/src/wp-admin/css/themes.css

@@ -1353 +1353 @@
 }
 
+#customize-preview.wp-full-overlay-main {
+    background: url(../images/spinner.gif) no-repeat center center;
+    -webkit-background-size: 20px 20px;
+    background-size: 20px 20px;
+}
+
+#customize-preview.wp-full-overlay-main.iframe-ready {
+    background: none;
+}
+
 .wp-full-overlay-sidebar .wp-full-overlay-header {
     position: absolute;
@@ -1711 +1721 @@
     }
 
+    #customize-preview.wp-full-overlay-main,
     .customize-loading #customize-container,
     .theme-install-overlay .wp-full-overlay-main {

trunk/src/wp-admin/js/customize-controls.js

@@ -1915 +1915 @@
 
             this.bind( 'ready', function ( data ) {
+
+                this.container.addClass( 'iframe-ready' );
+
                 if ( ! data ) {
                     return;
@@ -2218 +2221 @@
             var self = this;
 
+            // Display loading indicator
+            this.send( 'loading-initiated' );
+
             this.abort();
 
@@ -2250 +2256 @@
 
             this.loading.fail( function( reason, location ) {
-                if ( 'redirect' === reason && location )
+                self.send( 'loading-failed' );
+                if ( 'redirect' === reason && location ) {
                     self.previewUrl( location );
+                }
 
                 if ( 'logged out' === reason ) {
@@ -2262 +2270 @@
                 }
 
-                if ( 'cheatin' === reason )
+                if ( 'cheatin' === reason ) {
                     self.cheatin();
+                }
             });
         },

trunk/src/wp-includes/class-wp-customize-manager.php

@@ -502 +502 @@
         add_action( 'wp_head', array( $this, 'customize_preview_base' ) );
         add_action( 'wp_head', array( $this, 'customize_preview_html5' ) );
+        add_action( 'wp_head', array( $this, 'customize_preview_loading_style' ) );
         add_action( 'wp_footer', array( $this, 'customize_preview_settings' ), 20 );
         add_action( 'shutdown', array( $this, 'customize_preview_signature' ), 1000 );
@@ -544 +545 @@
 
     /**
-     * Print a workaround to handle HTML5 tags in IE < 9
+     * Print a workaround to handle HTML5 tags in IE < 9.
      *
      * @since 3.4.0
@@ -562 +563 @@
 
     /**
+     * Print CSS for loading indicators for the Customizer preview.
+     *
+     * @since 4.2.0
+     */
+    public function customize_preview_loading_style() {
+        ?><style>
+            body.wp-customizer-unloading {
+                opacity: 0.25;
+                cursor: progress !important;
+                -webkit-transition: opacity 0.5s;
+                transition: opacity 0.5s;
+            }
+            body.wp-customizer-unloading * {
+                pointer-events: none !important;
+            }
+        </style><?php
+    }
+
+    /**
      * Print JavaScript settings for preview frame.
      *
@@ -573 +593 @@
             'activeSections' => array(),
             'activeControls' => array(),
+            'l10n' => array(
+                'loading'  => __( 'Loading ...' ),
+            ),
         );
 

trunk/src/wp-includes/js/customize-preview.js

@@ -116 +116 @@
         } );
 
+        // Display a loading indicator when preview is reloading, and remove on failure.
+        api.preview.bind( 'loading-initiated', function () {
+            $( 'body' ).addClass( 'wp-customizer-unloading' );
+            $( 'html' ).prop( 'title', api.settings.l10n.loading );
+        });
+        api.preview.bind( 'loading-failed', function () {
+            $( 'body' ).removeClass( 'wp-customizer-unloading' );
+            $( 'html' ).prop( 'title', '' );
+        });
+
         /* Custom Backgrounds */
         bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {