Twenty Seventeen: Make sure theme JavaScript follows proper coding standards

Props sstoqnov, afercia.

Fixes #38752.

Built from https://develop.svn.wordpress.org/trunk@39221


git-svn-id: http://core.svn.wordpress.org/trunk@39161 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentyseventeen/assets/js/customize-controls.js

@@ -5,7 +5,7 @@
  * when users open or close the front page sections section.
  */
 
-( function() {
+(function() {
 	wp.customize.bind( 'ready', function() {
 
 		// Only show the color hue control when there's a custom color scheme.
@@ -24,11 +24,11 @@
 			});
 		});
 
-		// Detect when the front page sections section is expanded (or closed) so we can adjust the preview accordingly
+		// Detect when the front page sections section is expanded (or closed) so we can adjust the preview accordingly.
 		wp.customize.section( 'theme_options' ).expanded.bind( function( isExpanding ) {
 
-			// Value of isExpanding will = true if you're entering the section, false if you're leaving it
+			// Value of isExpanding will = true if you're entering the section, false if you're leaving it.
-			wp.customize.previewer.send( 'section-highlight', { expanded: isExpanding } );
+			wp.customize.previewer.send( 'section-highlight', { expanded: isExpanding });
-		} );
+		});
-	} );
+	});
-} )( jQuery );
+})( jQuery );

wp-content/themes/twentyseventeen/assets/js/customize-preview.js

@@ -4,9 +4,9 @@
  * Instantly live-update customizer settings in the preview for improved user experience.
  */
 
-( function( $ ) {
+(function( $ ) {
 
-	// Collect information from customize-controls.js about which panels are opening
+	// Collect information from customize-controls.js about which panels are opening.
 	wp.customize.bind( 'preview-ready', function() {
 		wp.customize.preview.bind( 'section-highlight', function( data ) {
 
@@ -22,75 +22,77 @@
 					$.scrollTo( $( '#panel1' ), {
 						duration: 600,
 						offset: { 'top': -70 } // Account for sticky menu.
-					} );
+					});
 				});
 
-			// If we've left the panel, hide the placeholders and scroll back to the top
+			// If we've left the panel, hide the placeholders and scroll back to the top.
 			} else {
 				$( 'body' ).removeClass( 'highlight-front-sections' );
-				$( '.panel-placeholder' ).slideUp( 200 ); // Don't change scroll when leaving - it's likely to have unintended consequences.
+				// Don't change scroll when leaving - it's likely to have unintended consequences.
+				$( '.panel-placeholder' ).slideUp( 200 );
 			}
-		} );
+		});
-	} );
+	});
 
 	// Site title and description.
 	wp.customize( 'blogname', function( value ) {
 		value.bind( function( to ) {
 			$( '.site-title a' ).text( to );
-		} );
+		});
-	} );
+	});
 	wp.customize( 'blogdescription', function( value ) {
 		value.bind( function( to ) {
 			$( '.site-description' ).text( to );
-		} );
+		});
-	} );
+	});
 
 	// Header text color.
 	wp.customize( 'header_textcolor', function( value ) {
 		value.bind( function( to ) {
 			if ( 'blank' === to ) {
-				$( '.site-title, .site-description' ).css( {
+				$( '.site-title, .site-description' ).css({
-					'clip': 'rect(1px, 1px, 1px, 1px)',
+					clip: 'rect(1px, 1px, 1px, 1px)',
-					'position': 'absolute'
+					position: 'absolute'
-				} );
+				});
 				$( 'body' ).addClass( 'title-tagline-hidden' );
 			} else {
-				$( '.site-title, .site-description' ).css( {
+				$( '.site-title, .site-description' ).css({
-					'clip': 'auto',
+					clip: 'auto',
-					'position': 'relative'
+					position: 'relative'
-				} );
+				});
-				$( '.site-branding, .site-branding a, .site-description, .site-description a' ).css( {
+				$( '.site-branding, .site-branding a, .site-description, .site-description a' ).css({
-					'color': to
+					color: to
-				} );
+				});
 				$( 'body' ).removeClass( 'title-tagline-hidden' );
 			}
-		} );
+		});
-	} );
+	});
 
 	// Color scheme.
 	wp.customize( 'colorscheme', function( value ) {
 		value.bind( function( to ) {
 
 			// Update color body class.
-			$( 'body' ).removeClass( 'colors-light colors-dark colors-custom' )
+			$( 'body' )
-			           .addClass( 'colors-' + to );
+				.removeClass( 'colors-light colors-dark colors-custom' )
-		} );
+				.addClass( 'colors-' + to );
-	} );
+		});
+	});
 
 	// Custom color hue.
 	wp.customize( 'colorscheme_hue', function( value ) {
 		value.bind( function( to ) {
 
-			// Update custom color CSS
+			// Update custom color CSS.
 			var style = $( '#custom-theme-colors' ),
-			    hue = style.data( 'hue' ),
+				hue = style.data( 'hue' ),
-			    css = style.html();
+				css = style.html();
 
-			css = css.split( hue + ',' ).join( to + ',' ); // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
+			// Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
-			style.html( css )
+			css = css.split( hue + ',' ).join( to + ',' );
-			     .data( 'hue', to );
+			style.html( css ).data( 'hue', to );
-		} );
+		});
-	} );
+	});
 
 	// Page layouts.
 	wp.customize( 'page_layout', function( value ) {

wp-content/themes/twentyseventeen/assets/js/global.js

@@ -1,34 +1,32 @@
 /* global twentyseventeenScreenReaderText */
-( function( $ ) {
+(function( $ ) {
 
-	// Variables and DOM Caching
+	// Variables and DOM Caching.
 	var $body = $( 'body' ),
-			$customHeader = $body.find( '.custom-header' ),
+		$customHeader = $body.find( '.custom-header' ),
-			$customHeaderImage = $customHeader.find( '.custom-header-image' ),
+		$customHeaderImage = $customHeader.find( '.custom-header-image' ),
-			$branding = $customHeader.find( '.site-branding' ),
+		$branding = $customHeader.find( '.site-branding' ),
-			$navigation = $body.find( '.navigation-top' ),
+		$navigation = $body.find( '.navigation-top' ),
-			$navWrap = $navigation.find( '.wrap' ),
+		$navWrap = $navigation.find( '.wrap' ),
-			$navMenuItem = $navigation.find( '.menu-item' ),
+		$navMenuItem = $navigation.find( '.menu-item' ),
-			$menuToggle = $navigation.find( '.menu-toggle' ),
+		$menuToggle = $navigation.find( '.menu-toggle' ),
-			$menuScrollDown = $body.find( '.menu-scroll-down' ),
+		$menuScrollDown = $body.find( '.menu-scroll-down' ),
-			$sidebar = $body.find( '#secondary' ),
+		$sidebar = $body.find( '#secondary' ),
-			$entryContent = $body.find( '.entry-content' ),
+		$entryContent = $body.find( '.entry-content' ),
-			$formatQuote = $body.find( '.format-quote blockquote' ),
+		$formatQuote = $body.find( '.format-quote blockquote' ),
-			isFrontPage = $body.hasClass( 'twentyseventeen-front-page' ) || $body.hasClass( 'home blog' ),
+		isFrontPage = $body.hasClass( 'twentyseventeen-front-page' ) || $body.hasClass( 'home blog' ),
-			navigationFixedClass = 'site-navigation-fixed',
+		navigationFixedClass = 'site-navigation-fixed',
-			navigationHeight,
+		navigationHeight,
-			navigationOuterHeight,
+		navigationOuterHeight,
-			navPadding,
+		navPadding,
-			navMenuItemHeight,
+		navMenuItemHeight,
-			idealNavHeight,
+		idealNavHeight,
-			navIsNotTooTall,
+		navIsNotTooTall,
-			headerOffset,
+		headerOffset,
-			menuTop = 0,
+		menuTop = 0,
-			resizeTimer;
+		resizeTimer;
 
-	/**
+	// Ensure the sticky navigation doesn't cover current focused links.
-	 * Ensure the sticky navigation doesn't cover current focused links
-	 */
 	$( '#content a, #colophon a' ).focus( function() {
 		if ( $navigation.hasClass( 'site-navigation-fixed' ) ) {
 			var windowScrollTop = $( window ).scrollTop(),
@@ -42,14 +40,12 @@
 			}
 
 			if ( offsetDiff < fixedNavHeight ) {
-				$( window ).scrollTo( itemScrollTop - ( fixedNavHeight + 50 ), 600);
+				$( window ).scrollTo( itemScrollTop - ( fixedNavHeight + 50 ), 600 );
 			}
 		}
-	} );
+	});
 
-	/**
+	// Set properties of navigation.
-	 * Sets properties of navigation
-	 */
 	function setNavProps() {
 		navigationHeight      = $navigation.height();
 		navigationOuterHeight = $navigation.outerHeight();
@@ -59,25 +55,23 @@
 		navIsNotTooTall       = navigationHeight <= idealNavHeight;
 	}
 
-	/**
+	// Make navigation 'stick'.
-	 * Makes navigation 'stick'
-	 */
 	function adjustScrollClass() {
 
-		// Make sure we're not on a mobile screen
+		// Make sure we're not on a mobile screen.
 		if ( 'none' === $menuToggle.css( 'display' ) ) {
 
-			// Make sure the nav isn't taller than two rows
+			// Make sure the nav isn't taller than two rows.
 			if ( navIsNotTooTall ) {
 
-				// When there's a custom header image, the header offset includes the height of the navigation
+				// When there's a custom header image, the header offset includes the height of the navigation.
 				if ( isFrontPage && $customHeaderImage.length ) {
 					headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
 				} else {
 					headerOffset = $customHeader.innerHeight();
 				}
 
-				// If the scroll is more than the custom header, set the fixed class
+				// If the scroll is more than the custom header, set the fixed class.
 				if ( $( window ).scrollTop() >= headerOffset ) {
 					$navigation.addClass( navigationFixedClass );
 				} else {
@@ -86,15 +80,13 @@
 
 			} else {
 
-				// Remove 'fixed' class if nav is taller than two rows
+				// Remove 'fixed' class if nav is taller than two rows.
 				$navigation.removeClass( navigationFixedClass );
 			}
 		}
 	}
 
-	/**
+	// Set margins of branding in header.
-	 * Sets margins of branding in header
-	 */
 	function adjustHeaderHeight() {
 		if ( 'none' === $menuToggle.css( 'display' ) ) {
 
@@ -111,16 +103,12 @@
 		}
 	}
 
-	/**
+	// Set icon for quotes.
-	 * Sets icon for quotes
-	 */
 	function setQuotesIcon() {
 		$( twentyseventeenScreenReaderText.quote ).prependTo( $formatQuote );
 	}
 
-	/**
+	// Add 'below-entry-meta' class to elements.
-	 * Add 'below-entry-meta' class to elements.
-	 */
 	function belowEntryMetaClass( param ) {
 		var sidebarPos, sidebarPosBottom;
 
@@ -138,8 +126,8 @@
 
 		$entryContent.find( param ).each( function() {
 			var $element = $( this ),
-					elementPos = $element.offset(),
+				elementPos = $element.offset(),
-					elementPosTop = elementPos.top;
+				elementPosTop = elementPos.top;
 
 			// Add 'below-entry-meta' to elements below the entry meta.
 			if ( elementPosTop > sidebarPosBottom ) {
@@ -150,7 +138,7 @@
 		});
 	}
 
-	/**
+	/*
 	 * Test if inline SVGs are supported.
 	 * @link https://github.com/Modernizr/Modernizr/
 	 */
@@ -160,23 +148,23 @@
 		return 'http://www.w3.org/2000/svg' === ( 'undefined' !== typeof SVGRect && div.firstChild && div.firstChild.namespaceURI );
 	}
 
-	// Fires on document ready
+	// Fire on document ready.
 	$( document ).ready( function() {
 
-		// If navigation menu is present on page, setNavProps and adjustScrollClass
+		// If navigation menu is present on page, setNavProps and adjustScrollClass.
-		if( $navigation.length ) {
+		if ( $navigation.length ) {
 			setNavProps();
 			adjustScrollClass();
 		}
 
-		// If 'Scroll Down' arrow in present on page, calculate scroll offset and bind an event handler to the click event
+		// If 'Scroll Down' arrow in present on page, calculate scroll offset and bind an event handler to the click event.
 		if ( $menuScrollDown.length ) {
 
 			if ( $( 'body' ).hasClass( 'admin-bar' ) ) {
 				menuTop -= 32;
 			}
 			if ( $( 'body' ).hasClass( 'blog' ) ) {
-				menuTop -= 30; // The div for latest posts has no space above content, add some to account for this
+				menuTop -= 30; // The div for latest posts has no space above content, add some to account for this.
 			}
 			if ( ! $navigation.length ) {
 				navigationOuterHeight = 0;
@@ -186,9 +174,9 @@
 				e.preventDefault();
 				$( window ).scrollTo( '#primary', {
 					duration: 600,
-					offset: { 'top': menuTop - navigationOuterHeight }
+					offset: { top: menuTop - navigationOuterHeight }
-				} );
+				});
-			} );
+			});
 		}
 
 		adjustHeaderHeight();
@@ -196,22 +184,22 @@
 		if ( true === supportsInlineSVG() ) {
 			document.documentElement.className = document.documentElement.className.replace( /(\s*)no-svg(\s*)/, '$1svg$2' );
 		}
-	} );
+	});
 
-	// If navigation menu is present on page, adjust it on scroll and screen resize
+	// If navigation menu is present on page, adjust it on scroll and screen resize.
 	if ( $navigation.length ) {
 
-		// On scroll, we want to stick/unstick the navigation
+		// On scroll, we want to stick/unstick the navigation.
 		$( window ).on( 'scroll', function() {
 			adjustScrollClass();
 			adjustHeaderHeight();
-		} );
+		});
 
-		// Also want to make sure the navigation is where it should be on resize
+		// Also want to make sure the navigation is where it should be on resize.
 		$( window ).resize( function() {
 			setNavProps();
 			setTimeout( adjustScrollClass, 500 );
-		} );
+		});
 	}
 
 	$( window ).resize( function() {
@@ -220,6 +208,6 @@
 			belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
 		}, 300 );
 		setTimeout( adjustHeaderHeight, 1000 );
-	} );
+	});
 
-}( jQuery ) );
+})( jQuery );

wp-content/themes/twentyseventeen/assets/js/navigation.js

@@ -5,20 +5,15 @@
  * Contains handlers for navigation and widget area.
  */
 
-( function( $ ) {
+(function( $ ) {
 	var masthead, menuToggle, siteNavigation;
 
 	function initMainNavigation( container ) {
 
 		// Add dropdown toggle that displays child menu items.
-		var dropdownToggle = $( '<button />', {
+		var dropdownToggle = $( '<button />', { 'class': 'dropdown-toggle', 'aria-expanded': false })
-			'class': 'dropdown-toggle',
+			.append( twentyseventeenScreenReaderText.icon )
-			'aria-expanded': false
+			.append( $( '<span />', { 'class': 'screen-reader-text', text: twentyseventeenScreenReaderText.expand }) );
-		} ).append( twentyseventeenScreenReaderText.icon )
-		.append( $( '<span />', {
-			'class': 'screen-reader-text',
-			text: twentyseventeenScreenReaderText.expand
-		} ) );
 
 		container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
 
@@ -30,27 +25,27 @@
 		container.find( '.menu-item-has-children, .page_item_has_children' ).attr( 'aria-haspopup', 'true' );
 
 		container.find( '.dropdown-toggle' ).click( function( e ) {
-			var _this            = $( this ),
+			var _this = $( this ),
 				screenReaderSpan = _this.find( '.screen-reader-text' );
 
 			e.preventDefault();
 			_this.toggleClass( 'toggled-on' );
 			_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
 
-			// jscs:disable
 			_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
-			// jscs:enable
+
 			screenReaderSpan.text( screenReaderSpan.text() === twentyseventeenScreenReaderText.expand ? twentyseventeenScreenReaderText.collapse : twentyseventeenScreenReaderText.expand );
-		} );
+		});
 	}
+
 	initMainNavigation( $( '.main-navigation' ) );
 
-	masthead         = $( '#masthead' );
+	masthead       = $( '#masthead' );
-	menuToggle       = masthead.find( '.menu-toggle' );
+	menuToggle     = masthead.find( '.menu-toggle' );
-	siteNavigation   = masthead.find( '.main-navigation > div > ul' );
+	siteNavigation = masthead.find( '.main-navigation > div > ul' );
 
 	// Enable menuToggle.
-	( function() {
+	(function() {
 
 		// Return early if menuToggle is missing.
 		if ( ! menuToggle.length ) {
@@ -63,14 +58,14 @@
 		menuToggle.on( 'click.twentyseventeen', function() {
 			$( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' );
 
-			// jscs:disable
+			$( this )
-			$( this ).add( siteNavigation ).attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
+				.add( siteNavigation )
-			// jscs:enable
+				.attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
-		} );
+		});
-	} )();
+	})();
 
 	// Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
-	( function() {
+	(function() {
 		if ( ! siteNavigation.length || ! siteNavigation.children().length ) {
 			return;
 		}
@@ -83,17 +78,18 @@
 					if ( ! $( e.target ).closest( '.main-navigation li' ).length ) {
 						$( '.main-navigation li' ).removeClass( 'focus' );
 					}
-				} );
+				});
 
-				siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' ).on( 'touchstart.twentyseventeen', function( e ) {
+				siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' )
-					var el = $( this ).parent( 'li' );
+					.on( 'touchstart.twentyseventeen', function( e ) {
+						var el = $( this ).parent( 'li' );
 
-					if ( ! el.hasClass( 'focus' ) ) {
+						if ( ! el.hasClass( 'focus' ) ) {
-						e.preventDefault();
+							e.preventDefault();
-						el.toggleClass( 'focus' );
+							el.toggleClass( 'focus' );
-						el.siblings( '.focus' ).removeClass( 'focus' );
+							el.siblings( '.focus' ).removeClass( 'focus' );
-					}
+						}
-				} );
+					});
 
 			} else {
 				siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' ).unbind( 'touchstart.twentyseventeen' );
@@ -107,8 +103,8 @@
 
 		siteNavigation.find( 'a' ).on( 'focus.twentyseventeen blur.twentyseventeen', function() {
 			$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
-		} );
+		});
-	} )();
+	})();
 
 	// Add the default ARIA attributes for the menu toggle and the navigations.
 	function onResizeARIA() {
@@ -135,6 +131,6 @@
 	$( document ).ready( function() {
 		$( window ).on( 'load.twentyseventeen', onResizeARIA );
 		$( window ).on( 'resize.twentyseventeen', onResizeARIA );
-	} );
+	});
 
-} )( jQuery );
+})( jQuery );

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

@@ -5,7 +5,7 @@
  *
  * Learn more: https://git.io/vWdr2
  */
-( function() {
+(function() {
 	var isIe = /(trident|msie)/i.test( navigator.userAgent );
 
 	if ( isIe && document.getElementById && window.addEventListener ) {

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-beta3-39220';
+$wp_version = '4.7-beta3-39221';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.