maz-ui/dist/composables/useIdleTimeout.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { i as isClient } from "../chunks/isClient.WI4oSt66.js";
class IdleTimeout {
  constructor(callback, options) {
    this.callback = callback, this.options = {
      ...this.defaultOptions,
      ...options
    }, isClient() && this.start();
  }
  defaultOptions = {
    element: void 0,
    timeout: 60 * 1e3 * 5,
    // 5 minutes
    once: !1,
    immediate: !0
  };
  options;
  timeoutHandler;
  isIdle = !1;
  isDestroy = !1;
  startTime = 0;
  remainingTime = 0;
  lastClientX = -1;
  lastClientY = -1;
  eventNames = [
    "DOMMouseScroll",
    "mousedown",
    "mousemove",
    "mousewheel",
    "MSPointerDown",
    "MSPointerMove",
    "keydown",
    "touchmove",
    "touchstart",
    "wheel",
    "click"
  ];
  get element() {
    return this.options.element ?? document.body;
  }
  start() {
    if (!isClient()) {
      console.warn("[IdleTimeout](start) you should run this method on client side");
      return;
    }
    for (const eventName of this.eventNames)
      this.element.addEventListener(eventName, this.handleEvent);
    this.resetTimeout(), this.options.immediate && this.callback({ isIdle: !1, instance: this });
  }
  pause() {
    const remainingTime = this.startTime + this.options.timeout - Date.now();
    remainingTime <= 0 || (this.remainingTime = remainingTime, this.timeoutHandler && (clearTimeout(this.timeoutHandler), this.timeoutHandler = void 0));
  }
  resume() {
    this.remainingTime <= 0 || (this.resetTimeout(), this.callback({ isIdle: this.isIdle, instance: this }), this.remainingTime = 0);
  }
  reset() {
    this.isDestroy = !1, this.isIdle = !1, this.remainingTime = 0, this.resetTimeout(), this.callback({ isIdle: this.isIdle, instance: this });
  }
  destroy() {
    if (!isClient()) {
      console.warn("[IdleTimeout](destroy) you should run this method on client side");
      return;
    }
    this.isDestroy = !0;
    for (const eventName of this.eventNames)
      this.element.removeEventListener(eventName, this.handleEvent);
    this.timeoutHandler && clearTimeout(this.timeoutHandler);
  }
  resetTimeout() {
    this.isIdle = !1, this.timeoutHandler && (clearTimeout(this.timeoutHandler), this.timeoutHandler = void 0), this.timeoutHandler = setTimeout(
      this.handleTimeout.bind(this),
      this.remainingTime || this.options.timeout
    ), this.startTime = Date.now();
  }
  handleEvent = (event) => {
    try {
      if (this.remainingTime > 0)
        return;
      if (event.type === "mousemove") {
        const { clientX, clientY } = event;
        if (clientX === void 0 && clientY === void 0 || clientX === this.lastClientX && clientY === this.lastClientY)
          return;
        this.lastClientX = clientX, this.lastClientY = clientY;
      }
      this.resetTimeout(), this.callback({ isIdle: this.isIdle, eventType: event.type, instance: this });
    } catch (error) {
      throw new Error(`[IdleTimeout](handleEvent) ${error}`);
    }
  };
  handleTimeout() {
    this.isIdle = !0, this.callback({ isIdle: this.isIdle, instance: this }), this.options.once && this.destroy();
  }
  get destroyed() {
    return this.isDestroy;
  }
  get timeout() {
    return this.options.timeout;
  }
  set timeout(value) {
    this.options.timeout = value;
  }
  get idle() {
    return this.isIdle;
  }
  set idle(value) {
    value ? this.handleTimeout() : this.reset(), this.callback({ isIdle: this.isIdle, instance: this });
  }
}
function useIdleTimeout({
  callback,
  options
}) {
  return new IdleTimeout(callback, options);
}
export {
  useIdleTimeout
};