From 3c65fca5a7a13e3a31d2c53e956dceb948131363 Mon Sep 17 00:00:00 2001
From: Kaz <102762373@students.swinburne.edu.my>
Date: Tue, 6 Feb 2024 14:26:43 +0800
Subject: [PATCH 1/5] Update manifest.json
---
manifest.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/manifest.json b/manifest.json
index 5eb78a9..032c4de 100644
--- 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": {},
From 32ad091031b149637d8b5a3c05aba232620cd3b5 Mon Sep 17 00:00:00 2001
From: Kaz <102762373@students.swinburne.edu.my>
Date: Tue, 6 Feb 2024 14:29:24 +0800
Subject: [PATCH 2/5] Update content.js
Save cursor coords by mousemove instead of click
(Some pages don't register clicks on certain elements/areas [e.g. Outlook, Gmail ribbon dropdown])
---
content.js | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/content.js b/content.js
index 2b5931c..8844640 100644
--- a/content.js
+++ b/content.js
@@ -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;
});
@@ -60,6 +60,8 @@ function handleFileInputClick(event) {
let overlayLeftPos = clientX + window.scrollX + (overlayContent.offsetWidth / 2);
let overlayBottomPos = clientY + window.scrollY + (overlayContent.offsetHeight / 2);
+ console.log("Copy-n-Paste: \nX: ", clientX, "\nY: ", clientY)
+
// Flip if overlay overshoots
const tooMuchRight = overlayLeftPos + (overlayContent.offsetWidth / 2);
const tooMuchBottom = overlayBottomPos + (overlayContent.offsetHeight / 2);
From 59e7a72e19d0672c20abbbeca573777b87182fbb Mon Sep 17 00:00:00 2001
From: Kaz <102762373@students.swinburne.edu.my>
Date: Tue, 6 Feb 2024 14:49:56 +0800
Subject: [PATCH 3/5] Update content.js
Ensures all overlay are closed in while loop
(Webpages like Steam Community prevented the last overlay from closing somehow)
---
content.js | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/content.js b/content.js
index 8844640..88a1458 100644
--- a/content.js
+++ b/content.js
@@ -36,6 +36,7 @@ function afterDOMLoaded(){
document.addEventListener('mousemove', event => {
clientX = event.clientX;
clientY = event.clientY;
+ // console.log("Copy-n-Paste: \nX: ", clientX, "\nY: ", clientY);
});
}
@@ -176,14 +177,15 @@ 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('.piu-overlay-content');
+ while (overlayContent && !overlayContent.contains(event.target)) {
closeOverlay();
+ overlayContent = document.querySelector('.piu-overlay-content');
+ }
}
// Preview 'No image' message
From 59b7bac4db96a01dd03280c473696c188343c547 Mon Sep 17 00:00:00 2001
From: Kaz <102762373@students.swinburne.edu.my>
Date: Tue, 6 Feb 2024 17:35:20 +0800
Subject: [PATCH 4/5] Update overlay.html
Fixed overlay not displaying using the maximum z-index.
---
overlay.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/overlay.html b/overlay.html
index 18a4cd6..f8dac88 100644
--- a/overlay.html
+++ b/overlay.html
@@ -23,7 +23,7 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- z-index: 999;
+ z-index: 2147483647;
}
.piu-hr {
From 533f34dff22fabf0a9572bf50befd49bab122c19 Mon Sep 17 00:00:00 2001
From: Kaz <102762373@students.swinburne.edu.my>
Date: Tue, 6 Feb 2024 17:45:38 +0800
Subject: [PATCH 5/5] PIU -> CNP
---
content.js | 43 ++++++++++++++++++++-----------------------
overlay.html | 44 ++++++++++++++++++++++----------------------
2 files changed, 42 insertions(+), 45 deletions(-)
diff --git a/content.js b/content.js
index 88a1458..3d145bf 100644
--- 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);
});
}
@@ -36,7 +36,6 @@ function afterDOMLoaded(){
document.addEventListener('mousemove', event => {
clientX = event.clientX;
clientY = event.clientY;
- // console.log("Copy-n-Paste: \nX: ", clientX, "\nY: ", clientY);
});
}
@@ -57,12 +56,10 @@ 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);
- console.log("Copy-n-Paste: \nX: ", clientX, "\nY: ", clientY)
-
// Flip if overlay overshoots
const tooMuchRight = overlayLeftPos + (overlayContent.offsetWidth / 2);
const tooMuchBottom = overlayBottomPos + (overlayContent.offsetHeight / 2);
@@ -79,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;
@@ -95,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 => {
@@ -128,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);
@@ -152,7 +149,7 @@ function handleFileInputClick(event) {
// Check if noImage text exists
if (!noImg)
noImage(imagePreview);
- noImg = overlay.querySelector('#piu-not-image');
+ noImg = overlay.querySelector('#cnp-not-image');
}
})
});
@@ -160,7 +157,7 @@ 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) {
@@ -181,21 +178,21 @@ function closeOverlay() {
// Close overlay when clicked outside
function closeOverlayOnClickOutside(event) {
- let overlayContent = document.querySelector('.piu-overlay-content');
+ let overlayContent = document.querySelector('.cnp-overlay-content');
while (overlayContent && !overlayContent.contains(event.target)) {
closeOverlay();
- overlayContent = document.querySelector('.piu-overlay-content');
+ 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/overlay.html b/overlay.html
index f8dac88..09dc563 100644
--- a/overlay.html
+++ b/overlay.html
@@ -5,7 +5,7 @@
Paste Image Uploader
-
-
-
+
+
+
Drop files here
-
+
-
+
-
-