diff --git a/includes/assets/js/kb-header-block.min.js b/includes/assets/js/kb-header-block.min.js index 5c1c43c70..9eea91bdb 100644 --- a/includes/assets/js/kb-header-block.min.js +++ b/includes/assets/js/kb-header-block.min.js @@ -1 +1 @@ -class KBHeader{components={};_state;root;rootID;autoTransparentSpacing;sticky;stickyTablet;stickyMobile;transparent;transparentTablet;transparentMobile;stickySection;stickySectionTablet;stickySectionMobile;activeSize="mobile";lastScrollTop=0;activeOffsetTop=0;shrinkMain=!1;shrinkMainHeight=0;shrinkMainHeightTablet=0;shrinkMainHeightMobile=0;shrinkStartHeight=0;currentTopPosition=0;anchorOffset=0;placeholderWrapper;stickyWrapper;isSticking=!1;isTransparent=!1;activeHeaderContainer;constructor(a,b={}){this.root="string"==typeof a?document.querySelector(a):a,this.activeHeaderContainer=this.root.querySelector(".wp-block-kadence-header-desktop"),this.rootID="aaa",this.autoTransparentSpacing="1"===this.root.dataset?.autoTransparentSpacing,this.sticky="1"==this.root.dataset?.sticky,this.stickyTablet="1"==this.root.dataset?.stickyTablet,this.stickyMobile="1"==this.root.dataset?.stickyMobile,this.transparent="1"==this.root.dataset?.transparent,this.transparentTablet="1"==this.root.dataset?.transparentTablet,this.transparentMobile="1"==this.root.dataset?.transparentMobile,this.stickySection=this.root.dataset?.stickySection,this.stickySectionTablet=this.root.dataset?.stickySectionTablet,this.stickySectionMobile=this.root.dataset?.stickySectionMobile,this.shrinkMain="1"===this.root.dataset?.shrinkMain,this.shrinkMainHeight=this.root.dataset?.shrinkMainHeight,this.shrinkMainHeightTablet=this.root.dataset?.shrinkMainHeightTablet,this.shrinkMainHeightMobile=this.root.dataset?.shrinkMainHeightMobile,this.revealScrollUp="1"===this.root.dataset?.revealScrollUp,this._state="CREATED",(this.sticky||this.stickyTablet||this.stickyMobile)&&this.initStickyHeader();var c=new Event("MOUNTED",{bubbles:!0});c.ID=this.rootID,this.root.dispatchEvent(c),this._state="IDLE"}initStickyHeader(){this.sticky&&this.createAndSetPlaceholderAndStickyWrappers("desktop"),(this.stickyTablet||this.stickyMobile)&&this.createAndSetPlaceholderAndStickyWrappers("tablet"),this.placeholderWrapper&&this.stickyWrapper&&(this.setActiveSize(),this.updatePlaceholderAndStickyWrappers(),"desktop"==this.activeSize?this.sticky&&(this.activeOffsetTop=this.getOffset(this.placeholderWrapper).top):"tablet"==this.activeSize?this.stickyTablet&&(this.activeOffsetTop=this.getOffset(this.placeholderWrapper).top):this.stickyMobile&&(this.activeOffsetTop=this.getOffset(this.placeholderWrapper).top),window.addEventListener("resize",this.updateSticky.bind(this),!1),window.addEventListener("scroll",this.updateSticky.bind(this),!1),window.addEventListener("load",this.updateSticky.bind(this),!1),window.addEventListener("orientationchange",this.updateSticky.bind(this)),"complete"===document.readyState&&this.updateSticky("updateActive"),document.body.classList.contains("woocommerce-demo-store")&&document.body.classList.contains("kadence-store-notice-placement-above")&&this.respondToVisibility(document.querySelector(".woocommerce-store-notice"),()=>{this.updateSticky("updateActive").bind(this)}))}setActiveSize(){this.activeSize=parseInt(kadenceHeaderConfig.breakPoints.desktop){b.appendChild(a)})),b}respondToVisibility(a,b){var c={root:document.documentElement},d=new IntersectionObserver(a=>{a.forEach(a=>{b(0 .kb-nav-sub-menu");if(n.length){var o=this.getOffset(n[0]).top;this.stickyWrapper.style.setProperty("--kb-sticky-mega-overflow-header-offset",o-d+"px")}const p=c,q=c-e,r=this.currentTopPosition+e;var s=this.stickyWrapper.parentNode;if(this.shrinkMain){const b="mobile"===this.activeSize?this.shrinkMainHeightMobile:"tablet"===this.activeSize?this.shrinkMainHeightTablet:this.shrinkMainHeight;if(b){const c=this.activeHeaderContainer.querySelectorAll(".kb-img, .wp-block-kadence-identity img"),d=this.activeHeaderContainer.querySelector(".wp-block-kadence-header-row-center .kadence-header-row-inner");(!this.shrinkStartHeight||a&&void 0!==a.type&&"orientationchange"===a.type)&&(this.shrinkStartHeight=d.offsetHeight);const e=Math.max(b,this.shrinkStartHeight-window.scrollY);if(d.style.height=e+"px",d.style.minHeight=e+"px",d.style.maxHeight=e+"px",0==window.scrollY){if(c)for(let a=0;athis.lastScrollTop,u=Math.floor(this.anchorOffset+e);d<=this.anchorOffset-c?(this.currentTopPosition=0,this.setStickyChanged(!1)):d<=u?t?(this.currentTopPosition=0,this.setStickyChanged(!1)):(this.stickyWrapper.classList.remove("item-hidden-above"),this.currentTopPosition=p,this.setStickyChanged(!0)):d>=this.currentTopPosition&&d<=r?this.setStickyChanged(!1):(t?(this.stickyWrapper.classList.add("item-hidden-above"),this.stickyWrapper.style.top=q+"px",this.currentTopPosition=q):(this.stickyWrapper.classList.remove("item-hidden-above"),this.currentTopPosition=p),this.setStickyChanged(!0))}else{var u=Math.floor(this.anchorOffset-c);d<=u?(this.currentTopPosition=0,this.setStickyChanged(!1)):(this.currentTopPosition=p,this.setStickyChanged(!0))}this.lastScrollTop=d,window.scrollY==u?(this.stickyWrapper.classList.add("item-is-fixed"),this.stickyWrapper.classList.add("item-at-start"),this.stickyWrapper.classList.remove("item-is-stuck"),s.classList.add("child-is-fixed"),document.body.classList.add("header-is-fixed")):window.scrollY>u?this.revealScrollUp?window.scrollY{window.KBHeaderBlocks=[];var a=document.querySelectorAll(".wp-block-kadence-header");for(let c=0;c{this.updateSticky("updateActive").bind(this)}))}setActiveSize(){this.activeSize=parseInt(kadenceHeaderConfig.breakPoints.desktop){b.appendChild(a)})),b}respondToVisibility(a,b){var c={root:document.documentElement},d=new IntersectionObserver(a=>{a.forEach(a=>{b(0 .kb-nav-sub-menu");if(n.length){var o=this.getOffset(n[0]).top;this.stickyWrapper.style.setProperty("--kb-sticky-mega-overflow-header-offset",o-d+"px")}const p=c,q=c-e,r=this.currentTopPosition+e;var s=this.stickyWrapper.parentNode;if(this.shrinkMain){const b="mobile"===this.activeSize?this.shrinkMainHeightMobile:"tablet"===this.activeSize?this.shrinkMainHeightTablet:this.shrinkMainHeight;if(b){const c=this.activeHeaderContainer.querySelectorAll(".kb-img, .wp-block-kadence-identity img"),d=this.activeHeaderContainer.querySelector(".wp-block-kadence-header-row-center .kadence-header-row-inner");(!this.shrinkStartHeight||a&&void 0!==a.type&&"orientationchange"===a.type)&&(this.shrinkStartHeight=d.offsetHeight);const e=Math.max(b,this.shrinkStartHeight-window.scrollY);if(d.style.height=e+"px",d.style.minHeight=e+"px",d.style.maxHeight=e+"px",0==window.scrollY){if(c)for(let a=0;athis.lastScrollTop,u=Math.floor(this.anchorOffset+e);d<=this.anchorOffset-c?(this.currentTopPosition=0,this.setStickyChanged(!1)):d<=u?t?(this.currentTopPosition=0,this.setStickyChanged(!1)):(this.stickyWrapper.classList.remove("item-hidden-above"),this.currentTopPosition=p,this.setStickyChanged(!0)):d>=this.currentTopPosition&&d<=r?this.setStickyChanged(!1):(t?(this.stickyWrapper.classList.add("item-hidden-above"),this.stickyWrapper.style.top=q+"px",this.currentTopPosition=q):(this.stickyWrapper.classList.remove("item-hidden-above"),this.currentTopPosition=p),this.setStickyChanged(!0))}else{var u=Math.floor(this.anchorOffset-c);d<=u?(this.currentTopPosition=0,this.setStickyChanged(!1)):(this.currentTopPosition=p,this.setStickyChanged(!0))}this.lastScrollTop=d,window.scrollY==u?(this.stickyWrapper.classList.add("item-is-fixed"),this.stickyWrapper.classList.add("item-at-start"),this.stickyWrapper.classList.remove("item-is-stuck"),s.classList.add("child-is-fixed"),document.body.classList.add("header-is-fixed")):window.scrollY>u?this.revealScrollUp?window.scrollY{window.KBHeaderBlocks=[];var a=document.querySelectorAll(".wp-block-kadence-header");for(let c=0;c{c.contains(a.target)||b(c,!1)})})},e=function(a){const c=a.querySelectorAll(".kb-navigation .sub-menu");if(c.length)for(let d=0;d .kb-link-wrap > a").addEventListener("click",function(f){f.preventDefault(),b(c[d].parentNode,null,a.classList.contains("is-vertical"))}),c[d].parentNode.addEventListener("mouseleave",function(c){a.classList.contains("is-vertical")||c.target.classList.contains("kb-nav-link-sub-click")||b(c.target,!1)}),c[d].parentNode.querySelector("a").addEventListener("focus",function(f){if(!a.classList.contains("is-vertical")){var e=f.target.parentNode.parentNode.querySelectorAll("li.menu-item--toggled-on");for(let a=0;awindow.innerWidth&&768<=window.innerWidth?d.classList.contains("navigation-tablet-orientation-vertical")&&(b=!0):768>window.innerWidth&&d.classList.contains("navigation-mobile-orientation-vertical")&&(b=!0),b?(d.classList.remove("is-horizontal"),d.classList.add("is-vertical")):(d.classList.remove("is-vertical"),d.classList.add("is-horizontal"))}},g=function(){var a=null;a=1024 ul.sub-menu"):768 ul.sub-menu"):document.querySelectorAll(".wp-block-kadence-navigation.navigation-mobile-orientation-horizontal .kb-menu-mega-width-mobile-full > ul.sub-menu");for(let c=0;c ul.sub-menu"):768 ul.sub-menu"):document.querySelectorAll(".wp-block-kadence-navigation.navigation-mobile-orientation-horizontal .kb-menu-mega-width-mobile-content > ul.sub-menu"),a?.length)for(let g=0;g{clearTimeout(b),b=setTimeout(()=>{f(a)},200)}),f(a),d()})(),function(){var a=document.querySelectorAll(".wp-block-kadence-navigation .kb-menu-mega-width-full > ul.sub-menu");if(!a.length)return;let b;window.addEventListener("resize",()=>{clearTimeout(b),b=setTimeout(()=>{g()},200)}),g()}(),function(){var a=document.querySelectorAll(".wp-block-kadence-navigation .kb-menu-mega-width-content > ul.sub-menu");if(!a.length)return;let b;window.addEventListener("resize",()=>{clearTimeout(b),b=setTimeout(()=>{h()},200)}),h()}(),function(){var a=document.querySelectorAll(".kb-off-canvas-inner .wp-block-kadence-navigation .menu-item-has-children");if(a.length)for(let d=0;d{c.contains(a.target)||b(c,!1)})})},e=function(a){const c=a.querySelectorAll(".kb-navigation .sub-menu");if(c.length)for(let d=0;d .kb-link-wrap > a").addEventListener("click",function(f){f.preventDefault(),b(c[d].parentNode,null,a.classList.contains("is-vertical"))}),c[d].parentNode.addEventListener("mouseleave",function(c){a.classList.contains("is-vertical")||c.target.classList.contains("kb-nav-link-sub-click")||b(c.target,!1)}),c[d].parentNode.querySelector("a").addEventListener("focus",function(f){if(!a.classList.contains("is-vertical")){var e=f.target.parentNode.parentNode.querySelectorAll("li.menu-item--toggled-on");for(let a=0;awindow.innerWidth&&768<=window.innerWidth?d.classList.contains("navigation-tablet-orientation-vertical")&&(b=!0):768>window.innerWidth&&d.classList.contains("navigation-mobile-orientation-vertical")&&(b=!0),b?(d.classList.remove("is-horizontal"),d.classList.add("is-vertical")):(d.classList.remove("is-vertical"),d.classList.add("is-horizontal"))}},g=function(){var a=null;a=1024 ul.sub-menu"):768 ul.sub-menu"):document.querySelectorAll(".wp-block-kadence-navigation.navigation-mobile-orientation-horizontal .kb-menu-mega-width-mobile-full > ul.sub-menu");for(let c=0;c ul.sub-menu"):768 ul.sub-menu"):document.querySelectorAll(".wp-block-kadence-navigation.navigation-mobile-orientation-horizontal .kb-menu-mega-width-mobile-content > ul.sub-menu"),a?.length)for(let g=0;g{clearTimeout(b),b=setTimeout(()=>{f(a)},200)}),f(a),d()})(),function(){var a=document.querySelectorAll(".wp-block-kadence-navigation .kb-menu-mega-width-full > ul.sub-menu");if(!a.length)return;let b;window.addEventListener("resize",()=>{clearTimeout(b),b=setTimeout(()=>{g()},200)}),g()}(),function(){var a=document.querySelectorAll(".wp-block-kadence-navigation .kb-menu-mega-width-content > ul.sub-menu");if(!a.length)return;let b;window.addEventListener("resize",()=>{clearTimeout(b),b=setTimeout(()=>{h()},200)}),h()}(),function(){var a=document.querySelectorAll(".kb-off-canvas-inner .wp-block-kadence-navigation .menu-item-has-children");if(a.length)for(let d=0;d implode( ' ', $wrapper_classes ), - 'aria-label' => $name, - ) + $wrapper_attribute_items = array( + 'class' => implode( ' ', $wrapper_classes ), + 'aria-label' => $name, + 'data-scroll-spy' => $nav_attributes['enableScrollSpy'], ); + if ( $nav_attributes['enableScrollSpy'] ) { + $wrapper_attribute_items['data-scroll-spy-offset'] = isset( $nav_attributes['scrollSpyOffsetManual'] ) && $nav_attributes['scrollSpyOffsetManual'] ? $nav_attributes['scrollSpyOffset'] : false; + $wrapper_attribute_items['data-scroll-spy-id'] = uniqid(); + } + + $wrapper_attributes = get_block_wrapper_attributes( $wrapper_attribute_items ); + // Navigation Attributes. $navigation_classes = array(); @@ -454,6 +460,14 @@ public function build_html( $attributes, $unique_id, $content, $block_instance ) ) ); + if ( $nav_attributes['enableScrollSpy'] ) { + wp_enqueue_script( 'kadence-blocks-gumshoe', KADENCE_BLOCKS_URL . 'includes/assets/js/gumshoe.min.js', array(), KADENCE_BLOCKS_VERSION, true ); + //need to load this script with the gumshoe dependency if scrollspy is enabled + wp_dequeue_script( 'kadence-blocks-' . $this->block_name ); + wp_deregister_script( 'kadence-blocks-' . $this->block_name ); + wp_enqueue_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kb-navigation-block.min.js', array('kadence-blocks-gumshoe'), KADENCE_BLOCKS_VERSION, true ); + } + return sprintf( '
', $wrapper_attributes, diff --git a/includes/navigation/class-kadence-navigation-cpt.php b/includes/navigation/class-kadence-navigation-cpt.php index 6fc63b8c3..9c36154f3 100644 --- a/includes/navigation/class-kadence-navigation-cpt.php +++ b/includes/navigation/class-kadence-navigation-cpt.php @@ -2106,6 +2106,31 @@ public function register_meta() { 'default' => '', 'type' => 'string', ), + array( + 'key' => '_kad_navigation_enableScrollSpy', + 'type' => 'boolean', + 'default' => false, + ), + array( + 'key' => '_kad_navigation_scrollSpyOffsetManual', + 'type' => 'string', + 'default' => '', + ), + array( + 'key' => '_kad_navigation_scrollSpyOffset', + 'type' => 'string', + 'default' => '', + ), + array( + 'key' => '_kad_navigation_scrollSpyOffsetTablet', + 'type' => 'string', + 'default' => '', + ), + array( + 'key' => '_kad_navigation_scrollSpyOffsetMobile', + 'type' => 'string', + 'default' => '', + ), ); foreach ( $register_meta as $meta ) { diff --git a/kadence-blocks.php b/kadence-blocks.php index 76e4fa6b4..2b7165a8e 100644 --- a/kadence-blocks.php +++ b/kadence-blocks.php @@ -5,7 +5,7 @@ * Description: Advanced Page Building Blocks for Gutenberg. Create custom column layouts, backgrounds, dual buttons, icons etc. * Author: Kadence WP * Author URI: https://www.kadencewp.com - * Version: 3.4.1 + * Version: 3.4.2 * Requires PHP: 7.4 * Text Domain: kadence-blocks * License: GPL2+ @@ -20,7 +20,7 @@ } define( 'KADENCE_BLOCKS_PATH', realpath( plugin_dir_path( __FILE__ ) ) . DIRECTORY_SEPARATOR ); define( 'KADENCE_BLOCKS_URL', plugin_dir_url( __FILE__ ) ); -define( 'KADENCE_BLOCKS_VERSION', '3.4.1' ); +define( 'KADENCE_BLOCKS_VERSION', '3.4.2' ); require_once plugin_dir_path( __FILE__ ) . 'vendor/vendor-prefixed/autoload.php'; require_once plugin_dir_path( __FILE__ ) . 'vendor/autoload.php'; diff --git a/readme.txt b/readme.txt index d45bb6f8e..b2c70e9b0 100644 --- a/readme.txt +++ b/readme.txt @@ -4,7 +4,7 @@ Tags: gutenberg, blocks, page builder, editor, gutenberg blocks Donate link: https://www.kadencewp.com/about-us/ Requires at least: 6.4 Tested up to: 6.7.1 -Stable tag: 3.4.1 +Stable tag: 3.4.2 Requires PHP: 7.4 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html @@ -174,6 +174,10 @@ Please report security bugs found in the Kadence Blocks plugin's source code thr == Changelog == += 3.4.2 = +Release Date: tba +* Add: Features for activating nav links with hash anchor links on the page + = 3.4.1 = Release Date: December 12th 2024 * Update: allowing splide slider options to be translated. diff --git a/src/assets/js/kb-header-block.js b/src/assets/js/kb-header-block.js index 7d4bb4e4e..db38aa626 100644 --- a/src/assets/js/kb-header-block.js +++ b/src/assets/js/kb-header-block.js @@ -247,6 +247,7 @@ class KBHeader { this.activeOffsetTop = this.getOffset(this.placeholderWrapper).top; } window.addEventListener('resize', this.updateSticky.bind(this), false); + window.addEventListener('hashchange', this.updateSticky.bind(this), false); window.addEventListener('scroll', this.updateSticky.bind(this), false); window.addEventListener('load', this.updateSticky.bind(this), false); window.addEventListener('orientationchange', this.updateSticky.bind(this)); diff --git a/src/assets/js/kb-navigation-block.js b/src/assets/js/kb-navigation-block.js index 463d79350..1e726ff49 100644 --- a/src/assets/js/kb-navigation-block.js +++ b/src/assets/js/kb-navigation-block.js @@ -445,6 +445,37 @@ updateActiveAnchors(); }; }; + const initScrollSpy = function () { + if (typeof Gumshoe == 'function') { + var scrollSpyTargets = document.querySelectorAll('.wp-block-kadence-navigation[data-scroll-spy="1"]'); + if (!scrollSpyTargets.length) { + return; + } + scrollSpyTargets.forEach(function (scrollSpyTarget) { + var offsetManual = parseInt(scrollSpyTarget.getAttribute('data-scroll-spy-offset')); + var offsetTarget = null; + if (!offsetManual) { + //if the offset isn't set manually, attempt to automatically set one + //here, we'll assume we're in a header block and look for the containing row height + var offsetTarget = scrollSpyTarget.closest('.wp-block-kadence-header-row'); + } + const scrollSpyId = scrollSpyTarget.dataset?.scrollSpyId; + // Initialize Gumshoe + new Gumshoe('.wp-block-kadence-navigation[data-scroll-spy-id="' + scrollSpyId + '"] .kb-navigation a', { + nested: true, + nestedClass: 'current-menu-ancestor', + navClass: 'current-menu-item', + offset: offsetManual + ? offsetManual + : offsetTarget + ? function () { + return offsetTarget?.getBoundingClientRect().height; + } + : 0, + }); + }); + } + }; // Initialize immediately for already loaded DOM initNavigation(); @@ -452,4 +483,5 @@ initContentSubMenuSize(); initMobileToggleSub(); initActiveAnchors(); + initScrollSpy(); })(); diff --git a/src/blocks/navigation/edit-inner.js b/src/blocks/navigation/edit-inner.js index 6099108ba..624309360 100644 --- a/src/blocks/navigation/edit-inner.js +++ b/src/blocks/navigation/edit-inner.js @@ -57,6 +57,7 @@ import { Placeholder, MenuItem, Modal, + SelectControl, } from '@wordpress/components'; import { MenuEditor } from './components'; @@ -429,6 +430,11 @@ export function EditInner(props) { linkHorizontalAlignment: meta?._kad_navigation_linkHorizontalAlignment, linkHorizontalAlignmentTablet: meta?._kad_navigation_linkHorizontalAlignmentTablet, linkHorizontalAlignmentMobile: meta?._kad_navigation_linkHorizontalAlignmentMobile, + enableScrollSpy: meta?._kad_navigation_enableScrollSpy, + scrollSpyOffsetManual: meta?._kad_navigation_scrollSpyOffsetManual, + scrollSpyOffset: meta?._kad_navigation_scrollSpyOffset, + scrollSpyOffsetTablet: meta?._kad_navigation_scrollSpyOffsetTablet, + scrollSpyOffsetMobile: meta?._kad_navigation_scrollSpyOffsetMobile, }; const { @@ -628,6 +634,11 @@ export function EditInner(props) { linkHorizontalAlignment, linkHorizontalAlignmentTablet, linkHorizontalAlignmentMobile, + enableScrollSpy, + scrollSpyOffsetManual, + scrollSpyOffset, + scrollSpyOffsetTablet, + scrollSpyOffsetMobile, } = metaAttributes; const inTemplatePreviewMode = !id && templateKey; @@ -1445,6 +1456,49 @@ export function EditInner(props) { tabletChildren={generalToggleControls('Tablet')} mobileChildren={generalToggleControls('Mobile')} > + + setMetaAttribute(value, 'enableScrollSpy')} + /> + {enableScrollSpy && ( + setMetaAttribute(value, 'scrollSpyOffsetManual')} + /> + )} + {enableScrollSpy && scrollSpyOffsetManual && ( + setMetaAttribute(value.toString(), 'scrollSpyOffset')} + onChangeTablet={(value) => + setMetaAttribute(value.toString(), 'scrollSpyOffsetTablet') + } + onChangeMobile={(value) => + setMetaAttribute(value.toString(), 'scrollSpyOffsetMobile') + } + min={0} + max={1000} + step={1} + reset={() => setMetaAttribute('', 'scrollSpyOffset')} + unit={'px'} + units={['px']} + showUnit={true} + /> + )} )}