Skip to content

Commit b14d83b

Browse files
NaotoshiFujitaNaotoshiFujita
committed
Bug Fix: Failed to sync indices when using arrow keys (#489).
1 parent 544f974 commit b14d83b

File tree

23 files changed

+201
-129
lines changed

23 files changed

+201
-129
lines changed

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

Lines changed: 1 addition & 1 deletion
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: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*!
22
* Splide.js
3-
* Version : 3.2.5
3+
* Version : 3.2.6
44
* License : MIT
55
* Copyright: 2021 Naotoshi Fujita
66
*/
@@ -1352,11 +1352,7 @@ function Controller(Splide2, Components2, options) {
13521352
index = getPrev(true);
13531353
}
13541354
} else {
1355-
if (isLoop) {
1356-
index = clamp(control, -perPage, slideCount + perPage - 1);
1357-
} else {
1358-
index = clamp(control, 0, getEnd());
1359-
}
1355+
index = isLoop ? control : clamp(control, 0, getEnd());
13601356
}
13611357
return index;
13621358
}
@@ -1897,12 +1893,11 @@ function Keyboard(Splide2, Components2, options) {
18971893
const { root } = Components2.Elements;
18981894
const { resolve } = Components2.Direction;
18991895
let target;
1896+
let disabled;
19001897
function mount() {
19011898
init();
1902-
on(EVENT_UPDATED, () => {
1903-
destroy();
1904-
init();
1905-
});
1899+
on(EVENT_UPDATED, onUpdated);
1900+
on(EVENT_MOVE, onMove);
19061901
}
19071902
function init() {
19081903
const { keyboard = "global" } = options;
@@ -1922,13 +1917,25 @@ function Keyboard(Splide2, Components2, options) {
19221917
removeAttribute(target, TAB_INDEX);
19231918
}
19241919
}
1920+
function onMove() {
1921+
disabled = true;
1922+
nextTick(() => {
1923+
disabled = false;
1924+
});
1925+
}
1926+
function onUpdated() {
1927+
destroy();
1928+
init();
1929+
}
19251930
function onKeydown(e) {
1926-
const { key } = e;
1927-
const normalizedKey = includes(IE_ARROW_KEYS, key) ? `Arrow${key}` : key;
1928-
if (normalizedKey === resolve("ArrowLeft")) {
1929-
Splide2.go("<");
1930-
} else if (normalizedKey === resolve("ArrowRight")) {
1931-
Splide2.go(">");
1931+
if (!disabled) {
1932+
const { key } = e;
1933+
const normalizedKey = includes(IE_ARROW_KEYS, key) ? `Arrow${key}` : key;
1934+
if (normalizedKey === resolve("ArrowLeft")) {
1935+
Splide2.go("<");
1936+
} else if (normalizedKey === resolve("ArrowRight")) {
1937+
Splide2.go(">");
1938+
}
19321939
}
19331940
}
19341941
return {
@@ -2120,10 +2127,12 @@ function Sync(Splide2, Components2, options) {
21202127
function sync() {
21212128
const processed = [];
21222129
splides.concat(Splide2).forEach((splide, index, instances) => {
2123-
EventInterface(splide).on(EVENT_MOVE, (index2, prev, dest) => {
2130+
const { on } = EventInterface(splide);
2131+
on(EVENT_MOVE, (index2, prev, dest) => {
21242132
instances.forEach((instance) => {
21252133
if (instance !== splide && !includes(processed, splide)) {
21262134
processed.push(instance);
2135+
instance.Components.Move.cancel();
21272136
instance.go(instance.is(LOOP) ? dest : index2);
21282137
}
21292138
});
@@ -2448,7 +2457,8 @@ class Style {
24482457
buildSelectors(selectors) {
24492458
let css = "";
24502459
forOwn(selectors, (styles, selector) => {
2451-
css += `#${this.id} ${selector} {`;
2460+
selector = `#${this.id} ${selector}`.trim();
2461+
css += `${selector} {`;
24522462
forOwn(styles, (value, prop) => {
24532463
if (value || value === 0) {
24542464
css += `${prop}: ${value};`;
@@ -2528,20 +2538,18 @@ class SplideRenderer {
25282538
const selector = `.${CLASS_LIST}`;
25292539
this.breakpoints.forEach(([width, options]) => {
25302540
Style2.rule(selector, "transform", this.buildTranslate(options), width);
2541+
if (!this.cssSlideHeight(options)) {
2542+
Style2.rule(selector, "aspect-ratio", this.cssAspectRatio(options), width);
2543+
}
25312544
});
25322545
}
25332546
registerSlideStyles() {
25342547
const { Style: Style2 } = this;
25352548
const selector = `.${CLASS_SLIDE}`;
25362549
this.breakpoints.forEach(([width, options]) => {
25372550
Style2.rule(selector, "width", this.cssSlideWidth(options), width);
2551+
Style2.rule(selector, "height", this.cssSlideHeight(options) || "100%", width);
25382552
Style2.rule(selector, this.resolve("marginRight"), unit(options.gap) || "0px", width);
2539-
const height = this.cssSlideHeight(options);
2540-
if (height) {
2541-
Style2.rule(selector, "height", height, width);
2542-
} else {
2543-
Style2.rule(selector, "padding-top", this.cssSlidePadding(options), width);
2544-
}
25452553
Style2.rule(`${selector} > img`, "display", options.cover ? "none" : "inline", width);
25462554
});
25472555
}
@@ -2626,9 +2634,9 @@ class SplideRenderer {
26262634
const gap = unit(options.gap);
26272635
return `calc((100%${gap && ` + ${gap}`})/${options.perPage || 1}${gap && ` - ${gap}`})`;
26282636
}
2629-
cssSlidePadding(options) {
2637+
cssAspectRatio(options) {
26302638
const { heightRatio } = options;
2631-
return heightRatio ? `${heightRatio * 100}%` : "";
2639+
return heightRatio ? `${1 / heightRatio}` : "";
26322640
}
26332641
buildCssValue(value, unit2) {
26342642
return `${value}${unit2}`;

‎dist/js/splide.esm.js‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*!
22
* Splide.js
3-
* Version : 3.2.5
3+
* Version : 3.2.6
44
* License : MIT
55
* Copyright: 2021 Naotoshi Fujita
66
*/
@@ -1348,11 +1348,7 @@ function Controller(Splide2, Components2, options) {
13481348
index = getPrev(true);
13491349
}
13501350
} else {
1351-
if (isLoop) {
1352-
index = clamp(control, -perPage, slideCount + perPage - 1);
1353-
} else {
1354-
index = clamp(control, 0, getEnd());
1355-
}
1351+
index = isLoop ? control : clamp(control, 0, getEnd());
13561352
}
13571353
return index;
13581354
}
@@ -1893,12 +1889,11 @@ function Keyboard(Splide2, Components2, options) {
18931889
const { root } = Components2.Elements;
18941890
const { resolve } = Components2.Direction;
18951891
let target;
1892+
let disabled;
18961893
function mount() {
18971894
init();
1898-
on(EVENT_UPDATED, () => {
1899-
destroy();
1900-
init();
1901-
});
1895+
on(EVENT_UPDATED, onUpdated);
1896+
on(EVENT_MOVE, onMove);
19021897
}
19031898
function init() {
19041899
const { keyboard = "global" } = options;
@@ -1918,13 +1913,25 @@ function Keyboard(Splide2, Components2, options) {
19181913
removeAttribute(target, TAB_INDEX);
19191914
}
19201915
}
1916+
function onMove() {
1917+
disabled = true;
1918+
nextTick(() => {
1919+
disabled = false;
1920+
});
1921+
}
1922+
function onUpdated() {
1923+
destroy();
1924+
init();
1925+
}
19211926
function onKeydown(e) {
1922-
const { key } = e;
1923-
const normalizedKey = includes(IE_ARROW_KEYS, key) ? `Arrow${key}` : key;
1924-
if (normalizedKey === resolve("ArrowLeft")) {
1925-
Splide2.go("<");
1926-
} else if (normalizedKey === resolve("ArrowRight")) {
1927-
Splide2.go(">");
1927+
if (!disabled) {
1928+
const { key } = e;
1929+
const normalizedKey = includes(IE_ARROW_KEYS, key) ? `Arrow${key}` : key;
1930+
if (normalizedKey === resolve("ArrowLeft")) {
1931+
Splide2.go("<");
1932+
} else if (normalizedKey === resolve("ArrowRight")) {
1933+
Splide2.go(">");
1934+
}
19281935
}
19291936
}
19301937
return {
@@ -2116,10 +2123,12 @@ function Sync(Splide2, Components2, options) {
21162123
function sync() {
21172124
const processed = [];
21182125
splides.concat(Splide2).forEach((splide, index, instances) => {
2119-
EventInterface(splide).on(EVENT_MOVE, (index2, prev, dest) => {
2126+
const { on } = EventInterface(splide);
2127+
on(EVENT_MOVE, (index2, prev, dest) => {
21202128
instances.forEach((instance) => {
21212129
if (instance !== splide && !includes(processed, splide)) {
21222130
processed.push(instance);
2131+
instance.Components.Move.cancel();
21232132
instance.go(instance.is(LOOP) ? dest : index2);
21242133
}
21252134
});
@@ -2444,7 +2453,8 @@ class Style {
24442453
buildSelectors(selectors) {
24452454
let css = "";
24462455
forOwn(selectors, (styles, selector) => {
2447-
css += `#${this.id} ${selector} {`;
2456+
selector = `#${this.id} ${selector}`.trim();
2457+
css += `${selector} {`;
24482458
forOwn(styles, (value, prop) => {
24492459
if (value || value === 0) {
24502460
css += `${prop}: ${value};`;
@@ -2524,20 +2534,18 @@ class SplideRenderer {
25242534
const selector = `.${CLASS_LIST}`;
25252535
this.breakpoints.forEach(([width, options]) => {
25262536
Style2.rule(selector, "transform", this.buildTranslate(options), width);
2537+
if (!this.cssSlideHeight(options)) {
2538+
Style2.rule(selector, "aspect-ratio", this.cssAspectRatio(options), width);
2539+
}
25272540
});
25282541
}
25292542
registerSlideStyles() {
25302543
const { Style: Style2 } = this;
25312544
const selector = `.${CLASS_SLIDE}`;
25322545
this.breakpoints.forEach(([width, options]) => {
25332546
Style2.rule(selector, "width", this.cssSlideWidth(options), width);
2547+
Style2.rule(selector, "height", this.cssSlideHeight(options) || "100%", width);
25342548
Style2.rule(selector, this.resolve("marginRight"), unit(options.gap) || "0px", width);
2535-
const height = this.cssSlideHeight(options);
2536-
if (height) {
2537-
Style2.rule(selector, "height", height, width);
2538-
} else {
2539-
Style2.rule(selector, "padding-top", this.cssSlidePadding(options), width);
2540-
}
25412549
Style2.rule(`${selector} > img`, "display", options.cover ? "none" : "inline", width);
25422550
});
25432551
}
@@ -2622,9 +2630,9 @@ class SplideRenderer {
26222630
const gap = unit(options.gap);
26232631
return `calc((100%${gap && ` + ${gap}`})/${options.perPage || 1}${gap && ` - ${gap}`})`;
26242632
}
2625-
cssSlidePadding(options) {
2633+
cssAspectRatio(options) {
26262634
const { heightRatio } = options;
2627-
return heightRatio ? `${heightRatio * 100}%` : "";
2635+
return heightRatio ? `${1 / heightRatio}` : "";
26282636
}
26292637
buildCssValue(value, unit2) {
26302638
return `${value}${unit2}`;

0 commit comments

Comments
 (0)