vevet 2.16.1 → 3.0.0-beta.0

package/src/utils/internal/onResize.ts

@@ -0,0 +1,108 @@
+import { NViewport } from 'src/Application/events/Viewport';
+import { NCallbacks } from '@/base/Callbacks';
+
+export type TOnResizeTarget = keyof NViewport.ICallbacksTypes;
+
+export interface IOnResizeProps {
+  /** Callback on resize */
+  onResize: () => void;
+  /** Observable element */
+  element?: Element | Element[] | false;
+  /**
+   * Viewport target on resize.
+   * It will be used if `element` is not provided
+   * or `ResizeObserver` is not supported.
+   * @default 'any'
+   */
+  viewportTarget?: TOnResizeTarget;
+  /**
+   * Has both `vewport resize` and `ResizeObserver`
+   * @default false
+   */
+  hasBothEvents?: boolean;
+  /**
+   * Resize debounce timeout
+   * @default 0
+   */
+  resizeDebounce?: number;
+}
+
+export interface IOnResize {
+  /** Remove resize events */
+  remove: () => void;
+  /** Launch resize callback */
+  resize: () => void;
+  /** Launch resize callback with debounce */
+  debounceResize: () => void;
+  /** `ResizeObserver` was used */
+  hasResizeObserver: boolean;
+}
+
+/**
+ * Add events on resize.
+ * If `element` is provided, `ResizeObserver` will be used (first callback will not be fired).
+ * Otherwise, viewport callbacks will be used.
+ */
+export function onResize({
+  onResize: handleResize,
+  element,
+  viewportTarget = 'any',
+  hasBothEvents = false,
+  resizeDebounce = 0,
+}: IOnResizeProps): IOnResize {
+  let timeout: NodeJS.Timeout | undefined;
+  let resizeObserver: ResizeObserver | undefined;
+  let isFirstResizeObserverCallback = true;
+
+  let viewportCallback: NCallbacks.IAddedCallback | undefined;
+
+  const debounceResize = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+
+    timeout = setTimeout(() => handleResize(), resizeDebounce);
+  };
+
+  if (
+    element &&
+    (element instanceof Element || Array.isArray(element)) &&
+    'ResizeObserver' in window
+  ) {
+    resizeObserver = new ResizeObserver(() => {
+      if (isFirstResizeObserverCallback) {
+        isFirstResizeObserverCallback = false;
+
+        return;
+      }
+
+      debounceResize();
+    });
+
+    if (Array.isArray(element)) {
+      element.forEach((item) => resizeObserver?.observe(item));
+    } else {
+      resizeObserver.observe(element);
+    }
+  }
+
+  if (hasBothEvents || !resizeObserver) {
+    viewportCallback = window.vevetApp.viewport.add(viewportTarget, () =>
+      debounceResize()
+    );
+  }
+
+  return {
+    remove: () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+
+      resizeObserver?.disconnect();
+      viewportCallback?.remove();
+    },
+    resize: () => handleResize(),
+    debounceResize,
+    hasResizeObserver: !!resizeObserver,
+  };
+}

package/src/utils/listeners/index.ts

@@ -0,0 +1,3 @@
+export * from './isIntersectionObserverSupported';
+
+// TODO: examples

package/src/utils/listeners/isIntersectionObserverSupported.ts

@@ -0,0 +1,12 @@
+/** Check if intersection observer is supported */
+export function isIntersectionObserverSupported() {
+  if (
+    !('IntersectionObserver' in window) ||
+    !('IntersectionObserverEntry' in window) ||
+    !('intersectionRatio' in window.IntersectionObserverEntry.prototype)
+  ) {
+    return false;
+  }
+
+  return true;
+}

package/src/utils/math/clamp.ts

@@ -0,0 +1,18 @@
+/**
+ * Clamp the value between two points
+ *
+ * @example
+ *
+ * clamp(1.5, [0.1, 0.9]); // => 0.9
+ * clamp(0.001, [0.1, 0.9]); // => 0.1
+ */
+export function clamp(val: number, scope = [0, 1]) {
+  if (val < scope[0]) {
+    return scope[0];
+  }
+  if (val > scope[1]) {
+    return scope[1];
+  }
+
+  return val;
+}

package/src/utils/math/clampScope.ts

@@ -0,0 +1,18 @@
+import { scoped } from './scoped';
+import { clamp } from './clamp';
+
+/**
+ * Get progress relatively to the scope and clamp it within two points
+ *
+ * @example
+ *
+ * clampScope(0.38, [0.35, 1]); // => 0.046
+ * clampScope(0.38, [0.35, 1], [0.1, 1]); // => 0.1
+ */
+export function clampScope(
+  value: number,
+  scopeProp = [0, 1],
+  clampProp = [0, 1]
+) {
+  return clamp(scoped(value, scopeProp), clampProp);
+}

package/src/utils/math/easing.ts

@@ -0,0 +1,17 @@
+import easingProgress from 'easing-progress';
+
+export { Easing } from 'easing-progress';
+
+/**
+ * Easing progress
+ *
+ * @example
+ *
+ * easing(0.35, Easing.easeInBounce); // => 0.167
+ * easing(0.35, [.25, .1, .25, 1]); // => 0.604
+ * easing(0.35, (value) => Math.sin(Math.PI * 0.5 * value)); // => 0.522
+ */
+export const easing: typeof easingProgress = (
+  progress,
+  easingType = window.vevetApp?.props.easing ?? false
+) => easingProgress(progress, easingType);

package/src/utils/math/inScope.ts

@@ -0,0 +1,13 @@
+/**
+ * Check if the value is within the scope
+ *
+ * @example
+ *
+ * inScope(0, [0, 1]); // => true
+ * inScope(1, [0, 1]); // => true
+ * inScope(2, [0, 1]); // => false
+ * inScope(-1, [0, 1]); // => false
+ */
+export function inScope(val: number, scopeValue = [0, 1]) {
+  return val >= scopeValue[0] && val <= scopeValue[1];
+}

package/src/utils/math/index.ts

@@ -0,0 +1,9 @@
+export * from './clamp';
+export * from './clampScope';
+export * from './easing';
+export * from './inScope';
+export * from './lerp';
+export * from './normalizeNestedScope';
+export * from './scoped';
+export * from './spreadScope';
+export * from './wrap';

package/src/utils/math/lerp.ts

@@ -0,0 +1,23 @@
+/**
+ * Linear interpolation
+ *
+ * @example
+ *
+ * lerp(0, 1, 0.4); // => 0.4
+ * lerp(0.75, 0.8, 0.98); // => 0.799
+ */
+export function lerp(
+  current: number,
+  target: number,
+  ease: number,
+  approximationLeft = 0.001
+) {
+  const value = current * (1 - ease) + target * ease;
+  const difference = Math.abs(target - value);
+
+  if (difference <= approximationLeft) {
+    return target;
+  }
+
+  return value;
+}

package/src/utils/math/normalizeNestedScope.ts

@@ -0,0 +1,19 @@
+/**
+ * Cast scope value relative to global scope
+ *
+ * @example
+ *
+ * normalizeNestedScope([0, 1], [0.1, 0.8]); // => [0.1, 0.8]
+ * normalizeNestedScope([0.2, 0.9], [0.1, 0.8]); // => [0.24, 0.73]
+ */
+export function normalizeNestedScope(
+  innerScope: [number, number] | number[],
+  globalScope: [number, number] | number[]
+): [number, number] {
+  const dist = globalScope[1] - globalScope[0];
+
+  return [
+    globalScope[0] + innerScope[0] * dist,
+    globalScope[0] + innerScope[1] * dist,
+  ];
+}

package/src/utils/math/scoped.ts

@@ -0,0 +1,14 @@
+/**
+ * Get progress relatively to the scope.
+ *
+ * @example
+ *
+ * scoped(0.35, [0, 1]); // => 0.35
+ * scoped(0.35, [0.25, 1]); // => 0.133
+ * scoped(0.35, [0.25, 0.9]); // => 0.153
+ */
+export function scoped(val: number, scopeValue = [0, 1]) {
+  const result = (val - scopeValue[0]) / (scopeValue[1] - scopeValue[0]);
+
+  return result;
+}

package/src/utils/math/spreadScope.ts

@@ -0,0 +1,23 @@
+/**
+ * Distribute scope progress among a certain quantity of timelines.
+ *
+ * @example
+ *
+ * spreadScope(3, 0.1); // => [[0,0.35714285714285715],[0.32142857142857145,0.6785714285714286],[0.6428571428571429,1]]
+ * spreadScope(3, 0.9); // => [[0,0.8333333333333334],[0.08333333333333331,0.9166666666666667],[0.16666666666666663,1]]
+ */
+export function spreadScope(quantity: number, shift: number) {
+  const timelines: number[][] = [];
+
+  // duration for each element
+  const duration = 1 / (quantity - shift * (quantity - 1));
+
+  // calculate timelines
+  for (let index = 0; index < quantity; index += 1) {
+    const start = duration * (1 - shift) * index;
+    const end = start + duration;
+    timelines.push([start, end]);
+  }
+
+  return timelines;
+}

package/src/utils/math/wrap.ts

@@ -0,0 +1,25 @@
+function conditionalReturn(value: number, func: (val: number) => number) {
+  return value || value === 0 ? func(value) : func;
+}
+
+/**
+ * Wrap values
+ *
+ * @example
+ *
+ * wrap(0, 3, 0); // => 0
+ * wrap(0, 3, 1); // => 1
+ * wrap(0, 3, 2); // => 2
+ * wrap(0, 3, 3); // => 0
+ * wrap(0, 3, -1); // => 2
+ * wrap(0, 3, -2); // => 1
+ * wrap(0, 3, -3); // => 0
+ */
+export function wrap(min: number, max: number, value: number) {
+  const range = max - min;
+
+  return conditionalReturn(
+    value,
+    (val) => ((range + ((val - min) % range)) % range) + min
+  ) as number;
+}

package/src/utils/scroll/getScrollValues.ts

@@ -0,0 +1,28 @@
+import { IScrollLike } from '@/types/general';
+
+export interface IGetScrollValues {
+  scrollTop: number;
+  scrollLeft: number;
+}
+
+/**
+ * Get scroll values of a certain element
+ */
+export function getScrollValues(
+  selector: Window | Element | IScrollLike | undefined = window
+): IGetScrollValues | undefined {
+  if (!selector) {
+    return undefined;
+  }
+
+  const scrollTop =
+    selector instanceof Window ? selector.pageYOffset : selector.scrollTop;
+
+  const scrollLeft =
+    selector instanceof Window ? selector.pageXOffset : selector.scrollLeft;
+
+  return {
+    scrollTop,
+    scrollLeft,
+  };
+}

package/src/utils/scroll/index.ts

@@ -0,0 +1,7 @@
+export * from './getScrollValues';
+export * from './normalizeWheel';
+export * from './onScroll';
+export * from './scrollTo';
+export * from './scrollToElement';
+
+// TODO: examples

package/src/utils/scroll/normalizeWheel.ts

@@ -0,0 +1,5 @@
+import normalizeWheelFunc from 'normalize-wheel';
+
+export function normalizeWheel(event: WheelEvent) {
+  return normalizeWheelFunc(event);
+}

package/src/utils/scroll/onScroll.ts

@@ -0,0 +1,113 @@
+import { addEventListener, selectOne } from 'vevet-dom';
+import { IRemovable } from '@/types/general';
+import { uid } from '../common';
+import type { SmoothScroll } from '@/components/SmoothScroll';
+import { getScrollValues } from './getScrollValues';
+
+type TContainer = string | Element | SmoothScroll | Window;
+
+export interface IOnScrollCallbackParameter {
+  scrollTop: number;
+  scrollLeft: number;
+}
+
+interface IInstance {
+  id: string;
+  container: TContainer;
+  callbacks: {
+    id: string;
+    callback: (data: IOnScrollCallbackParameter) => void;
+  }[];
+  isPassive: boolean;
+  listeners: IRemovable[];
+}
+
+export interface IOnScrollProps {
+  container: TContainer;
+  callback: (data: IOnScrollCallbackParameter) => void;
+  isPassive?: boolean;
+}
+
+let instances: IInstance[] = [];
+
+/**
+ * Add `onScroll` event
+ */
+export function onScroll({
+  container,
+  callback,
+  isPassive = false,
+}: IOnScrollProps): IRemovable {
+  // check if listeners for this element already exist
+  let instance = instances.find(
+    (data) => data.container === container && data.isPassive === isPassive
+  )!;
+
+  const callbackId = uid('scroll-event');
+
+  // if a listener exists, we just add a new callback to its stack
+  if (instance) {
+    instance.callbacks.push({ id: callbackId, callback });
+  } else {
+    // otherwise we create a new instance
+    instance = {
+      id: uid('scroll-event-instance'),
+      container,
+      callbacks: [{ id: callbackId, callback }],
+      isPassive,
+      listeners: [],
+    };
+    instances.push(instance);
+
+    // smooth scroll events
+    if (typeof container === 'object' && 'isSmoothScroll' in container) {
+      instance.listeners.push(
+        container.addCallback(
+          'render',
+          () => {
+            const { scrollTop, scrollLeft } = container;
+
+            instance.callbacks.forEach((item) =>
+              item.callback({ scrollTop, scrollLeft })
+            );
+          },
+          { name: 'onScroll' }
+        )
+      );
+    } else {
+      // dom scroll events
+      const domContainer = selectOne(container) as any;
+
+      instance.listeners.push(
+        addEventListener(
+          domContainer,
+          'scroll',
+          () => {
+            const data = getScrollValues(domContainer);
+            if (!data) {
+              return;
+            }
+
+            instance.callbacks.forEach((item) => item.callback(data));
+          },
+          { passive: isPassive }
+        )
+      );
+    }
+  }
+
+  const remove = () => {
+    const newCallbacks = instance.callbacks.filter(
+      (item) => item.id !== callbackId
+    );
+
+    instance.callbacks = newCallbacks;
+
+    if (newCallbacks.length === 0) {
+      instance.listeners.forEach((listener) => listener.remove());
+      instances = instances.filter((item) => item.id !== instance.id);
+    }
+  };
+
+  return { remove };
+}

package/src/utils/scroll/scrollTo.ts

@@ -0,0 +1,74 @@
+import { IScrollLike } from '@/types/general';
+import { getScrollValues } from './getScrollValues';
+import { Timeline } from '@/components/Timeline';
+
+export interface IScrollToProps {
+  /**
+   * @default window
+   */
+  container?: Window | Element | IScrollLike;
+  /**
+   * top padding
+   * @default 0
+   */
+  top?: number;
+  /**
+   * left padding
+   * @default 0
+   */
+  left?: number;
+  /**
+   * Scroll duration. Number (ms) of function (ms).
+   * @default 250
+   */
+  duration?: number | ((lengthPx: number) => number);
+}
+
+/**
+ * Scroll to coordinates
+ */
+export function scrollTo({
+  container = window,
+  top = 0,
+  left = 0,
+  duration: durationProp = 250,
+}: IScrollToProps) {
+  return new Promise<void>((resolve, reject) => {
+    const startValues = getScrollValues(container);
+
+    if (!startValues) {
+      reject();
+
+      return;
+    }
+
+    const topDiff = top - startValues.scrollTop;
+    const leftDiff = left - startValues.scrollLeft;
+
+    const lengthPx = Math.max(Math.abs(topDiff), Math.abs(leftDiff));
+
+    const finalDuration =
+      typeof durationProp === 'number' ? durationProp : durationProp(lengthPx);
+
+    const timeline = new Timeline({
+      duration: finalDuration,
+      isDestroyOnEnd: true,
+    });
+
+    timeline.addCallback('progress', ({ easing }) => {
+      if (!container) {
+        return;
+      }
+
+      container.scrollTo({
+        top: startValues.scrollTop + topDiff * easing,
+        left: startValues.scrollLeft + leftDiff * easing,
+        behavior: 'auto',
+      });
+    });
+
+    timeline.addCallback('end', () => resolve());
+
+    timeline.play();
+  });
+}

package/src/utils/scroll/scrollToElement.ts

@@ -0,0 +1,54 @@
+import { selectOne } from 'vevet-dom';
+import { getScrollValues } from './getScrollValues';
+import { clamp } from '../math/clamp';
+import { IScrollToProps, scrollTo } from './scrollTo';
+
+export interface IScrollToElementProps extends IScrollToProps {
+  /**
+   * The target element
+   */
+  element: Element | string;
+}
+
+/**
+ * Scroll to element
+ */
+export function scrollToElement({
+  container = window,
+  element: elementProp,
+  top = 0,
+  left = 0,
+  ...props
+}: IScrollToElementProps) {
+  return new Promise<void>((resolve, reject) => {
+    const startValues = getScrollValues(container);
+    const element = selectOne(elementProp);
+
+    if (!startValues || !element) {
+      reject();
+
+      return;
+    }
+
+    const bounding = element.getBoundingClientRect();
+
+    const toTop = clamp(bounding.top + startValues.scrollTop - top, [
+      0,
+      Infinity,
+    ]);
+
+    const toLeft = clamp(bounding.left + startValues.scrollLeft - left, [
+      0,
+      Infinity,
+    ]);
+
+    scrollTo({
+      ...props,
+      container,
+      top: toTop,
+      left: toLeft,
+    })
+      .then(resolve)
+      .catch(reject);
+  });
+}

package/src/version.ts

@@ -0,0 +1,2 @@
+const version = '3.0.0-beta.0';
+export default version;

package/src/vevet.ts

@@ -0,0 +1,4 @@
+import { Application } from '.';
+
+export const vevet =
+  typeof window.vevetApp !== 'undefined' ? window.vevetApp : new Application();

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Anthony Bobrov
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.