feat: integration with WP Interactions

* fix: carousel dispatch event when changing slide

* fix: tabs dispatch event when changing tab

* fix: count up attach count object to each count up element similar to other blocks like carousel

Author: Arukuen

src/block/carousel/frontend-carousel.js

@@ -320,6 +320,14 @@ class _StackableCarousel {
 		this.setDotActive( slide )
 		this.currentSlide = slide
 
+		// Dispatch an event when the carousel change slide
+		this.el.dispatchEvent( new CustomEvent( 'stackable-carousel-slide-change', {
+			detail: {
+				element: this.el,
+				currentSlide: slide,
+			},
+		} ) )
+
 		try {
 			this.liveregion.textContent = this.sliderEl.dataset.labelSlideOf.replace( /%+d/, slide ).replace( /%+d/, this.maxSlides() )
 		} catch ( err ) {

src/block/count-up/frontend-count-up.js

@@ -9,7 +9,11 @@ import counterUp from 'counterup2'
 import domReady from '@wordpress/dom-ready'
 
 const ACTIVE = 'stk--count-up-active'
-class StackableCountUp {
+class _StackableCountUp {
+	constructor( el ) {
+		this.el = el
+	}
+
 	callback = entries => {
 		entries.forEach( entry => {
 			const el = entry.target
@@ -25,15 +29,12 @@ class StackableCountUp {
 	}
 
 	init = () => {
-		const els = document.querySelectorAll( '.stk-block-count-up__text' )
-
+		this.el.classList.remove( ACTIVE )
 		// If reduce motion is on, don't animate.
 		const reduceMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches
 		// If IntersectionObserver is not supported, just show the blocks.
 		if ( ! ( 'IntersectionObserver' in window ) || reduceMotion ) {
-			els.forEach( el => {
-				el.classList.add( ACTIVE )
-			} )
+			this.el.classList.add( ACTIVE )
 			return
 		}
 
@@ -43,8 +44,20 @@ class StackableCountUp {
 		// Don't use threshold 1 because if a small part of the text is hidden,
 		// the IO won't trigger.
 		this.io = new IntersectionObserver( this.callback, { threshold: 0.25 } ) // eslint-disable-line compat/compat
+		this.io.observe( this.el )
+	}
+}
+
+class StackableCountUp {
+	init = () => {
+		const els = document.querySelectorAll( '.stk-block-count-up__text' )
 		els.forEach( el => {
-			this.io.observe( el )
+			if ( ! el._StackableHasInitCountUp ) {
+				const countUp = new _StackableCountUp( el )
+				el.countUp = countUp
+				countUp.init()
+				el.StackableHasInitCountUp = true
+			}
 		} )
 	}
 }

src/block/tabs/frontend-tabs.js

@@ -127,6 +127,14 @@ class _StackableTabs {
 		} )
 
 		this.activeTab = tabIndex
+
+		// Dispatch an event when the tab is changed
+		this.parentEl.dispatchEvent( new CustomEvent( 'stackable-tabs-change', {
+			detail: {
+				element: this.parentEl,
+				activeTab: tabIndex,
+			},
+		} ) )
 	}
 
 	initWindowEventListeners = () => {
@@ -157,7 +165,8 @@ class StackableTabs {
 		document.querySelectorAll( '.stk-block-tabs' )
 			.forEach( el => {
 				if ( ! el._StackableHasInitTabs ) {
-					new _StackableTabs( el )
+					const tabs = new _StackableTabs( el )
+					el.tabs = tabs
 					el._StackableHasInitTabs = true
 				}
 			} )