From 40ea43452ddfd6f2cd8a2d51e18183b8d9b7298f Mon Sep 17 00:00:00 2001 From: Alex S <17275120+AlexGStapleton@users.noreply.github.com> Date: Thu, 13 Aug 2020 17:36:47 +1000 Subject: [PATCH 01/11] Account for sticky header during page jump on load --- js/north.js | 178 +++++++++++++++++++++++++++------------------------- 1 file changed, 93 insertions(+), 85 deletions(-) diff --git a/js/north.js b/js/north.js index dd451e61..689c556e 100644 --- a/js/north.js +++ b/js/north.js @@ -4,99 +4,96 @@ * Handles the primary JavaScript functions for the theme. */ -// Burst animation plugin. -( - function( $ ) { - - var mousePos = {x: 0, y: 0}; - $( document ).mousemove( function( e ) { - mousePos = { - x: e.pageX, - y: e.pageY - }; - } ); - - $.fn.burstAnimation = function( options ) { - var settings = $.extend( { - event: "click", - container: "parent" - }, options ); - - return $( this ).each( function() { - var $$ = $( this ), - $p = settings.container === 'parent' ? $$.parent() : $$.closest( settings.container ), - $o = $( '
' ), - $c = $( '
' ).appendTo( $o ); - - $$.on( settings.event, function() { - $o.appendTo( $p ); - $c - .css( { - top: mousePos.y - $p.offset().top, - left: mousePos.x - $p.offset().left, - opacity: 0.1, - scale: 1 - } ) - .transition( { - opacity: 0, - scale: $p.width() - }, 500, 'ease', function() { - $o.detach(); - } ); - } ); +( function( $ ) { - } ); + // Burst animation plugin. + var mousePos = {x: 0, y: 0}; + $( document ).mousemove( function( e ) { + mousePos = { + x: e.pageX, + y: e.pageY }; + } ); - // Check if an element is visible in the viewport. - $.fn.northIsVisible = function() { - var rect = this[0].getBoundingClientRect(); - return ( - rect.bottom >= 0 && - rect.right >= 0 && - rect.top <= ( window.innerHeight || document.documentElement.clientHeight ) && - rect.left <= ( window.innerWidth || document.documentElement.clientWidth ) - ); - }; + $.fn.burstAnimation = function( options ) { + var settings = $.extend( { + event: "click", + container: "parent" + }, options ); + + return $( this ).each( function() { + var $$ = $( this ), + $p = settings.container === 'parent' ? $$.parent() : $$.closest( settings.container ), + $o = $( '
' ), + $c = $( '
' ).appendTo( $o ); + + $$.on( settings.event, function() { + $o.appendTo( $p ); + $c + .css( { + top: mousePos.y - $p.offset().top, + left: mousePos.x - $p.offset().left, + opacity: 0.1, + scale: 1 + } ) + .transition( { + opacity: 0, + scale: $p.width() + }, 500, 'ease', function() { + $o.detach(); + } ); + } ); - $.fn.northSmoothScroll = function() { - $( this ).click( function( e ) { - var $a = $( this ); - var $target = $( '[name=' + this.hash.slice( 1 ) + ']' ).length ? $( '[name=' + this.hash.slice( 1 ) + ']' ) : $( $a.get( 0 ).hash ); - - if ( $target.length ) { - - var height = 0; - if ( $( '#masthead' ).hasClass( 'sticky-menu' ) && $( '#masthead' ).data( 'scale-logo' ) ) { - if ( $target.offset().top < 48 ) { - height += $( '#masthead' ).outerHeight(); - } else if ( $( '.site-branding' ).outerHeight() > $( '#site-navigation' ).outerHeight() ) { - height += $( '#masthead' ).outerHeight() * siteoriginNorth.logoScale; - } else { - height += $( '#masthead' ).height() + ( $( '#masthead' ).innerHeight() - $( '#masthead' ).height() ); - } - } else if ( $( '#masthead' ).hasClass( 'sticky-menu' ) ) { - height += $( '#masthead' ).outerHeight(); - } + } ); + }; - if ( $( 'body' ).hasClass( 'admin-bar' ) ) { - height += $( '#wpadminbar' ).outerHeight(); - } + // Check if an element is visible in the viewport. + $.fn.northIsVisible = function() { + var rect = this[0].getBoundingClientRect(); + return ( + rect.bottom >= 0 && + rect.right >= 0 && + rect.top <= ( window.innerHeight || document.documentElement.clientHeight ) && + rect.left <= ( window.innerWidth || document.documentElement.clientWidth ) + ); + }; - $( 'html, body' ).animate( { - scrollTop: $target.offset().top - height - }, 1000 ); + var headerHeight = function( $target ) { + var height = 0; + if ( $( '#masthead' ).hasClass( 'sticky-menu' ) && $( '#masthead' ).data( 'scale-logo' ) ) { + if ( typeof $target != 'undefined' && $target.offset().top < 48 ) { + height += $( '#masthead' ).outerHeight(); + } else if ( $( '.site-branding' ).outerHeight() > $( '#site-navigation' ).outerHeight() ) { + height += $( '#masthead' ).outerHeight() * siteoriginNorth.logoScale; + } else { + height += $( '#masthead' ).height() + ( $( '#masthead' ).innerHeight() - $( '#masthead' ).height() ); + } + } else if ( $( '#masthead' ).hasClass( 'sticky-menu' ) ) { + height += $( '#masthead' ).outerHeight(); + } - return false; - } - // Scroll to the position of the item, minus the header size. - } ); + if ( $( 'body' ).hasClass( 'admin-bar' ) ) { + height += $( '#wpadminbar' ).outerHeight(); } - } -)( jQuery ); + return height; + }; -jQuery( function( $ ) { + $.fn.northSmoothScroll = function() { + console.log(headerHeight()); + $( this ).click( function( e ) { + var $a = $( this ); + var $target = $( '[name=' + this.hash.slice( 1 ) + ']' ).length ? $( '[name=' + this.hash.slice( 1 ) + ']' ) : $( $a.get( 0 ).hash ); + if ( $target.length ) { + $( 'html, body' ).animate( { + scrollTop: $target.offset().top - headerHeight( $target ) + }, 1000 ); + + return false; + } + // Scroll to the position of the item, minus the header size. + } ); + } $( '.entry-meta a' ).hover( function() { @@ -318,9 +315,20 @@ jQuery( function( $ ) { } } ); -} ); + // Adjust for sticky header when linking from external anchors. + $( window ).load( function() { + + if ( location.pathname.replace( /^\//,'' ) == window.location.pathname.replace( /^\//,'' ) && location.hostname == window.location.hostname ) { + var target = $( window.location.hash ); + if ( target.length ) { + $( 'html, body' ).animate( { + scrollTop: target.offset().top - headerHeight() + }, 0 ); + return false; + } + } + } ); -( function( $ ) { $( window ).load( function() { siteoriginNorth.logoScale = parseFloat( siteoriginNorth.logoScale ); From 1a92653e80809c1b1db9f48a408ed35d02313b9f Mon Sep 17 00:00:00 2001 From: Alex S <17275120+AlexGStapleton@users.noreply.github.com> Date: Mon, 24 Aug 2020 11:18:05 +1000 Subject: [PATCH 02/11] North: Page Jump on load after header has finished sizing - Also pass target to headerHeight to allow for more consistent sizing. --- js/north.js | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/js/north.js b/js/north.js index 689c556e..16596821 100644 --- a/js/north.js +++ b/js/north.js @@ -60,6 +60,7 @@ var headerHeight = function( $target ) { var height = 0; + if ( $( '#masthead' ).hasClass( 'sticky-menu' ) && $( '#masthead' ).data( 'scale-logo' ) ) { if ( typeof $target != 'undefined' && $target.offset().top < 48 ) { height += $( '#masthead' ).outerHeight(); @@ -80,7 +81,6 @@ }; $.fn.northSmoothScroll = function() { - console.log(headerHeight()); $( this ).click( function( e ) { var $a = $( this ); var $target = $( '[name=' + this.hash.slice( 1 ) + ']' ).length ? $( '[name=' + this.hash.slice( 1 ) + ']' ) : $( $a.get( 0 ).hash ); @@ -315,20 +315,6 @@ } } ); - // Adjust for sticky header when linking from external anchors. - $( window ).load( function() { - - if ( location.pathname.replace( /^\//,'' ) == window.location.pathname.replace( /^\//,'' ) && location.hostname == window.location.hostname ) { - var target = $( window.location.hash ); - if ( target.length ) { - $( 'html, body' ).animate( { - scrollTop: target.offset().top - headerHeight() - }, 0 ); - return false; - } - } - } ); - $( window ).load( function() { siteoriginNorth.logoScale = parseFloat( siteoriginNorth.logoScale ); @@ -463,4 +449,17 @@ $( window ).resize( smSetup ).scroll( smSetup ); } } ); + + // Adjust for sticky header when linking from external anchors. + $( window ).load( function() { + if ( location.pathname.replace( /^\//,'' ) == window.location.pathname.replace( /^\//,'' ) && location.hostname == window.location.hostname ) { + var $target = $( window.location.hash ); + if ( $target.length ) { + $( 'html, body' ).animate( { + scrollTop: $target.offset().top - headerHeight( $target ) + }, 0 ); + return false; + } + } + } ); } )( jQuery ); From f988bcaa3958b4fdedfe05ab2ae48bef69296b5a Mon Sep 17 00:00:00 2001 From: Alex S <17275120+AlexGStapleton@users.noreply.github.com> Date: Tue, 25 Aug 2020 19:46:44 +1000 Subject: [PATCH 03/11] Delay Page Jump On Load - This avoids the placement being incorrect in Chrome. - I also merged the .loads together as having two was redundent. --- js/north.js | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/js/north.js b/js/north.js index 16596821..e3bba7ef 100644 --- a/js/north.js +++ b/js/north.js @@ -315,6 +315,14 @@ } } ); + // Detect potential page jump on load and prevent it. + if ( location.pathname.replace( /^\//,'' ) == window.location.pathname.replace( /^\//,'' ) && location.hostname == window.location.hostname ) { + setTimeout( function() { + window.scrollTo( 0, 0 ); + }, 1 ); + var scrollOnLoad = true; + } + $( window ).load( function() { siteoriginNorth.logoScale = parseFloat( siteoriginNorth.logoScale ); @@ -448,18 +456,18 @@ smSetup(); $( window ).resize( smSetup ).scroll( smSetup ); } - } ); - // Adjust for sticky header when linking from external anchors. - $( window ).load( function() { - if ( location.pathname.replace( /^\//,'' ) == window.location.pathname.replace( /^\//,'' ) && location.hostname == window.location.hostname ) { + // Adjust for sticky header when linking from external anchors. + if ( typeof scrollOnLoad != "undefined" ) { var $target = $( window.location.hash ); if ( $target.length ) { - $( 'html, body' ).animate( { - scrollTop: $target.offset().top - headerHeight( $target ) - }, 0 ); - return false; + setTimeout( function() { + $( 'html, body' ).animate( { + scrollTop: $target.offset().top - ( headerHeight( $target ) ) + }, 0 ); + }, 100 ); } } } ); + } )( jQuery ); From a97acff6bd4a6421a53d452dfccc50770889a267 Mon Sep 17 00:00:00 2001 From: Alex S <17275120+AlexGStapleton@users.noreply.github.com> Date: Tue, 25 Aug 2020 19:48:47 +1000 Subject: [PATCH 04/11] Page Jump On Load: Trigger Sticky Nav Resize after jump - The animate complete is required to prevent a potential logo overlap in firefox. It's also possible it may happen in Chrome or other browsers but I couldn't replicate it. https://i.imgur.com/dmZpWsS.png --- js/north.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/js/north.js b/js/north.js index e3bba7ef..86dfb124 100644 --- a/js/north.js +++ b/js/north.js @@ -464,7 +464,14 @@ setTimeout( function() { $( 'html, body' ).animate( { scrollTop: $target.offset().top - ( headerHeight( $target ) ) - }, 0 ); + }, + 0, + function() { + if ( $( '#masthead' ).hasClass( 'sticky-menu' ) ) { + // Avoid a situation where the logo can be incorrectly sized due to the page jump. + smSetup(); + } + } ); }, 100 ); } } From e8eca33c1718b8675625c0e75d070290fecf24af Mon Sep 17 00:00:00 2001 From: Alex S <17275120+AlexGStapleton@users.noreply.github.com> Date: Tue, 8 Sep 2020 05:19:35 +1000 Subject: [PATCH 05/11] Update Jetpack Lazy Image logo exclude --- inc/template-tags.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inc/template-tags.php b/inc/template-tags.php index 43290475..677c8e1e 100644 --- a/inc/template-tags.php +++ b/inc/template-tags.php @@ -89,7 +89,7 @@ function siteorigin_north_lazy_load_exclude( $attr, $attachment ) { } if ( ! empty( $custom_logo_id ) && $attachment->ID == $custom_logo_id ) { // Jetpack Lazy Load - if ( class_exists( 'Jetpack_Lazy_Images' ) ) { + if ( class_exists( 'Jetpack_Lazy_Images' ) || class_exists( 'Automattic\\Jetpack\\Jetpack_Lazy_Images' ) ) { $attr['class'] .= ' skip-lazy'; } // Smush Lazy Load From faa2be4b7ed77db3a250411813a0cc7522fff138 Mon Sep 17 00:00:00 2001 From: Andrew Misplon Date: Fri, 16 Oct 2020 15:55:49 +0200 Subject: [PATCH 06/11] Changed page settings labels to sentence case --- inc/settings.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/inc/settings.php b/inc/settings.php index a2291adc..3bd5c890 100644 --- a/inc/settings.php +++ b/inc/settings.php @@ -1311,7 +1311,7 @@ function siteorigin_north_page_settings( $settings, $type, $id ){ $settings['page_title'] = array( 'type' => 'checkbox', 'label' => __( 'Page Title', 'siteorigin-north' ), - 'checkbox_label' => __( 'display', 'siteorigin-north' ), + 'checkbox_label' => __( 'Display', 'siteorigin-north' ), 'description' => __( 'Display the page title on this page.', 'siteorigin-north' ) ); @@ -1320,7 +1320,7 @@ function siteorigin_north_page_settings( $settings, $type, $id ){ $settings['featured_image'] = array( 'type' => 'checkbox', 'label' => __( 'Page Featured Image', 'siteorigin-north' ), - 'checkbox_label' => __( 'display', 'siteorigin-north' ), + 'checkbox_label' => __( 'Display', 'siteorigin-north' ), 'description' => __( 'Display the page featured image on this page.', 'siteorigin-north' ) ); } @@ -1328,28 +1328,28 @@ function siteorigin_north_page_settings( $settings, $type, $id ){ $settings['masthead_margin'] = array( 'type' => 'checkbox', 'label' => __( 'Masthead Bottom Margin', 'siteorigin-north' ), - 'checkbox_label' => __( 'enable', 'siteorigin-north' ), + 'checkbox_label' => __( 'Enable', 'siteorigin-north' ), 'description' => __( 'Include the margin below the masthead (top area) of your site.', 'siteorigin-north' ) ); $settings['footer_margin'] = array( 'type' => 'checkbox', 'label' => __( 'Footer Top Margin', 'siteorigin-north' ), - 'checkbox_label' => __( 'enable', 'siteorigin-north' ), + 'checkbox_label' => __( 'Enable', 'siteorigin-north' ), 'description' => __( 'Include the margin above your footer.', 'siteorigin-north' ) ); $settings['hide_masthead'] = array( 'type' => 'checkbox', 'label' => __( 'Hide Masthead', 'siteorigin-north' ), - 'checkbox_label' => __( 'hide', 'siteorigin-north' ), + 'checkbox_label' => __( 'Hide', 'siteorigin-north' ), 'description' => __( 'Hide the masthead on this page.', 'siteorigin-north' ) ); $settings['hide_footer_widgets'] = array( 'type' => 'checkbox', 'label' => __( 'Hide Footer Widgets', 'siteorigin-north' ), - 'checkbox_label' => __( 'hide', 'siteorigin-north' ), + 'checkbox_label' => __( 'Hide', 'siteorigin-north' ), 'description' => __( 'Hide the footer widgets on this page.', 'siteorigin-north' ) ); From a33dc11ebf4aef46fdc1feb95b9086eb3ab18198 Mon Sep 17 00:00:00 2001 From: Alex S <17275120+AlexGStapleton@users.noreply.github.com> Date: Mon, 19 Oct 2020 09:00:13 +1000 Subject: [PATCH 07/11] Page Jump on load: Account for Logo Resize --- js/north.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/js/north.js b/js/north.js index 86dfb124..c50d3878 100644 --- a/js/north.js +++ b/js/north.js @@ -58,13 +58,18 @@ ); }; - var headerHeight = function( $target ) { + var headerHeight = function( $target, load = false ) { var height = 0; if ( $( '#masthead' ).hasClass( 'sticky-menu' ) && $( '#masthead' ).data( 'scale-logo' ) ) { if ( typeof $target != 'undefined' && $target.offset().top < 48 ) { height += $( '#masthead' ).outerHeight(); - } else if ( $( '.site-branding' ).outerHeight() > $( '#site-navigation' ).outerHeight() ) { + } else if ( + $( '.site-branding' ).outerHeight() > $( '#site-navigation' ).outerHeight() || + ( + typeof $target != 'undefined' && load && $target.offset().top > 48 + ) + ) { height += $( '#masthead' ).outerHeight() * siteoriginNorth.logoScale; } else { height += $( '#masthead' ).height() + ( $( '#masthead' ).innerHeight() - $( '#masthead' ).height() ); @@ -463,7 +468,7 @@ if ( $target.length ) { setTimeout( function() { $( 'html, body' ).animate( { - scrollTop: $target.offset().top - ( headerHeight( $target ) ) + scrollTop: $target.offset().top - ( headerHeight( $target, true ) ) }, 0, function() { From 1fe9d6f526b0ce1dd446e0ab7bf254eaa91d124e Mon Sep 17 00:00:00 2001 From: Andrew Misplon Date: Thu, 22 Oct 2020 14:35:07 +0200 Subject: [PATCH 08/11] Updated Settings submodule --- inc/settings | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inc/settings b/inc/settings index cd2b1c16..d5459f30 160000 --- a/inc/settings +++ b/inc/settings @@ -1 +1 @@ -Subproject commit cd2b1c16ad9f499def844c42da76b1b84ea736dd +Subproject commit d5459f305d9258fa0d9699b1c751cf65f3e0a398 From 5be09794329b91a3ea3b290b21fd8f2c1877b032 Mon Sep 17 00:00:00 2001 From: Alex S <17275120+AlexGStapleton@users.noreply.github.com> Date: Thu, 22 Oct 2020 23:27:15 +1000 Subject: [PATCH 09/11] Prevent build error --- js/north.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/north.js b/js/north.js index c50d3878..e6574743 100644 --- a/js/north.js +++ b/js/north.js @@ -58,7 +58,7 @@ ); }; - var headerHeight = function( $target, load = false ) { + var headerHeight = function( $target, load ) { var height = 0; if ( $( '#masthead' ).hasClass( 'sticky-menu' ) && $( '#masthead' ).data( 'scale-logo' ) ) { @@ -468,7 +468,7 @@ if ( $target.length ) { setTimeout( function() { $( 'html, body' ).animate( { - scrollTop: $target.offset().top - ( headerHeight( $target, true ) ) + scrollTop: $target.offset().top - headerHeight( $target, true ) }, 0, function() { From 0537f664fef4da333febb91d945aade57ef618ea Mon Sep 17 00:00:00 2001 From: Andrew Misplon Date: Thu, 22 Oct 2020 21:36:33 +0200 Subject: [PATCH 10/11] Updated changelog --- readme.txt | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/readme.txt b/readme.txt index 9f9c636a..636ff142 100644 --- a/readme.txt +++ b/readme.txt @@ -103,6 +103,11 @@ Original design files are available on [Google Drive](https://drive.google.com/f == Changelog == += 1.7.15 - 22 October 2020 = +* Updated Jetpack Lazy Loading logo exclusion function. +* Improved one page smooth scrolling. +* Updated SiteOrigin Settings. + = 1.7.14 - 07 September 2020 = * Updated lazy load exclusion functionality for the logo. * Fixed the Page Template Settings Page Title setting for WooCommerce archive pages. From d2cc87155853f0b82affe5dc9374666500cad5ee Mon Sep 17 00:00:00 2001 From: Andrew Misplon Date: Sat, 24 Oct 2020 12:28:27 +0200 Subject: [PATCH 11/11] Updated release date --- readme.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.txt b/readme.txt index 636ff142..f125724f 100644 --- a/readme.txt +++ b/readme.txt @@ -103,7 +103,7 @@ Original design files are available on [Google Drive](https://drive.google.com/f == Changelog == -= 1.7.15 - 22 October 2020 = += 1.7.15 - 24 October 2020 = * Updated Jetpack Lazy Loading logo exclusion function. * Improved one page smooth scrolling. * Updated SiteOrigin Settings.