vevet 2.16.1 → 3.0.0-beta.0

package/src/components/DraggerMove/types.ts

@@ -0,0 +1,24 @@
+import { NDraggerBase } from '../DraggerBase';
+
+export namespace NDraggerMove {
+  export interface IStaticProps extends NDraggerBase.IStaticProps {
+    /**
+     * Disable pointer events
+     * when the difference in coordinates is more than the value (px).
+     *
+     * @default false
+     */
+    disablePointerEventsAt?: number | false;
+  }
+
+  export interface IChangeableProps extends NDraggerBase.IChangeableProps {}
+
+  export interface ICallbacksTypes extends NDraggerBase.ICallbacksTypes {
+    move: IMoveParameter;
+  }
+
+  export interface IMoveParameter extends NDraggerBase.IStartParameter {
+    step: NDraggerBase.IVector2;
+    diff: NDraggerBase.IVector2;
+  }
+}

package/src/components/Preloader/index.ts

@@ -0,0 +1,198 @@
+import { selectOne } from 'vevet-dom';
+import PCancelable from 'p-cancelable';
+import { NPreloader } from './types';
+import { Component as ComponentClass } from '@/base/Component';
+import { normalizedTimeoutCallback } from '@/utils/common';
+
+export type { NPreloader };
+
+/**
+ * Page preloader
+ */
+export class Preloader<
+  StaticProps extends NPreloader.IStaticProps = NPreloader.IStaticProps,
+  ChangeableProps extends NPreloader.IChangeableProps = NPreloader.IChangeableProps,
+  CallbacksTypes extends NPreloader.ICallbacksTypes = NPreloader.ICallbacksTypes
+> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      container: `#${this.prefix}`,
+      hideAnimation: 250,
+    };
+  }
+
+  get prefix() {
+    return `${this.app.prefix}preloader`;
+  }
+
+  /** Preloader container */
+  private _container?: HTMLElement | false;
+
+  /** Preloader container */
+  get container() {
+    return this._container;
+  }
+
+  /** Preloader start time */
+  private _startTime: number;
+
+  /** Preloader start time */
+  get startTime() {
+    return this._startTime;
+  }
+
+  /** Preloader end time */
+  private _endTime: number;
+
+  /** Preloader end time */
+  get endTime() {
+    return this._endTime;
+  }
+
+  /**
+   * Total time of page loading before the preloader is to be hidden
+   */
+  get totalTime() {
+    return this.endTime - this.startTime;
+  }
+
+  /** Preloader is to be hidden */
+  private _isToBeHidden: boolean;
+
+  /** Preloader is hidden */
+  private _isHidden: boolean;
+
+  /** Preloader is hidden */
+  get isHidden() {
+    return this._isHidden;
+  }
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    // get preloader container
+    if (this.props.container) {
+      const container = selectOne(this.props.container);
+
+      if (container instanceof HTMLElement) {
+        this._container = container;
+        this.toggleClassName(container, this.className(''), true);
+      }
+    }
+
+    // set default vars
+    this._startTime = +new Date();
+    this._endTime = Infinity;
+    this._isToBeHidden = false;
+    this._isHidden = false;
+
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  /** Init the class */
+  protected _init() {
+    super._init();
+
+    this._setEvents();
+  }
+
+  /** Set module event */
+  protected _setEvents() {
+    const loadEvent = this._onLoaded();
+
+    loadEvent
+      .then(() => {
+        if (this.isDestroyed) {
+          return;
+        }
+
+        this._endTime = +new Date();
+        this._handleLoaded();
+      })
+      .catch(() => {});
+
+    this.addDestroyableAction(() => loadEvent.cancel());
+  }
+
+  /** Catch the moment when the page is fully loaded */
+  protected _onLoaded() {
+    return this.app.onPageLoad();
+  }
+
+  /** When the page is fully loaded */
+  private _handleLoaded() {
+    this.callbacks.tbt('loaded', undefined);
+
+    // hide the preloader
+    if (typeof this.props.hideAnimation !== 'boolean') {
+      this.hide();
+    }
+  }
+
+  /** Hide the preloader */
+  public hide(
+    duration = typeof this.props.hideAnimation !== 'boolean'
+      ? this.props.hideAnimation
+      : 250
+  ) {
+    this._isToBeHidden = true;
+    this.callbacks.tbt('hide', undefined);
+
+    return new PCancelable((resolve: (...arg: any) => void) => {
+      const container = this._container;
+
+      // if container is not to be hidden
+      if (!container) {
+        this._handleHidden();
+        resolve();
+
+        return;
+      }
+
+      // if need to hide the container
+      container.style.transition = `opacity ${duration}ms, visibility ${duration}ms`;
+      container.style.opacity = '0';
+      container.style.visibility = 'hidden';
+
+      const timeout = normalizedTimeoutCallback(() => {
+        container.style.display = 'none';
+
+        this._handleHidden();
+        resolve();
+      }, duration);
+
+      this.addDestroyableAction(() => timeout.clear());
+    });
+  }
+
+  /** Handle the moment when the preloader is hidden */
+  private _handleHidden() {
+    this._isHidden = true;
+    this.callbacks.tbt('hidden', undefined);
+  }
+
+  /** Callback for the moment when the preloader starts hiding */
+  public onHide(action: () => void) {
+    if (this._isToBeHidden) {
+      action();
+
+      return undefined;
+    }
+
+    return this.addCallback('hide', (() => action()) as any);
+  }
+
+  /** Callback for the moment when the preloader is hidden */
+  public onHidden(action: () => void) {
+    if (this._isHidden) {
+      action();
+
+      return undefined;
+    }
+
+    return this.addCallback('hidden', (() => action()) as any);
+  }
+}

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

@@ -0,0 +1,23 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Component } from '.';
+
+type TComponent = typeof Component;
+
+const meta: Meta<TComponent> = {
+  title: 'Components/Preloader',
+  component: Component,
+};
+
+export default meta;
+
+export const Default: StoryObj<TComponent> = {
+  args: {
+    hideAnimation: 750,
+  },
+};
+
+export const WithNoHide: StoryObj<TComponent> = {
+  args: {
+    hideAnimation: false,
+  },
+};

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

@@ -0,0 +1,31 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { Preloader, NPreloader } from '..';
+
+interface IProps extends Pick<NPreloader.IChangeableProps, 'hideAnimation'> {}
+
+export const Component: FC<IProps> = ({ hideAnimation }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    const instance = new Preloader({
+      container: ref.current,
+      hideAnimation,
+    });
+
+    return () => instance.destroy();
+  }, [hideAnimation]);
+
+  return (
+    <>
+      <div ref={ref} className="v-preloader" />
+
+      <img src="https://picsum.photos/400/600" alt="" />
+      <img src="https://picsum.photos/400/601" alt="" />
+      <img src="https://picsum.photos/400/602" alt="" />
+    </>
+  );
+};

package/src/components/Preloader/types.ts

@@ -0,0 +1,28 @@
+import { NComponent } from '@/base/Component/types';
+
+export namespace NPreloader {
+  export interface IStaticProps extends NComponent.IStaticProps {
+    /**
+     * The preloader container. You may use a CSS selector, the element itself
+     * or false if you need only preloader callbacks
+     * @default '#v-preloader'
+     */
+    container?: string | HTMLElement | false;
+  }
+
+  export interface IChangeableProps extends NComponent.IChangeableProps {
+    /**
+     * Automatically hide the preloader container.
+     * Set `false` to disable hiding animation (do it manually).
+     * Set `number` to define animation duration.
+     * @default 250
+     */
+    hideAnimation?: false | number;
+  }
+
+  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
+    loaded: undefined;
+    hide: undefined;
+    hidden: undefined;
+  }
+}

package/src/components/ProgressPreloader/index.ts

@@ -0,0 +1,346 @@
+import { selectAll } from 'vevet-dom';
+import PCancelable from 'p-cancelable';
+import { AnimationFrame } from '../AnimationFrame';
+import { Preloader } from '../Preloader';
+import { Timeline } from '../Timeline';
+import { NProgressPreloader } from './types';
+import { clamp, lerp } from '@/utils/math';
+import { preloadImage } from './utils/preloadImage';
+import { preloadVideo } from './utils/preloadVideo';
+import { preloadCustomElement } from './utils/preloadCustomElement';
+
+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
+> extends Preloader<StaticProps, ChangeableProps, CallbacksTypes> {
+  protected _getDefaultProps() {
+    return {
+      ...super._getDefaultProps(),
+      resourcesQuantity: 0,
+      canPreloadImages: true,
+      canPreloadVideos: false,
+      preloadCustomSelector: '.js-preload',
+      preloadIgnoreClassName: 'js-preload-ignore',
+      lerp: 0.1,
+      forceEnd: 500,
+    };
+  }
+
+  /** Images to be preloaded */
+  private _images: HTMLImageElement[];
+
+  /** Images to be preloaded */
+  get images() {
+    return this._images;
+  }
+
+  /** Videos to be preloaded */
+  private _videos: HTMLVideoElement[];
+
+  /** Videos to be preloaded */
+  get videos() {
+    return this._videos;
+  }
+
+  /** Custom resources to be preloaded */
+  private _customResources: NProgressPreloader.ICustomResourceData[];
+
+  /** Custom resources to be preloaded */
+  get customResources() {
+    return this._customResources;
+  }
+
+  private _resourcesQuantity: number;
+
+  /** Quantity of resources to be preloader */
+  get resourcesQuantity() {
+    return (
+      this._resourcesQuantity +
+      this.props.resourcesQuantity +
+      this.images.length +
+      this.videos.length +
+      this.customResources.length +
+      1
+    );
+  }
+
+  /** Quantity of loaded resources  */
+  private _loadedResourcesQuantity: number;
+
+  /** Quantity of loaded resources  */
+  get loadedResourcesQuantity() {
+    return clamp(this._loadedResourcesQuantity, [0, this.resourcesQuantity]);
+  }
+
+  /** Loading progress */
+  get loadProgress() {
+    return this.loadedResourcesQuantity / this.resourcesQuantity;
+  }
+
+  /** Preloader progress */
+  private _progress: number;
+
+  /** Preloader progress */
+  get progress() {
+    return this._progress;
+  }
+
+  protected set progress(val: number) {
+    this._progress = val;
+
+    this._handleProgressChange();
+  }
+
+  /** Animation frame for smooth progress calculation */
+  private _animationFrame?: AnimationFrame;
+
+  /** Timeline to finish progress animation */
+  private _endTimeline?: Timeline;
+
+  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
+    super(initialProps, false);
+
+    // set default vars
+    this._images = [];
+    this._videos = [];
+    this._customResources = [];
+    this._resourcesQuantity = 0;
+    this._loadedResourcesQuantity = 0;
+    this._progress = 0;
+
+    if (canInit) {
+      this.init();
+    }
+  }
+
+  protected _init() {
+    this._getResources();
+
+    super._init();
+  }
+
+  /** Set events */
+  protected _setEvents() {
+    super._setEvents();
+
+    const { lerp: lerpProp } = this.props;
+
+    // create animation frame if needed
+    if (typeof lerpProp === 'number') {
+      this._animationFrame = new AnimationFrame();
+
+      this._animationFrame.addCallback('frame', () => {
+        this.progress = lerp(this.progress, this.loadProgress, lerpProp);
+      });
+
+      this._animationFrame.play();
+    }
+
+    // iterate resources on page load
+    this.app
+      .onPageLoad()
+      .then(() => this._handleLoadedResource({ isSuccess: true }))
+      .catch(() => {});
+
+    // preload resources
+    this._preloadResources();
+  }
+
+  /** Get resources to be preloaded */
+  protected _getResources() {
+    const {
+      canPreloadImages,
+      canPreloadVideos,
+      preloadCustomSelector,
+      preloadIgnoreClassName,
+    } = this.props;
+
+    // get images
+    if (canPreloadImages) {
+      const images = selectAll('img');
+      images.forEach((image) => {
+        if (!image.classList.contains(preloadIgnoreClassName)) {
+          this._images.push(image);
+        }
+      });
+    }
+
+    // get videos
+    if (canPreloadVideos) {
+      const videos = selectAll('video');
+      videos.forEach((video) => {
+        if (!video.classList.contains(preloadIgnoreClassName)) {
+          this._videos.push(video);
+        }
+      });
+    }
+
+    // get custom resources
+    if (preloadCustomSelector) {
+      Array.from(selectAll(preloadCustomSelector)).forEach((element) => {
+        if (element.classList.contains(preloadIgnoreClassName)) {
+          return;
+        }
+
+        let loadCount = parseInt(
+          element.getAttribute('data-load-count') || '1',
+          10
+        );
+
+        loadCount = Number.isNaN(loadCount)
+          ? 1
+          : clamp(loadCount, [1, Infinity]);
+
+        for (let index = 1; index <= loadCount; index += 1) {
+          const targetProgress = index / loadCount;
+
+          this._customResources.push({
+            element,
+            targetProgress,
+          });
+        }
+      });
+    }
+  }
+
+  /** Catch the moment when the page is fully loaded */
+  protected _onLoaded() {
+    return new PCancelable((resolve: (...arg: any) => void) => {
+      let isCallbackDone = false;
+
+      this.callbacks.add(
+        'progress',
+        // @ts-ignore
+        ({ progress }) => {
+          if (progress >= 1 && !isCallbackDone) {
+            isCallbackDone = true;
+
+            resolve();
+          }
+        },
+        { isProtected: true, name: this.name }
+      );
+    });
+  }
+
+  /** Preload all resources */
+  protected _preloadResources() {
+    this.images.forEach((image) =>
+      preloadImage(image, (isSuccess) =>
+        this._handleLoadedResource({ element: image, isSuccess })
+      )
+    );
+
+    // preload videos
+    this.videos.forEach((video) =>
+      preloadVideo(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 })
+        )
+        .catch(() => {});
+    });
+  }
+
+  /** Event on resource loaded */
+  private _handleLoadedResource({
+    element,
+    isSuccess,
+  }: NProgressPreloader.IHandleLoadedResourceParameter) {
+    if (this.loadProgress >= 1) {
+      return;
+    }
+
+    this._loadedResourcesQuantity += 1;
+    this.callbacks.tbt('resourceLoad', {
+      element,
+      atProgress: this.progress,
+      loadProgress: this.loadProgress,
+      isSuccess,
+    });
+
+    // update progress if no animation frame
+    if (!this._animationFrame) {
+      this.progress = this.loadProgress;
+    }
+  }
+
+  /** Iterate quantity of loaded resources */
+  public iterateLoadedResources(quantityProp = 1) {
+    const quantity = Math.abs(quantityProp);
+
+    for (let index = 0; index < quantity; index += 1) {
+      this._handleLoadedResource({ isSuccess: true });
+    }
+  }
+
+  /** Iterate quantity of total resources */
+  public iterateResourcesQuantity(quantity = 1) {
+    this._resourcesQuantity += quantity;
+  }
+
+  /** Event on progress change */
+  protected _handleProgressChange() {
+    this.callbacks.tbt('progress', {
+      progress: this.progress,
+      loadProgress: this.loadProgress,
+    });
+
+    // if full progress,
+    // we hide the preloader
+    if (this.progress >= 1) {
+      // destroy animations
+      if (this._animationFrame) {
+        this._animationFrame.destroy();
+        this._animationFrame = undefined;
+      }
+
+      return;
+    }
+
+    // otherwise, we check if there's a need to launch a timeline
+    // to end the animation
+    if (
+      typeof this.props.forceEnd === 'number' &&
+      this.loadProgress >= 1 &&
+      !this._endTimeline
+    ) {
+      // destroy animation frame
+      if (this._animationFrame) {
+        this._animationFrame.destroy();
+        this._animationFrame = undefined;
+      }
+
+      // create a timeline
+      this._endTimeline = new Timeline({ duration: this.props.forceEnd });
+      const startProgress = this.progress;
+
+      this._endTimeline.addCallback('progress', (data) => {
+        const diff = 1 - startProgress;
+        this.progress = startProgress + diff * data.progress;
+      });
+
+      this._endTimeline.play();
+    }
+  }
+
+  /** Destroy the component */
+  protected _destroy() {
+    super._destroy();
+
+    this._animationFrame?.destroy();
+    this._endTimeline?.destroy();
+  }
+}

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