Touch Device: Trigger popup on fast scroll-up

Author: nickap

README.md

@@ -60,6 +60,7 @@ Your content will get displayed via [Slots](https://vuejs.org/guide/components/s
 | **scrollPercentage** | 0 | Number | false |
 | **navigateBeforeShowSeconds** | 0 | Number | false |
 | **mouseOutEnabled** | true | Boolean | false |
+| **touchDeviceSensitivity** | 5 | Number  | false |
 | **showByDefault** | false | Boolean | false |
 | **showCloseBtn** | true | Boolean | false |
 | **color** | '#555' | String  | false |
@@ -85,6 +86,12 @@ How many seconds the user has to navigate before the pop-up gets triggered.
 **Give 0 to disable.**  
 **This one TRIGGERS the popup.**
 
+- **touchDeviceSensitivity**  
+On touch devices where there is no mouseleave event, the popup will get triggered on fast (touch)scroll up.
+The larger the number you will give, the more sesitive will be the pop-up on touch devices.  
+**Give 0 to disable.**  
+**This one TRIGGERS the popup on touch devices.**
+
 - **mouseOutEnabled**  
 If false. Mouse out event will not trigger the pop-up. The user would have to reach navigateBeforeShowSeconds or scrollPercentage to get the popup.
 Ir true, well.. you know, the pop-up is set to get showed on user exit-intent  

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-exit-intent",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Vue 3 pop-up that shows up when a user is leaving, or another threshold reached.",
   "author": "nickap <dev.texng@simplelogin.com>",
   "license": "MIT",

src/components/vueExitIntent.vue

@@ -6,7 +6,9 @@ const props = defineProps({
   scrollPercentage: { type: Number, required: false, default: 0 },
   /** TODO:  Fix prop name. Maybe: 'waitSecondsAndShow' */
   navigateBeforeShowSeconds: { type: Number, required: false, default: 0 },
+  /** TODO:  Fix prop name. Maybe: 'exitIntentEnabled' */
   mouseOutEnabled: { type: Boolean, required: false, default: true },
+  touchDeviceSensitivity: { type: Number, required: false, default: 5 },
   showByDefault: { type: Boolean, required: false, default: false },
   showCloseBtn: { type: Boolean, required: false, default: true },
   color: { type: String, required: false, default: '#555' },
@@ -21,10 +23,16 @@ const props = defineProps({
 
 const show = ref(false);
 let scrollHandler = null;
+let touchDeviceExitIntentHandler = null;
 
 onMounted(() => {
   if (props.mouseOutEnabled) {
-    document.documentElement.addEventListener('mouseleave', handleMouseLeave);
+    if (props.touchDeviceSensitivity && isTouchDevice()) {
+      touchDeviceExitIntentHandler = showOnFastTouchScrollUp();
+      window.addEventListener('scroll', touchDeviceExitIntentHandler);
+    } else {
+      document.documentElement.addEventListener('mouseleave', handleMouseLeave);
+    }
   }
   if (props.navigateBeforeShowSeconds) {
     if (isAllowedToShow() && isLocalStorageExpired()) {
@@ -45,6 +53,7 @@ onMounted(() => {
 onUnmounted(() => {
   document.documentElement.removeEventListener('mouseleave', handleMouseLeave);
   window.removeEventListener('scroll', scrollHandler);
+  window.removeEventListener('scroll', touchDeviceExitIntentHandler);
 });
 
 const handleMouseLeave = () => {
@@ -103,6 +112,50 @@ const isLocalStorageExpired = () => {
   }
 };
 
+const isTouchDevice = () => {
+  if ('maxTouchPoints' in navigator) {
+    return navigator.maxTouchPoints > 0;
+  } else if ('msMaxTouchPoints' in navigator) {
+    return navigator.msMaxTouchPoints > 0;
+  } else {
+    const mQ = window.matchMedia && matchMedia('(pointer:coarse)');
+    if (mQ && mQ.media === '(pointer:coarse)') {
+      return !!mQ.matches;
+    } else if ('orientation' in window) {
+      /* Deprecated, used as a fallback */
+      return true;
+    } else {
+      /* Fallback to user agent sniffing*/
+      const UA = navigator.userAgent;
+      return (
+        /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
+        /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
+      );
+    }
+  }
+};
+
+const showOnFastTouchScrollUp = () => {
+  let isScrolling, startPos, finalPos, destUpwards;
+  let i = 0;
+  return () => {
+    i++;
+    if (i == 1) startPos = window.scrollY;
+    /* Clear our timeout throughout the scroll */
+    window.clearTimeout(isScrolling);
+    isScrolling = setTimeout(() => {
+      finalPos = window.scrollY;
+      destUpwards = startPos - finalPos;
+      if (destUpwards > 5000 / props.touchDeviceSensitivity) {
+        if (isAllowedToShow() && isLocalStorageExpired()) {
+          showModal();
+        }
+      }
+      i = 0;
+    }, 50);
+  };
+};
+
 const closeModal = () => {
   show.value = false;
   document.body.style.overflowY = 'auto';