Feat: add inactiveSeconds option ✨

nickap · Aug 10, 2024 · ea9f877 · ea9f877
1 parent 3b1dd5e
commit ea9f877
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -77,16 +77,17 @@ const {
 
 | Key                           | Default Value     | Type    | Required |
 | ----------------------------- | ----------------- | ------- | -------- |
-| **repeatAfterDays**           | 7                 | Number  | false    |
-| **scrollPercentageToTrigger** | 0                 | Number  | false    |
-| **delaySecondsAndTrigger**    | 0                 | Number  | false    |
-| **triggerOnExitIntent**       | true              | Boolean | false    |
-| **touchDeviceSensitivity**    | 15                | Number  | false    |
-| **scrollDebounceMillis**      | 300               | Number  | false    |
-| **triggerOnPageLoad**         | false             | Boolean | false    |
-| **handleScrollBars**          | false             | Boolean | false    |
-| **LSItemKey**                 | 'vue-exit-intent' | String  | false    |
-| **setupBeforeMount**          | false             | Boolean | false    |
+| **repeatAfterDays**           | 7                 | number  | false    |
+| **scrollPercentageToTrigger** | 0                 | number  | false    |
+| **delaySecondsAndTrigger**    | 0                 | number  | false    |
+| **triggerOnExitIntent**       | true              | boolean | false    |
+| **touchDeviceSensitivity**    | 15                | number  | false    |
+| **scrollDebounceMillis**      | 300               | number  | false    |
+| **triggerOnPageLoad**         | false             | boolean | false    |
+| **handleScrollBars**          | false             | boolean | false    |
+| **LSItemKey**                 | 'vue-exit-intent' | string  | false    |
+| **setupBeforeMount**          | false             | boolean | false    |
+| **inactiveSeconds**           | 0                 | number  | false    |
 
 ### Options Description
 
@@ -137,6 +138,10 @@ const {
   Determines whether the initialization of the composable occurs during the `onBeforeMount` lifecycle hook instead of the default `onMounted` hook.  
   This options allows you to set up the exit intent before your component is mounted.
 
+- **inactiveSeconds**  
+  Delay, in seconds, before activating mouse, touch, and scroll listeners to track user behavior and potentially trigger the popup after an exit intent is detected (mouse leaves the viewport, scroll percentage reached, or fast touch scroll up). This delay helps prevent the immediate display of the popup, ensuring it only appears if the user wants to leave the page after the specified time. Set to 0 to disable this delay.
+  **This option DELAYS adding mouse, scroll and touch listeners**
+
 ## Contribute
 
 Feel free to contribute, message me for your ideas.

diff --git a/src/App.vue b/src/App.vue
@@ -2,7 +2,8 @@
 import { useVueExitIntent } from '@/composables/useVueExitIntent.js';
 
 const options = {
-  handleScrollBars: true
+  handleScrollBars: true,
+  inactiveSeconds: 3
 };
 
 const {
@@ -19,8 +20,10 @@ const {
   <div id="demo-page">
     <h1>Vue Exit Intent Demo Page</h1>
     <p>
-      <b>Desktop</b>: Move your mouse outside the document.<br />
-      <b>Touch Device</b>: After you scroll down the document, scroll up fast.
+      <b>Desktop</b>: Wait 3 seconds and move your mouse outside the
+      document.<br />
+      <b>Touch Device</b>: Wait 3 seconds and after you scroll down the
+      document, scroll up fast.
     </p>
     <p>
       Do you want to unsubscribe from this popup, and to not trigger in the
@@ -33,6 +36,8 @@ const {
       <button @click="resetState">Reset State</button>
     </p>
 
+    <pre>options: {{ options }}</pre>
+
     <div class="current-state">
       <p><strong>Current State:</strong></p>
       <p>isShowing: {{ isShowing }}</p>

diff --git a/src/composables/useVueExitIntent.ts b/src/composables/useVueExitIntent.ts
@@ -64,14 +64,20 @@ export function useVueExitIntent(userOptions: Partial<Options> = {}) {
       isLocalStorageExpired(options) && !isUnsubscribed.value;
   };
 
-  const initialize = () => {
+  const addListeners = () => {
     if (options.triggerOnExitIntent) {
       if (options.touchDeviceSensitivity && isTouchDevice()) {
         addTouchListeners();
       } else {
         addMouseListener();
       }
     }
+    if (options.scrollPercentageToTrigger) {
+      addScrollListener();
+    }
+  };
+
+  const initialize = () => {
     if (options.delaySecondsAndTrigger) {
       setTimeout(() => {
         fire();
@@ -80,8 +86,13 @@ export function useVueExitIntent(userOptions: Partial<Options> = {}) {
     if (options.triggerOnPageLoad) {
       fire();
     }
-    if (options.scrollPercentageToTrigger) {
-      addScrollListener();
+
+    if (options.inactiveSeconds) {
+      setTimeout(() => {
+        addListeners();
+      }, options.inactiveSeconds * 1000);
+    } else {
+      addListeners();
     }
   };
 

diff --git a/src/tests/composables/useVueExitIntent/inactiveSeconds.spec.ts b/src/tests/composables/useVueExitIntent/inactiveSeconds.spec.ts
@@ -0,0 +1,75 @@
+import { test, describe, expect, afterEach, vi } from 'vitest';
+import { useVueExitIntent } from '@/composables/useVueExitIntent';
+import { shallowMount, mount } from '@vue/test-utils';
+import * as utils from '@/utils';
+
+const { defaultOptions } = utils;
+
+describe('Respects option inactiveSeconds', () => {
+  afterEach(() => {
+    localStorage.clear();
+    vi.clearAllTimers();
+  });
+
+  test('Triggers immediately if triggerOnPageLoad is true', async () => {
+    const userOptions = {
+      ...defaultOptions,
+      triggerOnPageLoad: true,
+      inactiveSeconds: 5
+    };
+
+    const App = {
+      template: `<div></div>`,
+      setup() {
+        const { isShowing, close } = useVueExitIntent(userOptions);
+
+        return {
+          isShowing,
+          close
+        };
+      }
+    };
+
+    const wrapper = shallowMount(App);
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.isShowing).toBe(true);
+
+    wrapper.vm.close();
+    expect(wrapper.vm.isShowing).toBe(false);
+  });
+
+  test('Triggers on mouseleave after inactiveSeconds', async () => {
+    vi.useFakeTimers();
+    vi.spyOn(utils, 'isTouchDevice').mockReturnValue(false);
+
+    const userOptions = {
+      ...defaultOptions,
+      inactiveSeconds: 2
+    };
+
+    const App = {
+      template: `<div></div>`,
+      setup() {
+        const { isShowing, close } = useVueExitIntent(userOptions);
+
+        return {
+          isShowing,
+          close
+        };
+      }
+    };
+
+    const wrapper = mount(App);
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.isShowing).toBe(false);
+
+    vi.advanceTimersByTime(1000);
+    expect(wrapper.vm.isShowing).toBe(false);
+
+    vi.advanceTimersByTime(1000);
+    document.documentElement.dispatchEvent(new MouseEvent('mouseleave'));
+    expect(wrapper.vm.isShowing).toBe(true);
+
+    vi.useRealTimers();
+  });
+});
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -9,6 +9,7 @@ export type Options = {
   handleScrollBars: boolean;
   LSItemKey: string;
   setupBeforeMount: Boolean;
+  inactiveSeconds: number;
 };
 
 export type MouseHandler = {

diff --git a/src/utils/defaultOptions.ts b/src/utils/defaultOptions.ts
@@ -13,5 +13,6 @@ export const defaultOptions: Options = {
   triggerOnPageLoad: false,
   handleScrollBars: false,
   LSItemKey: 'vue-exit-intent',
-  setupBeforeMount: false
+  setupBeforeMount: false,
+  inactiveSeconds: 0
 };