Bug Fix: Failed to emit `active` and `visible` events.

dist/js/splide.js

@@ -1875,18 +1875,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 
     function updateActivity(active) {
-      toggleClass(slide, CLASS_ACTIVE, active);
+      if (active !== hasClass(slide, CLASS_ACTIVE)) {
+        toggleClass(slide, CLASS_ACTIVE, active);
 
-      if (active) {
-        if (!hasClass(slide, CLASS_ACTIVE)) {
-          isNavigation && setAttribute(slide, ARIA_CURRENT, true);
-          emit(EVENT_ACTIVE, this);
-        }
-      } else {
-        if (hasClass(slide, CLASS_ACTIVE)) {
-          removeAttribute(slide, ARIA_CURRENT);
-          emit(EVENT_INACTIVE, this);
+        if (isNavigation) {
+          setAttribute(slide, ARIA_CURRENT, active || null);
         }
+
+        emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this);
       }
     }
     /**
@@ -1897,18 +1893,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 
     function updateVisibility(visible) {
-      toggleClass(slide, CLASS_VISIBLE, visible);
       setAttribute(slide, ARIA_HIDDEN, !visible || null);
       setAttribute(slide, TAB_INDEX, visible && options.slideFocus ? 0 : null);
 
-      if (visible) {
-        if (!hasClass(slide, CLASS_VISIBLE)) {
-          emit(EVENT_VISIBLE, this);
-        }
-      } else {
-        if (hasClass(slide, CLASS_VISIBLE)) {
-          emit(EVENT_HIDDEN, this);
-        }
+      if (visible !== hasClass(slide, CLASS_VISIBLE)) {
+        toggleClass(slide, CLASS_VISIBLE, visible);
+        emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this);
       }
     }
     /**

src/js/components/Slides/Slide.ts

@@ -169,18 +169,14 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    * @param active - Set `true` if the slide is active.
    */
   function updateActivity( this: SlideComponent, active: boolean ): void {
-    toggleClass( slide, CLASS_ACTIVE, active );
+    if ( active !== hasClass( slide, CLASS_ACTIVE ) ) {
+      toggleClass( slide, CLASS_ACTIVE, active );
 
-    if ( active ) {
-      if ( ! hasClass( slide, CLASS_ACTIVE ) ) {
-        isNavigation && setAttribute( slide, ARIA_CURRENT, true );
-        emit( EVENT_ACTIVE, this );
-      }
-    } else {
-      if ( hasClass( slide, CLASS_ACTIVE ) ) {
-        removeAttribute( slide, ARIA_CURRENT );
-        emit( EVENT_INACTIVE, this );
+      if ( isNavigation ) {
+        setAttribute( slide, ARIA_CURRENT, active || null );
       }
+
+      emit( active ? EVENT_ACTIVE : EVENT_INACTIVE, this );
     }
   }
 
@@ -190,21 +186,16 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    * @param visible - Set `true` if the slide is visible.
    */
   function updateVisibility( this: SlideComponent, visible: boolean ): void {
-    toggleClass( slide, CLASS_VISIBLE, visible );
     setAttribute( slide, ARIA_HIDDEN, ! visible || null );
     setAttribute( slide, TAB_INDEX, visible && options.slideFocus ? 0 : null );
 
-    if ( visible ) {
-      if ( ! hasClass( slide, CLASS_VISIBLE ) ) {
-        emit( EVENT_VISIBLE, this );
-      }
-    } else {
-      if ( hasClass( slide, CLASS_VISIBLE ) ) {
-        emit( EVENT_HIDDEN, this );
-      }
+    if ( visible !== hasClass( slide, CLASS_VISIBLE ) ) {
+      toggleClass( slide, CLASS_VISIBLE, visible );
+      emit( visible ? EVENT_VISIBLE : EVENT_HIDDEN, this );
     }
   }
 
+
   /**
    * Adds a CSS rule to the slider or the container.
    *

src/js/components/Slides/test/slide.test.ts

@@ -1,7 +1,14 @@
 import { CLASS_ACTIVE, CLASS_NEXT, CLASS_PREV, CLASS_VISIBLE } from '../../../constants/classes';
-import { EVENT_CLICK, EVENT_SLIDE_KEYDOWN } from '../../../constants/events';
+import {
+  EVENT_ACTIVE,
+  EVENT_CLICK, EVENT_HIDDEN,
+  EVENT_INACTIVE,
+  EVENT_SLIDE_KEYDOWN,
+  EVENT_VISIBLE,
+} from '../../../constants/events';
 import { fire, init, keydown } from '../../../test';
 import { format } from '../../../utils/string';
+import { SlideComponent } from '../Slide';
 
 
 describe( 'Slide', () => {
@@ -27,6 +34,43 @@ describe( 'Slide', () => {
     expect( Slide1.slide.classList.contains( CLASS_ACTIVE ) ).toBe( true );
   } );
 
+  test( 'can emit an event when the slide becomes active.', () => {
+    const splide = init( { speed: 0 } );
+    const { Slides } = splide.Components;
+    const Slide1    = Slides.getAt( 1 );
+    const Slide2    = Slides.getAt( 2 );
+    const callback  = jest.fn();
+
+    splide.on( EVENT_ACTIVE, callback );
+
+    splide.go( 1 );
+    expect( callback ).toHaveBeenCalledWith( Slide1 );
+
+    splide.go( 2 );
+    expect( callback ).toHaveBeenCalledWith( Slide2 );
+  } );
+
+  test( 'can emit an event when the slide becomes inactive.', () => {
+    const splide = init( { speed: 0 } );
+    const { Slides } = splide.Components;
+    const Slide0    = Slides.getAt( 0 );
+    const Slide1    = Slides.getAt( 1 );
+    const Slide2    = Slides.getAt( 2 );
+    const callback  = jest.fn();
+
+    splide.on( EVENT_INACTIVE, callback );
+    splide.on( EVENT_INACTIVE, callback );
+
+    splide.go( 1 );
+    expect( callback ).toHaveBeenCalledWith( Slide0 );
+
+    splide.go( 2 );
+    expect( callback ).toHaveBeenCalledWith( Slide1 );
+
+    splide.go( 1 );
+    expect( callback ).toHaveBeenCalledWith( Slide2 );
+  } );
+
   test( 'can toggle the `is-visible` class and the aria-hidden attribute.', () => {
     const splide = init( { speed: 0, perPage: 2 } );
     const { Slides } = splide.Components;
@@ -54,6 +98,52 @@ describe( 'Slide', () => {
     expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBeNull();
   } );
 
+  test( 'can emit an event when the slide becomes visible.', () => {
+    const splide = init( { speed: 0, perPage: 2 } );
+    const { Slides } = splide.Components;
+    const Slide0        = Slides.getAt( 0 );
+    const Slide1        = Slides.getAt( 1 );
+    const Slide2        = Slides.getAt( 2 );
+    const Slide3        = Slides.getAt( 3 );
+    const callback      = jest.fn();
+    const visibleSlides = [] as SlideComponent[];
+
+    splide.on( EVENT_VISIBLE, Slide => {
+      callback();
+      visibleSlides.push( Slide );
+    } );
+
+    splide.go( '>' );
+    expect( visibleSlides ).toEqual( [ Slide2, Slide3 ] );
+    visibleSlides.length = 0;
+
+    splide.go( '<' );
+    expect( visibleSlides ).toEqual( [ Slide0, Slide1 ] );
+  } );
+
+  test( 'can emit an event when the slide gets hidden.', () => {
+    const splide = init( { speed: 0, perPage: 2 } );
+    const { Slides } = splide.Components;
+    const Slide0       = Slides.getAt( 0 );
+    const Slide1       = Slides.getAt( 1 );
+    const Slide2       = Slides.getAt( 2 );
+    const Slide3       = Slides.getAt( 3 );
+    const callback     = jest.fn();
+    const hiddenSlides = [] as SlideComponent[];
+
+    splide.on( EVENT_HIDDEN, Slide => {
+      callback();
+      hiddenSlides.push( Slide );
+    } );
+
+    splide.go( '>' );
+    expect( hiddenSlides ).toEqual( [ Slide0, Slide1 ] );
+    hiddenSlides.length = 0;
+
+    splide.go( '<' );
+    expect( hiddenSlides ).toEqual( [ Slide2, Slide3 ] );
+  } );
+
   test( 'can toggle the `is-prev` and `is-next` classes.', () => {
     const splide = init( { type: 'loop', speed: 0 } );
     const { Slides } = splide.Components;

src/js/test/php/examples/events.php

@@ -38,6 +38,10 @@ $settings = get_settings();
         console.log( 'pagination:updated', data );
       } );
 
+      splide01.on( 'active', function( Slide ) {
+        console.log( 'active', Slide.index );
+      } );
+
       var splide02 = new Splide( '#splide02', {
         width       : 800,
         fixedWidth  : 100,