@lisergia/utilities 0.0.0

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@lisergia/utilities",
+  "version": "0.0.0",
+  "exports": {
+    "./*": "./src/*.ts"
+  },
+  "main": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "gsap": "^3.13.0"
+  }
+}

package/src/Canvas.ts

@@ -0,0 +1,65 @@
+function trim(canvas: HTMLCanvasElement) {
+  const context = canvas.getContext('2d')!
+
+  const copy = document.createElement('canvas').getContext('2d', { willReadFrequently: true })
+  const pixels = context.getImageData(0, 0, canvas.width, canvas.height)
+  const length = pixels.data.length
+
+  const bound: {
+    bottom: number | null
+    left: number | null
+    right: number | null
+    top: number | null
+  } = {
+    bottom: null,
+    left: null,
+    right: null,
+    top: null,
+  }
+
+  let x: number
+  let y: number
+
+  for (let i = 0; i < length; i += 4) {
+    if (pixels.data[i + 3] !== 0) {
+      x = (i / 4) % canvas.width
+      y = ~~(i / 4 / canvas.width)
+
+      if (bound.top === null) {
+        bound.top = y
+      }
+
+      if (bound.left === null) {
+        bound.left = x
+      } else if (x < bound.left) {
+        bound.left = x
+      }
+
+      if (bound.right === null) {
+        bound.right = x
+      } else if (bound.right < x) {
+        bound.right = x
+      }
+
+      if (bound.bottom === null) {
+        bound.bottom = y
+      } else if (bound.bottom < y) {
+        bound.bottom = y
+      }
+    }
+  }
+
+  const trimHeight = bound.bottom! - bound.top!
+  const trimWidth = bound.right! - bound.left!
+  const trimmed = context.getImageData(bound.left!, bound.top!, trimWidth, trimHeight)
+
+  copy!.canvas.width = trimWidth
+  copy!.canvas.height = trimHeight
+  copy!.putImageData(trimmed, 0, 0)
+
+  return copy!.canvas
+}
+
+export const CanvasUtils = {
+  trim,
+}

package/src/DOM.ts

@@ -0,0 +1,23 @@
+export interface DOMRectBounds {
+  bottom: number
+  height: number
+  left: number
+  top: number
+  width: number
+}
+
+function getBounds(element: HTMLElement, top = 0) {
+  const box = element.getBoundingClientRect()
+
+  return {
+    bottom: box.bottom,
+    height: box.height,
+    left: box.left,
+    top: box.top + top,
+    width: box.width,
+  } as DOMRectBounds
+}
+
+export const DOMUtils = {
+  getBounds,
+}

package/src/Detection.ts

@@ -0,0 +1,7 @@
+export class DetectionManager {
+  isMobile() {
+    return !document.documentElement.classList.contains('desktop')
+  }
+}
+
+export const Detection = new DetectionManager()

package/src/Math.ts

@@ -0,0 +1,37 @@
+function lerp(start: number, end: number, time: number) {
+  return start + (end - start) * time
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
+function random(min: number, max: number) {
+  return Math.random() * (max - min) + min
+}
+
+function map(
+  value: number,
+  inMin: number,
+  inMax: number,
+  outMin: number,
+  outMax: number,
+  clamp: boolean = false,
+): number {
+  let mapped = ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin
+
+  if (clamp) {
+    const [minOut, maxOut] = outMin < outMax ? [outMin, outMax] : [outMax, outMin]
+
+    mapped = Math.min(Math.max(mapped, minOut), maxOut)
+  }
+
+  return mapped
+}
+
+export const MathUtils = {
+  clamp,
+  lerp,
+  map,
+  random,
+}

package/src/Polyfill.ts

@@ -0,0 +1,51 @@
+declare interface HTMLElement {
+  forEach: Function
+}
+
+declare interface NodeList {
+  filter: Function
+  find: Function
+  map: Function
+}
+
+const HTMLElementPrototype = HTMLElement.prototype as {
+  forEach: Function
+}
+
+const NodeListPrototype = NodeList.prototype as {
+  filter: Function
+  find: Function
+  map: Function
+}
+
+/**
+ * Allow `forEach` to work with single HTMLElement.
+ */
+if (!HTMLElementPrototype.forEach) {
+  HTMLElementPrototype.forEach = function (callback: Function, thisArg: any) {
+    thisArg = thisArg || window
+
+    callback.call(thisArg, this, this, this)
+  }
+}
+
+/**
+ * Allow `filter` to work with NodeList.
+ */
+if (!NodeListPrototype.filter) {
+  NodeListPrototype.filter = Array.prototype.filter
+}
+
+/**
+ * Allow `find` to work with NodeList.
+ */
+if (!NodeListPrototype.find) {
+  NodeListPrototype.find = Array.prototype.find
+}
+
+/**
+ * Allow `map` to work with NodeList.
+ */
+if (!NodeListPrototype.map) {
+  NodeListPrototype.map = Array.prototype.map
+}

package/src/Promises.ts

@@ -0,0 +1,43 @@
+export const createPromise = <T>(): [Promise<T>, (value: T) => void] => {
+  let resolve: (value: T) => void
+
+  const promise = new Promise<T>((resolvePromise) => {
+    resolve = resolvePromise
+  })
+
+  return [promise, resolve!]
+}
+
+export const createPromiseWithReject = <T>(): [Promise<T>, (value: T) => void, (reason?: any) => void] => {
+  let resolve: (value: T) => void
+  let reject: (reason?: any) => void
+
+  const promise = new Promise<T>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise
+    reject = rejectPromise
+  })
+
+  return [promise, resolve!, reject!]
+}
+
+export const createPromiseWithTimeout = <T>(
+  timeout: number,
+): [Promise<T>, (value: T) => void, (reason?: any) => void] => {
+  let resolve: (value: T) => void
+  let reject: (reason?: any) => void
+
+  const promise = new Promise<T>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise
+    reject = rejectPromise
+  })
+
+  const timer = setTimeout(() => {
+    reject(new Error('Promise timed out'))
+  }, timeout)
+
+  promise.finally(() => {
+    clearTimeout(timer)
+  })
+
+  return [promise, resolve!, reject!]
+}

package/src/Text.ts

@@ -0,0 +1 @@
+export * from 'gsap/src/SplitText'

package/src/index.ts

@@ -0,0 +1,7 @@
+import './Polyfill'
+
+export * from './Canvas'
+export * from './Detection'
+export * from './DOM'
+export * from './Math'
+export * from './Text'