Customizer: Fix `click.preview` event handler for jump links and shift+clicks in preview.

* Prevent following jump links (starting with `#`), but instead scroll that element into view.
* Prevent following links clicked in the Customizer if shift key is pressed when clicking; this fixes an issue when trying to shift-click on a widget or nav menu item (#32681) to just focus on the control in the Customizer.

Fixes #26005.


git-svn-id: https://develop.svn.wordpress.org/trunk@36371 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2016-01-21 06:07:45 +00:00
parent 51aee5ab1b
commit 5600ca6bf4
1 changed files with 21 additions and 2 deletions

View File

@ -33,7 +33,8 @@
*/
api.Preview = api.Messenger.extend({
/**
* @param {string} url The URL of preview frame
* @param {object} params - Parameters to configure the messenger.
* @param {object} options - Extend any instance parameter or method with this object.
*/
initialize: function( params, options ) {
var self = this;
@ -42,9 +43,27 @@
this.body = $( document.body );
this.body.on( 'click.preview', 'a', function( event ) {
var link, isInternalJumpLink;
link = $( this );
isInternalJumpLink = ( '#' === link.attr( 'href' ).substr( 0, 1 ) );
event.preventDefault();
if ( isInternalJumpLink && '#' !== link.attr( 'href' ) ) {
$( link.attr( 'href' ) ).each( function() {
this.scrollIntoView();
} );
}
/*
* Note the shift key is checked so shift+click on widgets or
* nav menu items can just result on focusing on the corresponding
* control instead of also navigating to the URL linked to.
*/
if ( event.shiftKey || isInternalJumpLink ) {
return;
}
self.send( 'scroll', 0 );
self.send( 'url', $(this).prop('href') );
self.send( 'url', link.prop( 'href' ) );
});
// You cannot submit forms.