Refactoring.

dist/js/splide.js

@@ -1387,7 +1387,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function getGap() {
       var Slide = getAt(0);
-      return Slide ? parseFloat(style(Slide.slide, resolve("marginRight"))) || 0 : 0;
+      return Slide && parseFloat(style(Slide.slide, resolve("marginRight"))) || 0;
     }
 
     function getPadding(right) {
@@ -1793,8 +1793,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         i18n = options.i18n;
     var Elements = Components2.Elements,
         Controller = Components2.Controller;
-    var slider = Elements.slider,
-        track = Elements.track;
     var wrapper = Elements.arrows;
     var prev = Elements.prev;
     var next = Elements.next;
@@ -1815,8 +1813,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
       if (prev && next) {
         if (!arrows.prev) {
-          setAttribute(prev, ARIA_CONTROLS, track.id);
-          setAttribute(next, ARIA_CONTROLS, track.id);
+          var id = Elements.track.id;
+          setAttribute(prev, ARIA_CONTROLS, id);
+          setAttribute(next, ARIA_CONTROLS, id);
           arrows.prev = prev;
           arrows.next = next;
           listen();
@@ -1848,13 +1847,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function createArrows() {
-      var parent = options.arrows === "slider" && slider ? slider : Splide2.root;
       wrapper = create("div", classes.arrows);
       prev = createArrow(true);
       next = createArrow(false);
       created = true;
       append(wrapper, [prev, next]);
-      before(wrapper, child(parent));
+      before(wrapper, child(options.arrows === "slider" && Elements.slider || Splide2.root));
     }
 
     function createArrow(prev2) {
@@ -1888,12 +1886,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         bind = _EventInterface9.bind,
         emit = _EventInterface9.emit;
 
-    var _Components2$Elements4 = Components2.Elements,
-        root = _Components2$Elements4.root,
-        track = _Components2$Elements4.track,
-        bar = _Components2$Elements4.bar,
-        playButton = _Components2$Elements4.play,
-        pauseButton = _Components2$Elements4.pause;
+    var Elements = Components2.Elements;
     var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), update);
     var isPaused = interval.isPaused;
     var hovered;
@@ -1915,20 +1908,23 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function initButton(forPause) {
-      var button = forPause ? pauseButton : playButton;
+      var prop = forPause ? "pause" : "play";
+      var button = Elements[prop];
 
       if (button) {
         if (!isHTMLButtonElement(button)) {
           setAttribute(button, ROLE, "button");
         }
 
-        setAttribute(button, ARIA_CONTROLS, track.id);
-        setAttribute(button, ARIA_LABEL, options.i18n[forPause ? "pause" : "play"]);
+        setAttribute(button, ARIA_CONTROLS, Elements.track.id);
+        setAttribute(button, ARIA_LABEL, options.i18n[prop]);
         bind(button, "click", forPause ? pause : play);
       }
     }
 
     function listen() {
+      var root = Elements.root;
+
       if (options.pauseOnHover) {
         bind(root, "mouseenter mouseleave", function (e) {
           hovered = e.type === "mouseenter";
@@ -1979,13 +1975,15 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function update(rate) {
-      emit(EVENT_AUTOPLAY_PLAYING, rate);
+      var bar = Elements.bar;
 
       if (bar) {
         style(bar, {
           width: rate * 100 + "%"
         });
       }
+
+      emit(EVENT_AUTOPLAY_PLAYING, rate);
     }
 
     return {
@@ -2500,7 +2498,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         bind = _EventInterface15.bind,
         unbind = _EventInterface15.unbind;
 
-    var Slides = Components2.Slides;
+    var Slides = Components2.Slides,
+        Elements = Components2.Elements;
     var _Components2$Controll = Components2.Controller,
         go = _Components2$Controll.go,
         toPage = _Components2$Controll.toPage,
@@ -2544,10 +2543,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var classes = options.classes,
           i18n = options.i18n,
           perPage = options.perPage;
-      var _Components2$Elements5 = Components2.Elements,
-          slider = _Components2$Elements5.slider,
-          root = _Components2$Elements5.root;
-      var parent = options.pagination === "slider" && slider ? slider : root;
+      var parent = options.pagination === "slider" && Elements.slider || Elements.root;
       var max = hasFocus() ? length : ceil(length / perPage);
       list = create("ul", classes.pagination, parent);
 

src/js/components/Arrows/Arrows.ts

@@ -39,7 +39,6 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
   const { on, bind, emit } = EventInterface( Splide );
   const { classes, i18n } = options;
   const { Elements, Controller } = Components;
-  const { slider, track } = Elements;
 
   /**
    * The wrapper element.
@@ -86,8 +85,10 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
 
     if ( prev && next ) {
       if ( ! arrows.prev ) {
-        setAttribute( prev, ARIA_CONTROLS, track.id );
-        setAttribute( next, ARIA_CONTROLS, track.id );
+        const { id } = Elements.track;
+
+        setAttribute( prev, ARIA_CONTROLS, id );
+        setAttribute( next, ARIA_CONTROLS, id );
 
         arrows.prev = prev;
         arrows.next = next;
@@ -127,15 +128,13 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
    * Create arrows and append them to the slider.
    */
   function createArrows(): void {
-    const parent = options.arrows === 'slider' && slider ? slider : Splide.root;
-
     wrapper = create( 'div', classes.arrows );
     prev    = createArrow( true );
     next    = createArrow( false );
     created = true;
 
     append( wrapper, [ prev, next ] );
-    before( wrapper, child( parent ) );
+    before( wrapper, child( options.arrows === 'slider' && Elements.slider || Splide.root ) );
   }
 
   /**

src/js/components/Autoplay/Autoplay.ts

@@ -37,7 +37,7 @@ export interface AutoplayComponent extends BaseComponent {
  */
 export function Autoplay( Splide: Splide, Components: Components, options: Options ): AutoplayComponent {
   const { on, bind, emit } = EventInterface( Splide );
-  const { root, track, bar, play: playButton, pause: pauseButton } = Components.Elements;
+  const { Elements } = Components;
   const interval = RequestInterval( options.interval, Splide.go.bind( Splide, '>' ), update );
   const { isPaused } = interval;
 
@@ -79,15 +79,16 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
    * @param forPause - Determines whether to initialize a pause or play button.
    */
   function initButton( forPause: boolean ): void {
-    const button = forPause ? pauseButton : playButton;
+    const prop   = forPause ? 'pause' : 'play';
+    const button = Elements[ prop ];
 
     if ( button ) {
       if ( ! isHTMLButtonElement( button ) ) {
         setAttribute( button, ROLE, 'button' );
       }
 
-      setAttribute( button, ARIA_CONTROLS, track.id );
-      setAttribute( button, ARIA_LABEL, options.i18n[ forPause ? 'pause' : 'play' ] );
+      setAttribute( button, ARIA_CONTROLS, Elements.track.id );
+      setAttribute( button, ARIA_LABEL, options.i18n[ prop ] );
 
       bind( button, 'click', forPause ? pause : play );
     }
@@ -97,6 +98,8 @@ 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';
@@ -160,11 +163,13 @@ export function Autoplay( Splide: Splide, Components: Components, options: Optio
    * @param rate - The progress rate between 0 to 1.
    */
   function update( rate: number ): void {
-    emit( EVENT_AUTOPLAY_PLAYING, rate );
+    const { bar } = Elements;
 
     if ( bar ) {
       style( bar, { width: `${ rate * 100 }%` } );
     }
+
+    emit( EVENT_AUTOPLAY_PLAYING, rate );
   }
 
   return {

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

@@ -1,4 +1,4 @@
-import { EVENT_DRAG } from '../../../constants/events';
+import { EVENT_DRAG, EVENT_DRAGGING } from '../../../constants/events';
 import { fire, init } from '../../../test';
 import { assign } from '../../../utils';
 
@@ -73,21 +73,22 @@ describe( 'Drag', () => {
     expect( onDrag ).toHaveBeenCalledTimes( 1 );
   } );
 
-  test( 'should start moving the slider only when the swipe distance becomes greater than the threshold.', () => {
-    const splide = init( { dragMinThreshold: 20 } );
-    const onDrag = jest.fn();
-    const track  = splide.Components.Elements.track;
+  test( 'should start moving the slider only when the drag distance becomes greater than the threshold.', () => {
+    const splide     = init( { dragMinThreshold: 20 } );
+    const onDragging = jest.fn();
+    const track      = splide.Components.Elements.track;
 
-    splide.on( EVENT_DRAG, onDrag );
+    splide.on( EVENT_DRAGGING, onDragging );
 
     fireWithCoord( track, 'touchstart', { x: 0 } );
     fireWithCoord( track, 'touchmove', { x: -10 } );
 
-    expect( onDrag ).not.toHaveBeenCalled();
+    expect( onDragging ).not.toHaveBeenCalled();
 
-    fireWithCoord( track, 'touchmove', { x: -30 } );
+    fireWithCoord( track, 'touchmove', { x: -30 } ); // isDragging becomes true
+    fireWithCoord( track, 'touchmove', { x: -31 } );
 
-    expect( onDrag ).toHaveBeenCalled();
+    expect( onDragging ).toHaveBeenCalled();
   } );
 } );
 

src/js/components/Layout/Layout.ts

@@ -226,7 +226,7 @@ export function Layout( Splide: Splide, Components: Components, options: Options
    */
   function getGap(): number {
     const Slide = getAt( 0 );
-    return Slide ? parseFloat( style( Slide.slide, resolve( 'marginRight' ) ) ) || 0 : 0;
+    return Slide && parseFloat( style( Slide.slide, resolve( 'marginRight' ) ) ) || 0;
   }
 
   /**

src/js/components/Pagination/Pagination.ts

@@ -48,7 +48,7 @@ export interface PaginationItem {
  */
 export function Pagination( Splide: Splide, Components: Components, options: Options ): PaginationComponent {
   const { on, emit, bind, unbind } = EventInterface( Splide );
-  const { Slides } = Components;
+  const { Slides, Elements } = Components;
   const { go, toPage, hasFocus, getIndex } = Components.Controller;
 
   /**
@@ -101,8 +101,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
   function createPagination(): void {
     const { length } = Splide;
     const { classes, i18n, perPage } = options;
-    const { slider, root } = Components.Elements;
-    const parent = options.pagination === 'slider' && slider ? slider : root;
+    const parent = options.pagination === 'slider' && Elements.slider || Elements.root;
     const max    = hasFocus() ? length : ceil( length / perPage );
 
     list = create( 'ul', classes.pagination, parent );

src/js/test/php/examples/default.php

@@ -19,13 +19,11 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
+        type   : 'loop',
         perPage: 1,
         gap    : '1rem',
         drag   : 'free',
         height : 200,
-        pagination: false,
-        arrows: false,
-        slideFocus: false,
       } );
 
       splide.on( 'moved', () => {
@@ -37,13 +35,6 @@ $settings = get_settings();
       } );
 
       splide.mount();
-
-
-      const pre = document.getElementById( 'message' );
-
-      console.log = ( string ) => {
-        pre.textContent = string + '\n' + pre.textContent;
-      }
     } );
   </script>
 
@@ -54,10 +45,8 @@ $settings = get_settings();
   </style>
 </head>
 <body>
-45
-<?php render( 'splide01', 10, true ); ?>
 
-<pre id="message"></pre>
+<?php render( 'splide01', 10 ); ?>
 
 </body>
 </html>