vevet 3.20.0 → 4.0.0-beta.0

package/src/{Application → Vevet}/events/createOnPageLoad/index.ts

@@ -1,9 +1,8 @@
 import { addEventListener } from 'vevet-dom';
-import { getApp } from '@/utils/internal/getApp';
 import { Callbacks } from '@/base/Callbacks';
-import { ICallbacksTypes } from './types';
+import { ICallbacksTypes, IOnPageLoad } from './types';
 
-export function createOnPageLoad() {
+export function createOnPageLoad(prefix: string): IOnPageLoad {
   const callbacks = new Callbacks<ICallbacksTypes>();
 
   let isLoaded = false;
@@ -16,19 +15,20 @@ export function createOnPageLoad() {
 
   /** Callback on page loaded */
   function handleLoaded() {
-    const app = getApp();
-    const { prefix } = app;
+    const html = document.documentElement;
+    const { body } = document;
 
     isLoaded = true;
 
-    app.html.classList.remove(`${prefix}loading`);
-    app.body.classList.remove(`${prefix}loading`);
+    html.classList.remove(`${prefix}loading`);
+    body.classList.remove(`${prefix}loading`);
 
-    app.html.classList.add(`${prefix}loaded`);
+    html.classList.add(`${prefix}loaded`);
 
     callbacks.tbt('loaded', undefined);
   }
 
+  /** Add a callback on page load */
   function onLoad(callback: () => void) {
     if (isLoaded) {
       callback();

package/src/Vevet/events/createOnPageLoad/types.ts

@@ -0,0 +1,21 @@
+import { NCallbacks } from '@/base/Callbacks/types';
+
+export interface ICallbacksTypes extends NCallbacks.ITypes {
+  loaded: undefined;
+}
+
+export interface IOnPageLoad {
+  /**
+   * Add a callback on page load
+   * If the page is already loaded, the callback will be called immediately and return undefined.
+   * Otherwise, a descructable callback will be returned that can be used to remove the callback.
+   *
+   * @example
+   * const callback = vevet.pageLoad.onLoad(() => console.log('Page loaded'));
+   *
+   * callback?.remove()
+   */
+  onLoad: (callback: () => void) => NCallbacks.IAddedCallback | undefined;
+  /** Get if the page is loaded */
+  getIsLoaded: () => boolean;
+}

package/src/{Application → Vevet}/events/createViewport/index.ts

@@ -1,14 +1,25 @@
 import { addEventListener } from 'vevet-dom';
-import { getApp } from '@/utils/internal/getApp';
-import { EOrientationTypes, ESizeTypes, NViewport } from './types';
+import {
+  EOrientationTypes,
+  ESizeTypes,
+  IViewport,
+  IViewportCallbackTypes,
+} from './types';
 import { Callbacks } from '@/base/Callbacks';
+import { IVevetProps } from '../../types';
+
+export function createViewport(
+  props: IVevetProps,
+  isDesktopDevice: boolean,
+  prefix: string,
+): IViewport {
+  const html = document.documentElement;
 
-export function createViewport() {
   // create callbacks
-  const callbacks = new Callbacks<NViewport.ICallbacksTypes>();
+  const callbacks = new Callbacks<IViewportCallbackTypes>();
 
-  // defaults
-  const data = {
+  // default data
+  const data: IViewport = {
     callbacks,
     width: 0,
     height: 0,
@@ -22,13 +33,13 @@ export function createViewport() {
     isTablet: false,
     isPhone: false,
     dpr: window.devicePixelRatio,
-    lowerDesktopDpr: window.devicePixelRatio,
+    lowerDpr: window.devicePixelRatio,
   };
 
   // update values for the first time
   updateValues();
 
-  // set resize events
+  // add resize events
 
   let resizeTimeout: NodeJS.Timeout | undefined;
 
@@ -41,11 +52,10 @@ export function createViewport() {
     resizeTimeout = setTimeout(() => {
       onResize();
       resizeTimeout = undefined;
-    }, getApp().props.resizeDebounce);
+    }, props.resizeDebounce);
   });
 
-  // methods
-
+  /** Event on window resize */
   function onResize() {
     const { width: prevWidth, height: prevHeight } = data;
 
@@ -53,36 +63,27 @@ export function createViewport() {
 
     const { width, height } = data;
 
-    // get changes in viewport
-    const changes: NViewport.IChanges = {
-      isWidthChanged: width !== prevWidth,
-      isHeightChanged: height !== prevHeight,
-      isOrientationChanged: width > height !== prevWidth > prevHeight,
-    };
-
     if (width !== prevWidth && height === prevHeight) {
-      callbacks.tbt('widthOnly', changes);
+      callbacks.tbt('widthOnly', undefined);
     }
     if (height !== prevHeight && width === prevWidth) {
-      callbacks.tbt('heightOnly', changes);
+      callbacks.tbt('heightOnly', undefined);
     }
     if (width !== prevWidth && height !== prevHeight) {
-      callbacks.tbt('both', changes);
+      callbacks.tbt('both', undefined);
     }
     if (width !== prevWidth) {
-      callbacks.tbt('width', changes);
+      callbacks.tbt('width', undefined);
     }
     if (height !== prevHeight) {
-      callbacks.tbt('height', changes);
+      callbacks.tbt('height', undefined);
     }
 
-    callbacks.tbt('any', changes);
+    callbacks.tbt('any', undefined);
   }
 
+  /** Update viewport values */
   function updateValues() {
-    const app = getApp();
-    const { html, props } = app;
-
     // get width
     const width =
       props.widthDetection === 'boundingRect'
@@ -102,18 +103,19 @@ export function createViewport() {
     data.isTablet = data.width <= props.tablet && data.width > props.phone;
     data.isPhone = data.width <= props.phone;
     data.dpr = window.devicePixelRatio;
-    data.lowerDesktopDpr = data.dpr < 1 ? 1 : data.dpr;
+    data.lowerDpr = data.dpr < 1 ? 1 : data.dpr;
     data.isDesktop = data.width > props.tablet;
     data.isTablet = data.width <= props.tablet && data.width > props.phone;
     data.isPhone = data.width <= props.phone;
     data.dpr = window.devicePixelRatio;
-    data.lowerDesktopDpr = app.isDesktop ? 1 : data.dpr;
+    data.lowerDpr = isDesktopDevice ? 1 : Math.min(data.dpr, 2);
 
     // update states
     updateClassNames();
     updateCSSVars();
   }
 
+  /** Update page classnames according to the viewport data */
   function updateClassNames() {
     const viewportSizeTypes: ESizeTypes[] = [
       ESizeTypes.Desktop,
@@ -143,17 +145,15 @@ export function createViewport() {
     }
   }
 
+  /** Set classnames */
   function updateBreakpointClassNames(activeType: string, types: string[]) {
-    const { html, prefix } = getApp();
-
     types.forEach((type) => {
       html.classList.toggle(`${prefix}viewport-${type}`, type === activeType);
     });
   }
 
+  /** Update CSS variables */
   function updateCSSVars() {
-    const { html } = getApp();
-
     html.style.setProperty('--vw', `${data.vw}px`);
     html.style.setProperty('--vh', `${data.vh}px`);
     html.style.setProperty('--vr', `${data.vr}px`);
@@ -161,5 +161,3 @@ export function createViewport() {
 
   return data;
 }
-
-export type { NViewport };

package/src/{Application → Vevet}/events/createViewport/stories/index.tsx

@@ -1,13 +1,13 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { vevet } from '@/src/vevet';
 import { pickObjectProps } from '@/utils/common';
-
-const { viewport } = vevet;
+import { getApp } from '@/utils/internal/getApp';
 
 export const Component: FC = () => {
   const [features, setFeatures] = useState<Record<string, boolean | number>>();
 
   const updateFeatures = useCallback(() => {
+    const { viewport } = getApp();
+
     const object = pickObjectProps(viewport, [
       'isDesktop',
       'isTablet',
@@ -18,7 +18,7 @@ export const Component: FC = () => {
       'isLandscape',
       'isPortrait',
       'dpr',
-      'lowerDesktopDpr',
+      'lowerDpr',
       'vh',
       'vw',
       'vr',
@@ -30,7 +30,9 @@ export const Component: FC = () => {
   useEffect(() => {
     updateFeatures();
 
-    const callback = viewport.callbacks.add('any', () => updateFeatures());
+    const callback = getApp().viewport.callbacks.add('any', () =>
+      updateFeatures(),
+    );
 
     return () => callback.remove();
   }, [updateFeatures]);

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

@@ -0,0 +1,93 @@
+import { Callbacks, NCallbacks } from '@/base/Callbacks';
+
+export interface IViewportCallbackTypes extends NCallbacks.ITypes {
+  /**
+   * When the width is changed regardless of the height
+   */
+  width: undefined;
+
+  /**
+   * When the height is changed regardless of the width
+   */
+  height: undefined;
+
+  /**
+   * When both the width and height are changed
+   */
+  both: undefined;
+
+  /**
+   * When only the width is changed
+   */
+  widthOnly: undefined;
+
+  /**
+   * When only the height is changed
+   */
+  heightOnly: undefined;
+
+  /**
+   * Any change
+   */
+  any: undefined;
+}
+
+/** Viewport size types */
+export enum ESizeTypes {
+  Desktop = 'desktop',
+  Tablet = 'tablet',
+  Phone = 'phone',
+}
+
+/** Orientation types */
+export enum EOrientationTypes {
+  Landscape = 'landscape',
+  Portrait = 'portrait',
+}
+
+export interface IViewport {
+  /**
+   * Viewport callbacks
+   *
+   * @example
+   *
+   * vevet.viewport.callbacks.add('width', () => console.log('width changed'));
+   *
+   * vevet.viewport.callbacks.add('height', () => console.log('height changed'));
+   *
+   * vevet.viewport.callbacks.add('both', () => console.log('both width and height changed'));
+   *
+   * vevet.viewport.callbacks.add('widthOnly', () => console.log('only width changed'));
+   *
+   * vevet.viewport.callbacks.add('heightOnly', () => console.log('only height changed'));
+   *
+   * vevet.viewport.callbacks.add('any', () => console.log('any change'));
+   */
+  callbacks: Callbacks<IViewportCallbackTypes>;
+  /** Current viewport width */
+  width: number;
+  /** Current viewport height */
+  height: number;
+  /** Current viewport outer radius */
+  radius: number;
+  /** Current viewport width divided by 100 */
+  vw: number;
+  /** Current viewport height divided by 100 */
+  vh: number;
+  /** Current viewport radius divided by 100 */
+  vr: number;
+  /** Is viewport in landscape mode */
+  isLandscape: boolean;
+  /** Is viewport in portrait mode */
+  isPortrait: boolean;
+  /** Is viewport in desktop mode */
+  isDesktop: boolean;
+  /** Is viewport in tablet mode */
+  isTablet: boolean;
+  /** Is viewport in phone mode */
+  isPhone: boolean;
+  /** Device pixel ratio */
+  dpr: number;
+  /** Lower device pixel ratio (1 for desktop and maximum 2 for mobile devices) */
+  lowerDpr: number;
+}

package/src/Vevet/exported.ts

@@ -0,0 +1,15 @@
+import { IVevetProps } from './types';
+import { IVevet } from './global';
+import { IOnPageLoad } from './events/createOnPageLoad/types';
+import {
+  IViewportCallbackTypes,
+  IViewport,
+} from './events/createViewport/types';
+
+export type {
+  IVevetProps,
+  IVevet,
+  IOnPageLoad,
+  IViewportCallbackTypes,
+  IViewport,
+};

package/src/Vevet/global.ts

@@ -0,0 +1,51 @@
+import { IOnPageLoad } from './events/createOnPageLoad/types';
+import { IViewport } from './events/createViewport/types';
+import { IVevetProps } from './types';
+import { PCancelable } from '@/utils/common/PCancelable';
+
+/** Vevet Application */
+export interface IVevet {
+  /** Current Vevet version */
+  version: string;
+  /** Appliction properties */
+  props: IVevetProps;
+  /** Prefix used by Vevet for class names. */
+  prefix: string;
+  /** Is phone device */
+  isPhone: boolean;
+  /** Is tablet device */
+  isTablet: boolean;
+  /** Is desktop device */
+  isDesktop: boolean;
+  /** Is mobile device */
+  isMobile: boolean;
+  /** OS name */
+  osName: string;
+  /** Browser name */
+  browserName: string;
+  /** If WebP is supported in the browser */
+  isWebpSupported: boolean;
+  /** Page load handler */
+  pageLoad: IOnPageLoad;
+  /** If the page is loaded */
+  isPageLoaded: boolean;
+  /** Viewport handler */
+  viewport: IViewport;
+  /** Document */
+  doc: Document;
+  /** HTML element */
+  html: HTMLElement;
+  /** Body element */
+  body: HTMLElement;
+  /**
+   * Add an event on page load
+   *
+   * @example
+   * const promise = vevet.onPageLoad();
+   *
+   * promise
+   *   .then(() => console.log('Page loaded'))
+   *   .catch(() => console.log('Error'));
+   */
+  onPageLoad: () => PCancelable<void>;
+}

package/src/Vevet/index.ts

@@ -0,0 +1,98 @@
+import version from '../version';
+import { createOnPageLoad } from './events/createOnPageLoad';
+import { IVevetProps } from './types';
+import { fetchWebpSupport } from './utils/fetchWebpSupport';
+import { PCancelable } from '@/utils/common/PCancelable';
+import { createViewport } from './events/createViewport';
+import { IVevet } from './global';
+import { getDeviceInfo } from './utils/getDeviceInfo';
+
+export function Vevet(input: Partial<IVevetProps>): IVevet {
+  // set default properties
+
+  const defaultProps: IVevetProps = {
+    tablet: 1199,
+    phone: 899,
+    easing: [0.25, 0.1, 0.25, 1],
+    resizeDebounce: 30,
+    checkWebpSupport: true,
+    widthDetection: 'boundingRect',
+  };
+
+  const props = { ...defaultProps, ...input };
+
+  const prefix = 'v-';
+
+  // device info
+
+  const { osName, browserName, device } = getDeviceInfo();
+  const isPhone = device.phone;
+  const isTablet = device.tablet;
+  const isMobile = device.phone || device.tablet;
+  const isDesktop = !isMobile;
+
+  // events
+
+  const pageLoad = createOnPageLoad(prefix);
+  const viewport = createViewport(props, isDesktop, prefix);
+
+  // output
+
+  const output: IVevet = {
+    version,
+    props,
+    prefix,
+    isPhone,
+    isTablet,
+    isDesktop,
+    isMobile,
+    osName,
+    browserName,
+    isWebpSupported: false,
+    pageLoad,
+    isPageLoaded: false,
+    viewport,
+    doc: document,
+    html: document.documentElement,
+    body: document.body,
+    onPageLoad: () =>
+      new PCancelable((resolve: (...arg: any) => void) =>
+        pageLoad.onLoad(resolve),
+      ),
+  };
+
+  // update props on page load
+
+  output.pageLoad.onLoad(() => {
+    output.isPageLoaded = true;
+  });
+
+  // set device features
+
+  (function setDeviceFeatures() {
+    const { html } = output;
+
+    html.classList.add(`${prefix}os-${osName}`);
+
+    html.classList.add(`${prefix}browser-${browserName}`);
+
+    html.classList.toggle(`${prefix}phone`, output.isPhone);
+
+    html.classList.toggle(`${prefix}tablet`, output.isTablet);
+
+    html.classList.toggle(`${prefix}mobile`, output.isMobile);
+
+    html.classList.toggle(`${prefix}desktop`, output.isDesktop);
+
+    // check webp support
+    if (props.checkWebpSupport) {
+      fetchWebpSupport()
+        .then(() => {
+          output.isWebpSupported = true;
+        })
+        .catch(() => {});
+    }
+  })();
+
+  return output;
+}

package/src/{Application → Vevet}/stories/index.tsx

@@ -1,13 +1,13 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { vevet } from '@/src/vevet';
 import { pickObjectProps } from '@/utils/common';
+import { getApp } from '@/utils/internal/getApp';
 
 export const Component: FC = () => {
   const [features, setFeatures] =
     useState<Record<string, boolean | number | string>>();
 
   const updateFeatures = useCallback(() => {
-    const object = pickObjectProps(vevet, [
+    const object = pickObjectProps(getApp(), [
       'version',
       'prefix',
       'isDesktop',

package/src/Vevet/types.ts

@@ -0,0 +1,48 @@
+import { TEasingType } from '@/utils/math';
+
+/**
+ * Application configuration properties for initializing Vevet.
+ */
+export interface IVevetProps {
+  /**
+   * Tablet identification max width in pixels.
+   * When changing this property, you need to
+   * update SASS variables: `$viewport-tablet`. The values must be equal.
+   * @default 1199
+   */
+  tablet: number;
+
+  /**
+   * Phone identification max width in pixels.
+   * When changing this property, you need to
+   * update SASS variables: `$viewport-phone`. The values must be equal.
+   * @default 899
+   */
+  phone: number;
+
+  /**
+   * Timeout (in ms) for viewport callbacks debouncing.
+   * @default 16
+   */
+  resizeDebounce: number;
+
+  /**
+   * Default easing function used in animations.
+   * Accepts a cubic-bezier array, function or an easing name defined {@link https://antonbobrov.github.io/easing-progress/|here}.
+   * @default [.25, .1, .25, 1]
+   */
+  easing: TEasingType;
+
+  /**
+   * Enable or disable WebP support check in the browser.
+   * @default false
+   */
+  checkWebpSupport: boolean;
+
+  /**
+   * Method for detecting the viewport width.
+   * Can be 'boundingRect' or 'clientWidth'.
+   * @default 'boundingRect'
+   */
+  widthDetection: 'boundingRect' | 'clientWidth';
+}