From 76e44c91661bc48daf4be820be2777b01d441711 Mon Sep 17 00:00:00 2001 From: "David A. Kennedy" Date: Mon, 14 Nov 2016 11:40:55 +0000 Subject: [PATCH] Twenty Seventeen: Make sure theme JavaScript follows proper coding standards Props sstoqnov, afercia. Fixes #38752. git-svn-id: https://develop.svn.wordpress.org/trunk@39221 602fd350-edb4-49c9-b593-d223f7449a82 --- .../assets/js/customize-controls.js | 14 +- .../assets/js/customize-preview.js | 74 ++++++----- .../twentyseventeen/assets/js/global.js | 124 ++++++++---------- .../twentyseventeen/assets/js/navigation.js | 68 +++++----- .../assets/js/skip-link-focus-fix.js | 2 +- 5 files changed, 134 insertions(+), 148 deletions(-) diff --git a/src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js b/src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js index 322939ca92..b8e7e8160c 100644 --- a/src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js +++ b/src/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 - wp.customize.previewer.send( 'section-highlight', { expanded: isExpanding } ); - } ); - } ); -} )( jQuery ); + // 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 }); + }); + }); +})( jQuery ); diff --git a/src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js b/src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js index 4981980b5d..651e034b84 100644 --- a/src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js +++ b/src/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( { - 'clip': 'rect(1px, 1px, 1px, 1px)', - 'position': 'absolute' - } ); + $( '.site-title, .site-description' ).css({ + clip: 'rect(1px, 1px, 1px, 1px)', + position: 'absolute' + }); $( 'body' ).addClass( 'title-tagline-hidden' ); } else { - $( '.site-title, .site-description' ).css( { - 'clip': 'auto', - 'position': 'relative' - } ); - $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css( { - 'color': to - } ); + $( '.site-title, .site-description' ).css({ + clip: 'auto', + position: 'relative' + }); + $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css({ + 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' ) - .addClass( 'colors-' + to ); - } ); - } ); + $( 'body' ) + .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' ), - css = style.html(); + hue = style.data( 'hue' ), + 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. - style.html( css ) - .data( 'hue', to ); - } ); - } ); + // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed. + css = css.split( hue + ',' ).join( to + ',' ); + style.html( css ).data( 'hue', to ); + }); + }); // Page layouts. wp.customize( 'page_layout', function( value ) { diff --git a/src/wp-content/themes/twentyseventeen/assets/js/global.js b/src/wp-content/themes/twentyseventeen/assets/js/global.js index 45995ef5aa..3d893e17cd 100644 --- a/src/wp-content/themes/twentyseventeen/assets/js/global.js +++ b/src/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' ), - $customHeaderImage = $customHeader.find( '.custom-header-image' ), - $branding = $customHeader.find( '.site-branding' ), - $navigation = $body.find( '.navigation-top' ), - $navWrap = $navigation.find( '.wrap' ), - $navMenuItem = $navigation.find( '.menu-item' ), - $menuToggle = $navigation.find( '.menu-toggle' ), - $menuScrollDown = $body.find( '.menu-scroll-down' ), - $sidebar = $body.find( '#secondary' ), - $entryContent = $body.find( '.entry-content' ), - $formatQuote = $body.find( '.format-quote blockquote' ), - isFrontPage = $body.hasClass( 'twentyseventeen-front-page' ) || $body.hasClass( 'home blog' ), - navigationFixedClass = 'site-navigation-fixed', - navigationHeight, - navigationOuterHeight, - navPadding, - navMenuItemHeight, - idealNavHeight, - navIsNotTooTall, - headerOffset, - menuTop = 0, - resizeTimer; + $customHeader = $body.find( '.custom-header' ), + $customHeaderImage = $customHeader.find( '.custom-header-image' ), + $branding = $customHeader.find( '.site-branding' ), + $navigation = $body.find( '.navigation-top' ), + $navWrap = $navigation.find( '.wrap' ), + $navMenuItem = $navigation.find( '.menu-item' ), + $menuToggle = $navigation.find( '.menu-toggle' ), + $menuScrollDown = $body.find( '.menu-scroll-down' ), + $sidebar = $body.find( '#secondary' ), + $entryContent = $body.find( '.entry-content' ), + $formatQuote = $body.find( '.format-quote blockquote' ), + isFrontPage = $body.hasClass( 'twentyseventeen-front-page' ) || $body.hasClass( 'home blog' ), + navigationFixedClass = 'site-navigation-fixed', + navigationHeight, + navigationOuterHeight, + navPadding, + navMenuItemHeight, + idealNavHeight, + navIsNotTooTall, + headerOffset, + menuTop = 0, + 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 ); } } - } ); + }); - /** - * Sets properties of navigation - */ + // Set properties of navigation. function setNavProps() { navigationHeight = $navigation.height(); navigationOuterHeight = $navigation.outerHeight(); @@ -59,25 +55,23 @@ navIsNotTooTall = navigationHeight <= idealNavHeight; } - /** - * Makes navigation 'stick' - */ + // Make 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 ); } } } - /** - * Sets margins of branding in header - */ + // Set margins of branding in header. function adjustHeaderHeight() { if ( 'none' === $menuToggle.css( 'display' ) ) { @@ -111,16 +103,12 @@ } } - /** - * Sets icon for quotes - */ + // Set 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(), - elementPosTop = elementPos.top; + elementPos = $element.offset(), + 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.length ) { + // If navigation menu is present on page, setNavProps and adjustScrollClass. + 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 ); diff --git a/src/wp-content/themes/twentyseventeen/assets/js/navigation.js b/src/wp-content/themes/twentyseventeen/assets/js/navigation.js index e2df1f3955..b20e0c92d3 100644 --- a/src/wp-content/themes/twentyseventeen/assets/js/navigation.js +++ b/src/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 = $( '