Splide

@@ -33,19 +33,19 @@ No dependencies, no Lighthouse errors.

@@ -104,7 +104,7 @@ Please support the project if you like it! Here is the mobile version result of the [Splide front page](https://splidejs.com): - Lighthouse result of the Splide frontpage

Lighthouse result of the Splide frontpage

The Splide slider does not degrade Accessibility, Best Practices and SEO 🎉 diff --git a/app/assets/css/basic.scss b/app/assets/css/basic.scss new file mode 100644 index 00000000..bb21a6c9 --- /dev/null +++ b/app/assets/css/basic.scss @@ -0,0 +1,39 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..700&display=swap'); + +body { + color: #3d4b56; + font-family: Inter, sans-serif; + margin: 2rem; +} + +h2 { + margin-top: 6rem; + text-align: center; +} + +.splide { + $root: &; + margin: 2rem auto; + + &__slide { + align-items: center; + background: #ecf3fa; + display: flex; + font-size: 2rem; + justify-content: center; + + &.is-active { + background: #e1e9f3; + } + + img { + height: 100%; + object-fit: cover; + width: 100%; + } + } +} + +.controls { + text-align: center; +} diff --git a/src/js/test/assets/images/pics/slide01.jpg b/app/assets/images/pics/slide01.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide01.jpg rename to app/assets/images/pics/slide01.jpg diff --git a/src/js/test/assets/images/pics/slide02.jpg b/app/assets/images/pics/slide02.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide02.jpg rename to app/assets/images/pics/slide02.jpg diff --git a/src/js/test/assets/images/pics/slide03.jpg b/app/assets/images/pics/slide03.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide03.jpg rename to app/assets/images/pics/slide03.jpg diff --git a/src/js/test/assets/images/pics/slide04.jpg b/app/assets/images/pics/slide04.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide04.jpg rename to app/assets/images/pics/slide04.jpg diff --git a/src/js/test/assets/images/pics/slide05.jpg b/app/assets/images/pics/slide05.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide05.jpg rename to app/assets/images/pics/slide05.jpg diff --git a/src/js/test/assets/images/pics/slide06.jpg b/app/assets/images/pics/slide06.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide06.jpg rename to app/assets/images/pics/slide06.jpg diff --git a/src/js/test/assets/images/pics/slide07.jpg b/app/assets/images/pics/slide07.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide07.jpg rename to app/assets/images/pics/slide07.jpg diff --git a/src/js/test/assets/images/pics/slide08.jpg b/app/assets/images/pics/slide08.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide08.jpg rename to app/assets/images/pics/slide08.jpg diff --git a/src/js/test/assets/images/pics/slide09.jpg b/app/assets/images/pics/slide09.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide09.jpg rename to app/assets/images/pics/slide09.jpg diff --git a/src/js/test/assets/images/pics/slide10.jpg b/app/assets/images/pics/slide10.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide10.jpg rename to app/assets/images/pics/slide10.jpg diff --git a/src/js/test/assets/images/pics/slide11.jpg b/app/assets/images/pics/slide11.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide11.jpg rename to app/assets/images/pics/slide11.jpg diff --git a/src/js/test/assets/images/pics/slide12.jpg b/app/assets/images/pics/slide12.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide12.jpg rename to app/assets/images/pics/slide12.jpg diff --git a/src/js/test/assets/images/pics/slide13.jpg b/app/assets/images/pics/slide13.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide13.jpg rename to app/assets/images/pics/slide13.jpg diff --git a/src/js/test/assets/images/pics/slide14.jpg b/app/assets/images/pics/slide14.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide14.jpg rename to app/assets/images/pics/slide14.jpg diff --git a/src/js/test/assets/images/pics/slide15.jpg b/app/assets/images/pics/slide15.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide15.jpg rename to app/assets/images/pics/slide15.jpg diff --git a/src/js/test/assets/images/pics/slide16.jpg b/app/assets/images/pics/slide16.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide16.jpg rename to app/assets/images/pics/slide16.jpg diff --git a/src/js/test/assets/images/pics/slide17.jpg b/app/assets/images/pics/slide17.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide17.jpg rename to app/assets/images/pics/slide17.jpg diff --git a/src/js/test/assets/images/pics/slide18.jpg b/app/assets/images/pics/slide18.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide18.jpg rename to app/assets/images/pics/slide18.jpg diff --git a/src/js/test/assets/images/pics/slide19.jpg b/app/assets/images/pics/slide19.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide19.jpg rename to app/assets/images/pics/slide19.jpg diff --git a/src/js/test/assets/images/pics/slide20.jpg b/app/assets/images/pics/slide20.jpg similarity index 100% rename from src/js/test/assets/images/pics/slide20.jpg rename to app/assets/images/pics/slide20.jpg diff --git a/src/js/test/assets/images/planets/mars.jpg b/app/assets/images/planets/mars.jpg similarity index 100% rename from src/js/test/assets/images/planets/mars.jpg rename to app/assets/images/planets/mars.jpg diff --git a/src/js/test/assets/images/planets/neptune.jpg b/app/assets/images/planets/neptune.jpg similarity index 100% rename from src/js/test/assets/images/planets/neptune.jpg rename to app/assets/images/planets/neptune.jpg diff --git a/src/js/test/assets/images/planets/saturn.jpg b/app/assets/images/planets/saturn.jpg similarity index 100% rename from src/js/test/assets/images/planets/saturn.jpg rename to app/assets/images/planets/saturn.jpg diff --git a/app/index.html b/app/index.html new file mode 100644 index 00000000..805deb8e --- /dev/null +++ b/app/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/js/common.ts b/app/js/common.ts new file mode 100644 index 00000000..c7f5c260 --- /dev/null +++ b/app/js/common.ts @@ -0,0 +1,2 @@ +import '../../src/css/themes/default/index.scss'; +import '../assets/css/basic.scss'; \ No newline at end of file diff --git a/app/js/html.ts b/app/js/html.ts new file mode 100644 index 00000000..46d7d23f --- /dev/null +++ b/app/js/html.ts @@ -0,0 +1,13 @@ +import { buildHtml as _buildHtml, BuildHtmlConfig, insertHtml as _insertHtml, InsertHtmlConfig } from '@test'; +import { SLIDES } from './pics'; + + +export function buildHtml(config: BuildHtmlConfig = {}): string { + const src = config.useImage ? SLIDES : undefined; + return _buildHtml({ ...config, src }); +} + +export function insertHtml(config: InsertHtmlConfig = {}): void { + const src = config.useImage ? SLIDES : undefined; + _insertHtml({ ...config, src }); +} \ No newline at end of file diff --git a/app/js/pics/index.ts b/app/js/pics/index.ts new file mode 100644 index 00000000..da12f7d9 --- /dev/null +++ b/app/js/pics/index.ts @@ -0,0 +1,36 @@ +/// + +import slide01 from '../../assets/images/pics/slide01.jpg'; +import slide02 from '../../assets/images/pics/slide02.jpg'; +import slide03 from '../../assets/images/pics/slide03.jpg'; +import slide04 from '../../assets/images/pics/slide04.jpg'; +import slide05 from '../../assets/images/pics/slide05.jpg'; +import slide06 from '../../assets/images/pics/slide06.jpg'; +import slide07 from '../../assets/images/pics/slide07.jpg'; +import slide08 from '../../assets/images/pics/slide08.jpg'; +import slide09 from '../../assets/images/pics/slide09.jpg'; +import slide10 from '../../assets/images/pics/slide10.jpg'; +import slide11 from '../../assets/images/pics/slide09.jpg'; +import slide12 from '../../assets/images/pics/slide10.jpg'; +import slide13 from '../../assets/images/pics/slide13.jpg'; +import slide14 from '../../assets/images/pics/slide14.jpg'; +import slide15 from '../../assets/images/pics/slide15.jpg'; + +export const SLIDES = [ + slide01, + slide02, + slide03, + slide04, + slide05, + slide06, + slide07, + slide08, + slide09, + slide10, + slide11, + slide12, + slide13, + slide14, + slide15, +]; + diff --git a/app/pages/add/index.html b/app/pages/add/index.html new file mode 100644 index 00000000..731514ae --- /dev/null +++ b/app/pages/add/index.html @@ -0,0 +1,14 @@ + + + + + + + +

+ + +

+ + + \ No newline at end of file diff --git a/app/pages/add/script.ts b/app/pages/add/script.ts new file mode 100644 index 00000000..4d01d010 --- /dev/null +++ b/app/pages/add/script.ts @@ -0,0 +1,33 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import { SLIDES } from '../../js/pics'; +import '../../js/common'; + + +insertHtml({ useImage: true }); + +const splide = new Splide('#splide01', { + type: 'loop', + width: 1000, + height: 400, + perPage: 3, + gap: '1rem', +}).mount(); + +const addButton = document.getElementById('add'); +const removeButton = document.getElementById('remove'); + +if (addButton) { + addButton.addEventListener('click', function () { + splide.add([ + `

`, + `

`, + ]); + }); +} + +if (removeButton) { + removeButton.addEventListener('click', function () { + splide.remove(splide.length - 1); + }); +} \ No newline at end of file diff --git a/app/pages/auto-height/index.html b/app/pages/auto-height/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/auto-height/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/auto-height/script.ts b/app/pages/auto-height/script.ts new file mode 100644 index 00000000..6e9d4fb0 --- /dev/null +++ b/app/pages/auto-height/script.ts @@ -0,0 +1,29 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; + + +insertHtml({ id: 'splide01', autoHeight: true }); + +new Splide('#splide01', { + direction: 'ttb', + width: 600, + height: '90vh', + gap: '1rem', + focus: 0, + drag: 'free', + omitEnd: true, + autoHeight: true, +}).mount(); + +insertHtml({ id: 'splide02', useImage: true, autoHeight: true }); + +new Splide('#splide02', { + type: 'loop', + width: 600, + direction: 'ttb', + height: '90vh', + gap: '1rem', + autoHeight: true, + focus: 'center', +}).mount(); diff --git a/app/pages/auto-width/index.html b/app/pages/auto-width/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/auto-width/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/auto-width/script.ts b/app/pages/auto-width/script.ts new file mode 100644 index 00000000..9d29f0f3 --- /dev/null +++ b/app/pages/auto-width/script.ts @@ -0,0 +1,26 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; + + +insertHtml({ id: 'splide01', useImage: true, autoWidth: true }); + +new Splide('#splide01', { + height: 400, + gap: '1rem', + focus: 0, + drag: 'free', + omitEnd: true, + autoWidth: true, +}).mount(); + +insertHtml({ id: 'splide02', useImage: true, autoWidth: true }); + +new Splide('#splide02', { + type: 'loop', + width: 1000, + height: 400, + gap: '1rem', + autoWidth: true, + focus: 'center', +}).mount(); diff --git a/app/pages/autoplay/index.html b/app/pages/autoplay/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/autoplay/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/autoplay/script.ts b/app/pages/autoplay/script.ts new file mode 100644 index 00000000..cefb72d5 --- /dev/null +++ b/app/pages/autoplay/script.ts @@ -0,0 +1,36 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; + + +insertHtml({ + hasProgress: true, + hasToggle: true, + onRenderSlide(index) { + if (index === 0) { + return { attrs: { 'data-splide-interval': 1000 } }; + } + + if (index === 2) { + return { attrs: { 'data-splide-interval': 10000 } }; + } + + return {}; + }, +}); + +const splide01 = new Splide('#splide01', { + width: 1000, + height: 400, + gap: '1rem', + autoplay: true, + // pauseOnFocus: false, + // pauseOnHover: false, +}).mount(); + +const rateElm = document.createElement('pre'); +splide01.root.append(rateElm); + +splide01.on('autoplay:playing', rate => { + rateElm.textContent = rate.toFixed(3); +}); \ No newline at end of file diff --git a/app/pages/basic/index.html b/app/pages/basic/index.html new file mode 100644 index 00000000..83eb783e --- /dev/null +++ b/app/pages/basic/index.html @@ -0,0 +1,26 @@ + + + + + + + +

+ + + \ No newline at end of file diff --git a/app/pages/basic/script.ts b/app/pages/basic/script.ts new file mode 100644 index 00000000..4ff37f43 --- /dev/null +++ b/app/pages/basic/script.ts @@ -0,0 +1,11 @@ +import { Splide } from '../../../src/js'; +import '../../js/common'; + + +const splide = new Splide('#splide01', { + width: 1000, + height: 400, +}).mount(); + +splide.on('move', () => console.log('move')); +splide.on('moved', () => console.log('moved')); \ No newline at end of file diff --git a/app/pages/breakpoints/index.html b/app/pages/breakpoints/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/breakpoints/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/breakpoints/script.ts b/app/pages/breakpoints/script.ts new file mode 100644 index 00000000..dcd858f4 --- /dev/null +++ b/app/pages/breakpoints/script.ts @@ -0,0 +1,38 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; + + +insertHtml({ id: 'splide01', useImage: true }); + +const options = { + perPage: 3, + arrows: false, + // mediaQuery: 'min', + breakpoints: { + 1200: { + perPage: 1, + gap: '1rem', + arrows: true, + padding: 50, + height: 500, + destroy: false, + }, + 1000: { + perPage: 2, + gap: 0, + arrows: false, + padding: 0, + pagination: false, + }, + 800: { + destroy: true, + }, + }, +}; + +new Splide('#splide01', options).mount(); + +insertHtml({ id: 'splide02', hasArrows: true, hasPagination: true }); +new Splide('#splide02', options).mount(); + diff --git a/app/pages/container/index.html b/app/pages/container/index.html new file mode 100644 index 00000000..b9c4f914 --- /dev/null +++ b/app/pages/container/index.html @@ -0,0 +1,63 @@ + + + + + + + + + +

+ Lorem ipsum dolor sit amet, ius cu novum splendide contentiones, vim dolorem delicata explicari no. Posidonium sadipscing delicatissimi ad vix, vim at utamur ponderum. Eu doming verear complectitur vim. +

+ +

+ Lorem ipsum dolor sit amet, in usu facilis philosophia, exerci adolescens honestatis ei eum. Et vis nulla simul, pri cu euismod accusam vulputate. +

+ +

+ Lorem ipsum dolor sit amet, in usu facilis philosophia, exerci adolescens honestatis ei eum. Et vis nulla simul, pri cu euismod accusam vulputate. +

+ + + \ No newline at end of file diff --git a/app/pages/container/script.ts b/app/pages/container/script.ts new file mode 100644 index 00000000..9299b4d2 --- /dev/null +++ b/app/pages/container/script.ts @@ -0,0 +1,10 @@ +import { Splide } from '../../../src/js'; +import '../../../src/css/themes/default/index.scss'; + + +new Splide('#splide01', { + width: 1000, + perPage: 2, + gap: '1rem', + heightRatio: 0.3, +}).mount(); diff --git a/app/pages/drag-free/index.html b/app/pages/drag-free/index.html new file mode 100644 index 00000000..4abbe403 --- /dev/null +++ b/app/pages/drag-free/index.html @@ -0,0 +1,11 @@ + + + + + + + +

+ + + \ No newline at end of file diff --git a/app/pages/drag-free/script.ts b/app/pages/drag-free/script.ts new file mode 100644 index 00000000..6ead0bdf --- /dev/null +++ b/app/pages/drag-free/script.ts @@ -0,0 +1,41 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; +import './style.scss'; + + +insertHtml({ id: 'splide01', heading: 'Drag Free - Slide' }); + +const splide01 = new Splide('#splide01', { + width: 1000, + height: 400, + // type: 'loop', + parPage: 3, + drag: 'free', + snap: true, + gap: '2rem', +}).mount(); + +const bar = document.querySelector('.bar'); + +if (bar) { + const { getRate } = splide01.Components.Move; + + splide01.on('dragging scrolling', () => { + bar.style.width = `${ getRate() * 100 }%`; + }); +} else { + throw new Error('Could not find a bar element'); +} + +insertHtml({ id: 'splide02', heading: 'Drag Free - Loop' }); + +new Splide('#splide02', { + width: 1000, + height: 400, + type: 'loop', + parPage: 3, + drag: 'free', + snap: false, + gap: '2rem', +}).mount(); diff --git a/app/pages/drag-free/style.scss b/app/pages/drag-free/style.scss new file mode 100644 index 00000000..8b500d8a --- /dev/null +++ b/app/pages/drag-free/style.scss @@ -0,0 +1,4 @@ +.bar { + background: #b1f3f3; + height: 3px; +} diff --git a/app/pages/extension/index.html b/app/pages/extension/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/extension/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/extension/script.ts b/app/pages/extension/script.ts new file mode 100644 index 00000000..49146b57 --- /dev/null +++ b/app/pages/extension/script.ts @@ -0,0 +1,28 @@ +import { BaseComponent, ComponentConstructor, Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; + + +insertHtml(); + +const CustomExtension: ComponentConstructor = (Splide, Components, options, event) => { + const { root } = Splide; + const { bind } = event; + + function mount(): void { + const button = document.createElement('button'); + button.textContent = 'Jump'; + bind(button, 'click', () => Splide.go('>>')); + root.append(button); + } + + return { + mount, + }; +}; + +new Splide('#splide01', { + width: 1000, + height: 400, +}).mount({ CustomExtension }); + diff --git a/app/pages/fade/index.html b/app/pages/fade/index.html new file mode 100644 index 00000000..4065b5e8 --- /dev/null +++ b/app/pages/fade/index.html @@ -0,0 +1,43 @@ + + + + + + + +

+ +
+ Lorem ipsum dolor sit amet, quod sale at pro, everti iisque tractatos sit ea. Agam alterum sit at. Libris + petentium his ne, ne eam detraxit inimicus tractatos. Ius mundi verear ad, at percipit constituto pro, ei + possim eirmod quo. Vim laudem aperiam reprehendunt in. +
+
+ +
+ Has cu etiam veniam recusabo, his animal nostrud fabellas ne. Vis suas qualisque eu, eum ei impedit civibus, + an solum definiebas pro. +
+
+ +
+ Mollis epicuri laboramus ea qui, his ei meis graecis quaestio. Ius ne suscipit prodesset. Qui at delicata + euripidis eloquentiam, eius solum volumus eum eu. Usu eu deserunt abhorreant, errem qualisque nec in. Te has + labitur virtute hendrerit, cum quaeque oportere mediocritatem in, eos imperdiet intellegam id. +
+
+ Has cu etiam veniam recusabo, his animal nostrud fabellas ne. Vis suas qualisque eu, eum ei impedit civibus, + an solum definiebas pro. +
+

+ + + \ No newline at end of file diff --git a/app/pages/fade/script.ts b/app/pages/fade/script.ts new file mode 100644 index 00000000..80bed53a --- /dev/null +++ b/app/pages/fade/script.ts @@ -0,0 +1,11 @@ +import { Splide } from '../../../src/js'; +import '../../../src/css/themes/default/index.scss'; +import './style.scss'; + + +new Splide('#splide01', { + type: 'fade', + width: 1000, + rewind: true, + rewindByDrag: true, +}).mount(); diff --git a/app/pages/fade/style.scss b/app/pages/fade/style.scss new file mode 100644 index 00000000..93f5c518 --- /dev/null +++ b/app/pages/fade/style.scss @@ -0,0 +1,16 @@ +body { + margin: 2rem; +} + +.splide { + margin: 0 auto; + + &__slide { + background: #ecf3fa; + padding: 1rem; + + img { + width: 100%; + } + } +} diff --git a/app/pages/fixed-size/index.html b/app/pages/fixed-size/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/fixed-size/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/fixed-size/script.ts b/app/pages/fixed-size/script.ts new file mode 100644 index 00000000..248d71d4 --- /dev/null +++ b/app/pages/fixed-size/script.ts @@ -0,0 +1,24 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; + + +insertHtml({ id: 'splide01' }); + +new Splide('#splide01', { + type: 'loop', + fixedWidth: '6rem', + gap: 10, + focus: 0, + omitEnd: true, +}).mount(); + + +insertHtml({ id: 'splide02' }); + +new Splide('#splide02', { + fixedWidth: 200, + gap: '1rem', +}).mount(); + + diff --git a/app/pages/images/index.html b/app/pages/images/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/images/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/images/script.ts b/app/pages/images/script.ts new file mode 100644 index 00000000..6953b4fb --- /dev/null +++ b/app/pages/images/script.ts @@ -0,0 +1,11 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; + + +insertHtml({ id: 'splide01', useImage: true }); + +new Splide('#splide01', { + width: 1000, + height: 400, +}).mount(); diff --git a/app/pages/json/index.html b/app/pages/json/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/json/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/json/script.ts b/app/pages/json/script.ts new file mode 100644 index 00000000..19d2ad64 --- /dev/null +++ b/app/pages/json/script.ts @@ -0,0 +1,23 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; + + +insertHtml(); + +const options = { + width: 1000, + height: 400, + perPage: 2, + gap: '1rem', +}; + +const root = document.getElementById('splide01'); + +if (root) { + root.dataset.splide = JSON.stringify(options); + new Splide(root).mount(); +} else { + throw new Error('Could not find a root element.'); +} + diff --git a/app/pages/lazy-load/index.html b/app/pages/lazy-load/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/lazy-load/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/lazy-load/script.ts b/app/pages/lazy-load/script.ts new file mode 100644 index 00000000..8d36d037 --- /dev/null +++ b/app/pages/lazy-load/script.ts @@ -0,0 +1,57 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; + + +const placeholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPc9/3HfwAI1gOuq1Su+AAAAABJRU5ErkJggg=='; + +insertHtml({ + id: 'splide01', + heading: 'Src & Placeholder', + onRenderSlide(index) { + const url = `https://source.unsplash.com/random/960x540?sig=${ index + 1 }`; + + return { + content: `

`, + }; + }, +}); + +const splide01 = new Splide('#splide01', { + lazyLoad: 'nearby', + heightRatio: (9 / 16) / 2, + gap: '1rem', + drag: 'free', +}).mount(); + +let sig = 20; + +splide01.on('moved', index => { + if (index === splide01.length - 1) { + splide01.add([ + `

`, + `

`, + ]); + } +}); + +insertHtml({ + id: 'splide02', + heading: 'Srcset', + onRenderSlide(index) { + const small = `https://source.unsplash.com/random/640x360?sig=${ index + 1 }`; + const large = `https://source.unsplash.com/random/960x540?sig=${ index + 1 }`; + + return { + content: `

`, + }; + }, +}); + +new Splide('#splide02', { + perPage: 2, + lazyLoad: 'sequential', + heightRatio: (9 / 16) / 2, + gap: '1rem', +}).mount(); + diff --git a/app/pages/live-regions/index.html b/app/pages/live-regions/index.html new file mode 100644 index 00000000..708beabd --- /dev/null +++ b/app/pages/live-regions/index.html @@ -0,0 +1,59 @@ + + + + + + + +

+
+ +
Neptune
+
+
+ Neptune is the eighth and farthest-known Solar planet from the Sun. +
+ +
+
+
+
+ + +
Saturn
+
+
+ Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. +
+ +
+
+
+
+ + +
Mars
+
+
+ Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System. +
+ +
+
+

+ + + \ No newline at end of file diff --git a/app/pages/live-regions/script.ts b/app/pages/live-regions/script.ts new file mode 100644 index 00000000..049b8788 --- /dev/null +++ b/app/pages/live-regions/script.ts @@ -0,0 +1,14 @@ +import { Splide } from '../../../src/js'; +import '../../../src/css/themes/default/index.scss'; +import './style.scss'; + + +new Splide('#splide01', { + type: 'loop', + width: 480, + rewind: true, + // live : false, + speed: 600, + arrowPath: 'm13.5 7.01 13 13m-13 13 13-13', + updateOnMove: true, +}).mount(); diff --git a/app/pages/live-regions/style.scss b/app/pages/live-regions/style.scss new file mode 100644 index 00000000..ca4e75fe --- /dev/null +++ b/app/pages/live-regions/style.scss @@ -0,0 +1,123 @@ +body { + background: linear-gradient( 0deg, #8cde1d, #c0e900 ); + color: #d7e9f5; + font-family: SplideBody, sans-serif; + font-weight: normal; + height: 200vh; + line-height: 1.8; + overflow-x: hidden; + padding: 2rem; +} + +img { + height: auto; + width: 100%; +} + +p { + margin: 0 0 1em; +} + +cite { + font-size: .8em; + font-style: normal; + opacity: .7; +} + +.wrapper { + display: flex; + justify-content: center; + margin-top: 10rem; +} + +.splide { + &__track { + height: 100%; + } + + &__slide { + height: 100%; + padding: 2rem 1rem; + + &:focus-visible { + outline: #fff dotted 3px !important; + } + + &__inner { + background: #000; + border-radius: 10px; + height: 100%; + opacity: 0; + overflow: hidden; + transform: scale( .8 ); + transition: all .5s cubic-bezier( .17, .67, .44, 1 ); + } + + &.is-active { + .splide__slide__inner { + box-shadow: 0 0 15px 4px rgba( 0, 0, 0, .25 ); + opacity: 1; + transform: scale( 1 ); + } + } + } + + &__heading { + color: #fff; + font-family: SplideHeading, sans-serif; + font-size: 2rem; + line-height: 1; + margin: 0; + padding: 1rem 1.5rem .5rem; + } + + &__desc { + margin: 0; + padding: .5rem 1.5rem 3rem; + } + + &__arrow { + background: transparent; + border-radius: 0; + height: 2rem; + opacity: 1; + width: 2rem; + + &:focus-visible { + outline: #fff dotted 3px !important; + } + + svg { + fill: none; + height: 2rem; + stroke: #fff; + stroke-linecap: square; + stroke-width: 8px; + vertical-align: middle; + width: 2rem; + } + + &--prev { + left: -2.7rem; + } + + &--next { + right: -2.7rem; + } + } + + &__pagination { + bottom: 3rem; + + &__page { + background: #d7e9f5; + height: 10px; + width: 10px; + + &.is-active { + background: #8cde1d; + opacity: 1; + } + } + } +} diff --git a/app/pages/loop/index.html b/app/pages/loop/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/loop/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/loop/script.ts b/app/pages/loop/script.ts new file mode 100644 index 00000000..e228772f --- /dev/null +++ b/app/pages/loop/script.ts @@ -0,0 +1,18 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; +import './styles.scss'; + + +insertHtml(); + +new Splide('#splide01', { + type: 'loop', + width: 1000, + height: 400, + speed: 1000, + perPage: 3, + gap: 5, + updateOnMove: true, + // padding: '3rem', +}).mount(); diff --git a/app/pages/loop/styles.scss b/app/pages/loop/styles.scss new file mode 100644 index 00000000..c8dd7114 --- /dev/null +++ b/app/pages/loop/styles.scss @@ -0,0 +1,7 @@ +.splide { + &__slide { + &.is-visible { + background: #779cc4; + } + } +} \ No newline at end of file diff --git a/app/pages/nest/index.html b/app/pages/nest/index.html new file mode 100644 index 00000000..48b48aad --- /dev/null +++ b/app/pages/nest/index.html @@ -0,0 +1,19 @@ + + + + + + + +

+ + + \ No newline at end of file diff --git a/app/pages/nest/script.ts b/app/pages/nest/script.ts new file mode 100644 index 00000000..cf9ae38b --- /dev/null +++ b/app/pages/nest/script.ts @@ -0,0 +1,27 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../../src/css/themes/default/index.scss'; +import './style.scss'; + + +insertHtml({ id: 'nested01', selector: '.nest1' }); +insertHtml({ id: 'nested02', selector: '.nest2' }); + +new Splide('#splide01', { + gap: '1.5rem', + height: 600, +}).mount(); + +new Splide('#nested01', { + perPage: 2, + height: 400, + rewind: true, + gap: '1rem', +}).mount(); + +new Splide('#nested02', { + perPage: 2, + direction: 'ttb', + height: 400, + gap: '1rem', +}).mount(); diff --git a/app/pages/nest/style.scss b/app/pages/nest/style.scss new file mode 100644 index 00000000..a71639c1 --- /dev/null +++ b/app/pages/nest/style.scss @@ -0,0 +1,27 @@ +body { + margin: 2rem; +} + +.splide { + margin: 0 auto; + + &__slide { + align-items: center; + background: #ecf3fa; + display: flex; + justify-content: center; + padding: 1rem; + } +} + +.nest1, +.nest2 { + .splide { + width: 90%; + + &__slide { + background: #c6d7e5; + font-size: 3rem; + } + } +} diff --git a/app/pages/overflow/index.html b/app/pages/overflow/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/overflow/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/overflow/script.ts b/app/pages/overflow/script.ts new file mode 100644 index 00000000..bb96aac7 --- /dev/null +++ b/app/pages/overflow/script.ts @@ -0,0 +1,43 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; +import './style.scss'; + + +insertHtml({ id: 'splide01', heading: 'Loop' }); + +const splide01 = new Splide('#splide01', { + type: 'loop', + fixedWidth: '6rem', + fixedHeight: '4rem', + gap: 10, + omitEnd: true, + focus: 0, + breakpoints: { + '!overflow': { + arrows: false, + drag: false, + pagination: false, + clones: 0, + }, + }, +}).mount(); + +splide01.on('overflow', overflow => console.log('overflow', overflow)); + +insertHtml({ id: 'splide02', heading: 'Slide' }); + +const splide02 = new Splide('#splide02', { + fixedWidth: '6rem', + fixedHeight: '4rem', + gap: 10, + breakpoints: { + '!overflow': { + arrows: false, + drag: false, + pagination: false, + }, + }, +}).mount(); + +splide02.on('overflow', overflow => console.log('overflow', overflow)); \ No newline at end of file diff --git a/app/pages/overflow/style.scss b/app/pages/overflow/style.scss new file mode 100644 index 00000000..75ef5ebc --- /dev/null +++ b/app/pages/overflow/style.scss @@ -0,0 +1,13 @@ +.splide { + &:not(.is-overflow) { + .splide__list { + justify-content: center; + } + + .splide__slide { + &:last-child { + margin: 0 !important; + } + } + } +} diff --git a/app/pages/rtl/index.html b/app/pages/rtl/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/rtl/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/rtl/script.ts b/app/pages/rtl/script.ts new file mode 100644 index 00000000..a793f349 --- /dev/null +++ b/app/pages/rtl/script.ts @@ -0,0 +1,19 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; + + +insertHtml(); + +new Splide('#splide01', { + type: 'loop', + width: 1000, + height: 400, + perPage: 3, + gap: 5, + direction: 'rtl', + padding: { + left: 40, + right: 0, + }, +}).mount(); diff --git a/app/pages/sync/index.html b/app/pages/sync/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/sync/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/sync/script.ts b/app/pages/sync/script.ts new file mode 100644 index 00000000..aabbcce5 --- /dev/null +++ b/app/pages/sync/script.ts @@ -0,0 +1,59 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; + + +insertHtml({ id: 'splide01', useImage: true }); + +const splide01 = new Splide('#splide01', { + type: 'loop', + width: 800, + heightRatio: 0.4, + perPage: 1, + pagination: false, + keyboard: true, +}); + +insertHtml({ id: 'splide02', useImage: true }); + +const splide02 = new Splide('#splide02', { + width: 600, + fixedWidth: 100, + fixedHeight: 56, + gap: '.7em', + isNavigation: true, + focus: 'center', + pagination: false, + rewind: true, + keyboard: true, + drag: 'free', + updateOnDragged: false, + dragMinThreshold: { + mouse: 10, + touch: 10, + }, +}); + +insertHtml({ id: 'splide03', useImage: true }); + +const splide03 = new Splide('#splide03', { + width: 100, + type: 'loop', + direction: 'ttb', + height: 300, + fixedWidth: 100, + fixedHeight: 56, + gap: '.7em', + isNavigation: true, + pagination: false, + keyboard: true, +}); + +splide01.sync(splide02); + +splide01.mount(); +splide02.mount(); +splide03.mount(); + +// Attempts to sync after mount. +splide01.sync(splide03); \ No newline at end of file diff --git a/app/pages/ttb/index.html b/app/pages/ttb/index.html new file mode 100644 index 00000000..f80392da --- /dev/null +++ b/app/pages/ttb/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/pages/ttb/script.ts b/app/pages/ttb/script.ts new file mode 100644 index 00000000..a44a41e6 --- /dev/null +++ b/app/pages/ttb/script.ts @@ -0,0 +1,17 @@ +import { Splide } from '../../../src/js'; +import { insertHtml } from '../../js/html'; +import '../../js/common'; +import './style.scss'; + + +insertHtml({ id: 'splide01', heading: 'Loop' }); + +new Splide('#splide01', { + width: 400, + type: 'loop', + perPage: 2, + padding: '3rem', + gap: '1rem', + direction: 'ttb', + height: '90vh', +}).mount(); \ No newline at end of file diff --git a/app/pages/ttb/style.scss b/app/pages/ttb/style.scss new file mode 100644 index 00000000..db14aaf3 --- /dev/null +++ b/app/pages/ttb/style.scss @@ -0,0 +1,3 @@ +.splide { + margin-bottom: 50vh; +} diff --git a/dist/css/splide-core.min.css b/dist/css/splide-core.min.css index 089c72ee..89166c6c 100644 --- a/dist/css/splide-core.min.css +++ b/dist/css/splide-core.min.css @@ -1 +1 @@ -@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0} \ No newline at end of file +@keyframes splide-loading{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}.splide__track--draggable{-webkit-touch-callout:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s infinite linear;border:2px solid #999;border-left-color:rgba(0,0,0,0);border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{border:0 !important;clip:rect(0 0 0 0) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important}.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__play{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0} \ No newline at end of file diff --git a/dist/css/splide.min.css b/dist/css/splide.min.css index 7e014b47..6fa7c552 100644 --- a/dist/css/splide.min.css +++ b/dist/css/splide.min.css @@ -1 +1 @@ -.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} \ No newline at end of file +.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s infinite linear;border:2px solid #999;border-left-color:rgba(0,0,0,0);border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{border:0 !important;clip:rect(0 0 0 0) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important}.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__play{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}.splide__track--draggable{-webkit-touch-callout:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{background:#ccc;border:0;cursor:pointer;padding:0;position:absolute;top:50%;transform:translateY(-50%);z-index:1;opacity:.7;align-items:center;border-radius:50%;display:flex;height:2em;justify-content:center;width:2em}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:#0bf 3px solid;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:#0bf 3px solid;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;padding:0;position:relative;transition:transform .2s linear;width:8px;opacity:.7}.splide__pagination__page.is-active{background:#fff;z-index:1;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:#0bf 3px solid;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:#0bf 3px solid;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset: -3px){.splide__slide:focus-visible{outline:#0bf 3px solid;outline-offset:-3px}}@media screen and (-ms-high-contrast: none){.splide__slide:focus-visible{border:#0bf 3px solid}}@supports(outline-offset: -3px){.splide.is-focus-in .splide__slide:focus{outline:#0bf 3px solid;outline-offset:-3px}}@media screen and (-ms-high-contrast: none){.splide.is-focus-in .splide__slide:focus{border:#0bf 3px solid}}@media screen and (-ms-high-contrast: none){.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:#0bf 3px solid;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:#0bf 3px solid;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid rgba(0,0,0,0);cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%, 0)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotateZ(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotateZ(90deg)}.splide__pagination--ttb{bottom:0;display:flex;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} \ No newline at end of file diff --git a/dist/css/themes/splide-default.min.css b/dist/css/themes/splide-default.min.css index 7e014b47..6fa7c552 100644 --- a/dist/css/themes/splide-default.min.css +++ b/dist/css/themes/splide-default.min.css @@ -1 +1 @@ -.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} \ No newline at end of file +.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s infinite linear;border:2px solid #999;border-left-color:rgba(0,0,0,0);border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{border:0 !important;clip:rect(0 0 0 0) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important}.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__play{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}.splide__track--draggable{-webkit-touch-callout:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{background:#ccc;border:0;cursor:pointer;padding:0;position:absolute;top:50%;transform:translateY(-50%);z-index:1;opacity:.7;align-items:center;border-radius:50%;display:flex;height:2em;justify-content:center;width:2em}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:#0bf 3px solid;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:#0bf 3px solid;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;padding:0;position:relative;transition:transform .2s linear;width:8px;opacity:.7}.splide__pagination__page.is-active{background:#fff;z-index:1;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:#0bf 3px solid;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:#0bf 3px solid;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset: -3px){.splide__slide:focus-visible{outline:#0bf 3px solid;outline-offset:-3px}}@media screen and (-ms-high-contrast: none){.splide__slide:focus-visible{border:#0bf 3px solid}}@supports(outline-offset: -3px){.splide.is-focus-in .splide__slide:focus{outline:#0bf 3px solid;outline-offset:-3px}}@media screen and (-ms-high-contrast: none){.splide.is-focus-in .splide__slide:focus{border:#0bf 3px solid}}@media screen and (-ms-high-contrast: none){.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:#0bf 3px solid;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:#0bf 3px solid;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid rgba(0,0,0,0);cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%, 0)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotateZ(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotateZ(90deg)}.splide__pagination--ttb{bottom:0;display:flex;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} \ No newline at end of file diff --git a/dist/css/themes/splide-sea-green.min.css b/dist/css/themes/splide-sea-green.min.css index 5d29b64b..a77db429 100644 --- a/dist/css/themes/splide-sea-green.min.css +++ b/dist/css/themes/splide-sea-green.min.css @@ -1 +1 @@ -.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;border-radius:4px;cursor:pointer;opacity:.7}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #20b2aa;opacity:1}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:1em;top:0}.splide__pagination--ttb .splide__pagination__page{height:20px;width:5px}.splide__arrow{-ms-flex-align:center;align-items:center;background:transparent;border:0;border-radius:0;cursor:pointer;display:-ms-flexbox;display:flex;height:2.5em;-ms-flex-pack:center;justify-content:center;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2.5em;z-index:1}.splide__arrow svg{fill:#20b2aa;height:2.5em;transition:fill .2s linear;width:2.5em}.splide__arrow:hover:not(:disabled) svg{fill:#57e1d9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #20b2aa;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #20b2aa;outline-offset:3px}.splide__pagination{bottom:1em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:2.5px;display:inline-block;height:5px;margin:3px;padding:0;position:relative;transition:background-color .2s linear;width:20px}.splide__pagination__page.is-active{background:#20b2aa;z-index:1}.splide__pagination__page:hover{background:#57e1d9;cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #20b2aa;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #20b2aa;outline-offset:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:4px}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #20b2aa;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #20b2aa}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #20b2aa;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #20b2aa}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#20b2aa}}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #20b2aa;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__progress__bar{background:#ccc;height:3px}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #20b2aa;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #20b2aa;outline-offset:3px}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__slider>.splide__arrows .splide__arrow--prev{left:-2.5em}.splide__slider>.splide__arrows .splide__arrow--next{right:-2.5em}.splide{padding:3em} \ No newline at end of file +.splide__track--nav>.splide__list>.splide__slide{border:3px solid rgba(0,0,0,0);cursor:pointer;opacity:.7;border-radius:4px}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #20b2aa;opacity:1}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%, 0)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotateZ(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotateZ(90deg)}.splide__pagination--ttb{bottom:0;display:flex;flex-direction:column;left:auto;padding:1em 0;right:1em;top:0}.splide__pagination--ttb .splide__pagination__page{width:5px;height:20px}.splide__arrow{background:rgba(0,0,0,0);border:0;cursor:pointer;padding:0;position:absolute;top:50%;transform:translateY(-50%);z-index:1;align-items:center;border-radius:0;display:flex;height:2.5em;justify-content:center;width:2.5em}.splide__arrow svg{fill:#20b2aa;height:2.5em;width:2.5em;transition:fill .2s linear}.splide__arrow:hover:not(:disabled) svg{fill:#57e1d9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:#20b2aa 3px solid;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:#20b2aa 3px solid;outline-offset:3px}.splide__pagination{bottom:1em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:2.5px;display:inline-block;height:5px;margin:3px;padding:0;position:relative;transition:background-color .2s linear;width:20px}.splide__pagination__page.is-active{background:#20b2aa;z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9;background:#57e1d9}.splide__pagination__page:focus-visible{outline:#20b2aa 3px solid;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:#20b2aa 3px solid;outline-offset:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:4px}.splide__slide:focus{outline:0}@supports(outline-offset: -3px){.splide__slide:focus-visible{outline:#20b2aa 3px solid;outline-offset:-3px}}@media screen and (-ms-high-contrast: none){.splide__slide:focus-visible{border:#20b2aa 3px solid}}@supports(outline-offset: -3px){.splide.is-focus-in .splide__slide:focus{outline:#20b2aa 3px solid;outline-offset:-3px}}@media screen and (-ms-high-contrast: none){.splide.is-focus-in .splide__slide:focus{border:#20b2aa 3px solid}}@media screen and (-ms-high-contrast: none){.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#20b2aa}}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s infinite linear;border:2px solid #20b2aa;border-left-color:rgba(0,0,0,0);border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{border:0 !important;clip:rect(0 0 0 0) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important}.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__play{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}.splide__track--draggable{-webkit-touch-callout:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__progress__bar{background:#ccc;height:3px}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:#20b2aa 3px solid;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:#20b2aa 3px solid;outline-offset:3px}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__slider>.splide__arrows .splide__arrow--prev{left:-2.5em}.splide__slider>.splide__arrows .splide__arrow--next{right:-2.5em}.splide{padding:3em} \ No newline at end of file diff --git a/dist/css/themes/splide-skyblue.min.css b/dist/css/themes/splide-skyblue.min.css index f3a4e75f..b1b9750e 100644 --- a/dist/css/themes/splide-skyblue.min.css +++ b/dist/css/themes/splide-skyblue.min.css @@ -1 +1 @@ -.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer;opacity:.7}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #00bfff;opacity:1}.splide__arrow{-ms-flex-align:center;align-items:center;background:transparent;border:0;border-radius:0;cursor:pointer;display:-ms-flexbox;display:flex;height:2.5em;-ms-flex-pack:center;justify-content:center;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2.5em;z-index:1}.splide__arrow svg{fill:#00bfff;height:2.5em;transition:fill .2s linear;width:2.5em}.splide__arrow:hover:not(:disabled) svg{fill:#66d9ff}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #00bfff;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #00bfff;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:10px;margin:3px;padding:0;position:relative;transition:background-color .2s linear,transform .2s linear;width:10px}.splide__pagination__page.is-active{background:#00bfff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{background:#66d9ff;cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #00bfff;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #00bfff;outline-offset:3px}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #00bfff;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #00bfff;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #00bfff}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #00bfff;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #00bfff}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#00bfff}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #00bfff;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #00bfff;outline-offset:3px}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} \ No newline at end of file +.splide__track--nav>.splide__list>.splide__slide{border:3px solid rgba(0,0,0,0);cursor:pointer;opacity:.7}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #00bfff;opacity:1}.splide__arrow{background:rgba(0,0,0,0);border:0;cursor:pointer;padding:0;position:absolute;top:50%;transform:translateY(-50%);z-index:1;align-items:center;border-radius:0;display:flex;height:2.5em;justify-content:center;width:2.5em}.splide__arrow svg{fill:#00bfff;height:2.5em;width:2.5em;transition:fill .2s linear}.splide__arrow:hover:not(:disabled) svg{fill:#66d9ff}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:#00bfff 3px solid;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:#00bfff 3px solid;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:10px;margin:3px;padding:0;position:relative;transition:background-color .2s linear,transform .2s linear;width:10px}.splide__pagination__page.is-active{background:#00bfff;z-index:1;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9;background:#66d9ff}.splide__pagination__page:focus-visible{outline:#00bfff 3px solid;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:#00bfff 3px solid;outline-offset:3px}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s infinite linear;border:2px solid #00bfff;border-left-color:rgba(0,0,0,0);border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{border:0 !important;clip:rect(0 0 0 0) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important}.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__play{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}.splide__track--draggable{-webkit-touch-callout:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset: -3px){.splide__slide:focus-visible{outline:#00bfff 3px solid;outline-offset:-3px}}@media screen and (-ms-high-contrast: none){.splide__slide:focus-visible{border:#00bfff 3px solid}}@supports(outline-offset: -3px){.splide.is-focus-in .splide__slide:focus{outline:#00bfff 3px solid;outline-offset:-3px}}@media screen and (-ms-high-contrast: none){.splide.is-focus-in .splide__slide:focus{border:#00bfff 3px solid}}@media screen and (-ms-high-contrast: none){.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#00bfff}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:#00bfff 3px solid;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:#00bfff 3px solid;outline-offset:3px}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%, 0)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotateZ(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotateZ(90deg)}.splide__pagination--ttb{bottom:0;display:flex;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} \ No newline at end of file diff --git a/dist/js/splide-renderer.min.js b/dist/js/splide-renderer.min.js deleted file mode 100644 index acd581f5..00000000 --- a/dist/js/splide-renderer.min.js +++ /dev/null @@ -1,8 +0,0 @@ -/*! - * Splide.js - * Version : 4.1.3 - * License : MIT - * Copyright: 2022 Naotoshi Fujita - */ -var t,n;t=this,n=function(){"use strict";var s="rtl",u="ttb",o={width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:["ArrowUp","ArrowRight"],ArrowRight:["ArrowDown","ArrowLeft"]};function e(t,n,e){return{resolve:function(t,n,i){var r=(i=i||e.direction)!==s||n?i===u?0:-1:1;return o[t]&&o[t][r]||t.replace(/width|left|right/i,function(t,n){t=o[t.toLowerCase()][r]||t;return 0 img","display",t.cover?"none":"inline",n)})},n.buildTranslate=function(t){var n=this.Direction,i=n.resolve,n=n.orient,r=[];return r.push(this.cssOffsetClones(t)),r.push(this.cssOffsetGaps(t)),this.isCenter(t)&&(r.push(this.buildCssValue(n(-50),"%")),r.push.apply(r,this.cssOffsetCenter(t))),r.filter(Boolean).map(function(t){return"translate"+i("X")+"("+t+")"}).join(" ")},n.cssOffsetClones=function(t){var n,i=this.Direction,r=i.resolve,i=i.orient,e=this.getCloneCount();return this.isFixedWidth(t)?(n=(r=this.parseCssValue(t[r("fixedWidth")])).value,r=r.unit,this.buildCssValue(i(n)*e,r)):i(100*e/t.perPage)+"%"},n.cssOffsetCenter=function(t){var n,i,r=this.Direction,e=r.resolve,r=r.orient;return this.isFixedWidth(t)?(n=(e=this.parseCssValue(t[e("fixedWidth")])).value,e=e.unit,[this.buildCssValue(r(n/2),e)]):(n=t.perPage,e=t.gap,(t=[]).push(r(50/n)+"%"),e&&(i=(e=this.parseCssValue(e)).value,e=e.unit,t.push(this.buildCssValue(r((i/n-i)/2),e))),t)},n.cssOffsetGaps=function(t){var n,i,r,e=this.getCloneCount();return e&&t.gap?(n=this.Direction.orient,i=(r=this.parseCssValue(t.gap)).value,r=r.unit,this.isFixedWidth(t)?this.buildCssValue(n(i*e),r):(t=t.perPage,this.buildCssValue(n(e/t*i),r))):""},n.resolve=function(t){return T(this.Direction.resolve(t))},n.cssPadding=function(t,n){t=t.padding,n=this.Direction.resolve(n?"right":"left",!0);return t&&G(t[n]||(b(t)?0:t))||"0px"},n.cssTrackHeight=function(t){var n="";return this.isVertical()&&(O(n=this.cssHeight(t),'"height" is missing.'),n="calc("+n+" - "+this.cssPadding(t,!1)+" - "+this.cssPadding(t,!0)+")"),n},n.cssHeight=function(t){return G(t.height)},n.cssSlideWidth=function(t){return t.autoWidth?"":G(t.fixedWidth)||(this.isVertical()?"":this.cssSlideSize(t))},n.cssSlideHeight=function(t){return G(t.fixedHeight)||(this.isVertical()?t.autoHeight?"":this.cssSlideSize(t):this.cssHeight(t))},n.cssSlideSize=function(t){var n=G(t.gap);return"calc((100%"+(n&&" + "+n)+")/"+(t.perPage||1)+(n&&" - "+n)+")"},n.cssAspectRatio=function(t){t=t.heightRatio;return t?""+1/t:""},n.buildCssValue=function(t,n){return""+t+n},n.parseCssValue=function(t){return y(t)?{value:parseFloat(t)||0,unit:t.replace(/\d*(\.\d*)?/,"")||"px"}:{value:t,unit:"px"}},n.parseBreakpoints=function(){var i=this,t=this.options.breakpoints;this.breakpoints.push(["default",this.options]),t&&P(t,function(t,n){i.breakpoints.push([n,X(X({},i.options),t)])})},n.isFixedWidth=function(t){return!!t[this.Direction.resolve("fixedWidth")]},n.isLoop=function(){return"loop"===this.options.type},n.isCenter=function(t){if("center"===t.focus){if(this.isLoop())return!0;if("slide"===this.options.type)return!this.options.trimSpace}return!1},n.isVertical=function(){return this.options.direction===u},n.buildClasses=function(){var t=this.options;return[r,r+"--"+t.type,r+"--"+t.direction,t.drag&&r+"--draggable",t.isNavigation&&r+"--nav",d,!this.config.hidden&&"is-rendered"].filter(Boolean).join(" ")},n.buildAttrs=function(t){var i="";return P(t,function(t,n){i+=t?" "+T(n)+'="'+t+'"':""}),i.trim()},n.buildStyles=function(t){var i="";return P(t,function(t,n){i+=" "+T(n)+":"+t+";"}),i.trim()},n.renderSlides=function(){var n=this,i=this.config.slideTag;return this.slides.map(function(t){return"<"+i+" "+n.buildAttrs(t.attrs)+">"+(t.html||"")+""}).join("")},n.cover=function(t){var n=t.styles,t=t.html,t=void 0===t?"":t;this.options.cover&&!this.options.lazyLoad&&(t=t.match(//))&&t[2]&&(n.background="center/cover no-repeat url('"+t[2]+"')")},n.generateClones=function(r){for(var e=this.options.classes,s=this.getCloneCount(),t=r.slice();t.length')+this.renderArrow(!0)+this.renderArrow(!1)+"

@@ -75,11 +85,11 @@ describe( 'Elements', () => {

`; - const splide = init( {}, { html } ); + const splide = init({}, { html }); const { Elements } = splide.Components; - expect( Elements.track.id ).not.toBe( 'nested-splide-track' ); - expect( Elements.list.id ).not.toBe( 'nested-splide-list' ); - expect( Elements.slides.length ).toBe( 1 ); - } ); -} ); + expect(Elements.track.id).not.toBe('nested-splide-track'); + expect(Elements.list.id).not.toBe('nested-splide-list'); + expect(Elements.slides.length).toBe(1); + }); +}); diff --git a/src/js/components/Keyboard/Keyboard.ts b/src/js/components/Keyboard/Keyboard.ts index 36fc18ca..31f24f4d 100644 --- a/src/js/components/Keyboard/Keyboard.ts +++ b/src/js/components/Keyboard/Keyboard.ts @@ -1,10 +1,7 @@ import { ARROW_LEFT, ARROW_RIGHT } from '../../constants/arrows'; -import { EVENT_MOVE, EVENT_UPDATED } from '../../constants/events'; -import { EventInterface } from '../../constructors'; -import { Splide } from '../../core/Splide/Splide'; -import { BaseComponent, Components, Options } from '../../types'; -import { nextTick } from '../../utils'; -import { normalizeKey } from '../../utils/dom/normalizeKey/normalizeKey'; +import { EVENT_UPDATED } from '../../constants/events'; +import { BaseComponent, ComponentConstructor } from '../../types'; +import { prevent } from '@splidejs/utils'; /** @@ -13,7 +10,7 @@ import { normalizeKey } from '../../utils/dom/normalizeKey/normalizeKey'; * @since 3.0.0 */ export interface KeyboardComponent extends BaseComponent { - disable( disabled: boolean ): void; + disable(disabled: boolean): void; } /** @@ -31,51 +28,23 @@ const KEYBOARD_EVENT = 'keydown'; * @param Splide - A Splide instance. * @param Components - A collection of components. * @param options - Options. + * @param event - An EventInterface instance. * * @return A Keyboard component object. */ -export function Keyboard( Splide: Splide, Components: Components, options: Options ): KeyboardComponent { - const { on, bind, unbind } = EventInterface( Splide ); - const { root } = Splide; +export const Keyboard: ComponentConstructor = (Splide, Components, options, event) => { + const { destroy } = event; const { resolve } = Components.Direction; - /** - * The target element of the keyboard event. - */ - let target: Window | HTMLElement; - - /** - * Indicates whether the component is currently disabled or not. - */ - let disabled: boolean; - /** * Called when the component is mounted. */ function mount(): void { - init(); - on( EVENT_UPDATED, destroy ); - on( EVENT_UPDATED, init ); - on( EVENT_MOVE, onMove ); - } - - /** - * Initializes the component. - */ - function init(): void { const { keyboard } = options; - if ( keyboard ) { - target = keyboard === 'global' ? window : root; - bind( target, KEYBOARD_EVENT, onKeydown ); - } - } - - /** - * Destroys the component. - */ - function destroy(): void { - unbind( target, KEYBOARD_EVENT ); + destroy(); + keyboard && event.bind(keyboard === 'global' ? window : Splide.root, KEYBOARD_EVENT, onKeydown); + event.on(EVENT_UPDATED, mount); } /** @@ -83,18 +52,8 @@ export function Keyboard( Splide: Splide, Components: Components, options: Optio * * @param value - Toggles disabling/enabling the keyboard input. */ - function disable( value: boolean ): void { - disabled = value; - } - - /** - * Called when the slider moves. - * To avoid the slider from moving twice, wait for a tick. - */ - function onMove(): void { - const _disabled = disabled; - disabled = true; - nextTick( () => { disabled = _disabled } ); + function disable(value: boolean): void { + value ? destroy() : mount(); } /** @@ -102,15 +61,13 @@ export function Keyboard( Splide: Splide, Components: Components, options: Optio * * @param e - A KeyboardEvent object. */ - function onKeydown( e: KeyboardEvent ): void { - if ( ! disabled ) { - const key = normalizeKey( e ); - - if ( key === resolve( ARROW_LEFT ) ) { - Splide.go( '<' ); - } else if ( key === resolve( ARROW_RIGHT ) ) { - Splide.go( '>' ); - } + function onKeydown(e: KeyboardEvent): void { + if (e.key === resolve(ARROW_LEFT)) { + Splide.go('<'); + prevent(e, true); + } else if (e.key === resolve(ARROW_RIGHT)) { + Splide.go('>'); + prevent(e, true); } } @@ -119,4 +76,4 @@ export function Keyboard( Splide: Splide, Components: Components, options: Optio destroy, disable, }; -} +}; diff --git a/src/js/components/Keyboard/test/general.test.ts b/src/js/components/Keyboard/test/general.test.ts index 81a2d6e1..7958f6a0 100644 --- a/src/js/components/Keyboard/test/general.test.ts +++ b/src/js/components/Keyboard/test/general.test.ts @@ -1,115 +1,125 @@ import { RTL, TTB } from '../../../constants/directions'; -import { init, keydown, wait } from '../../../test'; +import { init, keydown, wait } from '@test'; -describe( 'Keyboard', () => { - test( 'can control the slider by keyboards.', async () => { - const splide = init( { speed: 0, keyboard: 'global' } ); +describe('Keyboard', () => { + test('can control the slider by keyboards.', async () => { + const splide = init({ speed: 0, keyboard: 'global' }); - keydown( 'ArrowRight' ); - expect( splide.index ).toBe( 1 ); + keydown('ArrowRight'); + expect(splide.index).toBe(1); await wait(); - keydown( 'ArrowRight' ); - expect( splide.index ).toBe( 2 ); + keydown('ArrowRight'); + expect(splide.index).toBe(2); await wait(); - keydown( 'ArrowLeft' ); - expect( splide.index ).toBe( 1 ); + keydown('ArrowLeft'); + expect(splide.index).toBe(1); await wait(); - keydown( 'ArrowLeft' ); - expect( splide.index ).toBe( 0 ); - } ); + keydown('ArrowLeft'); + expect(splide.index).toBe(0); - test( 'can control the slider by keyboards in TTB mode.', async () => { - const splide = init( { direction: TTB, height: 1, speed: 0, keyboard: 'global' } ); + splide.destroy(); + }); - keydown( 'ArrowDown' ); - expect( splide.index ).toBe( 1 ); + test('can control the slider by keyboards in TTB mode.', async () => { + const splide = init({ direction: TTB, height: 1, speed: 0, keyboard: 'global' }); + + keydown('ArrowDown'); + expect(splide.index).toBe(1); await wait(); - keydown( 'ArrowDown' ); - expect( splide.index ).toBe( 2 ); + keydown('ArrowDown'); + expect(splide.index).toBe(2); await wait(); - keydown( 'ArrowUp' ); - expect( splide.index ).toBe( 1 ); + keydown('ArrowUp'); + expect(splide.index).toBe(1); await wait(); - keydown( 'ArrowUp' ); - expect( splide.index ).toBe( 0 ); - } ); + keydown('ArrowUp'); + expect(splide.index).toBe(0); + + splide.destroy(); + }); - test( 'can control the slider by keyboards in RTL mode.', async () => { - const splide = init( { direction: RTL, speed: 0, keyboard: 'global' } ); + test('can control the slider by keyboards in RTL mode.', async () => { + const splide = init({ direction: RTL, speed: 0, keyboard: 'global' }); - keydown( 'ArrowLeft' ); - expect( splide.index ).toBe( 1 ); + keydown('ArrowLeft'); + expect(splide.index).toBe(1); await wait(); - keydown( 'ArrowLeft' ); - expect( splide.index ).toBe( 2 ); + keydown('ArrowLeft'); + expect(splide.index).toBe(2); await wait(); - keydown( 'ArrowRight' ); - expect( splide.index ).toBe( 1 ); + keydown('ArrowRight'); + expect(splide.index).toBe(1); await wait(); - keydown( 'ArrowRight' ); - expect( splide.index ).toBe( 0 ); - } ); + keydown('ArrowRight'); + expect(splide.index).toBe(0); + + splide.destroy(); + }); - test( 'can control the slider by keyboards only when the slider has focus in the `focused` mode.', async () => { - const splide = init( { keyboard: 'focused', speed: 0 } ); + test('can control the slider by keyboards only when the slider has focus in the `focused` mode.', async () => { + const splide = init({ keyboard: 'focused', speed: 0 }); const { root } = splide; - keydown( 'ArrowRight' ); - expect( splide.index ).toBe( 0 ); + keydown('ArrowRight'); + expect(splide.index).toBe(0); await wait(); - splide.Components.Arrows.arrows.prev.focus(); + splide.Components.Arrows.arrows.prev?.focus(); await wait(); - keydown( 'ArrowRight', root ); - expect( splide.index ).toBe( 1 ); - } ); + keydown('ArrowRight', root); + expect(splide.index).toBe(1); - test( 'can disable the keyboard input.', async () => { - const splide = init( { speed: 0, keyboard: 'global' } ); + splide.destroy(); + }); + + test('can disable the keyboard input.', async () => { + const splide = init({ speed: 0, keyboard: 'global' }); const { disable } = splide.Components.Keyboard; - keydown( 'ArrowRight' ); - expect( splide.index ).toBe( 1 ); + keydown('ArrowRight'); + expect(splide.index).toBe(1); await wait(); - disable( true ); + disable(true); - keydown( 'ArrowRight' ); - expect( splide.index ).toBe( 1 ); + keydown('ArrowRight'); + expect(splide.index).toBe(1); await wait(); - keydown( 'ArrowLeft' ); - expect( splide.index ).toBe( 1 ); + keydown('ArrowLeft'); + expect(splide.index).toBe(1); await wait(); - disable( false ); + disable(false); + + keydown('ArrowLeft'); + expect(splide.index).toBe(0); - keydown( 'ArrowLeft' ); - expect( splide.index ).toBe( 0 ); - } ); -} ); + splide.destroy(); + }); +}); diff --git a/src/js/components/Layout/Layout.ts b/src/js/components/Layout/Layout.ts index 0d2fc98d..117a37f2 100644 --- a/src/js/components/Layout/Layout.ts +++ b/src/js/components/Layout/Layout.ts @@ -1,9 +1,8 @@ import { TTB } from '../../constants/directions'; import { EVENT_OVERFLOW, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_UPDATED } from '../../constants/events'; -import { EventInterface, Throttle } from '../../constructors'; -import { Splide } from '../../core/Splide/Splide'; -import { BaseComponent, Components, Options } from '../../types'; -import { abs, apply, assert, isObject, rect, style, toggleClass, unit } from '../../utils'; +import { BaseComponent, ComponentConstructor } from '../../types'; +import { abs, apply, isObject, rect, style, Throttle, toggleClass, unit } from '@splidejs/utils'; +import { assert } from '../../utils'; import { FADE } from '../../constants/types'; import { CLASS_OVERFLOW } from '../../constants/classes'; @@ -14,15 +13,16 @@ import { CLASS_OVERFLOW } from '../../constants/classes'; * @since 3.0.0 */ export interface LayoutComponent extends BaseComponent { - listSize(): number; - slideSize( index: number, withoutGap?: boolean ): number; - sliderSize( withoutGap?: boolean ): number; - totalSize( index?: number, withoutGap?: boolean ): number; - getPadding( right: boolean ): number; + trackSize(): number; + listSize(full?: boolean): number; + slideSize(index: number, withoutGap?: boolean): number; + sliderSize(withoutGap?: boolean): number; + totalSize(index?: number, withoutGap?: boolean): number; + getPadding(right: boolean): number; isOverflow(): boolean; /** @internal */ - resize( force?: boolean ): void; + resize(force?: boolean): void; } /** @@ -33,13 +33,14 @@ export interface LayoutComponent extends BaseComponent { * @param Splide - A Splide instance. * @param Components - A collection of components. * @param options - Options. + * @param event - An EventInterface instance. * * @return An Layout component object. */ -export function Layout( Splide: Splide, Components: Components, options: Options ): LayoutComponent { - const { on, bind, emit } = EventInterface( Splide ); +export const Layout: ComponentConstructor = (Splide, Components, options, event) => { + const { on, bind, emit } = event; const { Slides } = Components; - const { resolve } = Components.Direction; + const { resolve, left, right, width } = Components.Direction; const { root, track, list } = Components.Elements; const { getAt, style: styleSlides } = Slides; @@ -63,9 +64,9 @@ export function Layout( Splide: Splide, Components: Components, options: Options */ function mount(): void { init(); - bind( window, 'resize load', Throttle( apply( emit, EVENT_RESIZE ) ) ); - on( [ EVENT_UPDATED, EVENT_REFRESH ], init ); - on( EVENT_RESIZE, resize ); + bind(window, 'resize load', Throttle(apply(emit, EVENT_RESIZE))); + on([EVENT_UPDATED, EVENT_REFRESH], init); + on(EVENT_RESIZE, resize); } /** @@ -75,11 +76,11 @@ export function Layout( Splide: Splide, Components: Components, options: Options function init(): void { vertical = options.direction === TTB; - style( root, 'maxWidth', unit( options.width ) ); - style( track, resolve( 'paddingLeft' ), cssPadding( false ) ); - style( track, resolve( 'paddingRight' ), cssPadding( true ) ); + style(root, 'maxWidth', unit(options.width)); + style(track, resolve('paddingLeft'), cssPadding(false)); + style(track, resolve('paddingRight'), cssPadding(true)); - resize( true ); + resize(true); } /** @@ -88,22 +89,22 @@ export function Layout( Splide: Splide, Components: Components, options: Options * * @param force - Skips checking the root dimension change and always performs the resizing process. */ - function resize( force?: boolean ): void { - const newRect = rect( root ); + function resize(force?: boolean): void { + const newRect = rect(root); - if ( force || rootRect.width !== newRect.width || rootRect.height !== newRect.height ) { - style( track, 'height', cssTrackHeight() ); + if (force || rootRect.width !== newRect.width || rootRect.height !== newRect.height) { + style(track, 'height', cssTrackHeight()); - styleSlides( resolve( 'marginRight' ), unit( options.gap ) ); - styleSlides( 'width', cssSlideWidth() ); - styleSlides( 'height', cssSlideHeight(), true ); + styleSlides(resolve('marginRight'), unit(options.gap)); + styleSlides('width', cssSlideWidth()); + styleSlides('height', cssSlideHeight(), true); rootRect = newRect; - emit( EVENT_RESIZED ); + emit(EVENT_RESIZED); - if ( overflow !== ( overflow = isOverflow() ) ) { - toggleClass( root, CLASS_OVERFLOW, overflow ); - emit( EVENT_OVERFLOW, overflow ); + if (overflow !== (overflow = isOverflow())) { + toggleClass(root, CLASS_OVERFLOW, overflow); + emit(EVENT_OVERFLOW, overflow); } } } @@ -112,16 +113,14 @@ export function Layout( Splide: Splide, Components: Components, options: Options * Parses the padding option and returns the value for each side. * This method returns `paddingTop` or `paddingBottom` for the vertical slider. * - * @param right - Determines whether to get `paddingRight/Bottom` or `paddingLeft/Top`. + * @param rightPadding - Determines whether to get `paddingRight/Bottom` or `paddingLeft/Top`. * * @return The padding value as a CSS string. */ - function cssPadding( right: boolean ): string { + function cssPadding(rightPadding: boolean): string { const { padding } = options; - const prop = resolve( right ? 'right' : 'left' ); - return padding - && unit( padding[ prop ] || ( isObject( padding ) ? 0 : padding ) ) - || '0px'; + const prop = rightPadding ? right() : left(); + return unit(isObject(padding) ? padding[prop] : padding) || '0px'; } /** @@ -132,10 +131,10 @@ export function Layout( Splide: Splide, Components: Components, options: Options function cssTrackHeight(): string { let height = ''; - if ( vertical ) { + if (vertical) { height = cssHeight(); - assert( height, 'height or heightRatio is missing.' ); - height = `calc(${ height } - ${ cssPadding( false ) } - ${ cssPadding( true ) })`; + assert(height, 'height or heightRatio is missing.'); + height = `calc(${ height } - ${ cssPadding(false) } - ${ cssPadding(true) })`; } return height; @@ -147,7 +146,7 @@ export function Layout( Splide: Splide, Components: Components, options: Options * @return The height as a CSS string if available, or otherwise an empty string. */ function cssHeight(): string { - return unit( options.height || rect( list ).width * options.heightRatio ); + return unit(options.height || rect(list).width * (options.heightRatio || 0)); } /** @@ -158,7 +157,7 @@ export function Layout( Splide: Splide, Components: Components, options: Options function cssSlideWidth(): string | null { return options.autoWidth ? null - : unit( options.fixedWidth ) || ( vertical ? '' : cssSlideSize() ); + : unit(options.fixedWidth) || (vertical ? '' : cssSlideSize()); } /** @@ -167,8 +166,8 @@ export function Layout( Splide: Splide, Components: Components, options: Options * @return The height of the slide. */ function cssSlideHeight(): string | null { - return unit( options.fixedHeight ) - || ( vertical ? ( options.autoHeight ? null : cssSlideSize() ) : cssHeight() ); + return unit(options.fixedHeight) + || (vertical ? (options.autoHeight ? null : cssSlideSize()) : cssHeight()); } /** @@ -177,17 +176,28 @@ export function Layout( Splide: Splide, Components: Components, options: Options * @return The CSS string for slide width or height. */ function cssSlideSize(): string { - const gap = unit( options.gap ); + const gap = unit(options.gap); return `calc((100%${ gap && ` + ${ gap }` })/${ options.perPage || 1 }${ gap && ` - ${ gap }` })`; } /** - * Returns the list width for the horizontal slider, or the height for the vertical slider. + * Returns the track width for the horizontal carousel, or the height for the vertical one. + * + * @return The size of the track element in pixel. + */ + function trackSize(): number { + return rect(track)[width()]; + } + + /** + * Returns the list width for the horizontal carousel, or the height for the vertical one. + * + * @param full - Optional. If `true`, returns the width includes overflowed elements. * * @return The size of the list element in pixel. */ - function listSize(): number { - return rect( list )[ resolve( 'width' ) ]; + function listSize(full?: boolean): number { + return full ? list[resolve('scrollWidth')] : rect(list)[width()]; } /** @@ -198,11 +208,9 @@ export function Layout( Splide: Splide, Components: Components, options: Options * * @return The size of the specified slide element in pixel. */ - function slideSize( index?: number, withoutGap?: boolean ): number { - const Slide = getAt( index || 0 ); - return Slide - ? rect( Slide.slide )[ resolve( 'width' ) ] + ( withoutGap ? 0 : getGap() ) - : 0; + function slideSize(index = 0, withoutGap?: boolean): number { + const slide = getAt(index); + return (slide ? rect(slide.slide)[width()] : 0) + (withoutGap ? 0 : getGap()); } /** @@ -214,16 +222,12 @@ export function Layout( Splide: Splide, Components: Components, options: Options * * @return The total width of slides in the horizontal slider, or the height in the vertical one. */ - function totalSize( index: number, withoutGap?: boolean ): number { - const Slide = getAt( index ); - - if ( Slide ) { - const right = rect( Slide.slide )[ resolve( 'right' ) ]; - const left = rect( list )[ resolve( 'left' ) ]; - return abs( right - left ) + ( withoutGap ? 0 : getGap() ); - } - - return 0; + function totalSize(index: number, withoutGap?: boolean): number { + const first = Components.Slides.get()[0]; + const target = getAt(index); + return first && target + ? abs(rect(target.slide)[right()] - rect(first.slide)[left()]) + (withoutGap ? 0 : getGap()) + : 0; } /** @@ -234,18 +238,27 @@ export function Layout( Splide: Splide, Components: Components, options: Options * * @return The width or height of the slider without clones. */ - function sliderSize( withoutGap?: boolean ): number { - return totalSize( Splide.length - 1 ) - totalSize( 0 ) + slideSize( 0, withoutGap ); + function sliderSize(withoutGap?: boolean): number { + return totalSize(Splide.length - 1) - totalSize(0) + slideSize(0, withoutGap); } /** - * Returns the gap value in pixel by using the computed style of the first slide. + * Computes the gap by the first and second slides, + * without using `margin` for the CSS grid `gap`. + * This always returns 0 if the number of slides is less than 2. * * @return The gap value in pixel. */ function getGap(): number { - const Slide = getAt( 0 ); - return Slide && parseFloat( style( Slide.slide, resolve( 'marginRight' ) ) ) || 0; + const first = getAt(0); + const second = getAt(1); + + if (first && second) { + const firstRect = rect(first.slide); + return abs(rect(second.slide)[left()] - firstRect[left()]) - firstRect[width()]; + } + + return 0; } /** @@ -256,8 +269,11 @@ export function Layout( Splide: Splide, Components: Components, options: Options * * @return The padding value in pixel. */ - function getPadding( right: boolean ): number { - return parseFloat( style( track, resolve( `padding${ right ? 'Right' : 'Left' }` ) ) ) || 0; + function getPadding(right: boolean): number { + return parseFloat(style( + track, + resolve(`padding${ right ? 'Right' : 'Left' }`), + )) || 0; } /** @@ -267,12 +283,13 @@ export function Layout( Splide: Splide, Components: Components, options: Options * @return `true` if the carousel is wider than the list, or otherwise `false`. */ function isOverflow(): boolean { - return Splide.is( FADE ) || sliderSize( true ) > listSize(); + return Splide.is(FADE) || sliderSize(true) > listSize(); } return { mount, resize, + trackSize, listSize, slideSize, sliderSize, @@ -280,4 +297,4 @@ export function Layout( Splide: Splide, Components: Components, options: Options getPadding, isOverflow, }; -} +}; diff --git a/src/js/components/Layout/test/general.test.ts b/src/js/components/Layout/test/general.test.ts index 1d6f80bb..35713574 100644 --- a/src/js/components/Layout/test/general.test.ts +++ b/src/js/components/Layout/test/general.test.ts @@ -1,53 +1,53 @@ import { EVENT_RESIZE } from '../../../constants/events'; -import { init } from '../../../test'; +import { init } from '@test'; -describe( 'Layout', () => { - test( 'can set the max width of the slider.', () => { - const splide = init( { width: 100 } ); +describe('Layout', () => { + test('can set the max width of the slider.', () => { + const splide = init({ width: 100 }); - expect( splide.root.style.maxWidth ).toBe( '100px' ); + expect(splide.root.style.maxWidth).toBe('100px'); splide.destroy(); - } ); + }); - test( 'should init the component again when options are updated.', () => { - const splide = init( { width: 100 } ); - const style = splide.root.style; + test('should init the component again when options are updated.', () => { + const splide = init({ width: 100 }); + const style = splide.root.style; - expect( style.maxWidth ).toBe( '100px' ); + expect(style.maxWidth).toBe('100px'); splide.options = { width: 200 }; - expect( style.maxWidth ).toBe( '200px' ); + expect(style.maxWidth).toBe('200px'); splide.destroy(); - } ); + }); - test( 'should init the component again when the splide is refreshed.', () => { - const splide = init( { width: 100 } ); - const style = splide.root.style; + test('should init the component again when the splide is refreshed.', () => { + const splide = init({ width: 100 }); + const style = splide.root.style; - expect( style.maxWidth ).toBe( '100px' ); + expect(style.maxWidth).toBe('100px'); splide.options = { width: 200 }; splide.refresh(); - expect( style.maxWidth ).toBe( '200px' ); + expect(style.maxWidth).toBe('200px'); splide.destroy(); - } ); + }); - test( 'should update the slide height when the window is resized.', () => { - const splide = init( { width: 1000, heightRatio: 0.5 } ); - const style = splide.Components.Elements.slides[ 0 ].style; + test('should update the slide height when the window is resized.', () => { + const splide = init({ width: 1000, heightRatio: 0.5 }); + const style = splide.Components.Elements.slides[0].style; - expect( style.height ).toBe( '500px' ); + expect(style.height).toBe('500px'); splide.options = { heightRatio: 0.2 }; - splide.emit( EVENT_RESIZE ); + splide.emit(EVENT_RESIZE); - expect( style.height ).toBe( '200px' ); + expect(style.height).toBe('200px'); splide.destroy(); - } ); -} ); + }); +}); diff --git a/src/js/components/Layout/test/ltr.test.ts b/src/js/components/Layout/test/ltr.test.ts index 854e4c0a..e07e6cbd 100644 --- a/src/js/components/Layout/test/ltr.test.ts +++ b/src/js/components/Layout/test/ltr.test.ts @@ -1,104 +1,103 @@ -import { init } from '../../../test'; -import { SLIDER_WIDTH } from '../../../test/fixtures/constants'; +import { init, SLIDER_WIDTH } from '@test'; -describe( 'Layout in the LTR mode', () => { - test( 'can set paddings to the track element.', () => { - const splide1 = init( { padding: '2rem' } ); - const track1 = splide1.Components.Elements.track; +describe('Layout in the LTR mode', () => { + test('can set paddings to the track element.', () => { + const splide1 = init({ padding: '2rem' }); + const track1 = splide1.Components.Elements.track; - expect( track1.style.paddingLeft ).toBe( '2rem' ); - expect( track1.style.paddingRight ).toBe( '2rem' ); + expect(track1.style.paddingLeft).toBe('2rem'); + expect(track1.style.paddingRight).toBe('2rem'); splide1.destroy(); - const splide2 = init( { padding: { left: '4%', right: '5%' } } ); - const track2 = splide2.Components.Elements.track; + const splide2 = init({ padding: { left: '4%', right: '5%' } }); + const track2 = splide2.Components.Elements.track; - expect( track2.style.paddingLeft ).toBe( '4%' ); - expect( track2.style.paddingRight ).toBe( '5%' ); + expect(track2.style.paddingLeft).toBe('4%'); + expect(track2.style.paddingRight).toBe('5%'); splide2.destroy(); - const splide3 = init( { padding: { left: '4%' } } ); - const track3 = splide3.Components.Elements.track; + const splide3 = init({ padding: { left: '4%' } }); + const track3 = splide3.Components.Elements.track; - expect( track3.style.paddingLeft ).toBe( '4%' ); - expect( track3.style.paddingRight ).toBe( '0px' ); + expect(track3.style.paddingLeft).toBe('4%'); + expect(track3.style.paddingRight).toBe('0px'); splide3.destroy(); - } ); + }); - test( 'can set margin as a gap.', () => { - const splide = init( { gap: '2rem' } ); + test('can set margin as a gap.', () => { + const splide = init({ gap: '2rem' }); const slides = splide.Components.Elements.slides; - expect( slides[ 0 ].style.marginRight ).toBe( '2rem' ); - expect( slides[ 1 ].style.marginRight ).toBe( '2rem' ); + expect(slides[0].style.marginRight).toBe('2rem'); + expect(slides[1].style.marginRight).toBe('2rem'); splide.destroy(); - } ); + }); - test( 'can fix the slide width.', () => { - const splide = init( { fixedWidth: 100 } ); + test('can fix the slide width.', () => { + const splide = init({ fixedWidth: 100 }); - expect( splide.Components.Elements.slides[ 0 ].style.width ).toBe( '100px' ); - expect( splide.Components.Elements.slides[ 1 ].style.width ).toBe( '100px' ); + expect(splide.Components.Elements.slides[0].style.width).toBe('100px'); + expect(splide.Components.Elements.slides[1].style.width).toBe('100px'); splide.destroy(); - } ); + }); - test( 'can set the slide height.', () => { - const splide = init( { height: '10rem' } ); + test('can set the slide height.', () => { + const splide = init({ height: '10rem' }); - expect( splide.Components.Elements.slides[ 0 ].style.height ).toBe( '10rem' ); - expect( splide.Components.Elements.slides[ 1 ].style.height ).toBe( '10rem' ); + expect(splide.Components.Elements.slides[0].style.height).toBe('10rem'); + expect(splide.Components.Elements.slides[1].style.height).toBe('10rem'); splide.destroy(); - } ); + }); - test( 'can set the slide height by ratio against the slider width.', () => { - const splide = init( { width: 500, heightRatio: 0.5 } ); + test('can set the slide height by ratio against the slider width.', () => { + const splide = init({ width: 500, heightRatio: 0.5 }); - expect( splide.Components.Elements.slides[ 0 ].style.height ).toBe( '250px' ); - expect( splide.Components.Elements.slides[ 1 ].style.height ).toBe( '250px' ); + expect(splide.Components.Elements.slides[0].style.height).toBe('250px'); + expect(splide.Components.Elements.slides[1].style.height).toBe('250px'); splide.destroy(); - } ); + }); - test( 'can fix the slide height.', () => { - const splide = init( { fixedHeight: 100 } ); + test('can fix the slide height.', () => { + const splide = init({ fixedHeight: 100 }); - expect( splide.Components.Elements.slides[ 0 ].style.height ).toBe( '100px' ); - expect( splide.Components.Elements.slides[ 1 ].style.height ).toBe( '100px' ); + expect(splide.Components.Elements.slides[0].style.height).toBe('100px'); + expect(splide.Components.Elements.slides[1].style.height).toBe('100px'); splide.destroy(); - } ); + }); - test( 'should not set the slide width when the autoWidth is true.', () => { - const splide = init( { autoWidth: true } ); + test('should not set the slide width when the autoWidth is true.', () => { + const splide = init({ autoWidth: true }); - expect( splide.Components.Elements.slides[ 0 ].style.width ).toBe( '' ); - expect( splide.Components.Elements.slides[ 1 ].style.width ).toBe( '' ); + expect(splide.Components.Elements.slides[0].style.width).toBe(''); + expect(splide.Components.Elements.slides[1].style.width).toBe(''); splide.destroy(); - } ); + }); - test( 'can provide the list width.', () => { - const splide = init( { width: 100 } ); - expect( splide.Components.Layout.listSize() ).toBe( 100 ); + test('can provide the list width.', () => { + const splide = init({ width: 100 }); + expect(splide.Components.Layout.listSize()).toBe(100); splide.destroy(); - } ); + }); - test( 'can provide the slide width.', () => { + test('can provide the slide width.', () => { const splide1 = init(); - expect( splide1.Components.Layout.slideSize( 0 ) ).toBe( SLIDER_WIDTH ); - expect( splide1.Components.Layout.slideSize( 1 ) ).toBe( SLIDER_WIDTH ); + expect(splide1.Components.Layout.slideSize(0)).toBe(SLIDER_WIDTH); + expect(splide1.Components.Layout.slideSize(1)).toBe(SLIDER_WIDTH); splide1.destroy(); - const splide2 = init( { perPage: 2 } ); + const splide2 = init({ perPage: 2 }); - expect( splide2.Components.Layout.slideSize( 0 ) ).toBe( SLIDER_WIDTH / 2 ); - expect( splide2.Components.Layout.slideSize( 1 ) ).toBe( SLIDER_WIDTH / 2 ); + expect(splide2.Components.Layout.slideSize(0)).toBe(SLIDER_WIDTH / 2); + expect(splide2.Components.Layout.slideSize(1)).toBe(SLIDER_WIDTH / 2); splide2.destroy(); - } ); + }); - test( 'should not set the track width.', () => { - const splide = init( { height: 100 } ); + test('should not set the track width.', () => { + const splide = init({ height: 100 }); - expect( splide.Components.Elements.track.style.height ).toBe( '' ); + expect(splide.Components.Elements.track.style.height).toBe(''); splide.destroy(); - } ); -} ); + }); +}); diff --git a/src/js/components/Layout/test/rtl.test.ts b/src/js/components/Layout/test/rtl.test.ts index 7a1e084d..abeedb44 100644 --- a/src/js/components/Layout/test/rtl.test.ts +++ b/src/js/components/Layout/test/rtl.test.ts @@ -1,13 +1,13 @@ import { RTL } from '../../../constants/directions'; -import { init } from '../../../test'; +import { init } from '@test'; -describe( 'Layout in the RTL mode', () => { - test( 'can set margin as a gap.', () => { - const splide = init( { direction: RTL, gap: '2rem' } ); +describe('Layout in the RTL mode', () => { + test('can set margin as a gap.', () => { + const splide = init({ direction: RTL, gap: '2rem' }); - expect( splide.Components.Elements.slides[ 0 ].style.marginLeft ).toBe( '2rem' ); - expect( splide.Components.Elements.slides[ 1 ].style.marginLeft ).toBe( '2rem' ); + expect(splide.Components.Elements.slides[0].style.marginLeft).toBe('2rem'); + expect(splide.Components.Elements.slides[1].style.marginLeft).toBe('2rem'); splide.destroy(); - } ); -} ); + }); +}); diff --git a/src/js/components/Layout/test/ttb.test.ts b/src/js/components/Layout/test/ttb.test.ts index 34de7c6e..8ea87d02 100644 --- a/src/js/components/Layout/test/ttb.test.ts +++ b/src/js/components/Layout/test/ttb.test.ts @@ -1,92 +1,92 @@ import { TTB } from '../../../constants/directions'; -import { init } from '../../../test'; +import { init } from '@test'; -describe( 'Layout in the TTB mode', () => { - test( 'can set paddings to the track element.', () => { - const splide1 = init( { height: 100, direction: TTB, padding: '2rem' } ); - const track1 = splide1.Components.Elements.track; +describe('Layout in the TTB mode', () => { + test('can set paddings to the track element.', () => { + const splide1 = init({ height: 100, direction: TTB, padding: '2rem' }); + const track1 = splide1.Components.Elements.track; - expect( track1.style.paddingTop ).toBe( '2rem' ); - expect( track1.style.paddingBottom ).toBe( '2rem' ); + expect(track1.style.paddingTop).toBe('2rem'); + expect(track1.style.paddingBottom).toBe('2rem'); splide1.destroy(); - const splide2 = init( { height: 100, direction: TTB, padding: { top: '4%', bottom: '5%' } } ); - const track2 = splide2.Components.Elements.track; + const splide2 = init({ height: 100, direction: TTB, padding: { top: '4%', bottom: '5%' } }); + const track2 = splide2.Components.Elements.track; - expect( track2.style.paddingTop ).toBe( '4%' ); - expect( track2.style.paddingBottom ).toBe( '5%' ); + expect(track2.style.paddingTop).toBe('4%'); + expect(track2.style.paddingBottom).toBe('5%'); splide2.destroy(); - const splide3 = init( { height: 100, direction: TTB, padding: { top: '4%' } } ); - const track3 = splide3.Components.Elements.track; + const splide3 = init({ height: 100, direction: TTB, padding: { top: '4%' } }); + const track3 = splide3.Components.Elements.track; - expect( track3.style.paddingTop ).toBe( '4%' ); - expect( track3.style.paddingBottom ).toBe( '0px' ); + expect(track3.style.paddingTop).toBe('4%'); + expect(track3.style.paddingBottom).toBe('0px'); splide3.destroy(); - } ); + }); - test( 'can set margin as a gap.', () => { - const splide = init( { height: 100, direction: TTB, gap: '2rem' } ); + test('can set margin as a gap.', () => { + const splide = init({ height: 100, direction: TTB, gap: '2rem' }); const slides = splide.Components.Elements.slides; - expect( slides[ 0 ].style.marginBottom ).toBe( '2rem' ); - expect( slides[ 1 ].style.marginBottom ).toBe( '2rem' ); + expect(slides[0].style.marginBottom).toBe('2rem'); + expect(slides[1].style.marginBottom).toBe('2rem'); splide.destroy(); - } ); + }); - test( 'can set height of the track element.', () => { - const splide = init( { height: 100, direction: TTB } ); - expect( splide.Components.Elements.track.style.height ).toBe( 'calc(100px - 0px - 0px)' ); + test('can set height of the track element.', () => { + const splide = init({ height: 100, direction: TTB }); + expect(splide.Components.Elements.track.style.height).toBe('calc(100px - 0px - 0px)'); splide.destroy(); - } ); + }); - test( 'can set height of the track element with subtracting paddings.', () => { - const splide = init( { height: 100, direction: TTB, padding: { top: '1rem', bottom: '2rem' } } ); - expect( splide.Components.Elements.track.style.height ).toBe( 'calc(100px - 1rem - 2rem)' ); + test('can set height of the track element with subtracting paddings.', () => { + const splide = init({ height: 100, direction: TTB, padding: { top: '1rem', bottom: '2rem' } }); + expect(splide.Components.Elements.track.style.height).toBe('calc(100px - 1rem - 2rem)'); splide.destroy(); - } ); + }); - test( 'can set height of the track element by heightRatio.', () => { - const splide = init( { width: 500, heightRatio: 0.5, direction: TTB } ); + test('can set height of the track element by heightRatio.', () => { + const splide = init({ width: 500, heightRatio: 0.5, direction: TTB }); - expect( splide.Components.Elements.track.style.height ).toBe( 'calc(250px - 0px - 0px)' ); + expect(splide.Components.Elements.track.style.height).toBe('calc(250px - 0px - 0px)'); splide.destroy(); - } ); + }); - test( 'can set height of the track element by heightRatio with subtracting paddings.', () => { - const splide = init( { width: 500, heightRatio: 0.5, direction: TTB, padding: { top: '1rem', bottom: '2rem' } } ); - expect( splide.Components.Elements.track.style.height ).toBe( 'calc(250px - 1rem - 2rem)' ); + test('can set height of the track element by heightRatio with subtracting paddings.', () => { + const splide = init({ width: 500, heightRatio: 0.5, direction: TTB, padding: { top: '1rem', bottom: '2rem' } }); + expect(splide.Components.Elements.track.style.height).toBe('calc(250px - 1rem - 2rem)'); splide.destroy(); - } ); + }); - test( 'should not set the slide width.', () => { - const splide = init( { height: 100, direction: TTB } ); + test('should not set the slide width.', () => { + const splide = init({ height: 100, direction: TTB }); const slides = splide.Components.Elements.slides; - expect( slides[ 0 ].style.width ).toBe( '' ); - expect( slides[ 1 ].style.width ).toBe( '' ); + expect(slides[0].style.width).toBe(''); + expect(slides[1].style.width).toBe(''); splide.destroy(); - } ); + }); - test( 'can provide the slide height.', () => { - const splide1 = init( { height: 500, direction: TTB } ); + test('can provide the slide height.', () => { + const splide1 = init({ height: 500, direction: TTB }); - expect( splide1.Components.Layout.slideSize( 0 ) ).toBe( 500 ); - expect( splide1.Components.Layout.slideSize( 1 ) ).toBe( 500 ); + expect(splide1.Components.Layout.slideSize(0)).toBe(500); + expect(splide1.Components.Layout.slideSize(1)).toBe(500); splide1.destroy(); - const splide2 = init( { height: 500, perPage: 2, direction: TTB } ); + const splide2 = init({ height: 500, perPage: 2, direction: TTB }); - expect( splide2.Components.Layout.slideSize( 0 ) ).toBe( 250 ); - expect( splide2.Components.Layout.slideSize( 1 ) ).toBe( 250 ); + expect(splide2.Components.Layout.slideSize(0)).toBe(250); + expect(splide2.Components.Layout.slideSize(1)).toBe(250); splide2.destroy(); - } ); + }); // This test must be the last. - test( 'should assert if both height and heightRatio are not available.', () => { - expect( () => { - init( { direction: TTB } ); - } ).toThrowError(); - } ); -} ); + test('should assert if both height and heightRatio are not available.', () => { + expect(() => { + init({ direction: TTB }); + }).toThrowError(); + }); +}); diff --git a/src/js/components/LazyLoad/LazyLoad.ts b/src/js/components/LazyLoad/LazyLoad.ts index 9cf7e9ec..71d043b2 100644 --- a/src/js/components/LazyLoad/LazyLoad.ts +++ b/src/js/components/LazyLoad/LazyLoad.ts @@ -1,14 +1,13 @@ -import { CLASS_LOADING } from '../../constants/classes'; +import { CLASS_LOADING, CLASS_SPINNER } from '../../constants/classes'; import { + EVENT_LAZYLOAD_ERROR, EVENT_LAZYLOAD_LOADED, EVENT_MOVED, EVENT_REFRESH, EVENT_RESIZE, EVENT_SCROLLED, } from '../../constants/events'; -import { EventInterface } from '../../constructors'; -import { Splide } from '../../core/Splide/Splide'; -import { BaseComponent, Components, Options } from '../../types'; +import { BaseComponent, ComponentConstructor } from '../../types'; import { addClass, apply, @@ -18,11 +17,11 @@ import { empty, getAttribute, queryAll, - remove, removeAttribute, removeClass, + removeNode, setAttribute, -} from '../../utils'; +} from '@splidejs/utils'; import { SlideComponent } from '../Slides/Slide'; import { IMAGE_SELECTOR, SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE } from './constants'; @@ -43,7 +42,7 @@ export interface LazyLoadComponent extends BaseComponent { * * @since 4.0.0 */ -type LazyLoadEntry = [ HTMLImageElement, SlideComponent, HTMLSpanElement ]; +type LazyLoadEntry = [HTMLImageElement, SlideComponent, HTMLSpanElement]; /** * The component for lazily loading images. @@ -53,13 +52,14 @@ type LazyLoadEntry = [ HTMLImageElement, SlideComponent, HTMLSpanElement ]; * @param Splide - A Splide instance. * @param Components - A collection of components. * @param options - Options. + * @param event - An EventInterface instance. * * @return An LazyLoad component object. */ -export function LazyLoad( Splide: Splide, Components: Components, options: Options ): LazyLoadComponent { - const { on, off, bind, emit } = EventInterface( Splide ); +export const LazyLoad: ComponentConstructor = (Splide, Components, options, event) => { + const { on, off, bind, emit } = event; const isSequential = options.lazyLoad === 'sequential'; - const events = [ EVENT_MOVED, EVENT_SCROLLED ]; + const events = [EVENT_MOVED, EVENT_SCROLLED]; /** * Stores data of images. @@ -70,9 +70,9 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio * Called when the component is mounted. */ function mount(): void { - if ( options.lazyLoad ) { + if (options.lazyLoad) { init(); - on( EVENT_REFRESH, init ); + on(EVENT_REFRESH, init); } } @@ -81,38 +81,39 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio * Be aware that `refresh` also calls this method. */ function init() { - empty( entries ); + empty(entries); register(); - if ( isSequential ) { + if (isSequential) { loadNext(); } else { - off( events ); - on( events, check ); + off(events); + on(events, check); check(); } } /** * Finds images and register them as entries with creating spinner elements. - * Note that spinner can be already available because of `refresh()`. + * Note that a spinner can be already available because of `refresh()`. */ function register(): void { - Components.Slides.forEach( Slide => { - queryAll( Slide.slide, IMAGE_SELECTOR ).forEach( img => { - const src = getAttribute( img, SRC_DATA_ATTRIBUTE ); - const srcset = getAttribute( img, SRCSET_DATA_ATTRIBUTE ); - - if ( src !== img.src || srcset !== img.srcset ) { - const className = options.classes.spinner; - const parent = img.parentElement; - const spinner = child( parent, `.${ className }` ) || create( 'span', className, parent ); - - entries.push( [ img, Slide, spinner ] ); - img.src || display( img, 'none' ); + Components.Slides.forEach(Slide => { + queryAll(Slide.slide, IMAGE_SELECTOR).forEach(img => { + const src = getAttribute(img, SRC_DATA_ATTRIBUTE); + const srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE); + + if (src !== img.src || srcset !== img.srcset) { + const parent = img.parentElement; + + if(parent) { + const spinner = child(parent, `.${ CLASS_SPINNER }`) || create('span', Splide.classes('spinner'), parent); + entries.push([img, Slide, spinner]); + img.src || display(img, 'none'); + } } - } ); - } ); + }); + }); } /** @@ -120,12 +121,12 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio * The last `+1` is for the current page. */ function check(): void { - entries = entries.filter( data => { - const distance = options.perPage * ( ( options.preloadPages || 1 ) + 1 ) - 1; - return data[ 1 ].isWithin( Splide.index, distance ) ? load( data ) : true; - } ); + entries = entries.filter(data => { + const distance = (options.perPage || 1) * ((options.preloadPages || 1) + 1) - 1; + return data[1].isWithin(Splide.index, distance) ? load(data) : true; + }); - entries.length || off( events ); + entries.length || off(events); } /** @@ -133,16 +134,16 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio * * @param data - A LazyLoadEntry object. */ - function load( data: LazyLoadEntry ): void { - const [ img ] = data; + function load(data: LazyLoadEntry): void { + const [img] = data; - addClass( data[ 1 ].slide, CLASS_LOADING ); - bind( img, 'load error', apply( onLoad, data ) ); + addClass(data[1].slide, CLASS_LOADING); + bind(img, 'load error', apply(onLoad, data)); - setAttribute( img, 'src', getAttribute( img, SRC_DATA_ATTRIBUTE ) ); - setAttribute( img, 'srcset', getAttribute( img, SRCSET_DATA_ATTRIBUTE ) ); - removeAttribute( img, SRC_DATA_ATTRIBUTE ); - removeAttribute( img, SRCSET_DATA_ATTRIBUTE ); + setAttribute(img, 'src', getAttribute(img, SRC_DATA_ATTRIBUTE)); + setAttribute(img, 'srcset', getAttribute(img, SRCSET_DATA_ATTRIBUTE)); + + removeAttribute(img, [SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE]); } /** @@ -151,16 +152,18 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio * @param data - A LazyLoadEntry object. * @param e - An Event object. */ - function onLoad( data: LazyLoadEntry, e: Event ): void { - const [ img, Slide ] = data; + function onLoad(data: LazyLoadEntry, e: Event): void { + const [img, Slide] = data; - removeClass( Slide.slide, CLASS_LOADING ); + removeClass(Slide.slide, CLASS_LOADING); - if ( e.type !== 'error' ) { - remove( data[ 2 ] ); - display( img, '' ); - emit( EVENT_LAZYLOAD_LOADED, img, Slide ); - emit( EVENT_RESIZE ); + if (e.type !== 'error') { + removeNode(data[2]); + display(img, ''); + emit(EVENT_LAZYLOAD_LOADED, img, Slide); + emit(EVENT_RESIZE); + } else { + emit(EVENT_LAZYLOAD_ERROR, img, Slide); } isSequential && loadNext(); @@ -170,12 +173,13 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio * Starts loading a next image. */ function loadNext(): void { - entries.length && load( entries.shift() ); + const next = entries.shift(); + next && load(next); } return { mount, - destroy: apply( empty, entries ), + destroy: apply(empty, entries), check, }; -} +}; diff --git a/src/js/components/LazyLoad/test/nearby.test.ts b/src/js/components/LazyLoad/test/nearby.test.ts index c6d94361..d74d5bb5 100644 --- a/src/js/components/LazyLoad/test/nearby.test.ts +++ b/src/js/components/LazyLoad/test/nearby.test.ts @@ -1,172 +1,174 @@ import { CLASS_LOADING, CLASS_SPINNER } from '../../../constants/classes'; import { EVENT_LAZYLOAD_LOADED } from '../../../constants/events'; -import { fire, init } from '../../../test'; -import { URL } from '../../../test/fixtures/constants'; +import { fire, init, FAKE_URL } from '@test'; import { SRC_DATA_ATTRIBUTE, SRCSET_DATA_ATTRIBUTE } from '../constants'; -describe( 'LazyLoad in the `nearby` mode', () => { - test( 'does nothing if the lazyLoad option is falsy.', () => { - init( {}, { src: false, dataSrc: true } ); - const images = document.getElementsByTagName( 'img' ); +describe('LazyLoad in the `nearby` mode', () => { + test('does nothing if the lazyLoad option is falsy.', () => { + init({}, { useImage: true, src:false, dataSrc: true }); + const images = document.getElementsByTagName('img'); - expect( images[ 0 ].src ).toBe( '' ); - expect( images[ 0 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeFalsy(); - } ); + expect(images[0].src).toBe(''); + expect(images[0].getAttribute(SRC_DATA_ATTRIBUTE)).not.toBeFalsy(); + }); - test( 'can find the src data attribute and set the value to the src.', () => { - init( { lazyLoad: true }, { src: false, dataSrc: true } ); - const images = document.getElementsByTagName( 'img' ); + test('can find the src data attribute and set the value to the src.', () => { + init({ lazyLoad: true }, { useImage: true, src:false, dataSrc: true }); + const images = document.getElementsByTagName('img'); - expect( images[ 0 ].src ).toBe( `${ URL }/0.jpg` ); - expect( images[ 0 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull(); + expect(images[0].src).toBe(`${ FAKE_URL }/0.jpg`); + expect(images[0].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull(); - expect( images[ 1 ].src ).toBe( `${ URL }/1.jpg` ); - expect( images[ 1 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull(); - } ); + expect(images[1].src).toBe(`${ FAKE_URL }/1.jpg`); + expect(images[1].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull(); + }); - test( 'can find the srcset data attribute and set the value to the src.', () => { - init( { lazyLoad: true }, { src: false, dataSrcset: true } ); - const images = document.getElementsByTagName( 'img' ); + test('can find the srcset data attribute and set the value to the src.', () => { + init({ lazyLoad: true }, { useImage: true, src:false, dataSrcset: true }); + const images = document.getElementsByTagName('img'); - expect( images[ 0 ].srcset ).toBe( `${ URL }/0.jpg 320w` ); - expect( images[ 0 ].getAttribute( SRCSET_DATA_ATTRIBUTE ) ).toBeNull(); + expect(images[0].srcset).toBe(`${ FAKE_URL }/0.jpg 320w`); + expect(images[0].getAttribute(SRCSET_DATA_ATTRIBUTE)).toBeNull(); - expect( images[ 1 ].srcset ).toBe( `${ URL }/1.jpg 320w` ); - expect( images[ 1 ].getAttribute( SRCSET_DATA_ATTRIBUTE ) ).toBeNull(); - } ); + expect(images[1].srcset).toBe(`${ FAKE_URL }/1.jpg 320w`); + expect(images[1].getAttribute(SRCSET_DATA_ATTRIBUTE)).toBeNull(); + }); - test( 'should set the src if the value is not same with the one provided by the data attribute.', () => { - init( { lazyLoad: true }, { src: 'placeholder', dataSrc: true } ); - const images = document.getElementsByTagName( 'img' ); + test('should set the src if the value is not same with the one provided by the data attribute.', () => { + init({ lazyLoad: true }, { useImage: true, src:['placeholder'], dataSrc: true }); + const images = document.getElementsByTagName('img'); - expect( images[ 0 ].src ).toBe( `${ URL }/0.jpg` ); - expect( images[ 0 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull(); + expect(images[0].src).toBe(`${ FAKE_URL }/0.jpg`); + expect(images[0].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull(); - expect( images[ 1 ].src ).toBe( `${ URL }/1.jpg` ); - expect( images[ 1 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull(); - } ); + expect(images[1].src).toBe(`${ FAKE_URL }/1.jpg`); + expect(images[1].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull(); + }); - test( 'can append a loading spinner and add a loading class to slides.', () => { - const splide = init( { lazyLoad: true }, { src: false, dataSrc: true } ); - const slide1 = splide.Components.Slides.getAt( 0 ).slide; - const slide2 = splide.Components.Slides.getAt( 1 ).slide; - const spinner1 = slide1.querySelector( `.${ CLASS_SPINNER }` ); - const spinner2 = slide2.querySelector( `.${ CLASS_SPINNER }` ); + test('can append a loading spinner and add a loading class to slides.', () => { + const splide = init({ lazyLoad: true }, { useImage: true, src:false, dataSrc: true }); + const slide1 = splide.Components.Slides.getAt(0)?.slide; + const slide2 = splide.Components.Slides.getAt(1)?.slide; + const spinner1 = slide1?.querySelector(`.${ CLASS_SPINNER }`); + const spinner2 = slide2?.querySelector(`.${ CLASS_SPINNER }`); - expect( spinner1 instanceof HTMLSpanElement ).toBe( true ); - expect( spinner2 instanceof HTMLSpanElement ).toBe( true ); + expect(spinner1 instanceof HTMLSpanElement).toBe(true); + expect(spinner2 instanceof HTMLSpanElement).toBe(true); - expect( slide1.classList.contains( CLASS_LOADING ) ).toBe( true ); - expect( slide2.classList.contains( CLASS_LOADING ) ).toBe( true ); - } ); + expect(slide1?.classList.contains(CLASS_LOADING)).toBe(true); + expect(slide2?.classList.contains(CLASS_LOADING)).toBe(true); + }); - test( 'can remove a loading spinner and a loading class on load.', () => { - const splide = init( { lazyLoad: true }, { src: false, dataSrc: true } ); - const images = document.getElementsByTagName( 'img' ); - const slide1 = splide.Components.Slides.getAt( 0 ).slide; - const slide2 = splide.Components.Slides.getAt( 1 ).slide; + test('can remove a loading spinner and a loading class on load.', () => { + const splide = init({ lazyLoad: true }, { useImage: true, src:false, dataSrc: true }); + const images = document.getElementsByTagName('img'); + const slide1 = splide.Components.Slides.getAt(0)?.slide; + const slide2 = splide.Components.Slides.getAt(1)?.slide; - fire( images[ 0 ], 'load' ); + fire(images[0], 'load'); - expect( slide1.querySelector( `.${ CLASS_SPINNER }` ) ).toBeNull(); - expect( slide1.classList.contains( CLASS_LOADING ) ).toBe( false ); + expect(slide1?.querySelector(`.${ CLASS_SPINNER }`)).toBeNull(); + expect(slide1?.classList.contains(CLASS_LOADING)).toBe(false); // The slide2 is still loading. - expect( slide2.querySelector( `.${ CLASS_SPINNER }` ) ).not.toBeNull(); - expect( slide2.classList.contains( CLASS_LOADING ) ).toBe( true ); + expect(slide2?.querySelector(`.${ CLASS_SPINNER }`)).not.toBeNull(); + expect(slide2?.classList.contains(CLASS_LOADING)).toBe(true); - fire( images[ 1 ], 'load' ); + fire(images[1], 'load'); - expect( slide2.querySelector( `.${ CLASS_SPINNER }` ) ).toBeNull(); - expect( slide2.classList.contains( CLASS_LOADING ) ).toBe( false ); - } ); + expect(slide2?.querySelector(`.${ CLASS_SPINNER }`)).toBeNull(); + expect(slide2?.classList.contains(CLASS_LOADING)).toBe(false); + }); - test( 'can remove a loading class on error.', () => { - const splide = init( { lazyLoad: true }, { src: false, dataSrc: true } ); - const images = document.getElementsByTagName( 'img' ); - const slide1 = splide.Components.Slides.getAt( 0 ).slide; - const slide2 = splide.Components.Slides.getAt( 1 ).slide; + test('can remove a loading class on error.', () => { + const splide = init({ lazyLoad: true }, { useImage: true, src:false, dataSrc: true }); + const images = document.getElementsByTagName('img'); + const slide1 = splide.Components.Slides.getAt(0)?.slide; + const slide2 = splide.Components.Slides.getAt(1)?.slide; - fire( images[ 0 ], 'error' ); + fire(images[0], 'error'); // The spinner will not be removed on error. - expect( slide1.querySelector( `.${ CLASS_SPINNER }` ) ).not.toBeNull(); - expect( slide1.classList.contains( CLASS_LOADING ) ).toBe( false ); + expect(slide1?.querySelector(`.${ CLASS_SPINNER }`)).not.toBeNull(); + expect(slide1?.classList.contains(CLASS_LOADING)).toBe(false); - fire( images[ 1 ], 'error' ); + fire(images[1], 'error'); - expect( slide2.querySelector( `.${ CLASS_SPINNER }` ) ).not.toBeNull(); - expect( slide2.classList.contains( CLASS_LOADING ) ).toBe( false ); - } ); + expect(slide2?.querySelector(`.${ CLASS_SPINNER }`)).not.toBeNull(); + expect(slide2?.classList.contains(CLASS_LOADING)).toBe(false); + }); - test( 'can start loading an image if the slide is close to the current location.', () => { - const splide = init( { lazyLoad: true, speed: 0 }, { src: false, dataSrc: true } ); - const images = document.getElementsByTagName( 'img' ); + test('can start loading an image if the slide is close to the current location.', () => { + const splide = init({ lazyLoad: true, speed: 0 }, { useImage: true, src:false, dataSrc: true }); + const images = document.getElementsByTagName('img'); - expect( images[ 3 ].src ).toBe( '' ); - expect( images[ 3 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeNull(); + expect(images[3].src).toBe(''); + expect(images[3].getAttribute(SRC_DATA_ATTRIBUTE)).not.toBeNull(); - splide.go( 2 ); + splide.go(2); - expect( images[ 3 ].src ).toBe( `${ URL }/3.jpg` ); - expect( images[ 3 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull(); + expect(images[3].src).toBe(`${ FAKE_URL }/3.jpg`); + expect(images[3].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull(); - expect( images[ 4 ].src ).toBe( '' ); - expect( images[ 4 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeNull(); + expect(images[4].src).toBe(''); + expect(images[4].getAttribute(SRC_DATA_ATTRIBUTE)).not.toBeNull(); - splide.go( 3 ); + splide.go(3); - expect( images[ 4 ].src ).toBe( `${ URL }/4.jpg` ); - expect( images[ 4 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).toBeNull(); - } ); + expect(images[4].src).toBe(`${ FAKE_URL }/4.jpg`); + expect(images[4].getAttribute(SRC_DATA_ATTRIBUTE)).toBeNull(); + }); - test( 'can start loading images of previous slides in the loop mode.', () => { - const splide = init( { type: 'loop', lazyLoad: true, perPage: 3 }, { src: false, dataSrc: true } ); - const prev1 = splide.Components.Slides.getAt( -1 ); - const prev2 = splide.Components.Slides.getAt( -2 ); - const last1 = splide.Components.Slides.getAt( splide.length - 1 ); - const last2 = splide.Components.Slides.getAt( splide.length - 2 ); + test('can start loading images of previous slides in the loop mode.', () => { + const splide = init({ type: 'loop', lazyLoad: true, perPage: 3 }, { useImage: true, src:false, dataSrc: true }); + const prev1 = splide.Components.Slides.getAt(-1); + const prev2 = splide.Components.Slides.getAt(-2); + const last1 = splide.Components.Slides.getAt(splide.length - 1); + const last2 = splide.Components.Slides.getAt(splide.length - 2); - expect( prev1.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 1 }.jpg` ); - expect( prev2.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 2 }.jpg` ); + expect(prev1?.slide.querySelector('img')?.src).toBe(`${ FAKE_URL }/${ splide.length - 1 }.jpg`); + expect(prev2?.slide.querySelector('img')?.src).toBe(`${ FAKE_URL }/${ splide.length - 2 }.jpg`); - expect( last1.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 1 }.jpg` ); - expect( last2.slide.querySelector( 'img' ).src ).toBe( `${ URL }/${ splide.length - 2 }.jpg` ); - } ); + expect(last1?.slide.querySelector('img')?.src).toBe(`${ FAKE_URL }/${ splide.length - 1 }.jpg`); + expect(last2?.slide.querySelector('img')?.src).toBe(`${ FAKE_URL }/${ splide.length - 2 }.jpg`); + }); - test( 'should not start loading an image if the slide is not close to the current location.', () => { - init( { lazyLoad: true }, { src: false, dataSrc: true } ); - const images = document.getElementsByTagName( 'img' ); + test('should not start loading an image if the slide is not close to the current location.', () => { + init({ lazyLoad: true }, { useImage: true, src:false, dataSrc: true }); + const images = document.getElementsByTagName('img'); - expect( images[ 3 ].src ).toBe( '' ); - expect( images[ 3 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeNull(); + expect(images[3].src).toBe(''); + expect(images[3].getAttribute(SRC_DATA_ATTRIBUTE)).not.toBeNull(); - expect( images[ 4 ].src ).toBe( '' ); - expect( images[ 4 ].getAttribute( SRC_DATA_ATTRIBUTE ) ).not.toBeNull(); - } ); + expect(images[4].src).toBe(''); + expect(images[4].getAttribute(SRC_DATA_ATTRIBUTE)).not.toBeNull(); + }); - test( 'should emit an event after load.', done => { - const splide = init( { lazyLoad: true }, { src: false, dataSrc: true } ); - const Slide1 = splide.Components.Slides.getAt( 0 ); - const Slide2 = splide.Components.Slides.getAt( 1 ); + test('should emit an event after load.', done => { + const splide = init({ lazyLoad: true }, { useImage: true, src:false, dataSrc: true }); + const Slide1 = splide.Components.Slides.getAt(0); + const Slide2 = splide.Components.Slides.getAt(1); let count = 0; - splide.on( EVENT_LAZYLOAD_LOADED, ( img, Slide ) => { - if ( count === 0 ) { - expect( Slide ).toBe( Slide1 ); + splide.on(EVENT_LAZYLOAD_LOADED, (img, Slide) => { + if (count === 0) { + expect(Slide).toBe(Slide1); } - if ( count === 1 ) { - expect( Slide ).toBe( Slide2 ); + if (count === 1) { + expect(Slide).toBe(Slide2); done(); } count++; - } ); + }); - fire( Slide1.slide.querySelector( 'img' ), 'load' ); - fire( Slide2.slide.querySelector( 'img' ), 'load' ); - } ); -} ); + const img1 = Slide1?.slide.querySelector('img'); + const img2 = Slide2?.slide.querySelector('img'); + + img1 && fire(img1, 'load'); + img2 && fire(img2, 'load'); + }); +}); diff --git a/src/js/components/LazyLoad/test/sequential.test.ts b/src/js/components/LazyLoad/test/sequential.test.ts index 1e38b9c0..5f51b4b4 100644 --- a/src/js/components/LazyLoad/test/sequential.test.ts +++ b/src/js/components/LazyLoad/test/sequential.test.ts @@ -1,36 +1,35 @@ -import { fire, init } from '../../../test'; -import { URL } from '../../../test/fixtures/constants'; +import { fire, init, FAKE_URL } from '@test'; -describe( 'LazyLoad in the `sequential` mode', () => { - test( 'can sequentially load images.', () => { - init( { lazyLoad: 'sequential' }, { src: false, dataSrc: true } ); - const images = document.getElementsByTagName( 'img' ); +describe('LazyLoad in the `sequential` mode', () => { + test('can sequentially load images.', () => { + init({ lazyLoad: 'sequential' }, { useImage: true, src:false, dataSrc: true }); + const images = document.getElementsByTagName('img'); - expect( images[ 0 ].src ).toBe( `${ URL }/0.jpg` ); - expect( images[ 1 ].src ).toBe( '' ); - expect( images[ 2 ].src ).toBe( '' ); + expect(images[0].src).toBe(`${ FAKE_URL }/0.jpg`); + expect(images[1].src).toBe(''); + expect(images[2].src).toBe(''); - fire( images[ 0 ], 'load' ); - expect( images[ 1 ].src ).toBe( `${ URL }/1.jpg` ); - expect( images[ 2 ].src ).toBe( '' ); + fire(images[0], 'load'); + expect(images[1].src).toBe(`${ FAKE_URL }/1.jpg`); + expect(images[2].src).toBe(''); - fire( images[ 1 ], 'load' ); - expect( images[ 2 ].src ).toBe( `${ URL }/2.jpg` ); - } ); + fire(images[1], 'load'); + expect(images[2].src).toBe(`${ FAKE_URL }/2.jpg`); + }); - test( 'should load the next image if the current image throws error to load.', () => { - init( { lazyLoad: 'sequential' }, { src: false, dataSrc: true } ); - const images = document.getElementsByTagName( 'img' ); + test('should load the next image if the current image throws error to load.', () => { + init({ lazyLoad: 'sequential' }, { useImage: true, src:false, dataSrc: true }); + const images = document.getElementsByTagName('img'); - expect( images[ 0 ].src ).toBe( `${ URL }/0.jpg` ); - expect( images[ 1 ].src ).toBe( '' ); - expect( images[ 2 ].src ).toBe( '' ); + expect(images[0].src).toBe(`${ FAKE_URL }/0.jpg`); + expect(images[1].src).toBe(''); + expect(images[2].src).toBe(''); - fire( images[ 0 ], 'error' ); - expect( images[ 1 ].src ).toBe( `${ URL }/1.jpg` ); + fire(images[0], 'error'); + expect(images[1].src).toBe(`${ FAKE_URL }/1.jpg`); - fire( images[ 1 ], 'error' ); - expect( images[ 2 ].src ).toBe( `${ URL }/2.jpg` ); - } ); -} ); + fire(images[1], 'error'); + expect(images[2].src).toBe(`${ FAKE_URL }/2.jpg`); + }); +}); diff --git a/src/js/components/Live/Live.ts b/src/js/components/Live/Live.ts index 22532814..9cf1ecaf 100644 --- a/src/js/components/Live/Live.ts +++ b/src/js/components/Live/Live.ts @@ -1,10 +1,8 @@ import { ARIA_ATOMIC, ARIA_BUSY, ARIA_LIVE } from '../../constants/attributes'; import { CLASS_SR } from '../../constants/classes'; import { EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_MOVED, EVENT_SCROLLED } from '../../constants/events'; -import { EventInterface, RequestInterval } from '../../constructors'; -import { Splide } from '../../core/Splide/Splide'; -import { BaseComponent, Components, Options } from '../../types'; -import { append, apply, create, remove, removeAttribute, setAttribute } from '../../utils'; +import { BaseComponent, ComponentConstructor } from '../../types'; +import { append, apply, create, removeAttribute, removeNode, RequestInterval, setAttribute } from '@splidejs/utils'; /** @@ -13,7 +11,7 @@ import { append, apply, create, remove, removeAttribute, setAttribute } from '.. * @since 4.0.0 */ export interface LiveComponent extends BaseComponent { - disable( disabled: boolean ): void; + disable(disabled: boolean): void; } /** @@ -31,27 +29,29 @@ const SR_REMOVAL_DELAY = 90; * @param Splide - A Splide instance. * @param Components - A collection of components. * @param options - Options. + * @param event - An EventInterface instance. * * @return A Live component object. */ -export function Live( Splide: Splide, Components: Components, options: Options ): LiveComponent { - const { on } = EventInterface( Splide ); +export const Live: ComponentConstructor = (Splide, Components, options, event) => { + const { on } = event; const { track } = Components.Elements; + const { live = true } = options; /** * Indicates whether the live region is enabled or not. */ - const enabled = options.live && ! options.isNavigation; + const enabled = live && !options.isNavigation; /** * The span element for the SR only text. */ - const sr = create( 'span', CLASS_SR ); + const sr = create('span', CLASS_SR); /** * Holds the RequestInterval instance. */ - const interval = RequestInterval( SR_REMOVAL_DELAY, apply( toggle, false ) ); + const interval = RequestInterval(SR_REMOVAL_DELAY, apply(toggle, false)); /** * Called when the component is mounted. @@ -59,14 +59,14 @@ export function Live( Splide: Splide, Components: Components, options: Options ) * - Immediately removing the SR makes Windows Narrator silent, hence requires the delay around 50ms. */ function mount(): void { - if ( enabled ) { - disable( ! Components.Autoplay.isPaused() ); - setAttribute( track, ARIA_ATOMIC, true ); + if (enabled) { + disable(!Components.Autoplay.isPaused()); + setAttribute(track, ARIA_ATOMIC, true); sr.textContent = '…'; - on( EVENT_AUTOPLAY_PLAY, apply( disable, true ) ); - on( EVENT_AUTOPLAY_PAUSE, apply( disable, false ) ); - on( [ EVENT_MOVED, EVENT_SCROLLED ], apply( toggle, true ) ); + on(EVENT_AUTOPLAY_PLAY, apply(disable, true)); + on(EVENT_AUTOPLAY_PAUSE, apply(disable, false)); + on([EVENT_MOVED, EVENT_SCROLLED], apply(toggle, true)); } } @@ -75,14 +75,14 @@ export function Live( Splide: Splide, Components: Components, options: Options ) * * @param active - Determines whether to activate the field or not. */ - function toggle( active: boolean ): void { - setAttribute( track, ARIA_BUSY, active ); + function toggle(active: boolean): void { + setAttribute(track, ARIA_BUSY, active); - if ( active ) { - append( track, sr ); + if (active) { + append(track, sr); interval.start(); } else { - remove( sr ); + removeNode(sr); interval.cancel(); } } @@ -91,8 +91,8 @@ export function Live( Splide: Splide, Components: Components, options: Options ) * Destroys the component. */ function destroy(): void { - removeAttribute( track, [ ARIA_LIVE, ARIA_ATOMIC, ARIA_BUSY ] ); - remove( sr ); + removeAttribute(track, [ARIA_LIVE, ARIA_ATOMIC, ARIA_BUSY]); + removeNode(sr); } /** @@ -101,9 +101,9 @@ export function Live( Splide: Splide, Components: Components, options: Options ) * * @param disabled - `true` to disable the live region or `false` to enable it again. */ - function disable( disabled: boolean ): void { - if ( enabled ) { - setAttribute( track, ARIA_LIVE, disabled ? 'off' : 'polite' ); + function disable(disabled: boolean): void { + if (enabled) { + setAttribute(track, ARIA_LIVE, disabled ? 'off' : 'polite'); } } @@ -112,4 +112,4 @@ export function Live( Splide: Splide, Components: Components, options: Options ) disable, destroy, }; -} \ No newline at end of file +}; \ No newline at end of file diff --git a/src/js/components/Live/test/general.test.ts b/src/js/components/Live/test/general.test.ts index a3cc7298..7de61417 100644 --- a/src/js/components/Live/test/general.test.ts +++ b/src/js/components/Live/test/general.test.ts @@ -1,111 +1,111 @@ -import { ARIA_ATOMIC, ARIA_LIVE, ARIA_BUSY } from '../../../constants/attributes'; +import { ARIA_ATOMIC, ARIA_BUSY, ARIA_LIVE } from '../../../constants/attributes'; import { CLASS_SR } from '../../../constants/classes'; -import { init, wait } from '../../../test'; +import { init, wait } from '@test'; -describe( 'Live', () => { - test( 'can append a SR text and add aria-busy="true" to the track element after move.', () => { - const splide = init( { live: true, speed: 0 } ); +describe('Live', () => { + test('can append a SR text and add aria-busy="true" to the track element after move.', () => { + const splide = init({ live: true, speed: 0 }); const { track } = splide.Components.Elements; - splide.go( 1 ); - expect( track.getElementsByClassName( CLASS_SR ).length ).toBe( 1 ); - expect( track.getAttribute( ARIA_BUSY ) ).toBe( 'true' ); - } ); + splide.go(1); + expect(track.getElementsByClassName(CLASS_SR).length).toBe(1); + expect(track.getAttribute(ARIA_BUSY)).toBe('true'); + }); - test( 'can remove a SR text and aria-busy from the track element.', async () => { - const splide = init( { live: true, speed: 0 } ); + test('can remove a SR text and aria-busy from the track element.', async () => { + const splide = init({ live: true, speed: 0 }); const { track } = splide.Components.Elements; - splide.go( 1 ); + splide.go(1); - await wait( 200 ); - expect( track.getElementsByClassName( CLASS_SR ).length ).toBe( 0 ); - expect( track.getAttribute( ARIA_BUSY ) ).toBe( 'false' ); - } ); + await wait(200); + expect(track.getElementsByClassName(CLASS_SR).length).toBe(0); + expect(track.getAttribute(ARIA_BUSY)).toBe('false'); + }); - test( 'can assign aria-live="polite" and aria-atomic="true" to the list element.', () => { - const splide = init( { live: true } ); + test('can assign aria-live="polite" and aria-atomic="true" to the list element.', () => { + const splide = init({ live: true }); const { track } = splide.Components.Elements; - expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' ); - expect( track.getAttribute( ARIA_ATOMIC ) ).toBe( 'true' ); - } ); + expect(track.getAttribute(ARIA_LIVE)).toBe('polite'); + expect(track.getAttribute(ARIA_ATOMIC)).toBe('true'); + }); - test( 'can remove aria attributes on destroy.', () => { - const splide = init( { live: true } ); + test('can remove aria attributes on destroy.', () => { + const splide = init({ live: true }); const { track } = splide.Components.Elements; splide.destroy(); - expect( track.getAttribute( ARIA_LIVE ) ).toBeNull(); - expect( track.getAttribute( ARIA_ATOMIC ) ).toBeNull(); - expect( track.getAttribute( ARIA_BUSY ) ).toBeNull(); - } ); + expect(track.getAttribute(ARIA_LIVE)).toBeNull(); + expect(track.getAttribute(ARIA_ATOMIC)).toBeNull(); + expect(track.getAttribute(ARIA_BUSY)).toBeNull(); + }); - test( 'should assign aria attribute again on refresh.', () => { - const splide = init( { live: true } ); + test('should assign aria attribute again on refresh.', () => { + const splide = init({ live: true }); const { track } = splide.Components.Elements; splide.refresh(); - expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' ); - expect( track.getAttribute( ARIA_ATOMIC ) ).toBe( 'true' ); - } ); + expect(track.getAttribute(ARIA_LIVE)).toBe('polite'); + expect(track.getAttribute(ARIA_ATOMIC)).toBe('true'); + }); - test( 'can assign aria-live="off" to the list element when the autoplay is `true`.', () => { - const splide = init( { live: true, autoplay: true } ); - expect( splide.Components.Elements.track.getAttribute( ARIA_LIVE ) ).toBe( 'off' ); - } ); + test('can assign aria-live="off" to the list element when the autoplay is `true`.', () => { + const splide = init({ live: true, autoplay: true }); + expect(splide.Components.Elements.track.getAttribute(ARIA_LIVE)).toBe('off'); + }); - test( 'can assign aria-live="polite" to the list element when the autoplay is `"pause".`', () => { - const splide = init( { live: true, autoplay: 'pause' } ); - expect( splide.Components.Elements.track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' ); - } ); + test('can assign aria-live="polite" to the list element when the autoplay is `"pause".`', () => { + const splide = init({ live: true, autoplay: 'pause' }); + expect(splide.Components.Elements.track.getAttribute(ARIA_LIVE)).toBe('polite'); + }); - test( 'can change aria-live to "off" when autoplay starts, or to "polite" when autoplay stops.', () => { - const splide = init( { live: true, autoplay: 'pause' } ); + test('can change aria-live to "off" when autoplay starts, or to "polite" when autoplay stops.', () => { + const splide = init({ live: true, autoplay: 'pause' }); const { track } = splide.Components.Elements; const { play, pause } = splide.Components.Autoplay; - expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' ); + expect(track.getAttribute(ARIA_LIVE)).toBe('polite'); play(); - expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'off' ); + expect(track.getAttribute(ARIA_LIVE)).toBe('off'); pause(); - expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' ); + expect(track.getAttribute(ARIA_LIVE)).toBe('polite'); play(); - expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'off' ); - } ); + expect(track.getAttribute(ARIA_LIVE)).toBe('off'); + }); - test( 'can toggle aria-live by `disable()`', () => { - const splide = init( { live: true } ); + test('can toggle aria-live by `disable()`', () => { + const splide = init({ live: true }); const { track } = splide.Components.Elements; const { disable } = splide.Components.Live; - disable( true ); - expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'off' ); + disable(true); + expect(track.getAttribute(ARIA_LIVE)).toBe('off'); - disable( false ); - expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'polite' ); + disable(false); + expect(track.getAttribute(ARIA_LIVE)).toBe('polite'); - disable( true ); - expect( track.getAttribute( ARIA_LIVE ) ).toBe( 'off' ); - } ); + disable(true); + expect(track.getAttribute(ARIA_LIVE)).toBe('off'); + }); - test( 'should do nothing when the `live` option is false.', () => { - const splide = init( { live: false } ); + test('should do nothing when the `live` option is false.', () => { + const splide = init({ live: false }); const { track } = splide.Components.Elements; const { disable } = splide.Components.Live; - expect( track.getAttribute( ARIA_LIVE ) ).toBeNull(); + expect(track.getAttribute(ARIA_LIVE)).toBeNull(); - disable( true ); - expect( track.getAttribute( ARIA_LIVE ) ).toBeNull(); + disable(true); + expect(track.getAttribute(ARIA_LIVE)).toBeNull(); - disable( false ); - expect( track.getAttribute( ARIA_LIVE ) ).toBeNull(); - } ); -} ); \ No newline at end of file + disable(false); + expect(track.getAttribute(ARIA_LIVE)).toBeNull(); + }); +}); \ No newline at end of file diff --git a/src/js/components/Media/Media.ts b/src/js/components/Media/Media.ts deleted file mode 100644 index e36be885..00000000 --- a/src/js/components/Media/Media.ts +++ /dev/null @@ -1,145 +0,0 @@ -import { MEDIA_PREFERS_REDUCED_MOTION } from '../../constants/media'; -import { CREATED, DESTROYED } from '../../constants/states'; -import { EventBinder } from '../../constructors'; -import { Splide } from '../../core/Splide/Splide'; -import { BaseComponent, Components, Options } from '../../types'; -import { merge, omit, ownKeys } from '../../utils'; -import { EVENT_UPDATED } from '../../constants/events'; - - -/** - * The interface for the Media component. - * - * @since 4.0.0 - */ -export interface MediaComponent extends BaseComponent { - /** @internal */ - reduce( reduced: boolean ): void; - set( options: Options, base?: boolean, notify?: boolean ): void; -} - -/** - * The component for observing media queries and updating options if necessary. - * This used to be the Options component. - * - * @since 4.0.0 - * - * @param Splide - A Splide instance. - * @param Components - A collection of components. - * @param options - Options. - * - * @return A Media component object. - */ -export function Media( Splide: Splide, Components: Components, options: Options ): MediaComponent { - const { state } = Splide; - const breakpoints = options.breakpoints || {}; - const reducedMotion = options.reducedMotion || {}; - const binder = EventBinder(); - - /** - * Stores options and MediaQueryList object. - */ - const queries: Array<[ Options, MediaQueryList ]> = []; - - /** - * Called when the component is constructed. - */ - function setup(): void { - const isMin = options.mediaQuery === 'min'; - - ownKeys( breakpoints ) - .sort( ( n, m ) => isMin ? +n - +m : +m - +n ) - .forEach( key => { - register( breakpoints[ key ], `(${ isMin ? 'min' : 'max' }-width:${ key }px)` ); - } ); - - register( reducedMotion, MEDIA_PREFERS_REDUCED_MOTION ); - update(); - } - - /** - * Destroys the component. - * - * @param completely - Will be `true` for complete destruction. - */ - function destroy( completely: boolean ): void { - if ( completely ) { - binder.destroy(); - } - } - - /** - * Registers entries as [ Options, media query string ]. - * - * @param options - Options merged to current options when the document matches the query. - * @param query - A query string. - */ - function register( options: Options, query: string ): void { - const queryList = matchMedia( query ); - binder.bind( queryList, 'change', update ); - queries.push( [ options, queryList ] ); - } - - /** - * Checks all media queries in entries and updates options. - */ - function update(): void { - const destroyed = state.is( DESTROYED ); - const direction = options.direction; - const merged = queries.reduce( ( merged, entry ) => { - return merge( merged, entry[ 1 ].matches ? entry[ 0 ] : {} ); - }, {} ); - - omit( options ); - set( merged ); - - if ( options.destroy ) { - Splide.destroy( options.destroy === 'completely' ); - } else if ( destroyed ) { - destroy( true ); - Splide.mount(); - } else { - direction !== options.direction && Splide.refresh(); - } - } - - /** - * Disables or enables `reducedMotion` options. - * This method does nothing when the document does not match the query. - * - * @internal - * - * @param enable - Determines whether to apply `reducedMotion` options or not. - */ - function reduce( enable: boolean ): void { - if ( matchMedia( MEDIA_PREFERS_REDUCED_MOTION ).matches ) { - enable ? merge( options, reducedMotion ) : omit( options, ownKeys( reducedMotion ) ); - } - } - - /** - * Sets current options or base options (prototype). - * If changing base options, always emits the `updated` event. - * - * @internal - * - * @param opts - New options. - * @param base - Optional. Determines whether to also update base options or not. - * @param notify - Optional. If `true`, always emits the `update` event. - */ - function set( opts: Options, base?: boolean, notify?: boolean ): void { - merge( options, opts ); - base && merge( Object.getPrototypeOf( options ), opts ); - - if ( notify || ! state.is( CREATED ) ) { - Splide.emit( EVENT_UPDATED, options ); - } - } - - return { - setup, - destroy, - reduce, - set, - }; -} diff --git a/src/js/components/Media/test/general.test.ts b/src/js/components/Media/test/general.test.ts deleted file mode 100644 index 9b31c822..00000000 --- a/src/js/components/Media/test/general.test.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { DESTROYED } from '../../../constants/states'; -import { init } from '../../../test'; - - -describe( 'Media', () => { - beforeAll( () => { - window.matchMedia = () => ( { - matches : true, // All queries match the media string. - media : '', - onchange : null, - addListener : jest.fn(), - removeListener : jest.fn(), - addEventListener : jest.fn(), - removeEventListener: jest.fn(), - dispatchEvent : jest.fn(), - } as MediaQueryList ); - } ); - - test( 'can merge options when a breakpoint matches the media query.', () => { - const splide = init( { perPage: 2, breakpoints: { 640: { perPage: 4 } } } ); - expect( splide.options.perPage ).toBe( 4 ); - } ); - - test( 'can destroy Splide.', () => { - const splide = init( { breakpoints: { 640: { destroy: true } } } ); - expect( splide.state.is( DESTROYED ) ).toBe( true ); - } ); - - test( 'can merge options for prefers-reduced-motion:reduce.', () => { - const splide = init(); - expect( splide.options.speed ).toBe( 0 ); - expect( splide.options.rewindSpeed ).toBe( 0 ); - expect( splide.options.autoplay ).toBe( 'pause' ); - } ); - - test( 'can enable or disable `reducedMotion` option by `reduce()`.', () => { - const splide = init( { speed: 1000, rewindSpeed: 2000, autoplay: true } ); - const { reduce } = splide.Components.Media; - - expect( splide.options.speed ).toBe( 0 ); - expect( splide.options.rewindSpeed ).toBe( 0 ); - expect( splide.options.autoplay ).toBe( 'pause' ); - - reduce( false ); - - expect( splide.options.speed ).toBe( 1000 ); - expect( splide.options.rewindSpeed ).toBe( 2000 ); - expect( splide.options.autoplay ).toBe( true ); - - reduce( true ); - - expect( splide.options.speed ).toBe( 0 ); - expect( splide.options.rewindSpeed ).toBe( 0 ); - expect( splide.options.autoplay ).toBe( 'pause' ); - } ); -} ); diff --git a/src/js/components/Move/Move.ts b/src/js/components/Move/Move.ts index d0c25802..1b9aeb24 100644 --- a/src/js/components/Move/Move.ts +++ b/src/js/components/Move/Move.ts @@ -9,10 +9,8 @@ import { } from '../../constants/events'; import { IDLE, MOVING } from '../../constants/states'; import { FADE, LOOP, SLIDE } from '../../constants/types'; -import { EventInterface } from '../../constructors'; -import { Splide } from '../../core/Splide/Splide'; -import { AnyFunction, BaseComponent, Components, Options, TransitionComponent } from '../../types'; -import { abs, ceil, clamp, isUndefined, rect, style } from '../../utils'; +import { AnyFunction, BaseComponent, ComponentConstructor, TransitionComponent } from '../../types'; +import { abs, ceil, clamp, isUndefined, rect, style, toNumber } from '@splidejs/utils'; /** @@ -21,19 +19,21 @@ import { abs, ceil, clamp, isUndefined, rect, style } from '../../utils'; * @since 3.0.0 */ export interface MoveComponent extends BaseComponent { - move( dest: number, index: number, prev: number, callback?: AnyFunction ): void; - jump( index: number ): void; - translate( position: number, preventLoop?: boolean ): void; - shift( position: number, backwards: boolean ): number; + move(dest: number, index: number, prev: number, forwards: boolean, callback?: AnyFunction): void; + jump(index: number): void; + translate(position: number, preventLoop?: boolean): void; + shift(position: number, backwards: boolean): number; cancel(): void; - toIndex( position: number ): number; - toPosition( index: number, trimming?: boolean ): number; + toIndex(position: number): number; + toPosition(index: number): number; getPosition(): number; - getLimit( max: boolean ): number; - exceededLimit( max?: boolean | undefined, position?: number ): boolean; + getRate(index?: number): number; + getLimit(max: boolean): number; + exceededLimit(max?: boolean | undefined, position?: number): boolean; /** @internal */ reposition(): void; + canShift(backwards: boolean): boolean; } /** @@ -44,13 +44,15 @@ export interface MoveComponent extends BaseComponent { * @param Splide - A Splide instance. * @param Components - A collection of components. * @param options - Options. + * @param event - An EventInterface instance. * * @return A Move component object. */ -export function Move( Splide: Splide, Components: Components, options: Options ): MoveComponent { - const { on, emit } = EventInterface( Splide ); - const { set } = Splide.state; - const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components.Layout; +export const Move: ComponentConstructor = (Splide, Components, options, event) => { + const { on, emit } = event; + const { set, is } = Splide.state; + const { Slides } = Components; + const { slideSize, getPadding, listSize, sliderSize, totalSize, trackSize } = Components.Layout; const { resolve, orient } = Components.Direction; const { list, track } = Components.Elements; @@ -59,12 +61,22 @@ export function Move( Splide: Splide, Components: Components, options: Options ) */ let Transition: TransitionComponent; + /** + * Keeps the latest indices. + */ + let indices: [number, number, number]; + + /** + * Keeps the `onMoved` callback function. + */ + let callback: AnyFunction | undefined; + /** * Called when the component is mounted. */ function mount(): void { Transition = Components.Transition; - on( [ EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH ], reposition ); + on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition); } /** @@ -73,44 +85,71 @@ export function Move( Splide: Splide, Components: Components, options: Options ) * - iOS Safari emits window resize event while the user swipes the slider because of the bottom bar. */ function reposition(): void { - if ( ! Components.Controller.isBusy() ) { + if (!Components.Controller.isBusy()) { Components.Scroll.cancel(); - jump( Splide.index ); - Components.Slides.update(); + jump(Splide.index); + Slides.update(); } } /** * Moves the slider to the dest index with the Transition component. + * Needs to shift the carousel when: + * - Crossing bounds (dest !== index) + * - The destination is further than the opposite destination. * * @param dest - A destination index to go to, including clones'. * @param index - A slide index. * @param prev - A previous index. - * @param callback - Optional. A callback function invoked after transition ends. + * @param forwards - Specifies the move direction. + * @param onMoved - Optional. A callback function invoked after transition ends. */ - function move( dest: number, index: number, prev: number, callback?: AnyFunction ): void { - if ( dest !== index && canShift( dest > prev ) ) { - cancel(); - translate( shift( getPosition(), dest > prev ), true ); + function move(dest: number, index: number, prev: number, forwards: boolean, onMoved?: AnyFunction): void { + cancel(); + + const shiftBackwards = dest !== index ? dest > index : forwards; + const shouldShift = (dest !== index || exceededLimit(forwards)) && canShift(shiftBackwards); + + if (shouldShift) { + translate(shift(getPosition(), shiftBackwards), true); + emit(EVENT_SHIFTED); } - set( MOVING ); - emit( EVENT_MOVE, index, prev, dest ); + indices = [index, prev, dest]; + callback = onMoved; + + set(MOVING); + emit(EVENT_MOVE, index, prev, dest); + Transition.start(index, onTransitionEnd); + } - Transition.start( index, () => { - set( IDLE ); - emit( EVENT_MOVED, index, prev, dest ); - callback && callback(); - } ); + /** + * Called when transition ends or is cancelled. + */ + function onTransitionEnd(): void { + set(IDLE); + emit(EVENT_MOVED, ...indices); + callback && callback(); + } + + /** + * Cancels transition. + */ + function cancel(): void { + if (is(MOVING) && indices) { + translate(getPosition(), true); + Transition.cancel(); + onTransitionEnd(); + } } /** - * Jumps to the slide at the specified index. + * Jumps to the slide at the specified index (silently). * * @param index - An index to jump to. */ - function jump( index: number ): void { - translate( toPosition( index, true ) ); + function jump(index: number): void { + translate(toPosition(index)); } /** @@ -119,11 +158,11 @@ export function Move( Splide: Splide, Components: Components, options: Options ) * @param position - The position to move to. * @param preventLoop - Optional. If `true`, sets the provided position as is. */ - function translate( position: number, preventLoop?: boolean ): void { - if ( ! Splide.is( FADE ) ) { - const destination = preventLoop ? position : loop( position ); - style( list, 'transform', `translate${ resolve( 'X' ) }(${ destination }px)` ); - position !== destination && emit( EVENT_SHIFTED ); + function translate(position: number, preventLoop?: boolean): void { + if (!Splide.is(FADE)) { + const destination = preventLoop ? position : loop(position); + style(list, 'transform', `translate${ resolve('X') }(${ destination }px)`); + position !== destination && emit(EVENT_SHIFTED); } } @@ -131,15 +170,15 @@ export function Move( Splide: Splide, Components: Components, options: Options ) * Loops the provided position if it exceeds bounds (limit indices). * * @param position - A position to loop. + * + * @return A looped position. */ - function loop( position: number ): number { - if ( Splide.is( LOOP ) ) { - const index = toIndex( position ); - const exceededMax = index > Components.Controller.getEnd(); - const exceededMin = index < 0; - - if ( exceededMin || exceededMax ) { - position = shift( position, exceededMax ); + function loop(position: number): number { + if (Splide.is(LOOP)) { + const diff = orient(position) - orient(getPosition()); + + if (diff && exceededLimit(diff > 0, position)) { + position = shift(position, diff > 0); } } @@ -147,28 +186,20 @@ export function Move( Splide: Splide, Components: Components, options: Options ) } /** - * Adds or subtracts the slider width to the provided position. + * Adds or subtracts the carousel width to the provided position. * * @param position - A position to shift. - * @param backwards - Determines whether to shift the slider backwards or forwards. + * @param backwards - Determines whether to shift the carousel backwards or forwards. * * @return The shifted position. */ - function shift( position: number, backwards: boolean ): number { - const excess = position - getLimit( backwards ); - const size = sliderSize(); - position -= orient( size * ( ceil( abs( excess ) / size ) || 1 ) ) * ( backwards ? 1 : -1 ); + function shift(position: number, backwards: boolean): number { + const excess = position - getLimit(backwards); + const size = sliderSize(); + position -= orient(size * (ceil(abs(excess) / size) || 1)) * (backwards ? 1 : -1); return position; } - /** - * Cancels transition. - */ - function cancel(): void { - translate( getPosition(), true ); - Transition.cancel(); - } - /** * Returns the closest index to the position. * @@ -176,19 +207,19 @@ export function Move( Splide: Splide, Components: Components, options: Options ) * * @return The closest index to the position. */ - function toIndex( position: number ): number { - const Slides = Components.Slides.get(); + function toIndex(position: number): number { + const slides = Slides.get(); - let index = 0; + let index = 0; let minDistance = Infinity; - for ( let i = 0; i < Slides.length; i++ ) { - const slideIndex = Slides[ i ].index; - const distance = abs( toPosition( slideIndex, true ) - position ); + for (let i = 0; i < slides.length; i++) { + const slideIndex = slides[i].index; + const distance = abs(toPosition(slideIndex) - position); - if ( distance <= minDistance ) { + if (distance <= minDistance) { minDistance = distance; - index = slideIndex; + index = slideIndex; } else { break; } @@ -200,14 +231,18 @@ export function Move( Splide: Splide, Components: Components, options: Options ) /** * Converts the slide index to the position. * - * @param index - An index to convert. - * @param trimming - Optional. Whether to trim edge spaces or not. + * @param index - An index to convert. * * @return The position corresponding with the index. */ - function toPosition( index: number, trimming?: boolean ): number { - const position = orient( totalSize( index - 1 ) - offset( index ) ); - return trimming ? trim( position ) : position; + function toPosition(index: number): number { + let position = orient(totalSize(index - 1) - offset(index)); + + if (options.trimSpace && Splide.is(SLIDE)) { + position = clamp(position, 0, orient(sliderSize(true) - listSize())); + } + + return position; } /** @@ -216,23 +251,40 @@ export function Move( Splide: Splide, Components: Components, options: Options ) * @return The position of the list element. */ function getPosition(): number { - const left = resolve( 'left' ); - return rect( list )[ left ] - rect( track )[ left ] + orient( getPadding( false ) ); + const left = resolve('left'); + return rect(list)[left] - rect(track)[left] + orient(getPadding(false)); } /** - * Trims spaces on the edge of the slider. + * Returns the carousel progress rate. * - * @param position - A position to trim. + * @param index - Optional. If specified, returns the rate of the slide at the index. * - * @return A trimmed position. + * @return The progress rate. */ - function trim( position: number ): number { - if ( options.trimSpace && Splide.is( SLIDE ) ) { - position = clamp( position, 0, orient( sliderSize( true ) - listSize() ) ); + function getRate(index?: number): number { + const useIndex = !isUndefined(index); + let rate; + + if (Splide.is(FADE)) { + rate = (useIndex ? index : Splide.index) / (Splide.length - 1); + } else { + const isLoop = Splide.is(LOOP); + const position = orient(useIndex ? toPosition(index) : getPosition()); + const min = orient(getLimit(false)); + const max = orient(getLimit(true)); + const size = sliderSize(); + const curr = (position - min) % size; + const base = isLoop ? size : max - min; + + rate = (curr / base) || 0; + + if (isLoop && rate < 0) { + rate += 1; + } } - return position; + return clamp(rate, 0, 1); } /** @@ -240,9 +292,11 @@ export function Move( Splide: Splide, Components: Components, options: Options ) * * @param index - An index. */ - function offset( index: number ): number { + function offset(index: number): number { const { focus } = options; - return focus === 'center' ? ( listSize() - slideSize( index, true ) ) / 2 : +focus * slideSize( index ) || 0; + return focus === 'center' + ? (listSize() - slideSize(index, true)) / 2 + : toNumber(focus) * slideSize(index); } /** @@ -252,8 +306,8 @@ export function Move( Splide: Splide, Components: Components, options: Options ) * * @return The border number. */ - function getLimit( max: boolean ): number { - return toPosition( max ? Components.Controller.getEnd() : 0, !! options.trimSpace ); + function getLimit(max: boolean): number { + return toPosition(max ? Components.Controller.getEnd() : 0); } /** @@ -263,11 +317,10 @@ export function Move( Splide: Splide, Components: Components, options: Options ) * * @return `true` if the slider can be shifted for the specified direction, or otherwise `false`. */ - function canShift( backwards: boolean ): boolean { - const shifted = orient( shift( getPosition(), backwards ) ); - return backwards - ? shifted >= 0 - : shifted <= list[ resolve( 'scrollWidth' ) ] - rect( track )[ resolve( 'width' ) ]; + function canShift(backwards: boolean): boolean { + const padding = getPadding(false); + const shifted = orient(shift(getPosition(), backwards)); + return backwards ? shifted >= padding : shifted <= listSize(true) - trackSize() + padding; } /** @@ -278,10 +331,9 @@ export function Move( Splide: Splide, Components: Components, options: Options ) * * @return `true` if the position exceeds the limit, or otherwise `false`. */ - function exceededLimit( max?: boolean | undefined, position?: number ): boolean { - position = isUndefined( position ) ? getPosition() : position; - const exceededMin = max !== true && orient( position ) < orient( getLimit( false ) ); - const exceededMax = max !== false && orient( position ) > orient( getLimit( true ) ); + function exceededLimit(max?: boolean | undefined, position = getPosition()): boolean { + const exceededMin = max !== true && orient(position) < orient(getLimit(false)); + const exceededMax = max !== false && orient(position) > orient(getLimit(true)); return exceededMin || exceededMax; } @@ -295,8 +347,10 @@ export function Move( Splide: Splide, Components: Components, options: Options ) toIndex, toPosition, getPosition, + getRate, getLimit, exceededLimit, reposition, + canShift, }; -} +}; diff --git a/src/js/components/Move/test/general.test.ts b/src/js/components/Move/test/general.test.ts index a63069a5..ade1b0d9 100644 --- a/src/js/components/Move/test/general.test.ts +++ b/src/js/components/Move/test/general.test.ts @@ -1,108 +1,108 @@ -import { init, setSlidesRect } from '../../../test'; +import { init, setSlidesRect } from '@test'; -describe( 'Move', () => { - test( 'can jump to the specific slide.', () => { - const splide = init( { width: 200, height: 100 } ); +describe('Move', () => { + test('can jump to the specific slide.', () => { + const splide = init({ width: 200, height: 100 }); const { Move } = splide.Components; const { list } = splide.Components.Elements; - Move.jump( 2 ); - expect( list.style.transform ).toBe( 'translateX(-400px)' ); + Move.jump(2); + expect(list.style.transform).toBe('translateX(-400px)'); - Move.jump( 4 ); - expect( list.style.transform ).toBe( 'translateX(-800px)' ); + Move.jump(4); + expect(list.style.transform).toBe('translateX(-800px)'); splide.destroy(); - } ); + }); - test( 'can set transform to the list element.', () => { - const splide = init( { width: 200, height: 100 } ); + test('can set transform to the list element.', () => { + const splide = init({ width: 200, height: 100 }); const { Move } = splide.Components; const { list } = splide.Components.Elements; - Move.translate( 100 ); - expect( list.style.transform ).toBe( 'translateX(100px)' ); + Move.translate(100); + expect(list.style.transform).toBe('translateX(100px)'); - Move.translate( 500 ); - expect( list.style.transform ).toBe( 'translateX(500px)' ); + Move.translate(500); + expect(list.style.transform).toBe('translateX(500px)'); splide.destroy(); - } ); + }); - test( 'can loop the slider if it exceeds bounds.', () => { - const width = 200; - const splide = init( { type: 'loop', width, height: 100 } ); + test('can loop the slider if it exceeds bounds.', () => { + const width = 200; + const splide = init({ type: 'loop', width, height: 100 }); const { Move } = splide.Components; const { list } = splide.Components.Elements; // All clones do not have dimensions in this jest env. Forcibly sets them. - setSlidesRect( splide.Components.Slides.get().map( Slide => Slide.slide ), list, width, 1 ); - Move.jump( 0 ); + setSlidesRect(splide.Components.Slides.get().map(Slide => Slide.slide), list, width, 1); + Move.jump(0); - Move.translate( width ); - expect( list.style.transform ).toBe( `translateX(${ -width * ( splide.length - 1 ) }px)` ); + Move.translate(width); + expect(list.style.transform).toBe(`translateX(${ -width * (splide.length - 1) }px)`); splide.destroy(); - } ); + }); - test( 'can cancel the transition.', () => { - const splide = init( { width: 200, height: 100 } ); + test('can cancel the transition.', () => { + const splide = init({ width: 200, height: 100 }); const { Move } = splide.Components; const { list } = splide.Components.Elements; - Move.move( 1, 1, -1 ); + Move.move(1, 1, -1, true); - expect( list.style.transition ).not.toBe( '' ); + expect(list.style.transition).not.toBe(''); Move.cancel(); - expect( list.style.transition ).toBe( '' ); + expect(list.style.transition).toBe(''); splide.destroy(); - } ); + }); - test( 'can convert the position to the closest index.', () => { - const splide = init( { width: 200, height: 100 } ); + test('can convert the position to the closest index.', () => { + const splide = init({ width: 200, height: 100 }); const { Move } = splide.Components; - expect( Move.toIndex( 0 ) ).toBe( 0 ); - expect( Move.toIndex( -99 ) ).toBe( 0 ); - expect( Move.toIndex( -100 ) ).toBe( 1 ); - expect( Move.toIndex( -200 ) ).toBe( 1 ); - expect( Move.toIndex( -299 ) ).toBe( 1 ); - expect( Move.toIndex( -300 ) ).toBe( 2 ); + expect(Move.toIndex(0)).toBe(0); + expect(Move.toIndex(-99)).toBe(0); + expect(Move.toIndex(-100)).toBe(1); + expect(Move.toIndex(-200)).toBe(1); + expect(Move.toIndex(-299)).toBe(1); + expect(Move.toIndex(-300)).toBe(2); splide.destroy(); - } ); + }); - test( 'can convert the index to the position.', () => { - const splide = init( { width: 200, height: 100 } ); + test('can convert the index to the position.', () => { + const splide = init({ width: 200, height: 100 }); const { Move } = splide.Components; - expect( Move.toPosition( 0 ) ).toBe( -0 ); - expect( Move.toPosition( 1 ) ).toBe( -200 ); - expect( Move.toPosition( 2 ) ).toBe( -400 ); - expect( Move.toPosition( 3 ) ).toBe( -600 ); + expect(Move.toPosition(0)).toBe(-0); + expect(Move.toPosition(1)).toBe(-200); + expect(Move.toPosition(2)).toBe(-400); + expect(Move.toPosition(3)).toBe(-600); splide.destroy(); - } ); + }); - test( 'can check the position exceeds bounds or not.', () => { - const width = 200; - const splide = init( { width, height: 100 } ); + test('can check the position exceeds bounds or not.', () => { + const width = 200; + const splide = init({ width, height: 100 }); const totalSize = width * splide.length; - const { Move } = splide.Components; + const { Move } = splide.Components; - expect( Move.exceededLimit( false, -10 ) ).toBe( false ); - expect( Move.exceededLimit( false, 10 ) ).toBe( true ); + expect(Move.exceededLimit(false, -10)).toBe(false); + expect(Move.exceededLimit(false, 10)).toBe(true); - expect( Move.exceededLimit( true, - ( totalSize - width ) + 10 ) ).toBe( false ); - expect( Move.exceededLimit( true, - ( totalSize - width ) - 10 ) ).toBe( true ); + expect(Move.exceededLimit(true, -(totalSize - width) + 10)).toBe(false); + expect(Move.exceededLimit(true, -(totalSize - width) - 10)).toBe(true); - Move.translate( 10 ); + Move.translate(10); - expect( Move.exceededLimit() ).toBe( true ); + expect(Move.exceededLimit()).toBe(true); splide.destroy(); - } ); -} ); + }); +}); diff --git a/src/js/components/Move/test/getRate.test.ts b/src/js/components/Move/test/getRate.test.ts new file mode 100644 index 00000000..ace0cf34 --- /dev/null +++ b/src/js/components/Move/test/getRate.test.ts @@ -0,0 +1,51 @@ +import { init } from '@test'; + + +describe('Move#getRate()', () => { + test('can return the current progress rate.', () => { + // To make the calculation simple, set the length to 11 so that the base number becomes 10. + const splide = init({ width: 200, speed: 0 }, { length: 11 }); + const { getRate, translate } = splide.Components.Move; + + translate(-100); // Middle in the first slide + expect(getRate()).toBe(0.05); + + translate(-150); + expect(getRate()).toBe(0.075); + + translate(-200); // On the first slide + expect(getRate()).toBe(0.1); + + translate(-250); + expect(getRate()).toBe(0.125); + + splide.destroy(); + }); + + test('can return 1 when the current index is the end index.', () => { + const splide = init({ width: 200, speed: 0, perPage: 3 }); + const { getRate } = splide.Components.Move; + const end = splide.Components.Controller.getEnd(); + + splide.go(end); + expect(getRate()).toBe(1); + + splide.destroy(); + }); + + test('should work for fade carousels.', () => { + const splide = init({ width: 200, speed: 0, type: 'fade' }); + const { length } = splide; + const { getRate } = splide.Components.Move; + + expect(getRate()).toBe(0); + + splide.go(1); + expect(getRate()).toBe(splide.index / (length - 1)); + + splide.go(length - 1); + expect(getRate()).toBe(splide.index / (length - 1)); + + splide.destroy(); + }); +}); diff --git a/src/js/components/Move/test/move.test.ts b/src/js/components/Move/test/move.test.ts index 1391b06b..eb666462 100644 --- a/src/js/components/Move/test/move.test.ts +++ b/src/js/components/Move/test/move.test.ts @@ -1,55 +1,55 @@ import { EVENT_MOVE, EVENT_MOVED } from '../../../constants/events'; import { IDLE, MOVING } from '../../../constants/states'; -import { fire, init } from '../../../test'; +import { fire, init } from '@test'; -describe( 'Move#move()', () => { - test( 'can move the slider with the transition component.', () => { - const splide = init( { width: 200, height: 100 } ); +describe('Move#move()', () => { + test('can move the slider with the transition component.', () => { + const splide = init({ width: 200, height: 100 }); const { Move } = splide.Components; const { list } = splide.Components.Elements; - Move.move( 1, 1, -1 ); - fire( list, 'transitionend' ); - expect( list.style.transform ).toBe( 'translateX(-200px)' ); + Move.move(1, 1, -1, true); + fire(list, 'transitionend'); + expect(list.style.transform).toBe('translateX(-200px)'); - Move.move( 2, 2, -1 ); - fire( list, 'transitionend' ); - expect( list.style.transform ).toBe( 'translateX(-400px)' ); - } ); + Move.move(2, 2, -1, true); + fire(list, 'transitionend'); + expect(list.style.transform).toBe('translateX(-400px)'); + }); - test( 'can change the state.', () => { - const splide = init( { width: 200, height: 100 } ); + test('can change the state.', () => { + const splide = init({ width: 200, height: 100 }); const { Move } = splide.Components; const { list } = splide.Components.Elements; - Move.move( 1, 1, -1 ); - expect( splide.state.is( MOVING ) ).toBe( true ); + Move.move(1, 1, -1, true); + expect(splide.state.is(MOVING)).toBe(true); - fire( list, 'transitionend' ); - expect( splide.state.is( IDLE ) ).toBe( true ); - } ); + fire(list, 'transitionend'); + expect(splide.state.is(IDLE)).toBe(true); + }); - test( 'can emit events.', done => { - const splide = init( { width: 200, height: 100 } ); + test('can emit events.', done => { + const splide = init({ width: 200, height: 100 }); const { Move } = splide.Components; const { list } = splide.Components.Elements; - splide.on( EVENT_MOVE, ( index, prev, dest ) => { - expect( index ).toBe( 2 ); - expect( prev ).toBe( 1 ); - expect( dest ).toBe( 3 ); - } ); + splide.on(EVENT_MOVE, (index, prev, dest) => { + expect(index).toBe(2); + expect(prev).toBe(1); + expect(dest).toBe(3); + }); - splide.on( EVENT_MOVED, ( index, prev, dest ) => { - expect( index ).toBe( 2 ); - expect( prev ).toBe( 1 ); - expect( dest ).toBe( 3 ); + splide.on(EVENT_MOVED, (index, prev, dest) => { + expect(index).toBe(2); + expect(prev).toBe(1); + expect(dest).toBe(3); done(); - } ); + }); - Move.move( 3, 2, 1 ); - fire( list, 'transitionend' ); - } ); -} ); + Move.move(3, 2, 1, true); + fire(list, 'transitionend'); + }); +}); diff --git a/src/js/components/Pagination/Pagination.ts b/src/js/components/Pagination/Pagination.ts index b0151b02..12e125b6 100644 --- a/src/js/components/Pagination/Pagination.ts +++ b/src/js/components/Pagination/Pagination.ts @@ -19,9 +19,7 @@ import { EVENT_SCROLLED, EVENT_UPDATED, } from '../../constants/events'; -import { EventInterface } from '../../constructors'; -import { Splide } from '../../core/Splide/Splide'; -import { BaseComponent, Components, Options } from '../../types'; +import { BaseComponent, ComponentConstructor, Options } from '../../types'; import { addClass, apply, @@ -32,13 +30,12 @@ import { focus, format, prevent, - remove, removeAttribute, removeClass, + removeNode, setAttribute, slice, -} from '../../utils'; -import { normalizeKey } from '../../utils/dom/normalizeKey/normalizeKey'; +} from '@splidejs/utils'; /** @@ -47,8 +44,8 @@ import { normalizeKey } from '../../utils/dom/normalizeKey/normalizeKey'; * @since 3.0.0 */ export interface PaginationComponent extends BaseComponent { - items: PaginationItem[]; - getAt( index: number ): PaginationItem; + readonly items: PaginationItem[]; + getAt(index: number): PaginationItem | undefined; update(): void; } @@ -58,8 +55,8 @@ export interface PaginationComponent extends BaseComponent { * @since 3.0.0 */ export interface PaginationData { - list: HTMLUListElement; - items: PaginationItem[]; + readonly list: HTMLUListElement; + readonly items: PaginationItem[]; } /** @@ -68,25 +65,24 @@ export interface PaginationData { * @since 3.0.0 */ export interface PaginationItem { - li: HTMLLIElement; - button: HTMLButtonElement; - page: number; + readonly li: HTMLLIElement; + readonly button: HTMLButtonElement; + readonly page: number; } /** * The component for the pagination UI (a slide picker). * - * @link https://www.w3.org/TR/2021/NOTE-wai-aria-practices-1.2-20211129/#grouped-carousel-elements * @since 3.0.0 * * @param Splide - A Splide instance. * @param Components - A collection of components. * @param options - Options. + * @param event - An EventInterface instance. * * @return A Pagination component object. */ -export function Pagination( Splide: Splide, Components: Components, options: Options ): PaginationComponent { - const event = EventInterface( Splide ); +export const Pagination: ComponentConstructor = (Splide, Components, options, event) => { const { on, emit, bind } = event; const { Slides, Elements, Controller } = Components; const { hasFocus, getIndex, go } = Controller; @@ -113,16 +109,16 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt */ function mount(): void { destroy(); - on( [ EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED ], mount ); + on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], mount); - const enabled = options.pagination; - placeholder && display( placeholder, enabled ? '' : 'none' ); + const { pagination: enabled = true } = options; + placeholder && display(placeholder, enabled ? '' : 'none'); - if ( enabled ) { - on( [ EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED ], update ); + if (enabled) { + on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update); createPagination(); update(); - emit( EVENT_PAGINATION_MOUNTED, { list, items }, getAt( Splide.index ) ); + emit(EVENT_PAGINATION_MOUNTED, { list, items }, getAt(Splide.index)); } } @@ -130,10 +126,10 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt * Destroys the component. */ function destroy(): void { - if ( list ) { - remove( placeholder ? slice( list.children ) : list ); - removeClass( list, paginationClasses ); - empty( items ); + if (list) { + removeNode(placeholder ? slice(list.children) : list); + removeClass(list, paginationClasses); + empty(items); list = null; } @@ -145,88 +141,76 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt */ function createPagination(): void { const { length } = Splide; - const { classes, i18n, perPage } = options; - const max = hasFocus() ? Controller.getEnd() + 1 : ceil( length / perPage ); - - list = placeholder || create( 'ul', classes.pagination, Elements.track.parentElement ); + const { perPage = 1, paginationKeyboard = true } = options; + const max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage); + const dir = getDirection(); - addClass( list, ( paginationClasses = `${ CLASS_PAGINATION }--${ getDirection() }` ) ); - setAttribute( list, ROLE, 'tablist' ); - setAttribute( list, ARIA_LABEL, i18n.select ); - setAttribute( list, ARIA_ORIENTATION, getDirection() === TTB ? 'vertical' : '' ); + list = placeholder || create('ul', Splide.classes('pagination'), Elements.track.parentElement as HTMLElement); - for ( let i = 0; i < max; i++ ) { - const li = create( 'li', null, list ); - const button = create( 'button', { class: classes.page, type: 'button' }, li ); - const controls = Slides.getIn( i ).map( Slide => Slide.slide.id ); - const text = ! hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX; + addClass(list, (paginationClasses = `${ CLASS_PAGINATION }--${ dir }`)); + setAttribute(list, ROLE, 'tablist'); + setAttribute(list, ARIA_LABEL, Splide.i18n('select')); + setAttribute(list, ARIA_ORIENTATION, dir === TTB ? 'vertical' : ''); - bind( button, 'click', apply( onClick, i ) ); + for (let i = 0; i < max; i++) { + const li = create('li', {}, list); + const button = create('button', { class: Splide.classes('page'), type: 'button' }, li); + const controls = Slides.getIn(i).map(Slide => Slide.slide.id); + const text = !hasFocus() && perPage > 1 ? Splide.i18n('pageX') : Splide.i18n('slideX'); - if ( options.paginationKeyboard ) { - bind( button, 'keydown', apply( onKeydown, i ) ); - } + bind(button, 'click', () => go(`>${ i }`)); + paginationKeyboard && bind(button, 'keydown', apply(onKeydown, i)); - setAttribute( li, ROLE, 'presentation' ); - setAttribute( button, ROLE, 'tab' ); - setAttribute( button, ARIA_CONTROLS, controls.join( ' ' ) ); - setAttribute( button, ARIA_LABEL, format( text, i + 1 ) ); - setAttribute( button, TAB_INDEX, -1 ); + setAttribute(li, ROLE, 'presentation'); + setAttribute(button, ROLE, 'tab'); + setAttribute(button, ARIA_CONTROLS, controls.join(' ')); + setAttribute(button, ARIA_LABEL, format(text, i + 1)); + setAttribute(button, TAB_INDEX, -1); - items.push( { li, button, page: i } ); + items.push({ li, button, page: i }); } } - /** - * Called when the user clicks each pagination dot. - * Moves the focus to the active slide for accessibility. - * - * @link https://www.w3.org/WAI/tutorials/carousels/functionality/ - * - * @param page - A clicked page index. - */ - function onClick( page: number ): void { - go( `>${ page }`, true ); - } - /** * Called when any key is pressed on the pagination. * - * @link https://www.w3.org/TR/2021/NOTE-wai-aria-practices-1.2-20211129/#keyboard-interaction-21 + * @link https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/#keyboard-interaction-21 * * @param page - A page index. * @param e - A KeyboardEvent object. */ - function onKeydown( page: number, e: KeyboardEvent ): void { + function onKeydown(page: number, e: KeyboardEvent): void { const { length } = items; - const key = normalizeKey( e ); + const { key } = e; const dir = getDirection(); let nextPage = -1; - if ( key === resolve( ARROW_RIGHT, false, dir ) ) { + if (key === resolve(ARROW_RIGHT, false, dir)) { nextPage = ++page % length; - } else if ( key === resolve( ARROW_LEFT, false, dir ) ) { - nextPage = ( --page + length ) % length; - } else if ( key === 'Home' ) { + } else if (key === resolve(ARROW_LEFT, false, dir)) { + nextPage = (--page + length) % length; + } else if (key === 'Home') { nextPage = 0; - } else if ( key === 'End' ) { + } else if (key === 'End') { nextPage = length - 1; } - const item = items[ nextPage ]; + const item = items[nextPage]; - if ( item ) { - focus( item.button ); - go( `>${ nextPage }` ); - prevent( e, true ); + if (item) { + focus(item.button); + go(`>${ nextPage }`); + prevent(e, true); } } /** * Returns the latest direction for pagination. + * + * @return The direction for pagination. */ - function getDirection(): Options['direction'] { + function getDirection(): Options[ 'direction' ] { return options.paginationDirection || options.direction; } @@ -237,32 +221,32 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt * * @return A pagination item object if available, or otherwise `undefined`. */ - function getAt( index: number ): PaginationItem | undefined { - return items[ Controller.toPage( index ) ]; + function getAt(index: number): PaginationItem | undefined { + return items[Controller.toPage(index)]; } /** * Updates the pagination status. */ function update(): void { - const prev = getAt( getIndex( true ) ); - const curr = getAt( getIndex() ); + const prev = getAt(getIndex(true)); + const curr = getAt(getIndex()); - if ( prev ) { + if (prev) { const { button } = prev; - removeClass( button, CLASS_ACTIVE ); - removeAttribute( button, ARIA_SELECTED ); - setAttribute( button, TAB_INDEX, -1 ); + removeClass(button, CLASS_ACTIVE); + removeAttribute(button, ARIA_SELECTED); + setAttribute(button, TAB_INDEX, -1); } - if ( curr ) { + if (curr) { const { button } = curr; - addClass( button, CLASS_ACTIVE ); - setAttribute( button, ARIA_SELECTED, true ); - setAttribute( button, TAB_INDEX, '' ); + addClass(button, CLASS_ACTIVE); + setAttribute(button, ARIA_SELECTED, true); + setAttribute(button, TAB_INDEX, ''); } - emit( EVENT_PAGINATION_UPDATED, { list, items }, prev, curr ); + emit(EVENT_PAGINATION_UPDATED, { list, items }, prev, curr); } return { @@ -272,4 +256,4 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt getAt, update, }; -} +}; diff --git a/src/js/components/Pagination/test/direction.test.ts b/src/js/components/Pagination/test/direction.test.ts index 30a56ea3..b0729a50 100644 --- a/src/js/components/Pagination/test/direction.test.ts +++ b/src/js/components/Pagination/test/direction.test.ts @@ -1,42 +1,42 @@ import { CLASS_PAGINATION } from '../../../constants/classes'; -import { init } from '../../../test'; +import { init } from '@test'; -describe( 'Pagination direction', () => { - test( 'should follow the `direction` option unless the user provides `paginationDirection`.', () => { - init( { direction: 'ttb', height: 1000 } ); - const pagination = document.querySelector( `.${ CLASS_PAGINATION }` ); +describe('Pagination direction', () => { + test('should follow the `direction` option unless the user provides `paginationDirection`.', () => { + init({ direction: 'ttb', height: 1000 }); + const pagination = document.querySelector(`.${ CLASS_PAGINATION }`); - expect( pagination.classList.contains( `${ CLASS_PAGINATION }--ttb` ) ).toBe( true ); - expect( pagination.getAttribute( 'aria-orientation' ) ).toBe( 'vertical' ); - } ); + expect(pagination?.classList.contains(`${ CLASS_PAGINATION }--ttb`)).toBe(true); + expect(pagination?.getAttribute('aria-orientation')).toBe('vertical'); + }); - test( 'should follow the `paginationDirection`.', () => { - init( { direction: 'ttb', paginationDirection: 'rtl', height: 1000 } ); - const pagination = document.querySelector( `.${ CLASS_PAGINATION }` ); - expect( pagination.classList.contains( `${ CLASS_PAGINATION }--rtl` ) ).toBe( true ); - expect( pagination.getAttribute( 'aria-orientation' ) ).toBeNull(); - } ); + test('should follow the `paginationDirection`.', () => { + init({ direction: 'ttb', paginationDirection: 'rtl', height: 1000 }); + const pagination = document.querySelector(`.${ CLASS_PAGINATION }`); + expect(pagination?.classList.contains(`${ CLASS_PAGINATION }--rtl`)).toBe(true); + expect(pagination?.getAttribute('aria-orientation')).toBeNull(); + }); - test( 'should follow the `direction` option when it is updated.', () => { + test('should follow the `direction` option when it is updated.', () => { const splide = init(); - let pagination = document.querySelector( `.${ CLASS_PAGINATION }` ); - expect( pagination.classList.contains( `${ CLASS_PAGINATION }--ltr` ) ).toBe( true ); + let pagination = document.querySelector(`.${ CLASS_PAGINATION }`); + expect(pagination?.classList.contains(`${ CLASS_PAGINATION }--ltr`)).toBe(true); splide.options = { direction: 'rtl' }; - pagination = document.querySelector( `.${ CLASS_PAGINATION }` ); - expect( pagination.classList.contains( `${ CLASS_PAGINATION }--rtl` ) ).toBe( true ); - } ); + pagination = document.querySelector(`.${ CLASS_PAGINATION }`); + expect(pagination?.classList.contains(`${ CLASS_PAGINATION }--rtl`)).toBe(true); + }); - test( 'should follow the `paginationDirection` option when it is updated.', () => { - const splide = init( { paginationDirection: 'ttb' } ); + test('should follow the `paginationDirection` option when it is updated.', () => { + const splide = init({ paginationDirection: 'ttb' }); - let pagination = document.querySelector( `.${ CLASS_PAGINATION }` ); - expect( pagination.classList.contains( `${ CLASS_PAGINATION }--ttb` ) ).toBe( true ); + let pagination = document.querySelector(`.${ CLASS_PAGINATION }`); + expect(pagination?.classList.contains(`${ CLASS_PAGINATION }--ttb`)).toBe(true); splide.options = { paginationDirection: 'ltr' }; - pagination = document.querySelector( `.${ CLASS_PAGINATION }` ); - expect( pagination.classList.contains( `${ CLASS_PAGINATION }--ltr` ) ).toBe( true ); - } ); -} ); + pagination = document.querySelector(`.${ CLASS_PAGINATION }`); + expect(pagination?.classList.contains(`${ CLASS_PAGINATION }--ltr`)).toBe(true); + }); +}); diff --git a/src/js/components/Pagination/test/general.test.ts b/src/js/components/Pagination/test/general.test.ts index e010921b..e8c84790 100644 --- a/src/js/components/Pagination/test/general.test.ts +++ b/src/js/components/Pagination/test/general.test.ts @@ -1,94 +1,93 @@ import { CLASS_ACTIVE, CLASS_PAGINATION, CLASS_PAGINATION_PAGE } from '../../../constants/classes'; -import { fire, init } from '../../../test'; +import { fire, init } from '@test'; -describe( 'Pagination', () => { - test( 'can create pagination.', () => { - const splide = init(); - const pagination = document.querySelector( `.${ CLASS_PAGINATION }` ); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); +describe('Pagination', () => { + test('can create pagination.', () => { + const splide = init(); + const pagination = document.querySelector(`.${ CLASS_PAGINATION }`); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); - expect( pagination.children.length ).toBe( splide.length ); - expect( items.length ).toBe( splide.length ); - } ); + expect(pagination?.children.length).toBe(splide.length); + expect(items.length).toBe(splide.length); + }); - test( 'can create pagination according to the perPage option.', () => { - const splide = init( { perPage: 3 } ); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); + test('can create pagination according to the perPage option.', () => { + const splide = init({ perPage: 3 }); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); - expect( items.length ).toBe( Math.ceil( splide.length / 3 ) ); - } ); + expect(items.length).toBe(Math.ceil(splide.length / 3)); + }); - test( 'should not paginate if the `focus` option is available.', () => { - const splide = init( { perPage: 3, focus: 'center' } ); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); + test('should not paginate if the `focus` option is available.', () => { + const splide = init({ perPage: 3, focus: 'center' }); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); - expect( items.length ).toBe( splide.length ); - } ); + expect(items.length).toBe(splide.length); + }); - test( 'should omit unnecessary items when `focus` and `omitEnd` options are enabled.', () => { - const splide = init( { perPage: 3, focus: 0, omitEnd: true } ); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); + test('should omit unnecessary items when `focus` and `omitEnd` options are enabled.', () => { + const splide = init({ perPage: 3, focus: 0, omitEnd: true }); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); - expect( items.length ).not.toBe( splide.length ); - expect( items.length ).toBe( splide.Components.Controller.getEnd() + 1 ); - expect( items.length ).toBe( 9 ); - } ); + expect(items.length).not.toBe(splide.length); + expect(items.length).toBe(splide.Components.Controller.getEnd() + 1); + }); - test( 'can move the slider when the item is clicked.', () => { - const splide = init( { speed: 0 } ); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); + test('can move the slider when the item is clicked.', () => { + const splide = init({ speed: 0 }); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); - fire( items[ 1 ], 'click' ); - expect( splide.index ).toBe( 1 ); + fire(items[1], 'click'); + expect(splide.index).toBe(1); - fire( items[ 5 ], 'click' ); - expect( splide.index ).toBe( 5 ); - } ); + fire(items[5], 'click'); + expect(splide.index).toBe(5); + }); - test( 'can move the slider to the end index when the last item is clicked.', () => { - const splide = init( { perPage: 3 } ); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); + test('can move the slider to the end index when the last item is clicked.', () => { + const splide = init({ perPage: 3 }); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); - fire( items[ items.length - 1 ], 'click' ); - expect( splide.index ).toBe( splide.Components.Controller.getEnd() ); - } ); + fire(items[items.length - 1], 'click'); + expect(splide.index).toBe(splide.Components.Controller.getEnd()); + }); - test( 'can update status classes by the index.', () => { + test('can update status classes by the index.', () => { const splide = init(); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); - expect( items[ 0 ].classList.contains( CLASS_ACTIVE ) ).toBe( true ); - expect( items[ 0 ].getAttribute( 'aria-selected' ) ).toBe( 'true' ); + expect(items[0].classList.contains(CLASS_ACTIVE)).toBe(true); + expect(items[0].getAttribute('aria-selected')).toBe('true'); - splide.go( 2 ); + splide.go(2); - expect( items[ 0 ].classList.contains( CLASS_ACTIVE ) ).toBe( false ); - expect( items[ 0 ].getAttribute( 'aria-selected' ) ).toBeNull(); - expect( items[ 2 ].classList.contains( CLASS_ACTIVE ) ).toBe( true ); - expect( items[ 2 ].getAttribute( 'aria-selected' ) ).toBe( 'true' ); - } ); + expect(items[0].classList.contains(CLASS_ACTIVE)).toBe(false); + expect(items[0].getAttribute('aria-selected')).toBeNull(); + expect(items[2].classList.contains(CLASS_ACTIVE)).toBe(true); + expect(items[2].getAttribute('aria-selected')).toBe('true'); + }); - test( 'can update status classes by the page.', () => { - const splide = init( { perPage: 3, speed: 0 } ); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); + test('can update status classes by the page.', () => { + const splide = init({ perPage: 3, speed: 0 }); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); - splide.go( 4 ); // page: 1 + splide.go(4); // page: 1 - expect( items[ 1 ].classList.contains( CLASS_ACTIVE ) ).toBe( true ); - expect( items[ 1 ].getAttribute( 'aria-selected' ) ).toBe( 'true' ); + expect(items[1].classList.contains(CLASS_ACTIVE)).toBe(true); + expect(items[1].getAttribute('aria-selected')).toBe('true'); - splide.go( 7 ); // end page + splide.go(7); // end page - expect( items[ 3 ].classList.contains( CLASS_ACTIVE ) ).toBe( true ); - expect( items[ 3 ].getAttribute( 'aria-selected' ) ).toBe( 'true' ); - } ); + expect(items[3].classList.contains(CLASS_ACTIVE)).toBe(true); + expect(items[3].getAttribute('aria-selected')).toBe('true'); + }); - test( 'should remove the pagination on destroy.', () => { + test('should remove the pagination on destroy.', () => { const splide = init(); splide.destroy(); - const pagination = document.querySelector( `.${ CLASS_PAGINATION }` ); - expect( pagination ).toBeNull(); - } ); -} ); + const pagination = document.querySelector(`.${ CLASS_PAGINATION }`); + expect(pagination).toBeNull(); + }); +}); diff --git a/src/js/components/Pagination/test/placeholder.test.ts b/src/js/components/Pagination/test/placeholder.test.ts index f5302d9f..f2a4bc77 100644 --- a/src/js/components/Pagination/test/placeholder.test.ts +++ b/src/js/components/Pagination/test/placeholder.test.ts @@ -1,8 +1,8 @@ -import { init } from '../../../test'; +import { init } from '@test'; import { fail } from 'assert'; -describe( 'Pagination', () => { +describe('Pagination', () => { const html = `

@@ -17,32 +17,31 @@ describe( 'Pagination', () => {

`; - test( 'can use a placeholder if provided.', () => { - const splide = init( {}, { html } ); - const placeholder = document.querySelector( '.pagination-placeholder' ); + 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 ); + expect(placeholder).not.toBeUndefined(); + expect(splide.Components.Elements.pagination === placeholder).toBe(true); - const { items } = splide.Components.Pagination; - const { children } = placeholder; + const { items } = splide.Components.Pagination; - expect( items.length === children.length ).toBe( true ); - expect( items[ 0 ].li === children[ 0 ] ).toBe( true ); - } ); + expect(items.length === placeholder?.children.length).toBe(true); + expect(items[0].li === placeholder?.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' ); + 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' ); + 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( '' ); + expect(placeholder.style.display).toBe(''); } else { fail(); } - } ); -} ); + }); +}); diff --git a/src/js/components/Pagination/test/tab.test.ts b/src/js/components/Pagination/test/tab.test.ts index 72500d6a..ec61aa3d 100644 --- a/src/js/components/Pagination/test/tab.test.ts +++ b/src/js/components/Pagination/test/tab.test.ts @@ -1,5 +1,5 @@ import { CLASS_PAGINATION, CLASS_PAGINATION_PAGE } from '../../../constants/classes'; -import { fire, init } from '../../../test'; +import { fire, init } from '@test'; import { Options } from '../../../types'; @@ -7,117 +7,117 @@ import { Options } from '../../../types'; * - `aria-selected` is tested on general.test. * - `aria-labelledby` is not necessary since each tabpanel has its own `aria-label`. */ -describe( 'Pagination', () => { - test( 'can set the `tablist` role to the pagination root.', () => { +describe('Pagination', () => { + test('can set the `tablist` role to the pagination root.', () => { init(); - const pagination = document.querySelector( `.${ CLASS_PAGINATION }` ); - expect( pagination.getAttribute( 'role' ) ).toBe( 'tablist' ); - } ); + const pagination = document.querySelector(`.${ CLASS_PAGINATION }`); + expect(pagination?.getAttribute('role')).toBe('tablist'); + }); - test( 'can set the `tab` role to each item in pagination.', () => { + test('can set the `tab` role to each item in pagination.', () => { init(); - const items = Array.from( document.getElementsByClassName( CLASS_PAGINATION_PAGE ) ); + const items = Array.from(document.getElementsByClassName(CLASS_PAGINATION_PAGE)); - items.forEach( item => { - expect( item.getAttribute( 'role' ) ).toBe( 'tab' ); - } ); + items.forEach(item => { + expect(item.getAttribute('role')).toBe('tab'); + }); - expect( items.length ).toBeGreaterThan( 0 ); - } ); + expect(items.length).toBeGreaterThan(0); + }); - test( 'can set the `aria-label` role to each item in pagination.', () => { - const items = Array.from( document.getElementsByClassName( CLASS_PAGINATION_PAGE ) ); + test('can set the `aria-label` role to each item in pagination.', () => { + const items = Array.from(document.getElementsByClassName(CLASS_PAGINATION_PAGE)); - items.forEach( ( item, index ) => { - expect( item.getAttribute( 'aria-label' ) ).toBe( `Go to slide ${ index + 1 }` ); - } ); - } ); + items.forEach((item, index) => { + expect(item.getAttribute('aria-label')).toBe(`Go to slide ${ index + 1 }`); + }); + }); - test( 'can set `aria-controls="target slide ID"` to each item in pagination.', () => { + test('can set `aria-controls="target slide ID"` to each item in pagination.', () => { const splide = init(); - const items = Array.from( document.getElementsByClassName( CLASS_PAGINATION_PAGE ) ); + const items = Array.from(document.getElementsByClassName(CLASS_PAGINATION_PAGE)); const Slides = splide.Components.Slides; - items.forEach( ( item, index ) => { - const Slide = Slides.getAt( index ); + items.forEach((item, index) => { + const Slide = Slides.getAt(index); - if ( Slide ) { - expect( item.getAttribute( 'aria-controls' ) ).toBe( Slide.slide.id ); + if (Slide) { + expect(item.getAttribute('aria-controls')).toBe(Slide.slide.id); } else { fail(); } - } ); - } ); - - describe.each( [ - [ 'ltr', 'ArrowRight', 'ArrowLeft' ], - [ 'rtl', 'ArrowLeft', 'ArrowRight' ], - [ 'ttb', 'ArrowDown', 'ArrowUp' ], - ] )( 'in %s mode.', ( + }); + }); + + describe.each([ + ['ltr', 'ArrowRight', 'ArrowLeft'], + ['rtl', 'ArrowLeft', 'ArrowRight'], + ['ttb', 'ArrowDown', 'ArrowUp'], + ])('in %s mode.', ( direction, nextKey, - prevKey + prevKey, ) => { - test( 'can move focus by arrow keys and activate the corresponded slide', () => { - const splide = init( { speed: 0, direction: direction as Options[ 'direction' ], height: 300 } ); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); - - fire( items[ 0 ], 'keydown', { key: nextKey } ); - expect( items[ 1 ] === document.activeElement ).toBe( true ); - expect( splide.index ).toBe( 1 ); - - fire( items[ 1 ], 'keydown', { key: nextKey } ); - expect( items[ 2 ] === document.activeElement ).toBe( true ); - expect( splide.index ).toBe( 2 ); - - fire( items[ 2 ], 'keydown', { key: prevKey } ); - expect( items[ 1 ] === document.activeElement ).toBe( true ); - expect( splide.index ).toBe( 1 ); - } ); - - test( 'can loop focus by arrow keys.', () => { - const splide = init( { speed: 0, direction: direction as Options[ 'direction' ], height: 300 } ); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); - const end = splide.length - 1; - - fire( items[ 0 ], 'keydown', { key: prevKey } ); - expect( items[ end ] === document.activeElement ).toBe( true ); - expect( splide.index ).toBe( end ); - - fire( items[ end ], 'keydown', { key: nextKey } ); - expect( items[ 0 ] === document.activeElement ).toBe( true ); - expect( splide.index ).toBe( 0 ); - } ); - - test( 'can focus the first slide by and the last slide by End.', () => { - const splide = init( { speed: 0, direction: direction as Options[ 'direction' ], height: 300 } ); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); - const end = splide.length - 1; - - fire( items[ 0 ], 'keydown', { key: 'End' } ); - expect( items[ end ] === document.activeElement ).toBe( true ); - expect( splide.index ).toBe( end ); - - fire( items[ end ], 'keydown', { key: 'Home' } ); - expect( items[ 0 ] === document.activeElement ).toBe( true ); - expect( splide.index ).toBe( 0 ); - } ); - - test( 'can set proper orientation according to the direction.', () => { - init( { speed: 0, direction: direction as Options[ 'direction' ], height: 300 } ); - const pagination = document.querySelector( `.${ CLASS_PAGINATION }` ); - - expect( pagination.getAttribute( 'aria-orientation' ) ) - .toBe( direction === 'ttb' ? 'vertical' : null ); - } ); - } ); - - test( 'should not activate keyboard shortcuts if `paginationKeyboard` option is disabled.', () => { - const splide = init( { paginationKeyboard: false, speed: 0 } ); - const items = document.getElementsByClassName( CLASS_PAGINATION_PAGE ); - - fire( items[ 0 ], 'keydown', { key: 'ArrowRight' } ); - expect( items[ 1 ] === document.activeElement ).toBe( false ); - expect( splide.index ).toBe( 0 ); - } ); -} ); + test('can move focus by arrow keys and activate the corresponded slide', () => { + const splide = init({ speed: 0, direction: direction as Options[ 'direction' ], height: 300 }); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); + + fire(items[0], 'keydown', { key: nextKey }); + expect(items[1] === document.activeElement).toBe(true); + expect(splide.index).toBe(1); + + fire(items[1], 'keydown', { key: nextKey }); + expect(items[2] === document.activeElement).toBe(true); + expect(splide.index).toBe(2); + + fire(items[2], 'keydown', { key: prevKey }); + expect(items[1] === document.activeElement).toBe(true); + expect(splide.index).toBe(1); + }); + + test('can loop focus by arrow keys.', () => { + const splide = init({ speed: 0, direction: direction as Options[ 'direction' ], height: 300 }); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); + const end = splide.length - 1; + + fire(items[0], 'keydown', { key: prevKey }); + expect(items[end] === document.activeElement).toBe(true); + expect(splide.index).toBe(end); + + fire(items[end], 'keydown', { key: nextKey }); + expect(items[0] === document.activeElement).toBe(true); + expect(splide.index).toBe(0); + }); + + test('can focus the first slide by and the last slide by End.', () => { + const splide = init({ speed: 0, direction: direction as Options[ 'direction' ], height: 300 }); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); + const end = splide.length - 1; + + fire(items[0], 'keydown', { key: 'End' }); + expect(items[end] === document.activeElement).toBe(true); + expect(splide.index).toBe(end); + + fire(items[end], 'keydown', { key: 'Home' }); + expect(items[0] === document.activeElement).toBe(true); + expect(splide.index).toBe(0); + }); + + test('can set proper orientation according to the direction.', () => { + init({ speed: 0, direction: direction as Options[ 'direction' ], height: 300 }); + const pagination = document.querySelector(`.${ CLASS_PAGINATION }`); + + expect(pagination?.getAttribute('aria-orientation')) + .toBe(direction === 'ttb' ? 'vertical' : null); + }); + }); + + test('should not activate keyboard shortcuts if `paginationKeyboard` option is disabled.', () => { + const splide = init({ paginationKeyboard: false, speed: 0 }); + const items = document.getElementsByClassName(CLASS_PAGINATION_PAGE); + + fire(items[0], 'keydown', { key: 'ArrowRight' }); + expect(items[1] === document.activeElement).toBe(false); + expect(splide.index).toBe(0); + }); +}); diff --git a/src/js/components/Scroll/Scroll.ts b/src/js/components/Scroll/Scroll.ts index dec0c2bc..c2aa32ac 100644 --- a/src/js/components/Scroll/Scroll.ts +++ b/src/js/components/Scroll/Scroll.ts @@ -1,10 +1,15 @@ -import { EVENT_MOVE, EVENT_REFRESH, EVENT_SCROLL, EVENT_SCROLLED, EVENT_UPDATED } from '../../constants/events'; +import { + EVENT_MOVE, + EVENT_REFRESH, + EVENT_SCROLL, + EVENT_SCROLLED, + EVENT_SCROLLING, + EVENT_UPDATED, +} from '../../constants/events'; import { IDLE, SCROLLING } from '../../constants/states'; import { SLIDE } from '../../constants/types'; -import { EventInterface, RequestInterval, RequestIntervalInterface } from '../../constructors'; -import { Splide } from '../../core/Splide/Splide'; -import { AnyFunction, BaseComponent, Components, Options } from '../../types'; -import { abs, apply, approximatelyEqual, floor, max, sign } from '../../utils'; +import { AnyFunction, BaseComponent, ComponentConstructor } from '../../types'; +import { abs, apply, approximatelyEqual, max, RequestInterval } from '@splidejs/utils'; import { BASE_VELOCITY, BOUNCE_DIFF_THRESHOLD, BOUNCE_DURATION, FRICTION_FACTOR, MIN_DURATION } from './constants'; @@ -14,7 +19,7 @@ import { BASE_VELOCITY, BOUNCE_DIFF_THRESHOLD, BOUNCE_DURATION, FRICTION_FACTOR, * @since 3.0.0 */ export interface ScrollComponent extends BaseComponent { - scroll( position: number, duration?: number, snap?: boolean, callback?: AnyFunction ): void; + scroll(position: number, duration?: number, snap?: boolean, callback?: AnyFunction): void; cancel(): void; } @@ -26,25 +31,26 @@ export interface ScrollComponent extends BaseComponent { * @param Splide - A Splide instance. * @param Components - A collection of components. * @param options - Options. + * @param event - An EventInterface instance. * * @return A Scroll component object. */ -export function Scroll( Splide: Splide, Components: Components, options: Options ): ScrollComponent { - const { on, emit } = EventInterface( Splide ); +export const Scroll: ComponentConstructor = (Splide, Components, options, event) => { + const { on, emit } = event; const { state: { set } } = Splide; const { Move } = Components; const { getPosition, getLimit, exceededLimit, translate } = Move; - const isSlide = Splide.is( SLIDE ); + const isSlide = Splide.is(SLIDE); /** * Retains the active RequestInterval object. */ - let interval: RequestIntervalInterface; + let interval: RequestInterval; /** * Holds the callback function. */ - let callback: AnyFunction; + let callback: AnyFunction | undefined; /** * The current friction (<= 1). @@ -55,8 +61,8 @@ export function Scroll( Splide: Splide, Components: Components, options: Options * Called when the component is mounted. */ function mount(): void { - on( EVENT_MOVE, clear ); - on( [ EVENT_UPDATED, EVENT_REFRESH ], cancel ); + on(EVENT_MOVE, clear); + on([EVENT_UPDATED, EVENT_REFRESH], cancel); } /** @@ -73,37 +79,51 @@ export function Scroll( Splide: Splide, Components: Components, options: Options duration?: number, snap?: boolean, onScrolled?: AnyFunction, - noConstrain?: boolean + noConstrain?: boolean, ): void { - const from = getPosition(); - clear(); - if ( snap && ( ! isSlide || ! exceededLimit() ) ) { - const size = Components.Layout.sliderSize(); - const offset = sign( destination ) * size * floor( abs( destination ) / size ) || 0; - destination = Move.toPosition( Components.Controller.toDest( destination % size ) ) + offset; - } - - const noDistance = approximatelyEqual( from, destination, 1 ); + const dest = computeDestination(destination, snap); + const from = getPosition(); + const immediately = approximatelyEqual(from, dest, 1) || duration === 0; friction = 1; - duration = noDistance ? 0 : duration || max( abs( destination - from ) / BASE_VELOCITY, MIN_DURATION ); + duration = immediately ? 0 : duration || max(abs(dest - from) / BASE_VELOCITY, MIN_DURATION); callback = onScrolled; - interval = RequestInterval( duration, onEnd, apply( update, from, destination, noConstrain ), 1 ); + interval = RequestInterval(duration, onEnd, apply(update, from, dest, noConstrain), 1); - set( SCROLLING ); - emit( EVENT_SCROLL ); + set(SCROLLING); + emit(EVENT_SCROLL); interval.start(); } + /** + * Computes destination. + * + * @param destination - A desired destination. + * @param snap - Optional. Whether to snap the slider to the closest slide or not. + * + * @return A computed destination. + */ + function computeDestination(destination: number, snap?: boolean): number { + if (snap) { + if (!isSlide || !exceededLimit()) { + const position = destination % Components.Layout.sliderSize(); + const snapped = Move.toPosition(Components.Controller.toDest(position)); + destination -= position - snapped; + } + } + + return destination; + } + /** * Called when scroll ends or has been just canceled. */ function onEnd(): void { - set( IDLE ); + set(IDLE); callback && callback(); - emit( EVENT_SCROLLED ); + emit(EVENT_SCROLLED); } /** @@ -114,18 +134,20 @@ export function Scroll( Splide: Splide, Components: Components, options: Options * @param noConstrain - Whether to suppress constraint process when the slider exceeds bounds. * @param rate - A current rate. */ - function update( from: number, to: number, noConstrain: boolean | undefined, rate: number ): void { + function update(from: number, to: number, noConstrain: boolean | undefined, rate: number): void { + const { easingFunc = t => 1 - Math.pow(1 - t, 4) } = options; const position = getPosition(); - const target = from + ( to - from ) * easing( rate ); - const diff = ( target - position ) * friction; + const target = from + (to - from) * easingFunc(rate); + const diff = (target - position) * friction; - translate( position + diff ); + translate(position + diff); + emit(EVENT_SCROLLING); - if ( isSlide && ! noConstrain && exceededLimit() ) { + if (isSlide && !noConstrain && exceededLimit()) { friction *= FRICTION_FACTOR; - if ( abs( diff ) < BOUNCE_DIFF_THRESHOLD ) { - scroll( getLimit( exceededLimit( true ) ), BOUNCE_DURATION, false, callback, true ); + if (abs(diff) < BOUNCE_DIFF_THRESHOLD) { + scroll(getLimit(exceededLimit(true)), BOUNCE_DURATION, false, callback, true); } } } @@ -134,7 +156,7 @@ export function Scroll( Splide: Splide, Components: Components, options: Options * Clears the active interval. */ function clear(): void { - if ( interval ) { + if (interval) { interval.cancel(); } } @@ -143,28 +165,16 @@ export function Scroll( Splide: Splide, Components: Components, options: Options * Cancels the active interval and emits the `scrolled` event. */ function cancel(): void { - if ( interval && ! interval.isPaused() ) { + if (interval && !interval.isPaused()) { clear(); onEnd(); } } - /** - * The easing function. - * - * @param t - A value to ease. - * - * @return An eased value. - */ - function easing( t: number ): number { - const { easingFunc } = options; - return easingFunc ? easingFunc( t ) : 1 - Math.pow( 1 - t, 4 ); - } - return { mount, destroy: clear, scroll, cancel, }; -} +}; diff --git a/src/js/components/Scroll/test/general.test.ts b/src/js/components/Scroll/test/general.test.ts index b79bee04..e99aae72 100644 --- a/src/js/components/Scroll/test/general.test.ts +++ b/src/js/components/Scroll/test/general.test.ts @@ -1,76 +1,76 @@ -import { init, wait } from '../../../test'; +import { init, wait } from '@test'; import { BASE_VELOCITY, BOUNCE_DURATION } from '../constants'; -describe( 'Scroll', () => { - test( 'can scroll the slider to the destination.', async () => { - const splide = init(); +describe('Scroll', () => { + test('can scroll the slider to the destination.', async () => { + const splide = init(); const duration = 100; // Waiting for the initial reposition. It will cancel scrolling. - await wait( 100 ); + await wait(100); - splide.Components.Scroll.scroll( -100, duration ); + splide.Components.Scroll.scroll(-100, duration); - await wait( duration + 50 ); + await wait(duration + 50); - expect( Math.round( splide.Components.Move.getPosition() ) ).toBe( -100 ); + expect(Math.round(splide.Components.Move.getPosition())).toBe(-100); splide.destroy(); - } ); + }); - test( 'can scroll the slider to the destination in specified duration.', async () => { - const splide = init(); + test('can scroll the slider to the destination in specified duration.', async () => { + const splide = init(); const duration = 200; const { getPosition } = splide.Components.Move; - await wait( 100 ); + await wait(100); - splide.Components.Scroll.scroll( -100, duration ); + splide.Components.Scroll.scroll(-100, duration); - await wait( duration / 2 ); + await wait(duration / 2); - expect( getPosition() ).toBeGreaterThan( -100 ); + expect(getPosition()).toBeGreaterThan(-100); - await wait( duration / 2 + 50 ); + await wait(duration / 2 + 50); - expect( Math.round( getPosition() ) ).toBe( -100 ); + expect(Math.round(getPosition())).toBe(-100); splide.destroy(); - } ); + }); - test( 'can constrain the position when the slider goes over the bounds.', async () => { - const splide = init(); + test('can constrain the position when the slider goes over the bounds.', async () => { + const splide = init(); const duration = 100; // Trying to run over the bounds by providing the positive number as the distance. - splide.Components.Scroll.scroll( 100, duration ); + splide.Components.Scroll.scroll(100, duration); - await wait( duration + BOUNCE_DURATION + 100 ); + await wait(duration + BOUNCE_DURATION + 100); - expect( Math.round( splide.Components.Move.getPosition() ) ).toBe( 0 ); + expect(Math.round(splide.Components.Move.getPosition())).toBe(0); splide.destroy(); - } ); + }); - test( 'can vary the duration according to the distance if the time is not provided.', async () => { - const splide = init(); + test('can vary the duration according to the distance if the time is not provided.', async () => { + const splide = init(); const destination = -1000; const { getPosition } = splide.Components.Move; // Velocity: px/ms, t[ms] = x/v - const expectedDuration = Math.abs( destination / BASE_VELOCITY ); + const expectedDuration = Math.abs(destination / BASE_VELOCITY); - splide.Components.Scroll.scroll( destination ); + splide.Components.Scroll.scroll(destination); - await wait( expectedDuration / 2 ); + await wait(expectedDuration / 2); - expect( getPosition() ).toBeGreaterThan( destination ); + expect(getPosition()).toBeGreaterThan(destination); - await wait( expectedDuration / 2 + 100 ); + await wait(expectedDuration / 2 + 100); - expect( Math.round( getPosition() ) ).toBe( destination ); + expect(Math.round(getPosition())).toBe(destination); splide.destroy(); - } ); -} ); + }); +}); diff --git a/src/js/components/Slides/Slide.ts b/src/js/components/Slides/Slide.ts index 318f9606..1f9f3d9d 100644 --- a/src/js/components/Slides/Slide.ts +++ b/src/js/components/Slides/Slide.ts @@ -31,7 +31,6 @@ import { } from '../../constants/events'; import { MOVING, SCROLLING } from '../../constants/states'; import { FADE, LOOP } from '../../constants/types'; -import { EventInterface } from '../../constructors'; import { Splide } from '../../core/Splide/Splide'; import { BaseComponent } from '../../types'; import { @@ -39,6 +38,7 @@ import { apply, ceil, child, + CSSProperties, floor, focus, format, @@ -53,7 +53,7 @@ import { setAttribute, style as _style, toggleClass, -} from '../../utils'; +} from '@splidejs/utils'; /** @@ -61,15 +61,21 @@ import { * * @since 3.0.0 */ -export interface SlideComponent extends BaseComponent { - index: number; - slideIndex: number; - slide: HTMLElement; - container: HTMLElement; - isClone: boolean; +export interface SlideComponent extends BaseComponent { + readonly index: number; + readonly slideIndex: number; + readonly slide: HTMLElement; + readonly container: HTMLElement | undefined; + readonly isClone: boolean; + update(): void; - style( prop: string, value: string | number, useContainer?: boolean ): void - isWithin( from: number, distance: number ): boolean; + style(prop: CSSProperties, value: string | number | null, useContainer?: boolean): void + isWithin(from: number, distance: number): boolean; + isVisible(partial?: boolean): boolean; + + /** @internal */ + mount(): void; + destroy(): void; } /** @@ -84,16 +90,17 @@ export interface SlideComponent extends BaseComponent { * * @return A Slide subcomponent. */ -export function Slide( Splide: Splide, index: number, slideIndex: number, slide: HTMLElement ): SlideComponent { - const event = EventInterface( Splide ); +export const Slide = (Splide: Splide, index: number, slideIndex: number, slide: HTMLElement): SlideComponent => { + const event = Splide.event.lock(); const { on, emit, bind } = event; const { Components, root, options } = Splide; - const { isNavigation, updateOnMove, i18n, pagination, slideFocus } = options; + const { isNavigation, updateOnMove, pagination, slideFocus } = options; + const { Elements } = Components; const { resolve } = Components.Direction; - const styles = getAttribute( slide, 'style' ); - const label = getAttribute( slide, ARIA_LABEL ); - const isClone = slideIndex > -1; - const container = child( slide, `.${ CLASS_CONTAINER }` ); + const styles = getAttribute(slide, 'style'); + const label = getAttribute(slide, ARIA_LABEL); + const isClone = slideIndex > -1; + const container = child(slide, `.${ CLASS_CONTAINER }`); /** * Turns into `true` when the component is destroyed. @@ -103,12 +110,12 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide: /** * Called when the component is mounted. */ - function mount( this: SlideComponent ): void { - if ( ! isClone ) { - slide.id = `${ root.id }-slide${ pad( index + 1 ) }`; - setAttribute( slide, ROLE, pagination ? 'tabpanel' : 'group' ); - setAttribute( slide, ARIA_ROLEDESCRIPTION, i18n.slide ); - setAttribute( slide, ARIA_LABEL, label || format( i18n.slideLabel, [ index + 1, Splide.length ] ) ); + function mount(this: SlideComponent): void { + if (!isClone) { + slide.id = `${ root.id }-slide${ pad(index + 1) }`; + setAttribute(slide, ROLE, pagination ? 'tabpanel' : 'group'); + setAttribute(slide, ARIA_ROLEDESCRIPTION, Splide.i18n('slide')); + setAttribute(slide, ARIA_LABEL, label || format(Splide.i18n('slideLabel'), index + 1, Splide.length)); } listen(); @@ -118,13 +125,13 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide: * Listens to some events. */ function listen(): void { - bind( slide, 'click', apply( emit, EVENT_CLICK, self ) ); - bind( slide, 'keydown', apply( emit, EVENT_SLIDE_KEYDOWN, self ) ); - on( [ EVENT_MOVED, EVENT_SHIFTED, EVENT_SCROLLED ], update ); - on( EVENT_NAVIGATION_MOUNTED, initNavigation ); + bind(slide, 'click', apply(emit, EVENT_CLICK, self)); + bind(slide, 'keydown', apply(emit, EVENT_SLIDE_KEYDOWN, self)); + on([EVENT_MOVED, EVENT_SHIFTED, EVENT_SCROLLED], update); + on(EVENT_NAVIGATION_MOUNTED, initNavigation); - if ( updateOnMove ) { - on( EVENT_MOVE, onMove ); + if (updateOnMove) { + on(EVENT_MOVE, onMove); } } @@ -134,32 +141,32 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide: function destroy(): void { destroyed = true; event.destroy(); - removeClass( slide, STATUS_CLASSES ); - removeAttribute( slide, ALL_ATTRIBUTES ); - setAttribute( slide, 'style', styles ); - setAttribute( slide, ARIA_LABEL, label || '' ); + removeClass(slide, STATUS_CLASSES); + removeAttribute(slide, ALL_ATTRIBUTES); + setAttribute(slide, 'style', styles); + setAttribute(slide, ARIA_LABEL, label || ''); } /** * Initializes slides as navigation. */ function initNavigation(): void { - const controls = Splide.splides.map( target => { - const Slide = target.splide.Components.Slides.getAt( index ); + const controls = Splide.splides.map(target => { + const Slide = target.splide.Components.Slides.getAt(index); return Slide ? Slide.slide.id : ''; - } ).join( ' ' ); + }).join(' '); - setAttribute( slide, ARIA_LABEL, format( i18n.slideX, ( isClone ? slideIndex : index ) + 1 ) ); - setAttribute( slide, ARIA_CONTROLS, controls ); - setAttribute( slide, ROLE, slideFocus ? 'button' : '' ); - slideFocus && removeAttribute( slide, ARIA_ROLEDESCRIPTION ); + setAttribute(slide, ARIA_LABEL, format(Splide.i18n('slideX'), (isClone ? slideIndex : index) + 1)); + setAttribute(slide, ARIA_CONTROLS, controls); + setAttribute(slide, ROLE, slideFocus ? 'button' : ''); + slideFocus && removeAttribute(slide, ARIA_ROLEDESCRIPTION); } /** * If the `updateOnMove` option is `true`, called when the slider starts moving. */ function onMove(): void { - if ( ! destroyed ) { + if (!destroyed) { update(); } } @@ -168,13 +175,13 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide: * Updates attribute and classes of the slide. */ function update(): void { - if ( ! destroyed ) { + if (!destroyed) { const { index: curr } = Splide; updateActivity(); updateVisibility(); - toggleClass( slide, CLASS_PREV, index === curr - 1 ); - toggleClass( slide, CLASS_NEXT, index === curr + 1 ); + toggleClass(slide, CLASS_PREV, index === curr - 1); + toggleClass(slide, CLASS_NEXT, index === curr + 1); } } @@ -184,10 +191,10 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide: function updateActivity(): void { const active = isActive(); - if ( active !== hasClass( slide, CLASS_ACTIVE ) ) { - toggleClass( slide, CLASS_ACTIVE, active ); - setAttribute( slide, ARIA_CURRENT, isNavigation && active || '' ); - emit( active ? EVENT_ACTIVE : EVENT_INACTIVE, self ); + if (active !== hasClass(slide, CLASS_ACTIVE)) { + toggleClass(slide, CLASS_ACTIVE, active); + setAttribute(slide, ARIA_CURRENT, isNavigation && active || ''); + emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self); } } @@ -198,26 +205,26 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide: */ function updateVisibility(): void { const visible = isVisible(); - const hidden = ! visible && ( ! isActive() || isClone ); + const hidden = !visible && (!isActive() || isClone); - if ( ! Splide.state.is( [ MOVING, SCROLLING ] ) ) { - setAttribute( slide, ARIA_HIDDEN, hidden || '' ); + if (!Splide.state.is([MOVING, SCROLLING])) { + setAttribute(slide, ARIA_HIDDEN, hidden || ''); } - setAttribute( queryAll( slide, options.focusableNodes || '' ), TAB_INDEX, hidden ? -1 : '' ); + setAttribute(queryAll(slide, options.focusableNodes || ''), TAB_INDEX, hidden ? -1 : ''); - if ( slideFocus ) { - setAttribute( slide, TAB_INDEX, hidden ? -1 : 0 ); + if (slideFocus) { + setAttribute(slide, TAB_INDEX, hidden ? -1 : 0); } - if ( visible !== hasClass( slide, CLASS_VISIBLE ) ) { - toggleClass( slide, CLASS_VISIBLE, visible ); - emit( visible ? EVENT_VISIBLE : EVENT_HIDDEN, self ); + if (visible !== hasClass(slide, CLASS_VISIBLE)) { + toggleClass(slide, CLASS_VISIBLE, visible); + emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self); } - if ( ! visible && document.activeElement === slide ) { - const Slide = Components.Slides.getAt( Splide.index ); - Slide && focus( Slide.slide ); + if (!visible && document.activeElement === slide) { + const Slide = Components.Slides.getAt(Splide.index); + Slide && focus(Slide.slide); } } @@ -228,8 +235,8 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide: * @param value - A CSS value to add. * @param useContainer - Optional. Determines whether to apply the rule to the container or not. */ - function style( prop: string, value: string | number, useContainer?: boolean ): void { - _style( ( useContainer && container ) || slide, prop, value ); + function style(prop: CSSProperties, value: string | number | null, useContainer?: boolean): void { + _style((useContainer && container) || slide, prop, value); } /** @@ -239,24 +246,25 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide: */ function isActive(): boolean { const { index: curr } = Splide; - return curr === index || ( options.cloneStatus && curr === slideIndex ); + const { cloneStatus = true } = options; + return curr === index || (cloneStatus && curr === slideIndex); } /** * Checks if the slide is visible or not. */ - function isVisible(): boolean { - if ( Splide.is( FADE ) ) { + function isVisible(partial?: boolean): boolean { + if (Splide.is(FADE)) { return isActive(); } - const trackRect = rect( Components.Elements.track ); - const slideRect = rect( slide ); - const left = resolve( 'left', true ); - const right = resolve( 'right', true ); + const trackRect = rect(Elements.track); + const slideRect = rect(slide); + const left = resolve('left', true); + const right = resolve('right', true); - return floor( trackRect[ left ] ) <= ceil( slideRect[ left ] ) - && floor( slideRect[ right ] ) <= ceil( trackRect[ right ] ); + return floor(trackRect[left]) <= ceil(slideRect[partial ? right : left]) + && floor(slideRect[partial ? left : right]) <= ceil(trackRect[right]); } /** @@ -268,11 +276,11 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide: * * @return `true` if the slide is within the `distance` from the base slide, or otherwise `false`. */ - function isWithin( from: number, distance: number ): boolean { - let diff = abs( from - index ); + function isWithin(from: number, distance: number): boolean { + let diff = abs(from - index); - if ( ! isClone && ( options.rewind || Splide.is( LOOP ) ) ) { - diff = min( diff, Splide.length - diff ); + if (!isClone && (options.rewind || Splide.is(LOOP))) { + diff = min(diff, Splide.length - diff); } return diff <= distance; @@ -288,8 +296,9 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide: destroy, update, style, + isVisible, isWithin, }; return self; -} +}; diff --git a/src/js/components/Slides/Slides.ts b/src/js/components/Slides/Slides.ts index 104d4941..862d59dd 100644 --- a/src/js/components/Slides/Slides.ts +++ b/src/js/components/Slides/Slides.ts @@ -1,13 +1,12 @@ import { EVENT_REFRESH, EVENT_RESIZE } from '../../constants/events'; -import { EventInterface } from '../../constructors'; -import { Splide } from '../../core/Splide/Splide'; -import { AnyFunction, BaseComponent, Components, Options } from '../../types'; +import { AnyFunction, BaseComponent, ComponentConstructor } from '../../types'; import { addClass, append, apply, before, between, + CSSProperties, empty, forEach as forEachItem, includes, @@ -17,9 +16,9 @@ import { matches, parseHtml, queryAll, - remove as removeNode, + removeNode, toArray, -} from '../../utils'; +} from '@splidejs/utils'; import { Slide, SlideComponent } from './Slide'; @@ -30,16 +29,16 @@ import { Slide, SlideComponent } from './Slide'; */ export interface SlidesComponent extends BaseComponent { update(): void; - register( slide: HTMLElement, index: number, slideIndex: number ): void; - get( excludeClones?: boolean ): SlideComponent[]; - getIn( page: number ): SlideComponent[]; - getAt( index: number ): SlideComponent | undefined; - add( slide: string | Element | Array, index?: number ): void; - remove( selector: SlideMatcher ): void; - forEach( iteratee: SlidesIteratee, excludeClones?: boolean ): void; - filter( matcher: SlideMatcher ): SlideComponent[]; - style( prop: string, value: string | number, useContainer?: boolean ): void - getLength( excludeClones?: boolean ): number; + register(slide: HTMLElement, index: number, slideIndex: number): void; + get(excludeClones?: boolean): SlideComponent[]; + getIn(page: number): SlideComponent[]; + getAt(index: number): SlideComponent | undefined; + add(slide: string | Element | Array, index?: number): void; + remove(selector: SlideMatcher): void; + forEach(iteratee: SlidesIteratee, excludeClones?: boolean): void; + filter(matcher: SlideMatcher): SlideComponent[]; + style(prop: string, value: string | number | null, useContainer?: boolean): void + getLength(excludeClones?: boolean): number; isEnough(): boolean; } @@ -48,14 +47,14 @@ export interface SlidesComponent extends BaseComponent { * * @since 3.0.0 */ -export type SlidesIteratee = ( Slide: SlideComponent, index: number, Slides: SlideComponent[] ) => void +export type SlidesIteratee = (Slide: SlideComponent, index: number, Slides: SlideComponent[]) => void /** * The predicate function for Slides. * * @since 3.0.0 */ -export type SlidesPredicate = ( Slide: SlideComponent, index: number, Slides: SlideComponent[] ) => any +export type SlidesPredicate = (Slide: SlideComponent, index: number, Slides: SlideComponent[]) => any /** * The type for filtering SlideComponent objects. @@ -72,11 +71,12 @@ export type SlideMatcher = number | number[] | string | SlidesPredicate; * @param Splide - A Splide instance. * @param Components - A collection of components. * @param options - Options. + * @param event - An EventInterface instance. * * @return An Slides component object. */ -export function Slides( Splide: Splide, Components: Components, options: Options ): SlidesComponent { - const { on, emit, bind } = EventInterface( Splide ); +export const Slides: ComponentConstructor = (Splide, Components, options, event) => { + const { on, emit, bind } = event; const { slides, list } = Components.Elements; /** @@ -89,30 +89,30 @@ export function Slides( Splide: Splide, Components: Components, options: Options */ function mount(): void { init(); - on( EVENT_REFRESH, destroy ); - on( EVENT_REFRESH, init ); + on(EVENT_REFRESH, destroy); + on(EVENT_REFRESH, init); } /** * Initializes the component. */ function init(): void { - slides.forEach( ( slide, index ) => { register( slide, index, -1 ) } ); + slides.forEach((slide, index) => register(slide, index, -1)); } /** * Destroys the component. */ function destroy(): void { - forEach( Slide => { Slide.destroy() } ); - empty( Slides ); + forEach(Slide => Slide.destroy()); + empty(Slides); } /** * Manually updates the status of all slides. */ function update(): void { - forEach( Slide => { Slide.update() } ); + forEach(Slide => Slide.update()); } /** @@ -123,11 +123,11 @@ export function Slides( Splide: Splide, Components: Components, options: Options * @param index - A slide index. * @param slideIndex - A slide index for clones. This must be `-1` for regular slides. */ - function register( slide: HTMLElement, index: number, slideIndex: number ): void { - const object = Slide( Splide, index, slideIndex, slide ); - object.mount(); - Slides.push( object ); - Slides.sort( ( Slide1, Slide2 ) => Slide1.index - Slide2.index ); + function register(slide: HTMLElement, index: number, slideIndex: number): void { + const instance = Slide(Splide, index, slideIndex, slide); + instance.mount(); + Slides.push(instance); + Slides.sort((Slide1, Slide2) => Slide1.index - Slide2.index); } /** @@ -137,8 +137,8 @@ export function Slides( Splide: Splide, Components: Components, options: Options * * @return An array with Slide objects. */ - function get( excludeClones?: boolean ): SlideComponent[] { - return excludeClones ? filter( Slide => ! Slide.isClone ) : Slides; + function get(excludeClones?: boolean): SlideComponent[] { + return excludeClones ? filter(Slide => !Slide.isClone) : Slides; } /** @@ -148,11 +148,11 @@ export function Slides( Splide: Splide, Components: Components, options: Options * * @return An array with slides that belong to the page. */ - function getIn( page: number ): SlideComponent[] { + function getIn(page: number): SlideComponent[] { const { Controller } = Components; - const index = Controller.toIndex( page ); - const max = Controller.hasFocus() ? 1 : options.perPage; - return filter( Slide => between( Slide.index, index, index + max - 1 ) ); + const index = Controller.toIndex(page); + const max = Controller.hasFocus() ? 1 : options.perPage || 1; + return filter(Slide => between(Slide.index, index, index + max - 1)); } /** @@ -162,8 +162,8 @@ export function Slides( Splide: Splide, Components: Components, options: Options * * @return A Slide object if available, or otherwise `undefined`. */ - function getAt( index: number ): SlideComponent | undefined { - return filter( index )[ 0 ]; + function getAt(index: number): SlideComponent | undefined { + return filter(index)[0]; } /** @@ -172,21 +172,21 @@ export function Slides( Splide: Splide, Components: Components, options: Options * @param items - A slide element, an HTML string or an array with them. * @param index - Optional. An index to insert the slide at. If omitted, appends it to the list. */ - function add( items: string | Element | Array, index?: number ): void { - forEachItem( items, slide => { - if ( isString( slide ) ) { - slide = parseHtml( slide ); + function add(items: string | Element | Array, index?: number): void { + forEachItem(items, slide => { + if (isString(slide)) { + slide = parseHtml(slide) || ''; } - if ( isHTMLElement( slide ) ) { - const ref = slides[ index ]; - ref ? before( slide, ref ) : append( list, slide ); - addClass( slide, options.classes.slide ); - observeImages( slide, apply( emit, EVENT_RESIZE ) ); + if (isHTMLElement(slide)) { + const ref = slides[index || -1]; + ref ? before(ref, slide) : append(list, slide); + addClass(slide, Splide.classes('slide')); + observeImages(slide, apply(emit, EVENT_RESIZE)); } - } ); + }); - emit( EVENT_REFRESH ); + emit(EVENT_REFRESH); } /** @@ -195,9 +195,9 @@ export function Slides( Splide: Splide, Components: Components, options: Options * * @param matcher - An index, an array with indices, a selector string, or an iteratee function. */ - function remove( matcher: SlideMatcher ): void { - removeNode( filter( matcher ).map( Slide => Slide.slide ) ); - emit( EVENT_REFRESH ); + function remove(matcher: SlideMatcher): void { + removeNode(filter(matcher).map(Slide => Slide.slide)); + emit(EVENT_REFRESH); } /** @@ -206,8 +206,8 @@ export function Slides( Splide: Splide, Components: Components, options: Options * @param iteratee - An iteratee function that takes a Slide object, an index and an array with Slides. * @param excludeClones - Optional. Determines whether to exclude clones or not. */ - function forEach( iteratee: SlidesIteratee, excludeClones?: boolean ): void { - get( excludeClones ).forEach( iteratee ); + function forEach(iteratee: SlidesIteratee, excludeClones?: boolean): void { + get(excludeClones).forEach(iteratee); } /** @@ -218,12 +218,12 @@ export function Slides( Splide: Splide, Components: Components, options: Options * * @return An array with SlideComponent objects. */ - function filter( matcher: SlideMatcher ): SlideComponent[] { - return Slides.filter( isFunction( matcher ) + function filter(matcher: SlideMatcher): SlideComponent[] { + return Slides.filter(isFunction(matcher) ? matcher - : Slide => isString( matcher ) - ? matches( Slide.slide, matcher ) - : includes( toArray( matcher ), Slide.index ) + : Slide => isString(matcher) + ? matches(Slide.slide, matcher) + : includes(toArray(matcher), Slide.index), ); } @@ -234,8 +234,8 @@ export function Slides( Splide: Splide, Components: Components, options: Options * @param value - A CSS value to add. * @param useContainer - Optional. Determines whether to apply the rule to the container or not. */ - function style( prop: string, value: string | number, useContainer?: boolean ): void { - forEach( Slide => { Slide.style( prop, value, useContainer ) } ); + function style(prop: CSSProperties, value: string | number | null, useContainer?: boolean): void { + forEach(Slide => Slide.style(prop, value, useContainer)); } /** @@ -244,18 +244,18 @@ export function Slides( Splide: Splide, Components: Components, options: Options * @param elm - An element that may contain images. * @param callback - A callback function. */ - function observeImages( elm: Element, callback: AnyFunction ): void { - const images = queryAll( elm, 'img' ); + function observeImages(elm: Element, callback: AnyFunction): void { + const images = queryAll(elm, 'img'); let { length } = images; - if ( length ) { - images.forEach( img => { - bind( img, 'load error', () => { - if ( ! --length ) { + if (length) { + images.forEach(img => { + bind(img, 'load error', () => { + if (!--length) { callback(); } - } ); - } ); + }); + }); } else { callback(); } @@ -268,7 +268,7 @@ export function Slides( Splide: Splide, Components: Components, options: Options * * @return The length of slides. */ - function getLength( excludeClones?: boolean ): number { + function getLength(excludeClones?: boolean): number { return excludeClones ? slides.length : Slides.length; } @@ -278,7 +278,7 @@ export function Slides( Splide: Splide, Components: Components, options: Options * @return `true` if there are enough slides, or otherwise `false`. */ function isEnough(): boolean { - return Slides.length > options.perPage; + return Slides.length > (options.perPage || 1); } return { @@ -297,4 +297,4 @@ export function Slides( Splide: Splide, Components: Components, options: Options getLength, isEnough, }; -} +}; diff --git a/src/js/components/Slides/test/add.test.ts b/src/js/components/Slides/test/add.test.ts index f2e2df14..b4cb3954 100644 --- a/src/js/components/Slides/test/add.test.ts +++ b/src/js/components/Slides/test/add.test.ts @@ -1,82 +1,82 @@ -import { init } from '../../../test'; +import { init } from '@test'; -describe( 'Slides#add()', () => { - test( 'can append a new element to the slider.', () => { +describe('Slides#add()', () => { + test('can append a new element to the slider.', () => { const splide = init(); const { Slides } = splide.Components; - const slide = document.createElement( 'div' ); + const slide = document.createElement('div'); - Slides.add( slide ); + Slides.add(slide); - expect( Slides.getAt( Slides.getLength() - 1 ).slide ).toBe( slide ); - } ); + expect(Slides.getAt(Slides.getLength() - 1)?.slide).toBe(slide); + }); - test( 'can append elements to the slider.', () => { + test('can append elements to the slider.', () => { const splide = init(); const { Slides } = splide.Components; - const slide1 = document.createElement( 'div' ); - const slide2 = document.createElement( 'div' ); + const slide1 = document.createElement('div'); + const slide2 = document.createElement('div'); - Slides.add( [ slide1, slide2 ] ); + Slides.add([slide1, slide2]); - expect( Slides.getAt( Slides.getLength() - 2 ).slide ).toBe( slide1 ); - expect( Slides.getAt( Slides.getLength() - 1 ).slide ).toBe( slide2 ); - } ); + expect(Slides.getAt(Slides.getLength() - 2)?.slide).toBe(slide1); + expect(Slides.getAt(Slides.getLength() - 1)?.slide).toBe(slide2); + }); - test( 'can append a new slide by HTML.', () => { + test('can append a new slide by HTML.', () => { const splide = init(); const { add, getAt, getLength } = splide.Components.Slides; - add( [ '

' ] ); + add(['

']); - expect( getAt( getLength() - 1 ).slide.classList.contains( 'slide1' ) ).toBe( true ); - } ); + expect(getAt(getLength() - 1)?.slide.classList.contains('slide1')).toBe(true); + }); - test( 'can append new slides by HTML.', () => { + test('can append new slides by HTML.', () => { const splide = init(); const { add, getAt, getLength } = splide.Components.Slides; - add( [ '

', '

' ] ); + add(['

', '

']); - expect( getAt( getLength() - 2 ).slide.classList.contains( 'slide1' ) ).toBe( true ); - expect( getAt( getLength() - 1 ).slide.classList.contains( 'slide2' ) ).toBe( true ); - } ); + expect(getAt(getLength() - 2)?.slide.classList.contains('slide1')).toBe(true); + expect(getAt(getLength() - 1)?.slide.classList.contains('slide2')).toBe(true); + }); - test( 'can insert a new element at the specific index.', () => { + test('can insert a new element at the specific index.', () => { const splide = init(); const { Slides } = splide.Components; - const slide = document.createElement( 'div' ); + const slide = document.createElement('div'); - Slides.add( slide, 1 ); + Slides.add(slide, 1); - expect( Slides.getAt( 1 ).slide ).toBe( slide ); - } ); + expect(Slides.getAt(1)?.slide).toBe(slide); + }); - test( 'can insert new elements at the specific index.', () => { + test('can insert new elements at the specific index.', () => { const splide = init(); const { Slides } = splide.Components; - const slide1 = document.createElement( 'div' ); - const slide2 = document.createElement( 'div' ); + const slide1 = document.createElement('div'); + const slide2 = document.createElement('div'); - Slides.add( [ slide1, slide2 ], 1 ); + Slides.add([slide1, slide2], 1); - expect( Slides.getAt( 1 ).slide ).toBe( slide1 ); - expect( Slides.getAt( 2 ).slide ).toBe( slide2 ); - } ); + expect(Slides.getAt(1)?.slide).toBe(slide1); + expect(Slides.getAt(2)?.slide).toBe(slide2); + }); - test( 'should not break the order of Slides.', () => { - const splide = init( { type: 'loop' } ); + test('should not break the order of Slides.', () => { + const splide = init({ type: 'loop' }); const { Slides } = splide.Components; - const slide = document.createElement( 'div' ); + const slide = document.createElement('div'); const slides = Slides.get(); - expect( slides[ 0 ].index ).toBeLessThan( 0 ); // negative index for clones - expect( slides[ slides.length - 1 ].index ).toBeGreaterThanOrEqual( splide.length ); + expect(slides[0].index).toBeLessThan(0); // negative index for clones + expect(slides[slides.length - 1].index).toBeGreaterThanOrEqual(splide.length); - Slides.add( slide, 1 ); // This emits refresh. + Slides.add(slide, 1); // This emits refresh. - expect( slides[ 0 ].index ).toBeLessThan( 0 ); // negative index for clones - expect( slides[ slides.length - 1 ].index ).toBeGreaterThanOrEqual( splide.length ); - } ); -} ); + expect(slides[0].index).toBeLessThan(0); // negative index for clones + expect(slides[slides.length - 1].index).toBeGreaterThanOrEqual(splide.length); + }); +}); diff --git a/src/js/components/Slides/test/filter.test.ts b/src/js/components/Slides/test/filter.test.ts index 3a1ebd00..6dda2b66 100644 --- a/src/js/components/Slides/test/filter.test.ts +++ b/src/js/components/Slides/test/filter.test.ts @@ -1,34 +1,34 @@ import { CLASS_SLIDE } from '../../../constants/classes'; -import { init } from '../../../test'; +import { init } from '@test'; -describe( 'Slides#filter()', () => { +describe('Slides#filter()', () => { const splide = init(); const { Slides } = splide.Components; const all = Slides.get(); - test( 'can filter slides by the index.', () => { - expect( Slides.filter( 2 )[ 0 ] ).toBe( Slides.get()[ 2 ] ); - } ); + test('can filter slides by the index.', () => { + expect(Slides.filter(2)[0]).toBe(Slides.get()[2]); + }); - test( 'can filter slides by indices.', () => { - expect( Slides.filter( [ 0, 2, 4 ] ) ).toEqual( [ all[ 0 ], all[ 2 ], all[ 4 ] ] ); - } ); + test('can filter slides by indices.', () => { + expect(Slides.filter([0, 2, 4])).toEqual([all[0], all[2], all[4]]); + }); - test( 'can filter slides by the CSS selector.', () => { - const first = Slides.filter( `.${ CLASS_SLIDE }:first-child` )[ 0 ]; - const last = Slides.filter( `.${ CLASS_SLIDE }:last-child` )[ 0 ]; + test('can filter slides by the CSS selector.', () => { + const first = Slides.filter(`.${ CLASS_SLIDE }:first-child`)[0]; + const last = Slides.filter(`.${ CLASS_SLIDE }:last-child`)[0]; - expect( first ).toBe( all[ 0 ] ); - expect( last ).toBe( all[ all.length - 1 ] ); - } ); + expect(first).toBe(all[0]); + expect(last).toBe(all[all.length - 1]); + }); - test( 'can filter slides by the predicate function.', () => { - const filtered = Slides.filter( ( Slide, index ) => { + test('can filter slides by the predicate function.', () => { + const filtered = Slides.filter((Slide, index) => { return index < 5; - } ); + }); - expect( filtered.length ).toBe( 5 ); - expect( filtered[ filtered.length - 1 ] ).toBe( all[ filtered.length - 1 ] ); - } ); -} ); + expect(filtered.length).toBe(5); + expect(filtered[filtered.length - 1]).toBe(all[filtered.length - 1]); + }); +}); diff --git a/src/js/components/Slides/test/general.test.ts b/src/js/components/Slides/test/general.test.ts index defac33f..79c8b0c0 100644 --- a/src/js/components/Slides/test/general.test.ts +++ b/src/js/components/Slides/test/general.test.ts @@ -1,119 +1,119 @@ import { CLASS_CLONE, CLASS_SLIDE } from '../../../constants/classes'; -import { init } from '../../../test'; +import { init } from '@test'; -describe( 'Slides', () => { - test( 'can create a Slide component.', () => { - const splide = init( {}, { length: 0 } ); +describe('Slides', () => { + test('can create a Slide component.', () => { + const splide = init({}, { length: 0 }); const { Slides } = splide.Components; - expect( Slides.getLength( false ) ).toBe( 0 ); + expect(Slides.getLength(false)).toBe(0); - const slide = document.createElement( 'div' ); + const slide = document.createElement('div'); - Slides.register( slide, 0, 0 ); - expect( Slides.getLength( false ) ).toBe( 1 ); + Slides.register(slide, 0, 0); + expect(Slides.getLength(false)).toBe(1); - const Slide = Slides.getAt( 0 ); - expect( Slide.slide === slide ).toBe( true ); - } ); + const Slide = Slides.getAt(0); + expect(Slide?.slide === slide).toBe(true); + }); - test( 'can provide all Slide components with/without clones.', () => { - const splide = init( { type: 'loop' } ); - const { Slides } = splide.Components; - const slides = document.getElementsByClassName( CLASS_SLIDE ); - const clones = document.getElementsByClassName( CLASS_CLONE ); - const WithClones = Slides.get(); - const WithoutClones = Slides.get( true ); + test('can provide all Slide components with/without clones.', () => { + const splide = init({ type: 'loop' }); + const { Slides } = splide.Components; + const slides = document.getElementsByClassName(CLASS_SLIDE); + const clones = document.getElementsByClassName(CLASS_CLONE); + const WithClones = Slides.get(); + const WithoutClones = Slides.get(true); - expect( WithClones.length ).toBe( slides.length ); - expect( WithoutClones.length ).toBe( slides.length - clones.length ); - } ); + expect(WithClones.length).toBe(slides.length); + expect(WithoutClones.length).toBe(slides.length - clones.length); + }); - test( 'can provide Slide components in the specified page.', () => { - const splide = init( { perPage: 3 } ); // end index: 7 + test('can provide Slide components in the specified page.', () => { + const splide = init({ perPage: 3 }); // end index: 7 const { Slides } = splide.Components; - const SlidesInPage0 = Slides.getIn( 0 ); - expect( SlidesInPage0.length ).toBe( 3 ); - expect( SlidesInPage0[ 0 ].index ).toBe( 0 ); - expect( SlidesInPage0[ 1 ].index ).toBe( 1 ); - expect( SlidesInPage0[ 2 ].index ).toBe( 2 ); + const SlidesInPage0 = Slides.getIn(0); + expect(SlidesInPage0.length).toBe(3); + expect(SlidesInPage0[0].index).toBe(0); + expect(SlidesInPage0[1].index).toBe(1); + expect(SlidesInPage0[2].index).toBe(2); - const SlidesInPage2 = Slides.getIn( 2 ); - expect( SlidesInPage2.length ).toBe( 3 ); + const SlidesInPage2 = Slides.getIn(2); + expect(SlidesInPage2.length).toBe(3); - const SlidesInPage3 = Slides.getIn( 3 ); - expect( SlidesInPage3.length ).toBe( 3 ); - } ); + const SlidesInPage3 = Slides.getIn(3); + expect(SlidesInPage3.length).toBe(3); + }); - test( 'can provide a Slide component at the specified index.', () => { - const splide = init(); + test('can provide a Slide component at the specified index.', () => { + const splide = init(); const { Slides } = splide.Components; - const slides = document.getElementsByClassName( CLASS_SLIDE ); + const slides = document.getElementsByClassName(CLASS_SLIDE); - const Slide0 = Slides.getAt( 0 ); - expect( Slide0.slide === slides[ 0 ] ).toBe( true ); + const Slide0 = Slides.getAt(0); + expect(Slide0?.slide === slides[0]).toBe(true); - const Slide2 = Slides.getAt( 2 ); - expect( Slide2.slide === slides[ 2 ] ).toBe( true ); + const Slide2 = Slides.getAt(2); + expect(Slide2?.slide === slides[2]).toBe(true); - const Slide100 = Slides.getAt( 100 ); - expect( Slide100 ).toBeUndefined(); - } ); + const Slide100 = Slides.getAt(100); + expect(Slide100).toBeUndefined(); + }); - test( 'can iterate over Slide components.', () => { - const splide = init(); + test('can iterate over Slide components.', () => { + const splide = init(); const { Slides } = splide.Components; - const slides = document.getElementsByClassName( CLASS_SLIDE ); - const callback = jest.fn(); + const slides = document.getElementsByClassName(CLASS_SLIDE); + const callback = jest.fn(); - Slides.forEach( ( Slide, index ) => { - expect( Slide.slide === slides[ index ] ).toBe( true ); + Slides.forEach((Slide, index) => { + expect(Slide.slide === slides[index]).toBe(true); callback(); - } ); + }); - expect( callback ).toHaveBeenCalledTimes( splide.length ); - } ); + expect(callback).toHaveBeenCalledTimes(splide.length); + }); - test( 'can iterate over Slide components, including clones.', () => { - const splide = init( { type: 'loop' } ); - const { Slides } = splide.Components; - const slides = document.getElementsByClassName( CLASS_SLIDE ); - const clones = document.getElementsByClassName( CLASS_CLONE ); - const callback = jest.fn(); + test('can iterate over Slide components, including clones.', () => { + const splide = init({ type: 'loop' }); + const { Slides } = splide.Components; + const slides = document.getElementsByClassName(CLASS_SLIDE); + const clones = document.getElementsByClassName(CLASS_CLONE); + const callback = jest.fn(); const callbackClone = jest.fn(); - Slides.forEach( ( Slide ) => { + Slides.forEach((Slide) => { callback(); - if ( Slide.isClone ) { + if (Slide.isClone) { callbackClone(); } - } ); + }); - expect( callback ).toHaveBeenCalledTimes( slides.length ); - expect( callbackClone ).toHaveBeenCalledTimes( clones.length ); - } ); + expect(callback).toHaveBeenCalledTimes(slides.length); + expect(callbackClone).toHaveBeenCalledTimes(clones.length); + }); - test( 'can provided the number of slides with/without clones.', () => { - const splide = init( { type: 'loop' } ); + test('can provided the number of slides with/without clones.', () => { + const splide = init({ type: 'loop' }); const { Slides } = splide.Components; - const slides = document.getElementsByClassName( CLASS_SLIDE ); - const clones = document.getElementsByClassName( CLASS_CLONE ); + const slides = document.getElementsByClassName(CLASS_SLIDE); + const clones = document.getElementsByClassName(CLASS_CLONE); - expect( Slides.getLength() ).toBe( slides.length ); - expect( Slides.getLength( true ) ).toBe( slides.length - clones.length ); - } ); + expect(Slides.getLength()).toBe(slides.length); + expect(Slides.getLength(true)).toBe(slides.length - clones.length); + }); - test( 'can tell if there are enough slides to move or not.', () => { - const splide = init( { perPage: 3 }, { length: 2 } ); + test('can tell if there are enough slides to move or not.', () => { + const splide = init({ perPage: 3 }, { length: 2 }); const { Slides } = splide.Components; - expect( Slides.isEnough() ).toBe( false ); + expect(Slides.isEnough()).toBe(false); splide.options = { perPage: 1 }; - expect( Slides.isEnough() ).toBe( true ); - } ); -} ); + expect(Slides.isEnough()).toBe(true); + }); +}); diff --git a/src/js/components/Slides/test/remove.test.ts b/src/js/components/Slides/test/remove.test.ts index b2136299..ff58398a 100644 --- a/src/js/components/Slides/test/remove.test.ts +++ b/src/js/components/Slides/test/remove.test.ts @@ -1,54 +1,60 @@ -import { init } from '../../../test'; +import { init } from '@test'; -describe( 'Slides#remove()', () => { - test( 'can remove a slide at the specified index.', () => { +describe('Slides#remove()', () => { + test('can remove a slide at the specified index.', () => { const splide = init(); const { Slides } = splide.Components; - const Slide1 = Slides.getAt( 1 ); - const Slide2 = Slides.getAt( 2 ); + const Slide1 = Slides.getAt(1); + const Slide2 = Slides.getAt(2); const length = Slides.getLength(); - Slides.remove( 1 ); + Slides.remove(1); - expect( Slides.getLength() ).toBe( length - 1 ); - expect( Slides.getAt( 1 ).slide ).not.toBe( Slide1.slide ); - expect( Slides.getAt( 1 ).slide ).toBe( Slide2.slide ); - } ); + expect(Slide1).not.toBeUndefined(); + expect(Slide2).not.toBeUndefined(); - test( 'can remove slides at the specified indices.', () => { + expect(Slides.getLength()).toBe(length - 1); + expect(Slides.getAt(1)?.slide).not.toBe(Slide1?.slide); + expect(Slides.getAt(1)?.slide).toBe(Slide2?.slide); + }); + + test('can remove slides at the specified indices.', () => { const splide = init(); const { Slides } = splide.Components; - const Slide4 = Slides.getAt( 4 ); + const Slide4 = Slides.getAt(4); const length = Slides.getLength(); - Slides.remove( [ 1, 2, 3 ] ); + Slides.remove([1, 2, 3]); - expect( Slides.getLength() ).toBe( length - 3 ); - expect( Slides.getAt( 1 ).slide ).toBe( Slide4.slide ); - } ); + expect(Slide4).not.toBeUndefined(); + expect(Slides.getLength()).toBe(length - 3); + expect(Slides.getAt(1)?.slide).toBe(Slide4?.slide); + }); - test( 'can remove slides by a selector.', () => { + test('can remove slides by a selector.', () => { const splide = init(); const { Slides } = splide.Components; - const Slide3 = Slides.getAt( 3 ); + const Slide3 = Slides.getAt(3); const length = Slides.getLength(); - Slides.remove( 'li:nth-child( 1 ), li:nth-child( 2 )' ); + Slides.remove('li:nth-child( 1 ), li:nth-child( 2 )'); - expect( Slides.getLength() ).toBe( length - 2 ); - expect( Slides.getAt( 1 ).slide ).toBe( Slide3.slide ); - } ); + expect(Slide3).not.toBeUndefined(); + expect(Slides.getLength()).toBe(length - 2); + expect(Slides.getAt(1)?.slide).toBe(Slide3?.slide); + }); - test( 'can remove slides by a predicate function.', () => { + test('can remove slides by a predicate function.', () => { const splide = init(); const { Slides } = splide.Components; - const Slide3 = Slides.getAt( 3 ); + const Slide3 = Slides.getAt(3); const length = Slides.getLength(); - Slides.remove( Slide => Slide.index < 3 ); + Slides.remove(Slide => Slide.index < 3); - expect( Slides.getLength() ).toBe( length - 3 ); - expect( Slides.getAt( 0 ).slide ).toBe( Slide3.slide ); - } ); -} ); + expect(Slide3).not.toBeUndefined(); + expect(Slides.getLength()).toBe(length - 3); + expect(Slides.getAt(0)?.slide).toBe(Slide3?.slide); + }); +}); diff --git a/src/js/components/Slides/test/slide.test.ts b/src/js/components/Slides/test/slide.test.ts index 22abd238..b0be6021 100644 --- a/src/js/components/Slides/test/slide.test.ts +++ b/src/js/components/Slides/test/slide.test.ts @@ -8,378 +8,381 @@ import { EVENT_VISIBLE, } from '../../../constants/events'; import { Splide } from '../../../core/Splide/Splide'; -import { fire, init, keydown } from '../../../test'; -import { format } from '../../../utils'; +import { fire, init, keydown } from '@test'; import { SlideComponent } from '../Slide'; -describe( 'Slide', () => { - test( 'can assign the unique ID to the slide element.', () => { - const splide = init( { speed: 0 } ); +describe('Slide', () => { + test('can assign the unique ID to the slide element.', () => { + const splide = init({ speed: 0 }); const { Slides } = splide.Components; - const Slide = Slides.getAt( 0 ); - expect( Slide.slide.id.indexOf( splide.root.id ) ).toBe( 0 ); - } ); + const Slide = Slides.getAt(0); + expect(Slide?.slide.id.indexOf(splide.root.id)).toBe(0); + }); - test( 'can toggle the `is-active` class.', () => { - const splide = init( { speed: 0 } ); + test('can toggle the `is-active` class.', () => { + const splide = init({ speed: 0 }); const { Slides } = splide.Components; - const Slide0 = Slides.getAt( 0 ); - const Slide1 = Slides.getAt( 1 ); + const Slide0 = Slides.getAt(0); + const Slide1 = Slides.getAt(1); - expect( Slide0.slide.classList.contains( CLASS_ACTIVE ) ).toBe( true ); - expect( Slide1.slide.classList.contains( CLASS_ACTIVE ) ).toBe( false ); + expect(Slide0?.slide.classList.contains(CLASS_ACTIVE)).toBe(true); + expect(Slide1?.slide.classList.contains(CLASS_ACTIVE)).toBe(false); - splide.go( 1 ); + splide.go(1); - expect( Slide0.slide.classList.contains( CLASS_ACTIVE ) ).toBe( false ); - expect( Slide1.slide.classList.contains( CLASS_ACTIVE ) ).toBe( true ); - } ); + expect(Slide0?.slide.classList.contains(CLASS_ACTIVE)).toBe(false); + expect(Slide1?.slide.classList.contains(CLASS_ACTIVE)).toBe(true); + }); - test( 'can emit an event when the slide becomes active.', () => { - const splide = init( { speed: 0 } ); + 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(); + const Slide1 = Slides.getAt(1); + const Slide2 = Slides.getAt(2); + const callback = jest.fn(); - splide.on( EVENT_ACTIVE, callback ); + splide.on(EVENT_ACTIVE, callback); - splide.go( 1 ); - expect( callback ).toHaveBeenCalledWith( Slide1 ); + splide.go(1); + expect(callback).toHaveBeenCalledWith(Slide1); - splide.go( 2 ); - expect( callback ).toHaveBeenCalledWith( Slide2 ); - } ); + splide.go(2); + expect(callback).toHaveBeenCalledWith(Slide2); + }); - test( 'can emit an event when the slide becomes inactive.', () => { - const splide = init( { speed: 0 } ); + 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(); + 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.on(EVENT_INACTIVE, callback); + splide.on(EVENT_INACTIVE, callback); - splide.go( 1 ); - expect( callback ).toHaveBeenCalledWith( Slide0 ); + splide.go(1); + expect(callback).toHaveBeenCalledWith(Slide0); - splide.go( 2 ); - expect( callback ).toHaveBeenCalledWith( Slide1 ); + splide.go(2); + expect(callback).toHaveBeenCalledWith(Slide1); - splide.go( 1 ); - expect( callback ).toHaveBeenCalledWith( Slide2 ); - } ); + 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 } ); + test('can toggle the `is-visible` class and the `aria-hidden` attribute.', () => { + 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 Slide0 = Slides.getAt(0); + const Slide1 = Slides.getAt(1); + const Slide2 = Slides.getAt(2); - expect( Slide0.slide.classList.contains( CLASS_VISIBLE ) ).toBe( true ); - expect( Slide1.slide.classList.contains( CLASS_VISIBLE ) ).toBe( true ); - expect( Slide2.slide.classList.contains( CLASS_VISIBLE ) ).toBe( false ); + expect(Slide0?.slide.classList.contains(CLASS_VISIBLE)).toBe(true); + expect(Slide1?.slide.classList.contains(CLASS_VISIBLE)).toBe(true); + expect(Slide2?.slide.classList.contains(CLASS_VISIBLE)).toBe(false); - expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBeNull(); - expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBeNull(); - expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' ); + expect(Slide0?.slide.getAttribute('aria-hidden')).toBeNull(); + expect(Slide1?.slide.getAttribute('aria-hidden')).toBeNull(); + expect(Slide2?.slide.getAttribute('aria-hidden')).toBe('true'); - splide.go( 1 ); + splide.go(1); - expect( Slide0.slide.classList.contains( CLASS_VISIBLE ) ).toBe( false ); - expect( Slide1.slide.classList.contains( CLASS_VISIBLE ) ).toBe( true ); - expect( Slide2.slide.classList.contains( CLASS_VISIBLE ) ).toBe( true ); + expect(Slide0?.slide.classList.contains(CLASS_VISIBLE)).toBe(false); + expect(Slide1?.slide.classList.contains(CLASS_VISIBLE)).toBe(true); + expect(Slide2?.slide.classList.contains(CLASS_VISIBLE)).toBe(true); - expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' ); - expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBeNull(); - expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBeNull(); - } ); + expect(Slide0?.slide.getAttribute('aria-hidden')).toBe('true'); + expect(Slide1?.slide.getAttribute('aria-hidden')).toBeNull(); + expect(Slide2?.slide.getAttribute('aria-hidden')).toBeNull(); + }); - test( 'should not update aria-hidden on move even if `updateOnMove` is enabled.', () => { - const splide = init( { speed: 100, updateOnMove: true } ); + test('should not update aria-hidden on move even if `updateOnMove` is enabled.', () => { + const splide = init({ speed: 100, updateOnMove: true }); const { Slides } = splide.Components; const { list } = splide.Components.Elements; - const Slide0 = Slides.getAt( 0 ); - const Slide1 = Slides.getAt( 1 ); - const Slide2 = Slides.getAt( 2 ); + const Slide0 = Slides.getAt(0); + const Slide1 = Slides.getAt(1); + const Slide2 = Slides.getAt(2); - splide.go( 1 ); + splide.go(1); - expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBeNull(); - expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' ); - expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' ); + expect(Slide0?.slide.getAttribute('aria-hidden')).toBeNull(); + expect(Slide1?.slide.getAttribute('aria-hidden')).toBe('true'); + expect(Slide2?.slide.getAttribute('aria-hidden')).toBe('true'); - fire( list, 'transitionend' ); + fire(list, 'transitionend'); - expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' ); - expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBeNull(); - expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' ); + expect(Slide0?.slide.getAttribute('aria-hidden')).toBe('true'); + expect(Slide1?.slide.getAttribute('aria-hidden')).toBeNull(); + expect(Slide2?.slide.getAttribute('aria-hidden')).toBe('true'); - splide.go( 2 ); + splide.go(2); - expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' ); - expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBeNull(); - expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' ); + expect(Slide0?.slide.getAttribute('aria-hidden')).toBe('true'); + expect(Slide1?.slide.getAttribute('aria-hidden')).toBeNull(); + expect(Slide2?.slide.getAttribute('aria-hidden')).toBe('true'); - fire( list, 'transitionend' ); + fire(list, 'transitionend'); - expect( Slide0.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' ); - expect( Slide1.slide.getAttribute( 'aria-hidden' ) ).toBe( 'true' ); - expect( Slide2.slide.getAttribute( 'aria-hidden' ) ).toBeNull(); - } ); + expect(Slide0?.slide.getAttribute('aria-hidden')).toBe('true'); + expect(Slide1?.slide.getAttribute('aria-hidden')).toBe('true'); + expect(Slide2?.slide.getAttribute('aria-hidden')).toBeNull(); + }); - test( 'can emit an event when the slide becomes visible.', () => { - const splide = init( { speed: 0, perPage: 2 } ); + 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 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 => { + splide.on(EVENT_VISIBLE, Slide => { callback(); - visibleSlides.push( Slide ); - } ); + visibleSlides.push(Slide); + }); - splide.go( '>' ); - expect( visibleSlides ).toEqual( [ Slide2, Slide3 ] ); + splide.go('>'); + expect(visibleSlides).toEqual([Slide2, Slide3]); visibleSlides.length = 0; - splide.go( '<' ); - expect( visibleSlides ).toEqual( [ Slide0, Slide1 ] ); - } ); + splide.go('<'); + expect(visibleSlides).toEqual([Slide0, Slide1]); + }); - test( 'can toggle `tabindex` by visibility if `slideFocus` is enabled.', () => { - const splide = init( { speed: 0, slideFocus: true } ); + test('can toggle `tabindex` by visibility if `slideFocus` is enabled.', () => { + const splide = init({ speed: 0, slideFocus: true }); const { Slides } = splide.Components; - const Slide0 = Slides.getAt( 0 ); - const Slide1 = Slides.getAt( 1 ); + const Slide0 = Slides.getAt(0); + const Slide1 = Slides.getAt(1); - expect( Slide0.slide.tabIndex ).toBe( 0 ); - expect( Slide1.slide.tabIndex ).toBe( -1 ); + expect(Slide0?.slide.tabIndex).toBe(0); + expect(Slide1?.slide.tabIndex).toBe(-1); - splide.go( 1 ); + splide.go(1); - expect( Slide0.slide.tabIndex ).toBe( -1 ); - expect( Slide1.slide.tabIndex ).toBe( 0 ); - } ); + expect(Slide0?.slide.tabIndex).toBe(-1); + expect(Slide1?.slide.tabIndex).toBe(0); + }); - test( 'can disable focus of focusable descendants when the slide gets hidden.', () => { - const splide = init( { speed: 0 }, { mount: false } ); - const slide0 = document.querySelector( `.${ CLASS_SLIDE }` ); - const a = document.createElement( 'a' ); - const button = document.createElement( 'button' ); + test('can disable focus of focusable descendants when the slide gets hidden.', () => { + const splide = init({ speed: 0 }, { mount: false }); + const slide0 = document.querySelector(`.${ CLASS_SLIDE }`); + const a = document.createElement('a'); + const button = document.createElement('button'); - slide0.appendChild( a ); - slide0.appendChild( button ); + slide0?.appendChild(a); + slide0?.appendChild(button); splide.mount(); - splide.go( 1 ); - expect( a.tabIndex ).toBe( -1 ); - expect( button.tabIndex ).toBe( -1 ); + splide.go(1); + expect(a.tabIndex).toBe(-1); + expect(button.tabIndex).toBe(-1); - splide.go( 0 ); - expect( a.tabIndex ).toBe( 0 ); - expect( button.tabIndex ).toBe( 0 ); - } ); + splide.go(0); + expect(a.tabIndex).toBe(0); + expect(button.tabIndex).toBe(0); + }); - test( 'can emit an event when the slide gets hidden.', () => { - const splide = init( { speed: 0, perPage: 2 } ); + 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 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 => { + splide.on(EVENT_HIDDEN, Slide => { callback(); - hiddenSlides.push( Slide ); - } ); + hiddenSlides.push(Slide); + }); - splide.go( '>' ); - expect( hiddenSlides ).toEqual( [ Slide0, Slide1 ] ); + splide.go('>'); + expect(hiddenSlides).toEqual([Slide0, Slide1]); hiddenSlides.length = 0; - splide.go( '<' ); - expect( hiddenSlides ).toEqual( [ Slide2, Slide3 ] ); - } ); + splide.go('<'); + expect(hiddenSlides).toEqual([Slide2, Slide3]); + }); - test( 'can toggle the `is-prev` and `is-next` classes.', () => { - const splide = init( { type: 'loop', speed: 0 } ); + test('can toggle the `is-prev` and `is-next` classes.', () => { + const splide = init({ type: 'loop', speed: 0 }); const { Slides } = splide.Components; - const Clone1 = Slides.getAt( -1 ); - const Slide0 = Slides.getAt( 0 ); - const Slide1 = Slides.getAt( 1 ); - const Slide2 = Slides.getAt( 2 ); + const Clone1 = Slides.getAt(-1); + const Slide0 = Slides.getAt(0); + const Slide1 = Slides.getAt(1); + const Slide2 = Slides.getAt(2); - expect( Clone1.slide.classList.contains( CLASS_PREV ) ).toBe( true ); - expect( Slide0.slide.classList.contains( CLASS_PREV ) ).toBe( false ); - expect( Slide0.slide.classList.contains( CLASS_NEXT ) ).toBe( false ); - expect( Slide1.slide.classList.contains( CLASS_NEXT ) ).toBe( true ); + expect(Clone1?.slide.classList.contains(CLASS_PREV)).toBe(true); + expect(Slide0?.slide.classList.contains(CLASS_PREV)).toBe(false); + expect(Slide0?.slide.classList.contains(CLASS_NEXT)).toBe(false); + expect(Slide1?.slide.classList.contains(CLASS_NEXT)).toBe(true); - splide.go( 1 ); + splide.go(1); - expect( Clone1.slide.classList.contains( CLASS_PREV ) ).toBe( false ); - expect( Slide0.slide.classList.contains( CLASS_PREV ) ).toBe( true ); - expect( Slide1.slide.classList.contains( CLASS_PREV ) ).toBe( false ); - expect( Slide1.slide.classList.contains( CLASS_NEXT ) ).toBe( false ); - expect( Slide2.slide.classList.contains( CLASS_NEXT ) ).toBe( true ); - } ); + expect(Clone1?.slide.classList.contains(CLASS_PREV)).toBe(false); + expect(Slide0?.slide.classList.contains(CLASS_PREV)).toBe(true); + expect(Slide1?.slide.classList.contains(CLASS_PREV)).toBe(false); + expect(Slide1?.slide.classList.contains(CLASS_NEXT)).toBe(false); + expect(Slide2?.slide.classList.contains(CLASS_NEXT)).toBe(true); + }); - test( 'can tell if the slide is within the specified range.', () => { - const splide = init( { type: 'loop', speed: 0 } ); + test('can tell if the slide is within the specified range.', () => { + const splide = init({ type: 'loop', speed: 0 }); const { Slides } = splide.Components; - const Slide0 = Slides.getAt( 0 ); - const Slide1 = Slides.getAt( 1 ); - const Slide2 = Slides.getAt( 2 ); - const Clone = Slides.getAt( -1 ); + const Slide0 = Slides.getAt(0); + const Slide1 = Slides.getAt(1); + const Slide2 = Slides.getAt(2); + const Clone = Slides.getAt(-1); - expect( Slide0.isWithin( 0, 1 ) ).toBe( true ); - expect( Slide1.isWithin( 0, 1 ) ).toBe( true ); - expect( Slide2.isWithin( 0, 1 ) ).toBe( false ); + expect(Slide0?.isWithin(0, 1)).toBe(true); + expect(Slide1?.isWithin(0, 1)).toBe(true); + expect(Slide2?.isWithin(0, 1)).toBe(false); - expect( Clone.isWithin( 0, 1 ) ).toBe( true ); - } ); + expect(Clone?.isWithin(0, 1)).toBe(true); + }); - test( 'should assign the tabpanel role if the pagination option is enabled.', () => { - const splide = init( { pagination: true } ); + test('should assign the tabpanel role if the pagination option is enabled.', () => { + const splide = init({ pagination: true }); - splide.Components.Slides.forEach( ( { slide } ) => { - expect( slide.getAttribute( 'role' ) ).toBe( 'tabpanel' ); - } ); - } ); + splide.Components.Slides.forEach(({ slide }) => { + expect(slide.getAttribute('role')).toBe('tabpanel'); + }); + }); - test( 'should assign group tab role with `aria-roledescription` if the pagination option is disabled.', () => { - const splide = init( { pagination: false } ); + test('should assign group tab role with `aria-roledescription` if the pagination option is disabled.', () => { + const splide = init({ pagination: false }); - splide.Components.Slides.forEach( ( { slide } ) => { - expect( slide.getAttribute( 'role' ) ).toBe( 'group' ); - expect( slide.getAttribute( 'aria-roledescription' ) ).toBe( splide.options.i18n.slide ); - } ); - } ); + splide.Components.Slides.forEach(({ slide }) => { + expect(slide.getAttribute('role')).toBe('group'); + expect(slide.getAttribute('aria-roledescription')).toBe(splide.options.i18n?.slide); + }); + }); - test( 'can assign and update role/aria attributes for navigation.', () => { - const splide = init( { speed: 0, isNavigation: true, pagination: false } ); + test('can assign and update role/aria attributes for navigation.', () => { + const splide = init({ speed: 0, isNavigation: true, pagination: false }); const { Slides } = splide.Components; - const Slide0 = Slides.getAt( 0 ); - const Slide1 = Slides.getAt( 1 ); + const Slide0 = Slides.getAt(0); + const Slide1 = Slides.getAt(1); - expect( Slide0.slide.getAttribute( 'aria-current' ) ).toBe( 'true' ); - expect( Slide0.slide.getAttribute( 'aria-label' ) ).toBe( format( splide.options.i18n.slideX, 1 ) ); + expect(Slide0?.slide.getAttribute('aria-current')).toBe('true'); + expect(Slide0?.slide.getAttribute('aria-label')).toBe(splide.i18n('slideX', 1)); - expect( Slide1.slide.getAttribute( 'aria-current' ) ).toBeNull(); - expect( Slide1.slide.getAttribute( 'aria-label' ) ).toBe( format( splide.options.i18n.slideX, 2 ) ); + expect(Slide1?.slide.getAttribute('aria-current')).toBeNull(); + expect(Slide1?.slide.getAttribute('aria-label')).toBe(splide.i18n('slideX', 2)); - splide.go( 1 ); + splide.go(1); - expect( Slide0.slide.getAttribute( 'aria-current' ) ).toBeNull(); - expect( Slide1.slide.getAttribute( 'aria-current' ) ).toBe( 'true' ); - } ); + expect(Slide0?.slide.getAttribute('aria-current')).toBeNull(); + expect(Slide1?.slide.getAttribute('aria-current')).toBe('true'); + }); - test( 'can emit the `click` event on click.', done => { - const splide = init( { speed: 0 } ); + test('can emit the `click` event on click.', done => { + const splide = init({ speed: 0 }); const { Slides } = splide.Components; - const { slide } = Slides.getAt( 2 ); + const slide = Slides.getAt(2)?.slide; + + expect(slide).not.toBeUndefined(); - splide.on( EVENT_CLICK, Slide => { - expect( Slide.slide ).toBe( slide ); + splide.on(EVENT_CLICK, Slide => { + expect(Slide.slide).toBe(slide); done(); - } ); + }); - fire( slide, 'click' ); - } ); + slide && fire(slide, 'click'); + }); - test( 'can emit the `slide:keydown` event on keydown.', done => { - const splide = init( { speed: 0, isNavigation: true } ); + test('can emit the `slide:keydown` event on keydown.', done => { + const splide = init({ speed: 0, isNavigation: true }); const { Slides } = splide.Components; - const { slide } = Slides.getAt( 2 ); + const slide = Slides.getAt(2)?.slide; + + expect(slide).not.toBeUndefined(); - splide.on( EVENT_SLIDE_KEYDOWN, ( Slide, e ) => { - expect( Slide.slide ).toBe( slide ); - expect( e.key ).toBe( 'Enter' ); + splide.on(EVENT_SLIDE_KEYDOWN, (Slide, e) => { + expect(Slide.slide).toBe(slide); + expect(e.key).toBe('Enter'); done(); - } ); + }); - keydown( 'Enter', slide ); - } ); + keydown('Enter', slide); + }); - test( 'should remove status classes and added attributes.', () => { - const splide = init( { speed: 0, isNavigation: true } ); + test('should remove status classes and added attributes.', () => { + const splide = init({ speed: 0, isNavigation: true }); const { Slides } = splide.Components; - const { slide } = Slides.getAt( 0 ); + const slide = Slides.getAt(0)?.slide; splide.destroy(); - expect( slide.classList.contains( CLASS_ACTIVE ) ).toBe( false ); - expect( slide.classList.contains( CLASS_VISIBLE ) ).toBe( false ); - expect( slide.getAttribute( 'role' ) ).toBe( null ); - expect( slide.getAttribute( 'aria-label' ) ).toBe( null ); - } ); + expect(slide?.classList.contains(CLASS_ACTIVE)).toBe(false); + expect(slide?.classList.contains(CLASS_VISIBLE)).toBe(false); + expect(slide?.getAttribute('role')).toBe(null); + expect(slide?.getAttribute('aria-label')).toBe(null); + }); - test( 'can notify the active slide of other components on initialization.', () => { - const splide = init( { start: 1 }, { mount: false } ); + test('can notify the active slide of other components on initialization.', () => { + const splide = init({ start: 1 }, { mount: false }); const callback = jest.fn(); - const component = ( Splide: Splide ) => { + const component = (Splide: Splide) => { return { setup() { - Splide.on( EVENT_ACTIVE, Slide => { - expect( Slide.index ).toBe( 1 ); + Splide.on(EVENT_ACTIVE, Slide => { + expect(Slide.index).toBe(1); callback(); - } ); + }); }, }; }; - splide.mount( { component } ); - expect( callback ).toHaveBeenCalled(); - } ); + splide.mount({ component }); + expect(callback).toHaveBeenCalled(); + }); - test( 'can check some slide is within the specified distance.', () => { - const splide = init( { perPage: 2, type: 'loop' } ); + test('can check some slide is within the specified distance.', () => { + const splide = init({ perPage: 2, type: 'loop' }); const { Slides } = splide.Components; - const Slide0 = Slides.getAt( 0 ); - const Slide1 = Slides.getAt( 1 ); - const Slide2 = Slides.getAt( 2 ); - const Clone = Slides.getAt( -1 ); - - expect( Slide0.isWithin( 0, 0 ) ).toBe( true ); - expect( Slide0.isWithin( 0, 1 ) ).toBe( true ); - - expect( Slide1.isWithin( 0, 0 ) ).toBe( false ); - expect( Slide1.isWithin( 0, 1 ) ).toBe( true ); - expect( Slide1.isWithin( 0, 2 ) ).toBe( true ); - - expect( Slide2.isWithin( 0, 0 ) ).toBe( false ); - expect( Slide2.isWithin( 0, 1 ) ).toBe( false ); - expect( Slide2.isWithin( 0, 2 ) ).toBe( true ); - expect( Slide2.isWithin( 0, 3 ) ).toBe( true ); - - expect( Slide0.isWithin( 2, 0 ) ).toBe( false ); - expect( Slide0.isWithin( 2, 1 ) ).toBe( false ); - expect( Slide0.isWithin( 2, 2 ) ).toBe( true ); - - expect( Slide1.isWithin( 2, 0 ) ).toBe( false ); - expect( Slide1.isWithin( 2, 1 ) ).toBe( true ); - expect( Slide1.isWithin( 2, 2 ) ).toBe( true ); - - expect( Clone.isWithin( 0, 0 ) ).toBe( false ); - expect( Clone.isWithin( 0, 1 ) ).toBe( true ); - expect( Clone.isWithin( 0, 2 ) ).toBe( true ); - } ); -} ); + const Slide0 = Slides.getAt(0); + const Slide1 = Slides.getAt(1); + const Slide2 = Slides.getAt(2); + const Clone = Slides.getAt(-1); + + expect(Slide0?.isWithin(0, 0)).toBe(true); + expect(Slide0?.isWithin(0, 1)).toBe(true); + + expect(Slide1?.isWithin(0, 0)).toBe(false); + expect(Slide1?.isWithin(0, 1)).toBe(true); + expect(Slide1?.isWithin(0, 2)).toBe(true); + + expect(Slide2?.isWithin(0, 0)).toBe(false); + expect(Slide2?.isWithin(0, 1)).toBe(false); + expect(Slide2?.isWithin(0, 2)).toBe(true); + expect(Slide2?.isWithin(0, 3)).toBe(true); + + expect(Slide0?.isWithin(2, 0)).toBe(false); + expect(Slide0?.isWithin(2, 1)).toBe(false); + expect(Slide0?.isWithin(2, 2)).toBe(true); + + expect(Slide1?.isWithin(2, 0)).toBe(false); + expect(Slide1?.isWithin(2, 1)).toBe(true); + expect(Slide1?.isWithin(2, 2)).toBe(true); + + expect(Clone?.isWithin(0, 0)).toBe(false); + expect(Clone?.isWithin(0, 1)).toBe(true); + expect(Clone?.isWithin(0, 2)).toBe(true); + }); +}); diff --git a/src/js/components/Sync/Sync.ts b/src/js/components/Sync/Sync.ts index f43bf4fc..e50f05be 100644 --- a/src/js/components/Sync/Sync.ts +++ b/src/js/components/Sync/Sync.ts @@ -9,11 +9,9 @@ import { EVENT_UPDATED, } from '../../constants/events'; import { LOOP } from '../../constants/types'; -import { EventInterface, EventInterfaceObject } from '../../constructors'; import { Splide } from '../../core/Splide/Splide'; -import { BaseComponent, Components, Options } from '../../types'; -import { apply, empty, includes, isUndefined, prevent, setAttribute } from '../../utils'; -import { normalizeKey } from '../../utils/dom/normalizeKey/normalizeKey'; +import { BaseComponent, ComponentConstructor, EventInterface } from '../../types'; +import { apply, empty, includes, isUndefined, prevent, setAttribute } from '@splidejs/utils'; import { SlideComponent } from '../Slides/Slide'; @@ -31,7 +29,7 @@ export interface SyncComponent extends BaseComponent { * * @since 3.0.0 */ -const TRIGGER_KEYS = [ ' ', 'Enter' ]; +const TRIGGER_KEYS = [' ', 'Enter']; /** * The component for syncing multiple sliders. @@ -41,29 +39,30 @@ const TRIGGER_KEYS = [ ' ', 'Enter' ]; * @param Splide - A Splide instance. * @param Components - A collection of components. * @param options - Options. + * @param event - An EventInterface object. * * @return A Sync component object. */ -export function Sync( Splide: Splide, Components: Components, options: Options ): SyncComponent { +export const Sync: ComponentConstructor = (Splide, Components, options, event) => { const { isNavigation, slideFocus } = options; /** * Stores event objects. */ - const events: EventInterfaceObject[] = []; + const events: EventInterface[] = []; /** * Called when the component is mounted. */ function mount(): void { - Splide.splides.forEach( target => { - if ( ! target.isParent ) { - sync( Splide, target.splide ); - sync( target.splide, Splide ); + Splide.splides.forEach(target => { + if (!target.isParent) { + sync(Splide, target.splide); + sync(target.splide, Splide); } - } ); + }); - if ( isNavigation ) { + if (isNavigation) { navigate(); } } @@ -72,8 +71,8 @@ export function Sync( Splide: Splide, Components: Components, options: Options ) * Destroys the component. */ function destroy(): void { - events.forEach( event => { event.destroy() } ); - empty( events ); + events.forEach(event => event.destroy()); + empty(events); } /** @@ -92,14 +91,14 @@ export function Sync( Splide: Splide, Components: Components, options: Options ) * @param splide - A splide instance to sync with. * @param target - A target splide instance. */ - function sync( splide: Splide, target: Splide ): void { - const event = EventInterface( splide ); + function sync(splide: Splide, target: Splide): void { + const event = splide.event.lock(); - event.on( EVENT_MOVE, ( index, prev, dest ) => { - target.go( target.is( LOOP ) ? dest : index ); - } ); + event.on(EVENT_MOVE, (index, prev, dest) => { + target.index !== index && target.go(target.is(LOOP) ? dest : index); + }); - events.push( event ); + events.push(event); } /** @@ -107,22 +106,26 @@ export function Sync( Splide: Splide, Components: Components, options: Options ) * Note that the direction of `menu` is implicitly `vertical` as default. */ function navigate(): void { - const event = EventInterface( Splide ); - const { on } = event; + const ev = event.lock(); + const { on } = ev; - on( EVENT_CLICK, onClick ); - on( EVENT_SLIDE_KEYDOWN, onKeydown ); - on( [ EVENT_MOUNTED, EVENT_UPDATED ], update ); + on(EVENT_CLICK, onClick); + on(EVENT_SLIDE_KEYDOWN, onKeydown); + on([EVENT_MOUNTED, EVENT_UPDATED], update); - events.push( event ); - event.emit( EVENT_NAVIGATION_MOUNTED, Splide.splides ); + events.push(ev); + ev.emit(EVENT_NAVIGATION_MOUNTED, Splide.splides); } /** * Update attributes. */ function update(): void { - setAttribute( Components.Elements.list, ARIA_ORIENTATION, options.direction === TTB ? 'vertical' : '' ); + setAttribute( + Components.Elements.list, + ARIA_ORIENTATION, + options.direction === TTB ? 'vertical' : '', + ); } /** @@ -130,8 +133,8 @@ export function Sync( Splide: Splide, Components: Components, options: Options ) * * @param Slide - A clicked Slide component. */ - function onClick( Slide: SlideComponent ): void { - Splide.go( Slide.index ); + function onClick(Slide: SlideComponent): void { + Splide.go(Slide.index); } /** @@ -140,21 +143,21 @@ export function Sync( Splide: Splide, Components: Components, options: Options ) * @param Slide - A Slide component. * @param e - A KeyboardEvent object. */ - function onKeydown( Slide: SlideComponent, e: KeyboardEvent ): void { - if ( includes( TRIGGER_KEYS, normalizeKey( e ) ) ) { - onClick( Slide ); - prevent( e ); + function onKeydown(Slide: SlideComponent, e: KeyboardEvent): void { + if (includes(TRIGGER_KEYS, e.key)) { + onClick(Slide); + prevent(e); } } return { setup: apply( - Components.Media.set, - { slideFocus: isUndefined( slideFocus ) ? isNavigation : slideFocus }, - true + Components.Breakpoints.set, + { slideFocus: isUndefined(slideFocus) ? isNavigation : slideFocus }, + true, ), mount, destroy, remount, }; -} +}; diff --git a/src/js/components/Sync/test/navigation.test.ts b/src/js/components/Sync/test/navigation.test.ts index 84b4c78f..7ff400dd 100644 --- a/src/js/components/Sync/test/navigation.test.ts +++ b/src/js/components/Sync/test/navigation.test.ts @@ -1,52 +1,52 @@ -import { fire, init, keydown } from '../../../test'; +import { fire, init, keydown } from '@test'; -describe( 'Sync#navigate()', () => { - test( 'can make slides clickable.', () => { - const primary = init( { speed: 0 }, { id: 'primary', mount: false } ); - const secondary = init( { speed: 0, isNavigation: true }, { id: 'secondary', insertHtml: true, mount: false } ); +describe('Sync#navigate()', () => { + test('can make slides clickable.', () => { + const primary = init({ speed: 0 }, { id: 'primary', mount: false }); + const secondary = init({ speed: 0, isNavigation: true }, { id: 'secondary', insertHtml: true, mount: false }); - primary.sync( secondary ).mount(); + primary.sync(secondary).mount(); secondary.mount(); const Slides = secondary.Components.Slides.get(); - fire( Slides[ 1 ].slide, 'click' ); + fire(Slides[1].slide, 'click'); - expect( primary.index ).toBe( 1 ); - expect( secondary.index ).toBe( 1 ); + expect(primary.index).toBe(1); + expect(secondary.index).toBe(1); - fire( Slides[ 5 ].slide, 'click' ); + fire(Slides[5].slide, 'click'); - expect( primary.index ).toBe( 5 ); - expect( secondary.index ).toBe( 5 ); - } ); + expect(primary.index).toBe(5); + expect(secondary.index).toBe(5); + }); - test( 'can make slides receive key inputs.', () => { - const primary = init( { speed: 0 }, { id: 'primary', mount: false } ); - const secondary = init( { speed: 0, isNavigation: true }, { id: 'secondary', insertHtml: true, mount: false } ); + test('can make slides receive key inputs.', () => { + const primary = init({ speed: 0 }, { id: 'primary', mount: false }); + const secondary = init({ speed: 0, isNavigation: true }, { id: 'secondary', insertHtml: true, mount: false }); - primary.sync( secondary ).mount(); + primary.sync(secondary).mount(); secondary.mount(); const Slides = secondary.Components.Slides.get(); - Slides[ 1 ].slide.focus(); - keydown( 'Enter', Slides[ 1 ].slide ); + Slides[1].slide.focus(); + keydown('Enter', Slides[1].slide); - expect( primary.index ).toBe( 1 ); - expect( secondary.index ).toBe( 1 ); + expect(primary.index).toBe(1); + expect(secondary.index).toBe(1); - Slides[ 5 ].slide.focus(); - keydown( ' ', Slides[ 5 ].slide ); + Slides[5].slide.focus(); + keydown(' ', Slides[5].slide); - expect( primary.index ).toBe( 5 ); - expect( secondary.index ).toBe( 5 ); + expect(primary.index).toBe(5); + expect(secondary.index).toBe(5); - Slides[ 3 ].slide.focus(); - keydown( 'Spacebar', Slides[ 3 ].slide ); + Slides[3].slide.focus(); + keydown('Enter', Slides[3].slide); - expect( primary.index ).toBe( 3 ); - expect( secondary.index ).toBe( 3 ); - } ); -} ); + expect(primary.index).toBe(3); + expect(secondary.index).toBe(3); + }); +}); diff --git a/src/js/components/Sync/test/sync.test.ts b/src/js/components/Sync/test/sync.test.ts index 634d162b..aa714559 100644 --- a/src/js/components/Sync/test/sync.test.ts +++ b/src/js/components/Sync/test/sync.test.ts @@ -1,98 +1,98 @@ import { EVENT_MOVE } from '../../../constants/events'; import { Splide } from '../../../core/Splide/Splide'; -import { init } from '../../../test'; +import { init } from '@test'; -describe( 'Sync#sync()', () => { - test( 'can sync Splide sliders.', () => { - const primary = init( { speed: 0 }, { id: 'primary', mount: false } ); - const secondary = init( { speed: 0 }, { id: 'secondary', insertHtml: true, mount: false } ); +describe('Sync#sync()', () => { + test('can sync Splide sliders.', () => { + const primary = init({ speed: 0 }, { id: 'primary', mount: false }); + const secondary = init({ speed: 0 }, { id: 'secondary', insertHtml: true, mount: false }); - primary.sync( secondary ).mount(); + primary.sync(secondary).mount(); secondary.mount(); - expect( primary.index ).toBe( 0 ); - expect( secondary.index ).toBe( 0 ); + expect(primary.index).toBe(0); + expect(secondary.index).toBe(0); - primary.go( 1 ); - expect( primary.index ).toBe( 1 ); - expect( secondary.index ).toBe( 1 ); + primary.go(1); + expect(primary.index).toBe(1); + expect(secondary.index).toBe(1); - primary.go( 4 ); - expect( primary.index ).toBe( 4 ); - expect( secondary.index ).toBe( 4 ); + primary.go(4); + expect(primary.index).toBe(4); + expect(secondary.index).toBe(4); - secondary.go( 0 ); - expect( primary.index ).toBe( 0 ); - expect( secondary.index ).toBe( 0 ); + secondary.go(0); + expect(primary.index).toBe(0); + expect(secondary.index).toBe(0); - secondary.go( 5 ); - expect( primary.index ).toBe( 5 ); - expect( secondary.index ).toBe( 5 ); - } ); + secondary.go(5); + expect(primary.index).toBe(5); + expect(secondary.index).toBe(5); + }); - test( 'can sync Splide sliders after mount.', () => { - const primary = init( { speed: 0 }, { id: 'primary', mount: false } ); - const secondary = init( { speed: 0 }, { id: 'secondary', insertHtml: true, mount: false } ); + test('can sync Splide sliders after mount.', () => { + const primary = init({ speed: 0 }, { id: 'primary', mount: false }); + const secondary = init({ speed: 0 }, { id: 'secondary', insertHtml: true, mount: false }); primary.mount(); secondary.mount(); - primary.sync( secondary ); + primary.sync(secondary); - primary.go( 1 ); - expect( primary.index ).toBe( 1 ); - expect( secondary.index ).toBe( 1 ); + primary.go(1); + expect(primary.index).toBe(1); + expect(secondary.index).toBe(1); - primary.go( 4 ); - expect( primary.index ).toBe( 4 ); - expect( secondary.index ).toBe( 4 ); - } ); + primary.go(4); + expect(primary.index).toBe(4); + expect(secondary.index).toBe(4); + }); - test( 'can sync multiple Splide sliders.', () => { - const primary = init( { speed: 0 }, { id: 'primary', mount: false } ); + test('can sync multiple Splide sliders.', () => { + const primary = init({ speed: 0 }, { id: 'primary', mount: false }); const splides: Splide[] = []; - Array.from( { length: 5 } ).forEach( ( item, index ) => { - const secondary = init( { speed: 0 }, { id: `secondary-${ index }`, insertHtml: true, mount: false } ); - splides.push( secondary ); - primary.sync( secondary ); - } ); + Array.from({ length: 5 }).forEach((item, index) => { + const secondary = init({ speed: 0 }, { id: `secondary-${ index }`, insertHtml: true, mount: false }); + splides.push(secondary); + primary.sync(secondary); + }); primary.mount(); - splides.forEach( splide => splide.mount() ); - - primary.go( 1 ); - splides.forEach( splide => { - expect( splide.index ).toBe( 1 ); - } ); - - primary.go( 5 ); - splides.forEach( splide => { - expect( splide.index ).toBe( 5 ); - } ); - - splides[ 3 ].go( 3 ); - expect( primary.index ).toBe( 3 ); - splides.forEach( splide => { - expect( splide.index ).toBe( 3 ); - } ); - } ); - - test( 'should prevent recursive calls of `move` event handlers.', () => { - const primary = init( { speed: 0 }, { id: 'primary', mount: false } ); - const secondary = init( { speed: 0 }, { id: 'secondary', insertHtml: true, mount: false } ); - const callback = jest.fn(); - - primary.sync( secondary ).mount(); + splides.forEach(splide => splide.mount()); + + primary.go(1); + splides.forEach(splide => { + expect(splide.index).toBe(1); + }); + + primary.go(5); + splides.forEach(splide => { + expect(splide.index).toBe(5); + }); + + splides[3].go(3); + expect(primary.index).toBe(3); + splides.forEach(splide => { + expect(splide.index).toBe(3); + }); + }); + + test('should prevent recursive calls of `move` event handlers.', () => { + const primary = init({ speed: 0 }, { id: 'primary', mount: false }); + const secondary = init({ speed: 0 }, { id: 'secondary', insertHtml: true, mount: false }); + const callback = jest.fn(); + + primary.sync(secondary).mount(); secondary.mount(); - primary.on( EVENT_MOVE, callback ); + primary.on(EVENT_MOVE, callback); - primary.go( 1 ); - expect( callback ).toHaveBeenCalledTimes( 1 ); + primary.go(1); + expect(callback).toHaveBeenCalledTimes(1); - secondary.go( 2 ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - } ); -} ); + secondary.go(2); + expect(callback).toHaveBeenCalledTimes(2); + }); +}); diff --git a/src/js/components/Wheel/Wheel.ts b/src/js/components/Wheel/Wheel.ts deleted file mode 100644 index cc2ade1c..00000000 --- a/src/js/components/Wheel/Wheel.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { SCROLL_LISTENER_OPTIONS } from '../../constants/listener-options'; -import { MOVING } from '../../constants/states'; -import { EventInterface } from '../../constructors'; -import { Splide } from '../../core/Splide/Splide'; -import { BaseComponent, Components, Options } from '../../types'; -import { abs, prevent, timeOf } from '../../utils'; - - -/** - * The interface for the Wheel component. - * - * @since 3.0.0 - */ -export interface WheelComponent extends BaseComponent { -} - -/** - * The component for observing the mouse wheel and moving the slider. - * - * @since 3.0.0 - * - * @param Splide - A Splide instance. - * @param Components - A collection of components. - * @param options - Options. - * - * @return A Wheel component object. - */ -export function Wheel( Splide: Splide, Components: Components, options: Options ): WheelComponent { - const { bind } = EventInterface( Splide ); - - /** - * Holds the last time when the wheel moves the slider. - */ - let lastTime = 0; - - /** - * Called when the component is mounted. - */ - function mount(): void { - if ( options.wheel ) { - bind( Components.Elements.track, 'wheel', onWheel, SCROLL_LISTENER_OPTIONS ); - } - } - - /** - * Called when the user rotates the mouse wheel on the slider. - * - * @param e - A WheelEvent object. - */ - function onWheel( e: WheelEvent ): void { - if ( e.cancelable ) { - const { deltaY } = e; - const backwards = deltaY < 0; - const timeStamp = timeOf( e ); - const min = options.wheelMinThreshold || 0; - const sleep = options.wheelSleep || 0; - - if ( abs( deltaY ) > min && timeStamp - lastTime > sleep ) { - Splide.go( backwards ? '<' : '>' ); - lastTime = timeStamp; - } - - shouldPrevent( backwards ) && prevent( e ); - } - } - - /** - * Checks whether the component should prevent the default action of the wheel event or not. - * - * @param backwards - Set this to `true` for backwards direction. - * - * @return `true` if the action should be prevented. - */ - function shouldPrevent( backwards: boolean ): boolean { - return ! options.releaseWheel - || Splide.state.is( MOVING ) - || Components.Controller.getAdjacent( backwards ) !== -1; - } - - return { - mount, - }; -} diff --git a/src/js/components/Wheel/test/general.test.ts b/src/js/components/Wheel/test/general.test.ts deleted file mode 100644 index a618fe56..00000000 --- a/src/js/components/Wheel/test/general.test.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { fire, init } from '../../../test'; - - -describe( 'Wheel', () => { - test( 'can navigate the slider by the mouse wheel.', () => { - const splide = init( { speed: 0, wheel: true } ); - const { track } = splide.Components.Elements; - - fireCancelable( track, 'wheel', { deltaY: 100 } ); - expect( splide.index ).toBe( 1 ); - - fireCancelable( track, 'wheel', { deltaY: 100 } ); - expect( splide.index ).toBe( 2 ); - - fireCancelable( track, 'wheel', { deltaY: 100 } ); - expect( splide.index ).toBe( 3 ); - - fireCancelable( track, 'wheel', { deltaY: -100 } ); - expect( splide.index ).toBe( 2 ); - - fireCancelable( track, 'wheel', { deltaY: -100 } ); - expect( splide.index ).toBe( 1 ); - - fireCancelable( track, 'wheel', { deltaY: -100 } ); - expect( splide.index ).toBe( 0 ); - } ); - - test( 'should be inactive if the `wheel` option is falsy.', () => { - const splide = init( { speed: 0, wheel: false } ); - const { track } = splide.Components.Elements; - - fireCancelable( track, 'wheel', { deltaY: 100 } ); - expect( splide.index ).toBe( 0 ); - - fireCancelable( track, 'wheel', { deltaY: 100 } ); - expect( splide.index ).toBe( 0 ); - } ); -} ); - -export function fireCancelable( elm: Element | Window, event: string, data: any = {} ): void { - fire( elm, event, data, { cancelable: true } ); -} - diff --git a/src/js/components/Wheel/test/inertia.test.ts b/src/js/components/Wheel/test/inertia.test.ts deleted file mode 100644 index 3b6ddd5b..00000000 --- a/src/js/components/Wheel/test/inertia.test.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { init } from '../../../test'; -import { fireCancelable } from './general.test'; - - -describe( 'Wheel', () => { - test( 'should move the slider only when the delta is greater than the min threshold.', () => { - const splide = init( { speed: 0, wheel: true, wheelMinThreshold: 50 } ); - const { track } = splide.Components.Elements; - - fireCancelable( track, 'wheel', { deltaY: 49 } ); - expect( splide.index ).toBe( 0 ); - - fireCancelable( track, 'wheel', { deltaY: 50 } ); - expect( splide.index ).toBe( 0 ); - - fireCancelable( track, 'wheel', { deltaY: 51 } ); - expect( splide.index ).toBe( 1 ); - - fireCancelable( track, 'wheel', { deltaY: -49 } ); - expect( splide.index ).toBe( 1 ); - - fireCancelable( track, 'wheel', { deltaY: -50 } ); - expect( splide.index ).toBe( 1 ); - - fireCancelable( track, 'wheel', { deltaY: -51 } ); - expect( splide.index ).toBe( 0 ); - } ); - - test( 'should not move the slider while the wheel component is sleeping.', () => { - const splide = init( { speed: 0, wheel: true, wheelSleep: 500 } ); - const { track } = splide.Components.Elements; - - fireCancelable( track, 'wheel', { deltaY: 100, timeStamp: 1000 } ); - expect( splide.index ).toBe( 1 ); - - fireCancelable( track, 'wheel', { deltaY: 100, timeStamp: 1100 } ); - expect( splide.index ).toBe( 1 ); - - fireCancelable( track, 'wheel', { deltaY: 100, timeStamp: 1500 } ); - expect( splide.index ).toBe( 1 ); - - fireCancelable( track, 'wheel', { deltaY: 100, timeStamp: 1501 } ); - expect( splide.index ).toBe( 2 ); - } ); -} ); - diff --git a/src/js/components/index.ts b/src/js/components/index.ts index d2ff0995..b38957f9 100644 --- a/src/js/components/index.ts +++ b/src/js/components/index.ts @@ -1,19 +1,64 @@ -export { Media } from './Media/Media'; -export { Direction } from './Direction/Direction'; -export { Elements } from './Elements/Elements'; -export { Slides } from './Slides/Slides'; -export { Layout } from './Layout/Layout'; -export { Clones } from './Clones/Clones'; -export { Move } from './Move/Move'; +import { ComponentConstructor } from '../types'; + +import { Breakpoints } from './Breakpoints/Breakpoints'; +import { Direction } from './Direction/Direction'; +import { Elements } from './Elements/Elements'; +import { Slides } from './Slides/Slides'; +import { Layout } from './Layout/Layout'; +import { Clones } from './Clones/Clones'; +import { Move } from './Move/Move'; +import { Controller } from './Controller/Controller'; +import { Arrows } from './Arrows/Arrows'; +import { Autoplay } from './Autoplay/Autoplay'; +import { Scroll } from './Scroll/Scroll'; +import { Drag } from './Drag/Drag'; +import { Keyboard } from './Keyboard/Keyboard'; +import { LazyLoad } from './LazyLoad/LazyLoad'; +import { Pagination } from './Pagination/Pagination'; +import { Sync } from './Sync/Sync'; +import { Live } from './Live/Live'; + + +export { Breakpoints } from './Breakpoints/Breakpoints'; +export { Direction } from './Direction/Direction'; +export { Elements } from './Elements/Elements'; +export { Slides } from './Slides/Slides'; +export { Layout } from './Layout/Layout'; +export { Clones } from './Clones/Clones'; +export { Move } from './Move/Move'; export { Controller } from './Controller/Controller'; -export { Arrows } from './Arrows/Arrows'; -export { Autoplay } from './Autoplay/Autoplay'; -export { Cover } from './Cover/Cover'; -export { Scroll } from './Scroll/Scroll'; -export { Drag } from './Drag/Drag'; -export { Keyboard } from './Keyboard/Keyboard'; -export { LazyLoad } from './LazyLoad/LazyLoad'; +export { Arrows } from './Arrows/Arrows'; +export { Autoplay } from './Autoplay/Autoplay'; +export { Scroll } from './Scroll/Scroll'; +export { Drag } from './Drag/Drag'; +export { Keyboard } from './Keyboard/Keyboard'; +export { LazyLoad } from './LazyLoad/LazyLoad'; export { Pagination } from './Pagination/Pagination'; -export { Sync } from './Sync/Sync'; -export { Wheel } from './Wheel/Wheel'; -export { Live } from './Live/Live'; +export { Sync } from './Sync/Sync'; +export { Live } from './Live/Live'; + + +/** + * The collection of core component constructors. + * + * @since 5.0.0 + */ +export const COMPONENTS: Record = { + Breakpoints, + Direction, + Elements, + Slides, + Layout, + Clones, + Move, + Scroll, + Controller, + Arrows, + Autoplay, + Drag, + Keyboard, + LazyLoad, + Pagination, + Sync, + Live, +}; \ No newline at end of file diff --git a/src/js/components/types.ts b/src/js/components/types.ts index 0d770975..c580134c 100644 --- a/src/js/components/types.ts +++ b/src/js/components/types.ts @@ -1,22 +1,20 @@ -export type { MediaComponent } from './Media/Media'; -export type { DirectionComponent } from './Direction/Direction'; -export type { ElementsComponent } from './Elements/Elements'; -export type { SlidesComponent } from './Slides/Slides'; -export type { SlideComponent } from './Slides/Slide'; -export type { LayoutComponent } from './Layout/Layout'; -export type { ClonesComponent } from './Clones/Clones'; -export type { MoveComponent } from './Move/Move'; +export type { BreakpointsComponent } from './Breakpoints/Breakpoints'; +export type { DirectionComponent } from './Direction/Direction'; +export type { ElementsComponent } from './Elements/Elements'; +export type { SlidesComponent } from './Slides/Slides'; +export type { SlideComponent } from './Slides/Slide'; +export type { LayoutComponent } from './Layout/Layout'; +export type { ClonesComponent } from './Clones/Clones'; +export type { MoveComponent } from './Move/Move'; export type { ControllerComponent } from './Controller/Controller'; -export type { ArrowsComponent } from './Arrows/Arrows'; -export type { AutoplayComponent } from './Autoplay/Autoplay'; -export type { CoverComponent } from './Cover/Cover'; -export type { ScrollComponent } from './Scroll/Scroll'; -export type { DragComponent } from './Drag/Drag'; -export type { KeyboardComponent } from './Keyboard/Keyboard'; -export type { LazyLoadComponent } from './LazyLoad/LazyLoad'; +export type { ArrowsComponent } from './Arrows/Arrows'; +export type { AutoplayComponent } from './Autoplay/Autoplay'; +export type { ScrollComponent } from './Scroll/Scroll'; +export type { DragComponent } from './Drag/Drag'; +export type { KeyboardComponent } from './Keyboard/Keyboard'; +export type { LazyLoadComponent } from './LazyLoad/LazyLoad'; export type { PaginationComponent } from './Pagination/Pagination'; -export type { SyncComponent } from './Sync/Sync'; -export type { WheelComponent } from './Wheel/Wheel'; -export type { LiveComponent } from './Live/Live'; +export type { SyncComponent } from './Sync/Sync'; +export type { LiveComponent } from './Live/Live'; export type { PaginationData, PaginationItem } from './Pagination/Pagination'; diff --git a/src/js/constants/arrows.ts b/src/js/constants/arrows.ts index 33f02dec..d2f24353 100644 --- a/src/js/constants/arrows.ts +++ b/src/js/constants/arrows.ts @@ -1,5 +1,5 @@ const ARROW = 'Arrow'; -export const ARROW_LEFT = `${ ARROW }Left`; +export const ARROW_LEFT = `${ ARROW }Left`; export const ARROW_RIGHT = `${ ARROW }Right`; -export const ARROW_UP = `${ ARROW }Up`; -export const ARROW_DOWN = `${ ARROW }Down`; \ No newline at end of file +export const ARROW_UP = `${ ARROW }Up`; +export const ARROW_DOWN = `${ ARROW }Down`; \ No newline at end of file diff --git a/src/js/constants/attributes.ts b/src/js/constants/attributes.ts index bfed4072..d27ddc68 100644 --- a/src/js/constants/attributes.ts +++ b/src/js/constants/attributes.ts @@ -1,19 +1,19 @@ -export const ROLE = 'role'; +export const ROLE = 'role'; export const TAB_INDEX = 'tabindex'; -export const DISABLED = 'disabled'; +export const DISABLED = 'disabled'; -export const ARIA_PREFIX = 'aria-'; -export const ARIA_CONTROLS = `${ ARIA_PREFIX }controls`; -export const ARIA_CURRENT = `${ ARIA_PREFIX }current`; -export const ARIA_SELECTED = `${ ARIA_PREFIX }selected`; -export const ARIA_LABEL = `${ ARIA_PREFIX }label`; -export const ARIA_LABELLEDBY = `${ ARIA_PREFIX }labelledby`; -export const ARIA_HIDDEN = `${ ARIA_PREFIX }hidden`; -export const ARIA_ORIENTATION = `${ ARIA_PREFIX }orientation`; +export const ARIA_PREFIX = 'aria-'; +export const ARIA_CONTROLS = `${ ARIA_PREFIX }controls`; +export const ARIA_CURRENT = `${ ARIA_PREFIX }current`; +export const ARIA_SELECTED = `${ ARIA_PREFIX }selected`; +export const ARIA_LABEL = `${ ARIA_PREFIX }label`; +export const ARIA_LABELLEDBY = `${ ARIA_PREFIX }labelledby`; +export const ARIA_HIDDEN = `${ ARIA_PREFIX }hidden`; +export const ARIA_ORIENTATION = `${ ARIA_PREFIX }orientation`; export const ARIA_ROLEDESCRIPTION = `${ ARIA_PREFIX }roledescription`; -export const ARIA_LIVE = `${ ARIA_PREFIX }live`; -export const ARIA_BUSY = `${ ARIA_PREFIX }busy`; -export const ARIA_ATOMIC = `${ ARIA_PREFIX }atomic`; +export const ARIA_LIVE = `${ ARIA_PREFIX }live`; +export const ARIA_BUSY = `${ ARIA_PREFIX }busy`; +export const ARIA_ATOMIC = `${ ARIA_PREFIX }atomic`; /** * The array with all attributes to remove later. diff --git a/src/js/constants/classes.ts b/src/js/constants/classes.ts index 2e461579..f080a3c9 100644 --- a/src/js/constants/classes.ts +++ b/src/js/constants/classes.ts @@ -1,49 +1,50 @@ import { PROJECT_CODE } from './project'; + /** * The prefix for classes. * * @since 4.1.0 */ -const CLASS_PREFIX = `${ PROJECT_CODE }__`; +export const CLASS_PREFIX = `${ PROJECT_CODE }__`; /** * The prefix for status classes. * * @since 4.1.0 */ -const STATUS_CLASS_PREFIX = 'is-'; +export const STATUS_CLASS_PREFIX = 'is-'; /** * All classes as constants. */ -export const CLASS_ROOT = PROJECT_CODE; -export const CLASS_TRACK = `${ CLASS_PREFIX }track`; -export const CLASS_LIST = `${ CLASS_PREFIX }list`; -export const CLASS_SLIDE = `${ CLASS_PREFIX }slide`; -export const CLASS_CLONE = `${ CLASS_SLIDE }--clone`; -export const CLASS_CONTAINER = `${ CLASS_SLIDE }__container`; -export const CLASS_ARROWS = `${ CLASS_PREFIX }arrows`; -export const CLASS_ARROW = `${ CLASS_PREFIX }arrow`; -export const CLASS_ARROW_PREV = `${ CLASS_ARROW }--prev`; -export const CLASS_ARROW_NEXT = `${ CLASS_ARROW }--next`; -export const CLASS_PAGINATION = `${ CLASS_PREFIX }pagination`; +export const CLASS_ROOT = PROJECT_CODE; +export const CLASS_TRACK = `${ CLASS_PREFIX }track`; +export const CLASS_LIST = `${ CLASS_PREFIX }list`; +export const CLASS_SLIDE = `${ CLASS_PREFIX }slide`; +export const CLASS_CLONE = `${ CLASS_SLIDE }--clone`; +export const CLASS_CONTAINER = `${ CLASS_SLIDE }__container`; +export const CLASS_ARROWS = `${ CLASS_PREFIX }arrows`; +export const CLASS_ARROW = `${ CLASS_PREFIX }arrow`; +export const CLASS_ARROW_PREV = `${ CLASS_ARROW }--prev`; +export const CLASS_ARROW_NEXT = `${ CLASS_ARROW }--next`; +export const CLASS_PAGINATION = `${ CLASS_PREFIX }pagination`; export const CLASS_PAGINATION_PAGE = `${ CLASS_PAGINATION }__page`; -export const CLASS_PROGRESS = `${ CLASS_PREFIX }progress`; -export const CLASS_PROGRESS_BAR = `${ CLASS_PROGRESS }__bar`; -export const CLASS_TOGGLE = `${ CLASS_PREFIX }toggle`; -export const CLASS_TOGGLE_PLAY = `${ CLASS_TOGGLE }__play`; -export const CLASS_TOGGLE_PAUSE = `${ CLASS_TOGGLE }__pause`; -export const CLASS_SPINNER = `${ CLASS_PREFIX }spinner`; -export const CLASS_SR = `${ CLASS_PREFIX }sr`; -export const CLASS_INITIALIZED = `${ STATUS_CLASS_PREFIX }initialized`; -export const CLASS_ACTIVE = `${ STATUS_CLASS_PREFIX }active`; -export const CLASS_PREV = `${ STATUS_CLASS_PREFIX }prev`; -export const CLASS_NEXT = `${ STATUS_CLASS_PREFIX }next`; -export const CLASS_VISIBLE = `${ STATUS_CLASS_PREFIX }visible`; -export const CLASS_LOADING = `${ STATUS_CLASS_PREFIX }loading`; -export const CLASS_FOCUS_IN = `${ STATUS_CLASS_PREFIX }focus-in`; -export const CLASS_OVERFLOW = `${ STATUS_CLASS_PREFIX }overflow`; +export const CLASS_PROGRESS = `${ CLASS_PREFIX }progress`; +export const CLASS_PROGRESS_BAR = `${ CLASS_PROGRESS }__bar`; +export const CLASS_TOGGLE = `${ CLASS_PREFIX }toggle`; +export const CLASS_TOGGLE_PLAY = `${ CLASS_TOGGLE }__play`; +export const CLASS_TOGGLE_PAUSE = `${ CLASS_TOGGLE }__pause`; +export const CLASS_SPINNER = `${ CLASS_PREFIX }spinner`; +export const CLASS_SR = `${ CLASS_PREFIX }sr`; +export const CLASS_INITIALIZED = `${ STATUS_CLASS_PREFIX }initialized`; +export const CLASS_ACTIVE = `${ STATUS_CLASS_PREFIX }active`; +export const CLASS_PREV = `${ STATUS_CLASS_PREFIX }prev`; +export const CLASS_NEXT = `${ STATUS_CLASS_PREFIX }next`; +export const CLASS_VISIBLE = `${ STATUS_CLASS_PREFIX }visible`; +export const CLASS_LOADING = `${ STATUS_CLASS_PREFIX }loading`; +export const CLASS_FOCUS_IN = `${ STATUS_CLASS_PREFIX }focus-in`; +export const CLASS_OVERFLOW = `${ STATUS_CLASS_PREFIX }overflow`; /** * The array with all status classes except for `is-initialized`. @@ -66,13 +67,13 @@ export const STATUS_CLASSES = [ * @since 3.0.0 */ export const CLASSES = { - slide : CLASS_SLIDE, - clone : CLASS_CLONE, - arrows : CLASS_ARROWS, - arrow : CLASS_ARROW, - prev : CLASS_ARROW_PREV, - next : CLASS_ARROW_NEXT, + slide: CLASS_SLIDE, + clone: CLASS_CLONE, + arrows: CLASS_ARROWS, + arrow: CLASS_ARROW, + prev: CLASS_ARROW_PREV, + next: CLASS_ARROW_NEXT, pagination: CLASS_PAGINATION, - page : CLASS_PAGINATION_PAGE, - spinner : CLASS_SPINNER, + page: CLASS_PAGINATION_PAGE, + spinner: CLASS_SPINNER, }; diff --git a/src/js/constants/defaults.ts b/src/js/constants/defaults.ts index 24c66b5c..76027c2e 100644 --- a/src/js/constants/defaults.ts +++ b/src/js/constants/defaults.ts @@ -10,29 +10,20 @@ import { I18N } from './i18n'; * @since 3.0.0 */ export const DEFAULTS: Options = { - type : 'slide', - role : 'region', - speed : 400, - perPage : 1, - cloneStatus : true, - arrows : true, - pagination : true, - paginationKeyboard: true, - interval : 5000, - pauseOnHover : true, - pauseOnFocus : true, - resetProgress : true, - easing : 'cubic-bezier(0.25, 1, 0.5, 1)', - drag : true, - direction : 'ltr', - trimSpace : true, - focusableNodes : 'a, button, textarea, input, select, iframe', - live : true, - classes : CLASSES, - i18n : I18N, + type: 'slide', + speed: 400, + perPage: 1, + easing: 'cubic-bezier(0.25, 1, 0.5, 1)', + drag: true, + direction: 'ltr', + interval: 5000, + trimSpace: true, + focusableNodes: 'a, button, textarea, input, select, iframe', + classes: CLASSES, + i18n: I18N, reducedMotion: { - speed : 0, + speed: 0, rewindSpeed: 0, - autoplay : 'pause', + autoplay: 'pause', }, }; \ No newline at end of file diff --git a/src/js/constants/events.ts b/src/js/constants/events.ts index a94fa5e3..7bf1f6fc 100644 --- a/src/js/constants/events.ts +++ b/src/js/constants/events.ts @@ -1,34 +1,36 @@ -export const EVENT_MOUNTED = 'mounted'; -export const EVENT_READY = 'ready'; -export const EVENT_MOVE = 'move'; -export const EVENT_MOVED = 'moved'; -export const EVENT_CLICK = 'click'; -export const EVENT_ACTIVE = 'active'; -export const EVENT_INACTIVE = 'inactive'; -export const EVENT_VISIBLE = 'visible'; -export const EVENT_HIDDEN = 'hidden'; -export const EVENT_REFRESH = 'refresh'; -export const EVENT_UPDATED = 'updated'; -export const EVENT_RESIZE = 'resize'; -export const EVENT_RESIZED = 'resized'; -export const EVENT_DRAG = 'drag'; -export const EVENT_DRAGGING = 'dragging'; -export const EVENT_DRAGGED = 'dragged'; -export const EVENT_SCROLL = 'scroll'; -export const EVENT_SCROLLED = 'scrolled'; -export const EVENT_OVERFLOW = 'overflow'; -export const EVENT_DESTROY = 'destroy'; -export const EVENT_ARROWS_MOUNTED = 'arrows:mounted'; -export const EVENT_ARROWS_UPDATED = 'arrows:updated'; +export const EVENT_MOUNTED = 'mounted'; +export const EVENT_READY = 'ready'; +export const EVENT_MOVE = 'move'; +export const EVENT_MOVED = 'moved'; +export const EVENT_CLICK = 'click'; +export const EVENT_ACTIVE = 'active'; +export const EVENT_INACTIVE = 'inactive'; +export const EVENT_VISIBLE = 'visible'; +export const EVENT_HIDDEN = 'hidden'; +export const EVENT_REFRESH = 'refresh'; +export const EVENT_UPDATED = 'updated'; +export const EVENT_RESIZE = 'resize'; +export const EVENT_RESIZED = 'resized'; +export const EVENT_DRAG = 'drag'; +export const EVENT_DRAGGING = 'dragging'; +export const EVENT_DRAGGED = 'dragged'; +export const EVENT_SCROLL = 'scroll'; +export const EVENT_SCROLLING = 'scrolling'; +export const EVENT_SCROLLED = 'scrolled'; +export const EVENT_OVERFLOW = 'overflow'; +export const EVENT_DESTROY = 'destroy'; +export const EVENT_ARROWS_MOUNTED = 'arrows:mounted'; +export const EVENT_ARROWS_UPDATED = 'arrows:updated'; export const EVENT_PAGINATION_MOUNTED = 'pagination:mounted'; export const EVENT_PAGINATION_UPDATED = 'pagination:updated'; export const EVENT_NAVIGATION_MOUNTED = 'navigation:mounted'; -export const EVENT_AUTOPLAY_PLAY = 'autoplay:play'; -export const EVENT_AUTOPLAY_PLAYING = 'autoplay:playing'; -export const EVENT_AUTOPLAY_PAUSE = 'autoplay:pause'; -export const EVENT_LAZYLOAD_LOADED = 'lazyload:loaded'; +export const EVENT_AUTOPLAY_PLAY = 'autoplay:play'; +export const EVENT_AUTOPLAY_PLAYING = 'autoplay:playing'; +export const EVENT_AUTOPLAY_PAUSE = 'autoplay:pause'; +export const EVENT_LAZYLOAD_LOADED = 'lazyload:loaded'; +export const EVENT_LAZYLOAD_ERROR = 'lazyload:error'; /** @internal */ -export const EVENT_SLIDE_KEYDOWN = 'sk'; -export const EVENT_SHIFTED = 'sh'; -export const EVENT_END_INDEX_CHANGED = 'ei'; +export const EVENT_SLIDE_KEYDOWN = '_sk'; +export const EVENT_SHIFTED = '_sh'; +export const EVENT_END_INDEX_CHANGED = '_ei'; diff --git a/src/js/constants/i18n.ts b/src/js/constants/i18n.ts index b68cf472..832f60a6 100644 --- a/src/js/constants/i18n.ts +++ b/src/js/constants/i18n.ts @@ -4,16 +4,16 @@ * @since 3.0.0 */ export const I18N = { - prev : 'Previous slide', - next : 'Next slide', - first : 'Go to first slide', - last : 'Go to last slide', - slideX : 'Go to slide %s', - pageX : 'Go to page %s', - play : 'Start autoplay', - pause : 'Pause autoplay', - carousel : 'carousel', - slide : 'slide', - select : 'Select a slide to show', + prev: 'Previous slide', + next: 'Next slide', + first: 'Go to first slide', + last: 'Go to last slide', + slideX: 'Go to slide %s', + pageX: 'Go to page %s', + play: 'Start autoplay', + pause: 'Pause autoplay', + carousel: 'carousel', + slide: 'slide', + select: 'Select a slide to show', slideLabel: '%s of %s', // [ slide number ] / [ slide size ] }; diff --git a/src/js/constructors/EventBinder/EventBinder.ts b/src/js/constructors/EventBinder/EventBinder.ts deleted file mode 100644 index 0d5a46b5..00000000 --- a/src/js/constructors/EventBinder/EventBinder.ts +++ /dev/null @@ -1,153 +0,0 @@ -import { AnyFunction } from '../../types'; -import { empty, forEach } from '../../utils'; - - -/** - * The type for an EventTarget or an array with EventTarget objects. - * - * @since 4.0.0 - */ -type EventTargets = EventTarget | EventTarget[]; - -/** - * The interface for the EventBinder object. - * - * @since 3.0.0 - */ -export interface EventBinderObject { - bind( target: EventTargets, events: string | string[], callback: AnyFunction, options?: AddEventListenerOptions ): void - unbind( target: EventTarget | EventTarget[], events: string | string[], callback?: AnyFunction ): void; - dispatch( target: EventTarget, event: string, detail?: T ): void; - destroy(): void; -} - -/** - * The constructor function to provide methods to subscribe native events. - * - * @since 4.0.0 - * @constructor - * - * @return An EventBinder object. - */ -export function EventBinder(): EventBinderObject { - /** - * Stores all handlers that listen to native events. - * `[ target, event, namespace, callback, remover ]` - */ - let listeners: [ EventTarget, string, string | undefined, AnyFunction, () => void ][] = []; - - /** - * Listens to native events. - * - `destroy()` can unsubscribe all events. - * - In IE, mediaQueryList does not inherit EventTarget, - * and only supports deprecated `addListener` and `removeListener`. - * - * @link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener - * - * @param targets - A target element, the window object or the document object. - * @param events - An event or events to listen to. - * @param callback - A callback function. - * @param options - Optional. The options to pass to the `addEventListener` function. - */ - function bind( - targets: EventTargets, - events: string | string[], - callback: AnyFunction, - options?: AddEventListenerOptions - ): void { - forEachEvent( targets, events, ( target, event, namespace ) => { - const isEventTarget = 'addEventListener' in target; - const remover = isEventTarget - ? target.removeEventListener.bind( target, event, callback, options ) - : target[ 'removeListener' ].bind( target, callback ); - - isEventTarget ? target.addEventListener( event, callback, options ) : target[ 'addListener' ]( callback ); - listeners.push( [ target, event, namespace, callback, remover ] ); - } ); - } - - /** - * Removes the event handler. - * - * @param targets - A target element, the window object or the document object. - * @param events - An event name or names to remove. - * @param callback - Optional. Specify the callback to remove. - */ - function unbind( targets: EventTargets, events: string | string[], callback?: AnyFunction ): void { - forEachEvent( targets, events, ( target, event, namespace ) => { - listeners = listeners.filter( listener => { - if ( listener[ 0 ] === target - && listener[ 1 ] === event - && listener[ 2 ] === namespace - && ( ! callback || listener[ 3 ] === callback ) - ) { - listener[ 4 ](); - return false; - } - - return true; - } ); - } ); - } - - /** - * Dispatches a custom event of the target. - * - * @param target - An event target. - * @param type - An event type. - * @param detail - Optional. The `detail` object of the event. - * - * @return An event object. - */ - function dispatch( target: EventTarget, type: string, detail?: T ): CustomEvent { - let e: CustomEvent; - const bubbles = true; - - if ( typeof CustomEvent === 'function' ) { - e = new CustomEvent( type, { bubbles, detail } ); - } else { - e = document.createEvent( 'CustomEvent' ); - e.initCustomEvent( type, bubbles, false, detail ); - } - - target.dispatchEvent( e ); - return e; - } - - /** - * Iterates over each target and event. - * - * @param targets - A target element, the window object or the document object. - * @param events - An event name or names. - * @param iteratee - An iteratee function. - */ - function forEachEvent( - targets: EventTargets, - events: string | string[], - iteratee: ( target: EventTarget, event: string, namespace: string | undefined ) => void - ): void { - forEach( targets, target => { - target && forEach( events, events => { - events.split( ' ' ).forEach( eventNS => { - const fragment = eventNS.split( '.' ); - iteratee( target, fragment[ 0 ], fragment[ 1 ] ); - } ); - } ); - } ); - } - - /** - * Removes all listeners. - */ - function destroy(): void { - listeners.forEach( data => { data[ 4 ]() } ); - empty( listeners ); - } - - return { - bind, - unbind, - dispatch, - destroy, - }; -} diff --git a/src/js/constructors/EventBinder/test/bind.test.ts b/src/js/constructors/EventBinder/test/bind.test.ts deleted file mode 100644 index f05f0c27..00000000 --- a/src/js/constructors/EventBinder/test/bind.test.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { fire } from '../../../test'; -import { EventBinder } from '../EventBinder'; - - -describe( 'EventBinder#bind()', () => { - const div = document.createElement( 'div' ); - - test( 'can listen to native events.', () => { - const { bind } = EventBinder(); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - - bind( window, 'resize', callback1 ); - bind( div, 'click', callback2 ); - - fire( window, 'resize' ); - fire( div, 'click' ); - - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 1 ); - } ); - - test( 'can accept multiple events separated by spaces.', () => { - const { bind } = EventBinder(); - const callback = jest.fn(); - - bind( div, 'load resize click', callback ); - - fire( div, 'resize' ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - - fire( div, 'click' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - } ); - - test( 'can accept multiple events as an array.', () => { - const { bind } = EventBinder(); - const callback = jest.fn(); - - bind( div, [ 'load', 'resize', 'click' ], callback ); - - fire( div, 'resize' ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - - fire( div, 'click' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - } ); - - test( 'can accept multiple events by spaces and an array.', () => { - const { bind } = EventBinder(); - const callback = jest.fn(); - - bind( div, [ 'load resize click', 'scroll', 'wheel' ], callback ); - - fire( div, 'resize' ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - - fire( div, 'click' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - fire( div, 'scroll' ); - expect( callback ).toHaveBeenCalledTimes( 3 ); - } ); - - test( 'can accept a namespace by a dot notation.', () => { - const { bind } = EventBinder(); - const callback = jest.fn(); - - bind( div, [ 'load.namespace', 'resize.namespace', 'click.namespace' ], callback ); - - fire( div, 'resize' ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - - fire( div, 'click' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - } ); -} ); diff --git a/src/js/constructors/EventBinder/test/destroy.test.ts b/src/js/constructors/EventBinder/test/destroy.test.ts deleted file mode 100644 index 43b82cfe..00000000 --- a/src/js/constructors/EventBinder/test/destroy.test.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { fire } from '../../../test'; -import { EventBinder } from '../EventBinder'; - - -describe( 'EventBinder#destroy()', () => { - const div = document.createElement( 'div' ); - - test( 'can remove all listeners.', () => { - const { bind, destroy } = EventBinder(); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - - bind( window, 'resize', callback1 ); - bind( div, 'click', callback2 ); - - destroy(); - - fire( window, 'resize' ); - fire( div, 'click' ); - - expect( callback1 ).not.toHaveBeenCalled(); - expect( callback2 ).not.toHaveBeenCalled(); - } ); - - test( 'should not remove listeners bound by other binders.', () => { - const binder1 = EventBinder(); - const binder2 = EventBinder(); - const binder3 = EventBinder(); - - const binder1Callback = jest.fn(); - const binder2Callback = jest.fn(); - const binder3Callback = jest.fn(); - - binder1.bind( div, 'click', binder1Callback ); - binder2.bind( div, 'click', binder2Callback ); - binder3.bind( div, 'click', binder3Callback ); - - binder2.destroy(); - - fire( div, 'click' ); - - expect( binder1Callback ).toHaveBeenCalled(); - expect( binder2Callback ).not.toHaveBeenCalled(); - expect( binder3Callback ).toHaveBeenCalled(); - } ); -} ); diff --git a/src/js/constructors/EventBinder/test/dispatch.test.ts b/src/js/constructors/EventBinder/test/dispatch.test.ts deleted file mode 100644 index 25f6ff77..00000000 --- a/src/js/constructors/EventBinder/test/dispatch.test.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { EventBinder } from '../EventBinder'; - - -describe( 'EventBinder#dispatch()', () => { - const div = document.createElement( 'div' ); - - test( 'can dispatch a custom event.', () => { - const { dispatch } = EventBinder(); - const callback = jest.fn(); - - div.addEventListener( 'myEvent', callback ); - dispatch( div, 'myEvent' ); - expect( callback ).toHaveBeenCalled(); - } ); - - test( 'can dispatch a custom event with a detail property.', done => { - const { dispatch } = EventBinder(); - const array = [ 1, 2 ]; - - div.addEventListener( 'myEvent', e => { - if ( e instanceof CustomEvent ) { - expect( e.detail.a ).toBe( 1 ); - expect( e.detail.b ).toBe( 'b' ); - expect( e.detail.c ).toBe( array ); // Reference - done(); - } else { - fail(); - } - } ); - - dispatch( div, 'myEvent', { a: 1, b: 'b', c: array } ); - } ); -} ); diff --git a/src/js/constructors/EventBinder/test/unbind.test.ts b/src/js/constructors/EventBinder/test/unbind.test.ts deleted file mode 100644 index d6706042..00000000 --- a/src/js/constructors/EventBinder/test/unbind.test.ts +++ /dev/null @@ -1,231 +0,0 @@ -import { fire } from '../../../test'; -import { EventBinder } from '../EventBinder'; - - -describe( 'EventBinder#unbind()', () => { - const div = document.createElement( 'div' ); - - test( 'can remove a listener.', () => { - const { bind, unbind } = EventBinder(); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - - bind( div, 'click', callback1 ); - bind( div, 'mouseenter', callback2 ); - - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 2 ); - - unbind( div, 'click' ); - - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 2 ); - - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 2 ); - - expect( callback2 ).not.toHaveBeenCalled(); - } ); - - test( 'can remove multiple listeners by a string.', () => { - const { bind, unbind } = EventBinder(); - const callback = jest.fn(); - - bind( div, 'click mouseenter mouseleave', callback ); - - fire( div, 'click' ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - - fire( div, 'mouseenter' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - unbind( div, 'click mouseleave' ); - - fire( div, 'click' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - fire( div, 'mouseleave' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - fire( div, 'mouseenter' ); - expect( callback ).toHaveBeenCalledTimes( 3 ); - } ); - - test( 'can remove multiple listeners by an array.', () => { - const { bind, unbind } = EventBinder(); - const callback = jest.fn(); - - bind( div, 'click mouseenter mouseleave', callback ); - - fire( div, 'click' ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - - fire( div, 'mouseenter' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - unbind( div, [ 'click', 'mouseleave' ] ); - - fire( div, 'click' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - fire( div, 'mouseleave' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - fire( div, 'mouseenter' ); - expect( callback ).toHaveBeenCalledTimes( 3 ); - } ); - - test( 'can remove multiple listeners by a string and an array.', () => { - const { bind, unbind } = EventBinder(); - const callback = jest.fn(); - - bind( div, 'click mouseenter mouseleave mousemove', callback ); - - fire( div, 'click' ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - - fire( div, 'mouseenter' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - unbind( div, [ 'click mousemove', 'mouseleave' ] ); - - fire( div, 'click' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - fire( div, 'mouseleave' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - fire( div, 'mousemove' ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - fire( div, 'mouseenter' ); - expect( callback ).toHaveBeenCalledTimes( 3 ); - } ); - - test( 'can only remove events that belong to the specified namespace.', () => { - const { bind, unbind } = EventBinder(); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - const callback3 = jest.fn(); - - bind( div, 'click.namespace1', callback1 ); - bind( div, 'click.namespace2', callback2 ); - bind( div, 'click.namespace3', callback3 ); - - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 1 ); - expect( callback3 ).toHaveBeenCalledTimes( 1 ); - - unbind( div, 'click.namespace1' ); - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 2 ); - expect( callback3 ).toHaveBeenCalledTimes( 2 ); - - unbind( div, 'click.namespace2' ); - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 2 ); - expect( callback3 ).toHaveBeenCalledTimes( 3 ); - - unbind( div, 'click.namespace3' ); - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 2 ); - expect( callback3 ).toHaveBeenCalledTimes( 3 ); - } ); - - test( 'can remove all handlers in the same namespace.', () => { - const { bind, unbind } = EventBinder(); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - const callback3 = jest.fn(); - - bind( div, 'click.namespace', callback1 ); - bind( div, 'click.namespace', callback2 ); - bind( div, 'click.namespace', callback3 ); - - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 1 ); - expect( callback3 ).toHaveBeenCalledTimes( 1 ); - - unbind( div, 'click.namespace' ); - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 1 ); - expect( callback3 ).toHaveBeenCalledTimes( 1 ); - } ); - - test( 'can only remove the specified callback.', () => { - const { bind, unbind } = EventBinder(); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - const callback3 = jest.fn(); - - bind( div, 'click', callback1 ); - bind( div, 'click', callback2 ); - bind( div, 'click', callback3 ); - - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 1 ); - expect( callback3 ).toHaveBeenCalledTimes( 1 ); - - unbind( div, 'click', callback1 ); - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 2 ); - expect( callback3 ).toHaveBeenCalledTimes( 2 ); - - unbind( div, 'click', callback2 ); - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 2 ); - expect( callback3 ).toHaveBeenCalledTimes( 3 ); - - unbind( div, 'click', callback3 ); - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 2 ); - expect( callback3 ).toHaveBeenCalledTimes( 3 ); - } ); - - test( 'can only remove the specified callback in the same namespace.', () => { - const { bind, unbind } = EventBinder(); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - const callback3 = jest.fn(); - - bind( div, 'click.namespace', callback1 ); - bind( div, 'click.namespace', callback2 ); - bind( div, 'click.namespace', callback3 ); - - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 1 ); - expect( callback3 ).toHaveBeenCalledTimes( 1 ); - - unbind( div, 'click.namespace', callback1 ); - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 2 ); - expect( callback3 ).toHaveBeenCalledTimes( 2 ); - - unbind( div, 'click.namespace', callback2 ); - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 2 ); - expect( callback3 ).toHaveBeenCalledTimes( 3 ); - - unbind( div, 'click.namespace', callback3 ); - fire( div, 'click' ); - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 2 ); - expect( callback3 ).toHaveBeenCalledTimes( 3 ); - } ); -} ); diff --git a/src/js/constructors/EventInterface/EventInterface.ts b/src/js/constructors/EventInterface/EventInterface.ts deleted file mode 100644 index 71e6ebb0..00000000 --- a/src/js/constructors/EventInterface/EventInterface.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { EVENT_DESTROY } from '../../constants/events'; -import { Splide } from '../../core/Splide/Splide'; -import { AnyFunction, EventMap } from '../../types'; -import { apply, assign, isArray, slice, toArray } from '../../utils'; -import { EventBinder, EventBinderObject } from '../EventBinder/EventBinder'; - - -/** - * The interface for the EventInterface object. - * - * @since 3.0.0 - */ -export interface EventInterfaceObject extends EventBinderObject { - on( event: K, callback: EventMap[ K ] ): void; - on( events: string | string[], callback: AnyFunction ): void; - off( events: K | K[] | string | string[] ): void; - emit( event: K, ...args: Parameters ): void - emit( event: string, ...args: any[] ): void; - - /** @internal */ - bus: DocumentFragment; -} - -/** - * The constructor function that provides interface for internal and native events. - * - * @since 3.0.0 - * @constructor - * - * @param Splide - A Splide instance. - * - * @return A collection of interface functions. - */ -export function EventInterface( Splide?: Splide ): EventInterfaceObject { - /** - * The document fragment for internal events. - * Provide the Splide instance to share the bus. - */ - const bus = Splide ? Splide.event.bus : document.createDocumentFragment(); - - /** - * An event binder object. - */ - const binder = EventBinder(); - - /** - * Listens to an internal event or events. - * - * @param events - An event name or names separated by spaces. Use a dot(.) to add a namespace. - * @param callback - A callback function to register. - */ - function on( events: string | string[], callback: AnyFunction ): void { - binder.bind( bus, toArray( events ).join( ' ' ), e => { - callback.apply( callback, isArray( e.detail ) ? e.detail : [] ); - } ); - } - - /** - * Triggers callback functions. - * This accepts additional arguments and passes them to callbacks. - * - * @param event - An event name. - */ - function emit( event: string ): void { - // eslint-disable-next-line prefer-rest-params, prefer-spread - binder.dispatch( bus, event, slice( arguments, 1 ) ); - } - - if ( Splide ) { - Splide.event.on( EVENT_DESTROY, binder.destroy ); - } - - return assign( binder, { - bus, - on, - off: apply( binder.unbind, bus ), - emit, - } ); -} \ No newline at end of file diff --git a/src/js/constructors/EventInterface/test/general.test.ts b/src/js/constructors/EventInterface/test/general.test.ts deleted file mode 100644 index 9ee211c9..00000000 --- a/src/js/constructors/EventInterface/test/general.test.ts +++ /dev/null @@ -1,127 +0,0 @@ -import { fire, init } from '../../../test'; -import { EventInterface } from '../EventInterface'; - - -describe( 'EventInterface', () => { - const splide = init( { speed: 0 } ); - - test( 'can provide `on` to listen to internal events and lock listeners.', () => { - const { on } = EventInterface( splide ); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - - on( 'mounted', callback1 ); - on( 'moved', callback2 ); - - splide.emit( 'mounted' ); - splide.emit( 'moved' ); - - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 1 ); - - // Handlers should not be removed by `off()`. - splide.off( 'mounted' ); - splide.off( 'moved' ); - - splide.emit( 'mounted' ); - splide.emit( 'moved' ); - - expect( callback1 ).toHaveBeenCalledTimes( 2 ); - expect( callback2 ).toHaveBeenCalledTimes( 2 ); - } ); - - test( 'can receive arguments passed by `emit`.', () => { - const { on } = EventInterface( splide ); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - - const array = [ 1, 2 ]; - const object = { a: 1, b: 2 }; - - on( 'myEvent1', callback1 ); - on( 'myEvent2', callback2 ); - - splide.emit( 'myEvent1', 1, 2, 3 ); - splide.emit( 'myEvent2', array, object, Infinity ); - - expect( callback1 ).toHaveBeenCalledWith( 1, 2, 3 ); - expect( callback2 ).toHaveBeenCalledWith( array, object, Infinity ); - } ); - - test( 'can provide `off` to remove locked listeners.', () => { - const { on, off } = EventInterface( splide ); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - - on( 'mounted', callback1 ); - on( 'moved', callback2 ); - - splide.emit( 'mounted' ); - splide.emit( 'moved' ); - - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 1 ); - - // `off()` can remove handlers registered by `on()`. - off( 'mounted' ); - off( 'moved' ); - - splide.emit( 'mounted' ); - splide.emit( 'moved' ); - - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 1 ); - } ); - - test( 'can provide `bind` to listen to native events.', () => { - const { bind } = EventInterface( splide ); - const div = document.createElement( 'div' ); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - - bind( window, 'resize', callback1 ); - bind( div, 'click', callback2 ); - - fire( window, 'resize' ); - fire( div, 'click' ); - - expect( callback1 ).toHaveBeenCalledTimes( 1 ); - expect( callback2 ).toHaveBeenCalledTimes( 1 ); - } ); - - test( 'can provide `unbind` to remove listeners.', () => { - const { bind, unbind } = EventInterface( splide ); - const div = document.createElement( 'div' ); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - - bind( window, 'resize', callback1 ); - bind( div, 'click', callback2 ); - - unbind( window, 'resize' ); - unbind( div, 'click' ); - - fire( window, 'resize' ); - fire( div, 'click' ); - - expect( callback1 ).not.toHaveBeenCalled(); - expect( callback2 ).not.toHaveBeenCalled(); - } ); - - test( 'can remove all listeners when the splide is destroyed.', () => { - const { on, bind } = EventInterface( splide ); - const callback1 = jest.fn(); - const callback2 = jest.fn(); - - bind( window, 'resize', callback1 ); - on( 'moved', callback2 ); - - splide.destroy(); - - fire( window, 'resize' ); - splide.emit( 'moved' ); - - expect( callback1 ).not.toHaveBeenCalled(); - expect( callback2 ).not.toHaveBeenCalled(); - } ); -} ); diff --git a/src/js/constructors/RequestInterval/RequestInterval.ts b/src/js/constructors/RequestInterval/RequestInterval.ts deleted file mode 100644 index 517d2641..00000000 --- a/src/js/constructors/RequestInterval/RequestInterval.ts +++ /dev/null @@ -1,149 +0,0 @@ -import { min, raf } from '../../utils'; - - -/** - * The interface for the returning value of the RequestInterval. - * - * @since 3.0.0 - */ -export interface RequestIntervalInterface { - start( resume?: boolean ): void; - pause(): void; - rewind(): void; - cancel(): void; - set( interval: number ): void; - isPaused(): boolean; -} - -/** - * Requests interval like the native `setInterval()` with using `requestAnimationFrame`. - * - * @since 3.0.0 - * - * @param interval - The interval duration in milliseconds. - * @param onInterval - The callback fired on every interval. - * @param onUpdate - Optional. Called on every animation frame, taking the progress rate. - * @param limit - Optional. Limits the number of interval. - */ -export function RequestInterval( - interval: number, - onInterval: () => void, - onUpdate?: ( rate: number ) => void, - limit?: number -): RequestIntervalInterface { - const { now } = Date; - - /** - * The time when the interval starts. - */ - let startTime: number; - - /** - * The current progress rate. - */ - let rate = 0; - - /** - * The animation frame ID. - */ - let id: number; - - /** - * Indicates whether the interval is currently paused or not. - */ - let paused = true; - - /** - * The loop count. This only works when the `limit` argument is provided. - */ - let count = 0; - - /** - * The update function called on every animation frame. - */ - function update(): void { - if ( ! paused ) { - rate = interval ? min( ( now() - startTime ) / interval, 1 ) : 1; - onUpdate && onUpdate( rate ); - - if ( rate >= 1 ) { - onInterval(); - startTime = now(); - - if ( limit && ++count >= limit ) { - return pause(); - } - } - - id = raf( update ); - } - } - - /** - * Starts the interval. - * - * @param resume - Optional. Whether to resume the paused progress or not. - */ - function start( resume?: boolean ): void { - resume || cancel(); - startTime = now() - ( resume ? rate * interval : 0 ); - paused = false; - id = raf( update ); - } - - /** - * Pauses the interval. - */ - function pause(): void { - paused = true; - } - - /** - * Rewinds the current progress. - */ - function rewind(): void { - startTime = now(); - rate = 0; - - if ( onUpdate ) { - onUpdate( rate ); - } - } - - /** - * Cancels the interval. - */ - function cancel() { - id && cancelAnimationFrame( id ); - rate = 0; - id = 0; - paused = true; - } - - /** - * Sets new interval duration. - * - * @param time - The interval duration in milliseconds. - */ - function set( time: number ): void { - interval = time; - } - - /** - * Checks if the interval is paused or not. - * - * @return `true` if the interval is paused, or otherwise `false`. - */ - function isPaused(): boolean { - return paused; - } - - return { - start, - rewind, - pause, - cancel, - set, - isPaused, - }; -} diff --git a/src/js/constructors/RequestInterval/test/general.test.ts b/src/js/constructors/RequestInterval/test/general.test.ts deleted file mode 100644 index d960b1d5..00000000 --- a/src/js/constructors/RequestInterval/test/general.test.ts +++ /dev/null @@ -1,122 +0,0 @@ -import { wait } from '../../../test'; -import { RequestInterval } from '../RequestInterval'; - - -describe( 'RequestInterval', () => { - test( 'can invoke a function repeatedly by the specified interval.', async () => { - const callback = jest.fn(); - const duration = 1000; - const durationAndBuffer = 1100; - const interval = RequestInterval( duration, callback ); - - interval.start(); - - expect( callback ).not.toHaveBeenCalled(); - - await wait( durationAndBuffer ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - - await wait( durationAndBuffer ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - - await wait( durationAndBuffer ); - expect( callback ).toHaveBeenCalledTimes( 3 ); - } ); - - test( 'can cancel the active interval.', async () => { - const callback = jest.fn(); - const duration = 1000; - const durationAndBuffer = 1100; - const interval = RequestInterval( duration, callback ); - - interval.start(); - - expect( callback ).not.toHaveBeenCalled(); - - await wait( durationAndBuffer ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - - interval.cancel(); - - await wait( durationAndBuffer ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - - await wait( durationAndBuffer ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - } ); - - test( 'can pause/resume the active interval.', async () => { - const callback = jest.fn(); - const duration = 1000; - const durationAndBuffer = 1100; - const interval = RequestInterval( duration, callback ); - - interval.start(); - - expect( callback ).not.toHaveBeenCalled(); - - await wait( durationAndBuffer ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - interval.pause(); - - await wait( durationAndBuffer ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - - interval.start( true ); - - await wait( durationAndBuffer ); - expect( callback ).toHaveBeenCalledTimes( 2 ); - } ); - - test( 'can rewind the active interval.', async () => { - const callback = jest.fn(); - const duration = 1000; - const buffer = 100; - const interval = RequestInterval( duration, callback ); - - interval.start(); - - expect( callback ).not.toHaveBeenCalled(); - - // Rewind the interval timer around 900ms - await wait( duration - buffer ); - interval.rewind(); - - // Now around 1100ms, but the callback should not be called. - await wait( buffer * 2 ); - expect( callback ).not.toHaveBeenCalled(); - - // Around 1200ms after calling `rewind()`. The rewound timer should be expired. - await wait( duration ); - expect( callback ).toHaveBeenCalledTimes( 1 ); - } ); - - test( 'can check if the interval is paused or not.', () => { - const callback = jest.fn(); - const duration = 1000; - const interval = RequestInterval( duration, callback ); - - expect( interval.isPaused() ).toBe( true ); - - interval.start(); - expect( interval.isPaused() ).toBe( false ); - - interval.pause(); - expect( interval.isPaused() ).toBe( true ); - - interval.start(); - expect( interval.isPaused() ).toBe( false ); - - interval.cancel(); - expect( interval.isPaused() ).toBe( true ); - } ); - - test( 'should pause the interval after reaching the limit.', async () => { - const callback = jest.fn(); - const duration = 1000; - const interval = RequestInterval( duration, callback, null, 1 ); - - await wait( duration + 100 ); - expect( interval.isPaused() ).toBe( true ); - } ); -} ); diff --git a/src/js/constructors/State/State.ts b/src/js/constructors/State/State.ts deleted file mode 100644 index 02f71a8b..00000000 --- a/src/js/constructors/State/State.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { includes, toArray } from '../../utils'; - - -/** - * The interface for the State object. - * - * @since 3.0.0 - */ -export interface StateObject { - set( state: number ): void; - is( states: number | number[] ): boolean; -} - -/** - * The function providing a super simple state system. - * - * @param initialState - Specifies the initial state. - */ -export function State( initialState: number ): StateObject { - /** - * The current state. - */ - let state = initialState; - - /** - * Sets a new state. - * - * @param value - A new state value. - */ - function set( value: number ): void { - state = value; - } - - /** - * Checks if the current state matches the provided one. - * - * @param states - A state to check. - * - * @return `true` if the current state is the provided one. - */ - function is( states: number | number[] ): boolean { - return includes( toArray( states ), state ); - } - - return { set, is }; -} diff --git a/src/js/constructors/Throttle/Throttle.ts b/src/js/constructors/Throttle/Throttle.ts deleted file mode 100644 index 6303bb02..00000000 --- a/src/js/constructors/Throttle/Throttle.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { AnyFunction } from '../../types'; -import { RequestInterval } from '../RequestInterval/RequestInterval'; - - -/** - * The interface for the returning value of the RequestInterval. - * - * @since 3.0.0 - */ -export interface ThrottleInstance extends Function { - ( ...args: Parameters ): void; -} - -/** - * Returns the throttled function. - * - * @param func - A function to throttle. - * @param duration - Optional. Throttle duration in milliseconds. - * - * @return A throttled function. - */ -export function Throttle( - func: F, - duration?: number -): ThrottleInstance { - const interval = RequestInterval( duration || 0, func, null, 1 ); - - return () => { - interval.isPaused() && interval.start(); - }; -} diff --git a/src/js/constructors/Throttle/test/Throttle.test.ts b/src/js/constructors/Throttle/test/Throttle.test.ts deleted file mode 100644 index e66732aa..00000000 --- a/src/js/constructors/Throttle/test/Throttle.test.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Throttle } from '../Throttle'; - - -describe( 'Throttle', () => { - test( 'can control how often the callback function should be executed by the specified duration.', done => { - const callback = jest.fn(); - const duration = 1000; - const throttled = Throttle( callback, duration ); - - throttled(); - throttled(); - throttled(); - throttled(); - - expect( callback ).toHaveBeenCalledTimes( 0 ); - - // In the half way of the interval. - setTimeout( () => { - throttled(); - throttled(); - throttled(); - throttled(); - - expect( callback ).toHaveBeenCalledTimes( 0 ); - }, duration / 2 ); - - // After the interval duration. - setTimeout( () => { - throttled(); - throttled(); - throttled(); - throttled(); - - expect( callback ).toHaveBeenCalledTimes( 1 ); - - done(); - }, duration + 100 ); - } ); -} ); diff --git a/src/js/constructors/index.ts b/src/js/constructors/index.ts deleted file mode 100644 index b4449c57..00000000 --- a/src/js/constructors/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './EventBinder/EventBinder'; -export * from './EventInterface/EventInterface'; -export * from './RequestInterval/RequestInterval'; -export * from './State/State'; -export * from './Throttle/Throttle'; diff --git a/src/js/core/Splide/Splide.ts b/src/js/core/Splide/Splide.ts index f4221201..5223059e 100644 --- a/src/js/core/Splide/Splide.ts +++ b/src/js/core/Splide/Splide.ts @@ -1,4 +1,4 @@ -import * as ComponentConstructors from '../../components'; +import { COMPONENTS } from '../../components'; import { SlideMatcher } from '../../components/Slides/Slides'; import { CLASS_INITIALIZED } from '../../constants/classes'; import { DEFAULTS } from '../../constants/defaults'; @@ -6,10 +6,22 @@ import { EVENT_DESTROY, EVENT_MOUNTED, EVENT_READY, EVENT_REFRESH } from '../../ import { DATA_ATTRIBUTE } from '../../constants/project'; import { CREATED, DESTROYED, IDLE, STATES } from '../../constants/states'; import { FADE } from '../../constants/types'; -import { EventInterface, EventInterfaceObject, State, StateObject } from '../../constructors'; import { Fade, Slide } from '../../transitions'; import { AnyFunction, ComponentConstructor, Components, EventMap, Options, SyncTarget } from '../../types'; -import { addClass, assert, assign, empty, forOwn, getAttribute, isString, merge, query, slice } from '../../utils'; +import { + addClass, + assign, + empty, + EventInterface, + format, + forOwn, + getAttribute, + isString, + merge, + query, + State, +} from '@splidejs/utils'; +import { assert } from '../../utils'; import { ARIA_LABEL, ARIA_LABELLEDBY } from '../../constants/attributes'; @@ -29,25 +41,30 @@ export class Splide { */ static readonly STATES = STATES; + /** + * Stores extension constructors. + */ + static readonly Extensions: Record = {}; + /** * The root element where the Splide is applied. */ readonly root: HTMLElement; /** - * The EventBusObject object. + * The EventInterface object. */ - readonly event: EventInterfaceObject = EventInterface(); + readonly event = EventInterface>(); /** - * The collection of all component objects. + * The collection of all component instances, including extensions. */ readonly Components: Components = {} as Components; /** * The StateObject object. */ - readonly state: StateObject = State( CREATED ); + readonly state = State(CREATED); /** * An array with SyncTarget objects for splide instances to sync with. @@ -72,7 +89,7 @@ export class Splide { /** * The Transition component. */ - private _T: ComponentConstructor; + private _T: ComponentConstructor | undefined; /** * The Splide constructor. @@ -80,24 +97,26 @@ export class Splide { * @param target - The selector for the target element, or the element itself. * @param options - Optional. An object with options. */ - constructor( target: string | HTMLElement, options?: Options ) { - const root = isString( target ) ? query( document, target ) : target; - assert( root, `${ root } is invalid.` ); + constructor(target: string | HTMLElement, options: Options = {}) { + const root = isString(target) ? query(document, target) : target; + assert(root, `${ root } is invalid.`); this.root = root; - options = merge( { - label : getAttribute( root, ARIA_LABEL ) || '', - labelledby: getAttribute( root, ARIA_LABELLEDBY ) || '', - }, DEFAULTS, Splide.defaults, options || {} ); + options = merge({ + label: getAttribute(root, ARIA_LABEL) || '', + labelledby: getAttribute(root, ARIA_LABELLEDBY) || '', + }, DEFAULTS, Splide.defaults, options); try { - merge( options, JSON.parse( getAttribute( root, DATA_ATTRIBUTE ) ) ); - } catch ( e ) { - assert( false, 'Invalid JSON' ); + const json = getAttribute(root, DATA_ATTRIBUTE); + json && merge(options, JSON.parse(json)); + } catch (e) { + assert(false, 'Invalid JSON'); } - this._o = Object.create( merge( {}, options ) ); + this._C = this.Components; + this._o = Object.create(merge({}, options)); } /** @@ -108,34 +127,37 @@ export class Splide { * * @return `this` */ - mount( Extensions?: Record, Transition?: ComponentConstructor ): this { + mount( + Extensions: Record = this._E, + Transition: ComponentConstructor | undefined = this._T, + ): this { const { state, Components } = this; - assert( state.is( [ CREATED, DESTROYED ] ), 'Already mounted!' ); + assert(state.is([CREATED, DESTROYED]), 'Already mounted!'); - state.set( CREATED ); + state.set(CREATED); this._C = Components; - this._T = Transition || this._T || ( this.is( FADE ) ? Fade : Slide ); - this._E = Extensions || this._E; + this._T = Transition || (this.is(FADE) ? Fade : Slide); + this._E = Extensions; - const Constructors = assign( {}, ComponentConstructors, this._E, { Transition: this._T } ); + const Constructors = assign({}, COMPONENTS, this._E, { Transition: this._T }); - forOwn( Constructors, ( Component, key ) => { - const component = Component( this, Components, this._o ); - Components[ key ] = component; + forOwn(Constructors, (Component, key) => { + const component = Component(this, Components, this._o, this.event.lock()); + Components[key] = component; component.setup && component.setup(); - } ); + }); - forOwn( Components, component => { - component.mount && component.mount(); - } ); + forOwn(Components, component => { + component && component.mount && component.mount(); + }); - this.emit( EVENT_MOUNTED ); + this.emit(EVENT_MOUNTED); - addClass( this.root, CLASS_INITIALIZED ); + addClass(this.root, CLASS_INITIALIZED); - state.set( IDLE ); - this.emit( EVENT_READY ); + state.set(IDLE); + this.emit(EVENT_READY); return this; } @@ -146,8 +168,8 @@ export class Splide { * * @example * ```ts - * var primary = new Splide(); - * var secondary = new Splide(); + * const primary = new Splide(); + * const secondary = new Splide(); * * primary.sync( secondary ); * primary.mount(); @@ -158,11 +180,11 @@ export class Splide { * * @return `this` */ - sync( splide: Splide ): this { - this.splides.push( { splide } ); - splide.splides.push( { splide: this, isParent: true } ); + sync(splide: Splide): this { + this.splides.push({ splide }); + splide.splides.push({ splide: this, isParent: true }); - if ( this.state.is( IDLE ) ) { + if (this.state.is(IDLE)) { this._C.Sync.remount(); splide.Components.Sync.remount(); } @@ -171,7 +193,7 @@ export class Splide { } /** - * Moves the slider with the following control pattern. + * Moves the carousel with the following control pattern. * * | Pattern | Description | * |---|---| @@ -181,13 +203,15 @@ export class Splide { * | `'>'` | Goes to the next page | * | `'<'` | Goes to the previous page | * | `>${i}` | Goes to the page `i` | + * | `>>` | Goes to the first page | + * | `<<` | Goes to the last page | * * In most cases, `'>'` and `'<'` notations are enough to control the slider * because they respect `perPage` and `perMove` options. * * @example * ```ts - * var splide = new Splide(); + * const splide = new Splide(); * * // Goes to the slide 1: * splide.go( 1 ); @@ -206,8 +230,20 @@ export class Splide { * * @return `this` */ - go( control: number | string ): this { - this._C.Controller.go( control ); + go(control: number | string): this { + this._C.Controller.go(control); + return this; + } + + /** + * Moves the carousel without transition. + * + * @param control - A control pattern. See `move()` for more details. + * + * @return `this` + */ + jump(control: number | string): this { + this._C.Controller.jump(control); return this; } @@ -216,7 +252,7 @@ export class Splide { * * @example * ```ts - * var splide = new Splide(); + * const splide = new Splide(); * * // Listens to a single event: * splide.on( 'move', function() {} ); @@ -233,10 +269,10 @@ export class Splide { * * @return `this` */ - on( events: K, callback: EventMap[ K ] ): this; - on( events: string | string[], callback: AnyFunction ): this; - on( events: string | string[], callback: AnyFunction ): this { - this.event.on( events, callback ); + on(events: K, callback: EventMap[ K ]): this; + on(events: string | string[], callback: AnyFunction): this; + on(events: string | string[], callback: AnyFunction): this { + this.event.on(events, callback); return this; } @@ -246,7 +282,7 @@ export class Splide { * * @example * ```ts - * var splide = new Splide(); + * const splide = new Splide(); * * // Removes all handlers assigned to "move": * splide.off( 'move' ); @@ -255,12 +291,13 @@ export class Splide { * splide.off( 'move.myNamespace' ); * ``` * - * @param events - An event name or names separated by spaces. Use a dot(.) to append a namespace. + * @param events - An event name or names separated by spaces. Use a dot(.) to append a namespace. + * @param callback - A callback function to remove. * * @return `this` */ - off( events: K | K[] | string | string[] ): this { - this.event.off( events ); + off(events: K | K[] | string | string[], callback: AnyFunction): this { + this.event.off(events, callback); return this; } @@ -272,11 +309,10 @@ export class Splide { * * @return `this` */ - emit( event: K, ...args: Parameters ): this; - emit( event: string, ...args: any[] ): this; - emit( event: string ): this { - // eslint-disable-next-line prefer-rest-params, prefer-spread - this.event.emit( event, ...slice( arguments, 1 ) ); + emit(event: K, ...args: Parameters): this; + emit(event: string, ...args: any[]): this; + emit(event: string, ...args: any[]): this { + this.event.emit(event, ...args); return this; } @@ -285,7 +321,7 @@ export class Splide { * * @example * ```ts - * var splide = new Splide(); + * const splide = new Splide(); * splide.mount(); * * // Adds the slide by the HTML: @@ -300,8 +336,8 @@ export class Splide { * * @return `this` */ - add( slides: string | HTMLElement | Array, index?: number ): this { - this._C.Slides.add( slides, index ); + add(slides: string | HTMLElement | Array, index?: number): this { + this._C.Slides.add(slides, index); return this; } @@ -311,8 +347,8 @@ export class Splide { * * @param matcher - An index, an array with indices, a selector string, or an iteratee function. */ - remove( matcher: SlideMatcher ): this { - this._C.Slides.remove( matcher ); + remove(matcher: SlideMatcher): this { + this._C.Slides.remove(matcher); return this; } @@ -323,7 +359,7 @@ export class Splide { * * @return `true` if the type matches the current one, or otherwise `false`. */ - is( type: string ): boolean { + is(type: string): boolean { return this._o.type === type; } @@ -333,7 +369,7 @@ export class Splide { * @return `this` */ refresh(): this { - this.emit( EVENT_REFRESH ); + this.emit(EVENT_REFRESH); return this; } @@ -344,26 +380,55 @@ export class Splide { * * @return `this` */ - destroy( completely = true ): this { + destroy(completely = true): this { const { event, state } = this; - if ( state.is( CREATED ) ) { + if (state.is(CREATED)) { // Postpones destruction requested before the slider becomes ready. - EventInterface( this ).on( EVENT_READY, this.destroy.bind( this, completely ) ); + this.on(EVENT_READY, this.destroy.bind(this, completely)); } else { - forOwn( this._C, component => { - component.destroy && component.destroy( completely ); - }, true ); + forOwn(this._C, component => { + component && component.destroy && component.destroy(completely); + }, true); - event.emit( EVENT_DESTROY ); + event.emit(EVENT_DESTROY); event.destroy(); - completely && empty( this.splides ); - state.set( DESTROYED ); + completely && empty(this.splides); + state.set(DESTROYED); } return this; } + /** + * Returns the i18n string of the specified key. + * + * @internal + * + * @param key - A key to find. + * @param replacements - Replaces `%s` in the found string if available. + * + * @return A string if found, or otherwise an empty string. + */ + i18n(key: string, ...replacements: Array): string { + const { i18n } = this._o; + return i18n ? format(i18n[key], ...replacements) : ''; + } + + /** + * Returns classes in options. + * + * @internal + * + * @param key - A key to find. + * + * @return A class or classes if found, or otherwise an empty string. + */ + classes(key: string): string { + const { classes } = this._o; + return classes ? classes[key] : ''; + } + /** * Returns options. * @@ -378,8 +443,8 @@ export class Splide { * * @param options - An object with new options. */ - set options( options: Options ) { - this._C.Media.set( options, true, true ); + set options(options: Options) { + this._C.Breakpoints.set(options, true, true); } /** @@ -388,7 +453,7 @@ export class Splide { * @return The number of slides. */ get length(): number { - return this._C.Slides.getLength( true ); + return this._C.Slides.getLength(true); } /** diff --git a/src/js/core/Splide/test/general.test.ts b/src/js/core/Splide/test/general.test.ts index 17889632..66514bb5 100644 --- a/src/js/core/Splide/test/general.test.ts +++ b/src/js/core/Splide/test/general.test.ts @@ -1,26 +1,26 @@ -import { init } from '../../../test'; +import { init } from '@test'; import { DEFAULTS } from '../../../constants/defaults'; -describe( 'Splide', () => { - test( 'can merge options to defaults.', () => { - const splide = init( { width: 200, height: 200 } ); +describe('Splide', () => { + test('can merge options to defaults.', () => { + const splide = init({ width: 200, height: 200 }); const { options } = splide; - expect( options.width ).toBe( 200 ); - expect( options.height ).toBe( 200 ); - expect( options.type ).toBe( DEFAULTS.type ); - expect( options.speed ).toBe( DEFAULTS.speed ); - } ); + expect(options.width).toBe(200); + expect(options.height).toBe(200); + expect(options.type).toBe(DEFAULTS.type); + expect(options.speed).toBe(DEFAULTS.speed); + }); - test( 'can merge options provided by the data attribute.', () => { - const data = { width: 100, height: 100, type: 'loop', waitForTransition: false }; - const splide = init( { width: 200, height: 200 }, { json: JSON.stringify( data ) } ); + test('can merge options provided by the data attribute.', () => { + const data = { width: 100, height: 100, type: 'loop', waitForTransition: false }; + const splide = init({ width: 200, height: 200 }, { json: JSON.stringify(data) }); const { options } = splide; - expect( options.width ).toBe( 100 ); - expect( options.height ).toBe( 100 ); - expect( options.type ).toBe( 'loop' ); - expect( options.waitForTransition ).toBe( false ); - } ); -} ); + expect(options.width).toBe(100); + expect(options.height).toBe(100); + expect(options.type).toBe('loop'); + expect(options.waitForTransition).toBe(false); + }); +}); diff --git a/src/js/index.ts b/src/js/index.ts index f7c89bd9..05dd4666 100644 --- a/src/js/index.ts +++ b/src/js/index.ts @@ -2,10 +2,10 @@ export { Splide } from './core/Splide/Splide'; export { Splide as default } from './core/Splide/Splide'; export { SplideRenderer } from './renderer/SplideRenderer/SplideRenderer'; export * from './components/types'; -export * from './constructors'; export * from './types'; export * from './constants/events'; export * from './constants/classes'; export * from './constants/defaults'; export * from './constants/directions'; export * from './constants/types'; +export { STATES } from './constants/states'; diff --git a/src/js/renderer/SplideRenderer/SplideRenderer.ts b/src/js/renderer/SplideRenderer/SplideRenderer.ts index 0f7ab017..b34aba83 100644 --- a/src/js/renderer/SplideRenderer/SplideRenderer.ts +++ b/src/js/renderer/SplideRenderer/SplideRenderer.ts @@ -5,11 +5,9 @@ import { DEFAULTS } from '../../constants/defaults'; import { TTB } from '../../constants/directions'; import { EVENT_MOUNTED } from '../../constants/events'; import { LOOP, SLIDE } from '../../constants/types'; -import { EventInterface } from '../../constructors'; import { Splide } from '../../core/Splide/Splide'; import { Options } from '../../types'; import { - assert, assign, camelToKebab, child, @@ -20,14 +18,15 @@ import { merge, push, queryAll, - remove, + removeNode, uniqueId, unit, -} from '../../utils'; +} from '@splidejs/utils'; import { CLASS_RENDERED } from '../constants/classes'; import { RENDERER_DEFAULT_CONFIG } from '../constants/defaults'; import { Style } from '../Style/Style'; import { RendererConfig, SlideContent } from '../types/types'; +import { assert } from '../../utils'; /** @@ -41,16 +40,17 @@ export class SplideRenderer { * * @param splide - A Splide instance. */ - static clean( splide: Splide ): void { - const { on } = EventInterface( splide ); + static clean(splide: Splide): void { + const { on } = splide.event; const { root } = splide; - const clones = queryAll( root, `.${ CLASS_CLONE }` ); + const clones = queryAll(root, `.${ CLASS_CLONE }`); - on( EVENT_MOUNTED, () => { - remove( child( root, 'style' ) ); - } ); + on(EVENT_MOUNTED, () => { + const style = child(root, 'style'); + style && removeNode(style); + }); - remove( clones ); + removeNode(clones); } /** @@ -91,7 +91,7 @@ export class SplideRenderer { /** * An array with options for each breakpoint. */ - private readonly breakpoints: [ string, Options ][] = []; + private readonly breakpoints: [string, Options][] = []; /** * The SplideRenderer constructor. @@ -101,17 +101,22 @@ export class SplideRenderer { * @param config - Static default options. * @param defaults - Default options for the slider. Pass `Splide.defaults` if you are using it. */ - constructor( contents: string[] | SlideContent[], options?: Options, config?: RendererConfig, defaults?: Options ) { - merge( DEFAULTS, defaults || {} ); - merge( merge( this.options, DEFAULTS ), options || {} ); + constructor(contents: string[] | SlideContent[], options?: Options, config?: RendererConfig, defaults?: Options) { + merge(DEFAULTS, defaults || {}); + merge(merge(this.options, DEFAULTS), options || {}); - this.contents = contents; - this.config = assign( {}, RENDERER_DEFAULT_CONFIG, config || {} ); - this.id = this.config.id || uniqueId( 'splide' ); - this.Style = new Style( this.id, this.options ); - this.Direction = Direction( null, null, this.options ); + // todo + const splide = new Splide(''); - assert( this.contents.length, 'Provide at least 1 content.' ); + this.contents = contents; + this.config = assign({}, RENDERER_DEFAULT_CONFIG, config || {}); + this.id = this.config.id || uniqueId('splide'); + this.Style = new Style(this.id, this.options); + + // todo + this.Direction = Direction(splide, splide.Components, this.options, splide.event.lock()); + + assert(this.contents.length, 'Provide at least 1 content.'); this.init(); } @@ -132,25 +137,27 @@ export class SplideRenderer { * Initializes slides. */ private initSlides(): void { - push( this.slides, this.contents.map( ( content, index ) => { - content = isString( content ) ? { html: content } : content; + push(this.slides, this.contents.map((content, index) => { + const { classes = {} } = this.options; + + content = isString(content) ? { html: content } : content; content.styles = content.styles || {}; - content.attrs = content.attrs || {}; + content.attrs = content.attrs || {}; - this.cover( content ); + this.cover(content); - const classes = `${ this.options.classes.slide } ${ index === 0 ? CLASS_ACTIVE : '' }`; + const classNames = `${ classes.slide } ${ index === 0 ? CLASS_ACTIVE : '' }`; - assign( content.attrs, { - class: `${ classes } ${ content.attrs.class || '' }`.trim(), - style: this.buildStyles( content.styles ), - } ); + assign(content.attrs, { + class: `${ classNames } ${ content.attrs.class || '' }`.trim(), + style: this.buildStyles(content.styles), + }); return content; - } ) ); + })); - if ( this.isLoop() ) { - this.generateClones( this.slides ); + if (this.isLoop()) { + this.generateClones(this.slides); } } @@ -158,9 +165,9 @@ export class SplideRenderer { * Registers styles for the root element. */ private registerRootStyles(): void { - this.breakpoints.forEach( ( [ width, options ] ) => { - this.Style.rule( ' ', 'max-width', unit( options.width ), width ); - } ); + this.breakpoints.forEach(([width, options]) => { + this.Style.rule(' ', 'max-width', unit(options.width), width); + }); } /** @@ -170,11 +177,11 @@ export class SplideRenderer { const { Style } = this; const selector = `.${ CLASS_TRACK }`; - this.breakpoints.forEach( ( [ width, options ] ) => { - Style.rule( selector, this.resolve( 'paddingLeft' ), this.cssPadding( options, false ), width ); - Style.rule( selector, this.resolve( 'paddingRight' ), this.cssPadding( options, true ), width ); - Style.rule( selector, 'height', this.cssTrackHeight( options ), width ); - } ); + this.breakpoints.forEach(([width, options]) => { + Style.rule(selector, this.resolve('paddingLeft'), this.cssPadding(options, false), width); + Style.rule(selector, this.resolve('paddingRight'), this.cssPadding(options, true), width); + Style.rule(selector, 'height', this.cssTrackHeight(options), width); + }); } /** @@ -184,13 +191,13 @@ export class SplideRenderer { const { Style } = this; const selector = `.${ CLASS_LIST }`; - this.breakpoints.forEach( ( [ width, options ] ) => { - Style.rule( selector, 'transform', this.buildTranslate( options ), width ); + this.breakpoints.forEach(([width, options]) => { + Style.rule(selector, 'transform', this.buildTranslate(options), width); - if ( ! this.cssSlideHeight( options ) ) { - Style.rule( selector, 'aspect-ratio', this.cssAspectRatio( options ), width ); + if (!this.cssSlideHeight(options)) { + Style.rule(selector, 'aspect-ratio', this.cssAspectRatio(options), width); } - } ); + }); } /** @@ -200,12 +207,12 @@ export class SplideRenderer { const { Style } = this; const selector = `.${ CLASS_SLIDE }`; - this.breakpoints.forEach( ( [ width, options ] ) => { - Style.rule( selector, 'width', this.cssSlideWidth( options ), width ); - Style.rule( selector, 'height', this.cssSlideHeight( options ) || '100%', width ); - Style.rule( selector, this.resolve( 'marginRight' ), unit( options.gap ) || '0px', width ); - Style.rule( `${ selector } > img`, 'display', options.cover ? 'none' : 'inline', width ); - } ); + this.breakpoints.forEach(([width, options]) => { + Style.rule(selector, 'width', this.cssSlideWidth(options), width); + Style.rule(selector, 'height', this.cssSlideHeight(options) || '100%', width); + Style.rule(selector, this.resolve('marginRight'), unit(options.gap) || '0px', width); + Style.rule(`${ selector } > img`, 'display', options.cover ? 'none' : 'inline', width); + }); } /** @@ -215,22 +222,22 @@ export class SplideRenderer { * * @return A string with multiple translate functions. */ - private buildTranslate( options: Options ): string { + private buildTranslate(options: Options): string { const { resolve, orient } = this.Direction; const values = []; - values.push( this.cssOffsetClones( options ) ); - values.push( this.cssOffsetGaps( options ) ); + values.push(this.cssOffsetClones(options)); + values.push(this.cssOffsetGaps(options)); - if ( this.isCenter( options ) ) { - values.push( this.buildCssValue( orient( -50 ), '%' ) ); - values.push( ...this.cssOffsetCenter( options ) ); + if (this.isCenter(options)) { + values.push(this.buildCssValue(orient(-50), '%')); + values.push(...this.cssOffsetCenter(options)); } return values - .filter( Boolean ) - .map( value => `translate${ resolve( 'X' ) }(${ value })` ) - .join( ' ' ); + .filter(Boolean) + .map(value => `translate${ resolve('X') }(${ value })`) + .join(' '); } /** @@ -241,17 +248,17 @@ export class SplideRenderer { * * @return The offset. */ - private cssOffsetClones( options: Options ): string { + private cssOffsetClones(options: Options): string { const { resolve, orient } = this.Direction; const cloneCount = this.getCloneCount(); - if ( this.isFixedWidth( options ) ) { - const { value, unit } = this.parseCssValue( options[ resolve( 'fixedWidth' ) ] ); - return this.buildCssValue( orient( value ) * cloneCount, unit ); + if (this.isFixedWidth(options)) { + const { value, unit } = this.parseCssValue(options[resolve('fixedWidth')]); + return this.buildCssValue(orient(value) * cloneCount, unit); } - const percent = 100 * cloneCount / options.perPage; - return `${ orient( percent ) }%`; + const percent = 100 * cloneCount / (options.perPage || 1); + return `${ orient(percent) }%`; } /** @@ -266,23 +273,23 @@ export class SplideRenderer { * * @return The offset. */ - private cssOffsetCenter( options: Options ): string[] { + private cssOffsetCenter(options: Options): string[] { const { resolve, orient } = this.Direction; - if ( this.isFixedWidth( options ) ) { - const { value, unit } = this.parseCssValue( options[ resolve( 'fixedWidth' ) ] ); - return [ this.buildCssValue( orient( value / 2 ), unit ) ]; + if (this.isFixedWidth(options)) { + const { value, unit } = this.parseCssValue(options[resolve('fixedWidth')]); + return [this.buildCssValue(orient(value / 2), unit)]; } const values = []; - const { perPage, gap } = options; + const { perPage = 1, gap } = options; - values.push( `${ orient( 50 / perPage ) }%` ); + values.push(`${ orient(50 / perPage) }%`); - if ( gap ) { - const { value, unit } = this.parseCssValue( gap ); - const gapOffset = ( value / perPage - value ) / 2; - values.push( this.buildCssValue( orient( gapOffset ), unit ) ); + if (gap) { + const { value, unit } = this.parseCssValue(gap); + const gapOffset = (value / perPage - value) / 2; + values.push(this.buildCssValue(orient(gapOffset), unit)); } return values; @@ -295,20 +302,20 @@ export class SplideRenderer { * * @return The offset as `calc()`. */ - private cssOffsetGaps( options: Options ): string { + private cssOffsetGaps(options: Options): string { const cloneCount = this.getCloneCount(); - if ( cloneCount && options.gap ) { + if (cloneCount && options.gap) { const { orient } = this.Direction; - const { value, unit } = this.parseCssValue( options.gap ); + const { value, unit } = this.parseCssValue(options.gap); - if ( this.isFixedWidth( options ) ) { - return this.buildCssValue( orient( value * cloneCount ), unit ); + if (this.isFixedWidth(options)) { + return this.buildCssValue(orient(value * cloneCount), unit); } - const { perPage } = options; + const { perPage = 1 } = options; const gaps = cloneCount / perPage; - return this.buildCssValue( orient( gaps * value ), unit ); + return this.buildCssValue(orient(gaps * value), unit); } return ''; @@ -321,8 +328,8 @@ export class SplideRenderer { * * @return A resolved property name in the Kebab case. */ - private resolve( prop: string ): string { - return camelToKebab( this.Direction.resolve( prop ) ); + private resolve(prop: string): string { + return camelToKebab(this.Direction.resolve(prop)); } /** @@ -333,10 +340,10 @@ export class SplideRenderer { * * @return Padding in the CSS format. */ - private cssPadding( options: Options, right: boolean ): string { + private cssPadding(options: Options, right: boolean): string { const { padding } = options; - const prop = this.Direction.resolve( right ? 'right' : 'left', true ); - return padding && unit( padding[ prop ] || ( isObject( padding ) ? 0 : padding ) ) || '0px'; + const prop = this.Direction.resolve(right ? 'right' : 'left', true); + return unit(isObject(padding) ? padding[prop] || 0 : padding) || '0px'; } /** @@ -346,13 +353,13 @@ export class SplideRenderer { * * @return Height in the CSS format. */ - private cssTrackHeight( options: Options ): string { + private cssTrackHeight(options: Options): string { let height = ''; - if ( this.isVertical() ) { - height = this.cssHeight( options ); - assert( height, '"height" is missing.' ); - height = `calc(${ height } - ${ this.cssPadding( options, false ) } - ${ this.cssPadding( options, true ) })`; + if (this.isVertical()) { + height = this.cssHeight(options); + assert(height, '"height" is missing.'); + height = `calc(${ height } - ${ this.cssPadding(options, false) } - ${ this.cssPadding(options, true) })`; } return height; @@ -365,8 +372,8 @@ export class SplideRenderer { * * @return Height in the CSS format. */ - private cssHeight( options: Options ): string { - return unit( options.height ); + private cssHeight(options: Options): string { + return unit(options.height); } /** @@ -376,10 +383,10 @@ export class SplideRenderer { * * @return Width in the CSS format. */ - private cssSlideWidth( options: Options ): string { + private cssSlideWidth(options: Options): string { return options.autoWidth ? '' - : unit( options.fixedWidth ) || ( this.isVertical() ? '' : this.cssSlideSize( options ) ); + : unit(options.fixedWidth) || (this.isVertical() ? '' : this.cssSlideSize(options)); } /** @@ -389,11 +396,11 @@ export class SplideRenderer { * * @return Height in the CSS format. */ - private cssSlideHeight( options: Options ): string { - return unit( options.fixedHeight ) - || ( this.isVertical() - ? ( options.autoHeight ? '' : this.cssSlideSize( options ) ) - : this.cssHeight( options ) + private cssSlideHeight(options: Options): string { + return unit(options.fixedHeight) + || (this.isVertical() + ? (options.autoHeight ? '' : this.cssSlideSize(options)) + : this.cssHeight(options) ); } @@ -404,8 +411,8 @@ export class SplideRenderer { * * @return Width or height in the CSS format. */ - private cssSlideSize( options: Options ): string { - const gap = unit( options.gap ); + private cssSlideSize(options: Options): string { + const gap = unit(options.gap); return `calc((100%${ gap && ` + ${ gap }` })/${ options.perPage || 1 }${ gap && ` - ${ gap }` })`; } @@ -416,7 +423,7 @@ export class SplideRenderer { * * @return aspectRatio in the CSS format. */ - private cssAspectRatio( options: Options ): string { + private cssAspectRatio(options: Options): string { const { heightRatio } = options; return heightRatio ? `${ 1 / heightRatio }` : ''; } @@ -429,7 +436,7 @@ export class SplideRenderer { * * @return A built value for a CSS value. */ - private buildCssValue( value: number, unit: string ): string { + private buildCssValue(value: number, unit: string): string { return `${ value }${ unit }`; } @@ -440,14 +447,14 @@ export class SplideRenderer { * * @return An object with value and unit. */ - private parseCssValue( value: string | number ): { value: number, unit: string } { - if ( isString( value ) ) { - const number = parseFloat( value ) || 0; - const unit = value.replace( /\d*(\.\d*)?/, '' ) || 'px'; + private parseCssValue(value: string | number | undefined): { value: number, unit: string } { + if (isString(value)) { + const number = parseFloat(value) || 0; + const unit = value.replace(/\d*(\.\d*)?/, '') || 'px'; return { value: number, unit }; } - return { value, unit: 'px' }; + return { value: value || 0, unit: 'px' }; } /** @@ -456,12 +463,12 @@ export class SplideRenderer { private parseBreakpoints(): void { const { breakpoints } = this.options; - this.breakpoints.push( [ 'default', this.options ] ); + this.breakpoints.push(['default', this.options]); - if ( breakpoints ) { - forOwn( breakpoints, ( options, width ) => { - this.breakpoints.push( [ width, merge( merge( {}, this.options ), options ) ] ); - } ); + if (breakpoints) { + forOwn(breakpoints, (options, width) => { + this.breakpoints.push([width, merge(merge({}, this.options), options)]); + }); } } @@ -470,8 +477,8 @@ export class SplideRenderer { * * @return `true` if the slide width is fixed, or otherwise `false`. */ - private isFixedWidth( options: Options ): boolean { - return !! options[ this.Direction.resolve( 'fixedWidth' ) ]; + private isFixedWidth(options: Options): boolean { + return !!options[this.Direction.resolve('fixedWidth')]; } /** @@ -488,14 +495,14 @@ export class SplideRenderer { * * @return `true` if the slide should be centered, or otherwise `false`. */ - private isCenter( options: Options ): boolean { - if( options.focus === 'center' ) { - if ( this.isLoop() ) { + private isCenter(options: Options): boolean { + if (options.focus === 'center') { + if (this.isLoop()) { return true; } - if ( this.options.type === SLIDE ) { - return ! this.options.trimSpace; + if (this.options.type === SLIDE) { + return !this.options.trimSpace; } } @@ -526,8 +533,8 @@ export class SplideRenderer { options.drag && `${ CLASS_ROOT }--draggable`, options.isNavigation && `${ CLASS_ROOT }--nav`, CLASS_ACTIVE, - ! this.config.hidden && CLASS_RENDERED, - ].filter( Boolean ).join( ' ' ); + !this.config.hidden && CLASS_RENDERED, + ].filter(Boolean).join(' '); } /** @@ -537,12 +544,12 @@ export class SplideRenderer { * * @return A built string. */ - private buildAttrs( attrs: Record ): string { + private buildAttrs(attrs: Record): string { let attr = ''; - forOwn( attrs, ( value, key ) => { - attr += value ? ` ${ camelToKebab( key ) }="${ value }"` : ''; - } ); + forOwn(attrs, (value, key) => { + attr += value ? ` ${ camelToKebab(key) }="${ value }"` : ''; + }); return attr.trim(); } @@ -554,12 +561,12 @@ export class SplideRenderer { * * @return A built string. */ - private buildStyles( styles: Record ): string { + private buildStyles(styles: Record): string { let style = ''; - forOwn( styles, ( value, key ) => { - style += ` ${ camelToKebab( key ) }:${ value };`; - } ); + forOwn(styles, (value, key) => { + style += ` ${ camelToKebab(key) }:${ value };`; + }); return style.trim(); } @@ -572,9 +579,9 @@ export class SplideRenderer { private renderSlides(): string { const { slideTag: tag } = this.config; - return this.slides.map( content => { - return `<${ tag } ${ this.buildAttrs( content.attrs ) }>${ content.html || '' }`; - } ).join( '' ); + return this.slides.map(content => { + return `<${ tag } ${ this.buildAttrs(content.attrs || {}) }>${ content.html || '' }`; + }).join(''); } /** @@ -582,14 +589,14 @@ export class SplideRenderer { * * @param content - A slide content. */ - private cover( content: SlideContent ): void { + private cover(content: SlideContent): void { const { styles, html = '' } = content; - if ( this.options.cover && ! this.options.lazyLoad ) { - const src = html.match( // ); + if (this.options.cover && !this.options.lazyLoad) { + const src = html.match(//); - if ( src && src[ 2 ] ) { - styles.background = `center/cover no-repeat url('${ src[ 2 ] }')`; + if (src && src[2] && styles) { + styles.background = `center/cover no-repeat url('${ src[2] }')`; } } } @@ -599,20 +606,21 @@ export class SplideRenderer { * * @param contents - An array with SlideContent objects. */ - private generateClones( contents: SlideContent[] ): void { - const { classes } = this.options; - const count = this.getCloneCount(); + private generateClones(contents: SlideContent[]): void { + const { classes = {} } = this.options; + const count = this.getCloneCount(); const slides = contents.slice(); - while ( slides.length < count ) { - push( slides, slides ); + while (slides.length < count) { + push(slides, slides); } - push( slides.slice( -count ).reverse(), slides.slice( 0, count ) ).forEach( ( content, index ) => { - const attrs = assign( {}, content.attrs, { class: `${ content.attrs.class } ${ classes.clone }` } ); - const clone = assign( {}, content, { attrs } ); - index < count ? contents.unshift( clone ) : contents.push( clone ); - } ); + push(slides.slice(-count).reverse(), slides.slice(0, count)).forEach((content, index) => { + const { attrs = {} } = content; + const attributes = assign({}, content.attrs || {}, { class: `${ attrs.class } ${ classes.clone }` }); + const clone = assign({}, content, { attrs: attributes }); + index < count ? contents.unshift(clone) : contents.push(clone); + }); } /** @@ -621,15 +629,15 @@ export class SplideRenderer { * @return A number of clones. */ private getCloneCount(): number { - if ( this.isLoop() ) { + if (this.isLoop()) { const { options } = this; - if ( options.clones ) { + if (options.clones) { return options.clones; } - const perPage = max( ...this.breakpoints.map( ( [ , options ] ) => options.perPage ) ); - return perPage * ( ( options.flickMaxPages || 1 ) + 1 ); + const perPage = max(...this.breakpoints.map(([, options]) => options.perPage || 1)); + return perPage * ((options.flickMaxPages || 1) + 1); } return 0; @@ -641,11 +649,13 @@ export class SplideRenderer { * @return The HTML for arrows. */ private renderArrows(): string { + const { classes = {} } = this.options; + let html = ''; - html += `

`; - html += this.renderArrow( true ); - html += this.renderArrow( false ); + html += `

`; + html += this.renderArrow(true); + html += this.renderArrow(false); html += `

`; return html; @@ -659,16 +669,16 @@ export class SplideRenderer { * * @return The HTML for the prev or next arrow. */ - private renderArrow( prev: boolean ): string { - const { classes, i18n } = this.options; + private renderArrow(prev: boolean): string { + const { classes = {}, i18n = {} } = this.options; const attrs = { - class : `${ classes.arrow } ${ prev ? classes.prev : classes.next }`, - type : 'button', + class: `${ classes.arrow } ${ prev ? classes.prev : classes.next }`, + type: 'button', ariaLabel: prev ? i18n.prev : i18n.next, }; - return `

Splide

Neptune

Saturn

Mars

Container

Slider

src & placeholder

srcset

Neptune

Saturn

Mars

${ heading }