Make WordPress Core

Changeset 38811


Ignore:
Timestamp:
10/19/2016 02:06:00 AM (8 years ago)
Author:
westonruter
Message:

Customize: Split out link click.preview and form submit.preview event handlers from anonymous functions into named methods on wp.customize.Preview for extensibility.

See #30937.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/customize-preview.js

    r38810 r38811  
    106106
    107107            preview.body = $( document.body );
     108
    108109            preview.body.on( 'click.preview', 'a', function( event ) {
    109                 var link, isInternalJumpLink;
    110                 link = $( this );
    111 
    112                 // No-op if the anchor is not a link.
    113                 if ( _.isUndefined( link.attr( 'href' ) ) ) {
    114                     return;
    115                 }
    116 
    117                 isInternalJumpLink = ( '#' === link.attr( 'href' ).substr( 0, 1 ) );
    118 
    119                 // Allow internal jump links to behave normally without preventing default.
    120                 if ( isInternalJumpLink ) {
    121                     return;
    122                 }
    123 
    124                 // If the link is not previewable, prevent the browser from navigating to it.
    125                 if ( ! api.isLinkPreviewable( link[0] ) ) {
    126                     wp.a11y.speak( api.settings.l10n.linkUnpreviewable );
    127                     event.preventDefault();
    128                     return;
    129                 }
    130 
    131                 // If not in an iframe, then allow the link click to proceed normally since the state query params are added.
    132                 if ( ! api.settings.channel ) {
    133                     return;
    134                 }
    135 
    136                 // Prevent initiating navigating from click and instead rely on sending url message to pane.
    137                 event.preventDefault();
    138 
    139                 /*
    140                  * Note the shift key is checked so shift+click on widgets or
    141                  * nav menu items can just result on focusing on the corresponding
    142                  * control instead of also navigating to the URL linked to.
    143                  */
    144                 if ( event.shiftKey ) {
    145                     return;
    146                 }
    147 
    148                 // Note: It's not relevant to send scroll because sending url message will have the same effect.
    149                 preview.send( 'url', link.prop( 'href' ) );
     110                preview.handleLinkClick( event );
    150111            } );
    151112
    152113            preview.body.on( 'submit.preview', 'form', function( event ) {
    153                 var urlParser = document.createElement( 'a' );
    154                 urlParser.href = this.action;
    155 
    156                 // If the link is not previewable, prevent the browser from navigating to it.
    157                 if ( 'GET' !== this.method.toUpperCase() || ! api.isLinkPreviewable( urlParser ) ) {
    158                     wp.a11y.speak( api.settings.l10n.formUnpreviewable );
    159                     event.preventDefault();
    160                     return;
    161                 }
    162 
    163                 // If not in an iframe, then allow the form submission to proceed normally with the state inputs injected.
    164                 if ( ! api.settings.channel ) {
    165                     return;
    166                 }
    167 
    168                 /*
    169                  * If the default wasn't prevented already (in which case the form
    170                  * submission is already being handled by JS), and if it has a GET
    171                  * request method, then take the serialized form data and add it as
    172                  * a query string to the action URL and send this in a url message
    173                  * to the customizer pane so that it will be loaded. If the form's
    174                  * action points to a non-previewable URL, the customizer pane's
    175                  * previewUrl setter will reject it so that the form submission is
    176                  * a no-op, which is the same behavior as when clicking a link to an
    177                  * external site in the preview.
    178                  */
    179                 if ( ! event.isDefaultPrevented() ) {
    180                     if ( urlParser.search.length > 1 ) {
    181                         urlParser.search += '&';
    182                     }
    183                     urlParser.search += $( this ).serialize();
    184                     api.preview.send( 'url', urlParser.href );
    185                 }
    186 
    187                 // Prevent default since navigation should be done via sending url message or via JS submit handler.
    188                 event.preventDefault();
    189             });
     114                preview.handleFormSubmit( event );
     115            } );
    190116
    191117            preview.window = $( window );
     
    200126                });
    201127            }
     128        },
     129
     130        /**
     131         * Handle link clicks in preview.
     132         *
     133         * @since 4.7.0
     134         *
     135         * @param {jQuery.Event} event Event.
     136         */
     137        handleLinkClick: function( event ) {
     138            var preview = this, link, isInternalJumpLink;
     139            link = $( event.target );
     140
     141            // No-op if the anchor is not a link.
     142            if ( _.isUndefined( link.attr( 'href' ) ) ) {
     143                return;
     144            }
     145
     146            isInternalJumpLink = ( '#' === link.attr( 'href' ).substr( 0, 1 ) );
     147
     148            // Allow internal jump links to behave normally without preventing default.
     149            if ( isInternalJumpLink ) {
     150                return;
     151            }
     152
     153            // If the link is not previewable, prevent the browser from navigating to it.
     154            if ( ! api.isLinkPreviewable( link[0] ) ) {
     155                wp.a11y.speak( api.settings.l10n.linkUnpreviewable );
     156                event.preventDefault();
     157                return;
     158            }
     159
     160            // If not in an iframe, then allow the link click to proceed normally since the state query params are added.
     161            if ( ! api.settings.channel ) {
     162                return;
     163            }
     164
     165            // Prevent initiating navigating from click and instead rely on sending url message to pane.
     166            event.preventDefault();
     167
     168            /*
     169             * Note the shift key is checked so shift+click on widgets or
     170             * nav menu items can just result on focusing on the corresponding
     171             * control instead of also navigating to the URL linked to.
     172             */
     173            if ( event.shiftKey ) {
     174                return;
     175            }
     176
     177            // Note: It's not relevant to send scroll because sending url message will have the same effect.
     178            preview.send( 'url', link.prop( 'href' ) );
     179        },
     180
     181        /**
     182         * Handle form submit.
     183         *
     184         * @since 4.7.0
     185         *
     186         * @param {jQuery.Event} event Event.
     187         */
     188        handleFormSubmit: function( event ) {
     189            var preview = this, urlParser, form;
     190            urlParser = document.createElement( 'a' );
     191            form = $( event.target );
     192            urlParser.href = form.prop( 'action' );
     193
     194            // If the link is not previewable, prevent the browser from navigating to it.
     195            if ( 'GET' !== form.prop( 'method' ).toUpperCase() || ! api.isLinkPreviewable( urlParser ) ) {
     196                wp.a11y.speak( api.settings.l10n.formUnpreviewable );
     197                event.preventDefault();
     198                return;
     199            }
     200
     201            // If not in an iframe, then allow the form submission to proceed normally with the state inputs injected.
     202            if ( ! api.settings.channel ) {
     203                return;
     204            }
     205
     206            /*
     207             * If the default wasn't prevented already (in which case the form
     208             * submission is already being handled by JS), and if it has a GET
     209             * request method, then take the serialized form data and add it as
     210             * a query string to the action URL and send this in a url message
     211             * to the customizer pane so that it will be loaded. If the form's
     212             * action points to a non-previewable URL, the customizer pane's
     213             * previewUrl setter will reject it so that the form submission is
     214             * a no-op, which is the same behavior as when clicking a link to an
     215             * external site in the preview.
     216             */
     217            if ( ! event.isDefaultPrevented() ) {
     218                if ( urlParser.search.length > 1 ) {
     219                    urlParser.search += '&';
     220                }
     221                urlParser.search += form.serialize();
     222                preview.send( 'url', urlParser.href );
     223            }
     224
     225            // Prevent default since navigation should be done via sending url message or via JS submit handler.
     226            event.preventDefault();
    202227        }
    203228    });
Note: See TracChangeset for help on using the changeset viewer.