Merge pull request #6 from kazcfz/v1.1.1

V1.1.1
kazcfz · Feb 6, 2024 · 1db1b75 · 1db1b75
2 parents 1d92593 + 533f34d
commit 1db1b75
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 47 deletions.
diff --git a/content.js b/content.js
@@ -23,7 +23,7 @@ function afterDOMLoaded(){
         else if (node.nodeType === Node.ELEMENT_NODE && node.hasChildNodes()) {
           const fileInputs = node.querySelectorAll("input[type='file']");
           fileInputs.forEach(fileInput => {
-            if (fileInput.id != "piu-overlay-file-input")
+            if (fileInput.id != "cnp-overlay-file-input")
               fileInput.addEventListener("click", handleFileInputClick);
           });
         }
@@ -32,8 +32,8 @@ function afterDOMLoaded(){
   });
   observer.observe(document.body, { childList: true, subtree: true });
 
-  // Record last know coord. Some webpages report coords as 0,0
-  document.addEventListener('click', event => {
+  // Record last know coord. Some pages report coords as 0,0
+  document.addEventListener('mousemove', event => {
     clientX = event.clientX;
     clientY = event.clientY;
   });
@@ -56,7 +56,7 @@ function handleFileInputClick(event) {
       document.body.appendChild(overlay);
 
       // Position overlay to cursor coord
-      const overlayContent = overlay.querySelector('.piu-overlay-content');
+      const overlayContent = overlay.querySelector('.cnp-overlay-content');
       let overlayLeftPos = clientX + window.scrollX + (overlayContent.offsetWidth / 2);
       let overlayBottomPos = clientY + window.scrollY + (overlayContent.offsetHeight / 2);
 
@@ -76,14 +76,14 @@ function handleFileInputClick(event) {
       document.addEventListener('click', closeOverlayOnClickOutside);
 
       // Overlay upload click listener
-      const uploadBtn = overlay.querySelector('#piu-upload-btn');
+      const uploadBtn = overlay.querySelector('#cnp-upload-btn');
       uploadBtn.addEventListener('click', () => {
-        const fileInput = overlay.querySelector('#piu-overlay-file-input');
+        const fileInput = overlay.querySelector('#cnp-overlay-file-input');
         fileInput.click();
       });
 
       // Overlay handle file input
-      const overlayFileInput = overlay.querySelector('#piu-overlay-file-input');
+      const overlayFileInput = overlay.querySelector('#cnp-overlay-file-input');
       overlayFileInput.setAttribute('accept', originalInput.getAttribute('accept'));
       overlayFileInput.addEventListener('change', (event) => {
         originalInput.files = event.target.files;
@@ -92,29 +92,29 @@ function handleFileInputClick(event) {
       });
 
       // Handle drag and drop
-      const PIU_dropText = overlay.querySelector('#piu-drop-text');
+      const CNP_dropText = overlay.querySelector('#cnp-drop-text');
       overlay.addEventListener('dragover', (event) => {
         event.preventDefault();
-        PIU_dropText.style.display = 'flex';
+        CNP_dropText.style.display = 'flex';
       });
 
       overlay.addEventListener('dragleave', (event) => {
         const isChild = overlay.contains(event.relatedTarget);
         if (!isChild)
-          PIU_dropText.style.display = 'none';
+          CNP_dropText.style.display = 'none';
       });
 
       overlay.addEventListener('drop', (event) => {
         event.preventDefault();
-        PIU_dropText.style.display = 'none';
+        CNP_dropText.style.display = 'none';
         const files = event.dataTransfer.files;
         handleDroppedFiles(files, originalInput);
         closeOverlay();
       });
 
       // Read and preview clipboard image
-      const imagePreview = overlay.querySelector('#piu-image-container');
-      let noImg = overlay.querySelector('#piu-not-image');
+      const imagePreview = overlay.querySelector('#cnp-image-container');
+      let noImg = overlay.querySelector('#cnp-not-image');
       navigator.clipboard.read().then(clipboardItems => {
         clipboardItems.forEach(clipboardItem => {
           clipboardItem['types'].forEach(clipboardItemType => {
@@ -125,7 +125,7 @@ function handleFileInputClick(event) {
                 reader.onload = (event) => {
                   const img = document.createElement('img');
                   img.src = event.target.result;
-                  img.id = 'piu-image-preview';
+                  img.id = 'cnp-image-preview';
 
                   imagePreview.style.cursor = 'pointer';
                   imagePreview.appendChild(img);
@@ -149,15 +149,15 @@ function handleFileInputClick(event) {
               // Check if noImage text exists
               if (!noImg)
                 noImage(imagePreview);
-              noImg = overlay.querySelector('#piu-not-image');
+              noImg = overlay.querySelector('#cnp-not-image');
             }
           })
         });
       }).catch(error => {
         // Check if noImage text exists
         if (!noImg)
           noImage(imagePreview);
-        noImg = overlay.querySelector('#piu-not-image');
+        noImg = overlay.querySelector('#cnp-not-image');
       });
     });
   } catch (error) {
@@ -174,24 +174,25 @@ function logging(message) {
 function closeOverlay() {
   const overlay = document.querySelector('.overlay');
   overlay.remove();
-  document.removeEventListener('click', closeOverlayOnClickOutside);
 }
 
 // Close overlay when clicked outside
 function closeOverlayOnClickOutside(event) {
-  const overlayContent = document.querySelector('.piu-overlay-content');
-  if (!overlayContent.contains(event.target))
+  let overlayContent = document.querySelector('.cnp-overlay-content');
+  while (overlayContent && !overlayContent.contains(event.target)) {
     closeOverlay();
+    overlayContent = document.querySelector('.cnp-overlay-content');
+  }
 }
 
 // Preview 'No image' message
 function noImage(imagePreview) {
-  const PIU_notImage = document.createElement('span');
-  PIU_notImage.id = 'piu-not-image';
-  PIU_notImage.textContent = 'Screenshot / Drop an image';
+  const CNP_notImage = document.createElement('span');
+  CNP_notImage.id = 'cnp-not-image';
+  CNP_notImage.textContent = 'Screenshot / Drop an image';
 
   imagePreview.style.cursor = 'default';
-  imagePreview.appendChild(PIU_notImage);
+  imagePreview.appendChild(CNP_notImage);
 }
 
 // Trigger change event on original input to update value (like disabled buttons)

diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
     "manifest_version": 3,
-    "name": "Copy-n-Paste - Image Upload Simplified",
+    "name": "Copy-n-Paste: Image Upload Simplified",
     "version": "1.1.0",
     "description": "Simplify image upload from your clipboard directly to webpages.",
     "action": {},

diff --git a/overlay.html b/overlay.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Paste Image Uploader</title>
     <style>
-        .piu-overlay-content {
+        .cnp-overlay-content {
             font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
             font-size: medium;
             position: absolute;
@@ -23,18 +23,18 @@
             -moz-user-select: none;
             -ms-user-select: none;
             user-select: none;
-            z-index: 999;
+            z-index: 2147483647;
         }
 
-        .piu-hr {
+        .cnp-hr {
             margin: 0.25rem 0;
             color: inherit;
             border: 0;
             border-top: .5px solid;
             opacity: .25;
         }
 
-        #piu-drop-text {
+        #cnp-drop-text {
             position: absolute;
             top: 0;
             left: 0;
@@ -52,11 +52,11 @@
             box-sizing: border-box;
             z-index: 1;
         }
-        #piu-drop-text svg {
+        #cnp-drop-text svg {
             margin-right: 7px;
         }
 
-        #piu-image-container {
+        #cnp-image-container {
             width: 240px;
             height: 135px;
             padding: 6px;
@@ -65,62 +65,62 @@
             align-items: center;
             justify-content: center;
         }
-        #piu-image-container:hover {
+        #cnp-image-container:hover {
             background-color: rgba(0, 0, 0, .05);
             filter: brightness(.95);
         }
 
-        #piu-image-preview {
+        #cnp-image-preview {
             border-radius: .5rem;
             max-width: 100%;
             max-height: 100%;
             object-fit: contain;
         }
 
-        #piu-not-image{
+        #cnp-not-image{
             font-weight: lighter;
         }
 
-        #piu-overlay-file-input {
+        #cnp-overlay-file-input {
             display: none;
         }
 
-        #piu-upload {
+        #cnp-upload {
             font-weight: normal;
         }
 
-        .piu-menu-item {
+        .cnp-menu-item {
             cursor: default;
             border-radius: .5rem;
             padding: 6px;
         }
-        .piu-menu-item:hover {
+        .cnp-menu-item:hover {
             background-color: rgba(0, 0, 0, .05);
         }
 
-        .piu-bi {
+        .cnp-bi {
             vertical-align: -.125em;
         }
     </style>
 </head>
 
 <body>
-    <div class="piu-overlay-content">
-        <span id="piu-drop-text">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="piu-bi bi-plus-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/></svg>
+    <div class="cnp-overlay-content">
+        <span id="cnp-drop-text">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="cnp-bi bi-plus-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/></svg>
             Drop files here
         </span>
 
         <!-- Image Container & Preview -->
-        <div id="piu-image-container"></div>
+        <div id="cnp-image-container"></div>
 
-        <hr class="piu-hr">
+        <hr class="cnp-hr">
 
         <!-- + Upload Image -->
-        <input type="file" id="piu-overlay-file-input">
-        <div id="piu-upload-btn" class="piu-menu-item">
-            <span id="piu-upload">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="piu-bi bi-plus-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/></svg>
+        <input type="file" id="cnp-overlay-file-input">
+        <div id="cnp-upload-btn" class="cnp-menu-item">
+            <span id="cnp-upload">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="cnp-bi bi-plus-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/></svg>
                 Upload File
             </span>
         </div>