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
This commit is contained in:
parent
f5cdba121f
commit
b6e848e638
|
@ -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 });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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 );
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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 );
|
||||||
|
|
|
@ -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' ) ) {
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
*
|
*
|
||||||
* @global string $wp_version
|
* @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.
|
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||||
|
|
Loading…
Reference in New Issue