custom Message

bmiit145 · bmiit145 · commit cdd7b941412c · 2024-04-08T09:20:17.000+05:30
diff --git a/README.md b/README.md
@@ -28,14 +28,17 @@ noScreenshot({
     disableFunctionKeys: true,
     disableCtrlF4: true,
     mouseLeave: true, // required for overlay with mouse leave a browser window
+    mouseEnterAutoHide: false, // required for auto hide overlay with mouse enter a browser window
     ctrlOverlay: true, 
     altOverlay: false, // must be pass true for overlay with Alt or Options key press
     shiftOverlay: false, // must be pass true for overlay with Shift key press
-});
+} , 'custom-overlay-id');
 ```
 
 This function will disable right-click, keyboard shortcuts, inspect element, print screen, and various other methods commonly used for taking screenshots. Additionally, it will overlay a message on the screen indicating that screenshots are disabled.
 
+Make sure to replace "custom-overlay-id" with the ID of the custom overlay you want to use, or omit it to use the default overlay.
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -75,6 +78,7 @@ The `noScreenshot` function accepts the following options:
 - `disableFunctionKeys`: Disables function keys (F1-F12).
 - `disableCtrlF4`: Disables the Ctrl+F4 key combination.
 - `mouseLeave`: Activates overlay when cursor leaves the window.
+- `mouseEnterAutoHide`: Activates overlay when cursor enters the window.
 - `ctrlOverlay`: Activates overlay when Ctrl or Command key is pressed.
 - `altOverlay`: Activates overlay when Alt or Options key is pressed.
 - `shiftOverlay`: Activates overlay when Shift key is pressed.
@@ -94,10 +98,11 @@ window.onload = function() {
         disableFunctionKeys: true,
         disableCtrlF4: true,
         mouseLeave: true,
+        mouseEnterAutoHide: false,
         ctrlOverlay: true,
         altOverlay: true,
         shiftOverlay: true,
-    });
+    } , 'custom-overlay-id');
 };
 ```
 
@@ -115,9 +120,11 @@ The `noScreenshot` function disables various methods of taking screenshots and o
 - `disableFunctionKeys`
 - `disableCtrlF4`
 - `mouseLeave`
+- `mouseEnterAutoHide`
 - `ctrlOverlay`
 - `altOverlay`
 - `shiftOverlay`
+- `overlayId`: Optional parameter to specify the ID of a custom overlay to use instead of the default one.
 
 ## License
 
diff --git a/dist/secure-web.js b/dist/secure-web.js
@@ -1,4 +1,4 @@
-function noScreenshot(options) {
+function noScreenshot(options , overlayId) {
     options = options || {};
 
     const {
@@ -10,6 +10,7 @@ function noScreenshot(options) {
         disableFunctionKeys = true,
         disableCtrlF4 = true,
         mouseLeave = true,
+        mouseEnterAutoHide = false,
         ctrlOverlay = true,
         altOverlay = false,
         shiftOverlay = false,
@@ -122,60 +123,97 @@ function noScreenshot(options) {
 
     if (mouseLeave) {
         document.addEventListener('mouseleave', () => {
-            overlayScreen(); // Overlay when cursor leaves the window
+            overlayScreen(overlayId); // Overlay when cursor leaves the window
         });
     }
 
+if (mouseEnterAutoHide) {
+    document.addEventListener('mouseenter', () => {
+        HideOverlayScreen(overlayId);
+    });
+}
+
     if (ctrlOverlay) {
         document.addEventListener('keydown', event => {
             if (event.ctrlKey || event.metaKey) {
-                overlayScreen();
+                overlayScreen(overlayId);
             }
         });
     }
 
     if (altOverlay) {
         document.addEventListener('keydown', event => {
             if (event.altKey || event.optionsKey) {
-                overlayScreen();
+                overlayScreen(overlayId);
             }
     });
 }
 
 if (shiftOverlay) {
     document.addEventListener('keydown', event => {
         if (event.shiftKey) {
-            overlayScreen();
+            overlayScreen(overlayId);
         }
     });
 }
 }
 
+function overlayScreen(overlayId) {
+    if (overlayId) {
+        const customOverlay = document.getElementById(overlayId);
+        if (customOverlay) {
+            customOverlay.style.position = 'fixed';
+            customOverlay.style.top = '0';
+            customOverlay.style.left = '0';
+            customOverlay.style.width = '100%';
+            customOverlay.style.height = '100%';
+            customOverlay.style.zIndex = '9999';
+            customOverlay.style.display = 'flex';
+            customOverlay.style.alignItems = 'center';
+            customOverlay.style.justifyContent = 'center';
+
+            // Disable pointer events on body while the overlay is active
+            document.body.style.pointerEvents = 'none';
+
+            document.addEventListener('keydown', escListener);
+
+            function escListener(event) {
+                if (event.key === 'Escape') {
+                    customOverlay.style.display = 'none'; // Hide the custom overlay
+                    document.body.style.pointerEvents = 'auto'; // Re-enable pointer events on body
+                    document.removeEventListener('keydown', escListener);
+                }
+            }
+
+            return;
+        }
+    }
 
-function overlayScreen() {
-    const overlay = document.createElement('div');
-    overlay.style.position = 'fixed';
-    overlay.style.top = '0';
-    overlay.style.left = '0';
-    overlay.style.width = '100%';
-    overlay.style.height = '100%';
-    overlay.style.background = 'rgba(255, 255, 255, 1)'; // semi-transparent white background
-    overlay.style.zIndex = '9999';
-    overlay.style.display = 'flex';
-    overlay.style.alignItems = 'center';
-    overlay.style.justifyContent = 'center';
-
-    const message = document.createElement('div');
-    message.textContent = 'Press Esc to close. Screenshots are disabled.';
-    message.style.fontSize = '24px';
-    message.style.color = 'black'; // You can adjust the color as needed
-    message.style.padding = '20px'; // Add padding to the message
-    message.style.background = 'rgba(255, 255, 255, 0.9)'; // semi-transparent white background for message
-    message.style.borderRadius = '10px'; // Rounded corners for the message box
-    message.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.5)'; // Drop shadow for the message box
-
-    overlay.appendChild(message);
-    document.body.appendChild(overlay);
+        const overlay = document.createElement('div');
+        overlay.id = 'no-screenshot-overlay';
+        overlay.style.position = 'fixed';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.width = '100%';
+        overlay.style.height = '100%';
+        overlay.style.background = 'rgba(255, 255, 255, 1)'; // semi-transparent white background
+        overlay.style.zIndex = '9999';
+        overlay.style.display = 'flex';
+        overlay.style.alignItems = 'center';
+        overlay.style.justifyContent = 'center';
+
+        const message = document.createElement('div');
+        message.textContent = 'Press Esc to close. Screenshots are disabled.';
+        message.style.fontSize = '24px';
+        message.style.color = 'black'; // You can adjust the color as needed
+        message.style.padding = '20px'; // Add padding to the message
+        message.style.background = 'rgba(255, 255, 255, 0.9)'; // semi-transparent white background for message
+        message.style.borderRadius = '10px'; // Rounded corners for the message box
+        message.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.5)'; // Drop shadow for the message box
+
+        overlay.appendChild(message);
+        document.body.appendChild(overlay);
+    }
 
     // Disable pointer events on body while the overlay is active
     document.body.style.pointerEvents = 'none';
@@ -188,7 +226,21 @@ function overlayScreen() {
             document.body.style.pointerEvents = 'auto'; // Re-enable pointer events on body
             document.removeEventListener('keydown', escListener);
         }
-    }
+}
+
+function HideOverlayScreen(overlayId) {
+        if (overlayId) {
+            const customOverlay = document.getElementById(overlayId);
+            if (customOverlay) {
+                customOverlay.style.display = 'none'; // Hide the custom overlay
+                document.body.style.pointerEvents = 'auto'; // Re-enable pointer events on body
+                return;
+            }
+        }
+        var overlay = document.getElementById('no-screenshot-overlay');
+        document.body.removeChild(overlay);
+        document.body.style.pointerEvents = 'auto'; // Re-enable pointer events on body
+    document.removeEventListener('keydown', escListener);
 }
 
 module.exports = noScreenshot;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "secure-web",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Secure-Web is an npm package that prevents users from taking screenshots of your web page by securing it against various methods of screenshot capture. With customizable options to tailor the security measures according to your needs, Secure-Web ensures that your sensitive information remains protected and inaccessible to unauthorized individuals. Embrace the power of Secure-Web and take control of your online security today.",
   "main": "old/secure-web.js",
   "scripts": {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "secure-web",`
`3`		`- "version": "1.1.0",`
	`3`	`+ "version": "1.1.1",`
`4`	`4`	`"description": "Secure-Web is an npm package that prevents users from taking screenshots of your web page by securing it against various methods of screenshot capture. With customizable options to tailor the security measures according to your needs, Secure-Web ensures that your sensitive information remains protected and inaccessible to unauthorized individuals. Embrace the power of Secure-Web and take control of your online security today.",`
`5`	`5`	`"main": "old/secure-web.js",`
`6`	`6`	`"scripts": {`