Make WordPress Core

Ticket #31196: 31196.3.patch

File 31196.3.patch, 2.8 KB (added by Fab1en, 10 years ago)

Display a loading indicator when customizer is busy

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

    diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
    index 565f2fa..fc39880 100644
    a b body.full-overlay-active { 
    13571357        height: 100%;
    13581358}
    13591359
     1360#customize-preview.wp-full-overlay-main {
     1361        background: url(../images/spinner.gif) no-repeat;
     1362        -webkit-background-size: 20px 20px;
     1363        background-size: 20px 20px;
     1364        background-position: center center;
     1365}
     1366
    13601367.wp-full-overlay-sidebar .wp-full-overlay-header {
    13611368        position: absolute;
    13621369        left: 0;
  • src/wp-admin/js/customize-controls.js

    diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
    index 7c4a631..af9d886 100644
    a b  
    17691769                refresh: function() {
    17701770                        var self = this;
    17711771
     1772                        // Display loading indicator
     1773                        this.send( 'loading' );
     1774
    17721775                        this.abort();
    17731776
    17741777                        this.loading = new api.PreviewFrame({
  • src/wp-includes/class-wp-customize-manager.php

    diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php
    index b695271..4a6e4a5 100644
    a b final class WP_Customize_Manager { 
    432432                add_action( 'wp', array( $this, 'customize_preview_override_404_status' ) );
    433433                add_action( 'wp_head', array( $this, 'customize_preview_base' ) );
    434434                add_action( 'wp_head', array( $this, 'customize_preview_html5' ) );
     435                add_action( 'wp_head', array( $this, 'customize_preview_loading_style' ) );
    435436                add_action( 'wp_footer', array( $this, 'customize_preview_settings' ), 20 );
    436437                add_action( 'shutdown', array( $this, 'customize_preview_signature' ), 1000 );
    437438                add_filter( 'wp_die_handler', array( $this, 'remove_preview_signature' ) );
    final class WP_Customize_Manager { 
    491492                <![endif]--><?php
    492493        }
    493494
     495        public function customize_preview_loading_style() {
     496                ?><style>
     497                        body.customizer-navigating-away {
     498                                opacity: 0.25;
     499                                cursor: progress !important;
     500                        }
     501                        body.customizer-navigating-away * {
     502                                pointer-events: none !important;
     503                        }
     504                </style><?php
     505        }
     506
    494507        /**
    495508         * Print JavaScript settings for preview frame.
    496509         *
  • src/wp-includes/js/customize-preview.js

    diff --git a/src/wp-includes/js/customize-preview.js b/src/wp-includes/js/customize-preview.js
    index 82f7bb8..44ba23b 100644
    a b  
    115115                        activeControls: api.settings.activeControls
    116116                } );
    117117
     118                // Display a loading indicator when preview is reloading
     119                api.preview.bind( 'loading', function () {
     120                        $( 'body' ).addClass( 'customizer-navigating-away' );
     121                        $( 'html' ).prop( 'title', 'Loading...' );
     122                });
     123
    118124                /* Custom Backgrounds */
    119125                bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
    120126                        return 'background_' + prop;