Ticket #38752: 38752.2.diff
File 38752.2.diff, 13.4 KB (added by , 8 years ago) |
---|
-
src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js
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 30 // Value of isExpanding will = true if you're entering the section, false if you're leaving it. 31 31 wp.customize.previewer.send( 'section-highlight', { expanded: isExpanding } ); 32 32 } ); 33 33 } ); -
src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js
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 … … 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 } ); … … 50 51 value.bind( function( to ) { 51 52 if ( 'blank' === to ) { 52 53 $( '.site-title, .site-description' ).css( { 53 'clip': 'rect(1px, 1px, 1px, 1px)',54 'position': 'absolute'54 clip: 'rect(1px, 1px, 1px, 1px)', 55 position: 'absolute' 55 56 } ); 56 57 $( 'body' ).addClass( 'title-tagline-hidden' ); 57 58 } else { 58 59 $( '.site-title, .site-description' ).css( { 59 'clip': 'auto',60 'position': 'relative'60 clip: 'auto', 61 position: 'relative' 61 62 } ); 62 63 $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css( { 63 'color': to64 color: to 64 65 } ); 65 66 $( 'body' ).removeClass( 'title-tagline-hidden' ); 66 67 } … … 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 ); 76 $( 'body' ) 77 .removeClass( 'colors-light colors-dark colors-custom' ) 78 .addClass( 'colors-' + to ); 77 79 } ); 78 80 } ); 79 81 … … 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 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 ); 92 94 } ); 93 95 } ); 94 96 -
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 }177 offset: { top: menuTop - navigationOuterHeight } 190 178 } ); 191 179 } ); 192 180 } … … 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 ); … … 222 210 setTimeout( adjustHeaderHeight, 1000 ); 223 211 } ); 224 212 225 } ( jQuery ));213 } )( jQuery ); -
src/wp-content/themes/twentyseventeen/assets/js/navigation.js
30 30 container.find( '.menu-item-has-children, .page_item_has_children' ).attr( 'aria-haspopup', 'true' ); 31 31 32 32 container.find( '.dropdown-toggle' ).click( function( e ) { 33 var _this 33 var _this = $( this ), 34 34 screenReaderSpan = _this.find( '.screen-reader-text' ); 35 35 36 36 e.preventDefault(); … … 37 37 _this.toggleClass( 'toggled-on' ); 38 38 _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' ); 39 39 40 // jscs:disable41 40 _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' ); 42 // jscs:enable 41 43 42 screenReaderSpan.text( screenReaderSpan.text() === twentyseventeenScreenReaderText.expand ? twentyseventeenScreenReaderText.collapse : twentyseventeenScreenReaderText.expand ); 44 43 } ); 45 44 } 45 46 46 initMainNavigation( $( '.main-navigation' ) ); 47 47 48 masthead 49 menuToggle 50 siteNavigation 48 masthead = $( '#masthead' ); 49 menuToggle = masthead.find( '.menu-toggle' ); 50 siteNavigation = masthead.find( '.main-navigation > div > ul' ); 51 51 52 52 // Enable menuToggle. 53 53 ( function() { … … 63 63 menuToggle.on( 'click.twentyseventeen', function() { 64 64 $( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' ); 65 65 66 // jscs:disable67 66 $( this ).add( siteNavigation ).attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' ); 68 // jscs:enable69 67 } ); 70 68 } )(); 71 69