WordPress.org
Get WordPress

Make WordPress Core

Changeset 39221


Ignore:
Timestamp:
11/14/2016 11:40:55 AM (9 years ago)
Author:
davidakennedy
Message:

Twenty Seventeen: Make sure theme JavaScript follows proper coding standards

Props sstoqnov, afercia.

Fixes #38752.

Location:
trunk/src/wp-content/themes/twentyseventeen/assets/js
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js

    r38986 r39221  
    66 */
    77
    8 ( function() {
     8(function() {
    99    wp.customize.bind( 'ready', function() {
    1010
    … …  
    2525        });
    2626
    27         // Detect when the front page sections section is expanded (or closed) so we can adjust the preview accordingly
     27        // Detect when the front page sections section is expanded (or closed) so we can adjust the preview accordingly.
    2828        wp.customize.section( 'theme_options' ).expanded.bind( function( isExpanding ) {
    2929
    30             // Value of isExpanding will = true if you're entering the section, false if you're leaving it
    31             wp.customize.previewer.send( 'section-highlight', { expanded: isExpanding } );
    32         } );
    33     } );
    34 } )( jQuery );
     30            // Value of isExpanding will = true if you're entering the section, false if you're leaving it.
     31            wp.customize.previewer.send( 'section-highlight', { expanded: isExpanding });
     32        });
     33    });
     34})( jQuery );

  • trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js

    r39220 r39221  
    55 */
    66
    7 ( function( $ ) {
     7(function( $ ) {
    88
    9     // Collect information from customize-controls.js about which panels are opening
     9    // Collect information from customize-controls.js about which panels are opening.
    1010    wp.customize.bind( 'preview-ready', function() {
    1111        wp.customize.preview.bind( 'section-highlight', function( data ) {
    … …  
    2323                        duration: 600,
    2424                        offset: { 'top': -70 } // Account for sticky menu.
    25                     } );
     25                    });
    2626                });
    2727
    28             // If we've left the panel, hide the placeholders and scroll back to the top
     28            // If we've left the panel, hide the placeholders and scroll back to the top.
    2929            } else {
    3030                $( 'body' ).removeClass( 'highlight-front-sections' );
    31                 $( '.panel-placeholder' ).slideUp( 200 ); // Don't change scroll when leaving - it's likely to have unintended consequences.
     31                // Don't change scroll when leaving - it's likely to have unintended consequences.
     32                $( '.panel-placeholder' ).slideUp( 200 );
    3233            }
    33         } );
    34     } );
     34        });
     35    });
    3536
    3637    // Site title and description.
    … …  
    3839        value.bind( function( to ) {
    3940            $( '.site-title a' ).text( to );
    40         } );
    41     } );
     41        });
     42    });
    4243    wp.customize( 'blogdescription', function( value ) {
    4344        value.bind( function( to ) {
    4445            $( '.site-description' ).text( to );
    45         } );
    46     } );
     46        });
     47    });
    4748
    4849    // Header text color.
    … …  
    5051        value.bind( function( to ) {
    5152            if ( 'blank' === to ) {
    52                 $( '.site-title, .site-description' ).css( {
    53                     'clip': 'rect(1px, 1px, 1px, 1px)',
    54                     'position': 'absolute'
    55                 } );
     53                $( '.site-title, .site-description' ).css({
     54                    clip: 'rect(1px, 1px, 1px, 1px)',
     55                    position: 'absolute'
     56                });
    5657                $( 'body' ).addClass( 'title-tagline-hidden' );
    5758            } else {
    58                 $( '.site-title, .site-description' ).css( {
    59                     'clip': 'auto',
    60                     'position': 'relative'
    61                 } );
    62                 $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css( {
    63                     'color': to
    64                 } );
     59                $( '.site-title, .site-description' ).css({
     60                    clip: 'auto',
     61                    position: 'relative'
     62                });
     63                $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css({
     64                    color: to
     65                });
    6566                $( 'body' ).removeClass( 'title-tagline-hidden' );
    6667            }
    67         } );
    68     } );
     68        });
     69    });
    6970
    7071    // Color scheme.
    … …  
    7374
    7475            // Update color body class.
    75             $( 'body' ).removeClass( 'colors-light colors-dark colors-custom' )
    76                        .addClass( 'colors-' + to );
    77         } );
    78     } );
     76            $( 'body' )
     77                .removeClass( 'colors-light colors-dark colors-custom' )
     78                .addClass( 'colors-' + to );
     79        });
     80    });
    7981
    8082    // Custom color hue.
    … …  
    8284        value.bind( function( to ) {
    8385
    84             // Update custom color CSS
     86            // Update custom color CSS.
    8587            var style = $( '#custom-theme-colors' ),
    86                 hue = style.data( 'hue' ),
    87                 css = style.html();
     88                hue = style.data( 'hue' ),
     89                css = style.html();
    8890
    89             css = css.split( hue + ',' ).join( to + ',' ); // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
    90             style.html( css )
    91                  .data( 'hue', to );
    92         } );
    93     } );
     91            // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
     92            css = css.split( hue + ',' ).join( to + ',' );
     93            style.html( css ).data( 'hue', to );
     94        });
     95    });
    9496
    9597    // Page layouts.

  • trunk/src/wp-content/themes/twentyseventeen/assets/js/global.js

    r39184 r39221  
    11/* global twentyseventeenScreenReaderText */
    2 ( function( $ ) {
    3 
    4     // Variables and DOM Caching
     2(function( $ ) {
     3
     4    // Variables and DOM Caching.
    55    var $body = $( 'body' ),
    6             $customHeader = $body.find( '.custom-header' ),
    7             $customHeaderImage = $customHeader.find( '.custom-header-image' ),
    8             $branding = $customHeader.find( '.site-branding' ),
    9             $navigation = $body.find( '.navigation-top' ),
    10             $navWrap = $navigation.find( '.wrap' ),
    11             $navMenuItem = $navigation.find( '.menu-item' ),
    12             $menuToggle = $navigation.find( '.menu-toggle' ),
    13             $menuScrollDown = $body.find( '.menu-scroll-down' ),
    14             $sidebar = $body.find( '#secondary' ),
    15             $entryContent = $body.find( '.entry-content' ),
    16             $formatQuote = $body.find( '.format-quote blockquote' ),
    17             isFrontPage = $body.hasClass( 'twentyseventeen-front-page' ) || $body.hasClass( 'home blog' ),
    18             navigationFixedClass = 'site-navigation-fixed',
    19             navigationHeight,
    20             navigationOuterHeight,
    21             navPadding,
    22             navMenuItemHeight,
    23             idealNavHeight,
    24             navIsNotTooTall,
    25             headerOffset,
    26             menuTop = 0,
    27             resizeTimer;
    28 
    29     /**
    30      * Ensure the sticky navigation doesn't cover current focused links
    31      */
     6        $customHeader = $body.find( '.custom-header' ),
     7        $customHeaderImage = $customHeader.find( '.custom-header-image' ),
     8        $branding = $customHeader.find( '.site-branding' ),
     9        $navigation = $body.find( '.navigation-top' ),
     10        $navWrap = $navigation.find( '.wrap' ),
     11        $navMenuItem = $navigation.find( '.menu-item' ),
     12        $menuToggle = $navigation.find( '.menu-toggle' ),
     13        $menuScrollDown = $body.find( '.menu-scroll-down' ),
     14        $sidebar = $body.find( '#secondary' ),
     15        $entryContent = $body.find( '.entry-content' ),
     16        $formatQuote = $body.find( '.format-quote blockquote' ),
     17        isFrontPage = $body.hasClass( 'twentyseventeen-front-page' ) || $body.hasClass( 'home blog' ),
     18        navigationFixedClass = 'site-navigation-fixed',
     19        navigationHeight,
     20        navigationOuterHeight,
     21        navPadding,
     22        navMenuItemHeight,
     23        idealNavHeight,
     24        navIsNotTooTall,
     25        headerOffset,
     26        menuTop = 0,
     27        resizeTimer;
     28
     29    // Ensure the sticky navigation doesn't cover current focused links.
    3230    $( '#content a, #colophon a' ).focus( function() {
    3331        if ( $navigation.hasClass( 'site-navigation-fixed' ) ) {
    … …  
    4341
    4442            if ( offsetDiff < fixedNavHeight ) {
    45                 $( window ).scrollTo( itemScrollTop - ( fixedNavHeight + 50 ), 600);
    46             }
    47         }
    48     } );
    49 
    50     /**
    51      * Sets properties of navigation
    52      */
     43                $( window ).scrollTo( itemScrollTop - ( fixedNavHeight + 50 ), 600 );
     44            }
     45        }
     46    });
     47
     48    // Set properties of navigation.
    5349    function setNavProps() {
    5450        navigationHeight      = $navigation.height();
    … …  
    6056    }
    6157
    62     /**
    63      * Makes navigation 'stick'
    64      */
     58    // Make navigation 'stick'.
    6559    function adjustScrollClass() {
    6660
    67         // Make sure we're not on a mobile screen
     61        // Make sure we're not on a mobile screen.
    6862        if ( 'none' === $menuToggle.css( 'display' ) ) {
    6963
    70             // Make sure the nav isn't taller than two rows
     64            // Make sure the nav isn't taller than two rows.
    7165            if ( navIsNotTooTall ) {
    7266
    73                 // When there's a custom header image, the header offset includes the height of the navigation
     67                // When there's a custom header image, the header offset includes the height of the navigation.
    7468                if ( isFrontPage && $customHeaderImage.length ) {
    7569                    headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
    … …  
    7872                }
    7973
    80                 // If the scroll is more than the custom header, set the fixed class
     74                // If the scroll is more than the custom header, set the fixed class.
    8175                if ( $( window ).scrollTop() >= headerOffset ) {
    8276                    $navigation.addClass( navigationFixedClass );
    … …  
    8781            } else {
    8882
    89                 // Remove 'fixed' class if nav is taller than two rows
     83                // Remove 'fixed' class if nav is taller than two rows.
    9084                $navigation.removeClass( navigationFixedClass );
    9185            }
    … …  
    9387    }
    9488
    95     /**
    96      * Sets margins of branding in header
    97      */
     89    // Set margins of branding in header.
    9890    function adjustHeaderHeight() {
    9991        if ( 'none' === $menuToggle.css( 'display' ) ) {
    … …  
    112104    }
    113105
    114     /**
    115      * Sets icon for quotes
    116      */
     106    // Set icon for quotes.
    117107    function setQuotesIcon() {
    118108        $( twentyseventeenScreenReaderText.quote ).prependTo( $formatQuote );
    119109    }
    120110
    121     /**
    122      * Add 'below-entry-meta' class to elements.
    123      */
     111    // Add 'below-entry-meta' class to elements.
    124112    function belowEntryMetaClass( param ) {
    125113        var sidebarPos, sidebarPosBottom;
    … …  
    139127        $entryContent.find( param ).each( function() {
    140128            var $element = $( this ),
    141                     elementPos = $element.offset(),
    142                     elementPosTop = elementPos.top;
     129                elementPos = $element.offset(),
     130                elementPosTop = elementPos.top;
    143131
    144132            // Add 'below-entry-meta' to elements below the entry meta.
    … …  
    151139    }
    152140
    153     /**
     141    /*
    154142     * Test if inline SVGs are supported.
    155143     * @link https://github.com/Modernizr/Modernizr/
    … …  
    161149    }
    162150
    163     // Fires on document ready
     151    // Fire on document ready.
    164152    $( document ).ready( function() {
    165153
    166         // If navigation menu is present on page, setNavProps and adjustScrollClass
    167         if( $navigation.length ) {
     154        // If navigation menu is present on page, setNavProps and adjustScrollClass.
     155        if ( $navigation.length ) {
    168156            setNavProps();
    169157            adjustScrollClass();
    170158        }
    171159
    172         // If 'Scroll Down' arrow in present on page, calculate scroll offset and bind an event handler to the click event
     160        // If 'Scroll Down' arrow in present on page, calculate scroll offset and bind an event handler to the click event.
    173161        if ( $menuScrollDown.length ) {
    174162
    … …  
    177165            }
    178166            if ( $( 'body' ).hasClass( 'blog' ) ) {
    179                 menuTop -= 30; // The div for latest posts has no space above content, add some to account for this
     167                menuTop -= 30; // The div for latest posts has no space above content, add some to account for this.
    180168            }
    181169            if ( ! $navigation.length ) {
    … …  
    187175                $( window ).scrollTo( '#primary', {
    188176                    duration: 600,
    189                     offset: { 'top': menuTop - navigationOuterHeight }
    190                 } );
    191             } );
     177                    offset: { top: menuTop - navigationOuterHeight }
     178                });
     179            });
    192180        }
    193181
    … …  
    197185            document.documentElement.className = document.documentElement.className.replace( /(\s*)no-svg(\s*)/, '$1svg$2' );
    198186        }
    199     } );
    200 
    201     // If navigation menu is present on page, adjust it on scroll and screen resize
     187    });
     188
     189    // If navigation menu is present on page, adjust it on scroll and screen resize.
    202190    if ( $navigation.length ) {
    203191
    204         // On scroll, we want to stick/unstick the navigation
     192        // On scroll, we want to stick/unstick the navigation.
    205193        $( window ).on( 'scroll', function() {
    206194            adjustScrollClass();
    207195            adjustHeaderHeight();
    208         } );
    209 
    210         // Also want to make sure the navigation is where it should be on resize
     196        });
     197
     198        // Also want to make sure the navigation is where it should be on resize.
    211199        $( window ).resize( function() {
    212200            setNavProps();
    213201            setTimeout( adjustScrollClass, 500 );
    214         } );
     202        });
    215203    }
    216204
    … …  
    221209        }, 300 );
    222210        setTimeout( adjustHeaderHeight, 1000 );
    223     } );
    224 
    225 }( jQuery ) );
     211    });
     212
     213})( jQuery );

  • trunk/src/wp-content/themes/twentyseventeen/assets/js/navigation.js

    r38833 r39221  
    66 */
    77
    8 ( function( $ ) {
     8(function( $ ) {
    99    var masthead, menuToggle, siteNavigation;
    1010
    … …  
    1212
    1313        // Add dropdown toggle that displays child menu items.
    14         var dropdownToggle = $( '<button />', {
    15             'class': 'dropdown-toggle',
    16             'aria-expanded': false
    17         } ).append( twentyseventeenScreenReaderText.icon )
    18         .append( $( '<span />', {
    19             'class': 'screen-reader-text',
    20             text: twentyseventeenScreenReaderText.expand
    21         } ) );
     14        var dropdownToggle = $( '<button />', { 'class': 'dropdown-toggle', 'aria-expanded': false })
     15            .append( twentyseventeenScreenReaderText.icon )
     16            .append( $( '<span />', { 'class': 'screen-reader-text', text: twentyseventeenScreenReaderText.expand }) );
    2217
    2318        container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
    … …  
    3126
    3227        container.find( '.dropdown-toggle' ).click( function( e ) {
    33             var _this            = $( this ),
     28            var _this = $( this ),
    3429                screenReaderSpan = _this.find( '.screen-reader-text' );
    3530
    … …  
    3833            _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
    3934
    40             // jscs:disable
    4135            _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
    42             // jscs:enable
     36
    4337            screenReaderSpan.text( screenReaderSpan.text() === twentyseventeenScreenReaderText.expand ? twentyseventeenScreenReaderText.collapse : twentyseventeenScreenReaderText.expand );
    44         } );
     38        });
    4539    }
     40
    4641    initMainNavigation( $( '.main-navigation' ) );
    4742
    48     masthead         = $( '#masthead' );
    49     menuToggle       = masthead.find( '.menu-toggle' );
    50     siteNavigation   = masthead.find( '.main-navigation > div > ul' );
     43    masthead       = $( '#masthead' );
     44    menuToggle     = masthead.find( '.menu-toggle' );
     45    siteNavigation = masthead.find( '.main-navigation > div > ul' );
    5146
    5247    // Enable menuToggle.
    53     ( function() {
     48    (function() {
    5449
    5550        // Return early if menuToggle is missing.
    … …  
    6459            $( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' );
    6560
    66             // jscs:disable
    67             $( this ).add( siteNavigation ).attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
    68             // jscs:enable
    69         } );
    70     } )();
     61            $( this )
     62                .add( siteNavigation )
     63                .attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
     64        });
     65    })();
    7166
    7267    // Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
    73     ( function() {
     68    (function() {
    7469        if ( ! siteNavigation.length || ! siteNavigation.children().length ) {
    7570            return;
    … …  
    8479                        $( '.main-navigation li' ).removeClass( 'focus' );
    8580                    }
    86                 } );
     81                });
    8782
    88                 siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' ).on( 'touchstart.twentyseventeen', function( e ) {
    89                     var el = $( this ).parent( 'li' );
     83                siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' )
     84                    .on( 'touchstart.twentyseventeen', function( e ) {
     85                        var el = $( this ).parent( 'li' );
    9086
    91                     if ( ! el.hasClass( 'focus' ) ) {
    92                         e.preventDefault();
    93                         el.toggleClass( 'focus' );
    94                         el.siblings( '.focus' ).removeClass( 'focus' );
    95                     }
    96                 } );
     87                        if ( ! el.hasClass( 'focus' ) ) {
     88                            e.preventDefault();
     89                            el.toggleClass( 'focus' );
     90                            el.siblings( '.focus' ).removeClass( 'focus' );
     91                        }
     92                    });
    9793
    9894            } else {
    … …  
    108104        siteNavigation.find( 'a' ).on( 'focus.twentyseventeen blur.twentyseventeen', function() {
    109105            $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
    110         } );
    111     } )();
     106        });
     107    })();
    112108
    113109    // Add the default ARIA attributes for the menu toggle and the navigations.
    … …  
    136132        $( window ).on( 'load.twentyseventeen', onResizeARIA );
    137133        $( window ).on( 'resize.twentyseventeen', onResizeARIA );
    138     } );
     134    });
    139135
    140 } )( jQuery );
     136})( jQuery );

  • trunk/src/wp-content/themes/twentyseventeen/assets/js/skip-link-focus-fix.js

    r39135 r39221  
    66 * Learn more: https://git.io/vWdr2
    77 */
    8 ( function() {
     8(function() {
    99    var isIe = /(trident|msie)/i.test( navigator.userAgent );
    1010
Note: See TracChangeset for help on using the changeset viewer.