vevet 3.3.2 → 3.5.0

package/src/components/ProgressPreloader/index.ts

@@ -15,9 +15,12 @@ export type { NProgressPreloader };
  * Page preloader with smooth progress calculation
  */
 export class ProgressPreloader<
-  StaticProps extends NProgressPreloader.IStaticProps = NProgressPreloader.IStaticProps,
-  ChangeableProps extends NProgressPreloader.IChangeableProps = NProgressPreloader.IChangeableProps,
-  CallbacksTypes extends NProgressPreloader.ICallbacksTypes = NProgressPreloader.ICallbacksTypes
+  StaticProps extends
+    NProgressPreloader.IStaticProps = NProgressPreloader.IStaticProps,
+  ChangeableProps extends
+    NProgressPreloader.IChangeableProps = NProgressPreloader.IChangeableProps,
+  CallbacksTypes extends
+    NProgressPreloader.ICallbacksTypes = NProgressPreloader.ICallbacksTypes,
 > extends Preloader<StaticProps, ChangeableProps, CallbacksTypes> {
   protected _getDefaultProps() {
     return {
@@ -33,7 +36,7 @@ export class ProgressPreloader<
   }
 
   /** Images to be preloaded */
-  private _images: HTMLImageElement[];
+  protected _images: HTMLImageElement[];
 
   /** Images to be preloaded */
   get images() {
@@ -41,7 +44,7 @@ export class ProgressPreloader<
   }
 
   /** Videos to be preloaded */
-  private _videos: HTMLVideoElement[];
+  protected _videos: HTMLVideoElement[];
 
   /** Videos to be preloaded */
   get videos() {
@@ -49,14 +52,14 @@ export class ProgressPreloader<
   }
 
   /** Custom resources to be preloaded */
-  private _customResources: NProgressPreloader.ICustomResourceData[];
+  protected _customResources: NProgressPreloader.ICustomResourceData[];
 
   /** Custom resources to be preloaded */
   get customResources() {
     return this._customResources;
   }
 
-  private _resourcesQuantity: number;
+  protected _resourcesQuantity: number;
 
   /** Quantity of resources to be preloader */
   get resourcesQuantity() {
@@ -71,7 +74,7 @@ export class ProgressPreloader<
   }
 
   /** Quantity of loaded resources  */
-  private _loadedResourcesQuantity: number;
+  protected _loadedResourcesQuantity: number;
 
   /** Quantity of loaded resources  */
   get loadedResourcesQuantity() {
@@ -84,7 +87,7 @@ export class ProgressPreloader<
   }
 
   /** Preloader progress */
-  private _progress: number;
+  protected _progress: number;
 
   /** Preloader progress */
   get progress() {
@@ -98,10 +101,10 @@ export class ProgressPreloader<
   }
 
   /** Animation frame for smooth progress calculation */
-  private _animationFrame?: AnimationFrame;
+  protected _animationFrame?: AnimationFrame;
 
   /** Timeline to finish progress animation */
-  private _endTimeline?: Timeline;
+  protected _endTimeline?: Timeline;
 
   constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
     super(initialProps, false);
@@ -190,7 +193,7 @@ export class ProgressPreloader<
 
         let loadCount = parseInt(
           element.getAttribute('data-load-count') || '1',
-          10
+          10,
         );
 
         loadCount = Number.isNaN(loadCount)
@@ -224,7 +227,7 @@ export class ProgressPreloader<
             resolve();
           }
         },
-        { isProtected: true, name: this.name }
+        { isProtected: true, name: this.name },
       );
     });
   }
@@ -233,29 +236,32 @@ export class ProgressPreloader<
   protected _preloadResources() {
     this.images.forEach((image) =>
       preloadImage(image, (isSuccess) =>
-        this._handleLoadedResource({ element: image, isSuccess })
-      )
+        this._handleLoadedResource({ element: image, isSuccess }),
+      ),
     );
 
     // preload videos
     this.videos.forEach((video) =>
       preloadVideo(video, (isSuccess) =>
-        this._handleLoadedResource({ element: video, isSuccess })
-      )
+        this._handleLoadedResource({ element: video, isSuccess }),
+      ),
     );
 
     // preload custom resources
     this._customResources.forEach((data) => {
       preloadCustomElement(data, this)
         .then(() =>
-          this._handleLoadedResource({ element: data.element, isSuccess: true })
+          this._handleLoadedResource({
+            element: data.element,
+            isSuccess: true,
+          }),
         )
         .catch(() => {});
     });
   }
 
   /** Event on resource loaded */
-  private _handleLoadedResource({
+  protected _handleLoadedResource({
     element,
     isSuccess,
   }: NProgressPreloader.IHandleLoadedResourceParameter) {

package/src/components/ProgressPreloader/utils/preloadCustomElement.ts

@@ -48,7 +48,7 @@ function getLoadProgress({
 
 export function preloadCustomElement(
   data: NProgressPreloader.ICustomResourceData,
-  instance: Module<any, any, any>
+  instance: Module<any, any, any>,
 ) {
   return new Promise<void>((resolve) => {
     const { targetProgress } = data;

package/src/components/ProgressPreloader/utils/preloadImage.ts

@@ -1,6 +1,6 @@
 export function preloadImage(
   imageProp: HTMLImageElement,
-  action: (isSuccess: boolean) => void
+  action: (isSuccess: boolean) => void,
 ) {
   if (imageProp.complete) {
     action(true);

package/src/components/ProgressPreloader/utils/preloadVideo.ts

@@ -1,6 +1,6 @@
 export function preloadVideo(
   video: HTMLVideoElement,
-  action: (isSuccess: boolean) => void
+  action: (isSuccess: boolean) => void,
 ) {
   if (video.readyState > 0) {
     action(true);

package/src/components/ScrollBar/Bar/index.ts

@@ -123,10 +123,10 @@ export default class Bar {
     const { outer, thumb, props } = this;
 
     this._listeners.push(
-      addEventListener(outer, 'mouseenter', () => this._handleHover(true))
+      addEventListener(outer, 'mouseenter', () => this._handleHover(true)),
     );
     this._listeners.push(
-      addEventListener(outer, 'mouseleave', () => this._handleHover(false))
+      addEventListener(outer, 'mouseleave', () => this._handleHover(false)),
     );
 
     this._scrollEvent = onScroll({
@@ -189,7 +189,7 @@ export default class Bar {
 
       this._actionTimeout = setTimeout(
         () => this.outer.classList.remove(actionClassName),
-        500
+        500,
       );
     }
 
@@ -274,13 +274,13 @@ export default class Bar {
       if (isHorizontal) {
         const barSize = clamp(
           this._outerWidth / (scrollWidth / (scrollWidth - scrollLine)),
-          [minSize, Infinity]
+          [minSize, Infinity],
         );
         thumb.style.width = `${barSize}px`;
       } else {
         const barSize = clamp(
           this._outerHeight / (scrollHeight / (scrollHeight - scrollLine)),
-          [minSize, Infinity]
+          [minSize, Infinity],
         );
         thumb.style.height = `${barSize}px`;
       }

package/src/components/ScrollBar/index.ts

@@ -13,8 +13,10 @@ export type { NScrollBar };
  */
 export class ScrollBar<
   StaticProps extends NScrollBar.IStaticProps = NScrollBar.IStaticProps,
-  ChangeableProps extends NScrollBar.IChangeableProps = NScrollBar.IChangeableProps,
-  CallbacksTypes extends NScrollBar.ICallbacksTypes = NScrollBar.ICallbacksTypes
+  ChangeableProps extends
+    NScrollBar.IChangeableProps = NScrollBar.IChangeableProps,
+  CallbacksTypes extends
+    NScrollBar.ICallbacksTypes = NScrollBar.ICallbacksTypes,
 > extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
   protected _getDefaultProps() {
     return {
@@ -35,7 +37,7 @@ export class ScrollBar<
   }
 
   /** Scroll container */
-  private _container: Element | Window | SmoothScroll;
+  protected _container: Element | Window | SmoothScroll;
 
   /** Scroll container */
   get container() {
@@ -81,10 +83,10 @@ export class ScrollBar<
   }
 
   /** Horizontal scrollbar */
-  private _xBar: Bar;
+  protected _xBar: Bar;
 
   /** Vertical scrollbar */
-  private _yBar: Bar;
+  protected _yBar: Bar;
 
   constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
     super(initialProps, false);
@@ -123,7 +125,7 @@ export class ScrollBar<
     this.toggleClassName(
       this.scrollableElement,
       this.className('-parent'),
-      true
+      true,
     );
 
     // initialize the class
@@ -139,7 +141,7 @@ export class ScrollBar<
   }
 
   // Set Module Events
-  private _setEvents() {
+  protected _setEvents() {
     const { container, props } = this;
 
     // default resize handler
@@ -157,7 +159,7 @@ export class ScrollBar<
         ? container.addCallback(
             'resize',
             () => resizeHandler.debounceResize(),
-            { name: this.name }
+            { name: this.name },
           )
         : undefined;
 

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

@@ -20,7 +20,7 @@ export const WithDefaultComponent: FC = () => {
             mollitia illum?
           </div>
         ),
-        200
+        200,
       )}
     </div>
   );

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

@@ -37,7 +37,7 @@ export const WithInnerScrollComponent: FC = () => {
             mollitia illum?
           </div>
         ),
-        40
+        40,
       )}
     </div>
   );

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

@@ -41,7 +41,7 @@ export const WithSmoothScrollComponent: FC = () => {
               mollitia illum?
             </div>
           ),
-          40
+          40,
         )}
       </div>
     </div>

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

@@ -15,9 +15,9 @@ export const Default: StoryFn<typeof WithDefaultComponent> = (props) => (
 );
 
 export const WithSmoothScroll: StoryFn<typeof WithSmoothScrollComponent> = (
-  props
+  props,
 ) => <WithSmoothScrollComponent {...props} />;
 
 export const WithInnerScroll: StoryFn<typeof WithInnerScrollComponent> = (
-  props
+  props,
 ) => <WithInnerScrollComponent {...props} />;

package/src/components/ScrollView/index.ts

@@ -12,8 +12,10 @@ export type { NScrollView };
  */
 export class ScrollView<
   StaticProps extends NScrollView.IStaticProps = NScrollView.IStaticProps,
-  ChangeableProps extends NScrollView.IChangeableProps = NScrollView.IChangeableProps,
-  CallbacksTypes extends NScrollView.ICallbacksTypes = NScrollView.ICallbacksTypes
+  ChangeableProps extends
+    NScrollView.IChangeableProps = NScrollView.IChangeableProps,
+  CallbacksTypes extends
+    NScrollView.ICallbacksTypes = NScrollView.ICallbacksTypes,
 > extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
   protected _getDefaultProps() {
     return {
@@ -127,7 +129,7 @@ export class ScrollView<
   }
 
   /** Set view events */
-  private _setViewEvents() {
+  protected _setViewEvents() {
     if (!this._isIntersectionObserverSupported) {
       return;
     }
@@ -148,11 +150,11 @@ export class ScrollView<
         root: props.intersectionRoot,
         threshold: 0,
         rootMargin: `0px ${xMargin}px ${yMargin}px 0px`,
-      }
+      },
     );
 
-    this.elements.forEach((element) =>
-      this._intersectionObserverIn?.observe(element)
+    this.elements.forEach(
+      (element) => this._intersectionObserverIn?.observe(element),
     );
 
     if (props.states === 'inout') {
@@ -162,11 +164,11 @@ export class ScrollView<
           root: props.intersectionRoot,
           threshold: 0,
           rootMargin: '0px 0px 0px 0px',
-        }
+        },
       );
 
-      this.elements.forEach((element) =>
-        this._intersectionObserverOut?.observe(element)
+      this.elements.forEach(
+        (element) => this._intersectionObserverOut?.observe(element),
       );
     }
   }
@@ -219,7 +221,7 @@ export class ScrollView<
       props.direction === 'horizontal'
         ? (bounding.left - rootBounding.left) / rootBounding.width
         : (bounding.top - rootBounding.top) / rootBounding.height,
-      [0, 1]
+      [0, 1],
     );
 
     return progress * props.maxDelay;
@@ -243,7 +245,7 @@ export class ScrollView<
   protected _handleInOut(
     elementProp: NScrollView.IElement,
     isInViewport: boolean,
-    delay = 0
+    delay = 0,
   ) {
     const { classToToggle } = this.props;
     const element = elementProp;

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

@@ -39,7 +39,7 @@ export const Component: FC = () => {
             {index} Lorem ipsum dolor sit amet consectetur adipisicing elit.
           </div>
         ),
-        200
+        200,
       )}
     </div>
   );

package/src/components/SectionScrollProgress/index.ts

@@ -12,9 +12,12 @@ 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
+  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 {

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

@@ -14,5 +14,5 @@ export const Default: StoryFn<typeof DefalultComponent> = (props) => (
 );
 
 export const WithCustomScroll: StoryFn<typeof WithCustomScrollComponent> = (
-  props
+  props,
 ) => <WithCustomScrollComponent {...props} />;

package/src/components/SlideProgress/index.ts

@@ -0,0 +1,226 @@
+import { Component as ComponentClass } from '@/base/Component';
+import { NSlideProgress } from './types';
+import { clamp, lerp } from '@/utils/math';
+import { normalizeWheel } from '@/utils/scroll/normalizeWheel';
+import { AnimationFrame } from '../AnimationFrame';
+import { DraggerMove, NDraggerMove } from '../DraggerMove';
+import { Timeline } from '../Timeline';
+
+export type { NSlideProgress };
+
+/**
+ * Slide progress handler
+ */
+export class SlideProgress<
+  StaticProps extends NSlideProgress.IStaticProps = NSlideProgress.IStaticProps,
+  ChangeableProps extends
+    NSlideProgress.IChangeableProps = NSlideProgress.IChangeableProps,
+  CallbacksTypes extends
+    NSlideProgress.ICallbacksTypes = NSlideProgress.ICallbacksTypes,
+> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      min: 0,
+      max: 3,
+      step: 1,
+      ease: 0.1,
+      friction: 0.5,
+      hasDrag: true,
+      dragSpeed: 1,
+      dragDirection: 'y',
+      hasWheel: true,
+      wheelSpeed: 1,
+    };
+  }
+
+  /** Animation frame */
+  protected _animationFrame: AnimationFrame;
+
+  /** Dragger events */
+  protected _dragger: DraggerMove;
+
+  /** Progress (current and target) */
+  protected _progressLerp: NSlideProgress.IWithLerp = { current: 0, target: 0 };
+
+  /** Progress */
+  get progress() {
+    return this._progressLerp.current;
+  }
+
+  /** Stepped progress */
+  get steppedProgress() {
+    return this._getNearestStep(this._progressLerp.current);
+  }
+
+  /** Progress timeline */
+  protected _timelineTo?: Timeline;
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    const { container } = this.props;
+
+    // create animation frame
+    this._animationFrame = new AnimationFrame();
+    this._animationFrame.addCallback('frame', () =>
+      this._handleAnimationFrame(),
+    );
+
+    // create dragger
+    this._dragger = new DraggerMove({ container });
+    this._dragger.addCallback('move', (event) => this._handleDrag(event));
+    this._dragger.addCallback('start', (event) =>
+      event.event.stopPropagation(),
+    );
+
+    // add wheel event
+    this.addEventListener(container, 'wheel', (event) =>
+      this._handleWheel(event),
+    );
+
+    // initialize the class
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  protected _onPropsMutate() {
+    super._onPropsMutate();
+
+    this._dragger.changeProps({ isEnabled: this.props.hasDrag });
+  }
+
+  /** Handle wheel event */
+  protected _handleWheel(event: WheelEvent) {
+    if (this._timelineTo || !this.props.hasWheel) {
+      return;
+    }
+
+    const { _progressLerp: progress } = this;
+    const { container, min, max, wheelSpeed } = this.props;
+
+    const wheel = normalizeWheel(event);
+    const y = (wheel.pixelY / container.clientHeight) * wheelSpeed;
+
+    progress.target = clamp(progress.target + y, [min, max]);
+
+    this._animationFrame.play();
+  }
+
+  /** Handler drag move event */
+  protected _handleDrag({ step }: NDraggerMove.IMoveParameter) {
+    if (this._timelineTo) {
+      return;
+    }
+
+    const { _progressLerp: progress } = this;
+    const { container, dragSpeed, hasDrag, dragDirection, min, max } =
+      this.props;
+
+    if (!hasDrag) {
+      return;
+    }
+
+    const defaultIterator = dragDirection === 'y' ? step.y : step.x;
+    const iterator = (defaultIterator * dragSpeed) / container.clientHeight;
+
+    progress.target = clamp(progress.target - iterator, [min, max]);
+
+    this._animationFrame.play();
+  }
+
+  /** Get nearest stepped value to given progress */
+  protected _getNearestStep(value: number) {
+    return Math.round(value / this.props.step) * this.props.step;
+  }
+
+  /** Callback on animation frame */
+  protected _handleAnimationFrame() {
+    const { _progressLerp: progress } = this;
+    const { ease, friction, step } = this.props;
+    const { easeMultiplier } = this._animationFrame;
+
+    const nearestSteppedProgress = this._getNearestStep(progress.target);
+
+    if (!this._timelineTo) {
+      progress.target = lerp(
+        progress.target,
+        nearestSteppedProgress,
+        friction * ease * easeMultiplier,
+      );
+
+      this._updateCurrentProgress(ease * easeMultiplier);
+
+      if (
+        progress.current === progress.target &&
+        progress.current % step === 0
+      ) {
+        this._animationFrame.pause();
+      }
+    }
+
+    this.render();
+  }
+
+  /** Render scene */
+  public render() {
+    this.callbacks.tbt('render', undefined);
+  }
+
+  /** Interpolate current progress & launch callbacks if needed */
+  protected _updateCurrentProgress(ease: number) {
+    const progress = this._progressLerp;
+
+    const prevSteppedProgress = this._getNearestStep(progress.current);
+
+    progress.current = lerp(progress.current, progress.target, ease);
+
+    const nextSteppedProgress = this._getNearestStep(progress.current);
+
+    if (prevSteppedProgress !== nextSteppedProgress) {
+      this.callbacks.tbt('step', undefined);
+    }
+  }
+
+  /** Animate progress to a certain value */
+  public to({
+    value,
+    duration = 500,
+    onProgress,
+    onEnd,
+  }: NSlideProgress.IToProps) {
+    const startValue = this._progressLerp.current;
+
+    const timeline = new Timeline({ duration });
+    this._timelineTo = timeline;
+
+    timeline.addCallback('progress', (data) => {
+      this._progressLerp.target = lerp(startValue, value, data.easing);
+      this._updateCurrentProgress(1);
+
+      onProgress?.(data);
+    });
+
+    timeline.addCallback('end', () => {
+      this._timelineTo?.destroy();
+      this._timelineTo = undefined;
+
+      onEnd?.();
+    });
+
+    timeline.play();
+
+    this._animationFrame.play();
+  }
+
+  /** Destroy the module */
+  protected _destroy() {
+    super._destroy();
+
+    this._animationFrame.destroy();
+    this._dragger.destroy();
+
+    this._timelineTo?.destroy();
+  }
+}

package/src/components/SlideProgress/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/SlideProgress',
+  component: Component,
+};
+
+export default meta;
+
+export const Default: StoryObj<TComponent> = {};