Implement #39.

davidjerleke · May 16, 2024 · 8eca652 · 8eca652
1 parent 61c050c
commit 8eca652
Show file tree

Hide file tree

Showing 58 changed files with 1,042 additions and 130 deletions.
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "packages/embla-carousel-auto-scroll",
     "packages/embla-carousel-auto-height",
     "packages/embla-carousel-class-names",
+    "packages/embla-carousel-fade",
     "packages/embla-carousel-reactive-utils",
     "playgrounds/embla-carousel-playground-vanilla",
     "playgrounds/embla-carousel-playground-react",

diff --git a/packages/embla-carousel-auto-height/src/components/AutoHeight.ts b/packages/embla-carousel-auto-height/src/components/AutoHeight.ts
@@ -1,6 +1,5 @@
-import { defaultOptions, OptionsType } from './Options'
+import { OptionsType } from './Options'
 import { CreatePluginType } from 'embla-carousel/components/Plugins'
-import { OptionsHandlerType } from 'embla-carousel/components/OptionsHandler'
 import { EmblaCarouselType, EmblaEventType } from 'embla-carousel'
 
 declare module 'embla-carousel/components/Plugins' {
@@ -14,22 +13,13 @@ export type AutoHeightType = CreatePluginType<{}, OptionsType>
 export type AutoHeightOptionsType = AutoHeightType['options']
 
 function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType {
-  let options: OptionsType
   let emblaApi: EmblaCarouselType
   let slideHeights: number[] = []
-  const heightEvents: EmblaEventType[] = ['select']
+  const heightEvents: EmblaEventType[] = ['select', 'slideFocus']
 
-  function init(
-    emblaApiInstance: EmblaCarouselType,
-    optionsHandler: OptionsHandlerType
-  ): void {
+  function init(emblaApiInstance: EmblaCarouselType): void {
     emblaApi = emblaApiInstance
 
-    const { mergeOptions, optionsAtMedia } = optionsHandler
-    const optionsBase = mergeOptions(defaultOptions, AutoHeight.globalOptions)
-    const allOptions = mergeOptions(optionsBase, userOptions)
-    options = optionsAtMedia(allOptions)
-
     const {
       options: { axis },
       slideRects
@@ -45,7 +35,9 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType {
 
   function destroy(): void {
     heightEvents.forEach((evt) => emblaApi.off(evt, setContainerHeight))
-    setContainerHeight(undefined, 'destroy')
+    const container = emblaApi.containerNode()
+    container.style.height = ''
+    if (!container.getAttribute('style')) container.removeAttribute('style')
   }
 
   function highestInView(): number {
@@ -57,13 +49,8 @@ function AutoHeight(userOptions: AutoHeightOptionsType = {}): AutoHeightType {
       .reduce((a, b) => Math.max(a, b), 0)
   }
 
-  function setContainerHeight(
-    _?: EmblaCarouselType,
-    evt?: EmblaEventType
-  ): void {
-    const height =
-      evt === 'destroy' ? options.destroyHeight : `${highestInView()}px`
-    emblaApi.containerNode().style.height = height
+  function setContainerHeight(): void {
+    emblaApi.containerNode().style.height = `${highestInView()}px`
   }
 
   const self: AutoHeightType = {

diff --git a/packages/embla-carousel-auto-height/src/components/Options.ts b/packages/embla-carousel-auto-height/src/components/Options.ts
@@ -1,11 +1,3 @@
 import { CreateOptionsType } from 'embla-carousel/components/Options'
 
-export type OptionsType = CreateOptionsType<{
-  destroyHeight: CSSStyleDeclaration['height']
-}>
-
-export const defaultOptions: OptionsType = {
-  active: true,
-  breakpoints: {},
-  destroyHeight: 'auto'
-}
+export type OptionsType = CreateOptionsType<{}>
diff --git a/packages/embla-carousel-docs/package.json b/packages/embla-carousel-docs/package.json
@@ -45,6 +45,7 @@
     "embla-carousel-auto-scroll": "8.0.4",
     "embla-carousel-autoplay": "8.0.4",
     "embla-carousel-class-names": "8.0.4",
+    "embla-carousel-fade": "8.0.4",
     "embla-carousel-react": "8.0.4",
     "focus-trap-react": "^8.10.0",
     "gatsby": "^5.13.3",

diff --git a/packages/embla-carousel-docs/src/components/Examples/Plugins/Fade.tsx b/packages/embla-carousel-docs/src/components/Examples/Plugins/Fade.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { EmblaOptionsType } from 'embla-carousel'
+import styled from 'styled-components'
+import { useInView } from 'react-intersection-observer'
+import CarouselFade from 'components/Sandbox/React/SandboxFilesSrc/Fade/EmblaCarousel'
+import { examplesDefaultWrapperStyles } from 'components/Examples/examplesWrapperStyles'
+import { examplesCarouselFadeStyles } from 'components/Examples/examplesCarouselStyles'
+import { arrayFromNumber } from 'utils/arrayFromNumber'
+import { SandboxSelection } from 'components/Sandbox/SandboxSelection'
+import { sandboxStaticSandboxes } from 'components/Sandbox/sandboxStatic'
+import { SandboxStaticSettingsType } from 'consts/sandbox'
+import { EXAMPLES_INTERSECTION_OPTIONS } from 'consts/examples'
+
+const ID = 'embla-carousel-fade'
+const SLIDES = arrayFromNumber(5)
+const OPTIONS: EmblaOptionsType = { loop: true, duration: 40 }
+const STYLES = examplesCarouselFadeStyles()
+
+const SANDBOX_CONFIG: SandboxStaticSettingsType = {
+  id: ID,
+  slides: SLIDES,
+  options: OPTIONS,
+  styles: STYLES
+}
+
+const SANDBOXES = sandboxStaticSandboxes(SANDBOX_CONFIG, 'Fade')
+
+const Wrapper = styled.div`
+  ${examplesDefaultWrapperStyles};
+
+  &.${ID} {
+    ${STYLES};
+  }
+`
+
+export const Fade = () => {
+  const [inViewRef, inView] = useInView(EXAMPLES_INTERSECTION_OPTIONS)
+
+  return (
+    <>
+      <SandboxSelection sandboxes={SANDBOXES} />
+      <Wrapper className={ID} ref={inViewRef}>
+        {inView ? <CarouselFade slides={SLIDES} options={OPTIONS} /> : null}
+      </Wrapper>
+    </>
+  )
+}
diff --git a/packages/embla-carousel-docs/src/components/Examples/examplesCarouselStyles.ts b/packages/embla-carousel-docs/src/components/Examples/examplesCarouselStyles.ts
@@ -332,7 +332,7 @@ export const THUMBS_STYLES = css`
   }
 `
 
-const PROGRESS_STYLES = css`
+export const PROGRESS_STYLES = css`
   .embla__progress {
     ${CAROUSEL_SLIDE_RADIUS_STYLES};
     ${CAROUSEL_BORDER_SHADOW_STYLES};
@@ -465,6 +465,12 @@ const CLASS_NAMES_STYLES = css`
   }
 `
 
+const FADE_STYLES = css`
+  .embla__slide__img {
+    user-select: none;
+  }
+`
+
 export const INFINITE_SCROLL_STYLES = css`
   .embla-infinite-scroll {
     position: relative;
@@ -854,6 +860,25 @@ export const examplesCarouselClassNamesStyles = (
   )
 }
 
+export const examplesCarouselFadeStyles = (
+  slideSize?: string,
+  spacingSize?: string,
+  axis?: EmblaOptionsType['axis']
+): string => {
+  return examplesCarouselDefaultStyles(
+    slideSize,
+    spacingSize,
+    axis,
+    styledComponentsStylesToString(
+      IMAGE_STYLES,
+      CONTROLS_STYLES,
+      ARROWS_STYLES,
+      DOTS_STYLES,
+      FADE_STYLES
+    )
+  )
+}
+
 export const examplesCarouselLazyLoadStyles = (
   slideSize?: string,
   spacingSize?: string,

diff --git a/packages/embla-carousel-docs/src/components/Footer/FooterLinks.tsx b/packages/embla-carousel-docs/src/components/Footer/FooterLinks.tsx
@@ -15,6 +15,7 @@ const FooterLinksWrapper = styled.ul`
   ${createGapStyles(LINK_SPACING, '', 'li')};
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
 `
 
 const Link = styled(LinkBare)`

diff --git a/.../components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselArrowButtons.tsx b/.../components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselArrowButtons.tsx
@@ -55,6 +55,7 @@ export const usePrevNextButtons = (
     onSelect(emblaApi)
     emblaApi.on('reInit', onSelect)
     emblaApi.on('select', onSelect)
+    emblaApi.on('slideFocus', onSelect)
   }, [emblaApi, onSelect])
 
   return {

diff --git a/...src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx b/...src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx
@@ -51,6 +51,7 @@ export const useDotButton = (
     emblaApi.on('reInit', onInit)
     emblaApi.on('reInit', onSelect)
     emblaApi.on('select', onSelect)
+    emblaApi.on('slideFocus', onSelect)
   }, [emblaApi, onInit, onSelect])
 
   return {

diff --git a/...-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselArrowButtons.tsx b/...-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselArrowButtons.tsx
@@ -41,8 +41,10 @@ export const usePrevNextButtons = (
     if (!emblaApi) return
 
     onSelect(emblaApi)
-    emblaApi.on('reInit', onSelect)
-    emblaApi.on('select', onSelect)
+    emblaApi
+      .on('reInit', onSelect)
+      .on('select', onSelect)
+      .on('slideFocus', onSelect)
   }, [emblaApi, onSelect])
 
   return {

diff --git a/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselDotButton.tsx b/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselDotButton.tsx
@@ -41,9 +41,12 @@ export const useDotButton = (
 
     onInit(emblaApi)
     onSelect(emblaApi)
-    emblaApi.on('reInit', onInit)
-    emblaApi.on('reInit', onSelect)
-    emblaApi.on('select', onSelect)
+
+    emblaApi
+      .on('reInit', onInit)
+      .on('reInit', onSelect)
+      .on('select', onSelect)
+      .on('slideFocus', onSelect)
   }, [emblaApi, onInit, onSelect])
 
   return {

diff --git a/...s/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Fade/EmblaCarousel.tsx b/...s/embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Fade/EmblaCarousel.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import { EmblaOptionsType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
+import Fade from 'embla-carousel-fade'
+import {
+  NextButton,
+  PrevButton,
+  usePrevNextButtons
+} from '../EmblaCarouselArrowButtons'
+import { DotButton, useDotButton } from '../EmblaCarouselDotButton'
+import { sandboxImages } from 'components/Sandbox/sandboxImages'
+
+type PropType = {
+  slides: number[]
+  options?: EmblaOptionsType
+}
+
+const EmblaCarousel: React.FC<PropType> = (props) => {
+  const { slides, options } = props
+  const [emblaRef, emblaApi] = useEmblaCarousel(options, [Fade()])
+
+  const { selectedIndex, scrollSnaps, onDotButtonClick } =
+    useDotButton(emblaApi)
+
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick
+  } = usePrevNextButtons(emblaApi)
+
+  return (
+    <div className="embla">
+      <div className="embla__viewport" ref={emblaRef}>
+        <div className="embla__container">
+          {slides.map((index) => (
+            <div className="embla__slide" key={index}>
+              <img
+                className="embla__slide__img"
+                src={sandboxImages(index)}
+                alt="Your alt text"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="embla__controls">
+        <div className="embla__buttons">
+          <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+          <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+        </div>
+
+        <div className="embla__dots">
+          {scrollSnaps.map((_, index) => (
+            <DotButton
+              key={index}
+              onClick={() => onDotButtonClick(index)}
+              className={'embla__dot'.concat(
+                index === selectedIndex ? ' embla__dot--selected' : ''
+              )}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default EmblaCarousel
diff --git a/...mbla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Opacity/EmblaCarousel.tsx b/...mbla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Opacity/EmblaCarousel.tsx
@@ -91,6 +91,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       .on('reInit', setTweenFactor)
       .on('reInit', tweenOpacity)
       .on('scroll', tweenOpacity)
+      .on('slideFocus', tweenOpacity)
   }, [emblaApi, tweenOpacity])
 
   return (

diff --git a/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Parallax/EmblaCarousel.tsx b/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Parallax/EmblaCarousel.tsx
@@ -98,6 +98,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       .on('reInit', setTweenFactor)
       .on('reInit', tweenParallax)
       .on('scroll', tweenParallax)
+      .on('slideFocus', tweenParallax)
   }, [emblaApi, tweenParallax])
 
   return (

diff --git a/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Progress/EmblaCarousel.tsx b/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Progress/EmblaCarousel.tsx
@@ -33,8 +33,10 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
     if (!emblaApi) return
 
     onScroll(emblaApi)
-    emblaApi.on('reInit', onScroll)
-    emblaApi.on('scroll', onScroll)
+    emblaApi
+      .on('reInit', onScroll)
+      .on('scroll', onScroll)
+      .on('slideFocus', onScroll)
   }, [emblaApi, onScroll])
 
   return (

diff --git a/.../embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Scale/EmblaCarousel.tsx b/.../embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Scale/EmblaCarousel.tsx
@@ -101,6 +101,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       .on('reInit', setTweenFactor)
       .on('reInit', tweenScale)
       .on('scroll', tweenScale)
+      .on('slideFocus', tweenScale)
   }, [emblaApi, tweenScale])
 
   return (

diff --git a/...embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Thumbs/EmblaCarousel.tsx b/...embla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/Thumbs/EmblaCarousel.tsx
@@ -34,8 +34,8 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
   useEffect(() => {
     if (!emblaMainApi) return
     onSelect()
-    emblaMainApi.on('select', onSelect)
-    emblaMainApi.on('reInit', onSelect)
+
+    emblaMainApi.on('select', onSelect).on('reInit', onSelect)
   }, [emblaMainApi, onSelect])
 
   return (

diff --git a/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleArrowButtons.tsx b/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleArrowButtons.tsx
@@ -41,8 +41,7 @@ export const usePrevNextButtons = (
     if (!emblaApi) return
 
     onSelect(emblaApi)
-    emblaApi.on('reInit', onSelect)
-    emblaApi.on('select', onSelect)
+    emblaApi.on('reInit', onSelect).on('select', onSelect)
   }, [emblaApi, onSelect])
 
   return {

diff --git a/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleDotButton.tsx b/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleDotButton.tsx
@@ -41,9 +41,7 @@ export const useDotButton = (
 
     onInit(emblaApi)
     onSelect(emblaApi)
-    emblaApi.on('reInit', onInit)
-    emblaApi.on('reInit', onSelect)
-    emblaApi.on('select', onSelect)
+    emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)
   }, [emblaApi, onInit, onSelect])
 
   return {

diff --git a/...el-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarousel.ts b/...el-docs/src/components/Sandbox/Vanilla/SandboxFilesSrc/CarouselGenerator/EmblaCarousel.ts
@@ -84,10 +84,7 @@ const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(
 )
 /*__DOT_BUTTONS_REPLACE_END__*/
 /*__SELECTED_SNAP_DISPLAY_REPLACE_START__*/
-const stopSelectedSnapDisplay = updateSelectedSnapDisplay(
-  emblaApi,
-  snapDisplayNode
-)
+updateSelectedSnapDisplay(emblaApi, snapDisplayNode)
 /*__SELECTED_SNAP_DISPLAY_REPLACE_END__*/
 
 /*__PREV_NEXT_BUTTONS_REPLACE_START__*/
@@ -96,6 +93,3 @@ emblaApi.on('destroy', removePrevNextBtnsClickHandlers)
 /*__DOT_BUTTONS_REPLACE_START__*/
 emblaApi.on('destroy', removeDotBtnsAndClickHandlers)
 /*__DOT_BUTTONS_REPLACE_END__*/
-/*__SELECTED_SNAP_DISPLAY_REPLACE_START__*/
-emblaApi.on('destroy', stopSelectedSnapDisplay)
-/*__SELECTED_SNAP_DISPLAY_REPLACE_END__*/