vevet 3.16.0 → 3.18.0

package/lib/types/Application/events/PageLoad/types.d.ts

@@ -1,7 +0,0 @@
-import { NCallbacks } from '../../../base/Callbacks/types';
-export declare namespace NPageLoad {
-    interface ICallbacksTypes extends NCallbacks.ITypes {
-        loaded: undefined;
-    }
-}
-//# sourceMappingURL=types.d.ts.map

package/lib/types/Application/events/PageLoad/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Application/events/PageLoad/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,yBAAiB,SAAS,CAAC;IACzB,UAAiB,eAAgB,SAAQ,UAAU,CAAC,MAAM;QACxD,MAAM,EAAE,SAAS,CAAC;KACnB;CACF"}

package/lib/types/Application/events/Viewport/index.d.ts

@@ -1,55 +0,0 @@
-import { Callbacks } from '../../../base/Callbacks';
-import { NViewport } from './types';
-export type { NViewport };
-/**
- * Callbacks on window resize
- */
-export declare class Viewport extends Callbacks<NViewport.ICallbacksTypes> {
-    private _width;
-    get width(): number;
-    private _height;
-    get height(): number;
-    get radius(): number;
-    /** VW value */
-    get vw(): number;
-    /** VH value */
-    get vh(): number;
-    /** VR value (viewport radius / 100) */
-    get vr(): number;
-    /** Width greater than height */
-    get isLandscape(): boolean;
-    /** Width less than height */
-    get isPortrait(): boolean;
-    /** Is desktop size */
-    get isDesktop(): boolean;
-    /** Is tablet size */
-    get isTablet(): boolean;
-    /** Is phone size */
-    get isPhone(): boolean;
-    /**
-     * Device pixel ratio
-     */
-    get dpr(): number;
-    /**
-     * Device pixel ratio. For non-mobile devices it is always 1.
-     */
-    get lowerDesktopDpr(): number;
-    private _resizeTimeout?;
-    private _resizeListener?;
-    constructor();
-    protected _init(): void;
-    /** Set events on resize */
-    private _setEvents;
-    /** Set viewport values */
-    private _updateValues;
-    /** Change classes of the document element */
-    private _updateClassNames;
-    /** Change breakpoint classes of the document element */
-    private _updateBreakpointClassNames;
-    /** Update CSS vars */
-    private _updateCSSVars;
-    /** Launch callbacks on resize. */
-    private _onResize;
-    destroy(): void;
-}
-//# sourceMappingURL=index.d.ts.map

package/lib/types/Application/events/Viewport/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Application/events/Viewport/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAiC,SAAS,EAAE,MAAM,SAAS,CAAC;AAGnE,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B;;GAEG;AACH,qBAAa,QAAS,SAAQ,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC;IAChE,OAAO,CAAC,MAAM,CAAS;IAEvB,IAAI,KAAK,WAER;IAED,OAAO,CAAC,OAAO,CAAS;IAExB,IAAI,MAAM,WAET;IAED,IAAI,MAAM,WAET;IAED,eAAe;IACf,IAAI,EAAE,WAEL;IAED,eAAe;IACf,IAAI,EAAE,WAEL;IAED,uCAAuC;IACvC,IAAI,EAAE,WAEL;IAED,gCAAgC;IAChC,IAAI,WAAW,YAEd;IAED,6BAA6B;IAC7B,IAAI,UAAU,YAEb;IAED,sBAAsB;IACtB,IAAI,SAAS,YAEZ;IAED,qBAAqB;IACrB,IAAI,QAAQ,YAIX;IAED,oBAAoB;IACpB,IAAI,OAAO,YAEV;IAED;;OAEG;IACH,IAAI,GAAG,WAEN;IAED;;OAEG;IACH,IAAI,eAAe,WAMlB;IAED,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC,OAAO,CAAC,eAAe,CAAC,CAAoB;;IAW5C,SAAS,CAAC,KAAK;IAMf,2BAA2B;IAC3B,OAAO,CAAC,UAAU;IAclB,0BAA0B;IAC1B,OAAO,CAAC,aAAa;IAkBrB,6CAA6C;IAC7C,OAAO,CAAC,iBAAiB;IAmCzB,wDAAwD;IACxD,OAAO,CAAC,2BAA2B;IAYnC,sBAAsB;IACtB,OAAO,CAAC,cAAc;IAQtB,kCAAkC;IAClC,OAAO,CAAC,SAAS;IAiCV,OAAO;CASf"}

package/lib/types/Application/events/Viewport/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Application/events/Viewport/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,yBAAiB,SAAS,CAAC;IACzB;;OAEG;IACH,UAAiB,QAAQ;QACvB,cAAc,EAAE,OAAO,CAAC;QACxB,eAAe,EAAE,OAAO,CAAC;QACzB,oBAAoB,EAAE,OAAO,CAAC;KAC/B;IAED;;OAEG;IACH,UAAiB,eAAgB,SAAQ,UAAU,CAAC,MAAM;QACxD;;WAEG;QACH,KAAK,EAAE,QAAQ,CAAC;QAChB;;WAEG;QACH,MAAM,EAAE,QAAQ,CAAC;QACjB;;WAEG;QACH,IAAI,EAAE,QAAQ,CAAC;QACf;;WAEG;QACH,SAAS,EAAE,QAAQ,CAAC;QACpB;;WAEG;QACH,UAAU,EAAE,QAAQ,CAAC;QACrB;;WAEG;QACH,GAAG,EAAE,QAAQ,CAAC;KACf;CACF;AAED,0BAA0B;AAC1B,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,wBAAwB;AACxB,oBAAY,iBAAiB;IAC3B,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB"}

package/src/Application/events/PageLoad/index.ts

@@ -1,82 +0,0 @@
-import { IAddEventListener, addEventListener } from 'vevet-dom';
-import { Callbacks } from '@/base/Callbacks';
-import { NPageLoad } from './types';
-import { getApp } from '@/utils/internal/getApp';
-
-export type { NPageLoad };
-
-/**
- * Callbacks on page loaded
- */
-export class PageLoad extends Callbacks<NPageLoad.ICallbacksTypes> {
-  /** The page is loaded */
-  private _isLoaded: boolean;
-
-  /** The page is loaded */
-  get isLoaded() {
-    return this._isLoaded;
-  }
-
-  private _loadListener?: IAddEventListener;
-
-  constructor() {
-    super(false);
-
-    this._isLoaded = false;
-
-    this._init();
-  }
-
-  protected _init() {
-    super._init();
-
-    this._setEvents();
-  }
-
-  protected _setEvents() {
-    if (document.readyState === 'complete') {
-      this._handleLoaded();
-
-      return;
-    }
-
-    this._loadListener = addEventListener(window, 'load', () =>
-      this._handleLoaded(),
-    );
-  }
-
-  /** Callback on page loaded */
-  protected _handleLoaded() {
-    const app = getApp();
-    const { prefix } = app;
-
-    this._isLoaded = true;
-
-    app.html.classList.remove(`${prefix}loading`);
-    app.body.classList.remove(`${prefix}loading`);
-
-    app.html.classList.add(`${prefix}loaded`);
-
-    this.tbt('loaded', undefined);
-  }
-
-  /**
-   * Add a callback on page load.
-   * If the page is already loaded, the callback will be immediately triggered.
-   */
-  public onLoad(callback: () => void) {
-    if (this.isLoaded) {
-      callback();
-
-      return undefined;
-    }
-
-    return this.add('loaded', callback.bind(this));
-  }
-
-  public destroy() {
-    super.destroy();
-
-    this._loadListener?.remove();
-  }
-}

package/src/Application/events/PageLoad/stories/index.stories.tsx

@@ -1,13 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { Component } from '.';
-
-type TComponent = typeof Component;
-
-const meta: Meta<TComponent> = {
-  title: 'Application/PageLoad',
-  component: Component,
-};
-
-export default meta;
-
-export const Default: StoryObj<TComponent> = {};

package/src/Application/events/PageLoad/stories/index.tsx

@@ -1,16 +0,0 @@
-import React, { FC, useEffect, useState } from 'react';
-import { vevet } from '@/src/vevet';
-
-export const Component: FC = () => {
-  const [isLoaded, setIsLoaded] = useState(false);
-
-  useEffect(() => {
-    const onLoad = vevet.pageLoad.onLoad(() => {
-      setIsLoaded(true);
-    });
-
-    return () => onLoad?.remove();
-  }, []);
-
-  return <div>isLoaded: {String(isLoaded)}</div>;
-};

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

@@ -1,7 +0,0 @@
-import { NCallbacks } from '@/base/Callbacks/types';
-
-export namespace NPageLoad {
-  export interface ICallbacksTypes extends NCallbacks.ITypes {
-    loaded: undefined;
-  }
-}

package/src/Application/events/Viewport/index.ts

@@ -1,242 +0,0 @@
-import { IAddEventListener, addEventListener } from 'vevet-dom';
-import { Callbacks } from '@/base/Callbacks';
-import { EOrientationTypes, ESizeTypes, NViewport } from './types';
-import { getApp } from '@/utils/internal/getApp';
-
-export type { NViewport };
-
-/**
- * Callbacks on window resize
- */
-export class Viewport extends Callbacks<NViewport.ICallbacksTypes> {
-  private _width: number;
-
-  get width() {
-    return this._width;
-  }
-
-  private _height: number;
-
-  get height() {
-    return this._height;
-  }
-
-  get radius() {
-    return Math.sqrt(this.width ** 2 + this.height ** 2) / 2;
-  }
-
-  /** VW value */
-  get vw() {
-    return this.width / 100;
-  }
-
-  /** VH value */
-  get vh() {
-    return this.height / 100;
-  }
-
-  /** VR value (viewport radius / 100) */
-  get vr() {
-    return this.radius / 100;
-  }
-
-  /** Width greater than height */
-  get isLandscape() {
-    return this.width > this.height;
-  }
-
-  /** Width less than height */
-  get isPortrait() {
-    return this.width < this.height;
-  }
-
-  /** Is desktop size */
-  get isDesktop() {
-    return this.width > getApp().props.tablet;
-  }
-
-  /** Is tablet size */
-  get isTablet() {
-    return (
-      this.width <= getApp().props.tablet && this.width > getApp().props.phone
-    );
-  }
-
-  /** Is phone size */
-  get isPhone() {
-    return this.width <= getApp().props.phone;
-  }
-
-  /**
-   * Device pixel ratio
-   */
-  get dpr() {
-    return window.devicePixelRatio;
-  }
-
-  /**
-   * Device pixel ratio. For non-mobile devices it is always 1.
-   */
-  get lowerDesktopDpr() {
-    if (getApp().isDesktop) {
-      return 1;
-    }
-
-    return this.dpr;
-  }
-
-  private _resizeTimeout?: NodeJS.Timeout;
-
-  private _resizeListener?: IAddEventListener;
-
-  constructor() {
-    super(false);
-
-    this._width = 0;
-    this._height = 0;
-
-    this._init();
-  }
-
-  protected _init() {
-    this._updateValues();
-
-    this._setEvents();
-  }
-
-  /** Set events on resize */
-  private _setEvents() {
-    this._resizeListener = addEventListener(window, 'resize', () => {
-      if (this._resizeTimeout) {
-        clearTimeout(this._resizeTimeout);
-        this._resizeTimeout = undefined;
-      }
-
-      this._resizeTimeout = setTimeout(() => {
-        this._onResize();
-        this._resizeTimeout = undefined;
-      }, getApp().props.resizeDebounce);
-    });
-  }
-
-  /** Set viewport values */
-  private _updateValues() {
-    const { html, props } = getApp();
-
-    // get width
-    const width =
-      props.widthDetection === 'boundingRect'
-        ? parseFloat(html.getBoundingClientRect().width.toFixed(3))
-        : html.clientWidth;
-
-    // set sizes
-    this._width = width;
-    this._height = html.clientHeight;
-
-    // update states
-    this._updateClassNames();
-    this._updateCSSVars();
-  }
-
-  /** Change classes of the document element */
-  private _updateClassNames() {
-    const viewportSizeTypes: ESizeTypes[] = [
-      ESizeTypes.Desktop,
-      ESizeTypes.Tablet,
-      ESizeTypes.Phone,
-    ];
-
-    if (this.isDesktop) {
-      this._updateBreakpointClassNames(ESizeTypes.Desktop, viewportSizeTypes);
-    } else if (this.isTablet) {
-      this._updateBreakpointClassNames(ESizeTypes.Tablet, viewportSizeTypes);
-    } else {
-      this._updateBreakpointClassNames(ESizeTypes.Phone, viewportSizeTypes);
-    }
-
-    const orientationTypes: EOrientationTypes[] = [
-      EOrientationTypes.Landscape,
-      EOrientationTypes.Portrait,
-    ];
-
-    if (this.isLandscape) {
-      this._updateBreakpointClassNames(
-        EOrientationTypes.Landscape,
-        orientationTypes,
-      );
-    } else if (this.isPortrait) {
-      this._updateBreakpointClassNames(
-        EOrientationTypes.Portrait,
-        orientationTypes,
-      );
-    } else {
-      this._updateBreakpointClassNames('', orientationTypes);
-    }
-  }
-
-  /** Change breakpoint classes of the document element */
-  private _updateBreakpointClassNames(activeType: string, types: string[]) {
-    const { html, prefix } = getApp();
-
-    types.forEach((type) => {
-      if (type === activeType) {
-        html.classList.add(`${prefix}viewport-${type}`);
-      } else {
-        html.classList.remove(`${prefix}viewport-${type}`);
-      }
-    });
-  }
-
-  /** Update CSS vars */
-  private _updateCSSVars() {
-    const { html } = getApp();
-
-    html.style.setProperty('--vw', `${this.vw}px`);
-    html.style.setProperty('--vh', `${this.vh}px`);
-    html.style.setProperty('--vr', `${this.vr}px`);
-  }
-
-  /** Launch callbacks on resize. */
-  private _onResize() {
-    const { _width: prevWidth, _height: prevHeight } = this;
-
-    this._updateValues();
-
-    const { width, height } = this;
-
-    // get changes in viewport
-    const changes: NViewport.IChanges = {
-      isWidthChanged: width !== prevWidth,
-      isHeightChanged: height !== prevHeight,
-      isOrientationChanged: width > height !== prevWidth > prevHeight,
-    };
-
-    if (width !== prevWidth && height === prevHeight) {
-      this.tbt('widthOnly', changes);
-    }
-    if (height !== prevHeight && width === prevWidth) {
-      this.tbt('heightOnly', changes);
-    }
-    if (width !== prevWidth && height !== prevHeight) {
-      this.tbt('both', changes);
-    }
-    if (width !== prevWidth) {
-      this.tbt('width', changes);
-    }
-    if (height !== prevHeight) {
-      this.tbt('height', changes);
-    }
-
-    this.tbt('any', changes);
-  }
-
-  public destroy() {
-    super.destroy();
-
-    if (this._resizeTimeout) {
-      clearTimeout(this._resizeTimeout);
-    }
-
-    this._resizeListener?.remove();
-  }
-}