themes-wordpress/libretto/js/libretto.js

/**
 * libretto.js
 *
 * Handles custom functions, primarily for images
 */

( function( $ ) {
	/* This calculates the size of each image in the entry content,
	 * then gives it a class to overlap the content area if it's wide enough.
	 * Certain images are ignored-—mostly those in galleries or video previews
	 */
	function formatImages() {

		$( 'article img' ).each( function() {
			// Never give overlap class to gallery images or video, unless you want things to implode
			// Leave comment images alone, as well.
			// "Medium" and "large" images are also excluded for logical reasons, as well as smileys
			if ( ! $( this ).hasClass( 'attachment-gallery' ) && ! $( this ).hasClass( 'videopress-poster' )
				&& ! $( this ).parents( '.tiled-gallery-item' ).length && ! $( this ).parents( '.gallery' ).length
				&& ! $( this ).parents( '.comment-content' ).length
				&& ! $( this ).hasClass( 'size-thumbnail' ) && ! $( this ).hasClass( 'size-medium' ) && ! $( this ).hasClass( 'wp-smiley' ) ) {

				// Determine actual, rather than computed, width of image, by creating a new image instance
				var computedImage = $( this );
				var actualImage = new Image();
				actualImage.src = computedImage.attr( 'src' )
				var imageWidth = actualImage.width;

				// If it's big enough, give it the oversized class for the overlap, and remove height & width attributes
				if ( imageWidth > 895 ) {
					// If we're inside a caption, the oversized class should instead be added to our caption.
					// We'll also remove the width property
					if ( $( this ).parents( 'figure' ).length ) {
						$( this ).parents( 'figure' ).addClass( 'libretto-oversized' );
						$( this ).parents( 'figure' ).css( "width", "" );
					} else {
						$( this ).addClass( 'libretto-oversized' );
					}
					$( this ).removeAttr( 'width' );
					$( this ).removeAttr( 'height' );
				}
			}
		});

		// Remove height & width attributes from featured images
		$( '.featured-image' ).each( function() {
			$( this ).removeAttr( 'width' );
			$( this ).removeAttr( 'height' );
		});
	}

	// Format images on each subsequent Infinite Scroll load, as well
	$( document ).on( 'post-load', function() {
		formatImages();
	});

	// Ensure that header images are no taller than the viewport height
	function fitHeader() {
		var windowHeight = $( window ).height();
		var windowWidth = $( window ).width();
		var navBarHeight = $( '.nav-bar' ).height();
		var wpAdminBar = $( '#wpadminbar' ).height() || 0;
		var effectiveViewportHeight = windowHeight - navBarHeight - wpAdminBar;
		var mastheadImageHeight = $( '#masthead' ).data('image-height');

		// we should only resize for larger devices (tablets and up)
		if ( windowWidth > 640 ) {
			if ( mastheadImageHeight >= effectiveViewportHeight ) {
				$( '#masthead' ).css( 'height', effectiveViewportHeight );
			} else {
				$( '#masthead' ).css( 'height', mastheadImageHeight );
			}
		}
	};

	// Wait for images to be loaded before calculating sizes
	$( window ).on( 'load', function() {
		formatImages();
	});

	$( document ).ready( function() {
		fitHeader();

		// Pull out the search bar when clicked
		$( '#site-navigation .search-form label' ).on( 'click', function(event) {
			var $form = $( this ).parent( 'form' );
			var $input = $form.find( '.search-field' );
			/*
			 * Only submit the form if we actually clicked on the label itself.
			 * There's an input inside the label (for entering your search term)
			 * and it's confusing if clicking that submits the form!
			 */
			if ( $form.hasClass( 'libretto-open' ) && $( event.target ).prop('tagName') === 'LABEL') {
				// Submit our search if there's a search term entered
				if ( $input.val() ) {
					$form.submit();
        // Otherwise, close the search box
      	} else {
      		$form.removeClass( 'libretto-open' );
          return false;
        }
			} else {
				$form.addClass( 'libretto-open' );
				$input.focus();
				return false;
			}

		});

		// And hide when it loses focus, too!
		$( '#site-navigation .search-form input[type="search"]' ).on( 'blur', function(event) {
			if ( event.target.attr('type') === 'search' ) {
				return;
			}
			$( '#site-navigation .search-form' ).removeClass( 'libretto-open' );
		});


	});

} )( jQuery );