Merge pull request #595 from davidjerleke/feature/#594

Replace option `align:number` with a callback
davidjerleke · Oct 11, 2023 · 39dc78b · 39dc78b
2 parents 3e6d9f0 + 4d7f79b
commit 39dc78b
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 29 deletions.
diff --git a/packages/embla-carousel-docs/src/content/pages/api/options.mdx b/packages/embla-carousel-docs/src/content/pages/api/options.mdx
@@ -141,10 +141,10 @@ Setting this to `false` will not activate or deactivate the carousel. Useful whe
 
 ### align
 
-Type: <BrandPrimaryText>`string | number`</BrandPrimaryText>  
+Type: <BrandPrimaryText>`string | (viewSize: number, snapSize: number, index: number) => number`</BrandPrimaryText>  
 Default: <BrandSecondaryText>`center`</BrandSecondaryText>
 
-Align the slides relative to the carousel viewport. Use one of the predefined alignments `start`, `center` or `end`. Alternatively, provide a number between `0 - 1` to align the slides, where **0.5 equals 50%**.
+Align the slides relative to the carousel viewport. Use one of the predefined alignments `start`, `center` or `end`. Alternatively, provide your own callback to fully customize the alignment.
 
 ---
 

diff --git a/packages/embla-carousel/src/__tests__/align.test.ts b/packages/embla-carousel/src/__tests__/align.test.ts
@@ -48,7 +48,7 @@ describe('➡️  Align - Horizontal LTR', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [100, -700, -1100, -1300, -1800]
@@ -94,7 +94,7 @@ describe('➡️  Align - Horizontal LTR', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [90, -730, -1150, -1370, -1890]
@@ -143,7 +143,7 @@ describe('➡️  Align - Horizontal RTL', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [100, -700, -1100, -1300, -1800]
@@ -190,7 +190,7 @@ describe('➡️  Align - Horizontal RTL', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [90, -730, -1150, -1370, -1890]
@@ -239,7 +239,7 @@ describe('➡️  Align - Vertical', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [100, -700, -1100, -1300, -1800]
@@ -286,7 +286,7 @@ describe('➡️  Align - Vertical', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [90, -730, -1150, -1370, -1890]

diff --git a/packages/embla-carousel/src/__tests__/containScroll.test.ts b/packages/embla-carousel/src/__tests__/containScroll.test.ts
@@ -49,7 +49,7 @@ describe('➡️  ContainScroll - Horizontal LTR', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [0, -200, -350, -600, -660]
@@ -96,7 +96,7 @@ describe('➡️  ContainScroll - Horizontal LTR', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [0, -30, -250, -420, -690, -840, -860]
@@ -145,7 +145,7 @@ describe('➡️  ContainScroll - Horizontal LTR', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [
@@ -195,7 +195,7 @@ describe('➡️  ContainScroll - Horizontal LTR', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [
@@ -245,7 +245,7 @@ describe('➡️  ContainScroll - Horizontal RTL', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [0, -200, -350, -600, -660]
@@ -292,7 +292,7 @@ describe('➡️  ContainScroll - Horizontal RTL', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [0, -30, -250, -420, -690, -840, -860]
@@ -341,7 +341,7 @@ describe('➡️  ContainScroll - Horizontal RTL', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [
@@ -391,7 +391,7 @@ describe('➡️  ContainScroll - Horizontal RTL', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [
@@ -441,7 +441,7 @@ describe('➡️  ContainScroll - Vertical', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [0, -200, -350, -600, -660]
@@ -527,7 +527,7 @@ describe('➡️  ContainScroll - Vertical', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [
@@ -577,7 +577,7 @@ describe('➡️  ContainScroll - Vertical', () => {
     })
 
     test('Custom', () => {
-      emblaApi.reInit({ align: 0.1 })
+      emblaApi.reInit({ align: (viewSize) => viewSize * 0.1 })
 
       const engine = emblaApi.internalEngine()
       const expectedScrollSnaps = [

diff --git a/packages/embla-carousel/src/components/Alignment.ts b/packages/embla-carousel/src/components/Alignment.ts
@@ -1,9 +1,13 @@
-import { isNumber } from './utils'
+import { isString } from './utils'
 
-export type AlignmentOptionType = 'start' | 'center' | 'end' | number
+export type AlignmentOptionType =
+  | 'start'
+  | 'center'
+  | 'end'
+  | ((viewSize: number, snapSize: number, index: number) => number)
 
 export type AlignmentType = {
-  measure: (n: number) => number
+  measure: (n: number, index: number) => number
 }
 
 export function Alignment(
@@ -24,13 +28,9 @@ export function Alignment(
     return viewSize - n
   }
 
-  function percent(): number {
-    return viewSize * Number(align)
-  }
-
-  function measure(n: number): number {
-    if (isNumber(align)) return percent()
-    return predefined[align](n)
+  function measure(n: number, index: number): number {
+    if (isString(align)) return predefined[align](n)
+    return align(viewSize, n, index)
   }
 
   const self: AlignmentType = {