Hides the placeholder for pagination when it's disabled through options (#866). Use "placeholder" for consistency of terminology.

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 4.0.8
+ * Version  : 4.0.9
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1763,9 +1763,9 @@ function Arrows(Splide2, Components2, options) {
       i18n = options.i18n;
   var Elements = Components2.Elements,
       Controller = Components2.Controller;
-  var userArrows = Elements.arrows,
+  var placeholder = Elements.arrows,
       track = Elements.track;
-  var wrapper = userArrows;
+  var wrapper = placeholder;
   var prev = Elements.prev;
   var next = Elements.next;
   var created;
@@ -1811,7 +1811,7 @@ function Arrows(Splide2, Components2, options) {
     removeClass(wrapper, wrapperClasses);
 
     if (created) {
-      remove(userArrows ? [prev, next] : wrapper);
+      remove(placeholder ? [prev, next] : wrapper);
       prev = next = null;
     } else {
       removeAttribute([prev, next], ALL_ATTRIBUTES);
@@ -1829,12 +1829,12 @@ function Arrows(Splide2, Components2, options) {
   }
 
   function createArrows() {
-    wrapper = userArrows || create("div", classes.arrows);
+    wrapper = placeholder || create("div", classes.arrows);
     prev = createArrow(true);
     next = createArrow(false);
     created = true;
     append(wrapper, [prev, next]);
-    !userArrows && before(wrapper, track);
+    !placeholder && before(wrapper, track);
   }
 
   function createArrow(prev2) {
@@ -2488,6 +2488,7 @@ function Pagination(Splide2, Components2, options) {
       getIndex = Controller.getIndex,
       go = Controller.go;
   var resolve = Components2.Direction.resolve;
+  var placeholder = Elements.pagination;
   var items = [];
   var list;
   var paginationClasses;
@@ -2495,8 +2496,10 @@ function Pagination(Splide2, Components2, options) {
   function mount() {
     destroy();
     on([EVENT_UPDATED, EVENT_REFRESH], mount);
+    var enabled = options.pagination && Slides.isEnough();
+    placeholder && display(placeholder, enabled ? "" : "none");
 
-    if (options.pagination && Slides.isEnough()) {
+    if (enabled) {
       on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
       createPagination();
       update();
@@ -2509,7 +2512,7 @@ function Pagination(Splide2, Components2, options) {
 
   function destroy() {
     if (list) {
-      remove(Elements.pagination ? slice(list.children) : list);
+      remove(placeholder ? slice(list.children) : list);
       removeClass(list, paginationClasses);
       empty(items);
       list = null;
@@ -2524,7 +2527,7 @@ function Pagination(Splide2, Components2, options) {
         i18n = options.i18n,
         perPage = options.perPage;
     var max = hasFocus() ? length : ceil(length / perPage);
-    list = Elements.pagination || create("ul", classes.pagination, Elements.track.parentElement);
+    list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
     addClass(list, paginationClasses = CLASS_PAGINATION + "--" + getDirection());
     setAttribute(list, ROLE, "tablist");
     setAttribute(list, ARIA_LABEL, i18n.select);

dist/js/splide.esm.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.8
+ * Version  : 4.0.9
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1758,9 +1758,9 @@ function Arrows(Splide2, Components2, options) {
       i18n = options.i18n;
   var Elements = Components2.Elements,
       Controller = Components2.Controller;
-  var userArrows = Elements.arrows,
+  var placeholder = Elements.arrows,
       track = Elements.track;
-  var wrapper = userArrows;
+  var wrapper = placeholder;
   var prev = Elements.prev;
   var next = Elements.next;
   var created;
@@ -1806,7 +1806,7 @@ function Arrows(Splide2, Components2, options) {
     removeClass(wrapper, wrapperClasses);
 
     if (created) {
-      remove(userArrows ? [prev, next] : wrapper);
+      remove(placeholder ? [prev, next] : wrapper);
       prev = next = null;
     } else {
       removeAttribute([prev, next], ALL_ATTRIBUTES);
@@ -1824,12 +1824,12 @@ function Arrows(Splide2, Components2, options) {
   }
 
   function createArrows() {
-    wrapper = userArrows || create("div", classes.arrows);
+    wrapper = placeholder || create("div", classes.arrows);
     prev = createArrow(true);
     next = createArrow(false);
     created = true;
     append(wrapper, [prev, next]);
-    !userArrows && before(wrapper, track);
+    !placeholder && before(wrapper, track);
   }
 
   function createArrow(prev2) {
@@ -2483,6 +2483,7 @@ function Pagination(Splide2, Components2, options) {
       getIndex = Controller.getIndex,
       go = Controller.go;
   var resolve = Components2.Direction.resolve;
+  var placeholder = Elements.pagination;
   var items = [];
   var list;
   var paginationClasses;
@@ -2490,8 +2491,10 @@ function Pagination(Splide2, Components2, options) {
   function mount() {
     destroy();
     on([EVENT_UPDATED, EVENT_REFRESH], mount);
+    var enabled = options.pagination && Slides.isEnough();
+    placeholder && display(placeholder, enabled ? "" : "none");
 
-    if (options.pagination && Slides.isEnough()) {
+    if (enabled) {
       on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
       createPagination();
       update();
@@ -2504,7 +2507,7 @@ function Pagination(Splide2, Components2, options) {
 
   function destroy() {
     if (list) {
-      remove(Elements.pagination ? slice(list.children) : list);
+      remove(placeholder ? slice(list.children) : list);
       removeClass(list, paginationClasses);
       empty(items);
       list = null;
@@ -2519,7 +2522,7 @@ function Pagination(Splide2, Components2, options) {
         i18n = options.i18n,
         perPage = options.perPage;
     var max = hasFocus() ? length : ceil(length / perPage);
-    list = Elements.pagination || create("ul", classes.pagination, Elements.track.parentElement);
+    list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
     addClass(list, paginationClasses = CLASS_PAGINATION + "--" + getDirection());
     setAttribute(list, ROLE, "tablist");
     setAttribute(list, ARIA_LABEL, i18n.select);

dist/js/splide.js

@@ -1756,9 +1756,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         i18n = options.i18n;
     var Elements = Components2.Elements,
         Controller = Components2.Controller;
-    var userArrows = Elements.arrows,
+    var placeholder = Elements.arrows,
         track = Elements.track;
-    var wrapper = userArrows;
+    var wrapper = placeholder;
     var prev = Elements.prev;
     var next = Elements.next;
     var created;
@@ -1804,7 +1804,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       removeClass(wrapper, wrapperClasses);
 
       if (created) {
-        remove(userArrows ? [prev, next] : wrapper);
+        remove(placeholder ? [prev, next] : wrapper);
         prev = next = null;
       } else {
         removeAttribute([prev, next], ALL_ATTRIBUTES);
@@ -1822,12 +1822,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function createArrows() {
-      wrapper = userArrows || create("div", classes.arrows);
+      wrapper = placeholder || create("div", classes.arrows);
       prev = createArrow(true);
       next = createArrow(false);
       created = true;
       append(wrapper, [prev, next]);
-      !userArrows && before(wrapper, track);
+      !placeholder && before(wrapper, track);
     }
 
     function createArrow(prev2) {
@@ -2481,6 +2481,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         getIndex = Controller.getIndex,
         go = Controller.go;
     var resolve = Components2.Direction.resolve;
+    var placeholder = Elements.pagination;
     var items = [];
     var list;
     var paginationClasses;
@@ -2488,8 +2489,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function mount() {
       destroy();
       on([EVENT_UPDATED, EVENT_REFRESH], mount);
+      var enabled = options.pagination && Slides.isEnough();
+      placeholder && display(placeholder, enabled ? "" : "none");
 
-      if (options.pagination && Slides.isEnough()) {
+      if (enabled) {
         on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
         createPagination();
         update();
@@ -2502,7 +2505,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function destroy() {
       if (list) {
-        remove(Elements.pagination ? slice(list.children) : list);
+        remove(placeholder ? slice(list.children) : list);
         removeClass(list, paginationClasses);
         empty(items);
         list = null;
@@ -2517,7 +2520,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           i18n = options.i18n,
           perPage = options.perPage;
       var max = hasFocus() ? length : ceil(length / perPage);
-      list = Elements.pagination || create("ul", classes.pagination, Elements.track.parentElement);
+      list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
       addClass(list, paginationClasses = CLASS_PAGINATION + "--" + getDirection());
       setAttribute(list, ROLE, "tablist");
       setAttribute(list, ARIA_LABEL, i18n.select);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "4.0.8",
+  "version": "4.0.10",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",
@@ -29,35 +29,36 @@
     "url": "https://github.com/Splidejs/splide/issues"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.10",
-    "@babel/preset-env": "^7.16.11",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@types/jest": "^27.4.0",
-    "@types/node": "^17.0.35",
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
-    "autoprefixer": "^10.4.2",
-    "babel-jest": "^27.4.6",
-    "babel-loader": "^8.2.3",
+    "@babel/core": "^7.18.13",
+    "@babel/preset-env": "^7.18.10",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@types/jest": "^29.0.0",
+    "@types/node": "^18.7.14",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
+    "autoprefixer": "^10.4.8",
+    "babel-jest": "^29.0.1",
+    "babel-loader": "^8.2.5",
     "chokidar": "^3.5.3",
-    "cssnano": "^5.0.15",
-    "esbuild": "^0.14.12",
-    "eslint": "^8.7.0",
-    "jest": "^27.4.7",
-    "postcss": "^8.4.5",
-    "rollup": "^2.66.0",
-    "rollup-plugin-dts": "^4.1.0",
-    "rollup-plugin-esbuild": "^4.8.2",
-    "sass": "^1.49.0",
-    "stylelint": "^14.2.0",
+    "cssnano": "^5.1.13",
+    "esbuild": "^0.15.6",
+    "eslint": "^8.23.0",
+    "jest": "^29.0.1",
+    "jest-environment-jsdom": "^29.0.1",
+    "postcss": "^8.4.16",
+    "rollup": "^2.79.0",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-esbuild": "^4.10.1",
+    "sass": "^1.54.8",
+    "stylelint": "^14.11.0",
     "stylelint-config-sass-guidelines": "^9.0.1",
     "stylelint-order": "^5.0.0",
-    "stylelint-scss": "^4.1.0",
-    "ts-jest": "^27.1.3",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.5",
-    "uglify-js": "^3.14.5"
+    "stylelint-scss": "^4.3.0",
+    "ts-jest": "next",
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.2",
+    "uglify-js": "^3.17.0"
   },
   "scripts": {
     "develop": "node scripts/develop.js",

src/js/components/Arrows/Arrows.ts

@@ -53,12 +53,12 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
   const { on, bind, emit } = event;
   const { classes, i18n } = options;
   const { Elements, Controller } = Components;
-  const { arrows: userArrows, track } = Elements;
+  const { arrows: placeholder, track } = Elements;
 
   /**
    * The wrapper element.
    */
-  let wrapper = userArrows;
+  let wrapper = placeholder;
 
   /**
    * The previous arrow element.
@@ -133,7 +133,7 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
     removeClass( wrapper, wrapperClasses );
 
     if ( created ) {
-      remove( userArrows ? [ prev, next ] : wrapper );
+      remove( placeholder ? [ prev, next ] : wrapper );
       prev = next = null;
     } else {
       removeAttribute( [ prev, next ], ALL_ATTRIBUTES );
@@ -162,13 +162,13 @@ export function Arrows( Splide: Splide, Components: Components, options: Options
    * Create arrows and append them to the slider.
    */
   function createArrows(): void {
-    wrapper = userArrows || create( 'div', classes.arrows );
+    wrapper = placeholder || create( 'div', classes.arrows );
     prev    = createArrow( true );
     next    = createArrow( false );
     created = true;
 
     append( wrapper, [ prev, next ] );
-    ! userArrows && before( wrapper, track );
+    ! placeholder && before( wrapper, track );
   }
 
   /**

src/js/components/Pagination/Pagination.ts

@@ -25,7 +25,7 @@ import {
   addClass,
   apply,
   ceil,
-  create,
+  create, display,
   empty,
   focus,
   format,
@@ -89,6 +89,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 { pagination: placeholder } = Elements;
 
   /**
    * Stores all pagination items.
@@ -110,10 +111,12 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
    */
   function mount(): void {
     destroy();
-
     on( [ EVENT_UPDATED, EVENT_REFRESH ], mount );
 
-    if ( options.pagination && Slides.isEnough() ) {
+    const enabled = options.pagination && Slides.isEnough();
+    placeholder && display( placeholder, enabled ? '' : 'none' );
+
+    if ( enabled ) {
       on( [ EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED ], update );
       createPagination();
       update();
@@ -126,7 +129,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
    */
   function destroy(): void {
     if ( list ) {
-      remove( Elements.pagination ? slice( list.children ) : list );
+      remove( placeholder ? slice( list.children ) : list );
       removeClass( list, paginationClasses );
       empty( items );
       list = null;
@@ -143,7 +146,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
     const { classes, i18n, perPage } = options;
     const max = hasFocus() ? length : ceil( length / perPage );
 
-    list = Elements.pagination || create( 'ul', classes.pagination, Elements.track.parentElement );
+    list = placeholder || create( 'ul', classes.pagination, Elements.track.parentElement );
 
     addClass( list, ( paginationClasses = `${ CLASS_PAGINATION }--${ getDirection() }` ) );
     setAttribute( list, ROLE, 'tablist' );

src/js/components/Pagination/test/placeholder.test.ts

@@ -0,0 +1,48 @@
+import { init } from '../../../test';
+import { fail } from 'assert';
+
+
+describe( 'Pagination', () => {
+  const html = `
+    <section class="splide" aria-label="Placeholder for pagination">
+      <ul class="splide__pagination pagination-placeholder"></ul>
+    
+      <div class="splide__track">
+        <ul class="splide__list">
+          <li class="splide__slide">Slide 01</li>
+          <li class="splide__slide">Slide 02</li>
+          <li class="splide__slide">Slide 03</li>
+        </ul>
+      </div>
+    </section>
+  `;
+
+  test( 'can use a placeholder if provided.', () => {
+    const splide      = init( {}, { html } );
+    const placeholder = document.querySelector( '.pagination-placeholder' );
+
+    expect( placeholder ).not.toBeUndefined();
+    expect( splide.Components.Elements.pagination === placeholder ).toBe( true );
+
+    const { items }    = splide.Components.Pagination;
+    const { children } = placeholder;
+
+    expect( items.length === children.length ).toBe( true );
+    expect( items[ 0 ].li === children[ 0 ] ).toBe( true );
+  } );
+
+  test( 'should toggle a placeholder according to `pagination` options.', () => {
+    const splide      = init( { pagination: false }, { html } );
+    const placeholder = document.querySelector( '.pagination-placeholder' );
+
+    if ( placeholder instanceof HTMLElement ) {
+      expect( placeholder.style.display ).toBe( 'none' );
+
+      // Update options to show the pagination.
+      splide.options = { pagination: true };
+      expect( placeholder.style.display ).toBe( '' );
+    } else {
+      fail();
+    }
+  } );
+} );