Merge pull request #18 from guiassemany/feature/debug-mode

Add Debug mode feature
guiassemany · Oct 18, 2024 · 66e9589 · 66e9589
2 parents 48a5344 + 487cca8
commit 66e9589
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/example/index.html b/example/index.html
@@ -13,7 +13,8 @@
 	<script>
 		document.addEventListener('DOMContentLoaded', function() {
 			const stickToMeInstance = stickToMe({
-				layer: '#stickLayer'
+				layer: '#stickLayer',
+				debug: false,
 				// cookie: true,
           		// maxamount: 1,
 				// cookieExpiration: 2 * 60

diff --git a/readme.md b/readme.md
@@ -95,6 +95,22 @@ Stick to me allows a few customisations. See options below.
 | bgclickclose | Clicking on background closes the popup | true |
 | escclose | pressing ESC closes the popup | true |
 | onleave | function to be called when popup closes | empty fn |
+| debug | Enable Debug mode to display console messages | false |
+
+## Debug Mode
+
+The Stick to Me plugin includes a Debug mode that provides helpful console messages to understand the plugin's behavior. When Debug mode is enabled, you will see messages related to tracking movement, detecting intent, indicating direction, and firing the popup.
+
+To enable Debug mode, set the `debug` option to `true` when initializing the plugin:
+
+```js
+const stickToMeInstance = stickToMe({
+    layer: '#stickLayer',
+    debug: true
+});
+```
+
+When Debug mode is ON, console messages will be displayed to help you understand what is happening. When Debug mode is OFF, no console messages will be shown.
 
 ## Support
 

diff --git a/src/stick-to-me.js b/src/stick-to-me.js
@@ -20,7 +20,8 @@ const stickToMe = function (configs) {
         bgclickclose: true,
         escclose: true,
         onleave: function (e) {},
-        disableleftscroll: true	// chrome disable
+        disableleftscroll: true,	// chrome disable
+        debug: false
     };
 
     const settings = Object.assign({}, defaults, configs);
@@ -53,12 +54,20 @@ const stickToMe = function (configs) {
 
     Object.assign(settings, reqsettings);
 
+    function debugLog(message) {
+        if (settings.debug) {
+            console.log(`[Stick to Me Debug] ${message}`);
+        }
+    }
+
     document.addEventListener('mousemove', function(e) {
         lastx = e.pageX;
         lasty = e.pageY;
+        debugLog(`Mouse moved to (${lastx}, ${lasty})`);
     });
 
     document.addEventListener('mouseleave', function(e) {
+        debugLog('Mouse left the document');
         setTimeout(function() { ontheleave(e); }, settings.delay);
     });
 
@@ -72,6 +81,7 @@ const stickToMe = function (configs) {
         document.addEventListener('mousemove', function bindOffset(e) {
             if (offsetbind) {
                 document.addEventListener('mouseleave', function(e) {
+                    debugLog('Chrome-specific mouseleave event triggered');
                     setTimeout(function() { ontheleave(e); }, settings.delay);
                 });
                 document.removeEventListener("mousemove", bindOffset);
@@ -83,6 +93,7 @@ const stickToMe = function (configs) {
     window.addEventListener('resize', function() {
         windowHeight = window.innerHeight;
         windowWidth = window.innerWidth;
+        debugLog(`Window resized to ${windowWidth}x${windowHeight}`);
     });
 
     function ontheleave(e) {
@@ -108,8 +119,11 @@ const stickToMe = function (configs) {
             leaveside = clienty >= ey2 ? "left" : "bottom";
         }
 
+        debugLog(`Detected leave intent: ${leaveside}`);
+
         if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
             if (clienty < 0 && clienty > -windowHeight && clientx > 0 && clientx < windowWidth) {
+                debugLog('Firefox-specific condition met, returning');
                 return;
             }
         }
@@ -123,6 +137,7 @@ const stickToMe = function (configs) {
                             if (chromealert) {
                                 const cookiehowm = getamount("ck_stick_visit");
                                 if (!settings.cookie || (settings.cookie && (cookiehowm < settings.maxamount || settings.maxamount == 0))) {
+                                    debugLog('Conditions met, firing onleave event');
                                     settings.onleave.call(this, leaveside);
 
                                     if (settings.layer != "") {
@@ -137,6 +152,7 @@ const stickToMe = function (configs) {
                                         } else {
                                             document.cookie = `ck_stick_visit=${cookiehowm}; path=/; SameSite=lax`;
                                         }
+                                        debugLog(`Cookie set: ck_stick_visit=${cookiehowm}`);
                                     }
                                     lasttime = new Date().getTime();
                                 }
@@ -156,6 +172,7 @@ const stickToMe = function (configs) {
     const stickVarMap = new WeakMap();
 
     function showbox() {
+        debugLog('Showing popup box');
         if (!stickVarMap.get(document.body)) {
             stickVarMap.set(document.body, 1);
             const blockLayer = document.createElement('div');
@@ -180,6 +197,7 @@ const stickToMe = function (configs) {
             if (settings.escclose) {
                 document.body.addEventListener('keyup', function(e) {
                     if (e.key === 'Escape') {
+                        debugLog('Escape key pressed, closing popup');
                         stick_close();
                     }
                 });
@@ -204,6 +222,7 @@ const stickToMe = function (configs) {
     }
 
     function stick_close() {
+        debugLog('Closing popup');
         const container = document.querySelector('.stick_container');
         const blockLayer = document.querySelector('.stick_block_layer');
         if (container) fadeOut(container, settings.fadespeed, () => container.remove());