fix(esl-carousel): fix navigation group indexes restriction for non-l…

…oop carousels
exadel-inc · Aug 21, 2024 · d5a84bf · d5a84bf
1 parent eb4b9c0
commit d5a84bf
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git a/src/modules/esl-carousel/core/esl-carousel.utils.ts b/src/modules/esl-carousel/core/esl-carousel.utils.ts
@@ -105,7 +105,7 @@ function resolveGroupIndex(indexStr: string | ESLCarouselNavIndex, cfg: ESLCarou
   if (value === 1 && normalize(cfg.activeIndex + cfg.count, cfg.size) > cfg.size - cfg.count) {
     return {index: cfg.size - cfg.count, direction: direction || ESLCarouselDirection.NEXT};
   }
-  const index = normalize(cfg.activeIndex + value * cfg.count, cfg.size);
+  const index = normalizeIndex(cfg.activeIndex + value * cfg.count, cfg);
   return {index, direction: direction || indexToDirection(index, cfg)};
 }
 

diff --git a/src/modules/esl-carousel/test/core/esl-carousel.utils.test.ts b/src/modules/esl-carousel/test/core/esl-carousel.utils.test.ts
@@ -251,10 +251,12 @@ describe('ESLCarousel: Nav Utils', () => {
 
     describe('group relative target', () => {
       test.each([
-        ['group: +1', {size: 5, count: 1, activeIndex: 2}, 3],
-        ['group: +1', {size: 5, count: 2, activeIndex: 2}, 3],
-        ['group: -1', {size: 5, count: 1, activeIndex: 2}, 1],
-        ['group: -1', {size: 5, count: 2, activeIndex: 2}, 0]
+        ['group: +1', {size: 5, count: 1, activeIndex: 2, loop: true}, 3],
+        ['group: +1', {size: 5, count: 2, activeIndex: 2, loop: true}, 3],
+        ['group: -1', {size: 5, count: 1, activeIndex: 2, loop: true}, 1],
+        ['group: -1', {size: 5, count: 2, activeIndex: 2, loop: true}, 0],
+        ['group: +1', {size: 5, count: 2, activeIndex: 4, loop: false}, 3],
+        ['group: -1', {size: 5, count: 1, activeIndex: 0, loop: false}, 0],
       ])(
         '(target = %s, cfg = %p) = %d',
         (target: ESLCarouselSlideTarget, cfg: ESLCarouselState, result: number) => expect(toIndex(target, cfg).index).toBe(result)
@@ -263,17 +265,20 @@ describe('ESLCarousel: Nav Utils', () => {
 
     describe('group relative short target', () => {
       test.each([
-        ['group: next', {size: 5, count: 1, activeIndex: 2}, 3],
-        ['group: next', {size: 5, count: 2, activeIndex: 2}, 3],
-        ['group: next', {size: 5, count: 1, activeIndex: 4}, 0],
-        ['group: next', {size: 5, count: 2, activeIndex: 4}, 1],
-        ['group: next', {size: 5, count: 3, activeIndex: 0}, 2],
+        ['group: next', {size: 5, count: 1, activeIndex: 2, loop: true}, 3],
+        ['group: next', {size: 5, count: 2, activeIndex: 2, loop: true}, 3],
+        ['group: next', {size: 5, count: 1, activeIndex: 4, loop: false}, 4],
+        ['group: next', {size: 5, count: 1, activeIndex: 4, loop: true}, 0],
+        ['group: next', {size: 5, count: 2, activeIndex: 4, loop: true}, 1],
+        ['group: next', {size: 5, count: 3, activeIndex: 0, loop: true}, 2],
 
-        ['group: prev', {size: 5, count: 1, activeIndex: 2}, 1],
-        ['group: prev', {size: 5, count: 2, activeIndex: 2}, 0],
-        ['group: prev', {size: 5, count: 1, activeIndex: 0}, 4],
-        ['group: prev', {size: 5, count: 3, activeIndex: 1}, 0],
-        ['group: prev', {size: 5, count: 3, activeIndex: 4}, 1]
+        ['group: prev', {size: 5, count: 1, activeIndex: 2, loop: true}, 1],
+        ['group: prev', {size: 5, count: 2, activeIndex: 2, loop: true}, 0],
+        ['group: prev', {size: 5, count: 1, activeIndex: 0, loop: false}, 0],
+        ['group: prev', {size: 5, count: 1, activeIndex: 0, loop: true}, 4],
+        ['group: prev', {size: 5, count: 3, activeIndex: 1, loop: false}, 0],
+        ['group: prev', {size: 5, count: 3, activeIndex: 1, loop: true}, 0],
+        ['group: prev', {size: 5, count: 3, activeIndex: 4, loop: true}, 1]
       ])(
         '(target = %s, cfg = %p) = %d',
         (target: ESLCarouselSlideTarget, cfg: ESLCarouselState, result: number) => expect(toIndex(target, cfg).index).toBe(result)
@@ -291,7 +296,16 @@ describe('ESLCarousel: Nav Utils', () => {
       ['next', {activeIndex: 0, size: 5, count: 1, loop: false}],
       ['prev', {activeIndex: 4, size: 5, count: 1, loop: false}],
       ['next', {activeIndex: 2, size: 5, count: 1, loop: false}],
-      ['prev', {activeIndex: 2, size: 5, count: 1, loop: false}]
+      ['prev', {activeIndex: 2, size: 5, count: 1, loop: false}],
+      // Group cases
+      ['group: next', {activeIndex: 0, size: 5, count: 2, loop: true}],
+      ['group: prev', {activeIndex: 0, size: 5, count: 2, loop: true}],
+      ['group: next', {activeIndex: 4, size: 5, count: 2, loop: true}],
+      ['group: prev', {activeIndex: 4, size: 5, count: 2, loop: true}],
+      // Non loop case with free space
+      ['group: next', {activeIndex: 0, size: 5, count: 2, loop: false}],
+      ['group: prev', {activeIndex: 2, size: 5, count: 2, loop: false}],
+      ['group: prev', {activeIndex: 4, size: 5, count: 2, loop: false}]
     ])(
       'Target %s is allowed for %p configuration',
       (target: ESLCarouselSlideTarget, cfg: ESLCarouselState) => expect(canNavigate(target, cfg)).toBe(true)
@@ -314,7 +328,10 @@ describe('ESLCarousel: Nav Utils', () => {
       ['0', {activeIndex: 0, size: 5, count: 1, loop: false}],
       ['0', {activeIndex: 0, size: 5, count: 1, loop: true}],
       ['1', {activeIndex: 1, size: 5, count: 2, loop: false}],
-      ['1', {activeIndex: 1, size: 5, count: 2, loop: true}]
+      ['1', {activeIndex: 1, size: 5, count: 2, loop: true}],
+      // Group cases with no loop
+      ['group: next', {activeIndex: 4, size: 5, count: 2, loop: false}],
+      ['group: prev', {activeIndex: 0, size: 5, count: 2, loop: false}]
     ])(
       'Target %s is not allowed for %p configuration',
       (target: ESLCarouselSlideTarget, cfg: ESLCarouselState) => expect(canNavigate(target, cfg)).toBe(false)