Quit supporting separated play/pause buttons, but support the 2-states toggle button.

dist/js/splide.js

@@ -692,6 +692,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + "roledescription";
   var ARIA_ATOMIC = ARIA_PREFIX + "atomic";
   var ARIA_LIVE = ARIA_PREFIX + "live";
+  var ARIA_PRESSED = ARIA_PREFIX + "pressed";
   var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION, ARIA_ATOMIC, ARIA_LIVE];
   var CLASS_ROOT = PROJECT_CODE;
   var CLASS_TRACK = PROJECT_CODE + "__track";
@@ -707,9 +708,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var CLASS_PAGINATION_PAGE = CLASS_PAGINATION + "__page";
   var CLASS_PROGRESS = PROJECT_CODE + "__progress";
   var CLASS_PROGRESS_BAR = CLASS_PROGRESS + "__bar";
-  var CLASS_AUTOPLAY = PROJECT_CODE + "__autoplay";
-  var CLASS_PLAY = PROJECT_CODE + "__play";
-  var CLASS_PAUSE = PROJECT_CODE + "__pause";
+  var CLASS_TOGGLE = PROJECT_CODE + "__toggle";
   var CLASS_SPINNER = PROJECT_CODE + "__spinner";
   var CLASS_SR = PROJECT_CODE + "__sr";
   var CLASS_INITIALIZED = "is-initialized";
@@ -798,12 +797,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       forOwn({
         arrows: CLASS_ARROWS,
         pagination: CLASS_PAGINATION,
-        autoplay: CLASS_AUTOPLAY,
         prev: CLASS_ARROW_PREV,
         next: CLASS_ARROW_NEXT,
         bar: CLASS_PROGRESS_BAR,
-        play: CLASS_PLAY,
-        pause: CLASS_PAUSE
+        toggle: CLASS_TOGGLE
       }, function (className, key) {
         elements[key] = find("." + className);
       });
@@ -827,7 +824,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function find(selector) {
       var elm = query(root, selector);
-      return elm && closest(elm, "." + CLASS_ROOT) === root ? elm : null;
+      return elm && closest(elm, "." + CLASS_ROOT) === root ? elm : void 0;
     }
 
     function getClasses(base) {
@@ -1850,37 +1847,27 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         bind = _EventInterface7.bind,
         emit = _EventInterface7.emit;
 
-    var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), update);
+    var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), onAnimationFrame);
     var isPaused = interval.isPaused;
-    var Elements = Components2.Elements;
+    var Elements = Components2.Elements,
+        _Components2$Elements4 = Components2.Elements,
+        root = _Components2$Elements4.root,
+        toggle = _Components2$Elements4.toggle;
     var autoplay = options.autoplay;
     var hovered;
     var focused;
-    var paused = autoplay === "pause";
+    var stopped = autoplay === "pause";
 
     function mount() {
       if (autoplay) {
-        initButton(true);
-        initButton(false);
         listen();
-        !paused && play();
-      }
-    }
-
-    function initButton(forPause) {
-      var prop = forPause ? "pause" : "play";
-      var button = Elements[prop];
-
-      if (button) {
-        setAttribute(button, ARIA_CONTROLS, Elements.track.id);
-        setAttribute(button, ARIA_LABEL, options.i18n[prop]);
-        bind(button, "click", forPause ? pause : play);
+        toggle && setAttribute(toggle, ARIA_CONTROLS, Elements.track.id);
+        stopped || play();
+        update();
       }
     }
 
     function listen() {
-      var root = Elements.root;
-
       if (options.pauseOnHover) {
         bind(root, "mouseenter mouseleave", function (e) {
           hovered = e.type === "mouseenter";
@@ -1895,49 +1882,61 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         });
       }
 
+      if (toggle) {
+        bind(toggle, "click", function () {
+          stopped ? play() : pause(true);
+        });
+      }
+
       on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);
-      on(EVENT_MOVE, updateInterval);
+      on(EVENT_MOVE, onMove);
     }
 
     function play() {
       if (isPaused() && Components2.Slides.isEnough()) {
         interval.start(!options.resetProgress);
-        focused = hovered = paused = false;
+        focused = hovered = stopped = false;
+        update();
         emit(EVENT_AUTOPLAY_PLAY);
       }
     }
 
-    function pause(manual) {
-      if (manual === void 0) {
-        manual = true;
+    function pause(stop) {
+      if (stop === void 0) {
+        stop = true;
       }
 
+      stopped = !!stop;
+      update();
+
       if (!isPaused()) {
         interval.pause();
         emit(EVENT_AUTOPLAY_PAUSE);
       }
-
-      paused = manual;
     }
 
     function autoToggle() {
-      if (!paused) {
-        if (!hovered && !focused) {
-          play();
-        } else {
-          pause(false);
-        }
+      if (!stopped) {
+        hovered || focused ? pause(false) : play();
+      }
+    }
+
+    function update() {
+      if (toggle) {
+        toggleClass(toggle, CLASS_ACTIVE, !stopped);
+        setAttribute(toggle, ARIA_PRESSED, !stopped);
+        setAttribute(toggle, ARIA_LABEL, options.i18n[stopped ? "play" : "pause"]);
       }
     }
 
-    function update(rate) {
+    function onAnimationFrame(rate) {
       var bar = Elements.bar;
       bar && style(bar, "width", rate * 100 + "%");
       emit(EVENT_AUTOPLAY_PLAYING, rate);
     }
 
-    function updateInterval() {
-      var Slide = Components2.Slides.getAt(Splide2.index);
+    function onMove(index) {
+      var Slide = Components2.Slides.getAt(index);
       interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);
     }
 

src/css/core/object/objects/index.scss

@@ -7,4 +7,5 @@
 @forward 'slider';
 @forward 'spinner' as spinner-*;
 @forward 'sr';
+@forward 'toggle';
 @forward 'track';

src/css/core/object/objects/toggle.scss

@@ -0,0 +1,22 @@
+.splide {
+  &__toggle {
+    $parent: &;
+
+    &__play {
+    }
+
+    &__pause {
+      display: none;
+    }
+
+    &.is-active {
+      #{ $parent }__play {
+        display: none;
+      }
+
+      #{ $parent }__pause {
+        display: inline;
+      }
+    }
+  }
+}

src/css/template/default/object/objects/index.scss

@@ -2,3 +2,4 @@
 @forward 'pagination' as pagination-*;
 @forward 'progress' as progress-*;
 @forward 'slide' as slide-*;
+@forward 'toggle' as toggle-*;

src/css/template/default/object/objects/toggle.scss

@@ -0,0 +1,11 @@
+@use '../../foundation/mixins';
+
+.splide {
+  &__toggle {
+    cursor: pointer;
+
+    &:focus-visible {
+      @include mixins.focus-outline;
+    }
+  }
+}

src/js/components/Autoplay/Autoplay.ts

@@ -1,4 +1,5 @@
-import { ARIA_CONTROLS, ARIA_LABEL } from '../../constants/attributes';
+import { ARIA_CONTROLS, ARIA_LABEL, ARIA_PRESSED } from '../../constants/attributes';
+import { CLASS_ACTIVE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY } from '../../constants/classes';
 import {
   EVENT_AUTOPLAY_PAUSE,
   EVENT_AUTOPLAY_PLAY,
@@ -10,7 +11,7 @@ import {
 import { EventInterface, RequestInterval } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { getAttribute, setAttribute, style } from '../../utils';
+import { display, getAttribute, query, setAttribute, style, toggleClass } from '../../utils';
 import { INTERVAL_DATA_ATTRIBUTE } from './constants';
 
 
@@ -38,9 +39,9 @@ export interface AutoplayComponent extends BaseComponent {
  */
 export function Autoplay( Splide: Splide, Components: Components, options: Options ): AutoplayComponent {
   const { on, bind, emit } = EventInterface( Splide );
-  const interval = RequestInterval( options.interval, Splide.go.bind( Splide, '>' ), update );
+  const interval = RequestInterval( options.interval, Splide.go.bind( Splide, '>' ), onAnimationFrame );
   const { isPaused } = interval;
-  const { Elements } = Components;
+  const { Elements, Elements: { root, toggle } } = Components;
   const { autoplay } = options;
 
   /**
@@ -54,35 +55,20 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
   let focused: boolean;
 
   /**
-   * Turns into `true` when autoplay is manually paused.
+   * Indicates whether the autoplay is stopped or not.
+   * If stopped, autoplay won't start automatically unless `play()` is explicitly called.
    */
-  let paused = autoplay === 'pause';
+  let stopped = autoplay === 'pause';
 
   /**
    * Called when the component is mounted.
    */
   function mount(): void {
     if ( autoplay ) {
-      initButton( true );
-      initButton( false );
       listen();
-      ! paused && play();
-    }
-  }
-
-  /**
-   * Initializes a play/pause button.
-   *
-   * @param forPause - Determines whether to initialize a pause or play button.
-   */
-  function initButton( forPause: boolean ): void {
-    const prop   = forPause ? 'pause' : 'play';
-    const button = Elements[ prop ];
-
-    if ( button ) {
-      setAttribute( button, ARIA_CONTROLS, Elements.track.id );
-      setAttribute( button, ARIA_LABEL, options.i18n[ prop ] );
-      bind( button, 'click', forPause ? pause : play );
+      toggle && setAttribute( toggle, ARIA_CONTROLS, Elements.track.id );
+      stopped || play();
+      update();
     }
   }
 
@@ -90,8 +76,6 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
    * Listens to some events.
    */
   function listen(): void {
-    const { root } = Elements;
-
     if ( options.pauseOnHover ) {
       bind( root, 'mouseenter mouseleave', e => {
         hovered = e.type === 'mouseenter';
@@ -106,8 +90,14 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
       } );
     }
 
+    if ( toggle ) {
+      bind( toggle, 'click', () => {
+        stopped ? play() : pause( true );
+      } );
+    }
+
     on( [ EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH ], interval.rewind );
-    on( EVENT_MOVE, updateInterval );
+    on( EVENT_MOVE, onMove );
   }
 
   /**
@@ -116,7 +106,8 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
   function play(): void {
     if ( isPaused() && Components.Slides.isEnough() ) {
       interval.start( ! options.resetProgress );
-      focused = hovered = paused = false;
+      focused = hovered = stopped = false;
+      update();
       emit( EVENT_AUTOPLAY_PLAY );
     }
   }
@@ -124,15 +115,16 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
   /**
    * Pauses autoplay.
    *
-   * @param manual - If `true`, autoplay keeps paused until `play()` is explicitly called.
+   * @param stop - If `true`, autoplay keeps paused until `play()` is explicitly called.
    */
-  function pause( manual = true ): void {
+  function pause( stop = true ): void {
+    stopped = !! stop;
+    update();
+
     if ( ! isPaused() ) {
       interval.pause();
       emit( EVENT_AUTOPLAY_PAUSE );
     }
-
-    paused = manual;
   }
 
   /**
@@ -140,12 +132,19 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
    * If autoplay is manually paused, this will do nothing.
    */
   function autoToggle(): void {
-    if ( ! paused ) {
-      if ( ! hovered && ! focused ) {
-        play();
-      } else {
-        pause( false );
-      }
+    if ( ! stopped ) {
+      hovered || focused ? pause( false ) : play();
+    }
+  }
+
+  /**
+   * Updates the toggle button status.
+   */
+  function update(): void {
+    if ( toggle ) {
+      toggleClass( toggle, CLASS_ACTIVE, ! stopped );
+      setAttribute( toggle, ARIA_PRESSED, ! stopped );
+      setAttribute( toggle, ARIA_LABEL, options.i18n[ stopped ? 'play' : 'pause' ] );
     }
   }
 
@@ -154,7 +153,7 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
    *
    * @param rate - The progress rate between 0 to 1.
    */
-  function update( rate: number ): void {
+  function onAnimationFrame( rate: number ): void {
     const { bar } = Elements;
     bar && style( bar, 'width', `${ rate * 100 }%` );
     emit( EVENT_AUTOPLAY_PLAYING, rate );
@@ -162,9 +161,11 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
 
   /**
    * Updates or restores the interval duration.
+   *
+   * @param index - An index to move to.
    */
-  function updateInterval(): void {
-    const Slide = Components.Slides.getAt( Splide.index );
+  function onMove( index: number ): void {
+    const Slide = Components.Slides.getAt( index );
     interval.set( Slide && +getAttribute( Slide.slide, INTERVAL_DATA_ATTRIBUTE ) || options.interval );
   }
 

src/js/components/Autoplay/test/button.test.ts

@@ -0,0 +1,69 @@
+import { CLASS_ACTIVE } from '../../../constants/classes';
+import { fire, init } from '../../../test';
+
+
+describe( 'Autoplay toggle button.', () => {
+  test( 'should be active if `autoplay` option is `true`.', () => {
+    const splide = init( { autoplay: true }, { autoplay: true } );
+    const { toggle } = splide.Components.Elements;
+
+    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( true );
+    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'true' );
+  } );
+
+  test( 'should be inactive if `autoplay` option is `false`.', () => {
+    const splide = init( { autoplay: 'pause' }, { autoplay: true } );
+    const { toggle } = splide.Components.Elements;
+
+    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
+    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'false' );
+  } );
+
+  test( 'can start/pause autoplay and update the button status.', () => {
+    const splide = init( { autoplay: true }, { autoplay: true } );
+    const { Autoplay } = splide.Components;
+    const { toggle } = splide.Components.Elements;
+
+    expect( Autoplay.isPaused() ).toBe( false );
+
+    fire( toggle, 'click' );
+    expect( Autoplay.isPaused() ).toBe( true );
+    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
+    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'false' );
+
+    fire( toggle, 'click' );
+    expect( Autoplay.isPaused() ).toBe( false );
+    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( true );
+    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'true' );
+
+    fire( toggle, 'click' );
+    expect( Autoplay.isPaused() ).toBe( true );
+    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
+    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'false' );
+  } );
+
+  test( 'should not be inactive("Play" button) when the autoplay is just paused.', () => {
+    const splide = init( { autoplay: true }, { autoplay: true } );
+    const { Autoplay } = splide.Components;
+    const { toggle } = splide.Components.Elements;
+
+    expect( Autoplay.isPaused() ).toBe( false );
+
+    fire( splide.Components.Elements.root, 'focusin' );
+    expect( Autoplay.isPaused() ).toBe( true ); // Paused but not stopped
+    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( true );
+    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'true' );
+
+    // Clicks the "pause" button, which stops the autoplay
+    fire( toggle, 'click' );
+    expect( Autoplay.isPaused() ).toBe( true );
+    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
+    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'false' );
+
+    // Resumes autoplay but it still stops
+    fire( splide.Components.Elements.root, 'focusout' );
+    expect( Autoplay.isPaused() ).toBe( true );
+    expect( toggle.classList.contains( CLASS_ACTIVE ) ).toBe( false );
+    expect( toggle.getAttribute( 'aria-pressed' ) ).toBe( 'false' );
+  } );
+} );

src/js/components/Elements/Elements.ts

@@ -4,15 +4,13 @@ import {
   CLASS_ARROW_NEXT,
   CLASS_ARROW_PREV,
   CLASS_ARROWS,
-  CLASS_AUTOPLAY,
   CLASS_CLONE,
   CLASS_LIST,
   CLASS_PAGINATION,
-  CLASS_PAUSE,
-  CLASS_PLAY,
   CLASS_PROGRESS_BAR,
   CLASS_ROOT,
   CLASS_SLIDE,
+  CLASS_TOGGLE,
   CLASS_TRACK,
 } from '../../constants/classes';
 import { EVENT_REFRESH, EVENT_UPDATED } from '../../constants/events';
@@ -48,14 +46,12 @@ export interface ElementCollection {
   track: HTMLElement;
   list: HTMLElement;
   slides: HTMLElement[];
-  arrows: HTMLElement | null;
-  pagination: HTMLUListElement | null;
-  prev: HTMLButtonElement | null;
-  next: HTMLButtonElement | null;
-  bar: HTMLElement | null;
-  autoplay: HTMLElement | null;
-  play: HTMLButtonElement | null;
-  pause: HTMLButtonElement | null;
+  arrows?: HTMLElement;
+  pagination?: HTMLUListElement;
+  prev?: HTMLButtonElement;
+  next?: HTMLButtonElement;
+  bar?: HTMLElement;
+  toggle?: HTMLElement;
 }
 
 /**
@@ -163,12 +159,10 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
     forOwn( {
       arrows    : CLASS_ARROWS,
       pagination: CLASS_PAGINATION,
-      autoplay  : CLASS_AUTOPLAY,
       prev      : CLASS_ARROW_PREV,
       next      : CLASS_ARROW_NEXT,
       bar       : CLASS_PROGRESS_BAR,
-      play      : CLASS_PLAY,
-      pause     : CLASS_PAUSE,
+      toggle    : CLASS_TOGGLE,
     }, ( className, key ) => {
       elements[ key ] = find( `.${ className }` );
     } );
@@ -195,9 +189,9 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
    *
    * @return A found element or null.
    */
-  function find( selector: string ): HTMLElement | null {
+  function find( selector: string ): HTMLElement | undefined {
     const elm = query<HTMLElement>( root, selector );
-    return elm && closest( elm, `.${ CLASS_ROOT }` ) === root ? elm : null;
+    return elm && closest( elm, `.${ CLASS_ROOT }` ) === root ? elm : undefined;
   }
 
   /**

src/js/components/Elements/test/general.test.ts

@@ -3,10 +3,8 @@ import {
   CLASS_ARROW_NEXT,
   CLASS_ARROW_PREV,
   CLASS_LIST,
-  CLASS_PAUSE,
-  CLASS_PLAY,
   CLASS_PROGRESS_BAR,
-  CLASS_ROOT,
+  CLASS_ROOT, CLASS_TOGGLE,
   CLASS_TRACK,
 } from '../../../constants/classes';
 import { RTL } from '../../../constants/directions';
@@ -25,8 +23,7 @@ describe( 'Elements', () => {
     expect( Elements.prev.classList.contains( CLASS_ARROW_PREV ) ).toBe( true );
     expect( Elements.next.classList.contains( CLASS_ARROW_NEXT ) ).toBe( true );
     expect( Elements.bar.classList.contains( CLASS_PROGRESS_BAR ) ).toBe( true );
-    expect( Elements.play.classList.contains( CLASS_PLAY ) ).toBe( true );
-    expect( Elements.pause.classList.contains( CLASS_PAUSE ) ).toBe( true );
+    expect( Elements.toggle.classList.contains( CLASS_TOGGLE ) ).toBe( true );
   } );
 
   test( 'can assign unique IDs to root, track and list elements.', () => {

src/js/constants/attributes.ts

@@ -12,6 +12,7 @@ export const ARIA_ORIENTATION     = `${ ARIA_PREFIX }orientation`;
 export const ARIA_ROLEDESCRIPTION = `${ ARIA_PREFIX }roledescription`;
 export const ARIA_ATOMIC          = `${ ARIA_PREFIX }atomic`;
 export const ARIA_LIVE            = `${ ARIA_PREFIX }live`;
+export const ARIA_PRESSED         = `${ ARIA_PREFIX }pressed`;
 
 /**
  * The array with all attributes.

src/js/constants/classes.ts

@@ -15,9 +15,9 @@ export const CLASS_PAGINATION      = `${ PROJECT_CODE }__pagination`;
 export const CLASS_PAGINATION_PAGE = `${ CLASS_PAGINATION }__page`;
 export const CLASS_PROGRESS        = `${ PROJECT_CODE }__progress`;
 export const CLASS_PROGRESS_BAR    = `${ CLASS_PROGRESS }__bar`;
-export const CLASS_AUTOPLAY        = `${ PROJECT_CODE }__autoplay`;
-export const CLASS_PLAY            = `${ PROJECT_CODE }__play`;
-export const CLASS_PAUSE           = `${ PROJECT_CODE }__pause`;
+export const CLASS_TOGGLE          = `${ PROJECT_CODE }__toggle`;
+export const CLASS_TOGGLE_PLAY     = `${ CLASS_TOGGLE }__play`;
+export const CLASS_TOGGLE_PAUSE    = `${ CLASS_TOGGLE }__pause`;
 export const CLASS_SPINNER         = `${ PROJECT_CODE }__spinner`;
 export const CLASS_SR              = `${ PROJECT_CODE }__sr`;
 export const CLASS_INITIALIZED     = 'is-initialized';