From 37144f5414ebc3a344d2da794a4dfa148e6ab54a Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Thu, 15 Jan 2015 11:47:48 -0800 Subject: [PATCH 01/15] Add spacing to match WP standards, comment out logging, add $ to variable names for jQuery objects --- includes/js/theme-jquery.js | 123 ++++++++++++++++++------------------ 1 file changed, 63 insertions(+), 60 deletions(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index 784db77..ef3bf8b 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -7,98 +7,101 @@ */ // Executes when the document is ready -jQuery(document).ready(function( $ ) { +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'); + $( 'body' ).removeClass( 'no-jquery' ); // External Links var h = window.location.host.toLowerCase(); - $('[href^="http"]').not('[href*="' + h + '"]').addClass('external-link').attr("target", "_blank"); + $( '[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'); + $( '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'); + $( '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('
'); - $('.site-header .widget-area, .nav-primary').each(function(i) { - var target = $(this); - + $( '.site-header .title-area' ).after( '
' ); + $( '.site-header .widget-area, .nav-primary' ).each( function( i ) { + var $target = $( this ); var buttonClass = 'toggle-button'; // Add classes of target element - var targetClass = target.attr('class').split(/\s+/); - $.each(targetClass, function(index,value) { + var targetClass = $target.attr( 'class' ).split( /\s+/ ); + $.each( targetClass, function( index, value ) { buttonClass += ' targets-' + value; }); - if ( $(this).is( 'nav' ) ) { + if ( $( this ).is( 'nav' ) ) { buttonClass += ' nav-toggle'; } // Add toggle buttons to header - $('.toggle-buttons').prepend('Toggle'); + $( '.toggle-buttons' ).prepend( 'Toggle' ); // Add target class to nav and widget areas - target.addClass('toggle-target-' + i ); + $target.addClass( 'toggle-target-' + i ); }); // Toggle widget areas and primary nav - $('.site-header .toggle-button').click( function( event ) { + $( '.site-header .toggle-button' ).click( function( event ) { event.preventDefault(); - var button = $(this); - var target = $( '.toggle-target-' + button.attr('id').match(/\d+/) ); + var $button = $( this ); + var $target = $( '.toggle-target-' + button.attr( 'id' ).match( /\d+/ ) ); // Toggle buttons - button.toggleClass('open'); - $('.site-header .toggle-button').not(button).removeClass('open'); + $button.toggleClass( 'open' ); + $( '.site-header .toggle-button' ).not( $button ).removeClass( 'open' ); // Toggle targets - target.toggleClass('open'); - $('[class*="toggle-target"]').not(target).removeClass('open'); + $target.toggleClass( 'open' ); + $( '[class*="toggle-target"]' ).not( $target ).removeClass( 'open' ); }); // Mobile navigation icons var closedIcon = '+'; var openIcon = '-'; - $('.nav-primary').find('.genesis-nav-menu .parent:not(.current-menu-item, .current_page_item, .current_page_parent, .current_page_ancestor) > a').after('' + closedIcon + ''); - $('.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('' + openIcon + ''); + $( '.nav-primary' ) + .find( '.genesis-nav-menu .parent:not(.current-menu-item, .current_page_item, .current_page_parent, .current_page_ancestor) > a' ) + .after( '' + closedIcon + '' ); + $( '.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( '' + openIcon + '' ); // Mobile navigation expand/contract functionality - $('.sub-icon').click(function(event) { + $( '.sub-icon' ).click( function( event ) { event.preventDefault(); - var icon = $(this); - icon.next('ul').slideToggle().toggleClass('open'); - if ( icon.text().indexOf( closedIcon ) !== -1 ) - icon.text(openIcon); - else if ( icon.text().indexOf( openIcon ) !== -1 ) - icon.text(closedIcon); + var $icon = $( this ); + $icon.next( 'ul' ).slideToggle().toggleClass( 'open' ); + if ( $icon.text().indexOf( closedIcon ) !== -1 ) + $icon.text( openIcon ); + else if ( $icon.text().indexOf( openIcon ) !== -1 ) + $icon.text( closedIcon ); }); - $('.widget-area-toggle').click(function(event) { + $( '.widget-area-toggle' ).click( function( event ) { event.preventDefault(); - var button = $(this); - button.toggleClass('open'); - button.next('.widget-area').slideToggle(); + var $button = $( this ); + $button.toggleClass( 'open' ); + $button.next( '.widget-area' ).slideToggle(); }); // Equal height homepage cols - $('.equal-height-genesis-extender-cols .ez-home-container-area').each(function() { - $(this).children('.widget-area').equalHeights(null,null,trestleEqualColsBreakpoint); + $( '.equal-height-genesis-extender-cols .ez-home-container-area' ).each( function() { + $( this ).children( '.widget-area' ).equalHeights( null, null, trestleEqualColsBreakpoint ); }); @@ -106,7 +109,7 @@ jQuery(document).ready(function( $ ) { // Executes when complete page is fully loaded, including all frames, objects, and images -jQuery(window).load(function( $ ) { +jQuery( window ).load( function( $ ) { }); @@ -125,32 +128,32 @@ jQuery(window).load(function( $ ) { * * 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 + * 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 + * Example 4: jQuery( ".cols" ).equalHeights( null, null,768 ); Only resize columns above 768px viewport * */ - (function( $ ) { - $.fn.equalHeights = function(minHeight, maxHeight, breakPoint) { - var items = this; + ( function( $ ) { + $.fn.equalHeights = function( minHeight, maxHeight, breakPoint ) { + var $items = this; breakPoint = breakPoint || 0; // Bind functionality to appropriate events - $(window).on('load orientationchange resize equalheights', function() { - tallest = (minHeight) ? minHeight : 0; - items.each(function() { - $(this).height('auto'); - if($(this).outerHeight() > tallest) { - tallest = $(this).outerHeight(); + $( window ).on( 'load orientationchange resize equalheights', function() { + 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 )) { + if ( !( 'innerWidth' in window ) ) { a = 'client'; e = document.documentElement || document.body; } @@ -158,10 +161,10 @@ jQuery(window).load(function( $ ) { // Equalize column heights if above the specified breakpoint if ( width >= breakPoint ) { - if((maxHeight) && tallest > maxHeight) tallest = maxHeight; - console.log(tallest); - return items.each(function() { - $(this).height(tallest); + if( ( maxHeight ) && tallest > maxHeight ) tallest = maxHeight; + //console.log( tallest ); + return items.each( function() { + $( this ).height( tallest ); }); } }); From 3327b1518cabe1d475970928e049b16d6fd3ef4b Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Thu, 15 Jan 2015 17:27:39 -0800 Subject: [PATCH 02/15] Fix $button selector --- includes/js/theme-jquery.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index ef3bf8b..2063e31 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -15,7 +15,7 @@ jQuery( document ).ready( function( $ ) { // 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" ); @@ -42,7 +42,7 @@ jQuery( document ).ready( function( $ ) { $.each( targetClass, function( index, value ) { buttonClass += ' targets-' + value; }); - + if ( $( this ).is( 'nav' ) ) { buttonClass += ' nav-toggle'; } @@ -53,13 +53,13 @@ jQuery( document ).ready( function( $ ) { // 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 ) { event.preventDefault(); var $button = $( this ); - var $target = $( '.toggle-target-' + button.attr( 'id' ).match( /\d+/ ) ); + var $target = $( '.toggle-target-' + $button.attr( 'id' ).match( /\d+/ ) ); // Toggle buttons $button.toggleClass( 'open' ); @@ -80,7 +80,7 @@ jQuery( document ).ready( function( $ ) { $( '.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( '' + openIcon + '' ); - + // Mobile navigation expand/contract functionality $( '.sub-icon' ).click( function( event ) { event.preventDefault(); @@ -91,7 +91,7 @@ jQuery( document ).ready( function( $ ) { else if ( $icon.text().indexOf( openIcon ) !== -1 ) $icon.text( closedIcon ); }); - + $( '.widget-area-toggle' ).click( function( event ) { event.preventDefault(); var $button = $( this ); @@ -104,7 +104,7 @@ jQuery( document ).ready( function( $ ) { $( this ).children( '.widget-area' ).equalHeights( null, null, trestleEqualColsBreakpoint ); }); - + }); /* end of as page load scripts */ @@ -116,7 +116,7 @@ jQuery( window ).load( function( $ ) { /** * Equal Heights Plugin - * + * * Equalize the heights of elements. Great for columns or any elements * that need to be the same size (floats, etc). * @@ -127,13 +127,13 @@ jQuery( window ).load( function( $ ) { * - binds the script to run on load, orientation change (for mobile), and when resizing the window * * 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 ) { From 41494c53ae85bc5f3ba456e73ace8edaab266815 Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Fri, 16 Jan 2015 13:48:16 -0800 Subject: [PATCH 03/15] Improvements to the equalHeights plugin, relocation of load scripts, various fixes --- includes/js/theme-jquery.js | 105 +++++++++++++++++++++--------------- 1 file changed, 63 insertions(+), 42 deletions(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index 2063e31..d825bf3 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -99,19 +99,17 @@ jQuery( document ).ready( function( $ ) { $button.next( '.widget-area' ).slideToggle(); }); - // Equal height homepage cols - $( '.equal-height-genesis-extender-cols .ez-home-container-area' ).each( function() { - $( this ).children( '.widget-area' ).equalHeights( null, null, trestleEqualColsBreakpoint ); - }); + // 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 as page load scripts */ + }); - -// Executes when complete page is fully loaded, including all frames, objects, and images -jQuery( window ).load( function( $ ) { - -}); +}); /* end of page load scripts */ /** @@ -135,39 +133,62 @@ jQuery( window ).load( function( $ ) { * Example 4: jQuery( ".cols" ).equalHeights( null, null,768 ); Only resize columns above 768px viewport * */ - ( function( $ ) { - $.fn.equalHeights = function( minHeight, maxHeight, breakPoint ) { - var $items = this; - breakPoint = breakPoint || 0; +( function( $ ) { - // Bind functionality to appropriate events - $( window ).on( 'load orientationchange resize equalheights', function() { - tallest = ( minHeight ) ? minHeight : 0; - $items.each( function() { - $( this ).height( 'auto' ); - if( $( this ).outerHeight() > tallest ) { - tallest = $( this ).outerHeight(); - } - }); + $.fn.equalHeights = function( minHeight, maxHeight, breakPoint ) { - // 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' ]; + /** + * 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', equalHeightsInit ); - // Equalize column heights if above the specified breakpoint - if ( width >= breakPoint ) { - if( ( maxHeight ) && tallest > maxHeight ) tallest = maxHeight; - //console.log( tallest ); - return items.each( function() { - $( this ).height( tallest ); - }); - } - }); - } + // Scope our local variables + var $items, breakPoint; - })(jQuery); + // 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; + + // Actual logic for this plugin + var equalHeightsInit = function() { + + // 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 ); + }); + } + } + + // Trigger the main plugin function + equalHeightsInit(); + + // Bind appropriate events for the first time this plugin is run + $( window ).on( 'orientationchange.equalheights resize.equalheights equalheights.equalheights', equalHeightsInit ); + } + +})( jQuery ); From b0fa089bd035e39abd887507aa76f2f05de445d8 Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Fri, 23 Jan 2015 16:46:53 -0800 Subject: [PATCH 04/15] Improvements to the equalHeights plugin Now we're using $.proxy() to keep the context correct when executing the event handlers --- includes/js/theme-jquery.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index d825bf3..057fe74 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -143,7 +143,7 @@ jQuery( document ).ready( function( $ ) { * This allows us to manually retrigger if we have added new elements * into the DOM using ajax or .clone(). */ - $( window ).off( '.equalheights', equalHeightsInit ); + $( window ).off( '.equalheights', doEqualHeights ); // Scope our local variables var $items, breakPoint; @@ -155,7 +155,7 @@ jQuery( document ).ready( function( $ ) { breakPoint = breakPoint || 0; // Actual logic for this plugin - var equalHeightsInit = function() { + function doEqualHeights( $items ) { // Calculate the tallest tallest = ( minHeight ) ? minHeight : 0; @@ -185,10 +185,12 @@ jQuery( document ).ready( function( $ ) { } // Trigger the main plugin function - equalHeightsInit(); + doEqualHeights( $items ); + + // Attach doEqualHeights as an event handler to the window resize events + // We're using $.proxy() to pass in the right $items to keep our context correct + $( window ).on( 'orientationchange.equalheights resize.equalheights equalheights.equalheights', $.proxy( doEqualHeights, null, $items ) ); - // Bind appropriate events for the first time this plugin is run - $( window ).on( 'orientationchange.equalheights resize.equalheights equalheights.equalheights', equalHeightsInit ); } })( jQuery ); From c6a8b0726dfa2285e7068ddd1c5be82bdebbd42f Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Fri, 23 Jan 2015 16:48:17 -0800 Subject: [PATCH 05/15] Update the inline documentation for equalHeights --- includes/js/theme-jquery.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index 057fe74..feae7ec 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -118,11 +118,14 @@ jQuery( document ).ready( function( $ ) { * Equalize the heights of elements. Great for columns or any elements * that need to be the same size (floats, etc). * + * Must be first triggered on either ready (if only text) or load (if images are included) + * * 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 the script to run on load, orientation change (for mobile), and when resizing the window + * - binds to window resize events (resize and orientationchange), unbinds and rebinds if called again + * - can be called multiple times to reset or handle DOM changes via ajax or .clone() * * Usage: jQuery(object).equalHeights([minHeight], [maxHeight], [breakPoint]); * @@ -190,7 +193,6 @@ jQuery( document ).ready( function( $ ) { // Attach doEqualHeights as an event handler to the window resize events // We're using $.proxy() to pass in the right $items to keep our context correct $( window ).on( 'orientationchange.equalheights resize.equalheights equalheights.equalheights', $.proxy( doEqualHeights, null, $items ) ); - } })( jQuery ); From 10b473d97e321a3015a7d41e5f6e5107e9f5bba0 Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Fri, 23 Jan 2015 20:54:08 -0800 Subject: [PATCH 06/15] Improve jQuery to automatically remove focus (dotted line) on events with e.preventDefault Also simplifying the equalHeights inline docs --- includes/js/theme-jquery.js | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index feae7ec..a9a8199 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -56,9 +56,16 @@ jQuery( document ).ready( function( $ ) { // Toggle widget areas and primary nav $( '.site-header .toggle-button' ).click( function( event ) { + + // Prevent default behavior event.preventDefault(); + // Get toggle button that was clicked var $button = $( this ); + + //Remove focus + $button.blur(); + var $target = $( '.toggle-target-' + $button.attr( 'id' ).match( /\d+/ ) ); // Toggle buttons @@ -68,6 +75,7 @@ jQuery( document ).ready( function( $ ) { // Toggle targets $target.toggleClass( 'open' ); $( '[class*="toggle-target"]' ).not( $target ).removeClass( 'open' ); + }); // Mobile navigation icons @@ -83,8 +91,16 @@ jQuery( document ).ready( function( $ ) { // 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(); + $icon.next( 'ul' ).slideToggle().toggleClass( 'open' ); if ( $icon.text().indexOf( closedIcon ) !== -1 ) $icon.text( openIcon ); @@ -93,8 +109,16 @@ jQuery( document ).ready( function( $ ) { }); $( '.widget-area-toggle' ).click( function( event ) { + + // Prevent default behavior event.preventDefault(); + + // Get button clicked var $button = $( this ); + + // Remove focus + $button.blur(); + $button.toggleClass( 'open' ); $button.next( '.widget-area' ).slideToggle(); }); @@ -118,14 +142,12 @@ jQuery( document ).ready( function( $ ) { * Equalize the heights of elements. Great for columns or any elements * that need to be the same size (floats, etc). * - * Must be first triggered on either ready (if only text) or load (if images are included) - * * 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 reset or handle DOM changes via ajax or .clone() + * - can be called multiple times to handle DOM changes via ajax or .clone() * * Usage: jQuery(object).equalHeights([minHeight], [maxHeight], [breakPoint]); * From e9afb553708eabf1a5a1bc201d3a3adcc3b97d3f Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Fri, 23 Jan 2015 22:20:01 -0800 Subject: [PATCH 07/15] Formatting, first-pass at documenting every block --- includes/js/theme-jquery.js | 82 ++++++++++++++++++++++--------------- 1 file changed, 48 insertions(+), 34 deletions(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index a9a8199..8b78df1 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -34,21 +34,29 @@ jQuery( document ).ready( function( $ ) { // Mobile header toggle buttons $( '.site-header .title-area' ).after( '
' ); $( '.site-header .widget-area, .nav-primary' ).each( function( i ) { - var $target = $( this ); - var buttonClass = 'toggle-button'; - // Add classes of target element - var targetClass = $target.attr( 'class' ).split( /\s+/ ); + // 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; }); - if ( $( this ).is( 'nav' ) ) { + // 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( 'Toggle' ); + $( '.toggle-buttons' ).prepend( 'Toggle'); // Add target class to nav and widget areas $target.addClass( 'toggle-target-' + i ); @@ -57,16 +65,20 @@ jQuery( document ).ready( function( $ ) { // Toggle widget areas and primary nav $( '.site-header .toggle-button' ).click( function( event ) { - // Prevent default behavior + // Prevent default behavior event.preventDefault(); - // Get toggle button that was clicked - var $button = $( this ); - + // Scope our variables + var $button, $target; + + // Get toggle button that was clicked + $button = $( this ); + //Remove focus $button.blur(); - - var $target = $( '.toggle-target-' + $button.attr( 'id' ).match( /\d+/ ) ); + + // Match the button to the right target + $target = $( '.toggle-target-' + $button.attr( 'id' ).match( /\d+/ ) ); // Toggle buttons $button.toggleClass( 'open' ); @@ -75,52 +87,52 @@ jQuery( document ).ready( function( $ ) { // Toggle targets $target.toggleClass( 'open' ); $( '[class*="toggle-target"]' ).not( $target ).removeClass( 'open' ); - }); // Mobile navigation icons var closedIcon = '+'; var openIcon = '-'; - $( '.nav-primary' ) - .find( '.genesis-nav-menu .parent:not(.current-menu-item, .current_page_item, .current_page_parent, .current_page_ancestor) > a' ) - .after( '' + closedIcon + '' ); - $( '.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( '' + 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( '' + closedIcon + '' ); + $( '.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( '' + openIcon + '' ); // 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' ); - if ( $icon.text().indexOf( closedIcon ) !== -1 ) + + // 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(); - - $button.toggleClass( 'open' ); - $button.next( '.widget-area' ).slideToggle(); + + // Expand/contract + $button.toggleClass( 'open' ).next( '.widget-area' ).slideToggle(); }); // Executes when complete page is fully loaded, including all frames, objects, and images @@ -179,7 +191,7 @@ jQuery( document ).ready( function( $ ) { // Store the breakPoint arg if it was passsed in breakPoint = breakPoint || 0; - // Actual logic for this plugin + // Equalize the heights function doEqualHeights( $items ) { // Calculate the tallest @@ -209,12 +221,14 @@ jQuery( document ).ready( function( $ ) { } } - // Trigger the main plugin function + // Start the equalizing doEqualHeights( $items ); // Attach doEqualHeights as an event handler to the window resize events - // We're using $.proxy() to pass in the right $items to keep our context correct - $( window ).on( 'orientationchange.equalheights resize.equalheights equalheights.equalheights', $.proxy( doEqualHeights, null, $items ) ); + // 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 ); From 8c3122e90b41a9546c2ecb5192c831a1fe3c2ef4 Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Fri, 23 Jan 2015 22:28:08 -0800 Subject: [PATCH 08/15] Whitespace --- includes/js/theme-jquery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index 8b78df1..df586c2 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -56,7 +56,7 @@ jQuery( document ).ready( function( $ ) { } // Add toggle buttons to header - $( '.toggle-buttons' ).prepend( 'Toggle'); + $( '.toggle-buttons' ).prepend( 'Toggle' ); // Add target class to nav and widget areas $target.addClass( 'toggle-target-' + i ); From da54115ae5e8bad63acb4ce1573a0ee93bc5e9db Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Fri, 30 Jan 2015 00:29:06 -0800 Subject: [PATCH 09/15] Big improvements to the equalHeights plugin Also more specific selectors for the link classes --- includes/js/theme-jquery.js | 115 +++++++++++++++++++++++++----------- 1 file changed, 80 insertions(+), 35 deletions(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index df586c2..d33dd9e 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -22,8 +22,8 @@ jQuery( document ).ready( function( $ ) { // 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[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 @@ -86,7 +86,7 @@ jQuery( document ).ready( function( $ ) { // Toggle targets $target.toggleClass( 'open' ); - $( '[class*="toggle-target"]' ).not( $target ).removeClass( 'open' ); + $( '[class^="toggle-target"]' ).not( $target ).removeClass( 'open' ); }); // Mobile navigation icons @@ -147,7 +147,6 @@ jQuery( document ).ready( function( $ ) { }); /* end of page load scripts */ - /** * Equal Heights Plugin * @@ -156,45 +155,66 @@ jQuery( document ).ready( function( $ ) { * * Based on Rob Glazebrook's (cssnewbie.com) script * - * Additions + * Features * - 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() + * - binds to window resize events (resize and orientationchange) + * - will automatically detect new elements added to the DOM + * - can be called multiple times without duplicating any events * - * Usage: jQuery(object).equalHeights([minHeight], [maxHeight], [breakPoint]); + * 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 - * + * 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 variables + var selector, args, eventData, resizeSet; - // Scope our local variables - var $items, breakPoint; + // Get the selector used to call equalHeights + selector = this.selector; - // Store the jQuery objects upon which this function has been called - $items = this; - - // Store the breakPoint arg if it was passsed in + // Use the args that were passed in or use the defaults + minHeight = minHeight || null; + maxHeight = maxHeight || null; breakPoint = breakPoint || 0; - // Equalize the heights - function doEqualHeights( $items ) { + // Combine args into an array + args = [ minHeight, maxHeight, breakPoint ]; - // Calculate the tallest + // Check if our global already exists + if ( window.equalHeightsItems ) { + + // It does, so add or overwrite the current object in it + window.equalHeightsItems[selector] = args; + + } else { + + // It doesn't, so create the global and store the current object in it + window.equalHeightsItems = {}; + window.equalHeightsItems[selector] = args; + } + + // Function to do the equalizing of the heights + function doEqualHeights( selector, args ) { + + // Scope our variables + var $items, tallest, e, a, width; + + // Grab the collection of items fresh from the DOM + $items = $( selector ); + + // Store the passed in args + minHeight = args[0]; + maxHeight = args[1]; + breakPoint = args[2]; + + // Calculate the tallest item tallest = ( minHeight ) ? minHeight : 0; $items.each( function() { $( this ).height( 'auto' ); @@ -204,7 +224,7 @@ jQuery( document ).ready( function( $ ) { }); // Get viewport width (taking scrollbars into account) - var e = window; + e = window; a = 'inner'; if ( !( 'innerWidth' in window ) ) { a = 'client'; @@ -212,7 +232,7 @@ jQuery( document ).ready( function( $ ) { } width = e[ a+'Width' ]; - // Equalize heights if viewport width is above the specified breakpoint + // Equalize heights if viewport width is above the breakpoint if ( width >= breakPoint ) { if( ( maxHeight ) && tallest > maxHeight ) tallest = maxHeight; return $items.each( function() { @@ -221,14 +241,39 @@ jQuery( document ).ready( function( $ ) { } } - // Start the equalizing - doEqualHeights( $items ); + // Function to trigger the equalizing + function triggerEqualHeights() { - // 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 ) ); + // Loop through each object in our global + $.each( window.equalHeightsItems, function( selector, args ) { + + // Call doEqualHeights and pass in the current object + doEqualHeights( selector, args ); + }); + } + + // Grab the event data from the window object + eventData = $( window ).data('events'); + + // Check if the window has the smartresize event + if ( eventData.resize ) { + + // Check if the smartresize event has our namespace + $( eventData.resize ).each( function() { + + // It does, so store this information in a variable + if( this.namespace == 'equalheights' ) { resizeSet = true; } + }); + } + + // Bind the window smartresize event to our trigger function if we + // haven't already done so + if ( ! resizeSet ) { + $( window ).on( 'resize.equalheights', triggerEqualHeights ); + } + + // Trigger the first equalizing + triggerEqualHeights(); } })( jQuery ); From 33e7a5b3db66fddfb7f235cc4cc241f60c7d4945 Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Mon, 2 Feb 2015 23:53:13 -0800 Subject: [PATCH 10/15] Rewrite of equalHeights plugin, now it's bulletproof --- includes/js/theme-jquery.js | 353 +++++++++++++++++++++--------------- 1 file changed, 205 insertions(+), 148 deletions(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index d33dd9e..44fd758 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -35,115 +35,115 @@ jQuery( document ).ready( function( $ ) { $( '.site-header .title-area' ).after( '
' ); $( '.site-header .widget-area, .nav-primary' ).each( function( i ) { - // Store target - $target = $( this ); + // Store target + $target = $( this ); - // Scope variables - var $target, buttonClass, targetClass; + // Scope variables + var $target, buttonClass, targetClass; - // Setup classes - buttonClass = 'toggle-button'; - targetClass = $target.attr( 'class' ).split( /\s+/ ); + // 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 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 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( 'Toggle' ); + // Add toggle buttons to header + $( '.toggle-buttons' ).prepend( 'Toggle' ); - // Add target class to nav and widget areas - $target.addClass( 'toggle-target-' + i ); - }); + // 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 ) { + // Toggle widget areas and primary nav + $( '.site-header .toggle-button' ).click( function( event ) { - // Prevent default behavior - event.preventDefault(); + // Prevent default behavior + event.preventDefault(); - // Scope our variables - var $button, $target; + // Scope our variables + var $button, $target; - // Get toggle button that was clicked - $button = $( this ); + // Get toggle button that was clicked + $button = $( this ); - //Remove focus - $button.blur(); + //Remove focus + $button.blur(); - // Match the button to the right target - $target = $( '.toggle-target-' + $button.attr( 'id' ).match( /\d+/ ) ); + // 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 buttons + $button.toggleClass( 'open' ); + $( '.site-header .toggle-button' ).not( $button ).removeClass( 'open' ); - // Toggle targets - $target.toggleClass( 'open' ); - $( '[class^="toggle-target"]' ).not( $target ).removeClass( 'open' ); - }); + // Toggle targets + $target.toggleClass( 'open' ); + $( '[class^="toggle-target"]' ).not( $target ).removeClass( 'open' ); + }); - // Mobile navigation icons - var closedIcon = '+'; - var openIcon = '-'; + // 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( '' + closedIcon + '' ); - $( '.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( '' + 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( '' + closedIcon + '' ); + $( '.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( '' + openIcon + '' ); - // Mobile navigation expand/contract functionality - $( '.sub-icon' ).click( function( event ) { + // Mobile navigation expand/contract functionality + $( '.sub-icon' ).click( function( event ) { - // Prevent default behavior - event.preventDefault(); + // Prevent default behavior + event.preventDefault(); - // Get icon click - var $icon = $( this ); + // Get icon click + var $icon = $( this ); - // Remove focus - $icon.blur(); + // Remove focus + $icon.blur(); - // Expand/contract - $icon.next( 'ul' ).slideToggle().toggleClass( 'open' ); + // 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 ); - }); + // 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 ) { + // Header widget area expand/contract functionality + $( '.widget-area-toggle' ).click( function( event ) { - // Prevent default behavior - event.preventDefault(); + // Prevent default behavior + event.preventDefault(); - // Get button clicked - var $button = $( this ); + // Get button clicked + var $button = $( this ); - // Remove focus - $button.blur(); + // Remove focus + $button.blur(); - // Expand/contract - $button.toggleClass( 'open' ).next( '.widget-area' ).slideToggle(); - }); + // 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() { + // 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 ); - }); - - }); + // 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 */ @@ -151,7 +151,7 @@ jQuery( document ).ready( function( $ ) { * Equal Heights Plugin * * Equalize the heights of elements. Great for columns or any elements - * that need to be the same size (floats, etc). + * that need to be the same height (floats, etc). * * Based on Rob Glazebrook's (cssnewbie.com) script * @@ -163,18 +163,53 @@ jQuery( document ).ready( function( $ ) { * * 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 1: jQuery( ".cols" ).equalHeights(); Sets all .cols 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 + * Example 4: jQuery( ".cols" ).equalHeights( null, null, 768 ); Only resize .cols above 768px viewport */ ( function( $ ) { - $.fn.equalHeights = function( minHeight, maxHeight, breakPoint ) { + // debouncing function from John Hann + // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ + var debounce = function( func, threshold ) { + + // The timer + var timeout; + + return function debounced() { + + // Store the passed in function and args + var obj = this; + var args = arguments; + + // This is the callback that the timer triggers when debouncing is complete + function delayed() { + + // We have successfully debounced, trigger the function + func.apply( obj, args ); + + // And clear the timer + timeout = null; + } + + // If the timer is active, clear it + if ( timeout ) { + clearTimeout( timeout ); + } + + // Set the timer to 100ms and have it call delayed() when it completes + timeout = setTimeout( delayed, threshold || 50 ); + }; + }; + + // Main plugin function + $.fn.equalHeights = function( minHeight, maxHeight, breakPoint ) { // Scope our variables - var selector, args, eventData, resizeSet; + var selector, minHeight, maxHeight, breakPoint, eventData, + ourEvents, eventName, eventSet; // Get the selector used to call equalHeights selector = this.selector; @@ -184,15 +219,14 @@ jQuery( document ).ready( function( $ ) { maxHeight = maxHeight || null; breakPoint = breakPoint || 0; - // Combine args into an array - args = [ minHeight, maxHeight, breakPoint ]; + // Combine args into an object + args = { minHeight: minHeight, maxHeight: maxHeight, breakPoint: breakPoint }; // Check if our global already exists if ( window.equalHeightsItems ) { // It does, so add or overwrite the current object in it window.equalHeightsItems[selector] = args; - } else { // It doesn't, so create the global and store the current object in it @@ -200,80 +234,103 @@ jQuery( document ).ready( function( $ ) { window.equalHeightsItems[selector] = args; } - // Function to do the equalizing of the heights - function doEqualHeights( selector, args ) { + // Grab the current event data from the window object + eventData = $( window ).data( 'events' ); - // Scope our variables - var $items, tallest, e, a, width; + // Store the events that will retrigger doEqualHeights() + ourEvents = [ 'resize', 'orientationchange', 'equalheights' ]; - // Grab the collection of items fresh from the DOM - $items = $( selector ); + // Loop through each event and attach our handler if it isn't attached already + $( ourEvents ).each( function() { - // Store the passed in args - minHeight = args[0]; - maxHeight = args[1]; - breakPoint = args[2]; + // Reset our flag to false + eventSet = false; - // Calculate the tallest item - tallest = ( minHeight ) ? minHeight : 0; - $items.each( function() { - $( this ).height( 'auto' ); - if( $( this ).outerHeight() > tallest ) { - tallest = $( this ).outerHeight(); - } - }); + // Store this event + thisEvent = this; - // Get viewport width (taking scrollbars into account) - e = window; - a = 'inner'; - if ( !( 'innerWidth' in window ) ) { - a = 'client'; - e = document.documentElement || document.body; - } - width = e[ a+'Width' ]; + // Add the namespace + eventName = this + '.equalheights'; - // Equalize heights if viewport width is above the breakpoint - if ( width >= breakPoint ) { - if( ( maxHeight ) && tallest > maxHeight ) tallest = maxHeight; - return $items.each( function() { - $( this ).height( tallest ); - }); - } - } + // Check whether this event is already on the window + if ( eventData[ thisEvent ] ) { - // Function to trigger the equalizing - function triggerEqualHeights() { + // Be careful not to disturb any unrelated listeners + $( eventData[ thisEvent ] ).each( function() { - // Loop through each object in our global - $.each( window.equalHeightsItems, function( selector, args ) { + // Confirm that the event has our namespace + if ( this.namespace == 'equalheights' ) { - // Call doEqualHeights and pass in the current object - doEqualHeights( selector, args ); - }); - } + // It does, so set our flag to true + eventSet = true; + } + }); + } - // Grab the event data from the window object - eventData = $( window ).data('events'); + // If our flag is still false then we can safely attach the event + if ( ! eventSet ) { - // Check if the window has the smartresize event - if ( eventData.resize ) { + // Namespace it and debounce it to be safe + $( window ).on( eventName, debounce( triggerEqualHeights ) ); + } + }); - // Check if the smartresize event has our namespace - $( eventData.resize ).each( function() { + // Trigger the first equalizing + triggerEqualHeights(); + }; - // It does, so store this information in a variable - if( this.namespace == 'equalheights' ) { resizeSet = true; } + // Function to trigger the equalizing + function triggerEqualHeights() { + + // Loop through each object in our global + $.each( window.equalHeightsItems, function( selector, args ) { + + // Call doEqualHeights and pass in the current object + doEqualHeights( selector, args ); + }); + } + + // Function to do the equalizing of the heights + function doEqualHeights( selector, args ) { + + // Scope our variables + var $items, minHeight, maxHeight, breakPoint, tallest, e, a, width; + + // Grab the collection of items fresh from the DOM + $items = $( selector ); + + // Store the passed in args + minHeight = args.minHeight; + maxHeight = args.maxHeight; + breakPoint = args.breakPoint; + + // Calculate the tallest item + tallest = ( minHeight ) ? minHeight : 0; + $items.each( function() { + $( this ).height( 'auto' ); + if( $( this ).outerHeight() > tallest ) { + tallest = $( this ).outerHeight(); + } + }); + + // Get viewport width (taking scrollbars into account) + 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 breakpoint + if ( width >= breakPoint ) { + if ( ( maxHeight ) && tallest > maxHeight ) { + tallest = maxHeight; + } + return $items.each( function() { + $( this ).height( tallest ); }); } - - // Bind the window smartresize event to our trigger function if we - // haven't already done so - if ( ! resizeSet ) { - $( window ).on( 'resize.equalheights', triggerEqualHeights ); - } - - // Trigger the first equalizing - triggerEqualHeights(); } })( jQuery ); From 25a6a73defc3b5c61dcb48db7550735389670749 Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Mon, 2 Feb 2015 23:56:28 -0800 Subject: [PATCH 11/15] Formatting --- includes/js/theme-jquery.js | 66 ++++++++++++++++++------------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index 44fd758..81110c7 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -207,34 +207,34 @@ jQuery( document ).ready( function( $ ) { // Main plugin function $.fn.equalHeights = function( minHeight, maxHeight, breakPoint ) { - // Scope our variables - var selector, minHeight, maxHeight, breakPoint, eventData, - ourEvents, eventName, eventSet; - - // Get the selector used to call equalHeights - selector = this.selector; - - // Use the args that were passed in or use the defaults - minHeight = minHeight || null; - maxHeight = maxHeight || null; - breakPoint = breakPoint || 0; - - // Combine args into an object - args = { minHeight: minHeight, maxHeight: maxHeight, breakPoint: breakPoint }; - - // Check if our global already exists - if ( window.equalHeightsItems ) { - - // It does, so add or overwrite the current object in it - window.equalHeightsItems[selector] = args; - } else { - - // It doesn't, so create the global and store the current object in it - window.equalHeightsItems = {}; - window.equalHeightsItems[selector] = args; - } - - // Grab the current event data from the window object + // Scope our variables + var selector, minHeight, maxHeight, breakPoint, eventData, + ourEvents, eventName, eventSet; + + // Get the selector used to call equalHeights + selector = this.selector; + + // Use the args that were passed in or use the defaults + minHeight = minHeight || null; + maxHeight = maxHeight || null; + breakPoint = breakPoint || 0; + + // Combine args into an object + args = { minHeight: minHeight, maxHeight: maxHeight, breakPoint: breakPoint }; + + // Check if our global already exists + if ( window.equalHeightsItems ) { + + // It does, so add or overwrite the current object in it + window.equalHeightsItems[selector] = args; + } else { + + // It doesn't, so create the global and store the current object in it + window.equalHeightsItems = {}; + window.equalHeightsItems[selector] = args; + } + + // Grab the current event data from the window object eventData = $( window ).data( 'events' ); // Store the events that will retrigger doEqualHeights() @@ -271,12 +271,12 @@ jQuery( document ).ready( function( $ ) { if ( ! eventSet ) { // Namespace it and debounce it to be safe - $( window ).on( eventName, debounce( triggerEqualHeights ) ); - } + $( window ).on( eventName, debounce( triggerEqualHeights ) ); + } }); - - // Trigger the first equalizing - triggerEqualHeights(); + + // Trigger the first equalizing + triggerEqualHeights(); }; // Function to trigger the equalizing From e9cf7c26f541faa26e7c4ccad0c85b4d4a9559cb Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Mon, 2 Feb 2015 23:59:02 -0800 Subject: [PATCH 12/15] Formatting --- includes/js/theme-jquery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index 81110c7..c2ec45e 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -331,6 +331,6 @@ jQuery( document ).ready( function( $ ) { $( this ).height( tallest ); }); } - } + } })( jQuery ); From aa1fb81226a0e55612221d14ed001a958ef7e3c0 Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Mon, 16 Feb 2015 12:24:34 -0800 Subject: [PATCH 13/15] Remove all references to equalHeights as this is now a plugin --- includes/js/theme-jquery.js | 196 ------------------------------------ 1 file changed, 196 deletions(-) diff --git a/includes/js/theme-jquery.js b/includes/js/theme-jquery.js index c2ec45e..781141a 100644 --- a/includes/js/theme-jquery.js +++ b/includes/js/theme-jquery.js @@ -9,10 +9,6 @@ // 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' ); @@ -139,198 +135,6 @@ jQuery( document ).ready( function( $ ) { // 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 height (floats, etc). - * - * Based on Rob Glazebrook's (cssnewbie.com) script - * - * Features - * - ability to include a break point (the minimum viewport width at which the script does anything) - * - binds to window resize events (resize and orientationchange) - * - will automatically detect new elements added to the DOM - * - can be called multiple times without duplicating any events - * - * Usage: jQuery( object ).equalHeights( [minHeight], [maxHeight], [breakPoint] ); - * - * Example 1: jQuery( ".cols" ).equalHeights(); Sets all .cols 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 .cols above 768px viewport - */ -( function( $ ) { - - // debouncing function from John Hann - // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ - var debounce = function( func, threshold ) { - - // The timer - var timeout; - - return function debounced() { - - // Store the passed in function and args - var obj = this; - var args = arguments; - - // This is the callback that the timer triggers when debouncing is complete - function delayed() { - - // We have successfully debounced, trigger the function - func.apply( obj, args ); - - // And clear the timer - timeout = null; - } - - // If the timer is active, clear it - if ( timeout ) { - clearTimeout( timeout ); - } - - // Set the timer to 100ms and have it call delayed() when it completes - timeout = setTimeout( delayed, threshold || 50 ); - }; - }; - - // Main plugin function - $.fn.equalHeights = function( minHeight, maxHeight, breakPoint ) { - - // Scope our variables - var selector, minHeight, maxHeight, breakPoint, eventData, - ourEvents, eventName, eventSet; - - // Get the selector used to call equalHeights - selector = this.selector; - - // Use the args that were passed in or use the defaults - minHeight = minHeight || null; - maxHeight = maxHeight || null; - breakPoint = breakPoint || 0; - - // Combine args into an object - args = { minHeight: minHeight, maxHeight: maxHeight, breakPoint: breakPoint }; - - // Check if our global already exists - if ( window.equalHeightsItems ) { - - // It does, so add or overwrite the current object in it - window.equalHeightsItems[selector] = args; - } else { - - // It doesn't, so create the global and store the current object in it - window.equalHeightsItems = {}; - window.equalHeightsItems[selector] = args; - } - - // Grab the current event data from the window object - eventData = $( window ).data( 'events' ); - - // Store the events that will retrigger doEqualHeights() - ourEvents = [ 'resize', 'orientationchange', 'equalheights' ]; - - // Loop through each event and attach our handler if it isn't attached already - $( ourEvents ).each( function() { - - // Reset our flag to false - eventSet = false; - - // Store this event - thisEvent = this; - - // Add the namespace - eventName = this + '.equalheights'; - - // Check whether this event is already on the window - if ( eventData[ thisEvent ] ) { - - // Be careful not to disturb any unrelated listeners - $( eventData[ thisEvent ] ).each( function() { - - // Confirm that the event has our namespace - if ( this.namespace == 'equalheights' ) { - - // It does, so set our flag to true - eventSet = true; - } - }); - } - - // If our flag is still false then we can safely attach the event - if ( ! eventSet ) { - - // Namespace it and debounce it to be safe - $( window ).on( eventName, debounce( triggerEqualHeights ) ); - } - }); - - // Trigger the first equalizing - triggerEqualHeights(); - }; - - // Function to trigger the equalizing - function triggerEqualHeights() { - - // Loop through each object in our global - $.each( window.equalHeightsItems, function( selector, args ) { - - // Call doEqualHeights and pass in the current object - doEqualHeights( selector, args ); - }); - } - - // Function to do the equalizing of the heights - function doEqualHeights( selector, args ) { - - // Scope our variables - var $items, minHeight, maxHeight, breakPoint, tallest, e, a, width; - - // Grab the collection of items fresh from the DOM - $items = $( selector ); - - // Store the passed in args - minHeight = args.minHeight; - maxHeight = args.maxHeight; - breakPoint = args.breakPoint; - - // Calculate the tallest item - tallest = ( minHeight ) ? minHeight : 0; - $items.each( function() { - $( this ).height( 'auto' ); - if( $( this ).outerHeight() > tallest ) { - tallest = $( this ).outerHeight(); - } - }); - - // Get viewport width (taking scrollbars into account) - 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 breakpoint - if ( width >= breakPoint ) { - if ( ( maxHeight ) && tallest > maxHeight ) { - tallest = maxHeight; - } - return $items.each( function() { - $( this ).height( tallest ); - }); - } - } - -})( jQuery ); From 098a9062ef5bc3c8cfae4f8ee4057bf307fa7dea Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Mon, 16 Feb 2015 12:28:00 -0800 Subject: [PATCH 14/15] Remove all references to equalHeights as this is now a plugin --- includes/admin/admin.php | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/includes/admin/admin.php b/includes/admin/admin.php index cf09130..d0d342d 100644 --- a/includes/admin/admin.php +++ b/includes/admin/admin.php @@ -48,8 +48,6 @@ function trestle_custom_defaults( $defaults ) { 'trestle_read_more_text' => __( 'Read More »', 'trestle' ), 'trestle_revisions_number' => 3, 'trestle_footer_widgets_number' => 3, - 'trestle_equal_height_cols' => 1, - 'trestle_equal_cols_breakpoint' => 768, ); // Populate Trestle settings with default values if they don't yet exist @@ -102,7 +100,6 @@ function trestle_register_social_sanitization_filters() { 'trestle_auto_nav_depth', 'trestle_revisions_number', 'trestle_footer_widgets_number', - 'trestle_equal_cols_breakpoint', ) ); @@ -303,15 +300,6 @@ function trestle_settings_box() { ?>

- -

-

- /> -

-

- -

-

/>
@@ -518,4 +506,4 @@ function trestle_register_required_plugins() { ); tgmpa( $plugins, $config ); -} \ No newline at end of file +} From 86520f1f8684e4d53284ff08654479aaa8a9cf66 Mon Sep 17 00:00:00 2001 From: Braad Martin Date: Mon, 23 Feb 2015 16:03:37 -0800 Subject: [PATCH 15/15] Remove references to equal heights --- includes/functions/theme-functions.php | 6 ------ 1 file changed, 6 deletions(-) diff --git a/includes/functions/theme-functions.php b/includes/functions/theme-functions.php index ea71f76..2efc389 100644 --- a/includes/functions/theme-functions.php +++ b/includes/functions/theme-functions.php @@ -42,12 +42,6 @@ function trestle_header_actions() { if ( is_readable( $upload_path . $custom_js_file ) ) wp_enqueue_script( 'trestle-custom-jquery', $upload_url . $custom_js_file, array( 'jquery' ), CHILD_THEME_VERSION, true ); - // Pass PHP variables to theme jQuery - $php_vars = array ( - 'trestle_equal_cols_breakpoint' => genesis_get_option( 'trestle_equal_cols_breakpoint' ), - ); - wp_localize_script( 'theme-jquery', 'trestle_vars', $php_vars ); - } /*===========================================