Ticket #38752: 38752.3.diff
| File 38752.3.diff, 18.8 KB (added by , 8 years ago) |
|---|
-
src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js
5 5 * when users open or close the front page sections section. 6 6 */ 7 7 8 ( 8 (function() { 9 9 wp.customize.bind( 'ready', function() { 10 10 11 11 // Only show the color hue control when there's a custom color scheme. … … 24 24 }); 25 25 }); 26 26 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. 28 28 wp.customize.section( 'theme_options' ).expanded.bind( function( isExpanding ) { 29 29 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 } 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 ); -
src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js
4 4 * Instantly live-update customizer settings in the preview for improved user experience. 5 5 */ 6 6 7 ( 7 (function( $ ) { 8 8 9 // Collect information from customize-controls.js about which panels are opening 9 // Collect information from customize-controls.js about which panels are opening. 10 10 wp.customize.bind( 'preview-ready', function() { 11 11 wp.customize.preview.bind( 'section-highlight', function( data ) { 12 12 … … 22 22 $.scrollTo( $( '#panel1' ), { 23 23 duration: 600, 24 24 offset: { 'top': -70 } // Account for sticky menu. 25 } 25 }); 26 26 }); 27 27 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. 29 29 } else { 30 30 $( '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 ); 32 33 } 33 } 34 } 34 }); 35 }); 35 36 36 37 // Site title and description. 37 38 wp.customize( 'blogname', function( value ) { 38 39 value.bind( function( to ) { 39 40 $( '.site-title a' ).text( to ); 40 } 41 } 41 }); 42 }); 42 43 wp.customize( 'blogdescription', function( value ) { 43 44 value.bind( function( to ) { 44 45 $( '.site-description' ).text( to ); 45 } 46 } 46 }); 47 }); 47 48 48 49 // Header text color. 49 50 wp.customize( 'header_textcolor', function( value ) { 50 51 value.bind( function( to ) { 51 52 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 }); 56 57 $( 'body' ).addClass( 'title-tagline-hidden' ); 57 58 } 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': to64 } 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 }); 65 66 $( 'body' ).removeClass( 'title-tagline-hidden' ); 66 67 } 67 } 68 } 68 }); 69 }); 69 70 70 71 // Color scheme. 71 72 wp.customize( 'colorscheme', function( value ) { … … 72 73 value.bind( function( to ) { 73 74 74 75 // 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 }); 79 81 80 82 // Custom color hue. 81 83 wp.customize( 'colorscheme_hue', function( value ) { 82 84 value.bind( function( to ) { 83 85 84 // Update custom color CSS 86 // Update custom color CSS. 85 87 var style = $( '#custom-theme-colors' ), 86 87 88 hue = style.data( 'hue' ), 89 css = style.html(); 88 90 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 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 }); 94 96 95 97 // Page layouts. 96 98 wp.customize( 'page_layout', function( value ) { … … 100 102 } else { 101 103 $( 'body' ).removeClass( 'page-one-column' ).addClass( 'page-two-column' ); 102 104 } 103 } 104 } 105 } 105 }); 106 }); 107 })( jQuery ); -
src/wp-content/themes/twentyseventeen/assets/js/global.js
1 1 /* global twentyseventeenScreenReaderText */ 2 ( 2 (function( $ ) { 3 3 4 // Variables and DOM Caching 4 // Variables and DOM Caching. 5 5 var $body = $( 'body' ), 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 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 28 29 /** 30 * Ensure the sticky navigation doesn't cover current focused links 31 */ 29 // Ensure the sticky navigation doesn't cover current focused links. 32 30 $( '#content a, #colophon a' ).focus( function() { 33 31 if ( $navigation.hasClass( 'site-navigation-fixed' ) ) { 34 32 var windowScrollTop = $( window ).scrollTop(), … … 42 40 } 43 41 44 42 if ( offsetDiff < fixedNavHeight ) { 45 $( window ).scrollTo( itemScrollTop - ( fixedNavHeight + 50 ), 600 );43 $( window ).scrollTo( itemScrollTop - ( fixedNavHeight + 50 ), 600 ); 46 44 } 47 45 } 48 } 46 }); 49 47 50 /** 51 * Sets properties of navigation 52 */ 48 // Set properties of navigation. 53 49 function setNavProps() { 54 50 navigationHeight = $navigation.height(); 55 51 navigationOuterHeight = $navigation.outerHeight(); … … 59 55 navIsNotTooTall = navigationHeight <= idealNavHeight; 60 56 } 61 57 62 /** 63 * Makes navigation 'stick' 64 */ 58 // Make navigation 'stick'. 65 59 function adjustScrollClass() { 66 60 67 // Make sure we're not on a mobile screen 61 // Make sure we're not on a mobile screen. 68 62 if ( 'none' === $menuToggle.css( 'display' ) ) { 69 63 70 // Make sure the nav isn't taller than two rows 64 // Make sure the nav isn't taller than two rows. 71 65 if ( navIsNotTooTall ) { 72 66 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. 74 68 if ( isFrontPage && $customHeaderImage.length ) { 75 69 headerOffset = $customHeader.innerHeight() - navigationOuterHeight; 76 70 } else { … … 77 71 headerOffset = $customHeader.innerHeight(); 78 72 } 79 73 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. 81 75 if ( $( window ).scrollTop() >= headerOffset ) { 82 76 $navigation.addClass( navigationFixedClass ); 83 77 } else { … … 86 80 87 81 } else { 88 82 89 // Remove 'fixed' class if nav is taller than two rows 83 // Remove 'fixed' class if nav is taller than two rows. 90 84 $navigation.removeClass( navigationFixedClass ); 91 85 } 92 86 } 93 87 } 94 88 95 /** 96 * Sets margins of branding in header 97 */ 89 // Set margins of branding in header. 98 90 function adjustHeaderHeight() { 99 91 if ( 'none' === $menuToggle.css( 'display' ) ) { 100 92 … … 111 103 } 112 104 } 113 105 114 /** 115 * Sets icon for quotes 116 */ 106 // Set icon for quotes. 117 107 function setQuotesIcon() { 118 108 $( twentyseventeenScreenReaderText.quote ).prependTo( $formatQuote ); 119 109 } 120 110 121 /** 122 * Add 'below-entry-meta' class to elements. 123 */ 111 // Add 'below-entry-meta' class to elements. 124 112 function belowEntryMetaClass( param ) { 125 113 var sidebarPos, sidebarPosBottom; 126 114 … … 138 126 139 127 $entryContent.find( param ).each( function() { 140 128 var $element = $( this ), 141 142 129 elementPos = $element.offset(), 130 elementPosTop = elementPos.top; 143 131 144 132 // Add 'below-entry-meta' to elements below the entry meta. 145 133 if ( elementPosTop > sidebarPosBottom ) { … … 150 138 }); 151 139 } 152 140 153 /* *141 /* 154 142 * Test if inline SVGs are supported. 155 143 * @link https://github.com/Modernizr/Modernizr/ 156 144 */ … … 160 148 return 'http://www.w3.org/2000/svg' === ( 'undefined' !== typeof SVGRect && div.firstChild && div.firstChild.namespaceURI ); 161 149 } 162 150 163 // Fire s on document ready151 // Fire on document ready. 164 152 $( document ).ready( function() { 165 153 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 ) { 168 156 setNavProps(); 169 157 adjustScrollClass(); 170 158 } 171 159 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. 173 161 if ( $menuScrollDown.length ) { 174 162 175 163 if ( $( 'body' ).hasClass( 'admin-bar' ) ) { … … 176 164 menuTop -= 32; 177 165 } 178 166 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. 180 168 } 181 169 if ( ! $navigation.length ) { 182 170 navigationOuterHeight = 0; … … 186 174 e.preventDefault(); 187 175 $( window ).scrollTo( '#primary', { 188 176 duration: 600, 189 offset: { 'top': menuTop - navigationOuterHeight }190 } 191 } 177 offset: { top: menuTop - navigationOuterHeight } 178 }); 179 }); 192 180 } 193 181 194 182 adjustHeaderHeight(); … … 196 184 if ( true === supportsInlineSVG() ) { 197 185 document.documentElement.className = document.documentElement.className.replace( /(\s*)no-svg(\s*)/, '$1svg$2' ); 198 186 } 199 } 187 }); 200 188 201 // If navigation menu is present on page, adjust it on scroll and screen resize 189 // If navigation menu is present on page, adjust it on scroll and screen resize. 202 190 if ( $navigation.length ) { 203 191 204 // On scroll, we want to stick/unstick the navigation 192 // On scroll, we want to stick/unstick the navigation. 205 193 $( window ).on( 'scroll', function() { 206 194 adjustScrollClass(); 207 195 adjustHeaderHeight(); 208 } 196 }); 209 197 210 // Also want to make sure the navigation is where it should be on resize 198 // Also want to make sure the navigation is where it should be on resize. 211 199 $( window ).resize( function() { 212 200 setNavProps(); 213 201 setTimeout( adjustScrollClass, 500 ); 214 } 202 }); 215 203 } 216 204 217 205 $( window ).resize( function() { … … 220 208 belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' ); 221 209 }, 300 ); 222 210 setTimeout( adjustHeaderHeight, 1000 ); 223 } 211 }); 224 212 225 } ( jQuery ));213 })( jQuery ); -
src/wp-content/themes/twentyseventeen/assets/js/navigation.js
5 5 * Contains handlers for navigation and widget area. 6 6 */ 7 7 8 ( 8 (function( $ ) { 9 9 var masthead, menuToggle, siteNavigation; 10 10 11 11 function initMainNavigation( container ) { 12 12 13 13 // 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 }) ); 22 17 23 18 container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle ); 24 19 … … 30 25 container.find( '.menu-item-has-children, .page_item_has_children' ).attr( 'aria-haspopup', 'true' ); 31 26 32 27 container.find( '.dropdown-toggle' ).click( function( e ) { 33 var _this 28 var _this = $( this ), 34 29 screenReaderSpan = _this.find( '.screen-reader-text' ); 35 30 36 31 e.preventDefault(); … … 37 32 _this.toggleClass( 'toggled-on' ); 38 33 _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' ); 39 34 40 // jscs:disable41 35 _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' ); 42 // jscs:enable 36 43 37 screenReaderSpan.text( screenReaderSpan.text() === twentyseventeenScreenReaderText.expand ? twentyseventeenScreenReaderText.collapse : twentyseventeenScreenReaderText.expand ); 44 } 38 }); 45 39 } 40 46 41 initMainNavigation( $( '.main-navigation' ) ); 47 42 48 masthead 49 menuToggle 50 siteNavigation 43 masthead = $( '#masthead' ); 44 menuToggle = masthead.find( '.menu-toggle' ); 45 siteNavigation = masthead.find( '.main-navigation > div > ul' ); 51 46 52 47 // Enable menuToggle. 53 ( 48 (function() { 54 49 55 50 // Return early if menuToggle is missing. 56 51 if ( ! menuToggle.length ) { … … 63 58 menuToggle.on( 'click.twentyseventeen', function() { 64 59 $( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' ); 65 60 66 // jscs:disable67 $( this ).add( siteNavigation ).attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );68 // jscs:enable69 } 70 } 61 $( this ) 62 .add( siteNavigation ) 63 .attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' ); 64 }); 65 })(); 71 66 72 67 // Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility. 73 ( 68 (function() { 74 69 if ( ! siteNavigation.length || ! siteNavigation.children().length ) { 75 70 return; 76 71 } … … 83 78 if ( ! $( e.target ).closest( '.main-navigation li' ).length ) { 84 79 $( '.main-navigation li' ).removeClass( 'focus' ); 85 80 } 86 } 81 }); 87 82 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' ); 90 86 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 }); 97 93 98 94 } else { 99 95 siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' ).unbind( 'touchstart.twentyseventeen' ); … … 107 103 108 104 siteNavigation.find( 'a' ).on( 'focus.twentyseventeen blur.twentyseventeen', function() { 109 105 $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' ); 110 } 111 } 106 }); 107 })(); 112 108 113 109 // Add the default ARIA attributes for the menu toggle and the navigations. 114 110 function onResizeARIA() { … … 135 131 $( document ).ready( function() { 136 132 $( window ).on( 'load.twentyseventeen', onResizeARIA ); 137 133 $( window ).on( 'resize.twentyseventeen', onResizeARIA ); 138 } 134 }); 139 135 140 } 136 })( jQuery ); -
src/wp-content/themes/twentyseventeen/assets/js/skip-link-focus-fix.js
5 5 * 6 6 * Learn more: https://git.io/vWdr2 7 7 */ 8 ( 8 (function() { 9 9 var isIe = /(trident|msie)/i.test( navigator.userAgent ); 10 10 11 11 if ( isIe && document.getElementById && window.addEventListener ) {