vevet 2.17.0 → 3.0.0-beta.1

package/src/components/ScrollBar/index.ts

@@ -0,0 +1,192 @@
+import { selectOne } from 'vevet-dom';
+import type { SmoothScroll } from '../SmoothScroll';
+import Bar from './Bar';
+import { NScrollBar } from './types';
+import { Component as ComponentClass } from '@/base/Component';
+import { IBarProps } from './Bar/types';
+import { onResize } from '@/utils/internal/onResize';
+
+export type { NScrollBar };
+
+/**
+ * Create custom scroll bar
+ */
+export class ScrollBar<
+  StaticProps extends NScrollBar.IStaticProps = NScrollBar.IStaticProps,
+  ChangeableProps extends NScrollBar.IChangeableProps = NScrollBar.IChangeableProps,
+  CallbacksTypes extends NScrollBar.ICallbacksTypes = NScrollBar.ICallbacksTypes
+> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      container: window,
+      domParent: false,
+      resizeDebounce: 16,
+      isDraggable: true,
+      hasAutoSize: true,
+      canAutoHide: true,
+      minSize: 50,
+      scrollBehavior: 'smooth',
+    };
+  }
+
+  get prefix() {
+    return `${this.app.prefix}scrollbar`;
+  }
+
+  /** Scroll container */
+  private _container: Element | Window | SmoothScroll;
+
+  /** Scroll container */
+  get container() {
+    return this._container;
+  }
+
+  /** Scrollable element */
+  get scrollableElement() {
+    const { container } = this;
+
+    if (container instanceof Window) {
+      return this.app.body;
+    }
+
+    if (container instanceof Element) {
+      return container;
+    }
+
+    return container.container;
+  }
+
+  /**
+   * The element where scrollbars will be appended
+   */
+  get domParent() {
+    const { domParent } = this.props;
+
+    if (domParent) {
+      return domParent;
+    }
+
+    const { container } = this;
+
+    if (container instanceof Window) {
+      return this.app.body;
+    }
+
+    if (container instanceof Element) {
+      return container;
+    }
+
+    return container.container;
+  }
+
+  /** Horizontal scrollbar */
+  private _xBar: Bar;
+
+  /** Vertical scrollbar */
+  private _yBar: Bar;
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    const { container } = this.props;
+
+    // get container
+    if (typeof container === 'string') {
+      const element = selectOne(container);
+      if (element) {
+        this._container = element;
+      } else {
+        throw new Error('No scroll container');
+      }
+    } else {
+      this._container = container as any;
+    }
+
+    // create bars
+    const barProps: Omit<IBarProps, 'direction'> = {
+      ...this.props,
+      container: this.container,
+      domParent: this.domParent,
+      prefix: this.prefix,
+    };
+    this._xBar = new Bar({
+      ...barProps,
+      direction: 'x',
+    });
+    this._yBar = new Bar({
+      ...barProps,
+      direction: 'y',
+    });
+
+    // add classnames
+    this.toggleClassName(
+      this.scrollableElement,
+      this.className('-parent'),
+      true
+    );
+
+    // initialize the class
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  protected _init() {
+    super._init();
+
+    this._setEvents();
+  }
+
+  // Set Module Events
+  private _setEvents() {
+    const { container, props } = this;
+
+    // default resize handler
+    const resizeHandler = onResize({
+      onResize: () => this.resize(),
+      element: [this._xBar.outer, this._yBar.outer],
+      viewportTarget: 'any',
+      hasBothEvents: true,
+      resizeDebounce: props.resizeDebounce,
+    });
+
+    // resize for smoothscroll
+    const smoothScrollResize =
+      'isSmoothScroll' in container
+        ? container.addCallback(
+            'resize',
+            () => resizeHandler.debounceResize(),
+            { name: this.name }
+          )
+        : undefined;
+
+    this.addDestroyableAction(() => {
+      resizeHandler.remove();
+      smoothScrollResize?.remove();
+    });
+
+    // initial resize
+    resizeHandler.resize();
+  }
+
+  protected _onPropsMutate() {
+    super._onPropsMutate();
+    this.resize();
+  }
+
+  /** Resize the scene */
+  public resize() {
+    this._xBar.resize();
+    this._yBar.resize();
+  }
+
+  /** Destroy the module */
+  protected _destroy() {
+    super._destroy();
+
+    // destroy bars
+    this._xBar.destroy();
+    this._yBar.destroy();
+  }
+}

package/src/components/ScrollBar/stories/Default.tsx

@@ -0,0 +1,27 @@
+import React, { FC, useEffect } from 'react';
+import { times } from '@/utils/common';
+import { ScrollBar } from '..';
+
+export const WithDefaultComponent: FC = () => {
+  useEffect(() => {
+    const scrollBar = new ScrollBar();
+
+    return () => scrollBar.destroy();
+  }, []);
+
+  return (
+    <div>
+      {times(
+        (index) => (
+          <div key={index}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
+            quibusdam fugit at quos. Quod repellendus placeat provident. Iste
+            saepe veniam iure, reiciendis a dolor in commodi dolores placeat
+            mollitia illum?
+          </div>
+        ),
+        200
+      )}
+    </div>
+  );
+};

package/src/components/ScrollBar/stories/WithInnerScroll.tsx

@@ -0,0 +1,44 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { times } from '@/utils/common';
+import { ScrollBar } from '..';
+
+export const WithInnerScrollComponent: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const scrollBar = new ScrollBar({
+      container: containerRef.current,
+      domParent: document.body,
+    });
+
+    return () => scrollBar.destroy();
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        height: 500,
+        maxWidth: 500,
+        backgroundColor: '#eee',
+        overflow: 'auto',
+      }}
+    >
+      {times(
+        (index) => (
+          <div key={index}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
+            quibusdam fugit at quos. Quod repellendus placeat provident. Iste
+            saepe veniam iure, reiciendis a dolor in commodi dolores placeat
+            mollitia illum?
+          </div>
+        ),
+        40
+      )}
+    </div>
+  );
+};

package/src/components/ScrollBar/stories/WithSmoothScrollComponent.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { times } from '@/utils/common';
+import { SmoothScroll } from '@/components/SmoothScroll';
+import { ScrollBar } from '..';
+
+export const WithSmoothScrollComponent: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const scroll = new SmoothScroll({
+      container: containerRef.current,
+    });
+
+    const scrollBar = new ScrollBar({
+      container: scroll,
+    });
+
+    return () => {
+      scrollBar.destroy();
+      scroll.destroy();
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className="v-smooth-scroll"
+      style={{ height: 500, maxWidth: 500, backgroundColor: '#eee' }}
+    >
+      <div className="v-smooth-scroll__wrapper">
+        {times(
+          (index) => (
+            <div key={index}>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
+              quibusdam fugit at quos. Quod repellendus placeat provident. Iste
+              saepe veniam iure, reiciendis a dolor in commodi dolores placeat
+              mollitia illum?
+            </div>
+          ),
+          40
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/ScrollBar/stories/index.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import { WithSmoothScrollComponent } from './WithSmoothScrollComponent';
+import { WithInnerScrollComponent } from './WithInnerScroll';
+import { WithDefaultComponent } from './Default';
+
+const meta: Meta = {
+  title: 'Components/ScrollBar',
+};
+
+export default meta;
+
+export const Default: StoryFn<typeof WithDefaultComponent> = (props) => (
+  <WithDefaultComponent {...props} />
+);
+
+export const WithSmoothScroll: StoryFn<typeof WithSmoothScrollComponent> = (
+  props
+) => <WithSmoothScrollComponent {...props} />;
+
+export const WithInnerScroll: StoryFn<typeof WithInnerScrollComponent> = (
+  props
+) => <WithInnerScrollComponent {...props} />;

package/src/components/ScrollBar/types.ts

@@ -0,0 +1,37 @@
+import { NComponent } from '@/base/Component/types';
+import type { SmoothScroll } from '../SmoothScroll';
+import { IBarProps } from './Bar/types';
+
+type TPickedProps =
+  | 'isDraggable'
+  | 'hasAutoSize'
+  | 'canAutoHide'
+  | 'minSize'
+  | 'scrollBehavior';
+
+export namespace NScrollBar {
+  export interface IStaticProps
+    extends NComponent.IStaticProps,
+      Partial<Pick<IBarProps, TPickedProps>> {
+    /**
+     * The scrollable element
+     * @default window
+     */
+    container?: Window | SmoothScroll | Element | string;
+    /**
+     * The element that will contain the scrollbar.
+     * If false, the property 'container' will be taken.
+     * @default false
+     */
+    domParent?: false | Element;
+    /**
+     * Timeout of resize event
+     * @default 16
+     */
+    resizeDebounce?: number;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {}
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {}
+}

package/src/components/ScrollView/index.ts

@@ -0,0 +1,323 @@
+import { Component as ComponentClass } from '@/base/Component';
+import { NScrollView } from './types';
+import { isIntersectionObserverSupported } from '@/utils/listeners';
+import { clamp } from '@/utils/math';
+import { normalizedTimeoutCallback } from '@/utils/common';
+import { IRemovable } from '@/types/general';
+
+export type { NScrollView };
+
+/**
+ * Detect when elements enter or leave the viewport
+ */
+export class ScrollView<
+  StaticProps extends NScrollView.IStaticProps = NScrollView.IStaticProps,
+  ChangeableProps extends NScrollView.IChangeableProps = NScrollView.IChangeableProps,
+  CallbacksTypes extends NScrollView.ICallbacksTypes = NScrollView.ICallbacksTypes
+> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      intersectionRoot: null,
+      isEnabled: true,
+      rootMargin: 0.05,
+      states: 'in',
+      classToToggle: 'viewed',
+      hasDelay: true,
+      maxDelay: 1000,
+      direction: 'vertical',
+      viewportTarget: 'any',
+      resizeDebounce: 0,
+    };
+  }
+
+  /** Intersection observer - type IN */
+  protected _intersectionObserverIn?: IntersectionObserver;
+
+  /** Intersection observer - type OUT */
+  protected _intersectionObserverOut?: IntersectionObserver;
+
+  /** If first start */
+  protected _isFirstStart: boolean;
+
+  /** If first start */
+  get isFirstStart() {
+    return this._isFirstStart;
+  }
+
+  /** Elements */
+  protected _elements: NScrollView.IElement[];
+
+  /** If intersection observer is supported */
+  protected _isIntersectionObserverSupported: boolean;
+
+  /** Elements */
+  get elements() {
+    return this._elements;
+  }
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    this._isFirstStart = true;
+    this._elements = [];
+    this._isIntersectionObserverSupported = isIntersectionObserverSupported();
+
+    // initialize the class
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  protected _init() {
+    super._init();
+
+    this._setEvents();
+  }
+
+  protected _onPropsMutate() {
+    super._onPropsMutate();
+
+    this.resize();
+  }
+
+  /** Set class events */
+  protected _setEvents() {
+    const { viewportTarget, resizeDebounce } = this.props;
+
+    this.resize();
+
+    this.addViewportCallback(viewportTarget, () => this.resize(), {
+      timeout: resizeDebounce,
+    });
+  }
+
+  /** Resize the scene */
+  public resize() {
+    this._removeViewEvents();
+
+    if (this.props.isEnabled) {
+      this._setViewEvents();
+    }
+  }
+
+  /** Root bounding rect */
+  protected get rootBounding() {
+    const { app, props } = this;
+
+    if (props.intersectionRoot) {
+      const bounding = props.intersectionRoot.getBoundingClientRect();
+
+      return {
+        top: bounding.top,
+        left: bounding.left,
+        width: bounding.width,
+        height: bounding.height,
+      };
+    }
+
+    const { viewport } = app;
+
+    return {
+      top: 0,
+      left: 0,
+      width: viewport.width,
+      height: viewport.height,
+    };
+  }
+
+  /** Set view events */
+  private _setViewEvents() {
+    if (!this._isIntersectionObserverSupported) {
+      return;
+    }
+
+    const { rootBounding, isFirstStart, props } = this;
+
+    const xMargin = isFirstStart
+      ? 0
+      : rootBounding.width * props.rootMargin * -1;
+
+    const yMargin = isFirstStart
+      ? 0
+      : rootBounding.height * props.rootMargin * -1;
+
+    this._intersectionObserverIn = new IntersectionObserver(
+      (data) => this._handleIntersectionIn(data),
+      {
+        root: props.intersectionRoot,
+        threshold: 0,
+        rootMargin: `0px ${xMargin}px ${yMargin}px 0px`,
+      }
+    );
+
+    this.elements.forEach((element) =>
+      this._intersectionObserverIn?.observe(element)
+    );
+
+    if (props.states === 'inout') {
+      this._intersectionObserverOut = new IntersectionObserver(
+        (data) => this._handleIntersectionOut(data),
+        {
+          root: props.intersectionRoot,
+          threshold: 0,
+          rootMargin: '0px 0px 0px 0px',
+        }
+      );
+
+      this.elements.forEach((element) =>
+        this._intersectionObserverOut?.observe(element)
+      );
+    }
+  }
+
+  /** Remove View events */
+  protected _removeViewEvents() {
+    this._intersectionObserverIn?.disconnect();
+    this._intersectionObserverIn = undefined;
+
+    this._intersectionObserverOut?.disconnect();
+    this._intersectionObserverOut = undefined;
+  }
+
+  /** Event on IntersectionObserver In */
+  protected _handleIntersectionIn(data: IntersectionObserverEntry[]) {
+    data.forEach((entry) => {
+      if (!entry.isIntersecting) {
+        return;
+      }
+
+      const element = entry.target;
+      const delay = this._getElementDelay(element);
+
+      this._handleInOut(element, true, delay);
+
+      if (this.props.states === 'in') {
+        this.removeElement(element);
+      }
+    });
+
+    // change states
+    if (this.isFirstStart) {
+      this._isFirstStart = false;
+      this.resize();
+    }
+  }
+
+  /** Get element delay */
+  protected _getElementDelay(element: NScrollView.IElement) {
+    const { isFirstStart, props } = this;
+    const rootBounding = isFirstStart ? this.rootBounding : false;
+
+    if (!isFirstStart || !rootBounding || !props.hasDelay) {
+      return 0;
+    }
+
+    const bounding = element.getBoundingClientRect();
+
+    const progress = clamp(
+      props.direction === 'horizontal'
+        ? (bounding.left - rootBounding.left) / rootBounding.width
+        : (bounding.top - rootBounding.top) / rootBounding.height,
+      [0, 1]
+    );
+
+    return progress * props.maxDelay;
+  }
+
+  /** Event on IntersectionObserver Out */
+  protected _handleIntersectionOut(data: IntersectionObserverEntry[]) {
+    data.forEach((entry) => {
+      if (entry.isIntersecting) {
+        return;
+      }
+
+      const element = entry.target;
+      this._handleInOut(element, false);
+    });
+  }
+
+  /**
+   * Event that is triggered when an element appears or disappears
+   */
+  protected _handleInOut(
+    elementProp: NScrollView.IElement,
+    isInViewport: boolean,
+    delay = 0
+  ) {
+    const { classToToggle } = this.props;
+    const element = elementProp;
+
+    if (
+      (element.isScrollViewIn && isInViewport) ||
+      (!element.isScrollViewIn && !isInViewport)
+    ) {
+      return;
+    }
+
+    // update props
+    element.isScrollViewIn = isInViewport;
+
+    // toggle classes
+    if (classToToggle) {
+      normalizedTimeoutCallback(() => {
+        element.classList.toggle(classToToggle, isInViewport);
+      }, delay);
+    }
+
+    // process callbacks
+    if (isInViewport) {
+      normalizedTimeoutCallback(() => {
+        this.callbacks.tbt('in', { element });
+      }, delay);
+    } else {
+      normalizedTimeoutCallback(() => {
+        this.callbacks.tbt('out', { element });
+      }, delay);
+    }
+  }
+
+  /** Add an element */
+  public addElement(elementProp: Element): IRemovable {
+    const element = elementProp as NScrollView.IElement;
+
+    element.isScrollViewIn = undefined;
+
+    if (this._isIntersectionObserverSupported) {
+      this._elements.push(element);
+
+      this._intersectionObserverIn?.observe(element);
+      this._intersectionObserverOut?.observe(element);
+    } else {
+      this._handleInOut(element, true);
+    }
+
+    return {
+      remove: () => this.removeElement(element),
+    };
+  }
+
+  /** Remove an element */
+  public removeElement(elementProp: Element) {
+    const element = elementProp as NScrollView.IElement;
+
+    this._intersectionObserverIn?.unobserve(element);
+    this._intersectionObserverOut?.unobserve(element);
+    element.isScrollViewIn = undefined;
+
+    this._elements = this._elements.filter((el) => el !== element);
+  }
+
+  /** Remove all elements */
+  public removeElements() {
+    this._elements.forEach((element) => this.removeElement(element));
+    this._elements = [];
+  }
+
+  /** Destroy the module */
+  protected _destroy() {
+    super._destroy();
+
+    this._removeViewEvents();
+  }
+}

package/src/components/ScrollView/stories/index.stories.tsx

@@ -0,0 +1,13 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Component } from '.';
+
+type TComponent = typeof Component;
+
+const meta: Meta<TComponent> = {
+  title: 'Components/ScrollView',
+  component: Component,
+};
+
+export default meta;
+
+export const Default: StoryObj<TComponent> = {};