pen/assets/js/pen-scripts.js

/**
 * Front-end JavaScript.
 *
 * @package Pen
 */
;( function( $ ) {

	"use strict";

	$( document ).ready(
		function() {

				pen_trianglify();
				pen_shards();

				var $page = $( '#page' );
			if ( $page.children( '.pen_wrapper' ).length ) {
				  $page.children( '.pen_wrapper' ).addClass( 'pen_not_visible' )
				  .end().append( '<div class="pen_loading clearfix" role="alert" style="display:none"><div class="pen_wrap_icon"><div class="pen_icon"></div></div><ul><li>' + pen_js.text.loading + '</li></ul></div>' ).children( '.pen_loading' ).show();
			}

			if ( pen_function_exists( typeof Modernizr ) && Modernizr.mq( 'only all and (max-width:728px)' ) ) {
				if ( pen_function_exists( typeof $( window ).fitText ) && pen_js.font_resize.site_title === 'dynamic' ) {
					$( '#site-title' ).fitText();
				}
				if ( pen_js.font_resize.site_title === 'resize' ) {
					function pen_font_resize( $element, font_size ) {
						var parent_width = $element.parent().outerWidth( false ),
						element_width    = $element.css( { position: 'fixed', whiteSspace: 'nowrap' } ).outerWidth( true );
						$element.css( { position: 'relative' } );
						font_size = font_size - 2;
						if ( font_size > 12 && element_width > parent_width ) {
							$element.animate( { fontSize: font_size } );
							pen_font_resize( $element, font_size );
						}
					}
					var $site_title = $( '#pen_header h1 a .site-title' );
					pen_font_resize( $site_title, parseInt( $site_title.css( 'font-size' ) ) );
					$( window ).resize(
						function() {
							if ( pen_function_exists( typeof Modernizr ) && Modernizr.mq( 'only all and (max-width:728px)' ) ) {
								pen_font_resize( $site_title, parseInt( $site_title.css( 'font-size' ) ) );
							} else {
								$site_title.css( { fontSize: '' } );
							}
						}
					);
				}
			}

			if ( pen_function_exists( typeof autosize ) ) {
				  autosize( $page.find( 'textarea' ) );
			}

			if ( $( 'div#primary-menu' ).length ) {
				  var $menu = $( 'div#primary-menu > ul' );
			} else if ( $( 'ul#primary-menu' ).length ) {
				  var $menu = $( 'ul#primary-menu' );
			} else {
				  var $menu = false;
			}
			if ( $menu && pen_function_exists( typeof $( window ).superfish ) ) {
				$menu.superfish(
					{
						animation: pen_js.navigation_easing,
						speed: parseInt( pen_js.animation_navigation_speed ),
						cssArrows: pen_js.navigation_arrows
						}
				);
			}
			if ( pen_js.navigation_mobile && pen_function_exists( typeof $( window ).slicknav ) ) {
				$menu.slicknav(
					{
						label: pen_js.text.menu
						}
				);
			}

				$( '.search-form' ).on(
					'submit',
					function( event ) {
						var $search = $( this );
						if ( $.trim( $search.find( '.search-field' ).val() ) === '' ) {
							 alert( pen_js.text.enter_keyword );
							 event.preventDefault();
						}
					}
				);

			if ( '.pen_options_overview' ) {
				$( '#primary' ).find( '.pen_options_overview' ).each(
					function() {
							var $overview = $( this ),
							overview_id   = $overview.attr( 'id' ),
							toggle_id     = overview_id + '_toggle';
							$overview.addClass( 'pen_off_screen' )
							.prepend( '<a href="#" class="pen_close">' + pen_js.text.close + '</a>' )
							.before( '<a href="#" id="' + toggle_id + '" class="pen_options_overview_toggle pen_button pen_visible" title="' + pen_js.text.overview_options_post + '">' + pen_js.text.overview_options_post + '</a>' )
							.find( '.pen_close' ).on(
								'click',
								function( event ) {
									$( '#' + toggle_id ).toggleClass( 'pen_visible' );
									$overview.toggleClass( 'pen_visible' );
									event.preventDefault();
								}
							);
							$( '#' + toggle_id ).on(
								'click',
								function( event ) {
									$( this ).toggleClass( 'pen_visible' );
									$overview.toggleClass( 'pen_visible' );
									event.preventDefault();
								}
							);
					}
				);
			}
				$( '#pen_back' ).hide().on(
					'click',
					function ( event ) {
						$( 'html, body' ).animate( { scrollTop: 0 }, { queue: false, duration: 1000 } );
						event.preventDefault();
					}
				);

				pen_sticky_header();

		}
	);

	$( window ).load(
		function() {
				var $page = $( '#page' ),
				$main     = $( '#main' );
			if ( $page.children( '.pen_wrapper' ).length ) {
				$page.children( '.pen_loading' ).fadeOut(
					100,
					function() {
						$page.children( '.pen_wrapper' ).removeClass( 'pen_not_visible' );
						$( this ).remove();
					}
				);
			}
				var $list = $( '#pen_masonry' );
			if ( $list.length ) {
				if ( pen_js.list_type === 'masonry' && pen_function_exists( typeof jQuery( window ).masonry ) ) {
					$list.masonry(
						{
							itemSelector: 'article.post,article.page',
							percentPosition: true,
							transitionDuration: 0
							}
					).imagesLoaded(
						function() {
							$list.masonry( 'layout' );
							pen_content_height();
							if ( pen_function_exists( typeof pen_animation ) ) {
								 var $items  = $main.find( 'article.post,article.page' ),
								 $thumbnails = $main.find( '.post-thumbnail' );
								 pen_animation( $items, pen_js.animation_list );
								 pen_animation( $thumbnails, pen_js.animation_list_thumbnails );
							}
						}
					);
					setTimeout(
						function() {
							$list.masonry( 'layout' );
							pen_content_height();
						},
						5000
					);
				}
			} else {
				if ( pen_function_exists( typeof pen_animation ) ) {
					var $thumbnails = $main.find( '.post-thumbnail' );
					if ( $( 'body' ).hasClass( 'pen_multiple' ) ) {
						  var $items = $main.find( 'article.post,article.page' );
						  pen_animation( $items, pen_js.animation_list );
						  pen_animation( $thumbnails, pen_js.animation_list_thumbnails );
					} else {
						  pen_animation( $main, pen_js.animation_content );
						  pen_animation( $thumbnails, pen_js.animation_content_thumbnails );
					}
				}
			}

			if ( pen_js.animation_comments ) {
				  var $comments = $( '#comments .comment-list' );
				if ( $comments.length ) {
					$comments.children( 'li' ).addClass( 'pen_animate_on_scroll pen_custom_animation_' + pen_js.animation_comments );
				}
			}

				pen_animation( $page.find( '.pen_animate_on_scroll' ), 'automatic' );

				pen_content_height();

				$page.find( '.pen_jump_menu' ).each(
					function() {
						pen_jump_menu( $( this ) );
					}
				);

		}
	);

	$( window ).on(
		'resize orientationchange',
		function() {
			$( '#main' ).find( 'article.post.animated,article.page.animated' ).removeClass( 'animated' ).addClass( 'animated_not' );
			pen_content_height();
		}
	);

	$( window ).scroll(
		function() {
				$( '#main' ).find( 'article.post.animated_not,article.page.animated' ).removeClass( 'animated_not' ).addClass( 'animated' );
			if ( $( this ).scrollTop() > 400 ) {
				  $( '#pen_back' ).fadeIn( 200 );
			} else {
				  $( '#pen_back' ).fadeOut( 200 );
			}
		}
	);

	function pen_sticky_header() {
		if ( pen_js.header_sticky && $( '#pen_header' ).length ) {
			var mobile   = false,
			$window      = $( window ),
			$body        = $( 'body' ),
			layout_boxed = $body.hasClass( 'pen_width_boxed' ) ? true : false,
			$header      = $( '#pen_header' );
			if ( pen_function_exists( typeof Modernizr ) && Modernizr.mq( 'only all and (max-width:728px)' ) ) {
				mobile = true;
			}
			$window.resize(
				function() {
					if ( pen_function_exists( typeof Modernizr ) && Modernizr.mq( 'only all and (max-width:728px)' ) ) {
						  mobile = true;
					} else {
						  mobile = false;
					}
				}
			);
			$window.on(
				'load scroll resize orientationchange pen_update_sticky_header',
				function() {
					if ( layout_boxed ) {
						$header.css( { width: $( '#pen_section' ).outerWidth( true ) } );
					}
					if ( mobile || $window.outerHeight() < $header.outerHeight( true ) ) {
						$header.removeClass( 'pen_header_sticked' ).css( { left: '', position: '', top: '' } );
						$body.css( { paddingTop: '' } );
					} else {
						var header_top = 0,
						header_height  = $header.removeClass( 'pen_header_sticked' ).outerHeight( true );
						if ( $( '#wpadminbar' ).length ) {
							var adminBarheight = $( '#wpadminbar' ).outerHeight( true );
							header_height     += adminBarheight;
							header_top        += adminBarheight;
						}
						if ( $window.scrollTop() ) {
							var header_offset = $header.offset();
							$header.css( { left: header_offset.left, position: 'fixed', top: header_top } ).addClass( 'pen_header_sticked' );
							$body.css( { paddingTop: header_height + 20 } );
						} else {
							$header.css( { left: '', position: '', top: '' } ).removeClass( 'pen_header_sticked' );
							$body.css( { paddingTop: '' } );
						}
					}
				}
			);
		}
	}

})( jQuery );

function pen_content_height() {
	var leftHeight = 0,
	rightHeight    = 0,
	$content       = jQuery( '#content' ),
	$left          = jQuery( '#pen_left' ),
	$right         = jQuery( '#pen_right' );
	if ( $left.length ) {
		leftHeight = $left.outerHeight( true );
	}
	if ( $right.length ) {
		rightHeight = $right.outerHeight( true );
	}
	var contentHeight = Math.max( leftHeight, rightHeight );
	if ( contentHeight ) {
		contentHeight += parseInt( $content.css( 'padding-bottom' ) );
		if ( contentHeight > $content.outerHeight( true ) ) {
			$content.css( 'min-height', contentHeight + 30 );
		}
	}
}

function pen_animation( $items, animation ) {
	if ( pen_function_exists( typeof jQuery( window ).waypoint ) && animation ) {
		$items.addClass( 'animated' ).css( 'visibility', 'hidden' ).waypoint(
			{
				handler: function( direction ) {
					var $item        = jQuery( this.element ),
					custom_animation = this.element.className.match( /(^|\s)pen_custom_animation_\S+/g );
					if ( custom_animation && custom_animation[0] ) {
						animation = jQuery.trim( custom_animation[0].replace( 'pen_custom_animation_', '' ) );
					}
					if ( ! $item.hasClass( animation ) ) {
						$item.addClass( animation ).css( 'visibility', 'visible' );
					}
				},
				offset: '90%'
			}
		);
	}
}

function pen_shards() {
	if ( pen_function_exists( typeof jQuery( window ).shards ) ) {
		var $body        = jQuery( 'body' ),
		background_image = $body.css( 'background-image' );
		if ( pen_js.shards_colors && background_image && background_image === 'none' ) {
			$body.prepend( '<div id="shards" style="left:0;height:100%;position:fixed;top:0;visibility:hidden;width:100%;" />' );
			var $shards = jQuery( '#shards' );
			$shards.shards( pen_js.shards_colors[0], pen_js.shards_colors[1], [0,0,0,0.2], 20, .8, 2, .15, true );
			var background = $shards.css( 'background-image' );
			$shards.remove();
			jQuery( 'body' ).addClass( 'pen_shards' ).removeClass( 'custom-background' );
			jQuery( 'head' ).append( "<style type=\"text/css\">body.pen_shards:before{background-image:" + background + " !important;content:'';left:0;height:100%;position:fixed;top:0;width:100%;will-change:transform;z-index:-1; }</style>" );
		}
	}
}

function pen_trianglify() {
	if ( pen_function_exists( typeof Trianglify ) ) {
		var $body        = jQuery( 'body' ),
		background_image = $body.css( 'background-image' );
		if ( pen_js.trianglify_colors && background_image && background_image === 'none' ) {
			var pattern = Trianglify(
				{
					height: window.innerHeight,
					width: window.innerWidth,
					x_colors: pen_js.trianglify_colors,
					y_colors: 'match_x',
					cell_size: 80
				}
			);
			var svg     = jQuery( '<div />' ).prepend( pattern.svg() ).html();
			svg         = '<?xml version="1.0" ?>' + svg.replace( '<svg', '<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"' );
			var dataURI = "data:image/svg+xml;base64, " + window.btoa( unescape( encodeURIComponent( svg ) ) );
			jQuery( 'body' ).addClass( 'pen_trianglify' ).removeClass( 'custom-background' );
			jQuery( 'head' ).append( "<style type=\"text/css\">body.pen_trianglify:before{background-image:url('" + dataURI + "') !important;background-size:cover;content:'';left:0;height:100%;position:fixed;top:0;width:100%;will-change:transform;z-index:-1; }</style>" );
		}
	}
}

function pen_jump_menu( $menu ) {
	var title = jQuery.trim( $menu.find( 'h4' ).text() );
	$menu.prepend( '<button type="button" class="pen_toggle" title="' + title + '"><span class="screen-reader-text">' + pen_js.text.expand_collapse + '</span></button>' )
	.find( '.pen_menu_wrapper' ).attr( 'aria-hidden', true )
	.end().removeClass( 'screen-reader-text' ).attr( 'aria-hidden', false )
	.find( 'h4 span' ).prepend( '<span class="pen_only" title="' + pen_js.text.theme_specific + '">' + pen_js.text.pen_theme + '</span>' );
	var $toggle = $menu.find( '.pen_toggle' ),
	timer;
	$menu.find( 'ul li a' ).each(
		function() {
				jQuery( this ).attr( 'title', jQuery.trim( jQuery( this ).text() ) ).attr( 'tabindex', '-1' );
		}
	);
	$toggle.on(
		'click',
		function( event ) {
			var $wrapper = jQuery( '.pen_menu_wrapper', $menu );
			clearTimeout( timer );
			if ( $toggle.hasClass( 'pen_expanded' ) ) {
				$toggle.removeClass( 'pen_expanded' );
				$wrapper.addClass( 'screen-reader-text' ).attr( 'aria-hidden', true )
				.find( 'ul li a' ).attr( 'tabindex', '-1' );
			} else {
				$toggle.addClass( 'pen_expanded' );
				$wrapper.find( 'ul li a' ).removeAttr( 'tabindex' )
				.end().removeClass( 'screen-reader-text' ).attr( 'aria-hidden', false )
				.on(
					'mouseleave',
					function() {
						clearTimeout( timer );
						timer = setTimeout(
							function() {
								$wrapper.stop().animate(
									{ opacity: 0 },
									{
										duration: 2000,
										queue: false,
										complete: function() {
											 $toggle.trigger( 'click' );
										}
									}
								);
							},
							30000
						);
					}
				).on(
					'mouseenter',
					function() {
						$wrapper.stop().animate( { opacity: 1 }, { duration: 200, queue: false } );
						clearTimeout( timer );
					}
				);
			}
			event.preventDefault();
		}
	);
}

function pen_function_exists( type_of ) {
	if ( type_of !== 'undefined' && type_of !== undefined && type_of !== null ) {
		return true;
	}
	return false;
}