v1.3 push

miragekdev · Jan 17, 2025 · 233dcc1 · 233dcc1
1 parent d94f000
commit 233dcc1
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -46,9 +46,14 @@ Here's how you can set it up:
 ```html
 <script>
   const guard = new StopEdit({
-    selector: 'body',  // Protect the entire page by default
-    heartbeat: 1000,   // Checks every second
-    debug: true        // Logs actions in the console
+    selector: 'body', // Apply StopEdit to the entire body
+    heartbeat: 60000, // Check every 60 seconds to monitor any changes
+    debug: true,
+    noCopy: true,
+    noPrint: true,
+    noScreenshot: true, // does not work always
+    autoBlur: true,
+    whitelist: ['#editable-section'] // Only the editable section is whitelisted for direct edits
   });
 
   guard.init();  // Start monitoring
@@ -164,7 +169,16 @@ Please refer to the example.html for more complete examples with code snippets y
 - Block suspected dangerous users
 - Lock page with password
 
-### [1.2.0] - Current ✌
+
+### [1.3.0] - Current
+
+Added more impressive features:
+- noCopy
+- noPrint
+- noScreenshot
+- autoBlur
+
+### [1.2.0] - more features
 
 - Image protection
 - Readme doc updated

diff --git a/example.html b/example.html
@@ -1,21 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>StopEdit - Cool Edition 😎</title>
     <style>
         body {
             font-family: 'Arial', sans-serif;
-            width:90%;
+            width: 90%;
             margin: 0 auto;
             padding: 20px;
             background: #f9f9f9;
             color: #333;
             line-height: 1.6;
         }
 
-        h1, h2 {
+        h1,
+        h2 {
             color: #2c3e50;
         }
 
@@ -98,18 +100,20 @@
         }
     </style>
 </head>
+
 <body>
     <div style="text-align: center;">
-    <h1>StopEdit Demo - Protect Your Content 🛡️</h1>
+        <h1>StopEdit Demo - Protect Your Content 🛡️</h1>
 
-    <p>Explore the power of protected text and images. Try editing and see the magic! ✨</p>
+        <p>Explore the power of protected text and images. Try editing and see the magic! ✨</p>
     </div>
     <!-- Documentation Section for Protected Text -->
     <div class="doc-section">
         <div class="doc-title">Protected Text</div>
         <div class="doc-content">
             <p>This text is <strong>protected</strong> and cannot be edited directly. 🔒</p>
-            <p>The editable section below is an example of a text area that users can type into, but any edits made will be monitored and protected by the StopEdit system.</p>
+            <p>The editable section below is an example of a text area that users can type into, but any edits made will
+                be monitored and protected by the StopEdit system.</p>
         </div>
     </div>
 
@@ -147,31 +151,36 @@ <h2>Protected Text</h2>
     <!-- Documentation Section for Protected Images -->
     <div class="doc-section">
         <div class="doc-title">Protected Images</div>
-        <div class="doc-content">            
-            <p>In this section, we have two images: one protected and the other normal. The protected image has special styling to distinguish it from the regular one.</p>
+        <div class="doc-content">
+            <p>In this section, we have two images: one protected and the other normal. The protected image has special
+                styling to distinguish it from the regular one.</p>
         </div>
     </div>
 
     <div class="container">
         <h2>Protected Images</h2>
         <div class="image-gallery">
-            <img src="https://img.freepik.com/free-photo/html-css-collage-concept-with-hacker_23-2150061984.jpg" alt="Protected image" class="protected-img" protected>
-            <img src="https://img.freepik.com/free-vector/soccer-stadium_1284-22432.jpg" alt="Normal image" class="normal-img">
+            <img src="https://img.freepik.com/free-photo/html-css-collage-concept-with-hacker_23-2150061984.jpg"
+                alt="Protected image" class="protected-img" protected>
+            <img src="https://img.freepik.com/free-vector/soccer-stadium_1284-22432.jpg" alt="Normal image"
+                class="normal-img">
             <!-- video protection coming soon -->
             <!-- <video width="640" height="360" controls>
                 <source src="https://velvettrades.com/assets/videos/Toro-Laptop.mp4" type="video/mp4">
                 Your browser does not support the video tag.
             </video> -->
-            
+
         </div>
     </div>
 
     <!-- Documentation Section for Footer and JS Initialization -->
     <div class="doc-section">
         <div class="doc-title">Footer & JavaScript Initialization</div>
         <div class="doc-content">
-            <p>The footer contains credits for the StopEdit Team. Below that, JavaScript is used to initialize the StopEdit library.</p>
-            <p>This code enables automatic protection for text and images, and stops unauthorized edits. The functionality is powered by the `miragek-StopEdit.js` library.</p>
+            <p>The footer contains credits for the StopEdit Team. Below that, JavaScript is used to initialize the
+                StopEdit library.</p>
+            <p>This code enables automatic protection for text and images, and stops unauthorized edits. The
+                functionality is powered by the `miragek-StopEdit.js` library.</p>
         </div>
     </div>
 
@@ -186,11 +195,16 @@ <h2>Protected Images</h2>
         const stopEdit = new StopEdit({
             selector: 'body', // Apply StopEdit to the entire body
             heartbeat: 60000, // Check every 60 seconds to monitor any changes
-            debug: true, // Enable debug mode to see detailed logs
+            debug: true,
+            noCopy: true,
+            noPrint: true,
+            noScreenshot: true,
+            autoBlur: true,
             whitelist: ['#editable-section'] // Only the editable section is whitelisted for direct edits
         });
 
         stopEdit.init(); // Start the StopEdit functionality
     </script>
 </body>
-</html>
+
+</html>
diff --git a/miragek-StopEdit.js b/miragek-StopEdit.js
@@ -1,17 +1,21 @@
 class StopEdit {
   constructor(options = {}) {
     this.selector = options.selector || 'body';
-    this.heartbeat = options.heartbeat || 100000; // 100,000 ms (1.67 minutes)
+    this.heartbeat = options.heartbeat || 100000;
     this.debug = options.debug || false;
     this.whitelist = options.whitelist || [];
+    this.noCopy = options.noCopy || false;
+    this.noPrint = options.noPrint || false;
+    this.noScreenshot = options.noScreenshot || false;
+    this.autoBlur = options.autoBlur || false;
     this.originalContent = null;
     this.observer = null;
     this.whitelistMap = new Map();
     this.resetting = false;
     this.mutationTimeout = null;
     this.heartbeatInterval = null;
     this.editableElements = new Set();
-    this.protected = new Set(); // Track protected elements
+    this.protected = new Set();
   }
 
   init() {
@@ -22,13 +26,10 @@ class StopEdit {
         return;
       }
 
-      // Initialize protection features
       this.disableDirectEditing(target);
       this.originalContent = this.cloneContent(target);
       this.storeWhitelistElements(target);
       this.startObserving(target);
-
-      // Initialize image protection
       this.initializeImageProtection(target);
 
       if (this.heartbeat) {
@@ -39,11 +40,64 @@ class StopEdit {
         console.log('StopEdit initialized: Protecting', this.selector);
       }
 
-      // Add global protection
       this.addGlobalProtection();
+
+      // Add NoPrint.js features
+      if (this.noCopy || this.noPrint || this.noScreenshot || this.autoBlur) {
+        this.initializeNoPrintFeatures();
+      }
     });
   }
 
+  initializeNoPrintFeatures() {
+    if (this.noCopy) {
+      document.body.oncopy = () => false;
+      document.body.oncontextmenu = () => false;
+      document.body.onselectstart = document.body.ondrag = () => false;
+    }
+
+    if (this.noPrint) {
+      const printBlockerStyle = document.createElement('style');
+      printBlockerStyle.type = 'text/css';
+      printBlockerStyle.media = 'print';
+      printBlockerStyle.innerHTML = 'body { display: none !important; }';
+      document.head.appendChild(printBlockerStyle);
+
+      document.addEventListener('keydown', (e) => {
+        if (e.ctrlKey && e.key === 'p') {
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        }
+      });
+    }
+
+    if (this.autoBlur) {
+      document.onmouseleave = () => this.applyBlur(true);
+      document.onmouseenter = () => this.applyBlur(false);
+      document.onblur = () => this.applyBlur(true);
+    }
+
+    if (this.noScreenshot) {
+      document.addEventListener('keyup', (e) => {
+        if (e.key === 'PrintScreen') {
+          navigator.clipboard.writeText('');
+        }
+      });
+    }
+
+    const noSelectStyle = document.createElement('style');
+    noSelectStyle.type = 'text/css';
+    noSelectStyle.innerHTML =
+      'div, body {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}';
+    document.head.appendChild(noSelectStyle);
+  }
+
+  applyBlur(shouldBlur) {
+    const blurValue = shouldBlur ? 'blur(5px)' : 'blur(0px)';
+    document.body.style.cssText = `-webkit-filter: ${blurValue}; -moz-filter: ${blurValue}; -ms-filter: ${blurValue}; -o-filter: ${blurValue}; filter: ${blurValue};`;
+  }
+
   addGlobalProtection() {
     // Prevent common keyboard shortcuts
     document.addEventListener('keydown', (e) => {