vevet 2.17.0 → 3.0.0-beta.1

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

@@ -0,0 +1,46 @@
+/* eslint-disable no-param-reassign */
+import React, { FC, useEffect, useRef } from 'react';
+import { ScrollView } from '..';
+import { times } from '@/utils/common';
+
+export const Component: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const instance = new ScrollView();
+
+    const elements = containerRef.current.querySelectorAll('*');
+    elements.forEach((element) => instance.addElement(element));
+
+    instance.addCallback('in', ({ element }) => {
+      if (element instanceof HTMLElement) {
+        element.style.opacity = '1';
+      }
+    });
+
+    instance.addCallback('out', ({ element }) => {
+      if (element instanceof HTMLElement) {
+        element.style.opacity = '0';
+      }
+    });
+
+    return () => instance.destroy();
+  }, []);
+
+  return (
+    <div ref={containerRef}>
+      {times(
+        (index) => (
+          <div key={index} style={{ opacity: 0, transition: 'opacity 0.35s' }}>
+            {index} Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          </div>
+        ),
+        200
+      )}
+    </div>
+  );
+};

package/src/components/ScrollView/types.ts

@@ -0,0 +1,70 @@
+import { NComponent } from '@/base/Component/types';
+import { TOnResizeTarget } from '@/utils/internal/onResize';
+
+export namespace NScrollView {
+  export interface IStaticProps extends NComponent.IStaticProps {
+    /**
+     * Intersection root
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+     * @default null
+     */
+    intersectionRoot?: Element | null;
+    /**
+     * Define what states to trace.
+     * @default 'in'
+     */
+    states?: 'in' | 'inout';
+    /**
+     * A class to be toggled on state change
+     * @default 'viewed'
+     */
+    classToToggle?: string;
+    /**
+     * If need to use delays at first start
+     * @default true
+     */
+    hasDelay?: boolean;
+    /**
+     * Max delay
+     * @default 1000
+     */
+    maxDelay?: number;
+    /**
+     * Main scrolling direction
+     * @default 'vertical'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Viewport target
+     * @default 'any'
+     */
+    viewportTarget?: TOnResizeTarget;
+    /**
+     * Timeout of resize event
+     * @default 0
+     */
+    resizeDebounce?: number;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {
+    /**
+     * Enable `IntersectionObserver`
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * `IntersectionObserver` margin (from -1 to 1)
+     * @default 0.05
+     */
+    rootMargin?: number;
+  }
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    in: { element: Element };
+    out: { element: Element };
+  }
+
+  export interface IElement extends Element {
+    isScrollViewIn?: boolean;
+  }
+}

package/src/components/SectionScrollProgress/index.ts

@@ -0,0 +1,232 @@
+import { selectOne } from 'vevet-dom';
+import type { SmoothScroll } from '../SmoothScroll';
+import { NScrollSectionProgress } from './types';
+import { Component as ComponentClass } from '@/base/Component';
+import { clampScope } from '@/utils/math';
+import { IGetScrollValues, getScrollValues, onScroll } from '@/utils/scroll';
+import { onResize } from '@/utils/internal/onResize';
+
+export type { NScrollSectionProgress };
+
+/**
+ * Trace scroll progress of a section
+ */
+export class SectionScrollProgress<
+  StaticProps extends NScrollSectionProgress.IStaticProps = NScrollSectionProgress.IStaticProps,
+  ChangeableProps extends NScrollSectionProgress.IChangeableProps = NScrollSectionProgress.IChangeableProps,
+  CallbacksTypes extends NScrollSectionProgress.ICallbacksTypes = NScrollSectionProgress.ICallbacksTypes
+> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      container: window,
+      viewportTarget: 'any',
+      resizeTimeout: 0,
+    };
+  }
+
+  /** Scroll container */
+  protected _scrollContainer: Element | SmoothScroll | Window;
+
+  /** Scroll container */
+  get scrollContainer() {
+    return this._scrollContainer;
+  }
+
+  /** Section element */
+  protected _section: Element;
+
+  /** Section element */
+  get section() {
+    return this._section;
+  }
+
+  /** Scrolling scope */
+  protected _scopeGlobal: [number, number];
+
+  /** Scrolling scope */
+  get scopeGlobal() {
+    return this._scopeGlobal;
+  }
+
+  /** Scope of element appearing from bottom to top */
+  protected _scopeIn: [number, number];
+
+  /** Scope of element appearing from bottom to top */
+  get scopeIn() {
+    return this._scopeIn;
+  }
+
+  /** Scope of element moving */
+  protected _scopeMove: [number, number];
+
+  /** Scope of element moving */
+  get scopeMove() {
+    return this._scopeMove;
+  }
+
+  /** Scope of element disappearing from bottom to top */
+  protected _scopeOut: [number, number];
+
+  /** Scope of element disappearing from bottom to top */
+  get scopeOut() {
+    return this._scopeOut;
+  }
+
+  /** Previous global progress */
+  protected _prevProgressGlobal: number;
+
+  /** Global progress */
+  protected _progressGlobal: number;
+
+  /** Global progress */
+  get progressGlobal() {
+    return this._progressGlobal;
+  }
+
+  protected set progressGlobal(value) {
+    this._progressGlobal = value;
+  }
+
+  protected _frameThrottleIndex: number;
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    const { container, section } = this.props;
+
+    // get scroll container
+    if (typeof container === 'string') {
+      this._scrollContainer = selectOne(container) as Element;
+    } else {
+      this._scrollContainer = container as any;
+    }
+
+    // get section element
+    this._section = selectOne(section) as Element;
+
+    // set defaults
+    this._prevProgressGlobal = -0.001;
+    this._progressGlobal = -0.001;
+    this._scopeGlobal = [0, 0];
+    this._scopeIn = [0, 0];
+    this._scopeMove = [0, 0];
+    this._scopeOut = [0, 0];
+    this._frameThrottleIndex = 0;
+
+    // initialize the class
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  protected _init() {
+    super._init();
+
+    this._setEvents();
+  }
+
+  /** Set events */
+  protected _setEvents() {
+    const { viewportTarget, resizeDebounce } = this.props;
+
+    const resizeHandler = onResize({
+      onResize: () => this.resize(),
+      element: this.section,
+      viewportTarget,
+      hasBothEvents: true,
+      resizeDebounce,
+    });
+
+    const loadEvent = this.app.onPageLoad();
+    loadEvent.then(() => resizeHandler.debounceResize()).catch(() => {});
+
+    // set scroll events
+    const scrollEvent = onScroll({
+      container: this.scrollContainer,
+      callback: (data) => this._render(data),
+    });
+
+    // destroy events
+    this.addDestroyableAction(() => {
+      resizeHandler.remove();
+      loadEvent.cancel();
+      scrollEvent.remove();
+    });
+  }
+
+  protected _onPropsMutate() {
+    super._onPropsMutate();
+
+    this.resize();
+  }
+
+  /** 'in' progress */
+  get progressIn() {
+    return clampScope(this.progressGlobal, this.scopeIn) || 0;
+  }
+
+  /** 'out' progress */
+  get progressOut() {
+    return clampScope(this.progressGlobal, this.scopeOut) || 0;
+  }
+
+  /** 'move' progress */
+  get progressMove() {
+    return clampScope(this.progressGlobal, this.scopeMove) || 0;
+  }
+
+  /** Resize the scene */
+  public resize() {
+    const scrollValues = getScrollValues(this.scrollContainer);
+    if (!scrollValues) {
+      return;
+    }
+
+    // launch callbacks
+    this.callbacks.tbt('resize', undefined);
+
+    // render the scene
+    this._render(scrollValues, true);
+  }
+
+  /** Calculate scopes */
+  protected _calculateScopes({ scrollTop }: IGetScrollValues) {
+    const { height: vHeight } = this.app.viewport;
+    const sectionBounding = this.section.getBoundingClientRect();
+
+    // calculate scroll scope
+    const inStart = scrollTop + sectionBounding.top - vHeight;
+    const moveEnd = scrollTop + sectionBounding.top + sectionBounding.height;
+    const scrollLine = moveEnd - inStart;
+    this._scopeGlobal = [inStart, moveEnd];
+
+    // calculate other scopes
+    this._scopeIn = [0, vHeight / scrollLine];
+    this._scopeOut = [1 - vHeight / scrollLine, 1];
+    this._scopeMove = [this._scopeIn[1], this._scopeOut[0]];
+  }
+
+  /** Check if the section can be rendered */
+  protected _canRender(isForce = false) {
+    return isForce || this.progressGlobal !== this._prevProgressGlobal;
+  }
+
+  /** Render the scene */
+  protected _render(scrollValues: IGetScrollValues, isForce = false) {
+    this._frameThrottleIndex += 1;
+
+    if (this._frameThrottleIndex % 60 === 0 || isForce) {
+      this._calculateScopes(scrollValues);
+    }
+
+    this._prevProgressGlobal = this.progressGlobal;
+    this.progressGlobal = clampScope(scrollValues.scrollTop, this._scopeGlobal);
+
+    if (!this._canRender(isForce)) {
+      return;
+    }
+
+    this.callbacks.tbt('render', undefined);
+  }
+}

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

@@ -0,0 +1,77 @@
+/* eslint-disable no-param-reassign */
+import React, { FC, useEffect } from 'react';
+import { SectionScrollProgress } from '..';
+
+export const DefalultComponent: FC = () => {
+  useEffect(() => {
+    const sections = document.querySelectorAll('.js-section');
+
+    const sectionHandlers = Array.from(sections).map((section) => {
+      const handler = new SectionScrollProgress({
+        section,
+      });
+
+      const render = () => {
+        section.innerHTML = `
+          <p>progressGlobal: ${handler.progressGlobal.toFixed(2)}</p>
+          <p>progressIn: ${handler.progressIn.toFixed(2)}</p>
+          <p>progressMove: ${handler.progressMove.toFixed(2)}</p>
+          <p>progressOut: ${handler.progressOut.toFixed(2)}</p>
+        `;
+      };
+
+      render();
+
+      handler.addCallback('render', () => render());
+
+      return handler;
+    });
+
+    return () => {
+      sectionHandlers.forEach((handler) => handler.destroy());
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        className="js-section"
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100vh',
+          backgroundColor: '#a00',
+        }}
+      />
+
+      <div
+        className="js-section"
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '150vh',
+          backgroundColor: '#0a0',
+        }}
+      />
+
+      <div
+        className="js-section"
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100vh',
+          backgroundColor: '#00a',
+        }}
+      />
+    </>
+  );
+};

package/src/components/SectionScrollProgress/stories/WithCustomScroll.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable no-param-reassign */
+import React, { FC, useEffect, useRef } from 'react';
+import { SmoothScroll } from '../../SmoothScroll';
+import { SectionScrollProgress } from '..';
+
+export const WithCustomScrollComponent: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return undefined;
+    }
+
+    const smoothScroll = new SmoothScroll({
+      container: containerRef.current,
+    });
+
+    const sections = containerRef.current.querySelectorAll('.js-section');
+
+    const sectionHandlers = Array.from(sections).map((section) => {
+      const handler = new SectionScrollProgress({
+        container: smoothScroll,
+        section,
+      });
+
+      const render = () => {
+        section.innerHTML = `
+          <p>progressGlobal: ${handler.progressGlobal.toFixed(2)}</p>
+          <p>progressIn: ${handler.progressIn.toFixed(2)}</p>
+          <p>progressMove: ${handler.progressMove.toFixed(2)}</p>
+          <p>progressOut: ${handler.progressOut.toFixed(2)}</p>
+        `;
+      };
+
+      render();
+
+      handler.addCallback('render', () => render());
+
+      return handler;
+    });
+
+    return () => {
+      smoothScroll.destroy();
+      sectionHandlers.forEach((handler) => handler.destroy());
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className="v-smooth-scroll"
+      style={{ height: '100vh', backgroundColor: '#ccc' }}
+    >
+      <div className="v-smooth-scroll__wrapper">
+        <div
+          className="js-section"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100vh',
+            backgroundColor: '#a00',
+          }}
+        />
+
+        <div
+          className="js-section"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '150vh',
+            backgroundColor: '#0a0',
+          }}
+        />
+
+        <div
+          className="js-section"
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100vh',
+            backgroundColor: '#00a',
+          }}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import { WithCustomScrollComponent } from './WithCustomScroll';
+import { DefalultComponent } from './Default';
+
+const meta: Meta = {
+  title: 'Components/SectionScrollProgress',
+};
+
+export default meta;
+
+export const Default: StoryFn<typeof DefalultComponent> = (props) => (
+  <DefalultComponent {...props} />
+);
+
+export const WithCustomScroll: StoryFn<typeof WithCustomScrollComponent> = (
+  props
+) => <WithCustomScrollComponent {...props} />;

package/src/components/SectionScrollProgress/types.ts

@@ -0,0 +1,34 @@
+import { NComponent } from '@/base/Component/types';
+import type { SmoothScroll } from '../SmoothScroll';
+import { TOnResizeTarget } from '@/utils/internal/onResize';
+
+export namespace NScrollSectionProgress {
+  export interface IStaticProps extends NComponent.IStaticProps {
+    /**
+     * Section element
+     */
+    section: string | Element;
+    /**
+     * Scrollable container
+     * @default window
+     */
+    container?: string | Element | SmoothScroll | Window;
+    /**
+     * Viewport target
+     * @default 'any'
+     */
+    viewportTarget?: TOnResizeTarget;
+    /**
+     * Timeout of resize event
+     * @default 0
+     */
+    resizeDebounce?: number;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {}
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    render: undefined;
+    resize: undefined;
+  }
+}

package/src/components/SmoothScroll/AnimatonFrame.ts

@@ -0,0 +1,67 @@
+import { AnimationFrame as AnimationFrameClass } from '../AnimationFrame';
+import { NCallbacks } from '@/base/Callbacks';
+
+interface IProps {
+  callback: () => void;
+  outerAnimationFrame: AnimationFrameClass | false;
+}
+
+export class AnimationFrame {
+  private _innerAnimationFrame?: AnimationFrameClass;
+
+  private _animationFrameEvent?: NCallbacks.IAddedCallback;
+
+  private get animationFrame() {
+    return (this.props.outerAnimationFrame || this._innerAnimationFrame)!;
+  }
+
+  get easeMultiplier() {
+    return this.animationFrame.easeMultiplier;
+  }
+
+  private get props() {
+    return this._props;
+  }
+
+  constructor(private _props: IProps) {}
+
+  public enable() {
+    // set animation callback for the outer AnimationFrame
+    if (this.props.outerAnimationFrame) {
+      if (!this._animationFrameEvent) {
+        this._animationFrameEvent = this.props.outerAnimationFrame.addCallback(
+          'frame',
+          () => this.props.callback(),
+          { name: 'SmoothScroll' }
+        );
+      }
+
+      return;
+    }
+
+    // otherwise, check if inner AnimationFrame is created
+    if (!this._innerAnimationFrame) {
+      this._innerAnimationFrame = new AnimationFrameClass({ fps: 'auto' });
+      this._innerAnimationFrame.addCallback('frame', () =>
+        this.props.callback()
+      );
+    }
+
+    // play
+    this._innerAnimationFrame.play();
+  }
+
+  /** Disable scrolling */
+  public disable() {
+    this._animationFrameEvent?.remove();
+    this._animationFrameEvent = undefined;
+
+    this._innerAnimationFrame?.pause();
+  }
+
+  public destroy() {
+    this.disable();
+
+    this._innerAnimationFrame?.destroy();
+  }
+}