wp/wp-admin/js/customize-controls.js
changeset 19 3d72ae0968f4
parent 18 be944660c56a
child 21 48c4eec2b7e6
equal deleted inserted replaced
18:be944660c56a 19:3d72ae0968f4
     3  */
     3  */
     4 
     4 
     5 /* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer, console, confirm */
     5 /* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer, console, confirm */
     6 (function( exports, $ ){
     6 (function( exports, $ ){
     7 	var Container, focus, normalizedTransitionendEventName, api = wp.customize;
     7 	var Container, focus, normalizedTransitionendEventName, api = wp.customize;
       
     8 
       
     9 	var reducedMotionMediaQuery = window.matchMedia( '(prefers-reduced-motion: reduce)' );
       
    10 	var isReducedMotion = reducedMotionMediaQuery.matches;
       
    11 	reducedMotionMediaQuery.addEventListener( 'change' , function handleReducedMotionChange( event ) {
       
    12 		isReducedMotion = event.matches;
       
    13 	});
     8 
    14 
     9 	api.OverlayNotification = api.Notification.extend(/** @lends wp.customize.OverlayNotification.prototype */{
    15 	api.OverlayNotification = api.Notification.extend(/** @lends wp.customize.OverlayNotification.prototype */{
    10 
    16 
    11 		/**
    17 		/**
    12 		 * Whether the notification should show a loading spinner.
    18 		 * Whether the notification should show a loading spinner.
   687 	 *
   693 	 *
   688 	 * @param {Object}   [params]
   694 	 * @param {Object}   [params]
   689 	 * @param {Function} [params.completeCallback]
   695 	 * @param {Function} [params.completeCallback]
   690 	 */
   696 	 */
   691 	focus = function ( params ) {
   697 	focus = function ( params ) {
   692 		var construct, completeCallback, focus, focusElement;
   698 		var construct, completeCallback, focus, focusElement, sections;
   693 		construct = this;
   699 		construct = this;
   694 		params = params || {};
   700 		params = params || {};
   695 		focus = function () {
   701 		focus = function () {
       
   702 			// If a child section is currently expanded, collapse it.
       
   703 			if ( construct.extended( api.Panel ) ) {
       
   704 				sections = construct.sections();
       
   705 				if ( 1 < sections.length ) {
       
   706 					sections.forEach( function ( section ) {
       
   707 						if ( section.expanded() ) {
       
   708 							section.collapse();
       
   709 						}
       
   710 					} );
       
   711 				}
       
   712 			}
       
   713 
   696 			var focusContainer;
   714 			var focusContainer;
   697 			if ( ( construct.extended( api.Panel ) || construct.extended( api.Section ) ) && construct.expanded && construct.expanded() ) {
   715 			if ( ( construct.extended( api.Panel ) || construct.extended( api.Section ) ) && construct.expanded && construct.expanded() ) {
   698 				focusContainer = construct.contentContainer;
   716 				focusContainer = construct.contentContainer;
   699 			} else {
   717 			} else {
   700 				focusContainer = construct.container;
   718 				focusContainer = construct.container;
  1262 		 *
  1280 		 *
  1263 		 * @param {function} completeCallback Function to be called after transition is completed.
  1281 		 * @param {function} completeCallback Function to be called after transition is completed.
  1264 		 * @return {void}
  1282 		 * @return {void}
  1265 		 */
  1283 		 */
  1266 		_animateChangeExpanded: function( completeCallback ) {
  1284 		_animateChangeExpanded: function( completeCallback ) {
  1267 			// Return if CSS transitions are not supported.
  1285 			// Return if CSS transitions are not supported or if reduced motion is enabled.
  1268 			if ( ! normalizedTransitionendEventName ) {
  1286 			if ( ! normalizedTransitionendEventName || isReducedMotion ) {
  1269 				if ( completeCallback ) {
  1287 				// Schedule the callback until the next tick to prevent focus loss.
  1270 					completeCallback();
  1288 				_.defer( function () {
  1271 				}
  1289 					if ( completeCallback ) {
       
  1290 						completeCallback();
       
  1291 					}
       
  1292 				} );
  1272 				return;
  1293 				return;
  1273 			}
  1294 			}
  1274 
  1295 
  1275 			var construct = this,
  1296 			var construct = this,
  1276 				content = construct.contentContainer,
  1297 				content = construct.contentContainer,
  8312 				urlParser.search = $.param( queryParams );
  8333 				urlParser.search = $.param( queryParams );
  8313 				history.replaceState( {}, document.title, urlParser.href );
  8334 				history.replaceState( {}, document.title, urlParser.href );
  8314 			}
  8335 			}
  8315 
  8336 
  8316 			/**
  8337 			/**
       
  8338 			 * Displays a Site Editor notification when a block theme is activated.
       
  8339 			 *
       
  8340 			 * @since 4.9.0
       
  8341 			 *
       
  8342 			 * @param {string} [notification] - A notification to display.
       
  8343 			 * @return {void}
       
  8344 			 */
       
  8345 			function addSiteEditorNotification( notification ) {
       
  8346 				api.notifications.add( new api.Notification( 'site_editor_block_theme_notice', {
       
  8347 					message: notification,
       
  8348 					type: 'info',
       
  8349 					dismissible: false,
       
  8350 					render: function() {
       
  8351 						var notification = api.Notification.prototype.render.call( this ),
       
  8352 							button = notification.find( 'button.switch-to-editor' );
       
  8353 
       
  8354 						button.on( 'click', function( event ) {
       
  8355 							event.preventDefault();
       
  8356 							location.assign( button.data( 'action' ) );
       
  8357 						} );
       
  8358 
       
  8359 						return notification;
       
  8360 					}
       
  8361 				} ) );
       
  8362 			}
       
  8363 
       
  8364 			/**
  8317 			 * Dismiss autosave.
  8365 			 * Dismiss autosave.
  8318 			 *
  8366 			 *
  8319 			 * @return {void}
  8367 			 * @return {void}
  8320 			 */
  8368 			 */
  8321 			function dismissAutosave() {
  8369 			function dismissAutosave() {
  8384 			if ( removedQueryParams.length > 0 ) {
  8432 			if ( removedQueryParams.length > 0 ) {
  8385 				stripParamsFromLocation( removedQueryParams );
  8433 				stripParamsFromLocation( removedQueryParams );
  8386 			}
  8434 			}
  8387 			if ( api.settings.changeset.latestAutoDraftUuid || api.settings.changeset.hasAutosaveRevision ) {
  8435 			if ( api.settings.changeset.latestAutoDraftUuid || api.settings.changeset.hasAutosaveRevision ) {
  8388 				addAutosaveRestoreNotification();
  8436 				addAutosaveRestoreNotification();
       
  8437 			}
       
  8438 			var shouldDisplayBlockThemeNotification = !! parseInt( $( '#customize-info' ).data( 'block-theme' ), 10 );
       
  8439 			if (shouldDisplayBlockThemeNotification) {
       
  8440 				addSiteEditorNotification( api.l10n.blockThemeNotification );
  8389 			}
  8441 			}
  8390 		})();
  8442 		})();
  8391 
  8443 
  8392 		// Check if preview url is valid and load the preview frame.
  8444 		// Check if preview url is valid and load the preview frame.
  8393 		if ( api.previewer.previewUrl() ) {
  8445 		if ( api.previewer.previewUrl() ) {