maz-ui/dist/composables/useIdleTimeout.js

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

import { e } from "../chunks/isClient.8V3qjGdO.js";
class l {
  constructor(t, e$1) {
    this.callback = t, this.options = {
      ...this.defaultOptions,
      ...e$1
    }, e() && 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 (!e()) {
      console.warn("[IdleTimeout](start) you should run this method on client side");
      return;
    }
    for (const t of this.eventNames)
      this.element.addEventListener(t, this.handleEvent);
    this.resetTimeout(), this.options.immediate && this.callback({ isIdle: !1, instance: this });
  }
  pause() {
    const t = this.startTime + this.options.timeout - Date.now();
    t <= 0 || (this.remainingTime = t, 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 (!e()) {
      console.warn("[IdleTimeout](destroy) you should run this method on client side");
      return;
    }
    this.isDestroy = !0;
    for (const t of this.eventNames)
      this.element.removeEventListener(t, 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 = (t) => {
    try {
      if (this.remainingTime > 0)
        return;
      if (t.type === "mousemove") {
        const { clientX: e2, clientY: i } = t;
        if (e2 === void 0 && i === void 0 || e2 === this.lastClientX && i === this.lastClientY)
          return;
        this.lastClientX = e2, this.lastClientY = i;
      }
      this.resetTimeout(), this.callback({ isIdle: this.isIdle, eventType: t.type, instance: this });
    } catch (e2) {
      throw new Error(`[IdleTimeout](handleEvent) ${e2}`);
    }
  };
  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(t) {
    this.options.timeout = t;
  }
  get idle() {
    return this.isIdle;
  }
  set idle(t) {
    t ? this.handleTimeout() : this.reset(), this.callback({ isIdle: this.isIdle, instance: this });
  }
}
function useIdleTimeout({
  callback,
  options
}) {
  return new l(callback, options);
}
export {
  useIdleTimeout
};