vevet 4.4.2 → 5.0.0

package/src/components/index.ts

@@ -1,19 +1,15 @@
-export * from './AnimationFrame';
-export * from './Ctx2D';
-export * from './Ctx2DPrerender';
-export * from './CustomCursor';
-export * from './DraggerBase';
-export * from './DraggerDirection';
-export * from './DraggerMove';
+export * from './Canvas';
+export * from './CanvasMedia';
+export * from './Cursor';
+export * from './InView';
 export * from './Marquee';
+export * from './Pointers';
 export * from './Preloader';
 export * from './ProgressPreloader';
-export * from './ScrollBar';
-export * from './ScrollView';
-export * from './SectionScrollProgress';
-export * from './SlideProgress';
-export * from './CustomScroll';
-export * from './CustomScrollDragPlugin';
-export * from './CustomScrollKeyboardPlugin';
+export * from './Raf';
+export * from './Scrollbar';
+export * from './ScrollProgress';
+export * from './Snap';
 export * from './SplitText';
+export * from './Swipe';
 export * from './Timeline';

package/src/core/exported.ts

@@ -0,0 +1,8 @@
+import { ICoreProps } from './types';
+import { ICore } from './global';
+import { presetCssVars } from './scripts/presetCssVars';
+import { IViewportCallbacksMap } from './handlers/createViewport/types';
+
+export { presetCssVars };
+
+export type { ICoreProps, ICore, IViewportCallbacksMap };

package/src/core/global.ts

@@ -0,0 +1,103 @@
+import {
+  IViewport,
+  TViewportCallbacks,
+  TViewportCallbacksOn,
+} from './handlers/createViewport/types';
+import { ICoreProps } from './types';
+
+/** Vevet Core */
+export interface ICore extends IViewport {
+  /** Current Vevet version */
+  version: string;
+
+  /** Application properties */
+  props: ICoreProps;
+
+  /** Prefix used by Vevet for class names. */
+  prefix: string;
+
+  /** Is phone device */
+  phone: boolean;
+
+  /** Is tablet device */
+  tablet: boolean;
+
+  /** Is mobile device */
+  mobile: boolean;
+
+  /**
+   * OS name in lowercase. Popular results:
+   *
+   * - windows
+   * - macos
+   * - android
+   * - ios
+   */
+  osName: string;
+
+  /**
+   * Browser name in lowercase. Popular results:
+   *
+   * - chrome
+   * - edge-chromium
+   * - opera
+   * - firefox
+   * - safari
+   * - ios (safari & in-app safari)
+   * - crios (chrome in ios)
+   * - samsung
+   * - yandexbrowser
+   * - ios-webview
+   */
+  browserName: string;
+
+  /** Document */
+  doc: Document;
+
+  /** HTML element */
+  html: HTMLElement;
+
+  /** Body element */
+  body: HTMLElement;
+
+  /** If the page is loaded */
+  loaded: boolean;
+
+  /** List of viewport callbacks */
+  viewportCallbacks: TViewportCallbacks;
+
+  /**
+   * Add an event on page load.
+   *
+   * @example
+   * const destruct = vevet.onLoad(() => {
+   *   console.log('Page loaded');
+   * });
+   *
+   * // cancel the event
+   * destruct();
+   */
+  onLoad: (callback: () => void) => () => void;
+
+  /**
+   * Adds viewport callbacks.
+   *
+   * @example
+   *
+   * vevet.onViewport('width', () => console.log('width changed'));
+   *
+   * vevet.onViewport('height', () => console.log('height changed'));
+   *
+   * vevet.onViewport('both', () => console.log('both width and height changed'));
+   *
+   * vevet.onViewport('width_', () => console.log('only width changed'));
+   *
+   * vevet.onViewport('height_', () => console.log('only height changed'));
+   *
+   * const destruct = vevet.onViewport('any', () => console.log('any change'));
+   *
+   * // cancel the event
+   * destruct();
+   */
+  onViewport: TViewportCallbacksOn;
+}

package/src/core/handlers/createPageLoad/index.ts

@@ -0,0 +1,50 @@
+import { Callbacks } from '@/base/Callbacks';
+import { IPageLoadCallbacksMap } from './types';
+import { addEventListener } from '@/utils/listeners';
+
+interface IProps {
+  prefix: string;
+  applyClassNames: boolean;
+}
+
+export function createPageLoad({ prefix, applyClassNames }: IProps) {
+  const callbacks = new Callbacks<IPageLoadCallbacksMap>();
+
+  let isLoaded = false;
+
+  if (document.readyState === 'complete') {
+    setTimeout(() => handleLoaded(), 0);
+  } else {
+    addEventListener(window, 'load', () => handleLoaded());
+  }
+
+  /** Callback on page loaded */
+  function handleLoaded() {
+    const html = document.documentElement;
+    const { body } = document;
+
+    isLoaded = true;
+
+    if (applyClassNames) {
+      html.classList.remove(`${prefix}loading`);
+      body.classList.remove(`${prefix}loading`);
+
+      html.classList.add(`${prefix}loaded`);
+    }
+
+    callbacks.emit('loaded', undefined);
+  }
+
+  /** Add a callback on page load */
+  function onLoad(callback: () => void) {
+    if (isLoaded) {
+      callback();
+
+      return () => {};
+    }
+
+    return callbacks.on('loaded', () => callback());
+  }
+
+  return { onLoad, getIsLoaded: () => isLoaded };
+}

package/src/core/handlers/createPageLoad/types.ts

@@ -0,0 +1,5 @@
+import { ICallbacksMap } from '@/base/Callbacks';
+
+export interface IPageLoadCallbacksMap extends ICallbacksMap {
+  loaded: undefined;
+}

package/src/core/handlers/createViewport/index.ts

@@ -0,0 +1,162 @@
+import { IViewport, TViewportCallbacks } from './types';
+import { Callbacks } from '@/base/Callbacks';
+import { ICoreProps } from '@/core/types';
+import { addEventListener } from '@/utils/listeners';
+
+interface IProps {
+  prefix: string;
+  props: ICoreProps;
+  isMobile: boolean;
+}
+
+export function createViewport({ prefix, props, isMobile }: IProps) {
+  const html = document.documentElement;
+
+  let styles = document.getElementById('vevet_css_preset');
+  if (!styles) {
+    styles = document.createElement('style');
+    styles.id = 'vevet_css_preset';
+    document.body.appendChild(styles);
+  }
+
+  const mqDesktop = window.matchMedia(`(min-width: ${props.md + 0.001}px)`);
+  const mqTablet = window.matchMedia(
+    `(min-width: ${props.sm + 0.001}px) and (max-width: ${props.md}px)`,
+  );
+  const mqPhone = window.matchMedia(`(max-width: ${props.sm}px)`);
+
+  // create callbacks
+  const callbacks: TViewportCallbacks = new Callbacks();
+
+  // default data
+  const data: IViewport = {
+    width: 0,
+    height: 0,
+    sHeight: 0,
+    vw: 0,
+    vh: 0,
+    svh: 0,
+    rem: 16,
+    landscape: false,
+    portrait: false,
+    dpr: window.devicePixelRatio,
+    lowerDpr: window.devicePixelRatio,
+    sm: true,
+    md: false,
+    lg: false,
+  };
+
+  // update values for the first time
+  updateValues();
+  updateClassNames();
+  updateCSSVars();
+
+  // add resize events
+
+  let debounce: NodeJS.Timeout | undefined;
+
+  addEventListener(window, 'resize', () => {
+    if (debounce) {
+      clearTimeout(debounce);
+      debounce = undefined;
+    }
+
+    debounce = setTimeout(() => onResize(), props.resizeDebounce);
+  });
+
+  /** Event on window resize */
+  function onResize() {
+    const { width: prevWidth, height: prevHeight } = data;
+
+    updateValues();
+    updateClassNames();
+    updateCSSVars();
+
+    const { width, height } = data;
+
+    callbacks.emit('any', undefined);
+
+    if (width !== prevWidth && height === prevHeight) {
+      callbacks.emit('width_', undefined);
+    }
+
+    if (height !== prevHeight && width === prevWidth) {
+      callbacks.emit('height_', undefined);
+    }
+
+    if (width !== prevWidth && height !== prevHeight) {
+      callbacks.emit('both', undefined);
+    }
+
+    if (width !== prevWidth) {
+      callbacks.emit('width', undefined);
+    }
+
+    if (height !== prevHeight) {
+      callbacks.emit('height', undefined);
+    }
+  }
+
+  /** Update viewport values */
+  function updateValues() {
+    const { width: prevWidth } = data;
+
+    const root = document.documentElement;
+    const rootStyles = getComputedStyle(root);
+
+    data.width = window.innerWidth;
+    data.height = window.innerHeight;
+    data.vw = data.width / 100;
+    data.vh = data.height / 100;
+    data.rem = parseFloat(rootStyles.fontSize);
+    data.landscape = data.width > data.height;
+    data.portrait = data.width < data.height;
+    data.dpr = window.devicePixelRatio;
+    data.lowerDpr = !isMobile ? 1 : Math.min(data.dpr, 2);
+    data.sm = false;
+    data.md = false;
+    data.lg = false;
+
+    if (mqPhone.matches) {
+      data.sm = true;
+    } else if (mqTablet.matches) {
+      data.md = true;
+    } else if (mqDesktop.matches) {
+      data.lg = true;
+    }
+
+    // update sHeight && svh only when the width changes
+    // or for desktop
+    if (prevWidth !== data.width || !data.sHeight || !isMobile) {
+      data.sHeight = root.clientHeight;
+      data.svh = data.sHeight / 100;
+    }
+  }
+
+  /** Update page classnames according to the viewport data */
+  function updateClassNames() {
+    if (!props.applyClassNames) {
+      return;
+    }
+
+    html.classList.toggle(`${prefix}lg`, data.lg);
+    html.classList.toggle(`${prefix}md`, data.md);
+    html.classList.toggle(`${prefix}sm`, data.sm);
+
+    html.classList.toggle(`${prefix}landscape`, data.landscape);
+    html.classList.toggle(`${prefix}portrait`, data.portrait);
+  }
+
+  /** Update CSS variables */
+  function updateCSSVars() {
+    styles!.innerHTML = `
+      html {
+        --vw: ${data.vw}px;
+        --vh: ${data.vh}px;
+        --svh: ${data.svh}px;
+      }
+    `;
+  }
+
+  return { data, callbacks };
+}

package/src/core/handlers/createViewport/types.ts

@@ -0,0 +1,89 @@
+import { Callbacks, ICallbacksMap } from '@/base/Callbacks';
+
+export interface IViewportCallbacksMap extends ICallbacksMap {
+  /**
+   * 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
+   */
+  width_: undefined;
+
+  /**
+   * When only the height is changed
+   */
+  height_: undefined;
+
+  /**
+   * Any change
+   */
+  any: undefined;
+}
+
+export interface IViewport {
+  /** Current viewport width */
+  width: number;
+
+  /** Current viewport height */
+  height: number;
+
+  /**
+   * Current viewport small height
+   *
+   * Used to prevent layout shifts on some browsers such as In-App Safari.
+   */
+  sHeight: number;
+
+  /** Current viewport width divided by 100 */
+  vw: number;
+
+  /** Current viewport height divided by 100 */
+  vh: number;
+
+  /**
+   * Current viewport small height divided by 100 (svh).
+   *
+   * Used to prevent layout shifts on some browsers such as In-App Safari.
+   */
+  svh: number;
+
+  /** Root `font-size` in pixels (`1rem` to pixels) */
+  rem: number;
+
+  /** Is viewport in landscape mode */
+  landscape: boolean;
+
+  /** Is viewport in portrait mode */
+  portrait: boolean;
+
+  /** Device pixel ratio */
+  dpr: number;
+
+  /** Lower device pixel ratio (1 for desktop and maximum 2 for mobile devices) */
+  lowerDpr: number;
+
+  /** SM breakpoint is active */
+  sm: boolean;
+
+  /** MD breakpoint is active */
+  md: boolean;
+
+  /** LG breakpoint is active */
+  lg: boolean;
+}
+
+export type TViewportCallbacks = Callbacks<IViewportCallbacksMap>;
+
+export type TViewportCallbacksOn = TViewportCallbacks['on'];

package/src/core/index.ts

@@ -0,0 +1,103 @@
+import { detect } from 'detect-browser';
+import isMobileJs from 'ismobilejs';
+import version from '../version';
+import { createPageLoad } from './handlers/createPageLoad';
+import { ICoreProps } from './types';
+import { createViewport } from './handlers/createViewport';
+import { ICore } from './global';
+
+export function Core(input: Partial<ICoreProps>): ICore {
+  // set default properties
+
+  const defaultProps: ICoreProps = {
+    md: 1199,
+    sm: 899,
+    resizeDebounce: 16,
+    applyClassNames: false,
+  };
+
+  const props = { ...defaultProps, ...input };
+
+  const prefix = 'v-';
+
+  // device info
+
+  const browserData = detect();
+  const device = isMobileJs();
+
+  const osName = (browserData?.os || '')?.split(' ')[0].toLowerCase();
+  const browserName = (browserData?.name || '').toLowerCase();
+
+  const isMobile = device.phone || device.tablet;
+
+  // events
+
+  const pageLoad = createPageLoad({
+    prefix,
+    applyClassNames: props.applyClassNames,
+  });
+  const viewport = createViewport({ prefix, props, isMobile });
+
+  // output
+
+  const output: ICore = {
+    ...viewport.data,
+    viewportCallbacks: viewport.callbacks,
+    version,
+    props,
+    prefix,
+    phone: device.phone,
+    tablet: device.tablet,
+    mobile: isMobile,
+    osName,
+    browserName,
+    doc: document,
+    html: document.documentElement,
+    body: document.body,
+    loaded: false,
+    onLoad: pageLoad.onLoad,
+    onViewport: (...params) => viewport.callbacks.on(...params),
+  };
+
+  // update props on page load
+
+  pageLoad.onLoad(() => {
+    output.loaded = true;
+  });
+
+  // update props on viewport change
+
+  viewport.callbacks.add(
+    'any',
+    () => {
+      const keys = Object.keys(viewport.data);
+      keys.forEach((key) => {
+        // @ts-ignore
+        output[key] = viewport.data[key];
+      });
+    },
+    { protected: true, name: 'vevet core' },
+  );
+
+  // set device features
+
+  (function setDeviceFeatures() {
+    if (!props.applyClassNames) {
+      return;
+    }
+
+    const { html } = output;
+
+    html.classList.add(`${prefix}os-${osName}`);
+
+    html.classList.add(`${prefix}browser-${browserName}`);
+
+    html.classList.toggle(`${prefix}phone`, output.phone);
+
+    html.classList.toggle(`${prefix}tablet`, output.tablet);
+
+    html.classList.toggle(`${prefix}mobile`, output.mobile);
+  })();
+
+  return output;
+}

package/src/core/scripts/presetCssVars.ts

@@ -0,0 +1,21 @@
+export const presetCssVars = `var presetVevetCss = function update() {
+  if (window.vevet5) {
+    return;
+  }
+
+  var doc = document.documentElement;
+
+  var styles = document.createElement('style');
+  styles.id = 'vevet_css_preset';
+  document.body.appendChild(styles);
+
+  var w = window.innerWidth;
+  var h = window.innerHeight;
+  var sh = doc.clientHeight;
+
+  styles.innerHTML = 'html { --vw: ' + w / 100 + 'px; --vh: ' + h / 100 + 'px; --svh: ' + sh / 100 + 'px; }';
+};
+
+window.addEventListener('resize', presetVevetCss);
+
+presetVevetCss();`;

package/src/core/types.ts

@@ -0,0 +1,32 @@
+/**
+ * Application configuration properties for initializing Vevet.
+ */
+export interface ICoreProps {
+  /**
+   * Medium breakpoint in pixels.
+   * When changing this property, you need to
+   * update the SASS variable: `$md`. The values must be equal.
+   * @default 1199
+   */
+  md: number;
+
+  /**
+   * Small breakpoint in pixels.
+   * When changing this property, you need to
+   * update the SASS variable: `$sm`. The values must be equal.
+   * @default 899
+   */
+  sm: number;
+
+  /**
+   * Timeout (in milliseconds) for viewport callbacks debouncing.
+   * @default 16
+   */
+  resizeDebounce: number;
+
+  /**
+   * If need to apply class names for the root element: such as browser, OS name, etc.
+   * @default false
+   */
+  applyClassNames: boolean;
+}

package/src/global/initVevet.ts

@@ -0,0 +1,31 @@
+import { Core } from '@/core';
+import { ICore } from '@/core/global';
+import { ICoreProps } from '@/core/types';
+
+declare global {
+  interface Window {
+    vevet5: Readonly<ICore>;
+    VEVET_PROPS: Partial<ICoreProps>;
+  }
+}
+
+/**
+ * @group Utils
+ */
+export function initVevet() {
+  if (window.vevet5) {
+    return window.vevet5;
+  }
+
+  const coreProps = window.VEVET_PROPS ?? {};
+
+  const core = Core(coreProps);
+  window.vevet5 = core;
+
+  return window.vevet5;
+}
+
+// auto initialize
+if (typeof window !== 'undefined') {
+  window.vevet5 = initVevet();
+}

package/src/index.ts

@@ -1,29 +1,21 @@
-import { getApp } from './utils/internal/getApp';
-import { IVevet } from './Vevet/global';
-import { IVevetProps } from './Vevet/types';
+import { ICore } from './core/global';
+import { initVevet } from './global/initVevet';
+
+export { initVevet };
 
 /**
- * Vevet Application
+ * Vevet Core
  *
- * @see {@linkcode IVevet}
+ * @group Core
  */
 export const vevet = (
-  typeof window !== 'undefined' ? getApp() : undefined
-) as IVevet;
-
-declare global {
-  interface Window {
-    vevetApp: IVevet;
-    VEVET_PROPS: Partial<IVevetProps>;
-  }
-}
+  typeof window !== 'undefined' ? initVevet() : undefined
+) as Readonly<ICore>;
 
-export * from './Vevet/exported';
+export * from './core/exported';
 
 export * from './utils';
 
 export * from './base';
 
 export * from './components';
-
-export * from './types';