[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

title

Body

[close]

/wp-content/themes/twentyseventeen/assets/js/ -> global.js (source)

   1  /* global twentyseventeenScreenReaderText */
   2  (function( $ ) {
   3  
   4      // Variables and DOM Caching.
   5      var $body = $( 'body' ),
   6          $customHeader = $body.find( '.custom-header' ),
   7          $branding = $customHeader.find( '.site-branding' ),
   8          $navigation = $body.find( '.navigation-top' ),
   9          $navWrap = $navigation.find( '.wrap' ),
  10          $navMenuItem = $navigation.find( '.menu-item' ),
  11          $menuToggle = $navigation.find( '.menu-toggle' ),
  12          $menuScrollDown = $body.find( '.menu-scroll-down' ),
  13          $sidebar = $body.find( '#secondary' ),
  14          $entryContent = $body.find( '.entry-content' ),
  15          $formatQuote = $body.find( '.format-quote blockquote' ),
  16          isFrontPage = $body.hasClass( 'twentyseventeen-front-page' ) || $body.hasClass( 'home blog' ),
  17          navigationFixedClass = 'site-navigation-fixed',
  18          navigationHeight,
  19          navigationOuterHeight,
  20          navPadding,
  21          navMenuItemHeight,
  22          idealNavHeight,
  23          navIsNotTooTall,
  24          headerOffset,
  25          menuTop = 0,
  26          resizeTimer;
  27  
  28      // Ensure the sticky navigation doesn't cover current focused links.
  29      $( 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]', '.site-content-contain' ).filter( ':visible' ).focus( function() {
  30          if ( $navigation.hasClass( 'site-navigation-fixed' ) ) {
  31              var windowScrollTop = $( window ).scrollTop(),
  32                  fixedNavHeight = $navigation.height(),
  33                  itemScrollTop = $( this ).offset().top,
  34                  offsetDiff = itemScrollTop - windowScrollTop;
  35  
  36              // Account for Admin bar.
  37              if ( $( '#wpadminbar' ).length ) {
  38                  offsetDiff -= $( '#wpadminbar' ).height();
  39              }
  40  
  41              if ( offsetDiff < fixedNavHeight ) {
  42                  $( window ).scrollTo( itemScrollTop - ( fixedNavHeight + 50 ), 0 );
  43              }
  44          }
  45      });
  46  
  47      // Set properties of navigation.
  48  	function setNavProps() {
  49          navigationHeight      = $navigation.height();
  50          navigationOuterHeight = $navigation.outerHeight();
  51          navPadding            = parseFloat( $navWrap.css( 'padding-top' ) ) * 2;
  52          navMenuItemHeight     = $navMenuItem.outerHeight() * 2;
  53          idealNavHeight        = navPadding + navMenuItemHeight;
  54          navIsNotTooTall       = navigationHeight <= idealNavHeight;
  55      }
  56  
  57      // Make navigation 'stick'.
  58  	function adjustScrollClass() {
  59  
  60          // Make sure we're not on a mobile screen.
  61          if ( 'none' === $menuToggle.css( 'display' ) ) {
  62  
  63              // Make sure the nav isn't taller than two rows.
  64              if ( navIsNotTooTall ) {
  65  
  66                  // When there's a custom header image or video, the header offset includes the height of the navigation.
  67                  if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
  68                      headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
  69                  } else {
  70                      headerOffset = $customHeader.innerHeight();
  71                  }
  72  
  73                  // If the scroll is more than the custom header, set the fixed class.
  74                  if ( $( window ).scrollTop() >= headerOffset ) {
  75                      $navigation.addClass( navigationFixedClass );
  76                  } else {
  77                      $navigation.removeClass( navigationFixedClass );
  78                  }
  79  
  80              } else {
  81  
  82                  // Remove 'fixed' class if nav is taller than two rows.
  83                  $navigation.removeClass( navigationFixedClass );
  84              }
  85          }
  86      }
  87  
  88      // Set margins of branding in header.
  89  	function adjustHeaderHeight() {
  90          if ( 'none' === $menuToggle.css( 'display' ) ) {
  91  
  92              // The margin should be applied to different elements on front-page or home vs interior pages.
  93              if ( isFrontPage ) {
  94                  $branding.css( 'margin-bottom', navigationOuterHeight );
  95              } else {
  96                  $customHeader.css( 'margin-bottom', navigationOuterHeight );
  97              }
  98  
  99          } else {
 100              $customHeader.css( 'margin-bottom', '0' );
 101              $branding.css( 'margin-bottom', '0' );
 102          }
 103      }
 104  
 105      // Set icon for quotes.
 106  	function setQuotesIcon() {
 107          $( twentyseventeenScreenReaderText.quote ).prependTo( $formatQuote );
 108      }
 109  
 110      // Add 'below-entry-meta' class to elements.
 111  	function belowEntryMetaClass( param ) {
 112          var sidebarPos, sidebarPosBottom;
 113  
 114          if ( ! $body.hasClass( 'has-sidebar' ) || (
 115              $body.hasClass( 'search' ) ||
 116              $body.hasClass( 'single-attachment' ) ||
 117              $body.hasClass( 'error404' ) ||
 118              $body.hasClass( 'twentyseventeen-front-page' )
 119          ) ) {
 120              return;
 121          }
 122  
 123          sidebarPos       = $sidebar.offset();
 124          sidebarPosBottom = sidebarPos.top + ( $sidebar.height() + 28 );
 125  
 126          $entryContent.find( param ).each( function() {
 127              var $element = $( this ),
 128                  elementPos = $element.offset(),
 129                  elementPosTop = elementPos.top;
 130  
 131              // Add 'below-entry-meta' to elements below the entry meta.
 132              if ( elementPosTop > sidebarPosBottom ) {
 133                  $element.addClass( 'below-entry-meta' );
 134              } else {
 135                  $element.removeClass( 'below-entry-meta' );
 136              }
 137          });
 138      }
 139  
 140      /*
 141       * Test if inline SVGs are supported.
 142       * @link https://github.com/Modernizr/Modernizr/
 143       */
 144  	function supportsInlineSVG() {
 145          var div = document.createElement( 'div' );
 146          div.innerHTML = '<svg/>';
 147          return 'http://www.w3.org/2000/svg' === ( 'undefined' !== typeof SVGRect && div.firstChild && div.firstChild.namespaceURI );
 148      }
 149  
 150      /**
 151       * Test if an iOS device.
 152      */
 153  	function checkiOS() {
 154          return /iPad|iPhone|iPod/.test(navigator.userAgent) && ! window.MSStream;
 155      }
 156  
 157      /*
 158       * Test if background-attachment: fixed is supported.
 159       * @link http://stackoverflow.com/questions/14115080/detect-support-for-background-attachment-fixed
 160       */
 161  	function supportsFixedBackground() {
 162          var el = document.createElement('div'),
 163              isSupported;
 164  
 165          try {
 166              if ( ! ( 'backgroundAttachment' in el.style ) || checkiOS() ) {
 167                  return false;
 168              }
 169              el.style.backgroundAttachment = 'fixed';
 170              isSupported = ( 'fixed' === el.style.backgroundAttachment );
 171              return isSupported;
 172          }
 173          catch (e) {
 174              return false;
 175          }
 176      }
 177  
 178      // Fire on document ready.
 179      $( document ).ready( function() {
 180  
 181          // If navigation menu is present on page, setNavProps and adjustScrollClass.
 182          if ( $navigation.length ) {
 183              setNavProps();
 184              adjustScrollClass();
 185          }
 186  
 187          // If 'Scroll Down' arrow in present on page, calculate scroll offset and bind an event handler to the click event.
 188          if ( $menuScrollDown.length ) {
 189  
 190              if ( $( 'body' ).hasClass( 'admin-bar' ) ) {
 191                  menuTop -= 32;
 192              }
 193              if ( $( 'body' ).hasClass( 'blog' ) ) {
 194                  menuTop -= 30; // The div for latest posts has no space above content, add some to account for this.
 195              }
 196              if ( ! $navigation.length ) {
 197                  navigationOuterHeight = 0;
 198              }
 199  
 200              $menuScrollDown.click( function( e ) {
 201                  e.preventDefault();
 202                  $( window ).scrollTo( '#primary', {
 203                      duration: 600,
 204                      offset: { top: menuTop - navigationOuterHeight }
 205                  });
 206              });
 207          }
 208  
 209          adjustHeaderHeight();
 210          setQuotesIcon();
 211          belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
 212          if ( true === supportsInlineSVG() ) {
 213              document.documentElement.className = document.documentElement.className.replace( /(\s*)no-svg(\s*)/, '$1svg$2' );
 214          }
 215  
 216          if ( true === supportsFixedBackground() ) {
 217              document.documentElement.className += ' background-fixed';
 218          }
 219      });
 220  
 221      // If navigation menu is present on page, adjust it on scroll and screen resize.
 222      if ( $navigation.length ) {
 223  
 224          // On scroll, we want to stick/unstick the navigation.
 225          $( window ).on( 'scroll', function() {
 226              adjustScrollClass();
 227              adjustHeaderHeight();
 228          });
 229  
 230          // Also want to make sure the navigation is where it should be on resize.
 231          $( window ).resize( function() {
 232              setNavProps();
 233              setTimeout( adjustScrollClass, 500 );
 234          });
 235      }
 236  
 237      $( window ).resize( function() {
 238          clearTimeout( resizeTimer );
 239          resizeTimer = setTimeout( function() {
 240              belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
 241          }, 300 );
 242          setTimeout( adjustHeaderHeight, 1000 );
 243      });
 244  
 245      // Add header video class after the video is loaded.
 246      $( document ).on( 'wp-custom-header-video-loaded', function() {
 247          $body.addClass( 'has-header-video' );
 248      });
 249  
 250  })( jQuery );


Generated: Sat Nov 23 20:47:33 2019 Cross-referenced by PHPXref 0.7