]> scripts.mit.edu Git - autoinstalls/wordpress.git/blobdiff - wp-content/themes/twentyseventeen/assets/js/global.js
WordPress 4.7
[autoinstalls/wordpress.git] / wp-content / themes / twentyseventeen / assets / js / global.js
diff --git a/wp-content/themes/twentyseventeen/assets/js/global.js b/wp-content/themes/twentyseventeen/assets/js/global.js
new file mode 100644 (file)
index 0000000..6e2f429
--- /dev/null
@@ -0,0 +1,249 @@
+/* global twentyseventeenScreenReaderText */
+(function( $ ) {
+
+       // Variables and DOM Caching.
+       var $body = $( 'body' ),
+               $customHeader = $body.find( '.custom-header' ),
+               $branding = $customHeader.find( '.site-branding' ),
+               $navigation = $body.find( '.navigation-top' ),
+               $navWrap = $navigation.find( '.wrap' ),
+               $navMenuItem = $navigation.find( '.menu-item' ),
+               $menuToggle = $navigation.find( '.menu-toggle' ),
+               $menuScrollDown = $body.find( '.menu-scroll-down' ),
+               $sidebar = $body.find( '#secondary' ),
+               $entryContent = $body.find( '.entry-content' ),
+               $formatQuote = $body.find( '.format-quote blockquote' ),
+               isFrontPage = $body.hasClass( 'twentyseventeen-front-page' ) || $body.hasClass( 'home blog' ),
+               navigationFixedClass = 'site-navigation-fixed',
+               navigationHeight,
+               navigationOuterHeight,
+               navPadding,
+               navMenuItemHeight,
+               idealNavHeight,
+               navIsNotTooTall,
+               headerOffset,
+               menuTop = 0,
+               resizeTimer;
+
+       // Ensure the sticky navigation doesn't cover current focused links.
+       $( '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() {
+               if ( $navigation.hasClass( 'site-navigation-fixed' ) ) {
+                       var windowScrollTop = $( window ).scrollTop(),
+                               fixedNavHeight = $navigation.height(),
+                               itemScrollTop = $( this ).offset().top,
+                               offsetDiff = itemScrollTop - windowScrollTop;
+
+                       // Account for Admin bar.
+                       if ( $( '#wpadminbar' ).length ) {
+                               offsetDiff -= $( '#wpadminbar' ).height();
+                       }
+
+                       if ( offsetDiff < fixedNavHeight ) {
+                               $( window ).scrollTo( itemScrollTop - ( fixedNavHeight + 50 ), 0 );
+                       }
+               }
+       });
+
+       // Set properties of navigation.
+       function setNavProps() {
+               navigationHeight      = $navigation.height();
+               navigationOuterHeight = $navigation.outerHeight();
+               navPadding            = parseFloat( $navWrap.css( 'padding-top' ) ) * 2;
+               navMenuItemHeight     = $navMenuItem.outerHeight() * 2;
+               idealNavHeight        = navPadding + navMenuItemHeight;
+               navIsNotTooTall       = navigationHeight <= idealNavHeight;
+       }
+
+       // Make navigation 'stick'.
+       function adjustScrollClass() {
+
+               // Make sure we're not on a mobile screen.
+               if ( 'none' === $menuToggle.css( 'display' ) ) {
+
+                       // Make sure the nav isn't taller than two rows.
+                       if ( navIsNotTooTall ) {
+
+                               // When there's a custom header image or video, the header offset includes the height of the navigation.
+                               if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
+                                       headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
+                               } else {
+                                       headerOffset = $customHeader.innerHeight();
+                               }
+
+                               // If the scroll is more than the custom header, set the fixed class.
+                               if ( $( window ).scrollTop() >= headerOffset ) {
+                                       $navigation.addClass( navigationFixedClass );
+                               } else {
+                                       $navigation.removeClass( navigationFixedClass );
+                               }
+
+                       } else {
+
+                               // Remove 'fixed' class if nav is taller than two rows.
+                               $navigation.removeClass( navigationFixedClass );
+                       }
+               }
+       }
+
+       // Set margins of branding in header.
+       function adjustHeaderHeight() {
+               if ( 'none' === $menuToggle.css( 'display' ) ) {
+
+                       // The margin should be applied to different elements on front-page or home vs interior pages.
+                       if ( isFrontPage ) {
+                               $branding.css( 'margin-bottom', navigationOuterHeight );
+                       } else {
+                               $customHeader.css( 'margin-bottom', navigationOuterHeight );
+                       }
+
+               } else {
+                       $customHeader.css( 'margin-bottom', '0' );
+                       $branding.css( 'margin-bottom', '0' );
+               }
+       }
+
+       // Set icon for quotes.
+       function setQuotesIcon() {
+               $( twentyseventeenScreenReaderText.quote ).prependTo( $formatQuote );
+       }
+
+       // Add 'below-entry-meta' class to elements.
+       function belowEntryMetaClass( param ) {
+               var sidebarPos, sidebarPosBottom;
+
+               if ( ! $body.hasClass( 'has-sidebar' ) || (
+                       $body.hasClass( 'search' ) ||
+                       $body.hasClass( 'single-attachment' ) ||
+                       $body.hasClass( 'error404' ) ||
+                       $body.hasClass( 'twentyseventeen-front-page' )
+               ) ) {
+                       return;
+               }
+
+               sidebarPos       = $sidebar.offset();
+               sidebarPosBottom = sidebarPos.top + ( $sidebar.height() + 28 );
+
+               $entryContent.find( param ).each( function() {
+                       var $element = $( this ),
+                               elementPos = $element.offset(),
+                               elementPosTop = elementPos.top;
+
+                       // Add 'below-entry-meta' to elements below the entry meta.
+                       if ( elementPosTop > sidebarPosBottom ) {
+                               $element.addClass( 'below-entry-meta' );
+                       } else {
+                               $element.removeClass( 'below-entry-meta' );
+                       }
+               });
+       }
+
+       /*
+        * Test if inline SVGs are supported.
+        * @link https://github.com/Modernizr/Modernizr/
+        */
+       function supportsInlineSVG() {
+               var div = document.createElement( 'div' );
+               div.innerHTML = '<svg/>';
+               return 'http://www.w3.org/2000/svg' === ( 'undefined' !== typeof SVGRect && div.firstChild && div.firstChild.namespaceURI );
+       }
+
+       /**
+        * Test if an iOS device.
+       */
+       function checkiOS() {
+               return /iPad|iPhone|iPod/.test(navigator.userAgent) && ! window.MSStream;
+       }
+
+       /*
+        * Test if background-attachment: fixed is supported.
+        * @link http://stackoverflow.com/questions/14115080/detect-support-for-background-attachment-fixed
+        */
+       function supportsFixedBackground() {
+               var el = document.createElement('div'),
+                       isSupported;
+
+               try {
+                       if ( ! ( 'backgroundAttachment' in el.style ) || checkiOS() ) {
+                               return false;
+                       }
+                       el.style.backgroundAttachment = 'fixed';
+                       isSupported = ( 'fixed' === el.style.backgroundAttachment );
+                       return isSupported;
+               }
+               catch (e) {
+                       return false;
+               }
+       }
+
+       // Fire on document ready.
+       $( document ).ready( function() {
+
+               // If navigation menu is present on page, setNavProps and adjustScrollClass.
+               if ( $navigation.length ) {
+                       setNavProps();
+                       adjustScrollClass();
+               }
+
+               // If 'Scroll Down' arrow in present on page, calculate scroll offset and bind an event handler to the click event.
+               if ( $menuScrollDown.length ) {
+
+                       if ( $( 'body' ).hasClass( 'admin-bar' ) ) {
+                               menuTop -= 32;
+                       }
+                       if ( $( 'body' ).hasClass( 'blog' ) ) {
+                               menuTop -= 30; // The div for latest posts has no space above content, add some to account for this.
+                       }
+                       if ( ! $navigation.length ) {
+                               navigationOuterHeight = 0;
+                       }
+
+                       $menuScrollDown.click( function( e ) {
+                               e.preventDefault();
+                               $( window ).scrollTo( '#primary', {
+                                       duration: 600,
+                                       offset: { top: menuTop - navigationOuterHeight }
+                               });
+                       });
+               }
+
+               adjustHeaderHeight();
+               setQuotesIcon();
+               if ( true === supportsInlineSVG() ) {
+                       document.documentElement.className = document.documentElement.className.replace( /(\s*)no-svg(\s*)/, '$1svg$2' );
+               }
+
+               if ( true === supportsFixedBackground() ) {
+                       document.documentElement.className += ' background-fixed';
+               }
+       });
+
+       // If navigation menu is present on page, adjust it on scroll and screen resize.
+       if ( $navigation.length ) {
+
+               // On scroll, we want to stick/unstick the navigation.
+               $( window ).on( 'scroll', function() {
+                       adjustScrollClass();
+                       adjustHeaderHeight();
+               });
+
+               // Also want to make sure the navigation is where it should be on resize.
+               $( window ).resize( function() {
+                       setNavProps();
+                       setTimeout( adjustScrollClass, 500 );
+               });
+       }
+
+       $( window ).resize( function() {
+               clearTimeout( resizeTimer );
+               resizeTimer = setTimeout( function() {
+                       belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
+               }, 300 );
+               setTimeout( adjustHeaderHeight, 1000 );
+       });
+
+       // Add header video class after the video is loaded.
+       $( document ).on( 'wp-custom-header-video-loaded', function() {
+               $body.addClass( 'has-header-video' );
+       });
+
+})( jQuery );