vevet 2.17.0 → 3.0.0-beta.0

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

@@ -0,0 +1,80 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { ProgressPreloader } from '..';
+
+export const Component: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [progress, setProgress] = useState(0);
+  const [isTestElementInDom, setIsTestElementInDom] = useState(true);
+  const [isCustomResourceLoaded, setIsCustomResourceLoaded] = useState(false);
+
+  useEffect(() => {
+    const container = containerRef.current;
+
+    if (!container) {
+      return undefined;
+    }
+
+    const instance = new ProgressPreloader({
+      container,
+      canPreloadImages: true,
+      canPreloadVideos: true,
+    });
+
+    instance.addCallback('progress', ({ progress: progressProp }) => {
+      setProgress(progressProp);
+    });
+
+    instance.addCallback('resourceLoad', (data) => {
+      // eslint-disable-next-line no-console
+      console.log('resourceLoad', data);
+    });
+
+    setIsTestElementInDom(false);
+
+    const timeout = setTimeout(() => setIsCustomResourceLoaded(true), 2000);
+
+    return () => {
+      instance?.destroy();
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className="v-preloader"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#ccc',
+          fontSize: 40,
+        }}
+      >
+        {(progress * 100).toFixed(0).padStart(2, '0')}
+      </div>
+
+      <img src="https://picsum.photos/400/600" alt="" crossOrigin="anonymous" />
+      <img src="https://picsum.photos/400/601" alt="" crossOrigin="anonymous" />
+      <img src="https://picsum.photos/400/602" alt="" crossOrigin="anonymous" />
+
+      {isTestElementInDom && (
+        <video
+          autoPlay
+          muted
+          controls
+          src="https://www.shutterstock.com/shutterstock/videos/1080319025/preview/stock-footage-abstract-tech-earth-globalization-in-d-motion-graphic-concept-transmit-ai-networking-on-fiber.mp4"
+        />
+      )}
+
+      <p
+        className="js-preload"
+        data-is-loaded={isCustomResourceLoaded ? 'true' : 'false'}
+      >
+        Custom preload
+      </p>
+    </>
+  );
+};

package/src/components/ProgressPreloader/types.ts

@@ -0,0 +1,82 @@
+import { NPreloader } from '../Preloader';
+
+export namespace NProgressPreloader {
+  export interface IStaticProps extends NPreloader.IStaticProps {
+    /**
+     * Default resources quantity
+     * @default 0
+     */
+    resourcesQuantity?: number;
+    /**
+     * Preload images
+     * @default true
+     */
+    canPreloadImages?: boolean;
+    /**
+     * Preload videos
+     * @default false
+     */
+    canPreloadVideos?: boolean;
+    /**
+     * Preload custom resources by selector
+     * These elements should have such properties as `isLoaded` or `isComplete` (all boolean or float - from 0 to 1)
+     * or the attribute `data-is-loaded` (string with float or non-empty string for true).
+     * Custom elements may also have the attribute `data-load-count` (number) which means the element weight.
+     * @default '.js-preload'
+     */
+    preloadCustomSelector?: string;
+    /**
+     * If you enable images, video, or custom loaders,
+     * all these resources will be preloaded. In cases when you may want not
+     * to preload some resources, you may add to it the classname specified here.
+     * @default 'js-preload-ignore'
+     */
+    preloadIgnoreClassName?: string;
+    /**
+     * Linear interpolation. If `false`, animation will not be used.
+     * @default 0.1
+     */
+    lerp?: number | false;
+    /**
+     * If `true` and `lerp` is less than `1`, interpolation will be stopped
+     * and a `Timeline` will be launched to end the progress calculation.
+     * If `false`, the progress smooth calculation will end via linear interpolation.
+     * @default 500
+     */
+    forceEnd?: number | false;
+  }
+
+  export interface IChangeableProps extends NPreloader.IChangeableProps {}
+
+  export interface ICallbacksTypes extends NPreloader.ICallbacksTypes {
+    progress: IProgressParameter;
+    resourceLoad: IResourceLoadParameter;
+  }
+
+  export interface IProgressParameter {
+    progress: number;
+    loadProgress: number;
+  }
+
+  export interface IResourceLoadParameter {
+    element?: Element;
+    atProgress: number;
+    loadProgress: number;
+    isSuccess: boolean;
+  }
+
+  export interface IHandleLoadedResourceParameter {
+    element?: Element;
+    isSuccess: boolean;
+  }
+
+  export interface ICustomResource extends Element {
+    isLoaded?: boolean | number;
+    isComplete?: boolean | number;
+  }
+
+  export interface ICustomResourceData {
+    element: ICustomResource;
+    targetProgress: number;
+  }
+}

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

@@ -0,0 +1,73 @@
+import { Module } from '@/base/Module';
+import { NProgressPreloader } from '../types';
+
+function getLoadProgress({
+  element,
+  targetProgress,
+}: NProgressPreloader.ICustomResourceData) {
+  if (typeof element.isComplete !== 'undefined') {
+    if (typeof element.isComplete === 'boolean' && element.isComplete) {
+      return targetProgress;
+    }
+
+    if (typeof element.isComplete === 'number') {
+      return element.isComplete;
+    }
+
+    return 0;
+  }
+
+  if (typeof element.isLoaded !== 'undefined') {
+    if (typeof element.isLoaded === 'boolean' && element.isLoaded) {
+      return targetProgress;
+    }
+
+    if (typeof element.isLoaded === 'number') {
+      return element.isLoaded;
+    }
+  }
+
+  const isLoadedAttr = element.getAttribute('data-is-loaded');
+  if (
+    isLoadedAttr !== null &&
+    isLoadedAttr !== '' &&
+    isLoadedAttr !== 'false'
+  ) {
+    const isLoadedAttrNum = parseFloat(isLoadedAttr);
+
+    // if the value is non-numeric, we think that the resource is loaded
+    if (Number.isNaN(isLoadedAttrNum)) {
+      return targetProgress;
+    }
+
+    return isLoadedAttrNum;
+  }
+
+  return 0;
+}
+
+export function preloadCustomElement(
+  data: NProgressPreloader.ICustomResourceData,
+  instance: Module<any, any, any>
+) {
+  return new Promise<void>((resolve) => {
+    const { targetProgress } = data;
+    const loadProgress = getLoadProgress(data);
+
+    if (loadProgress >= targetProgress) {
+      resolve();
+
+      return;
+    }
+
+    setTimeout(() => {
+      if (instance.isDestroyed) {
+        return;
+      }
+
+      preloadCustomElement(data, instance)
+        .then(() => resolve())
+        .catch(() => {});
+    }, 50);
+  });
+}

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

@@ -0,0 +1,18 @@
+export function preloadImage(
+  imageProp: HTMLImageElement,
+  action: (isSuccess: boolean) => void
+) {
+  if (imageProp.complete) {
+    action(true);
+
+    return;
+  }
+
+  const image = new Image();
+
+  image.addEventListener('load', () => action(true));
+  image.addEventListener('error', () => action(false));
+
+  image.crossOrigin = 'anonymous';
+  image.src = imageProp.currentSrc || imageProp.src;
+}

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

@@ -0,0 +1,19 @@
+export function preloadVideo(
+  video: HTMLVideoElement,
+  action: (isSuccess: boolean) => void
+) {
+  if (video.readyState > 0) {
+    action(true);
+
+    return;
+  }
+
+  if (video.preload === 'none') {
+    action(false);
+
+    return;
+  }
+
+  video.addEventListener('error', () => action(false));
+  video.addEventListener('loadedmetadata', () => action(true));
+}

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

@@ -0,0 +1,306 @@
+import { IAddEventListener, addEventListener } from 'vevet-dom';
+import { ICoords, IBarProps } from './types';
+import { IRemovable } from '@/types/general';
+import { DraggerMove, NDraggerMove } from '@/components/DraggerMove';
+import { IOnScrollCallbackParameter, onScroll } from '@/utils/scroll/onScroll';
+import { clamp } from '@/utils/math';
+import { getScrollValues } from '@/utils/scroll';
+
+export default class Bar {
+  private _outer: HTMLElement;
+
+  get outer() {
+    return this._outer;
+  }
+
+  private _thumb: HTMLElement;
+
+  get thumb() {
+    return this._thumb;
+  }
+
+  get prefix() {
+    return this.props.prefix;
+  }
+
+  get isHorizontal() {
+    return this.props.direction === 'x';
+  }
+
+  get isVertical() {
+    return !this.isHorizontal;
+  }
+
+  get scrollElement() {
+    return this.props.container instanceof Window
+      ? document.documentElement
+      : this.props.container;
+  }
+
+  get scrollLine() {
+    const { scrollElement } = this;
+
+    return this.isHorizontal
+      ? scrollElement.scrollWidth - scrollElement.clientWidth
+      : scrollElement.scrollHeight - scrollElement.clientHeight;
+  }
+
+  get scrollWidth() {
+    return this.scrollElement.scrollWidth;
+  }
+
+  get scrollHeight() {
+    return this.scrollElement.scrollHeight;
+  }
+
+  private _outerHeight: number;
+
+  private _outerWidth: number;
+
+  private _thumbHeight: number;
+
+  private _thumbWidth: number;
+
+  private _prevScrollValue: number;
+
+  private _coordsAtDragStart: ICoords;
+
+  private _listeners?: IAddEventListener[];
+
+  private _scrollEvent?: IRemovable;
+
+  private _actionTimeout?: NodeJS.Timeout;
+
+  private _dragger?: DraggerMove;
+
+  get props() {
+    return this._props;
+  }
+
+  constructor(private _props: IBarProps) {
+    const { direction, domParent, container, canAutoHide } = _props;
+
+    // set default vars
+    this._outerHeight = 0;
+    this._outerWidth = 0;
+    this._thumbHeight = 0;
+    this._thumbWidth = 0;
+    this._prevScrollValue = 0;
+    this._coordsAtDragStart = { scrollLeft: 0, scrollTop: 0 };
+
+    // create container
+    const outer = document.createElement('div');
+    this._outer = outer;
+    outer.classList.add(this.className(''));
+    outer.classList.add(this.className(`_${direction}`));
+    if (container instanceof Window) {
+      outer.classList.add(this.className('_in-window'));
+    }
+    outer.classList.toggle(this.className('_auto-hide'), canAutoHide);
+    domParent.append(outer);
+
+    // create a thumb
+    const thumb = document.createElement('div');
+    this._thumb = thumb;
+    thumb.classList.add(this.className('__thumb'));
+    thumb.classList.add(this.className(`__thumb_${direction}`));
+    outer.append(thumb);
+
+    // set events
+    this._setEvents();
+  }
+
+  private className(value: string) {
+    return `${this.props.prefix}${value}`;
+  }
+
+  /** Set scrolblar events */
+  private _setEvents() {
+    if (!this._listeners) {
+      this._listeners = [];
+    }
+
+    const { outer, thumb, props } = this;
+
+    this._listeners.push(
+      addEventListener(outer, 'mouseenter', () => this._handleHover(true))
+    );
+    this._listeners.push(
+      addEventListener(outer, 'mouseleave', () => this._handleHover(false))
+    );
+
+    this._scrollEvent = onScroll({
+      container: props.container,
+      callback: (data) => this._handleScroll(data),
+    });
+
+    if (this.props.isDraggable) {
+      this._dragger = new DraggerMove({ container: thumb });
+
+      this._dragger.addCallback('start', () => {
+        this._coordsAtDragStart = getScrollValues(this.props.container)!;
+      });
+
+      this._dragger.addCallback('move', (data) => this._handleThumbDrag(data));
+    }
+  }
+
+  /** Remove events */
+  private _removeEvents() {
+    this._listeners?.forEach((listener) => listener.remove());
+    this._scrollEvent?.remove();
+    this._dragger?.destroy();
+  }
+
+  /** Handle hover state */
+  private _handleHover(isHovered: boolean) {
+    const className = this.className('_is-hovered');
+
+    this.outer.classList.toggle(className, isHovered);
+  }
+
+  /** Handle Scroll Event */
+  private _handleScroll({ scrollLeft, scrollTop }: IOnScrollCallbackParameter) {
+    let hasChanged = false;
+
+    // check if changes happened
+    if (this.isHorizontal) {
+      hasChanged = scrollLeft !== this._prevScrollValue;
+      this._prevScrollValue = scrollLeft;
+    } else {
+      hasChanged = scrollTop !== this._prevScrollValue;
+      this._prevScrollValue = scrollTop;
+    }
+
+    // continue if there are changes
+    if (!hasChanged) {
+      return;
+    }
+
+    // set auto hide
+    if (this.props.canAutoHide && hasChanged) {
+      const actionClassName = this.className('_in-action');
+
+      this.outer.classList.add(actionClassName);
+
+      if (this._actionTimeout) {
+        clearTimeout(this._actionTimeout);
+      }
+
+      this._actionTimeout = setTimeout(
+        () => this.outer.classList.remove(actionClassName),
+        500
+      );
+    }
+
+    // render elements
+    this._renderThumb();
+  }
+
+  /** Event on dragger move */
+  private _handleThumbDrag({
+    event,
+    coords,
+    start,
+  }: NDraggerMove.ICallbacksTypes['move']) {
+    event.preventDefault();
+
+    const { scrollLine } = this;
+    const { container } = this.props;
+
+    // calculate scroll iterators
+    const leftIterator =
+      ((coords.x - start.x) / (this._outerWidth - this._thumbWidth)) *
+      scrollLine;
+    const topIterator =
+      ((coords.y - start.y) / (this._outerHeight - this._thumbHeight)) *
+      scrollLine;
+
+    // calculate new scroll values
+    let { scrollLeft, scrollTop } = this._coordsAtDragStart;
+    if (this.isHorizontal) {
+      scrollLeft += leftIterator;
+    } else {
+      scrollTop += topIterator;
+    }
+
+    // apply the values
+    container.scrollTo({
+      top: scrollTop,
+      left: scrollLeft,
+      behavior:
+        'isSmoothScroll' in this.props.container
+          ? this.props.scrollBehavior
+          : 'auto',
+    });
+  }
+
+  /** Render thumb */
+  private _renderThumb() {
+    const progress = clamp(this._prevScrollValue / this.scrollLine, [0, 1]);
+
+    const x = this.isHorizontal
+      ? (this._outerWidth - this._thumbWidth) * progress
+      : 0;
+    const y = this.isVertical
+      ? (this._outerHeight - this._thumbHeight) * progress
+      : 0;
+
+    this._thumb.style.transform = `translate(${x}px, ${y}px)`;
+  }
+
+  /** Resize the scene */
+  public resize() {
+    const {
+      outer,
+      thumb,
+      scrollLine,
+      scrollWidth,
+      scrollHeight,
+      isHorizontal,
+    } = this;
+
+    const { minSize, hasAutoSize } = this.props;
+
+    // get outer sizes
+    this._outerHeight = outer.clientHeight;
+    this._outerWidth = outer.clientWidth;
+
+    // calculate thumb sizes
+    if (hasAutoSize) {
+      if (isHorizontal) {
+        const barSize = clamp(
+          this._outerWidth / (scrollWidth / (scrollWidth - scrollLine)),
+          [minSize, Infinity]
+        );
+        thumb.style.width = `${barSize}px`;
+      } else {
+        const barSize = clamp(
+          this._outerHeight / (scrollHeight / (scrollHeight - scrollLine)),
+          [minSize, Infinity]
+        );
+        thumb.style.height = `${barSize}px`;
+      }
+    }
+
+    // get thumb sizes
+    this._thumbHeight = thumb.clientHeight;
+    this._thumbWidth = thumb.clientWidth;
+
+    // define if empty
+    outer.classList.toggle(this.className('_is-empty'), scrollLine === 0);
+
+    // render elements
+    this._renderThumb();
+  }
+
+  public destroy() {
+    this._removeEvents();
+
+    if (this._actionTimeout) {
+      clearTimeout(this._actionTimeout);
+    }
+
+    this._outer.remove();
+  }
+}

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

@@ -0,0 +1,30 @@
+import type { SmoothScroll } from '@/components/SmoothScroll';
+
+export interface IBarProps {
+  /** Scrollable container */
+  container: Window | SmoothScroll | Element;
+  /** DOM parent, where the scrollbar will be appended */
+  domParent: Element;
+  /** Scrollbar type: horizontal or vertical */
+  direction: 'x' | 'y';
+  /** Hide scrollbars when not active */
+  canAutoHide: boolean;
+  /** Use auto-size */
+  hasAutoSize: boolean;
+  /**
+   * Minimum size of the scrollbar thumb.
+   * Works when `hasAutoSize` is `true`
+   */
+  minSize: number;
+  /** Prefix */
+  prefix: string;
+  /** Scrollbars are draggable */
+  isDraggable: boolean;
+  /** ScrollBehavior when dragging (works only for `SmoothScroll`) */
+  scrollBehavior: 'smooth' | 'auto';
+}
+
+export interface ICoords {
+  scrollLeft: number;
+  scrollTop: number;
+}