WordPress.org

Make WordPress Core

Ticket #31196: 31196.patch

File 31196.patch, 2.4 KB (added by Fab1en, 5 years ago)

Display a loading indicator when user navigate around during preview

  • 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..79bd146 100644
    a b  
    21532153                        api.previewer.previewUrl( api.settings.url.home );
    21542154                }
    21552155
     2156                // Trigger 'unload' event when user navigate around during preview
     2157                api.previewer.previewUrl.bind(function () {
     2158                        api.previewer.send( 'unload' );
     2159                });
     2160
    21562161                // Save and activated states
    21572162                (function() {
    21582163                        var state = new api.Values(),
  • 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..4020246 100644
    a b  
    115115                        activeControls: api.settings.activeControls
    116116                } );
    117117
     118                // Display a loading indicator when user navigate around during preview
     119                api.preview.bind( 'unload', 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;