Add modifier classes to track, arrows, and pagination elements.

dist/js/splide.js

@@ -761,14 +761,15 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var i18n = options.i18n;
     var elements = {};
     var slides = [];
-    var classes;
+    var rootClasses = [];
+    var trackClasses = [];
     var track;
     var list;
 
     function setup() {
       collect();
       init();
-      addClass(root, classes = getClasses());
+      update();
     }
 
     function mount() {
@@ -779,13 +780,18 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function destroy() {
       empty(slides);
-      removeClass(root, classes);
+      removeClass(root, rootClasses);
+      removeClass(track, trackClasses);
       removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
     }
 
     function update() {
-      removeClass(root, classes);
-      addClass(root, classes = getClasses());
+      removeClass(root, rootClasses);
+      removeClass(track, trackClasses);
+      rootClasses = getClasses(CLASS_ROOT);
+      trackClasses = getClasses(CLASS_TRACK);
+      addClass(root, rootClasses);
+      addClass(track, trackClasses);
     }
 
     function collect() {
@@ -828,8 +834,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       return elm && closest(elm, "." + CLASS_ROOT) === root ? elm : null;
     }
 
-    function getClasses() {
-      return [CLASS_ROOT + "--" + options.type, CLASS_ROOT + "--" + options.direction, options.drag && CLASS_ROOT + "--draggable", options.isNavigation && CLASS_ROOT + "--nav", CLASS_ACTIVE];
+    function getClasses(base) {
+      return [base + "--" + options.type, base + "--" + options.direction, options.drag && base + "--draggable", options.isNavigation && base + "--nav", base === CLASS_ROOT && CLASS_ACTIVE];
     }
 
     return assign(elements, {
@@ -1730,6 +1736,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var Elements = Components2.Elements,
         Controller = Components2.Controller;
     var userArrows = Elements.arrows;
+    var wrapperClasses = CLASS_ARROWS + "--" + options.direction;
     var wrapper = userArrows;
     var prev = Elements.prev;
     var next = Elements.next;
@@ -1759,6 +1766,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           next: next
         });
         display(wrapper, enabled ? "" : "none");
+        addClass(wrapper, wrapperClasses);
 
         if (enabled) {
           listen();
@@ -1771,6 +1779,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function destroy() {
       destroyEvents();
+      removeClass(wrapper, wrapperClasses);
 
       if (created) {
         remove(userArrows ? [prev, next] : wrapper);
@@ -2492,6 +2501,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         getIndex = Controller.getIndex,
         go = Controller.go;
     var resolve = Components2.Direction.resolve;
+    var paginationClasses = CLASS_PAGINATION + "--" + options.direction;
     var items = [];
     var pagination;
 
@@ -2514,6 +2524,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       if (pagination) {
         destroyEvents();
         remove(Elements.pagination ? slice(pagination.children) : pagination);
+        removeClass(pagination, paginationClasses);
         empty(items);
         pagination = null;
       }
@@ -2526,6 +2537,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           perPage = options.perPage;
       var max = hasFocus() ? length : ceil(length / perPage);
       pagination = Elements.pagination || create("ul", classes.pagination, Elements.root);
+      addClass(pagination, paginationClasses);
       setAttribute(pagination, ROLE, "tablist");
       setAttribute(pagination, ARIA_LABEL, i18n.select);
       setAttribute(pagination, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");

src/css/core/object/modifiers/draggable.scss

@@ -1,11 +1,8 @@
 .splide {
   $root: &;
 
-  &--draggable {
-    > #{ $root }__slider > #{ $root }__track,
-    > #{ $root }__track {
-      -webkit-touch-callout: none;
-      user-select: none;
-    }
+  &__track--draggable {
+    -webkit-touch-callout: none;
+    user-select: none;
   }
 }

src/css/core/object/modifiers/fade.scss

@@ -1,24 +1,21 @@
 .splide {
   $root: &;
 
-  &--fade {
-    > #{ $root }__slider > #{ $root }__track,
-    > #{ $root }__track {
-      > #{ $root }__list {
-        display: block;
+  &__track--fade {
+    > #{ $root }__list {
+      display: block;
 
-        > #{ $root }__slide {
-          left: 0;
-          opacity: 0;
-          position: absolute;
-          top: 0;
-          z-index: 0;
+      > #{ $root }__slide {
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        z-index: 0;
 
-          &.is-active {
-            opacity: 1;
-            position: relative;
-            z-index: 1;
-          }
+        &.is-active {
+          opacity: 1;
+          position: relative;
+          z-index: 1;
         }
       }
     }

src/css/core/object/modifiers/ttb.scss

@@ -1,14 +1,9 @@
 .splide {
   $root: &;
 
-  &--ttb {
-    &.is-active {
-      > #{ $root }__slider > #{ $root }__track,
-      > #{ $root }__track {
-        > #{ $root }__list {
-          display: block;
-        }
-      }
+  &__track--ttb {
+    > #{ $root }__list {
+      display: block;
     }
   }
 }

src/css/template/default/object/modifiers/nav.scss

@@ -10,37 +10,34 @@ $opacity-active: false !default;
 .splide {
   $root: &;
 
-  &--nav {
-    > #{ $root }__slider > #{ $root }__track,
-    > #{ $root }__track {
-      > #{ $root }__list {
-        > #{ $root }__slide {
-          border: $border;
-          cursor: pointer;
-
-          @if $opacity {
-            opacity: $opacity;
-          }
+  &__track--nav {
+    > #{ $root }__list {
+      > #{ $root }__slide {
+        border: $border;
+        cursor: pointer;
+
+        @if $opacity {
+          opacity: $opacity;
+        }
 
-          @if $border-radius {
-            border-radius: $border-radius;
-          }
+        @if $border-radius {
+          border-radius: $border-radius;
+        }
 
-          &.is-active {
-            border: $border-active;
+        &.is-active {
+          border: $border-active;
 
-            @if $opacity {
-              opacity: $opacity-active;
-            }
+          @if $opacity {
+            opacity: $opacity-active;
           }
+        }
 
-          &:focus {
-            outline: none;
-          }
+        &:focus {
+          outline: none;
+        }
 
-          &:focus-visible {
-            @include mixins.focus-outline-slide;
-          }
+        &:focus-visible {
+          @include mixins.focus-outline-slide;
         }
       }
     }

src/css/template/default/object/modifiers/rtl.scss

@@ -4,27 +4,23 @@ $arrow-left: 1em !default;
 .splide {
   $root: &;
 
-  &--rtl {
-    > #{ $root }__slider > #{ $root }__track > #{ $root }__arrows,
-    > #{ $root }__track > #{ $root }__arrows,
-    > #{ $root }__arrows {
-      #{ $root }__arrow {
-        &--prev {
-          left: auto;
-          right: $arrow-right;
+  &__arrows--rtl {
+    #{ $root }__arrow {
+      &--prev {
+        left: auto;
+        right: $arrow-right;
 
-          svg {
-            transform: scaleX( 1 );
-          }
+        svg {
+          transform: scaleX( 1 );
         }
+      }
 
-        &--next {
-          left: $arrow-left;
-          right: auto;
+      &--next {
+        left: $arrow-left;
+        right: auto;
 
-          svg {
-            transform: scaleX( -1 );
-          }
+        svg {
+          transform: scaleX( -1 );
         }
       }
     }

src/css/template/default/object/modifiers/ttb.scss

@@ -8,51 +8,46 @@ $pagination-dot-height: false !default;
 .splide {
   $root: &;
 
-  &--ttb {
-    > #{ $root }__slider > #{ $root }__track > #{ $root }__arrows,
-    > #{ $root }__track > #{ $root }__arrows,
-    > #{ $root }__arrows {
-      #{ $root }__arrow {
-        left: 50%;
-        transform: translate( -50%, 0 );
-
-        &--prev {
-          top: $arrow-top;
-
-          svg {
-            transform: rotateZ( -90deg );
-          }
+  &__arrows--ttb {
+    #{ $root }__arrow {
+      left: 50%;
+      transform: translate( -50%, 0 );
+
+      &--prev {
+        top: $arrow-top;
+
+        svg {
+          transform: rotateZ( -90deg );
         }
+      }
 
-        &--next {
-          bottom: $arrow-bottom;
-          top: auto;
+      &--next {
+        bottom: $arrow-bottom;
+        top: auto;
 
-          svg {
-            transform: rotateZ( 90deg );
-          }
+        svg {
+          transform: rotateZ( 90deg );
         }
       }
     }
+  }
 
-    > #{ $root }__pagination,
-    > #{ $root }__slider > #{ $root }__pagination {
-      bottom: 0;
-      display: flex;
-      flex-direction: column;
-      left: $pagination-left;
-      padding: 1em 0;
-      right: $pagination-right;
-      top: 0;
-
-      #{ $root }__pagination__page {
-        @if $pagination-dot-width {
-          width: $pagination-dot-width;
-        }
+  &__pagination--ttb {
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    left: $pagination-left;
+    padding: 1em 0;
+    right: $pagination-right;
+    top: 0;
+
+    #{ $root }__pagination__page {
+      @if $pagination-dot-width {
+        width: $pagination-dot-width;
+      }
 
-        @if $pagination-dot-height {
-          height: $pagination-dot-height;
-        }
+      @if $pagination-dot-height {
+        height: $pagination-dot-height;
       }
     }
   }

src/js/components/Arrows/Arrows.ts

@@ -1,4 +1,5 @@
 import { ALL_ATTRIBUTES, ARIA_CONTROLS, ARIA_LABEL } from '../../constants/attributes';
+import { CLASS_ARROWS } from '../../constants/classes';
 import {
   EVENT_ARROWS_MOUNTED,
   EVENT_ARROWS_UPDATED,
@@ -11,6 +12,7 @@ import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
 import {
+  addClass,
   append,
   apply,
   assign,
@@ -20,6 +22,7 @@ import {
   parseHtml,
   remove,
   removeAttribute,
+  removeClass,
   setAttribute,
 } from '../../utils';
 import { PATH, SIZE, XML_NAME_SPACE } from './path';
@@ -49,7 +52,8 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
   const { on, bind, emit, destroy: destroyEvents } = EventInterface( Splide );
   const { classes, i18n } = options;
   const { Elements, Controller } = Components;
-  const userArrows = Elements.arrows;
+  const userArrows     = Elements.arrows;
+  const wrapperClasses = `${ CLASS_ARROWS }--${ options.direction }`;
 
   /**
    * The wrapper element.
@@ -105,6 +109,7 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
     if ( prev && next ) {
       assign( arrows, { prev, next } );
       display( wrapper, enabled ? '' : 'none' );
+      addClass( wrapper, wrapperClasses );
 
       if ( enabled ) {
         listen();
@@ -120,6 +125,7 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
    */
   function destroy(): void {
     destroyEvents();
+    removeClass( wrapper, wrapperClasses );
 
     if ( created ) {
       remove( userArrows ? [ prev, next ] : wrapper );

src/js/components/Elements/Elements.ts

@@ -91,7 +91,12 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
   /**
    * Stores all root classes.
    */
-  let classes: string[];
+  let rootClasses: string[] = [];
+
+  /**
+   * Stores all list classes.
+   */
+  let trackClasses: string[] = [];
 
   /**
    * The track element.
@@ -109,7 +114,7 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
   function setup(): void {
     collect();
     init();
-    addClass( root, ( classes = getClasses() ) );
+    update();
   }
 
   /**
@@ -126,7 +131,8 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
    */
   function destroy(): void {
     empty( slides );
-    removeClass( root, classes );
+    removeClass( root, rootClasses );
+    removeClass( track, trackClasses );
     removeAttribute( [ root, track, list ], ALL_ATTRIBUTES.concat( 'style' ) );
   }
 
@@ -134,8 +140,14 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
    * Updates the status of elements.
    */
   function update(): void {
-    removeClass( root, classes );
-    addClass( root, ( classes = getClasses() ) );
+    removeClass( root, rootClasses );
+    removeClass( track, trackClasses );
+
+    rootClasses  = getClasses( CLASS_ROOT );
+    trackClasses = getClasses( CLASS_TRACK );
+
+    addClass( root, rootClasses );
+    addClass( track, trackClasses );
   }
 
   /**
@@ -189,17 +201,19 @@ export function Elements( Splide: Splide, Components: Components, options: Optio
   }
 
   /**
-   * Return an array with classes for the root element.
+   * Return an array with modifier classes.
+   *
+   * @param base - A base class name.
    *
    * @return An array with classes.
    */
-  function getClasses(): string[] {
+  function getClasses( base: string ): string[] {
     return [
-      `${ CLASS_ROOT }--${ options.type }`,
-      `${ CLASS_ROOT }--${ options.direction }`,
-      options.drag && `${ CLASS_ROOT }--draggable`,
-      options.isNavigation && `${ CLASS_ROOT }--nav`,
-      CLASS_ACTIVE,
+      `${ base }--${ options.type }`,
+      `${ base }--${ options.direction }`,
+      options.drag && `${ base }--draggable`,
+      options.isNavigation && `${ base }--nav`,
+      base === CLASS_ROOT && CLASS_ACTIVE,
     ];
   }
 

src/js/components/Pagination/Pagination.ts

@@ -6,7 +6,7 @@ import {
   ROLE,
   TAB_INDEX,
 } from '../../constants/attributes';
-import { CLASS_ACTIVE } from '../../constants/classes';
+import { CLASS_ACTIVE, CLASS_PAGINATION } from '../../constants/classes';
 import { TTB } from '../../constants/directions';
 import {
   EVENT_MOVE,
@@ -87,6 +87,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
   const { Slides, Elements, Controller } = Components;
   const { hasFocus, getIndex, go } = Controller;
   const { resolve } = Components.Direction;
+  const paginationClasses = `${ CLASS_PAGINATION }--${ options.direction }`;
 
   /**
    * Stores all pagination items.
@@ -121,6 +122,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
     if ( pagination ) {
       destroyEvents();
       remove( Elements.pagination ? slice( pagination.children ) : pagination );
+      removeClass( pagination, paginationClasses );
       empty( items );
       pagination = null;
     }
@@ -136,6 +138,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
 
     pagination = Elements.pagination || create( 'ul', classes.pagination, Elements.root );
 
+    addClass( pagination, paginationClasses );
     setAttribute( pagination, ROLE, 'tablist' );
     setAttribute( pagination, ARIA_LABEL, i18n.select );
     setAttribute( pagination, ARIA_ORIENTATION, options.direction === TTB ? 'vertical' : '' );

src/js/constants/classes.ts

@@ -2,7 +2,6 @@ import { PROJECT_CODE } from './project';
 
 
 export const CLASS_ROOT            = PROJECT_CODE;
-export const CLASS_SLIDER          = `${ PROJECT_CODE }__slider`;
 export const CLASS_TRACK           = `${ PROJECT_CODE }__track`;
 export const CLASS_LIST            = `${ PROJECT_CODE }__list`;
 export const CLASS_SLIDE           = `${ PROJECT_CODE }__slide`;