vevet 2.17.0 → 3.0.0-beta.0

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

@@ -0,0 +1,16 @@
+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

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

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

@@ -0,0 +1,248 @@
+import { IAddEventListener, addEventListener } from 'vevet-dom';
+import { Callbacks } from '@/base/Callbacks';
+import { EOrientationTypes, ESizeTypes, NViewport } from './types';
+
+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 >= this.app.props.tablet;
+  }
+
+  /** Is tablet size */
+  get isTablet() {
+    return (
+      this.width <= this.app.props.tablet && this.width > this.app.props.phone
+    );
+  }
+
+  /** Is phone size */
+  get isPhone() {
+    return this.width <= this.app.props.phone;
+  }
+
+  /**
+   * Device pixel ratio
+   */
+  get dpr() {
+    if (typeof window.devicePixelRatio !== 'undefined') {
+      return window.devicePixelRatio;
+    }
+
+    return 1;
+  }
+
+  /**
+   * Device pixel ratio. For non-mobile devices it is always 1.
+   */
+  get lowerDpr() {
+    if (this.app.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;
+      }, this.app.props.resizeDebounce);
+    });
+  }
+
+  /** Set viewport values */
+  private _updateValues() {
+    const { html } = this.app;
+
+    // set sizes
+    this._width = html.clientWidth;
+    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 } = this.app;
+
+    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 } = this.app;
+    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(
+    /** force all callbacks */
+    force = false
+  ) {
+    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 (force || (width !== prevWidth && height === prevHeight)) {
+      this.tbt('widthOnly', changes);
+    }
+    if (force || (height !== prevHeight && width === prevWidth)) {
+      this.tbt('heightOnly', changes);
+    }
+    if (force || (width !== prevWidth && height !== prevHeight)) {
+      this.tbt('both', changes);
+    }
+    if (force || width !== prevWidth) {
+      this.tbt('width', changes);
+    }
+    if (force || height !== prevHeight) {
+      this.tbt('height', changes);
+    }
+
+    this.tbt('any', changes);
+  }
+
+  /**
+   * Force launching all callbacks
+   */
+  public forceResize() {
+    this._onResize(true);
+  }
+
+  public destroy() {
+    super.destroy();
+
+    if (this._resizeTimeout) {
+      clearTimeout(this._resizeTimeout);
+    }
+
+    this._resizeListener?.remove();
+  }
+}

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

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

@@ -0,0 +1,53 @@
+import React, { FC, useCallback, useEffect, useState } from 'react';
+import { vevet } from '@/src/vevet';
+import { pickObjectProps } from '@/utils/common';
+
+const { viewport } = vevet;
+
+export const Component: FC = () => {
+  const [features, setFeatures] = useState<Record<string, boolean | number>>();
+
+  const updateFeatures = useCallback(() => {
+    const object = pickObjectProps(viewport, [
+      'isDesktop',
+      'isTablet',
+      'isPhone',
+      'width',
+      'height',
+      'radius',
+      'isLandscape',
+      'isPortrait',
+      'dpr',
+      'lowerDpr',
+      'vh',
+      'vw',
+      'vr',
+    ]);
+
+    setFeatures(object);
+  }, []);
+
+  useEffect(() => {
+    updateFeatures();
+
+    const callback = viewport.add('any', () => updateFeatures());
+
+    return () => callback.remove();
+  }, [updateFeatures]);
+
+  return (
+    <div>
+      {features &&
+        Object.keys(features).map((key) => {
+          const value = features[key];
+          const stringValue = String(value);
+
+          return (
+            <div key={key}>
+              {key}: {stringValue}
+            </div>
+          );
+        })}
+    </div>
+  );
+};

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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,224 @@
+import PCancelable from 'p-cancelable';
+import { Viewport } from './events/Viewport';
+import { PageLoad } from './events/PageLoad';
+import version from '../version';
+import { NApplication } from './types';
+import { getDeviceInfo } from '@/utils/internal/getDeviceInfo';
+import { fetchWebpSupport } from '@/utils/internal/fetchWebpSupport';
+
+/**
+ * Vevet Application
+ */
+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 {
+      isVersionPrinted: true,
+      tablet: 1199,
+      phone: 899,
+      prefix: 'v-',
+      easing: [0.25, 0.1, 0.25, 1],
+      resizeDebounce: 16,
+      hasWebpSupportCheck: true,
+    };
+  }
+
+  /** 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: PageLoad;
+
+  /** Page Load Callbacks */
+  get pageLoad() {
+    return this._pageLoad;
+  }
+
+  private _viewport: Viewport;
+
+  /** 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
+    // Define that you're using Vevet
+    this._printVersion();
+    this._setDeviceFeatures();
+
+    // add the application to the window
+    window.vevetApp = this;
+
+    // create default helpers
+    this._pageLoad = new PageLoad();
+    this._viewport = new Viewport();
+  }
+
+  /** 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.hasWebpSupportCheck) {
+      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 loaded */
+  public onPageLoad() {
+    return new PCancelable((resolve: (...arg: any) => void) =>
+      this._pageLoad.onLoad(resolve)
+    );
+  }
+
+  /** Output current version */
+  private _printVersion() {
+    if (!this.props.isVersionPrinted) {
+      return;
+    }
+
+    const msg = `Vevet ${this.version}`;
+
+    const style = [
+      'padding: 1rem 1.5rem;',
+      'background: #5F2580;',
+      'font: 1rem/1 Arial;',
+      'color: #ffffff;',
+    ].join('');
+
+    // eslint-disable-next-line no-console
+    console.log('%c%s', style, msg);
+  }
+}
+
+export type { NApplication };
+
+declare global {
+  interface Window {
+    vevetApp: Application;
+  }
+}

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

package/src/Application/stories/index.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useCallback, useEffect, useState } from 'react';
+import { vevet } from '@/src/vevet';
+import { pickObjectProps } from '@/utils/common';
+
+export const Component: FC = () => {
+  const [features, setFeatures] =
+    useState<Record<string, boolean | number | string>>();
+
+  const updateFeatures = useCallback(() => {
+    const object = pickObjectProps(vevet, [
+      'version',
+      'prefix',
+      'isDesktop',
+      'isTablet',
+      'isPhone',
+      'isMobile',
+      'browserName',
+      'osName',
+      'isWebpSupported',
+    ]);
+
+    setFeatures(object);
+  }, []);
+
+  useEffect(() => {
+    updateFeatures();
+
+    const promise = vevet.onPageLoad();
+    promise.then(() => updateFeatures()).catch(() => {});
+
+    return () => promise.cancel();
+  }, [updateFeatures]);
+
+  return (
+    <div>
+      {features &&
+        Object.keys(features).map((key) => {
+          const value = features[key];
+          const stringValue = String(value);
+
+          return (
+            <div key={key}>
+              {key}: {stringValue}
+            </div>
+          );
+        })}
+    </div>
+  );
+};