sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
This commit is contained in:
David A. Kennedy 2016-11-14 11:40:55 +00:00
parent 5b41a1c33e
commit 76e44c9166
5 changed files with 134 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js
View File

@ -24,10 +24,10 @@
}); });
}); });
// 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 ) { 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 });
}); });
}); });

28
src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js
View File

@ -6,7 +6,7 @@
(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.bind( 'preview-ready', function() {
wp.customize.preview.bind( 'section-highlight', function( data ) { wp.customize.preview.bind( 'section-highlight', function( data ) {
@ -25,10 +25,11 @@
}); });
}); });
// 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 { } else {
$( 'body' ).removeClass( 'highlight-front-sections' ); $( '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 );
} }
}); });
}); });
@ -50,17 +51,17 @@
value.bind( function( to ) { value.bind( function( to ) {
if ( 'blank' === 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' ); $( 'body' ).addClass( 'title-tagline-hidden' );
} else { } 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' ); $( 'body' ).removeClass( 'title-tagline-hidden' );
} }
@ -72,7 +73,8 @@
value.bind( function( to ) { value.bind( function( to ) {
// Update color body class. // Update color body class.
$( 'body' ).removeClass( 'colors-light colors-dark colors-custom' ) $( 'body' )
.removeClass( 'colors-light colors-dark colors-custom' )
.addClass( 'colors-' + to ); .addClass( 'colors-' + to );
}); });
}); });
@ -81,14 +83,14 @@
wp.customize( 'colorscheme_hue', function( value ) { wp.customize( 'colorscheme_hue', function( value ) {
value.bind( function( to ) { value.bind( function( to ) {
// Update custom color CSS // Update custom color CSS.
var style = $( '#custom-theme-colors' ), 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 );
}); });
}); });

56
src/wp-content/themes/twentyseventeen/assets/js/global.js
View File

@ -1,7 +1,7 @@
/* global twentyseventeenScreenReaderText */ /* global twentyseventeenScreenReaderText */
(function( $ ) { (function( $ ) {
// Variables and DOM Caching // Variables and DOM Caching.
var $body = $( 'body' ), 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' ),
@ -26,9 +26,7 @@
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() { $( '#content a, #colophon a' ).focus( function() {
if ( $navigation.hasClass( 'site-navigation-fixed' ) ) { if ( $navigation.hasClass( 'site-navigation-fixed' ) ) {
var windowScrollTop = $( window ).scrollTop(), var windowScrollTop = $( window ).scrollTop(),
@ -47,9 +45,7 @@
} }
}); });
/** // Set properties of navigation.
* Sets properties of navigation
*/
function setNavProps() { function setNavProps() {
navigationHeight = $navigation.height(); navigationHeight = $navigation.height();
navigationOuterHeight = $navigation.outerHeight(); navigationOuterHeight = $navigation.outerHeight();
@ -59,25 +55,23 @@
navIsNotTooTall = navigationHeight <= idealNavHeight; navIsNotTooTall = navigationHeight <= idealNavHeight;
} }
/** // Make navigation 'stick'.
* Makes navigation 'stick'
*/
function adjustScrollClass() { 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' ) ) { 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 ) { 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 ) { if ( isFrontPage && $customHeaderImage.length ) {
headerOffset = $customHeader.innerHeight() - navigationOuterHeight; headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
} else { } else {
headerOffset = $customHeader.innerHeight(); 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 ) { if ( $( window ).scrollTop() >= headerOffset ) {
$navigation.addClass( navigationFixedClass ); $navigation.addClass( navigationFixedClass );
} else { } else {
@ -86,15 +80,13 @@
} else { } else {
// Remove 'fixed' class if nav is taller than two rows // Remove 'fixed' class if nav is taller than two rows.
$navigation.removeClass( navigationFixedClass ); $navigation.removeClass( navigationFixedClass );
} }
} }
} }
/** // Set margins of branding in header.
* Sets margins of branding in header
*/
function adjustHeaderHeight() { function adjustHeaderHeight() {
if ( 'none' === $menuToggle.css( 'display' ) ) { if ( 'none' === $menuToggle.css( 'display' ) ) {
@ -111,16 +103,12 @@
} }
} }
/** // Set icon for quotes.
* Sets icon for quotes
*/
function setQuotesIcon() { function setQuotesIcon() {
$( twentyseventeenScreenReaderText.quote ).prependTo( $formatQuote ); $( twentyseventeenScreenReaderText.quote ).prependTo( $formatQuote );
} }
/** // Add 'below-entry-meta' class to elements.
* Add 'below-entry-meta' class to elements.
*/
function belowEntryMetaClass( param ) { function belowEntryMetaClass( param ) {
var sidebarPos, sidebarPosBottom; var sidebarPos, sidebarPosBottom;
@ -150,7 +138,7 @@
}); });
} }
/** /*
* Test if inline SVGs are supported. * Test if inline SVGs are supported.
* @link https://github.com/Modernizr/Modernizr/ * @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 ); 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() { $( 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(); setNavProps();
adjustScrollClass(); 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 ( $menuScrollDown.length ) {
if ( $( 'body' ).hasClass( 'admin-bar' ) ) { if ( $( 'body' ).hasClass( 'admin-bar' ) ) {
menuTop -= 32; menuTop -= 32;
} }
if ( $( 'body' ).hasClass( 'blog' ) ) { 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 ) { if ( ! $navigation.length ) {
navigationOuterHeight = 0; navigationOuterHeight = 0;
@ -186,7 +174,7 @@
e.preventDefault(); e.preventDefault();
$( window ).scrollTo( '#primary', { $( window ).scrollTo( '#primary', {
duration: 600, duration: 600,
offset: { 'top': menuTop - navigationOuterHeight } offset: { top: menuTop - navigationOuterHeight }
}); });
}); });
} }
@ -198,16 +186,16 @@
} }
}); });
// 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 ) { 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() { $( window ).on( 'scroll', function() {
adjustScrollClass(); adjustScrollClass();
adjustHeaderHeight(); 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() { $( window ).resize( function() {
setNavProps(); setNavProps();
setTimeout( adjustScrollClass, 500 ); setTimeout( adjustScrollClass, 500 );
@ -222,4 +210,4 @@
setTimeout( adjustHeaderHeight, 1000 ); setTimeout( adjustHeaderHeight, 1000 );
}); });
}( jQuery ) ); })( jQuery );

24
src/wp-content/themes/twentyseventeen/assets/js/navigation.js
View File

@ -11,14 +11,9 @@
function initMainNavigation( container ) { function initMainNavigation( container ) {
// Add dropdown toggle that displays child menu items. // 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 ); container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
@ -37,12 +32,12 @@
_this.toggleClass( 'toggled-on' ); _this.toggleClass( 'toggled-on' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' ); _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
// jscs:disable
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' ); _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
// jscs:enable
screenReaderSpan.text( screenReaderSpan.text() === twentyseventeenScreenReaderText.expand ? twentyseventeenScreenReaderText.collapse : twentyseventeenScreenReaderText.expand ); screenReaderSpan.text( screenReaderSpan.text() === twentyseventeenScreenReaderText.expand ? twentyseventeenScreenReaderText.collapse : twentyseventeenScreenReaderText.expand );
}); });
} }
initMainNavigation( $( '.main-navigation' ) ); initMainNavigation( $( '.main-navigation' ) );
masthead = $( '#masthead' ); masthead = $( '#masthead' );
@ -63,9 +58,9 @@
menuToggle.on( 'click.twentyseventeen', function() { menuToggle.on( 'click.twentyseventeen', function() {
$( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' ); $( 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' );
}); });
})(); })();
@ -85,7 +80,8 @@
} }
}); });
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' )
.on( 'touchstart.twentyseventeen', function( e ) {
var el = $( this ).parent( 'li' ); var el = $( this ).parent( 'li' );
if ( ! el.hasClass( 'focus' ) ) { if ( ! el.hasClass( 'focus' ) ) {