@operato/utils 8.0.0-beta.0 → 8.0.0-beta.1

package/src/fullscreen.ts

@@ -1,82 +0,0 @@
-/**
- * 풀스크린 전환 이후와 풀스크린 해제 이후에 호출되는 콜백함수
- * @callback FullscreenCallback
- */
-export type FullscreenCallback = () => void
-
-/**
- * 엘리먼트를 풀스크린으로 표시되도록 한다.
- * @param {HTMLElement} element 대상 엘리먼트
- * @param {FullscreenCallback} afterfull 풀스크린이 된 이후에 호출되는 콜백함수
- * @param {FullscreenCallback} afterfinish 풀스크린이 해제된 이후에 호출되는 콜백함수
- */
-export function fullscreen(element: HTMLElement, afterfull?: FullscreenCallback, afterfinish?: FullscreenCallback) {
-  var org_width = element.style.width
-  var org_height = element.style.height
-
-  function _fullscreen_callback(e: Event) {
-    if (
-      !document.fullscreenElement &&
-      //@ts-ignore
-      !document.mozFullScreen &&
-      //@ts-ignore
-      !document.webkitIsFullScreen &&
-      //@ts-ignore
-      !document.msFullscreenElement
-    ) {
-      ;['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange'].forEach(event =>
-        document.removeEventListener(event, _fullscreen_callback)
-      )
-
-      element.style.width = org_width
-      element.style.height = org_height
-
-      afterfinish && afterfinish()
-    } else {
-      element.style.width = '100%'
-      element.style.height = '100%'
-
-      afterfull && afterfull()
-    }
-  }
-
-  ;['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange'].forEach(event =>
-    document.addEventListener(event, _fullscreen_callback)
-  )
-
-  if (element.requestFullscreen) element.requestFullscreen()
-  //@ts-ignore
-  else if (element.webkitRequestFullScreen) element.webkitRequestFullScreen()
-  //@ts-ignore
-  else if (element.mozRequestFullScreen) element.mozRequestFullScreen()
-  //@ts-ignore
-  else if (element.msRequestFullscreen) element.msRequestFullscreen()
-}
-
-export function exitfullscreen() {
-  if (document.exitFullscreen) document.exitFullscreen()
-  //@ts-ignore
-  else if (document.mozCancelFullScreen) document.mozCancelFullScreen()
-  //@ts-ignore
-  else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen()
-  //@ts-ignore
-  else if (document.msExitFullscreen) document.msExitFullscreen()
-}
-
-export function togglefullscreen(
-  element: HTMLElement,
-  afterfull?: FullscreenCallback,
-  afterfinish?: FullscreenCallback
-) {
-  if (
-    !document.fullscreenElement &&
-    //@ts-ignore
-    !document.mozFullScreen &&
-    //@ts-ignore
-    !document.webkitIsFullScreen &&
-    //@ts-ignore
-    !document.msFullscreenElement
-  )
-    fullscreen(element, afterfull, afterfinish)
-  else exitfullscreen()
-}

package/src/gesture-helper.ts

@@ -1,147 +0,0 @@
-export type GestureEventPinch = CustomEvent<{ scale: number; centerX: number; centerY: number }>
-export type GestureEventDrag = CustomEvent<{
-  deltaX: number
-  deltaY: number
-  clientX: number
-  clientY: number
-  end: boolean
-}>
-export type GestureEventDoubleTap = CustomEvent<{ x: number; y: number }>
-
-export class GestureHelper {
-  private __pointers = new Map<number, { x: number; y: number }>()
-  private __lastTapTime = 0
-  private __lastPinchDistance = 0
-  private __dragStart: { x: number; y: number } | null = null
-  private element: Element
-
-  constructor(element: Element) {
-    this.element = element
-    this.init()
-  }
-
-  private init() {
-    this.element.addEventListener('pointerdown', this.handlePointerDown as EventListener)
-  }
-
-  dispose() {
-    this.element.removeEventListener('pointerdown', this.handlePointerDown as EventListener)
-    this.removeGlobalListeners()
-  }
-
-  private handlePointerDown = (e: PointerEvent) => {
-    e.preventDefault()
-    const point = { x: e.clientX, y: e.clientY }
-    this.__pointers.set(e.pointerId, point)
-
-    this.addGlobalListeners()
-  }
-
-  private handlePointerMove = (e: PointerEvent) => {
-    e.preventDefault()
-    const point = { x: e.clientX, y: e.clientY }
-    this.__pointers.set(e.pointerId, point)
-
-    if (this.__pointers.size === 2) {
-      this.handlePinch()
-    } else if (this.__pointers.size === 1) {
-      this.handleDrag(point, false)
-    }
-  }
-
-  private handlePointerUp = (e: PointerEvent) => {
-    const point = { x: e.clientX, y: e.clientY }
-    this.__pointers.delete(e.pointerId)
-
-    if (this.__dragStart) {
-      this.handleDrag(point, true)
-    }
-
-    if (this.__pointers.size === 0) {
-      this.removeGlobalListeners()
-      this.__dragStart = null
-      this.__lastPinchDistance = 0
-      this.handleTap(point)
-    }
-  }
-
-  private handlePinch() {
-    const pointers = Array.from(this.__pointers.values()) as { x: number; y: number }[]
-    const currentDistance = this.getDistance(pointers[0], pointers[1])
-
-    if (this.__lastPinchDistance) {
-      const scale = currentDistance / this.__lastPinchDistance
-      const center = {
-        x: (pointers[0].x + pointers[1].x) / 2,
-        y: (pointers[0].y + pointers[1].y) / 2
-      }
-
-      this.element.dispatchEvent(
-        new CustomEvent('pinch', {
-          detail: { scale, centerX: center.x, centerY: center.y }
-        })
-      )
-    }
-
-    this.__lastPinchDistance = currentDistance
-  }
-
-  private handleDrag(point: { x: number; y: number }, end: boolean) {
-    if (this.__dragStart) {
-      const deltaX = point.x - this.__dragStart.x
-      const deltaY = point.y - this.__dragStart.y
-
-      this.element.dispatchEvent(
-        new CustomEvent('drag', {
-          detail: { deltaX, deltaY, clientX: point.x, clientY: point.y, end }
-        })
-      )
-
-      if (end) {
-        this.__dragStart = null
-      } else {
-        this.__dragStart = point
-      }
-    } else if (!end && this.__pointers.size === 1) {
-      /* dragging을 시작하려면, pointer 개수가 1개인 것을 (지연)확인해야한다. */
-      setTimeout(() => {
-        if (this.__pointers.size === 1 && !this.__dragStart) {
-          this.__dragStart = point
-        }
-      }, 30)
-    }
-  }
-
-  private handleTap(point: { x: number; y: number }) {
-    const currentTime = performance.now()
-    const timeSinceLastTap = currentTime - this.__lastTapTime
-
-    if (timeSinceLastTap < 300) {
-      this.element.dispatchEvent(
-        new CustomEvent('doubletap', {
-          detail: { x: point.x, y: point.y }
-        })
-      )
-    }
-
-    this.__lastTapTime = currentTime
-  }
-
-  private getDistance(p1: { x: number; y: number }, p2: { x: number; y: number }): number {
-    const dx = p1.x - p2.x
-    const dy = p1.y - p2.y
-    return Math.sqrt(dx * dx + dy * dy)
-  }
-
-  private addGlobalListeners() {
-    document.addEventListener('pointermove', this.handlePointerMove as EventListener)
-    document.addEventListener('pointerup', this.handlePointerUp as EventListener)
-    document.addEventListener('pointercancel', this.handlePointerUp as EventListener)
-  }
-
-  private removeGlobalListeners() {
-    document.removeEventListener('pointermove', this.handlePointerMove as EventListener)
-    document.removeEventListener('pointerup', this.handlePointerUp as EventListener)
-    document.removeEventListener('pointercancel', this.handlePointerUp as EventListener)
-  }
-}

package/src/has-overflow.ts

@@ -1,22 +0,0 @@
-/**
- * Detects if the content of an HTMLElement overflows its boundaries.
- *
- * @param {HTMLElement} el - The HTMLElement to check for overflow.
- * @returns {boolean} - `true` if overflow is detected, `false` otherwise.
- */
-export function hasOverflow(el: HTMLElement): boolean {
-  const computedStyle = getComputedStyle(el)
-  const originalOverflow = computedStyle.overflow
-
-  if (originalOverflow === 'visible') {
-    el.style.overflow = 'hidden'
-  }
-
-  const isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight
-
-  if (originalOverflow === 'visible') {
-    el.style.overflow = ''
-  }
-
-  return isOverflowing
-}

package/src/index.ts

@@ -1,25 +0,0 @@
-export * from './sleep.js'
-export * from './async-lock.js'
-export * from './file-drop-helper.js'
-export * from './context-path.js'
-export * from './os.js'
-export * from './swipe-listener.js'
-export * from './fullscreen.js'
-export * from './parse-jwt.js'
-export * from './password-pattern.js'
-export * from './closest-element.js'
-export * from './detect-overflow.js' /* deprecated by 'has-overflow' */
-export * from './has-overflow.js'
-export * from './timecapsule/index.js'
-export * from './clipboard.js'
-export * from './format.js'
-export * from './adjust-list-param.js'
-export * from './is-unvalued.js'
-export * from './stringify-bignum.js'
-export * from './encode-form-params.js'
-export * from './cookie.js'
-export * from './number-parser.js'
-export * from './longpressable.js'
-export * from './decode-html.js'
-
-export * from './reactive-controllers'

package/src/is-unvalued.ts

@@ -1,10 +0,0 @@
-/**
- * It judges whether it is false except 0, false. Returns true in case of undefined, null, NaN, '', {}, [].
- *
- * @param value
- * @returns boolean
- */
-export function isUnvalued(value: any) {
-  /* value == null same as (value === undefined || value === null) */
-  return value == null || value !== 0 || value !== false || value.length === 0 || Object.keys(value).length === 0
-}

package/src/logger.ts

@@ -1,32 +0,0 @@
-const ERROR = '[ERROR]'
-const WARN = '[WARN]'
-const DEBUG = '[DEBUG]'
-
-/**
- * Logs an error message with optional stack trace.
- *
- * @param {...any} args - The error message and optional additional data.
- */
-export var error = (...args: any[]) => {
-  var trace = [] as string[]
-  args.forEach(arg => arg && arg.stack && trace.push(arg.stack))
-  console.error(ERROR, ...args, trace.join(' '))
-}
-
-/**
- * Logs a warning message with optional stack trace.
- *
- * @param {...any} args - The warning message and optional additional data.
- */
-export var warn = (...args: any[]) => {
-  var trace = [] as string[]
-  args.forEach(arg => arg && arg.stack && trace.push(arg.stack))
-  console.warn(WARN, ...args, trace.join(' '))
-}
-
-/**
- * Logs a debug message.
- *
- * @param {...any} args - The debug message and optional additional data.
- */
-export var debug = (...args: any[]) => console.log(DEBUG, ...args)

package/src/longpressable.ts

@@ -1,101 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-/* Inspired by https://github.com/john-doherty/long-press-event */
-
-var timer = null as any
-
-// check if we're using a touch screen
-//@ts-ignore
-const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
-
-// switch to touch events if using a touch screen
-const mouseDown = isTouch ? 'touchstart' : 'mousedown'
-const mouseOut = isTouch ? 'touchcancel' : 'mouseout'
-const mouseUp = isTouch ? 'touchend' : 'mouseup'
-const mouseMove = isTouch ? 'touchmove' : 'mousemove'
-
-/*
- * Fires the 'long-press' event on element
- * @returns {void}
- */
-function fireLongPressEvent(this: HTMLElement) {
-  clearLongPressTimer()
-
-  // fire the long-press event
-  var suppressClickEvent = this.dispatchEvent(new CustomEvent('long-press', { bubbles: true, cancelable: true }))
-
-  if (suppressClickEvent) {
-    // temporarily intercept and clear the next click
-    this.addEventListener(
-      mouseUp,
-      function clearMouseUp(e) {
-        this.removeEventListener(mouseUp, clearMouseUp, true)
-        cancelEvent(e)
-      },
-      true
-    )
-  }
-}
-
-/*
- * method responsible for starting the long press timer
- * @param {event} e - event object
- * @returns {void}
- */
-function startLongPressTimer(e: Event) {
-  clearLongPressTimer(e)
-
-  var el = e.target as HTMLElement
-
-  // get delay from html attribute if it exists, otherwise default to 1500
-  var longPressDelayInMs = parseInt(el.getAttribute('data-long-press-delay') || '600', 10)
-
-  // start the timer
-  timer = setTimeout(fireLongPressEvent.bind(el), longPressDelayInMs)
-}
-
-/*
- * method responsible for clearing a pending long press timer
- * @param {event} e - event object
- * @returns {void}
- */
-function clearLongPressTimer(e?: Event) {
-  clearTimeout(timer)
-  timer = null
-}
-
-/*
- * Cancels the current event
- * @param {object} e - browser event object
- * @returns {void}
- */
-function cancelEvent(e: Event) {
-  e.stopImmediatePropagation()
-  e.preventDefault()
-  e.stopPropagation()
-}
-
-/**
- * method set target element to be able to respond longpress event
- * @param {HTMLElement} element target element
- */
-export const longpressable = (element: HTMLElement) => {
-  // hook events that clear a pending long press event
-  element.addEventListener(mouseOut, clearLongPressTimer, true)
-  element.addEventListener(mouseUp, clearLongPressTimer, true)
-  element.addEventListener(mouseMove, clearLongPressTimer, true)
-  element.addEventListener('wheel', clearLongPressTimer, true)
-  element.addEventListener('scroll', clearLongPressTimer, true)
-
-  // hook events that can trigger a long press event
-  element.addEventListener(mouseDown, startLongPressTimer, true) // <- start
-
-  // cancel context for touch display
-  if (mouseDown.indexOf('touch') === 0) {
-    element.addEventListener('contextmenu', cancelEvent, true)
-  } else {
-    element.addEventListener('contextmenu', clearLongPressTimer, true)
-  }
-}

package/src/mixins/gesture-mixin.ts

@@ -1,157 +0,0 @@
-interface CustomElement extends HTMLElement {
-  connectedCallback?(): void
-  disconnectedCallback?(): void
-}
-
-type Constructor<T = CustomElement> = new (...args: any[]) => T
-
-export type GestureEventPinch = CustomEvent<{ scale: number; centerX: number; centerY: number }>
-export type GestureEventDrag = CustomEvent<{
-  deltaX: number
-  deltaY: number
-  clientX: number
-  clientY: number
-  end: boolean
-}>
-export type GestureEventDoubleTap = CustomEvent<{ x: number; y: number }>
-
-export function gesture<TBase extends Constructor>(Base: TBase) {
-  return class extends Base {
-    __pointers = new Map<number, { x: number; y: number }>()
-    __lastTapTime = 0
-    __lastPinchDistance = 0
-    __dragStart: { x: number; y: number } | null = null
-
-    connectedCallback(): void {
-      if (super.connectedCallback) {
-        super.connectedCallback()
-      }
-      this.addEventListener('pointerdown', this.handlePointerDown as EventListener)
-    }
-
-    disconnectedCallback(): void {
-      if (super.disconnectedCallback) {
-        super.disconnectedCallback()
-      }
-      this.removeEventListener('pointerdown', this.handlePointerDown as EventListener)
-      this.removeGlobalListeners()
-    }
-
-    handlePointerDown = (e: PointerEvent) => {
-      e.preventDefault()
-      const point = { x: e.clientX, y: e.clientY }
-      this.__pointers.set(e.pointerId, point)
-
-      this.addGlobalListeners()
-    }
-
-    handlePointerMove = (e: PointerEvent) => {
-      e.preventDefault()
-      const point = { x: e.clientX, y: e.clientY }
-      this.__pointers.set(e.pointerId, point)
-
-      if (this.__pointers.size === 2) {
-        this.handlePinch()
-      } else if (this.__pointers.size === 1) {
-        this.handleDrag(point, false)
-      }
-    }
-
-    handlePointerUp = (e: PointerEvent) => {
-      const point = { x: e.clientX, y: e.clientY }
-      this.__pointers.delete(e.pointerId)
-
-      if (this.__dragStart) {
-        this.handleDrag(point, true)
-      }
-
-      if (this.__pointers.size === 0) {
-        this.removeGlobalListeners()
-        this.__dragStart = null
-        this.__lastPinchDistance = 0
-        this.handleTap(point)
-      }
-    }
-
-    handlePinch() {
-      const pointers = Array.from(this.__pointers.values()) as { x: number; y: number }[]
-      const currentDistance = this.getDistance(pointers[0], pointers[1])
-
-      if (this.__lastPinchDistance) {
-        const scale = currentDistance / this.__lastPinchDistance
-        const center = {
-          x: (pointers[0].x + pointers[1].x) / 2,
-          y: (pointers[0].y + pointers[1].y) / 2
-        }
-
-        this.dispatchEvent(
-          new CustomEvent('pinch', {
-            detail: { scale, centerX: center.x, centerY: center.y }
-          })
-        )
-      }
-
-      this.__lastPinchDistance = currentDistance
-    }
-
-    handleDrag(point: { x: number; y: number }, end: boolean) {
-      if (this.__dragStart) {
-        const deltaX = point.x - this.__dragStart.x
-        const deltaY = point.y - this.__dragStart.y
-
-        this.dispatchEvent(
-          new CustomEvent('drag', {
-            detail: { deltaX, deltaY, clientX: point.x, clientY: point.y, end }
-          })
-        )
-
-        if (end) {
-          this.__dragStart = null
-        } else {
-          this.__dragStart = point
-        }
-      } else if (!end && this.__pointers.size === 1) {
-        /* dragging을 시작하려면, pointer 개수가 1개인 것을 (지연)확인해야한다. */
-        setTimeout(() => {
-          if (this.__pointers.size === 1 && !this.__dragStart) {
-            this.__dragStart = point
-          }
-        }, 30)
-      }
-    }
-
-    handleTap(point: { x: number; y: number }) {
-      const currentTime = performance.now()
-      const timeSinceLastTap = currentTime - this.__lastTapTime
-
-      if (timeSinceLastTap < 300) {
-        // 300ms is a common double-tap threshold
-        this.dispatchEvent(
-          new CustomEvent('doubletap', {
-            detail: { x: point.x, y: point.y }
-          })
-        )
-      }
-
-      this.__lastTapTime = currentTime
-    }
-
-    getDistance(p1: { x: number; y: number }, p2: { x: number; y: number }): number {
-      const dx = p1.x - p2.x
-      const dy = p1.y - p2.y
-      return Math.sqrt(dx * dx + dy * dy)
-    }
-
-    addGlobalListeners() {
-      document.addEventListener('pointermove', this.handlePointerMove as EventListener)
-      document.addEventListener('pointerup', this.handlePointerUp as EventListener)
-      document.addEventListener('pointercancel', this.handlePointerUp as EventListener)
-    }
-
-    removeGlobalListeners() {
-      document.removeEventListener('pointermove', this.handlePointerMove as EventListener)
-      document.removeEventListener('pointerup', this.handlePointerUp as EventListener)
-      document.removeEventListener('pointercancel', this.handlePointerUp as EventListener)
-    }
-  }
-}

package/src/mixins/index.ts

@@ -1,2 +0,0 @@
-export { default as InfiniteScrollable } from './infinite-scrollable.js'
-export * from './gesture-mixin.js'

package/src/mixins/infinite-scrollable.ts

@@ -1,67 +0,0 @@
-import debounce from 'lodash-es/debounce'
-
-type Constructor = new (...args: any[]) => {}
-
-/**
- * A higher-order function that enhances a base class with infinite scrolling functionality.
- *
- * @template TBase - The base class constructor type.
- * @param {TBase} Base - The base class to enhance with infinite scrolling.
- * @returns {TBase & InfiniteScrollable} - The extended class with infinite scrolling capabilities.
- */
-export default function InfiniteScrollable<TBase extends Constructor>(Base: TBase) {
-  return class Scrolling extends Base {
-    /**
-     * Default options for infinite scrolling.
-     *
-     * @type {object}
-     * @property {number} threshold - The threshold value to trigger loading more items.
-     * @property {number} limit - The limit of items to load per page.
-     * @property {string} totalProp - The property name for the total number of items.
-     * @property {string} pageProp - The property name for the current page number.
-     */
-    _infiniteScrollOptions = {
-      threshold: 20,
-      limit: 30,
-      totalProp: '_total',
-      pageProp: '_page'
-    }
-
-    /**
-     * Event handler for the scroll event with debouncing.
-     *
-     * @param {Event} e - The scroll event object.
-     */
-    onScroll = debounce(e => {
-      //@ts-ignore inheritted class should have scrollTargetEl property
-      var el = this.scrollTargetEl
-      if (!el) {
-        console.warn('scroll target element is not defined.')
-        return
-      }
-
-      var { threshold = 0, limit, totalProp, pageProp } = this._infiniteScrollOptions
-
-      if (
-        (this as any)[pageProp] < (this as any)[totalProp] / limit &&
-        el.scrollHeight - el.clientHeight <= el.scrollTop + threshold
-      ) {
-        this.scrollAction()
-      }
-    }, 300)
-
-    // commented due to TS2611 error
-    // get scrollTargetEl(): HTMLElement | null {
-    //   console.warn('scroll target element is not defined.')
-
-    //   return null
-    // }
-
-    /**
-     * An async function to handle scroll action when the threshold is reached.
-     */
-    async scrollAction() {
-      console.warn('scroll action not implemented.')
-    }
-  }
-}

package/src/number-parser.ts

@@ -1,24 +0,0 @@
-// 숫자라면 숫자값을, 아니면 null을 반환
-// 0         = true
-// '0'       = true
-// 123       = true
-// "123"     = true
-// -123      = true
-// "-123"    = true
-// true      = false
-// false     = false
-// ""        = false
-// null      = false
-// undefined = false
-// {}        = false
-// []        = false
-export function parseToNumberOrNull(value: any): number | null {
-  let result: number | null = null
-
-  // 숫자나 스트링이면서 NaN이 아니면 숫자로 변환
-  if ((typeof value === 'string' || typeof value === 'number') && value !== '' && !isNaN(value as number)) {
-    result = Number(value)
-  }
-
-  return result
-}