KAD-4209 Init progress bars on query loop filter

stellarwp · Mar 3, 2025 · a98977c · a98977c
1 parent 7d5e94a
commit a98977c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/includes/assets/js/kb-progress-bars.min.js b/includes/assets/js/kb-progress-bars.min.js
diff --git a/includes/blocks/class-kadence-blocks-progress-bar-block.php b/includes/blocks/class-kadence-blocks-progress-bar-block.php
@@ -236,7 +236,7 @@ public function build_html( $attributes, $unique_id, $content, $block_instance )
 			! empty( $attributes['progressWidthMobile'] ) ? $attributes['progressWidthMobile'] : ( ! empty( $attributes['progressWidthTablet'] ) ? $attributes['progressWidthTablet'] : ( ! empty( $attributes['progressWidth'] ) ? $attributes['progressWidth'] : 2 ) ),
 		];
 
-		$content = '<div class="kb-progress-bar-container kb-progress-bar-container' . $unique_id . ' kb-progress-bar-type-' . $attributes['barType'] . ' ' . ( ! empty( $attributes['align'] ) ? 'align' . $attributes['align'] : '' ) . '">';
+		$content = '<div class="kb-progress-bar-container kb-progress-bar-container' . $unique_id . ' kb-progress-bar-init kb-progress-bar-type-' . $attributes['barType'] . ' ' . ( ! empty( $attributes['align'] ) ? 'align' . $attributes['align'] : '' ) . '">';
 
 		$content .= $this->get_label( $attributes, 'above' );
 

diff --git a/src/assets/js/kb-progress-bars.js b/src/assets/js/kb-progress-bars.js
@@ -146,9 +146,12 @@
 			} else {
 				kadenceProgressBars.triggerAnimation(element, index, item);
 			}
+			// Remove the init class after initialization
+			element.classList.remove('kb-progress-bar-init');
 		},
 		initSingleBar(item) {
-			const barContainers = document.querySelectorAll('.kb-progress-bar-container' + item.unique_id);
+			// Only select containers that have the init class
+			const barContainers = document.querySelectorAll('.kb-progress-bar-container' + item.unique_id + '.kb-progress-bar-init');
 			if (!barContainers?.length) {
 				return;
 			}
@@ -190,5 +193,7 @@
 		// The DOM has already been loaded.
 		kadenceProgressBars.init();
 	}
+	// Add event listener for kb-query-loaded event
+	document.addEventListener('kb-query-loaded', kadenceProgressBars.init);
 	window.addEventListener('resize', kadenceProgressBars.windowResize, false);
 })();