From 2a2aabc3593912dd9321c1bab81478cc3e181886 Mon Sep 17 00:00:00 2001
From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>
Date: Wed, 9 Apr 2025 18:13:25 +0100
Subject: [PATCH] Manual Redaction: Text based redaction configured by default
(#3317)
Redaction applied as soon as text highlighted
Removed Apply button
# Description of Changes
Manual redaction:
- Text based redaction configured by default
- Redaction applied as soon as text highlighted
- Removed Apply button
Closes #(2704)
---
## Checklist
### General
- [x ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ x] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [x ] I have performed a self-review of my own code
- [x ] My changes generate no new warnings
### Documentation
- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
### UI Changes (if applicable)
- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)
### Testing (if applicable)
- [x ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.
---
src/main/resources/static/css/redact.css | 29 ---------
src/main/resources/static/js/redact.js | 64 ++++++++-----------
.../resources/templates/security/redact.html | 5 --
3 files changed, 28 insertions(+), 70 deletions(-)
diff --git a/src/main/resources/static/css/redact.css b/src/main/resources/static/css/redact.css
index 5eaf12eb..bc59dda4 100644
--- a/src/main/resources/static/css/redact.css
+++ b/src/main/resources/static/css/redact.css
@@ -172,26 +172,6 @@ html {
height: 0;
}
-#apply-redaction {
- height: var(--toolButton-height);
- width: var(--toolButton-width);
-
- border-radius: var(--toolButton-border-radius);
-}
-
-#apply-redaction[disabled=true], #apply-redaction:disabled:not([disabled=false]) {
- color: rgb(147, 149, 153);
- box-shadow: none !important;
-}
-
-#apply-redaction:is(:hover):not([disabled=true], :disabled:not([disabled=false])) {
- cursor: pointer;
- background-color: rgba(6, 114, 197, 0.82);
- color: rgb(14, 12, 12);
- outline:rgba(6, 114, 197, 0.82) !important;
- border-color: rgba(6, 114, 197, 0.82) !important;
-}
-
.toolbar-btn-hover:hover {
cursor: pointer;
background-color: rgba(6, 114, 197, 0.82) !important;
@@ -200,15 +180,6 @@ html {
border-color: rgba(6, 114, 197, 0.82) !important;
}
-#apply-redaction-icon {
- font-size: var(--toolButton-icon-font-size);
-}
-
-#apply-redaction > span {
- user-select: none;
- pointer-events: none;
-}
-
#pageRedactColor, input[data-for=pageRedactColor] {
flex: 1;
padding: 1px;
diff --git a/src/main/resources/static/js/redact.js b/src/main/resources/static/js/redact.js
index 5a09a1a5..c5411470 100644
--- a/src/main/resources/static/js/redact.js
+++ b/src/main/resources/static/js/redact.js
@@ -206,8 +206,6 @@ window.addEventListener('load', (e) => {
let redactionsPaletteContainer = document.getElementById('redactionsPaletteContainer');
- let applyRedactionBtn = document.getElementById('apply-redaction');
-
let redactedPagesDetails = {
numbers: new Set(),
ranges: new Set(),
@@ -249,7 +247,6 @@ window.addEventListener('load', (e) => {
displayFieldErrorMessages(input, errors);
} else {
pageBasedRedactionOverlay.classList.add('d-none');
- applyRedactionBtn.removeAttribute('disabled');
input.classList.remove('is-valid');
let totalPagesCount = PDFViewerApplication.pdfViewer.pagesCount;
@@ -320,19 +317,28 @@ window.addEventListener('load', (e) => {
redactionsPaletteContainer.onclick = (e) => redactionsPalette.click();
+ function clearSelection() {
+ if (window.getSelection) {
+ if (window.getSelection().empty) {
+ // Chrome
+ window.getSelection().empty();
+ } else if (window.getSelection().removeAllRanges) {
+ // Firefox
+ window.getSelection().removeAllRanges();
+ }
+ } else if (document.selection) {
+ // IE?
+ document.selection.empty();
+ }
+ }
+
viewer.onmouseup = (e) => {
if (redactionMode !== RedactionModes.TEXT) return;
const containsText = window.getSelection() && window.getSelection().toString() != '';
- applyRedactionBtn.disabled = !containsText;
- };
-
- applyRedactionBtn.onclick = (e) => {
- if (redactionMode !== RedactionModes.TEXT) {
- applyRedactionBtn.disabled = true;
- return;
+ if(containsText){
+ redactTextSelection();
+ clearSelection();
}
- redactTextSelection();
- applyRedactionBtn.disabled = true;
};
redactionsPaletteInput.onchange = (e) => {
@@ -413,41 +419,28 @@ window.addEventListener('load', (e) => {
};
initDraw(layer, redactionsContainer);
+ enableTextRedactionMode();
function _handleTextSelectionRedactionBtnClick(e) {
if (textSelectionRedactionBtn.classList.contains('toggled')) {
resetTextSelection();
} else {
- resetDrawRedactions();
- textSelectionRedactionBtn.classList.add('toggled');
- redactionMode = RedactionModes.TEXT;
- const containsText = window.getSelection() && window.getSelection().toString() != '';
- applyRedactionBtn.disabled = !containsText;
- applyRedactionBtn.classList.remove('d-none');
+ enableTextRedactionMode();
}
}
+ function enableTextRedactionMode() {
+ if(!textSelectionRedactionBtn.classList.contains('toggled')){
+ textSelectionRedactionBtn.classList.add('toggled');
+ }
+ resetDrawRedactions();
+ redactionMode = RedactionModes.TEXT;
+ };
+
function resetTextSelection() {
textSelectionRedactionBtn.classList.remove('toggled');
redactionMode = RedactionModes.NONE;
clearSelection();
- applyRedactionBtn.disabled = true;
- applyRedactionBtn.classList.add('d-none');
- }
-
- function clearSelection() {
- if (window.getSelection) {
- if (window.getSelection().empty) {
- // Chrome
- window.getSelection().empty();
- } else if (window.getSelection().removeAllRanges) {
- // Firefox
- window.getSelection().removeAllRanges();
- }
- } else if (document.selection) {
- // IE?
- document.selection.empty();
- }
}
function _handleDrawRedactionBtnClick(e) {
@@ -791,7 +784,6 @@ window.addEventListener('load', (e) => {
}
_setRedactionsInput(redactions);
- applyRedactionBtn.disabled = true;
}
function _scaleToDisplay(value) {
diff --git a/src/main/resources/templates/security/redact.html b/src/main/resources/templates/security/redact.html
index cdea8015..707ddac1 100644
--- a/src/main/resources/templates/security/redact.html
+++ b/src/main/resources/templates/security/redact.html
@@ -453,11 +453,6 @@
-