From a98977cf3a85483f78d6ba4c0134148f10482caa Mon Sep 17 00:00:00 2001 From: Josh Oakes Date: Mon, 3 Mar 2025 10:24:20 -0600 Subject: [PATCH] KAD-4209 Init progress bars on query loop filter --- includes/assets/js/kb-progress-bars.min.js | 2 +- .../blocks/class-kadence-blocks-progress-bar-block.php | 2 +- src/assets/js/kb-progress-bars.js | 7 ++++++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/includes/assets/js/kb-progress-bars.min.js b/includes/assets/js/kb-progress-bars.min.js index 85b61cef5..ab23bd3b3 100644 --- a/includes/assets/js/kb-progress-bars.min.js +++ b/includes/assets/js/kb-progress-bars.min.js @@ -1 +1 @@ -(function(){"use strict";const a={cache:{},scroller:{},items:JSON.parse(kadence_blocks_progress_bars.items),windowResize(){a?.items&&Object.keys(a?.items).forEach(function(b){a.updateContainer(a.items[b])})},updateContainer(b){const c=document.querySelectorAll(".kb-progress-bar-"+b.unique_id),d=[];if(c?.length)for(let e=0;ewindow.innerWidth?("line"===b.type&&(a.setAttribute("viewBox","0 0 100 "+b.stokeWidths[2]),d.setAttribute("d","M 0,"+b.stokeWidths[2]/2+" L 100,"+b.stokeWidths[2]/2),e.setAttribute("d","M 0,"+b.stokeWidths[2]/2+" L 100,"+b.stokeWidths[2]/2)),d.setAttribute("stroke-width",b.stokeWidths[2]),e.setAttribute("stroke-width",b.stokeWidths[2])):1025>window.innerWidth?("line"===b.type&&(a.setAttribute("viewBox","0 0 100 "+b.stokeWidths[1]),d.setAttribute("d","M 0,"+b.stokeWidths[1]/2+" L 100,"+b.stokeWidths[1]/2),e.setAttribute("d","M 0,"+b.stokeWidths[1]/2+" L 100,"+b.stokeWidths[1]/2)),d.setAttribute("stroke-width",b.stokeWidths[1]),e.setAttribute("stroke-width",b.stokeWidths[1])):("line"===b.type&&(a.setAttribute("viewBox","0 0 100 "+b.stokeWidths[0]),d.setAttribute("d","M 0,"+b.stokeWidths[0]/2+" L 100,"+b.stokeWidths[0]/2),e.setAttribute("d","M 0,"+b.stokeWidths[0]/2+" L 100,"+b.stokeWidths[0]/2)),d.setAttribute("stroke-width",b.stokeWidths[0]),e.setAttribute("stroke-width",b.stokeWidths[0]))},triggerAnimation(b,c,d){if(a.cache[d.simple_id][c]){const e=d?.prefix?a.stripHtml(d.prefix):"",f=d?.suffix?a.stripHtml(d.suffix):"";a.cache[d.simple_id][c].animate(d.progress_real/d.progress_max,{duration:1e3*d.duration,step(a,c){let g=0;const h=b.querySelector(".kb-current-progress-above"),i=b.querySelector(".kb-current-progress-inside"),j=b.querySelector(".kb-current-progress-below");g=d.is_relative?100*c.value():c.value()*d.progress_max,"one"===d.decimal?(g=Math.round(10*g)/10,g=g.toFixed(1)):"two"===d.decimal?(g=Math.round(100*g)/100,g=g.toFixed(2)):g=Math.round(g),h?h.innerHTML=e+g+f:i?i.innerHTML=e+g+f:j&&(j.innerHTML=e+g+f)}})}},initSingleBarElement(b,c,d){let e=768>window.innerWidth?d.stokeWidths?.[2]?d.stokeWidths[2]:2:1025>window.innerWidth?d.stokeWidths?.[1]?d.stokeWidths[1]:2:d.stokeWidths?.[0]?d.stokeWidths[0]:2;const f=b.querySelector(".kb-progress-bar"),g={color:d.progressColor,trailColor:d.barBackground,duration:1e3*d.duration,easing:d.easing,strokeWidth:e};switch(a.cache[d.simple_id]||(a.cache[d.simple_id]=[]),d.type){case"circle":a.cache[d.simple_id][c]=new ProgressBar.Circle(f,g);break;case"line":a.cache[d.simple_id][c]=new ProgressBar.Line(f,g);break;case"semicircle":a.cache[d.simple_id][c]=new ProgressBar.SemiCircle(f,g)}if(d.delay){a.scroller[d.simple_id]||(a.scroller[d.simple_id]=[]),a.scroller[d.simple_id][c]=new ScrollMagic.Controller;const e=new ScrollMagic.Scene({triggerElement:b});e.triggerHook(.88),e.addTo(a.scroller[d.simple_id][c]),e.on("start",function(){a.triggerAnimation(b,c,d)})}else a.triggerAnimation(b,c,d)},initSingleBar(b){const c=document.querySelectorAll(".kb-progress-bar-container"+b.unique_id);if(c?.length)for(let d=0;d${a}`,"text/html");return b.body.textContent||""},initAll(){a?.items&&Object.keys(a?.items).forEach(function(b){a.initSingleBar(a.items[b])})},init(){if("undefined"!=typeof ProgressBar)a.initAll();else var b=setInterval(function(){"undefined"!=typeof ProgressBar&&(a.initAll(),clearInterval(b))},200)}};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",a.init):a.init(),window.addEventListener("resize",a.windowResize,!1)})(); \ No newline at end of file +(function(){"use strict";const a={cache:{},scroller:{},items:JSON.parse(kadence_blocks_progress_bars.items),windowResize(){a?.items&&Object.keys(a?.items).forEach(function(b){a.updateContainer(a.items[b])})},updateContainer(b){const c=document.querySelectorAll(".kb-progress-bar-"+b.unique_id),d=[];if(c?.length)for(let e=0;ewindow.innerWidth?("line"===b.type&&(a.setAttribute("viewBox","0 0 100 "+b.stokeWidths[2]),d.setAttribute("d","M 0,"+b.stokeWidths[2]/2+" L 100,"+b.stokeWidths[2]/2),e.setAttribute("d","M 0,"+b.stokeWidths[2]/2+" L 100,"+b.stokeWidths[2]/2)),d.setAttribute("stroke-width",b.stokeWidths[2]),e.setAttribute("stroke-width",b.stokeWidths[2])):1025>window.innerWidth?("line"===b.type&&(a.setAttribute("viewBox","0 0 100 "+b.stokeWidths[1]),d.setAttribute("d","M 0,"+b.stokeWidths[1]/2+" L 100,"+b.stokeWidths[1]/2),e.setAttribute("d","M 0,"+b.stokeWidths[1]/2+" L 100,"+b.stokeWidths[1]/2)),d.setAttribute("stroke-width",b.stokeWidths[1]),e.setAttribute("stroke-width",b.stokeWidths[1])):("line"===b.type&&(a.setAttribute("viewBox","0 0 100 "+b.stokeWidths[0]),d.setAttribute("d","M 0,"+b.stokeWidths[0]/2+" L 100,"+b.stokeWidths[0]/2),e.setAttribute("d","M 0,"+b.stokeWidths[0]/2+" L 100,"+b.stokeWidths[0]/2)),d.setAttribute("stroke-width",b.stokeWidths[0]),e.setAttribute("stroke-width",b.stokeWidths[0]))},triggerAnimation(b,c,d){if(a.cache[d.simple_id][c]){const e=d?.prefix?a.stripHtml(d.prefix):"",f=d?.suffix?a.stripHtml(d.suffix):"";a.cache[d.simple_id][c].animate(d.progress_real/d.progress_max,{duration:1e3*d.duration,step(a,c){let g=0;const h=b.querySelector(".kb-current-progress-above"),i=b.querySelector(".kb-current-progress-inside"),j=b.querySelector(".kb-current-progress-below");g=d.is_relative?100*c.value():c.value()*d.progress_max,"one"===d.decimal?(g=Math.round(10*g)/10,g=g.toFixed(1)):"two"===d.decimal?(g=Math.round(100*g)/100,g=g.toFixed(2)):g=Math.round(g),h?h.innerHTML=e+g+f:i?i.innerHTML=e+g+f:j&&(j.innerHTML=e+g+f)}})}},initSingleBarElement(b,c,d){let e=768>window.innerWidth?d.stokeWidths?.[2]?d.stokeWidths[2]:2:1025>window.innerWidth?d.stokeWidths?.[1]?d.stokeWidths[1]:2:d.stokeWidths?.[0]?d.stokeWidths[0]:2;const f=b.querySelector(".kb-progress-bar"),g={color:d.progressColor,trailColor:d.barBackground,duration:1e3*d.duration,easing:d.easing,strokeWidth:e};switch(a.cache[d.simple_id]||(a.cache[d.simple_id]=[]),d.type){case"circle":a.cache[d.simple_id][c]=new ProgressBar.Circle(f,g);break;case"line":a.cache[d.simple_id][c]=new ProgressBar.Line(f,g);break;case"semicircle":a.cache[d.simple_id][c]=new ProgressBar.SemiCircle(f,g)}if(d.delay){a.scroller[d.simple_id]||(a.scroller[d.simple_id]=[]),a.scroller[d.simple_id][c]=new ScrollMagic.Controller;const e=new ScrollMagic.Scene({triggerElement:b});e.triggerHook(.88),e.addTo(a.scroller[d.simple_id][c]),e.on("start",function(){a.triggerAnimation(b,c,d)})}else a.triggerAnimation(b,c,d);b.classList.remove("kb-progress-bar-init")},initSingleBar(b){const c=document.querySelectorAll(".kb-progress-bar-container"+b.unique_id+".kb-progress-bar-init");if(c?.length)for(let d=0;d${a}`,"text/html");return b.body.textContent||""},initAll(){a?.items&&Object.keys(a?.items).forEach(function(b){a.initSingleBar(a.items[b])})},init(){if("undefined"!=typeof ProgressBar)a.initAll();else var b=setInterval(function(){"undefined"!=typeof ProgressBar&&(a.initAll(),clearInterval(b))},200)}};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",a.init):a.init(),document.addEventListener("kb-query-loaded",a.init),window.addEventListener("resize",a.windowResize,!1)})(); \ No newline at end of file diff --git a/includes/blocks/class-kadence-blocks-progress-bar-block.php b/includes/blocks/class-kadence-blocks-progress-bar-block.php index 5db63f3dd..acc40fcb3 100644 --- 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 = '
'; + $content = '
'; $content .= $this->get_label( $attributes, 'above' ); diff --git a/src/assets/js/kb-progress-bars.js b/src/assets/js/kb-progress-bars.js index 3f9435625..6f3fd8eba 100644 --- 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); })();