[Feature] Add a Carousel component

packages/tests/index.spec.ts

@@ -14,6 +14,13 @@ test('components exports', () => {
       "AnchorNavLink",
       "AnchorNavTarget",
       "AnchorScrollTo",
+      "Carousel",
+      "CarouselBtn",
+      "CarouselDots",
+      "CarouselDrag",
+      "CarouselItem",
+      "CarouselProgress",
+      "CarouselWrapper",
       "CircularMarquee",
       "Cursor",
       "DataBind",

packages/ui/molecules/Carousel/AbstractCarouselChild.ts

@@ -0,0 +1,56 @@
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { Base, getClosestParent } from '@studiometa/js-toolkit';
+import { Carousel } from './Carousel.js';
+
+/**
+ * AbstractCarouselChild class.
+ */
+export class AbstractCarouselChild<T extends BaseProps = BaseProps> extends Base<T> {
+  /**
+   * Config.
+   */
+  static config: BaseConfig = {
+    name: 'AbstractCarouselChild',
+    emits: ['parent-carousel-go-to', 'parent-carousel-progress'],
+  };
+
+  /**
+   * Get the parent carousel instance.
+   */
+  get slider() {
+    // @todo data-option-carousel for better grouping?
+    return getClosestParent(this, Carousel);
+  }
+
+  /**
+   * Disptach events from the parent carousel on the child components.
+   */
+  handleEvent(event: CustomEvent) {
+    switch (event.type) {
+      case 'go-to':
+      case 'progress':
+        this.$emit(`parent-carousel-${event.type}`, ...event.detail);
+        break;
+    }
+  }
+
+  /**
+   * Mounted hook.
+   */
+  mounted() {
+    if (!this.slider) {
+      throw new Error('Could not find a parent slider.');
+    }
+
+    this.slider.$on('go-to', this);
+    this.slider.$on('progress', this);
+  }
+
+  /**
+   * Destroyed hook.
+   */
+  destroyed() {
+    this.slider?.$off('go-to', this);
+    this.slider?.$off('progress', this);
+  }
+}

packages/ui/molecules/Carousel/Carousel.ts

@@ -0,0 +1,116 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { CarouselItem } from './CarouselItem.js';
+import { CarouselWrapper } from './CarouselWrapper.js';
+
+/**
+ * Props for the Carousel class.
+ */
+export interface CarouselProps {
+  $children: {
+    CarouselItem: CarouselItem[];
+    CarouselWrapper: CarouselWrapper[];
+  };
+}
+
+/**
+ * Carousel class.
+ */
+export class Carousel<T extends BaseProps = BaseProps> extends Base<T & CarouselProps> {
+  /**
+   * Config.
+   */
+  static config: BaseConfig = {
+    name: 'Slider',
+    components: {
+      CarouselItem,
+      CarouselWrapper,
+    },
+    emits: ['go-to', 'progress'],
+  };
+
+  /**
+   * Carousel index.
+   */
+  index = 0;
+
+  /**
+   * Get the carousel's wrapper.
+   */
+  get wrapper() {
+    return this.$children.CarouselWrapper[0];
+  }
+
+  /**
+   * Get the carousel's items.
+   */
+  get items() {
+    return this.$children.CarouselItem;
+  }
+
+  /**
+   * Previous index.
+   */
+  get prevIndex() {
+    return Math.max(this.index - 1, 0);
+  }
+
+  /**
+   * Next index.
+   */
+  get nextIndex() {
+    return Math.min(this.index + 1, this.lastIndex);
+  }
+
+  /**
+   * Last index.
+   */
+  get lastIndex() {
+    return this.items.length - 1;
+  }
+
+  /**
+   * Progress from 0 to 1.
+   */
+  get progress() {
+    return this.wrapper.progress;
+  }
+
+  /**
+   * Mounted hook.
+   */
+  mounted() {
+    this.goTo(this.index);
+  }
+
+  /**
+   * Resized hook.
+   */
+  resized() {
+    this.goTo(this.index);
+  }
+
+  /**
+   * Go to the previous item.
+   */
+  goPrev() {
+    this.goTo(this.prevIndex);
+  }
+
+  /**
+   * Go to the next item.
+   */
+  goNext() {
+    this.goTo(this.nextIndex);
+  }
+
+  /**
+   * Go to the given item.
+   */
+  goTo(index) {
+    console.log('goTo', index);
+    this.index = index;
+    this.$emit('go-to', index);
+    this.$emit('progress', this.progress);
+  }
+}

packages/ui/molecules/Carousel/CarouselBtn.ts

@@ -0,0 +1,53 @@
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { AbstractCarouselChild } from './AbstractCarouselChild.js';
+
+/**
+ * Props for the CarouselBtn class.
+ */
+export interface CarouselBtnProps extends BaseProps {
+  $el: HTMLButtonElement;
+  $options: {
+    direction: 'next' | 'prev';
+  };
+}
+
+/**
+ * CarouselBtn class.
+ */
+export class CarouselBtn<T extends BaseProps = BaseProps> extends AbstractCarouselChild<
+  T & CarouselBtnProps
+> {
+  /**
+   * Config.
+   */
+  static config: BaseConfig = {
+    name: 'CarouselBtn',
+    options: { direction: String },
+  };
+
+  /**
+   * Go to the next or previous item on click.
+   */
+  onClick() {
+    switch (this.$options.direction) {
+      case 'next':
+        this.slider.goNext();
+        break;
+      case 'prev':
+        this.slider.goPrev();
+        break;
+    }
+  }
+
+  /**
+   * Update button state on parent carousel progress.
+   */
+  onParentCarouselProgress() {
+    const { direction } = this.$options;
+    const { index, lastIndex } = this.slider;
+    const shouldDisable =
+      (direction === 'next' && index === lastIndex) || (direction === 'prev' && index === 0);
+
+    this.$el.disabled = shouldDisable;
+  }
+}

packages/ui/molecules/Carousel/CarouselDots.ts

@@ -0,0 +1,46 @@
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { AbstractCarouselChild } from './AbstractCarouselChild.js';
+
+/**
+ * Props for the CarouselDots class.
+ */
+export interface CarouselDotsProps extends BaseProps {
+  $refs: {
+    dots: HTMLButtonElement[];
+  };
+}
+
+/**
+ * CarouselDots class.
+ */
+export class CarouselDots<T extends BaseProps = BaseProps> extends AbstractCarouselChild<
+  T & CarouselDotsProps
+> {
+  /**
+   * Config.
+   * @type {BaseConfig}
+   */
+  static config: BaseConfig = {
+    name: 'CarouselDots',
+    refs: ['dots[]'],
+  };
+
+  /**
+   * Go to matching index on dot click.
+   */
+  onDotsClick({ index }) {
+    this.slider.goTo(index);
+  }
+
+  /**
+   * Update dots on parent slider progress.
+   */
+  onParentCarouselProgress() {
+    const { index } = this.slider;
+
+    this.$refs.dots.forEach((dot, i) => {
+      dot.disabled = index === i;
+      dot.classList.toggle('ring-opacity-25', index !== i);
+    });
+  }
+}

packages/ui/molecules/Carousel/CarouselDrag.ts

@@ -0,0 +1,84 @@
+import type { BaseConfig, BaseProps, DragServiceProps } from '@studiometa/js-toolkit';
+import { withDrag } from '@studiometa/js-toolkit';
+import { inertiaFinalValue, tween, lerp } from '@studiometa/js-toolkit/utils';
+import { AbstractCarouselChild } from './AbstractCarouselChild.js';
+import { getClosestIndex } from './utils.js';
+
+/**
+ * Props for the CarouselDrag class.
+ */
+export interface CarouselDragProps extends BaseProps {}
+
+/**
+ * CarouselDrag class.
+ */
+export class CarouselDrag<T> extends withDrag<AbstractCarouselChild>(AbstractCarouselChild)<
+  T & CarouselDragProps
+> {
+  /**
+   * Config.
+   */
+  static config: BaseConfig = {
+    name: 'CarouselDrag',
+  };
+
+  /**
+   * Tween instance for inertia on drop.
+   */
+  tween: ReturnType<typeof tween>;
+
+  /**
+   * Dragged hook.
+   */
+  dragged(props: DragServiceProps) {
+    const wrapper = this.$el;
+
+    // do nothing if scroll-snap is enabled as it is better than this drag implementation
+    if (getComputedStyle(wrapper).scrollSnapType !== 'none') {
+      return;
+    }
+
+    // do noting on inertia and stop
+    if (props.mode === 'inertia' || props.mode === 'stop') {
+      return;
+    }
+
+    // do nothing while the distance is 0
+    if (props.distance.x === 0) {
+      return;
+    }
+
+    if (this.tween) {
+      this.tween.pause();
+    }
+
+    if (props.mode === 'drag') {
+      const left = wrapper.scrollLeft - props.delta.x;
+      wrapper.scrollTo({ left, behavior: 'instant' });
+    }
+
+    if (props.mode === 'drop') {
+      const start = wrapper.scrollLeft;
+      const finalValue = inertiaFinalValue(wrapper.scrollLeft, props.delta.x * -2.5);
+      const index = getClosestIndex(
+        this.slider.items.map((item) => item.state.left),
+        finalValue,
+      );
+      const target = this.slider.items[index].state.left;
+
+      this.tween = tween(
+        (progress) => {
+          const left = lerp(start, target, progress);
+          this.slider.wrapper.scrollTo({ left, behavior: 'instant' });
+        },
+        {
+          onFinish: () => {
+            this.slider.goTo(index);
+          },
+          smooth: 0.25,
+        },
+      );
+      this.tween.start();
+    }
+  }
+}