Skip to content

Commit 870d98d

Browse files
NaotoshiFujitaNaotoshiFujita
committed
Add the is-active class to clones.
1 parent 34675bc commit 870d98d

27 files changed

+139
-108
lines changed

‎dist/js/splide-renderer.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/splide.cjs.js‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*!
22
* Splide.js
3-
* Version : 3.5.3
3+
* Version : 3.5.4
44
* License : MIT
55
* Copyright: 2021 Naotoshi Fujita
66
*/
@@ -375,6 +375,7 @@ const EVENT_MOUNTED = "mounted";
375375
const EVENT_READY = "ready";
376376
const EVENT_MOVE = "move";
377377
const EVENT_MOVED = "moved";
378+
const EVENT_SHIFTED = "shifted";
378379
const EVENT_CLICK = "click";
379380
const EVENT_ACTIVE = "active";
380381
const EVENT_INACTIVE = "inactive";
@@ -790,12 +791,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
790791
slide.id = `${root.id}-slide${pad(index + 1)}`;
791792
}
792793
bind(slide, "click keydown", (e) => {
793-
emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e);
794+
emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e);
794795
});
795-
on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
796-
on(EVENT_NAVIGATION_MOUNTED, initNavigation.bind(this));
796+
on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_SHIFTED, EVENT_MOVED, EVENT_SCROLLED], update);
797+
on(EVENT_NAVIGATION_MOUNTED, initNavigation);
797798
if (updateOnMove) {
798-
on(EVENT_MOVE, onMove.bind(this));
799+
on(EVENT_MOVE, onMove);
799800
}
800801
}
801802
function destroy() {
@@ -812,21 +813,18 @@ function Slide$1(Splide2, index, slideIndex, slide) {
812813
setAttribute(slide, ARIA_LABEL, label);
813814
setAttribute(slide, ARIA_CONTROLS, controls);
814815
setAttribute(slide, ROLE, "menuitem");
815-
updateActivity.call(this, isActive());
816+
updateActivity(isActive());
816817
}
817-
function onMove(next, prev, dest) {
818+
function onMove() {
818819
if (!destroyed) {
819-
update.call(this);
820-
if (dest === index) {
821-
updateActivity.call(this, true);
822-
}
820+
update();
823821
}
824822
}
825823
function update() {
826824
if (!destroyed) {
827825
const { index: currIndex } = Splide2;
828-
updateActivity.call(this, isActive());
829-
updateVisibility.call(this, isVisible());
826+
updateActivity(isActive());
827+
updateVisibility(isVisible());
830828
toggleClass(slide, CLASS_PREV, index === currIndex - 1);
831829
toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
832830
}
@@ -837,7 +835,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
837835
if (isNavigation) {
838836
setAttribute(slide, ARIA_CURRENT, active || null);
839837
}
840-
emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this);
838+
emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
841839
}
842840
}
843841
function updateVisibility(visible) {
@@ -851,14 +849,15 @@ function Slide$1(Splide2, index, slideIndex, slide) {
851849
}
852850
if (visible !== hasClass(slide, CLASS_VISIBLE)) {
853851
toggleClass(slide, CLASS_VISIBLE, visible);
854-
emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this);
852+
!isClone && emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
855853
}
856854
}
857855
function style$1(prop, value, useContainer) {
858856
style(useContainer && container || slide, prop, value);
859857
}
860858
function isActive() {
861-
return Splide2.index === index;
859+
const { index: curr } = Splide2;
860+
return curr === index || options.cloneStatus && curr === slideIndex;
862861
}
863862
function isVisible() {
864863
if (Splide2.is(FADE)) {
@@ -877,7 +876,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
877876
}
878877
return diff <= distance;
879878
}
880-
return {
879+
const self = {
881880
index,
882881
slideIndex,
883882
slide,
@@ -889,6 +888,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
889888
style: style$1,
890889
isWithin
891890
};
891+
return self;
892892
}
893893

894894
function Slides(Splide2, Components2, options) {
@@ -1203,6 +1203,7 @@ function Move(Splide2, Components2, options) {
12031203
if (dest !== index) {
12041204
Transition.cancel();
12051205
translate(shift(position, dest > index), true);
1206+
emit(EVENT_SHIFTED);
12061207
}
12071208
set(MOVING);
12081209
emit(EVENT_MOVE, index, prev, dest);
@@ -1222,7 +1223,9 @@ function Move(Splide2, Components2, options) {
12221223
}
12231224
function translate(position, preventLoop) {
12241225
if (!Splide2.is(FADE)) {
1225-
list.style.transform = `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`;
1226+
const destination = preventLoop ? position : loop(position);
1227+
list.style.transform = `translate${resolve("X")}(${destination}px)`;
1228+
position !== destination && emit(EVENT_SHIFTED);
12261229
}
12271230
}
12281231
function loop(position) {
@@ -1390,7 +1393,7 @@ function Controller(Splide2, Components2, options) {
13901393
dest = toIndex(toPage(dest));
13911394
} else {
13921395
if (isLoop) {
1393-
dest = perMove ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
1396+
dest = perMove || hasFocus() ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
13941397
} else if (options.rewind) {
13951398
dest = dest < 0 ? end : 0;
13961399
} else {
@@ -2258,6 +2261,7 @@ const DEFAULTS = {
22582261
speed: 400,
22592262
waitForTransition: true,
22602263
perPage: 1,
2264+
cloneStatus: true,
22612265
arrows: true,
22622266
pagination: true,
22632267
interval: 5e3,
@@ -2880,6 +2884,7 @@ exports.EVENT_RESIZE = EVENT_RESIZE;
28802884
exports.EVENT_RESIZED = EVENT_RESIZED;
28812885
exports.EVENT_SCROLL = EVENT_SCROLL;
28822886
exports.EVENT_SCROLLED = EVENT_SCROLLED;
2887+
exports.EVENT_SHIFTED = EVENT_SHIFTED;
28832888
exports.EVENT_SLIDE_KEYDOWN = EVENT_SLIDE_KEYDOWN;
28842889
exports.EVENT_UPDATED = EVENT_UPDATED;
28852890
exports.EVENT_VISIBLE = EVENT_VISIBLE;

‎dist/js/splide.esm.js‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*!
22
* Splide.js
3-
* Version : 3.5.3
3+
* Version : 3.5.4
44
* License : MIT
55
* Copyright: 2021 Naotoshi Fujita
66
*/
@@ -371,6 +371,7 @@ const EVENT_MOUNTED = "mounted";
371371
const EVENT_READY = "ready";
372372
const EVENT_MOVE = "move";
373373
const EVENT_MOVED = "moved";
374+
const EVENT_SHIFTED = "shifted";
374375
const EVENT_CLICK = "click";
375376
const EVENT_ACTIVE = "active";
376377
const EVENT_INACTIVE = "inactive";
@@ -786,12 +787,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
786787
slide.id = `${root.id}-slide${pad(index + 1)}`;
787788
}
788789
bind(slide, "click keydown", (e) => {
789-
emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e);
790+
emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e);
790791
});
791-
on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
792-
on(EVENT_NAVIGATION_MOUNTED, initNavigation.bind(this));
792+
on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_SHIFTED, EVENT_MOVED, EVENT_SCROLLED], update);
793+
on(EVENT_NAVIGATION_MOUNTED, initNavigation);
793794
if (updateOnMove) {
794-
on(EVENT_MOVE, onMove.bind(this));
795+
on(EVENT_MOVE, onMove);
795796
}
796797
}
797798
function destroy() {
@@ -808,21 +809,18 @@ function Slide$1(Splide2, index, slideIndex, slide) {
808809
setAttribute(slide, ARIA_LABEL, label);
809810
setAttribute(slide, ARIA_CONTROLS, controls);
810811
setAttribute(slide, ROLE, "menuitem");
811-
updateActivity.call(this, isActive());
812+
updateActivity(isActive());
812813
}
813-
function onMove(next, prev, dest) {
814+
function onMove() {
814815
if (!destroyed) {
815-
update.call(this);
816-
if (dest === index) {
817-
updateActivity.call(this, true);
818-
}
816+
update();
819817
}
820818
}
821819
function update() {
822820
if (!destroyed) {
823821
const { index: currIndex } = Splide2;
824-
updateActivity.call(this, isActive());
825-
updateVisibility.call(this, isVisible());
822+
updateActivity(isActive());
823+
updateVisibility(isVisible());
826824
toggleClass(slide, CLASS_PREV, index === currIndex - 1);
827825
toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
828826
}
@@ -833,7 +831,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
833831
if (isNavigation) {
834832
setAttribute(slide, ARIA_CURRENT, active || null);
835833
}
836-
emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this);
834+
emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
837835
}
838836
}
839837
function updateVisibility(visible) {
@@ -847,14 +845,15 @@ function Slide$1(Splide2, index, slideIndex, slide) {
847845
}
848846
if (visible !== hasClass(slide, CLASS_VISIBLE)) {
849847
toggleClass(slide, CLASS_VISIBLE, visible);
850-
emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this);
848+
!isClone && emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
851849
}
852850
}
853851
function style$1(prop, value, useContainer) {
854852
style(useContainer && container || slide, prop, value);
855853
}
856854
function isActive() {
857-
return Splide2.index === index;
855+
const { index: curr } = Splide2;
856+
return curr === index || options.cloneStatus && curr === slideIndex;
858857
}
859858
function isVisible() {
860859
if (Splide2.is(FADE)) {
@@ -873,7 +872,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
873872
}
874873
return diff <= distance;
875874
}
876-
return {
875+
const self = {
877876
index,
878877
slideIndex,
879878
slide,
@@ -885,6 +884,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
885884
style: style$1,
886885
isWithin
887886
};
887+
return self;
888888
}
889889

890890
function Slides(Splide2, Components2, options) {
@@ -1199,6 +1199,7 @@ function Move(Splide2, Components2, options) {
11991199
if (dest !== index) {
12001200
Transition.cancel();
12011201
translate(shift(position, dest > index), true);
1202+
emit(EVENT_SHIFTED);
12021203
}
12031204
set(MOVING);
12041205
emit(EVENT_MOVE, index, prev, dest);
@@ -1218,7 +1219,9 @@ function Move(Splide2, Components2, options) {
12181219
}
12191220
function translate(position, preventLoop) {
12201221
if (!Splide2.is(FADE)) {
1221-
list.style.transform = `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`;
1222+
const destination = preventLoop ? position : loop(position);
1223+
list.style.transform = `translate${resolve("X")}(${destination}px)`;
1224+
position !== destination && emit(EVENT_SHIFTED);
12221225
}
12231226
}
12241227
function loop(position) {
@@ -1386,7 +1389,7 @@ function Controller(Splide2, Components2, options) {
13861389
dest = toIndex(toPage(dest));
13871390
} else {
13881391
if (isLoop) {
1389-
dest = perMove ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
1392+
dest = perMove || hasFocus() ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
13901393
} else if (options.rewind) {
13911394
dest = dest < 0 ? end : 0;
13921395
} else {
@@ -2254,6 +2257,7 @@ const DEFAULTS = {
22542257
speed: 400,
22552258
waitForTransition: true,
22562259
perPage: 1,
2260+
cloneStatus: true,
22572261
arrows: true,
22582262
pagination: true,
22592263
interval: 5e3,
@@ -2823,4 +2827,4 @@ class SplideRenderer {
28232827
}
28242828
}
28252829

2826-
export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBus, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };
2830+
export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBus, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };

0 commit comments

Comments
 (0)