WordPress.org

Make WordPress Core

Changeset 31697


Ignore:
Timestamp:
03/10/2015 03:55:28 PM (4 years ago)
Author:
ocean90
Message:

Customizer: Add loading indicators for the Customizer preview.

props Fab1en, westonruter.
fixes #31196.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/themes.css

    r31579 r31697  
    13531353}
    13541354
     1355#customize-preview.wp-full-overlay-main {
     1356    background: url(../images/spinner.gif) no-repeat center center;
     1357    -webkit-background-size: 20px 20px;
     1358    background-size: 20px 20px;
     1359}
     1360
     1361#customize-preview.wp-full-overlay-main.iframe-ready {
     1362    background: none;
     1363}
     1364
    13551365.wp-full-overlay-sidebar .wp-full-overlay-header {
    13561366    position: absolute;
     
    17111721    }
    17121722
     1723    #customize-preview.wp-full-overlay-main,
    17131724    .customize-loading #customize-container,
    17141725    .theme-install-overlay .wp-full-overlay-main {
  • trunk/src/wp-admin/js/customize-controls.js

    r31661 r31697  
    19151915
    19161916            this.bind( 'ready', function ( data ) {
     1917
     1918                this.container.addClass( 'iframe-ready' );
     1919
    19171920                if ( ! data ) {
    19181921                    return;
     
    22182221            var self = this;
    22192222
     2223            // Display loading indicator
     2224            this.send( 'loading-initiated' );
     2225
    22202226            this.abort();
    22212227
     
    22502256
    22512257            this.loading.fail( function( reason, location ) {
    2252                 if ( 'redirect' === reason && location )
     2258                self.send( 'loading-failed' );
     2259                if ( 'redirect' === reason && location ) {
    22532260                    self.previewUrl( location );
     2261                }
    22542262
    22552263                if ( 'logged out' === reason ) {
     
    22622270                }
    22632271
    2264                 if ( 'cheatin' === reason )
     2272                if ( 'cheatin' === reason ) {
    22652273                    self.cheatin();
     2274                }
    22662275            });
    22672276        },
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r31540 r31697  
    502502        add_action( 'wp_head', array( $this, 'customize_preview_base' ) );
    503503        add_action( 'wp_head', array( $this, 'customize_preview_html5' ) );
     504        add_action( 'wp_head', array( $this, 'customize_preview_loading_style' ) );
    504505        add_action( 'wp_footer', array( $this, 'customize_preview_settings' ), 20 );
    505506        add_action( 'shutdown', array( $this, 'customize_preview_signature' ), 1000 );
     
    544545
    545546    /**
    546      * Print a workaround to handle HTML5 tags in IE < 9
     547     * Print a workaround to handle HTML5 tags in IE < 9.
    547548     *
    548549     * @since 3.4.0
     
    562563
    563564    /**
     565     * Print CSS for loading indicators for the Customizer preview.
     566     *
     567     * @since 4.2.0
     568     */
     569    public function customize_preview_loading_style() {
     570        ?><style>
     571            body.wp-customizer-unloading {
     572                opacity: 0.25;
     573                cursor: progress !important;
     574                -webkit-transition: opacity 0.5s;
     575                transition: opacity 0.5s;
     576            }
     577            body.wp-customizer-unloading * {
     578                pointer-events: none !important;
     579            }
     580        </style><?php
     581    }
     582
     583    /**
    564584     * Print JavaScript settings for preview frame.
    565585     *
     
    573593            'activeSections' => array(),
    574594            'activeControls' => array(),
     595            'l10n' => array(
     596                'loading'  => __( 'Loading ...' ),
     597            ),
    575598        );
    576599
  • trunk/src/wp-includes/js/customize-preview.js

    r30891 r31697  
    116116        } );
    117117
     118        // Display a loading indicator when preview is reloading, and remove on failure.
     119        api.preview.bind( 'loading-initiated', function () {
     120            $( 'body' ).addClass( 'wp-customizer-unloading' );
     121            $( 'html' ).prop( 'title', api.settings.l10n.loading );
     122        });
     123        api.preview.bind( 'loading-failed', function () {
     124            $( 'body' ).removeClass( 'wp-customizer-unloading' );
     125            $( 'html' ).prop( 'title', '' );
     126        });
     127
    118128        /* Custom Backgrounds */
    119129        bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
Note: See TracChangeset for help on using the changeset viewer.