@operato/utils 8.0.0-alpha.37 → 8.0.0-beta.1

package/src/swipe-listener.ts

@@ -1,290 +0,0 @@
-/**
- * Starts monitoring swipes on the given element and
- * emits `swipe` event when a swipe gesture is performed.
- * @param {DOMElement} element Element on which to listen for swipe gestures.
- * @param {Object} options Optional: Options.
- * @return {Object}
- */
-export function SwipeListener(element: HTMLElement, options?: any) {
-  if (!element) return
-
-  // CustomEvent polyfill
-  if (typeof window !== 'undefined') {
-    ;(function () {
-      if (typeof window.CustomEvent === 'function') return false
-      function CustomEvent(event: string, params: any) {
-        params = params || { bubbles: false, cancelable: false, detail: undefined }
-        var evt = document.createEvent('CustomEvent')
-        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
-        return evt
-      }
-      CustomEvent.prototype = window.Event.prototype
-      ;(window as any).CustomEvent = CustomEvent
-    })()
-  }
-
-  let defaultOpts = {
-    minHorizontal: 10, // Minimum number of pixels traveled to count as a horizontal swipe.
-    minVertical: 10, // Minimum number of pixels traveled to count as a vertical swipe.
-    deltaHorizontal: 3, // Delta for horizontal swipe
-    deltaVertical: 5, // Delta for vertical swipe
-    preventScroll: false, // Prevents scrolling when swiping.
-    lockAxis: true, // Select only one axis to be true instead of multiple.
-    touch: true, // Listen for touch events
-    mouse: true // Listen for mouse events
-  }
-
-  // Set options
-  if (!options) {
-    options = {}
-  }
-  options = {
-    ...defaultOpts,
-    ...options
-  }
-
-  // Store the touches
-  let touches: Array<{ x: number; y: number }> = []
-
-  // Not dragging by default.
-  let dragging = false
-
-  // When mouse-click is started, make dragging true.
-  const _mousedown = function (e: MouseEvent) {
-    dragging = true
-  }
-
-  // When mouse-click is released, make dragging false and signify end by imitating `touchend`.
-  const _mouseup = function (e: MouseEvent) {
-    dragging = false
-    _touchend(e as any)
-  }
-
-  // When mouse is moved while being clicked, imitate a `touchmove`.
-  const _mousemove = function (e: MouseEvent) {
-    if (dragging) {
-      ;(e as any).changedTouches = [
-        {
-          clientX: e.clientX,
-          clientY: e.clientY
-        }
-      ]
-      _touchmove(e as any)
-    }
-  }
-
-  if (options.mouse) {
-    element.addEventListener('mousedown', _mousedown)
-    element.addEventListener('mouseup', _mouseup)
-    element.addEventListener('mousemove', _mousemove)
-  }
-
-  // When the swipe is completed, calculate the direction.
-  const _touchend = function (e: TouchEvent) {
-    if (!touches.length) return
-
-    const touch = typeof TouchEvent === 'function' && e instanceof TouchEvent
-
-    let x = [],
-      y = []
-
-    let directions = {
-      top: false,
-      right: false,
-      bottom: false,
-      left: false
-    }
-
-    for (let i = 0; i < touches.length; i++) {
-      x.push(touches[i].x)
-      y.push(touches[i].y)
-    }
-
-    const xs = x[0],
-      xe = x[x.length - 1], // Start and end x-coords
-      ys = y[0],
-      ye = y[y.length - 1] // Start and end y-coords
-
-    const eventCoords = {
-      x: [xs, xe],
-      y: [ys, ye]
-    }
-
-    if (touches.length > 1) {
-      const swipeReleaseEventData = {
-        detail: {
-          touch,
-          target: e.target,
-          ...eventCoords
-        }
-      }
-
-      let swipeReleaseEvent = new CustomEvent('swiperelease', swipeReleaseEventData)
-      element.dispatchEvent(swipeReleaseEvent)
-    }
-
-    // Determine left or right
-    let diff = x[0] - x[x.length - 1]
-    let swipe = 'none'
-    if (diff > 0) {
-      swipe = 'left'
-    } else {
-      swipe = 'right'
-    }
-
-    let min = Math.min(...x),
-      max = Math.max(...x),
-      _diff
-
-    // If minimum horizontal distance was travelled
-    if (Math.abs(diff) >= options.minHorizontal) {
-      switch (swipe) {
-        case 'left':
-          _diff = Math.abs(min - x[x.length - 1])
-          if (_diff <= options.deltaHorizontal) {
-            directions.left = true
-          }
-          break
-        case 'right':
-          _diff = Math.abs(max - x[x.length - 1])
-          if (_diff <= options.deltaHorizontal) {
-            directions.right = true
-          }
-          break
-      }
-    }
-
-    // Determine top or bottom
-    diff = y[0] - y[y.length - 1]
-    swipe = 'none'
-    if (diff > 0) {
-      swipe = 'top'
-    } else {
-      swipe = 'bottom'
-    }
-
-    min = Math.min(...y)
-    max = Math.max(...y)
-
-    // If minimum vertical distance was travelled
-    if (Math.abs(diff) >= options.minVertical) {
-      switch (swipe) {
-        case 'top':
-          _diff = Math.abs(min - y[y.length - 1])
-          if (_diff <= options.deltaVertical) {
-            directions.top = true
-          }
-          break
-        case 'bottom':
-          _diff = Math.abs(max - y[y.length - 1])
-          if (_diff <= options.deltaVertical) {
-            directions.bottom = true
-          }
-          break
-      }
-    }
-
-    // Clear touches array.
-    touches = []
-
-    // If there is a swipe direction, emit an event.
-    if (directions.top || directions.right || directions.bottom || directions.left) {
-      /**
-       * If lockAxis is true, determine which axis to select.
-       * The axis with the most travel is selected.
-       * TODO: Factor in for the orientation of the device
-       * and use it as a weight to determine the travel along an axis.
-       */
-      if (options.lockAxis) {
-        if ((directions.left || directions.right) && Math.abs(xs - xe) > Math.abs(ys - ye)) {
-          directions.top = directions.bottom = false
-        } else if ((directions.top || directions.bottom) && Math.abs(xs - xe) < Math.abs(ys - ye)) {
-          directions.left = directions.right = false
-        }
-      }
-
-      const eventData = {
-        detail: {
-          directions,
-          touch,
-          target: e.target,
-          ...eventCoords
-        }
-      }
-
-      let event = new CustomEvent('swipe', eventData)
-      element.dispatchEvent(event)
-    } else {
-      let cancelEvent = new CustomEvent('swipecancel', {
-        detail: {
-          touch,
-          target: e.target,
-          ...eventCoords
-        }
-      })
-      element.dispatchEvent(cancelEvent)
-    }
-  }
-
-  // When a swipe is performed, store the coords.
-  const _touchmove = function (e: TouchEvent) {
-    let touch = e.changedTouches[0]
-    touches.push({
-      x: touch.clientX,
-      y: touch.clientY
-    })
-
-    // Emit a `swiping` event if there are more than one touch-points.
-    if (touches.length > 1) {
-      const xs = touches[0].x, // Start and end x-coords
-        xe = touches[touches.length - 1].x,
-        ys = touches[0].y, // Start and end y-coords
-        ye = touches[touches.length - 1].y,
-        eventData = {
-          detail: {
-            x: [xs, xe],
-            y: [ys, ye],
-            touch: typeof TouchEvent === 'function' && e instanceof TouchEvent,
-            target: e.target
-          }
-        }
-      let event = new CustomEvent('swiping', eventData)
-
-      const shouldPrevent =
-        options.preventScroll === true || (typeof options.preventScroll === 'function' && options.preventScroll(event))
-
-      if (shouldPrevent) {
-        e.preventDefault()
-      }
-
-      element.dispatchEvent(event)
-    }
-  }
-
-  // Test via a getter in the options object to see if the passive property is accessed
-  let passiveOptions: any = false
-  try {
-    const testOptions = Object.defineProperty({}, 'passive', {
-      get: function () {
-        passiveOptions = { passive: !options.preventScroll }
-      }
-    })
-    window.addEventListener('testPassive', null as any, testOptions)
-    window.removeEventListener('testPassive', null as any, testOptions)
-  } catch (e) {}
-
-  if (options.touch) {
-    element.addEventListener('touchmove', _touchmove, passiveOptions)
-    element.addEventListener('touchend', _touchend)
-  }
-
-  return {
-    off: function () {
-      element.removeEventListener('touchmove', _touchmove, passiveOptions)
-      element.removeEventListener('touchend', _touchend)
-      element.removeEventListener('mousedown', _mousedown)
-      element.removeEventListener('mouseup', _mouseup)
-      element.removeEventListener('mousemove', _mousemove)
-    }
-  }
-}

package/src/timecapsule/index.ts

@@ -1,2 +0,0 @@
-export * from './timecapsule.js'
-export * from './snapshot-taker.js'

package/src/timecapsule/snapshot-taker.ts

@@ -1,105 +0,0 @@
-import { TimeCapsule } from './timecapsule'
-import debounce from 'lodash-es/debounce'
-
-/**
- * A function that takes a SnapshotTaker as an argument and initiates snapshot creation
- * using a debouncer to delay the process.
- * @param {SnapshotTaker} taker - The SnapshotTaker instance to trigger snapshots for.
- */
-var debouncer = debounce(
-  taker => {
-    if (!taker.brake) {
-      taker.take()
-    }
-  },
-  1000,
-  { leading: true, trailing: false }
-)
-
-/**
- * Function to trigger snapshot creation for a SnapshotTaker instance.
- * Checks if the taker is in a brake state or not dirty before triggering the snapshot.
- * @param {SnapshotTaker} taker - The SnapshotTaker instance to create a snapshot for.
- */
-function take_snapshot(taker: SnapshotTaker) {
-  if (taker.brake || !taker.dirty) return
-  debouncer(taker)
-}
-
-/**
- * Type definition for holding state information.
- * @typedef {Object} StateHolder
- * @property {*} state - The state to be held.
- */
-export type StateHolder = {
-  state: any
-}
-
-/**
- * Class responsible for taking and managing snapshots of state.
- */
-export class SnapshotTaker {
-  private _brake: boolean = false
-
-  dirty: boolean = false
-
-  state_holder?: StateHolder
-  timecapsule?: TimeCapsule
-
-  /**
-   * Creates an instance of SnapshotTaker.
-   * @param {*} state_holder - The object that holds the state to be snapshot.
-   * @param {TimeCapsule} timecapsule - The TimeCapsule instance associated with this SnapshotTaker.
-   */
-  constructor(state_holder: any, timecapsule: TimeCapsule) {
-    this.state_holder = state_holder
-    this.timecapsule = timecapsule
-    this.timecapsule.snapshot_taker = this
-  }
-
-  /**
-   * Disposes of the SnapshotTaker and clears associated references.
-   */
-  dispose() {
-    delete this.state_holder
-    delete this.timecapsule
-  }
-
-  /**
-   * Marks the SnapshotTaker as dirty and initiates snapshot creation.
-   */
-  touch() {
-    this.dirty = true
-    take_snapshot(this)
-  }
-
-  /* 모든 조건에 관계없이 현재 상태를 snapshot으로 취한다. */
-  /**
-   * Takes a snapshot of the current state.
-   * @param {boolean} [force=false] - If true, the snapshot is taken even if not dirty.
-   */
-  take(force: boolean = false) {
-    if (this.dirty || force) {
-      this.timecapsule?.snapshot(this.state_holder?.state)
-      this.dirty = false
-    }
-  }
-
-  /**
-   * Gets the brake state of the SnapshotTaker.
-   * @returns {boolean} - true if the brake is active, false otherwise.
-   */
-  get brake() {
-    return this._brake
-  }
-
-  /* 마우스를 드래깅하는 동안, 보통 brake 를 ON 시킨다. */
-  /**
-   * Sets the brake state of the SnapshotTaker and initiates snapshot creation.
-   * @param {boolean} brake - The new brake state.
-   */
-  set brake(brake) {
-    this._brake = !!brake
-    take_snapshot(this)
-  }
-}

package/src/timecapsule/timecapsule.ts

@@ -1,139 +0,0 @@
-import { debug, error, warn } from '../logger'
-
-import { SnapshotTaker } from './snapshot-taker'
-
-/**
- * A utility class for managing and navigating through a history of snapshots.
- */
-export class TimeCapsule {
-  private q: Array<any> = []
-  private maxsize = 10
-  private pos = -1
-
-  private _snapshot_taker: SnapshotTaker | null = null
-
-  /**
-   * Creates an instance of TimeCapsule.
-   * @param {number} maxsize - The maximum number of snapshots to store.
-   * @param {any} [start_state] - The initial state to be stored as the first snapshot (optional).
-   */
-  constructor(maxsize: number, start_state?: any) {
-    maxsize = Number(maxsize)
-
-    if (!maxsize || maxsize <= 0) {
-      error('TimeCapsule maxsize should be greater than 0.', maxsize)
-    } else {
-      this.maxsize = maxsize
-    }
-
-    this.reset()
-    if (start_state) {
-      this.snapshot(start_state)
-    }
-  }
-
-  /**
-   * Disposes of the TimeCapsule and clears all stored snapshots.
-   */
-  dispose() {
-    this.reset()
-  }
-
-  /**
-   * Captures a snapshot of the current state and stores it.
-   * @param {any} state - The state to be captured as a snapshot.
-   */
-  snapshot(state: any) {
-    this.q.splice(this.pos + 1, this.q.length - (this.pos + 1), state)
-
-    if (this.q.length > this.maxsize) {
-      this.q.splice(0, this.q.length - this.maxsize)
-    }
-
-    this.pos = this.q.length - 1
-  }
-
-  /**
-   * Moves forward to the next snapshot in the history.
-   * @returns {any} The next state snapshot if available, or logs a warning if not.
-   */
-  forward() {
-    if (this.snapshot_taker) this.snapshot_taker.take()
-
-    if (this.forwardable) {
-      return this.q[++this.pos]
-    }
-    warn('Not forwardable.')
-  }
-
-  /**
-   * Moves backward to the previous snapshot in the history.
-   * @returns {any} The previous state snapshot if available, or logs a warning if not.
-   */
-  backward() {
-    if (this.snapshot_taker) this.snapshot_taker.take()
-
-    if (this.backwardable) {
-      return this.q[--this.pos]
-    }
-    warn('Not backwardable.')
-  }
-
-  /**
-   * Gets the current state snapshot.
-   * @returns {any} The current state snapshot if available, or logs a warning if not.
-   */
-  get current() {
-    if (this.pos !== -1) return this.q[this.pos]
-
-    warn('Non state has been recorded.')
-  }
-
-  /**
-   * Gets the number of snapshots stored in the TimeCapsule.
-   * @returns {number} The count of stored snapshots.
-   */
-  get length() {
-    return this.q.length
-  }
-
-  /**
-   * Checks if there is a snapshot available to move forward.
-   * @returns {boolean} True if moving forward is possible, otherwise false.
-   */
-  get forwardable() {
-    return this.pos < this.q.length - 1
-  }
-
-  /**
-   * Checks if there is a snapshot available to move backward.
-   * @returns {boolean} True if moving backward is possible, otherwise false.
-   */
-  get backwardable() {
-    return this.pos > 0
-  }
-
-  /**
-   * Gets the SnapshotTaker associated with this TimeCapsule.
-   * @returns {SnapshotTaker | null} The associated SnapshotTaker, or null if not set.
-   */
-  get snapshot_taker(): SnapshotTaker | null {
-    return this._snapshot_taker
-  }
-
-  /**
-   * Sets the SnapshotTaker for this TimeCapsule.
-   * @param {SnapshotTaker | null} snapshot_taker - The SnapshotTaker instance to associate with this TimeCapsule.
-   */
-  set snapshot_taker(snapshot_taker: SnapshotTaker | null) {
-    this._snapshot_taker = snapshot_taker
-  }
-
-  /**
-   * Resets the TimeCapsule, clearing all stored snapshots and resetting the position.
-   */
-  reset() {
-    this.q = []
-    this.pos = -1
-  }
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});