Changeset 36371

Timestamp:

01/21/2016 06:07:45 AM (7 years ago)

Author:

westonruter

Message:

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.

File:

• trunk/src/wp-includes/js/customize-preview.js (modified) (2 diffs)

trunk/src/wp-includes/js/customize-preview.js

@@ -34 +34 @@
     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 ) {
@@ -43 +44 @@
             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' ) );
             });