vevet 3.20.0 → 4.0.0-beta.1

package/src/Application/events/createViewport/types.ts

@@ -1,55 +0,0 @@
-import { NCallbacks } from '@/base/Callbacks/types';
-
-export namespace NViewport {
-  /**
-   * Callbacks parameter. Changes in viewport
-   */
-  export interface IChanges {
-    isWidthChanged: boolean;
-    isHeightChanged: boolean;
-    isOrientationChanged: boolean;
-  }
-
-  /**
-   * Available callbacks
-   */
-  export interface ICallbacksTypes extends NCallbacks.ITypes {
-    /**
-     * When the width is changed regardless of the height
-     */
-    width: IChanges;
-    /**
-     * When the height is changed regardless of the width
-     */
-    height: IChanges;
-    /**
-     * When both the width and height are changed
-     */
-    both: IChanges;
-    /**
-     * When only the width is changed
-     */
-    widthOnly: IChanges;
-    /**
-     * When only the height is changed
-     */
-    heightOnly: IChanges;
-    /**
-     * Any change
-     */
-    any: IChanges;
-  }
-}
-
-/** Viewport size types */
-export enum ESizeTypes {
-  Desktop = 'desktop',
-  Tablet = 'tablet',
-  Phone = 'phone',
-}
-
-/** Orientation types */
-export enum EOrientationTypes {
-  Landscape = 'landscape',
-  Portrait = 'portrait',
-}

package/src/Application/index.ts

@@ -1,204 +0,0 @@
-import version from '../version';
-import { NApplication } from './types';
-import { getDeviceInfo } from '@/utils/internal/getDeviceInfo';
-import { fetchWebpSupport } from '@/utils/internal/fetchWebpSupport';
-import { PCancelable } from '@/utils/common/PCancelable';
-import { createOnPageLoad } from './events/createOnPageLoad';
-import { createViewport, NViewport } from './events/createViewport';
-
-/**
- * Vevet Application. This is the base Vevet class
- * that should be initialized first.
- */
-export class Application {
-  /** Vevet version */
-  get version() {
-    return version;
-  }
-
-  private _props: NApplication.IProps;
-
-  /** Application properties */
-  get props() {
-    return this._props;
-  }
-
-  /** Default properties */
-  get defaultProps(): NApplication.IProps {
-    return {
-      tablet: 1199,
-      phone: 899,
-      prefix: 'v-',
-      easing: [0.25, 0.1, 0.25, 1],
-      resizeDebounce: 16,
-      shouldCheckWebpSupport: true,
-      widthDetection: 'boundingRect',
-    };
-  }
-
-  /** Vevet prefix */
-  get prefix() {
-    return this._props.prefix;
-  }
-
-  /** Is phone device */
-  private _isPhone!: boolean;
-
-  /** Is phone device */
-  get isPhone() {
-    return this._isPhone;
-  }
-
-  /** Is phone device */
-  private _isTablet!: boolean;
-
-  /** Is tablet device */
-  get isTablet() {
-    return this._isTablet;
-  }
-
-  /** Is mobile device */
-  private _isMobile!: boolean;
-
-  /** Is phone device */
-  get isMobile() {
-    return this._isMobile;
-  }
-
-  /** Is desktop device */
-  private _isDesktop!: boolean;
-
-  /** Is desktop device */
-  get isDesktop() {
-    return this._isDesktop;
-  }
-
-  /** Operating system name */
-  private _osName!: string;
-
-  /** Operating system name */
-  get osName() {
-    return this._osName;
-  }
-
-  /** Browser name */
-  private _browserName!: string;
-
-  /** Browser name */
-  get browserName() {
-    return this._browserName;
-  }
-
-  /** WebP supported */
-  private _isWebpSupported: boolean;
-
-  /** WebP supported */
-  get isWebpSupported() {
-    return this._isWebpSupported;
-  }
-
-  private _pageLoad: ReturnType<typeof createOnPageLoad>;
-
-  private _viewport: ReturnType<typeof createViewport>;
-
-  /** Viewport Callbacks */
-  get viewport() {
-    return this._viewport;
-  }
-
-  /**
-   * @example
-   * const app = Application();
-   */
-  constructor(data: Partial<NApplication.IProps> = {}) {
-    // check if the application already exists
-    if (window.vevetApp) {
-      throw new Error('Vevet Application already exists!');
-    }
-
-    // set defaults
-    this._props = {
-      ...this.defaultProps,
-      ...data,
-    };
-    this._isWebpSupported = false;
-
-    // initialize the application
-    this._setDeviceFeatures();
-
-    // add the application to the window
-    window.vevetApp = this;
-
-    // create default helpers
-    this._pageLoad = createOnPageLoad();
-    this._viewport = createViewport();
-  }
-
-  /** Get and set device info */
-  private _setDeviceFeatures() {
-    const { prefix, html } = this;
-    const { osName, browserName, device } = getDeviceInfo();
-
-    html.classList.add(`${prefix}os-${osName}`);
-    this._osName = osName;
-
-    html.classList.add(`${prefix}browser-${browserName}`);
-    this._browserName = browserName;
-
-    this._isPhone = device.phone;
-    html.classList.toggle(`${prefix}phone`, this._isPhone);
-
-    this._isTablet = device.tablet;
-    html.classList.toggle(`${prefix}tablet`, this._isTablet);
-
-    this._isMobile = device.phone || device.tablet;
-    html.classList.toggle(`${prefix}mobile`, this._isMobile);
-
-    this._isDesktop = !this._isMobile;
-    html.classList.toggle(`${prefix}desktop`, this._isDesktop);
-
-    // check webp support
-    if (this.props.shouldCheckWebpSupport) {
-      fetchWebpSupport()
-        .then(() => {
-          this._isWebpSupported = true;
-        })
-        .catch(() => {});
-    }
-  }
-
-  /** Document element */
-  get doc() {
-    return document;
-  }
-
-  /** HTML element */
-  get html() {
-    return document.documentElement;
-  }
-
-  /** Body element */
-  get body() {
-    return document.body;
-  }
-
-  /** Action on page load */
-  public onPageLoad() {
-    return new PCancelable((resolve: (...arg: any) => void) =>
-      this._pageLoad.onLoad(resolve),
-    );
-  }
-
-  /** Check if page is loaded */
-  get isPageLoaded() {
-    return this._pageLoad.getIsLoaded();
-  }
-}
-
-export type { NApplication, NViewport };
-
-declare global {
-  interface Window {
-    vevetApp: Application;
-  }
-}

package/src/Application/types.ts

@@ -1,41 +0,0 @@
-import { TEasingType } from '@/utils/math';
-
-export namespace NApplication {
-  export interface IProps {
-    /**
-     * Tablet identification max width
-     * @default 1199
-     */
-    tablet: number;
-    /**
-     * Phone identification max width
-     * @default 899
-     */
-    phone: number;
-    /**
-     * Vevet prefix
-     * @default 'v-'
-     */
-    prefix: string;
-    /**
-     * Timeout of viewport callbacks
-     * @default 16
-     */
-    resizeDebounce: number;
-    /**
-     * Easing function that is used in animations by default
-     * @default [.25, .1, .25, 1]
-     */
-    easing: TEasingType;
-    /**
-     * Check if the browser supports WebP
-     * @default false
-     */
-    shouldCheckWebpSupport: boolean;
-    /**
-     * How to detect the width of the viewport
-     * @default 'boundingRect'
-     */
-    widthDetection: 'boundingRect' | 'clientWidth';
-  }
-}

package/src/components/BaseTimeline/index.ts

@@ -1,123 +0,0 @@
-import { Component as ComponentClass } from '@/base/Component';
-import { NBaseTimeline } from './types';
-import { clampScope, easing } from '@/utils/math';
-import { uid } from '@/utils/common';
-import { getApp } from '@/utils/internal/getApp';
-
-export type { NBaseTimeline };
-
-/**
- * `BaseTimeline` is the base class for the `Timeline` itself.
- * The difference between the coponents is that `BaseTimeline` has no autonomous animation.
- */
-export class BaseTimeline<
-  StaticProps extends NBaseTimeline.IStaticProps = NBaseTimeline.IStaticProps,
-  ChangeableProps extends
-    NBaseTimeline.IChangeableProps = NBaseTimeline.IChangeableProps,
-  CallbacksTypes extends
-    NBaseTimeline.ICallbacksTypes = NBaseTimeline.ICallbacksTypes,
-> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
-  protected _getDefaultProps() {
-    return {
-      ...super._getDefaultProps(),
-      easing: getApp().props.easing,
-      nestedScope: [0, 1],
-      hasNestedEasingProgress: false,
-    };
-  }
-
-  /** Global timeline progress */
-  protected _p: number;
-
-  /** Global timeline progress */
-  get p() {
-    return this._p;
-  }
-
-  set p(val: number) {
-    this._p = val;
-
-    this._handleProgressUpdate();
-  }
-
-  /** Easing progress */
-  protected _e: number;
-
-  /** Easing progress */
-  get e() {
-    return this._e;
-  }
-
-  /** Nested timelines */
-  protected _nestedTimelines: { id: string; timeline: BaseTimeline }[];
-
-  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
-    super(initialProps, false);
-
-    // set default vars
-    this._p = 0;
-    this._e = 0;
-    this._nestedTimelines = [];
-
-    if (canInit) {
-      this.init();
-    }
-  }
-
-  /** Add a nested timeline */
-  public addNestedTimeline(timeline: BaseTimeline) {
-    const id = uid();
-
-    this._nestedTimelines.push({ id, timeline });
-
-    return {
-      remove: () => {
-        this._nestedTimelines = this._nestedTimelines.filter(
-          ({ id: nestedTimelineId }) => nestedTimelineId !== id,
-        );
-      },
-    };
-  }
-
-  /** Handle progress event */
-  protected _handleProgressUpdate() {
-    this._e = easing(this._p, this.props.easing);
-
-    this.callbacks.tbt('progress', {
-      p: this._p,
-      e: this._e,
-    });
-
-    this._renderNestedTimelines();
-  }
-
-  /** Render nested timelines */
-  protected _renderNestedTimelines() {
-    const { length } = this._nestedTimelines;
-    if (length === 0) {
-      return;
-    }
-
-    const progressForNestedTimeline = this.props.hasNestedEasingProgress
-      ? this.e
-      : this.p;
-
-    this._nestedTimelines.forEach(({ timeline }) => {
-      const timelineProgress = clampScope(
-        progressForNestedTimeline,
-        timeline.props.nestedScope,
-        [0, 1],
-      );
-
-      // eslint-disable-next-line no-param-reassign
-      timeline.p = timelineProgress;
-    });
-  }
-
-  /** Destroy the module */
-  protected _destroy() {
-    super._destroy();
-
-    this._nestedTimelines.forEach(({ timeline }) => timeline.destroy());
-  }
-}

package/src/components/BaseTimeline/stories/Basic.tsx

@@ -1,65 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { BaseTimeline } from '..';
-import { EaseInOutBounce } from '@/utils/math';
-
-export const Basic: FC = () => {
-  const thumbRef = useRef<HTMLDivElement>(null);
-
-  const [timeline, setTimeline] = useState<BaseTimeline>();
-
-  useEffect(() => {
-    const instance = new BaseTimeline({ easing: EaseInOutBounce });
-    setTimeline(instance);
-
-    instance.addCallback('progress', ({ e }) => {
-      if (!thumbRef.current) {
-        return;
-      }
-
-      thumbRef.current.style.left = `${e * 100}%`;
-    });
-
-    return () => instance.destroy();
-  }, []);
-
-  return (
-    <>
-      <input
-        type="range"
-        min={0}
-        max={1}
-        defaultValue={0}
-        step={0.0001}
-        style={{ width: '100%' }}
-        onChange={(event) => {
-          if (timeline) {
-            timeline.p = parseFloat(event.currentTarget.value);
-          }
-        }}
-      />
-
-      <div
-        style={{
-          position: 'relative',
-          marginTop: '10px',
-          width: '100%',
-          height: '20px',
-          backgroundColor: '#dedede',
-        }}
-      >
-        <div
-          ref={thumbRef}
-          style={{
-            position: 'absolute',
-            top: '-5px',
-            left: 0,
-            width: '10px',
-            height: '30px',
-            transform: 'translate(-50%, 0)',
-            backgroundColor: '#000',
-          }}
-        />
-      </div>
-    </>
-  );
-};

package/src/components/BaseTimeline/stories/Nested.tsx

@@ -1,108 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { BaseTimeline } from '..';
-import { EaseInOutBounce, spreadScope } from '@/utils/math';
-
-export const Nested: FC = () => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [timeline, setTimeline] = useState<BaseTimeline>();
-
-  useEffect(() => {
-    const instance = new BaseTimeline({
-      easing: EaseInOutBounce,
-      hasNestedEasingProgress: true,
-    });
-    setTimeline(instance);
-
-    if (containerRef.current) {
-      const children = Array.from(
-        containerRef.current.children,
-      ) as HTMLElement[];
-
-      const scopes = spreadScope(children.length, 0.9);
-
-      children.forEach((child, index) => {
-        const nestedTm = new BaseTimeline({
-          nestedScope: scopes[index],
-          easing: EaseInOutBounce,
-        });
-
-        nestedTm.addCallback('progress', ({ e }) => {
-          // eslint-disable-next-line no-param-reassign
-          child.style.transform = `scale(${e}, 1)`;
-        });
-
-        instance.addNestedTimeline(nestedTm);
-      });
-    }
-
-    return () => instance.destroy();
-  }, []);
-
-  return (
-    <div>
-      <input
-        type="range"
-        min={0}
-        max={1}
-        defaultValue={0}
-        step={0.0001}
-        style={{ width: '100%' }}
-        onChange={(event) => {
-          if (timeline) {
-            timeline.p = parseFloat(event.currentTarget.value);
-          }
-        }}
-      />
-
-      <div
-        ref={containerRef}
-        style={{
-          marginTop: 20,
-          width: '100%',
-          display: 'grid',
-          gap: 10,
-        }}
-      >
-        <div
-          style={{
-            height: '30px',
-            backgroundColor: '#F7DBA7',
-            transform: 'scale(0, 1)',
-          }}
-        />
-
-        <div
-          style={{
-            height: '30px',
-            backgroundColor: '#F1AB86',
-            transform: 'scale(0, 1)',
-          }}
-        />
-
-        <div
-          style={{
-            height: '30px',
-            backgroundColor: '#C57B57',
-            transform: 'scale(0, 1)',
-          }}
-        />
-
-        <div
-          style={{
-            height: '30px',
-            backgroundColor: '#1E2D2F',
-            transform: 'scale(0, 1)',
-          }}
-        />
-
-        <div
-          style={{
-            height: '30px',
-            backgroundColor: '#041F1E',
-            transform: 'scale(0, 1)',
-          }}
-        />
-      </div>
-    </div>
-  );
-};

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import type { Meta, StoryFn } from '@storybook/react';
-import { Basic } from './Basic';
-import { Nested } from './Nested';
-
-const meta: Meta = {
-  title: 'Components/BaseTimeline',
-};
-
-export default meta;
-
-export const Default: StoryFn<typeof Basic> = (props) => <Basic {...props} />;
-
-export const WithNested: StoryFn<typeof Nested> = (props) => (
-  <Nested {...props} />
-);

package/src/components/BaseTimeline/types.ts

@@ -1,36 +0,0 @@
-import { NComponent } from '@/base/Component';
-import { NApplication } from '@/src/Application';
-
-export namespace NBaseTimeline {
-  export interface IStaticProps extends NComponent.IStaticProps {
-    /** Timeline easing function */
-    easing?: NApplication.IProps['easing'];
-    /**
-     * Timeline scope is used for nested timelines.
-     * The first value means that animation will start only when the absolute progress
-     * of the parent timeline reaches this value. The second value is
-     * the end of animation relatively to the parent timeline.
-     * This property should be set for a nested timeline.
-     * @default [0, 1]
-     */
-    nestedScope?: [number, number] | number[];
-    /**
-     * Define if you want to use easing progress to calculate current progress
-     * of nested timelines according to their scope.
-     * This property should be set for the parent timeline.
-     * @default false
-     */
-    hasNestedEasingProgress?: boolean;
-  }
-
-  export interface IChangeableProps extends NComponent.IChangeableProps {}
-
-  export interface IProgressParameter {
-    p: number;
-    e: number;
-  }
-
-  export interface ICallbacksTypes extends NComponent.ICallbacksTypes {
-    progress: IProgressParameter;
-  }
-}