mirror of
https://github.com/10h30/trestle.git
synced 2026-06-05 15:09:35 +09:00
Braad Martin
235 lines
8.1 KiB
JavaScript
235 lines
8.1 KiB
JavaScript
/**
|
|
* Trestle theme jQuery
|
|
*
|
|
* @since 1.0.0
|
|
*
|
|
* @package Trestle
|
|
*/
|
|
|
|
// Executes when the document is ready
|
|
jQuery( document ).ready( function( $ ) {
|
|
|
|
// Get PHP vars passed via wp_localize_script()
|
|
trestleEqualColsBreakpoint = trestle_vars.trestle_equal_cols_breakpoint;
|
|
trestleEqualHeightCols = trestle_vars.trestle_equal_height_cols;
|
|
|
|
// Remove .no-jquery body class
|
|
$( 'body' ).removeClass( 'no-jquery' );
|
|
|
|
// External Links
|
|
var h = window.location.host.toLowerCase();
|
|
$( '[href^="http"]' ).not( '[href*="' + h + '"]' ).addClass( 'external-link' ).attr( "target", "_blank" );
|
|
|
|
// Add classes to different types of links
|
|
$( 'a[href^="mailto:"]' ).addClass( 'email-link' );
|
|
$( 'a[href*=".pdf"]' ).attr({ "target":"_blank" }).addClass( 'pdf-link' );
|
|
$( 'a[href*=".doc"]' ).attr({ "target":"_blank" }).addClass( 'doc-link' );
|
|
$( 'a' ).has( 'img' ).addClass( 'image-link' );
|
|
|
|
// Add classes to parts of lists
|
|
$( 'li:last-child' ).addClass( 'last' );
|
|
$( 'li:first-child' ).addClass( 'first' );
|
|
$( 'ul, ol' ).parent( 'li' ).addClass( 'parent' );
|
|
|
|
// Mobile header toggle buttons
|
|
$( '.site-header .title-area' ).after( '<div class="toggle-buttons" />' );
|
|
$( '.site-header .widget-area, .nav-primary' ).each( function( i ) {
|
|
|
|
// Store target
|
|
$target = $( this );
|
|
|
|
// Scope variables
|
|
var $target, buttonClass, targetClass;
|
|
|
|
// Setup classes
|
|
buttonClass = 'toggle-button';
|
|
targetClass = $target.attr( 'class' ).split( /\s+/ );
|
|
|
|
// Add targets-[] class to buttonClass
|
|
$.each( targetClass, function( index, value ) {
|
|
buttonClass += ' targets-' + value;
|
|
});
|
|
|
|
// Add nav-toggle class to buttonClass if the button is for the nav
|
|
if ( $target.is( 'nav' ) ) {
|
|
buttonClass += ' nav-toggle';
|
|
}
|
|
|
|
// Add toggle buttons to header
|
|
$( '.toggle-buttons' ).prepend( '<a id="toggle-button-' + i + '" class="' + buttonClass + '" href="#">Toggle</a>' );
|
|
|
|
// Add target class to nav and widget areas
|
|
$target.addClass( 'toggle-target-' + i );
|
|
});
|
|
|
|
// Toggle widget areas and primary nav
|
|
$( '.site-header .toggle-button' ).click( function( event ) {
|
|
|
|
// Prevent default behavior
|
|
event.preventDefault();
|
|
|
|
// Scope our variables
|
|
var $button, $target;
|
|
|
|
// Get toggle button that was clicked
|
|
$button = $( this );
|
|
|
|
//Remove focus
|
|
$button.blur();
|
|
|
|
// Match the button to the right target
|
|
$target = $( '.toggle-target-' + $button.attr( 'id' ).match( /\d+/ ) );
|
|
|
|
// Toggle buttons
|
|
$button.toggleClass( 'open' );
|
|
$( '.site-header .toggle-button' ).not( $button ).removeClass( 'open' );
|
|
|
|
// Toggle targets
|
|
$target.toggleClass( 'open' );
|
|
$( '[class*="toggle-target"]' ).not( $target ).removeClass( 'open' );
|
|
});
|
|
|
|
// Mobile navigation icons
|
|
var closedIcon = '+';
|
|
var openIcon = '-';
|
|
|
|
// Insert the icons into the nav where appropriate
|
|
$( '.nav-primary' ).find( '.genesis-nav-menu .parent:not( .current-menu-item, .current_page_item, .current_page_parent, .current_page_ancestor) > a' ).after( '<a class="sub-icon" href="#">' + closedIcon + '</a>' );
|
|
$( '.nav-primary' ).find( '.genesis-nav-menu .parent.current-menu-item > a, .genesis-nav-menu .parent.current_page_item > a, .genesis-nav-menu .parent.current_page_parent > a, .genesis-nav-menu .parent.current_page_ancestor > a' ).after( '<a class="sub-icon" href="#">' + openIcon + '</a>' );
|
|
|
|
// Mobile navigation expand/contract functionality
|
|
$( '.sub-icon' ).click( function( event ) {
|
|
|
|
// Prevent default behavior
|
|
event.preventDefault();
|
|
|
|
// Get icon click
|
|
var $icon = $( this );
|
|
|
|
// Remove focus
|
|
$icon.blur();
|
|
|
|
// Expand/contract
|
|
$icon.next( 'ul' ).slideToggle().toggleClass( 'open' );
|
|
|
|
// Change the icon to indicate open/closed
|
|
if ( $icon.text().indexOf( closedIcon ) !== -1 )
|
|
$icon.text( openIcon );
|
|
else if ( $icon.text().indexOf( openIcon ) !== -1 )
|
|
$icon.text( closedIcon );
|
|
});
|
|
|
|
// Header widget area expand/contract functionality
|
|
$( '.widget-area-toggle' ).click( function( event ) {
|
|
|
|
// Prevent default behavior
|
|
event.preventDefault();
|
|
|
|
// Get button clicked
|
|
var $button = $( this );
|
|
|
|
// Remove focus
|
|
$button.blur();
|
|
|
|
// Expand/contract
|
|
$button.toggleClass( 'open' ).next( '.widget-area' ).slideToggle();
|
|
});
|
|
|
|
// Executes when complete page is fully loaded, including all frames, objects, and images
|
|
$( window ).on( 'load', function() {
|
|
|
|
// Equal height homepage cols
|
|
$( '.equal-height-genesis-extender-cols .ez-home-container-area' ).each( function() {
|
|
$( this ).children( '.widget-area' ).equalHeights( null, null, trestleEqualColsBreakpoint );
|
|
});
|
|
|
|
});
|
|
|
|
}); /* end of page load scripts */
|
|
|
|
|
|
/**
|
|
* Equal Heights Plugin
|
|
*
|
|
* Equalize the heights of elements. Great for columns or any elements
|
|
* that need to be the same size (floats, etc).
|
|
*
|
|
* Based on Rob Glazebrook's (cssnewbie.com) script
|
|
*
|
|
* Additions
|
|
* - ability to include a break point (the minimum viewport width at which the script does anything)
|
|
* - binds to window resize events (resize and orientationchange), unbinds and rebinds if called again
|
|
* - can be called multiple times to handle DOM changes via ajax or .clone()
|
|
*
|
|
* Usage: jQuery(object).equalHeights([minHeight], [maxHeight], [breakPoint]);
|
|
*
|
|
* Example 1: jQuery( ".cols" ).equalHeights(); Sets all columns to the same height.
|
|
* Example 2: jQuery( ".cols" ).equalHeights( 400 ); Sets all cols to at least 400px tall.
|
|
* Example 3: jQuery( ".cols" ).equalHeights( 100, 300 ); Cols are at least 100 but no more
|
|
* than 300 pixels tall. Elements with too much content will gain a scrollbar.
|
|
* Example 4: jQuery( ".cols" ).equalHeights( null, null,768 ); Only resize columns above 768px viewport
|
|
*
|
|
*/
|
|
( function( $ ) {
|
|
|
|
$.fn.equalHeights = function( minHeight, maxHeight, breakPoint ) {
|
|
|
|
/**
|
|
* Unbind all plugin events so that we can call this function again
|
|
* to reset it without creating multiple handlers for the same events.
|
|
* This allows us to manually retrigger if we have added new elements
|
|
* into the DOM using ajax or .clone().
|
|
*/
|
|
$( window ).off( '.equalheights', doEqualHeights );
|
|
|
|
// Scope our local variables
|
|
var $items, breakPoint;
|
|
|
|
// Store the jQuery objects upon which this function has been called
|
|
$items = this;
|
|
|
|
// Store the breakPoint arg if it was passsed in
|
|
breakPoint = breakPoint || 0;
|
|
|
|
// Equalize the heights
|
|
function doEqualHeights( $items ) {
|
|
|
|
// Calculate the tallest
|
|
tallest = ( minHeight ) ? minHeight : 0;
|
|
$items.each( function() {
|
|
$( this ).height( 'auto' );
|
|
if( $( this ).outerHeight() > tallest ) {
|
|
tallest = $( this ).outerHeight();
|
|
}
|
|
});
|
|
|
|
// Get viewport width (taking scrollbars into account)
|
|
var e = window;
|
|
a = 'inner';
|
|
if ( !( 'innerWidth' in window ) ) {
|
|
a = 'client';
|
|
e = document.documentElement || document.body;
|
|
}
|
|
width = e[ a+'Width' ];
|
|
|
|
// Equalize heights if viewport width is above the specified breakpoint
|
|
if ( width >= breakPoint ) {
|
|
if( ( maxHeight ) && tallest > maxHeight ) tallest = maxHeight;
|
|
return $items.each( function() {
|
|
$( this ).height( tallest );
|
|
});
|
|
}
|
|
}
|
|
|
|
// Start the equalizing
|
|
doEqualHeights( $items );
|
|
|
|
// Attach doEqualHeights as an event handler to the window resize events
|
|
// Use $.proxy() to pass in the right $items to keep the context correct
|
|
// when dealing with more than one collection of $items
|
|
$( window ).on( 'orientationchange.equalheights resize.equalheights equalheights.equalheights',
|
|
$.proxy( doEqualHeights, null, $items ) );
|
|
}
|
|
|
|
})( jQuery );
|