Highlight color selection for the Compare PDFs page. (#1515)
* Update compare.html * Update compare.html * Conform to text requirements Changed text in some labels to conform to Thymeleaf format. * Add GB to th:text for label
This commit is contained in:
parent
40042c37f2
commit
f95ee31bbd
3 changed files with 55 additions and 6 deletions
|
@ -689,6 +689,8 @@ removeAnnotations.submit=Remove
|
||||||
#compare
|
#compare
|
||||||
compare.title=Compare
|
compare.title=Compare
|
||||||
compare.header=Compare PDFs
|
compare.header=Compare PDFs
|
||||||
|
compare.highlightColor.1=Highlight Color 1:
|
||||||
|
compare.highlightColor.2=Highlight Color 2:
|
||||||
compare.document.1=Document 1
|
compare.document.1=Document 1
|
||||||
compare.document.2=Document 2
|
compare.document.2=Document 2
|
||||||
compare.submit=Compare
|
compare.submit=Compare
|
||||||
|
|
|
@ -689,6 +689,8 @@ removeAnnotations.submit=Remove
|
||||||
#compare
|
#compare
|
||||||
compare.title=Compare
|
compare.title=Compare
|
||||||
compare.header=Compare PDFs
|
compare.header=Compare PDFs
|
||||||
|
compare.highlightColor.1=Highlight Color 1:
|
||||||
|
compare.highlightColor.2=Highlight Color 2:
|
||||||
compare.document.1=Document 1
|
compare.document.1=Document 1
|
||||||
compare.document.2=Document 2
|
compare.document.2=Document 2
|
||||||
compare.submit=Compare
|
compare.submit=Compare
|
||||||
|
|
|
@ -6,10 +6,36 @@
|
||||||
.result-column {
|
.result-column {
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: calc(100vh - 400px);
|
height: calc(100vh - 400px);
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
.flex-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.color-selector {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
width: 50%;
|
||||||
|
max-height: 100px;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
#color-box1, #color-box2 {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.spacer1 {
|
||||||
|
padding-right: calc(var(--bs-gutter-x) * .5);
|
||||||
|
}
|
||||||
|
.spacer2 {
|
||||||
|
padding-left: calc(var(--bs-gutter-x) * .5);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
@ -27,7 +53,22 @@
|
||||||
</div>
|
</div>
|
||||||
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
|
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
|
||||||
<div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
|
<div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class="color-selector spacer1">
|
||||||
|
<label th:text="#{compare.highlightColor.1}"></label>
|
||||||
|
<label for="color-box1"></label><input type="color" id="color-box1" value="#ff0000">
|
||||||
|
</div>
|
||||||
|
<div class="color-selector spacer2">
|
||||||
|
<label th:text="#{compare.highlightColor.2}"></label>
|
||||||
|
<label for="color-box2"></label><input type="color" id="color-box2" value="#008000">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button class="btn btn-primary" onclick="comparePDFs()" th:text="#{compare.submit}"></button>
|
<button class="btn btn-primary" onclick="comparePDFs()" th:text="#{compare.submit}"></button>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<h3 th:text="#{compare.document.1}"></h3>
|
<h3 th:text="#{compare.document.1}"></h3>
|
||||||
|
@ -55,6 +96,8 @@
|
||||||
async function comparePDFs() {
|
async function comparePDFs() {
|
||||||
const file1 = document.getElementById("fileInput-input").files[0];
|
const file1 = document.getElementById("fileInput-input").files[0];
|
||||||
const file2 = document.getElementById("fileInput2-input").files[0];
|
const file2 = document.getElementById("fileInput2-input").files[0];
|
||||||
|
var color1 = document.getElementById('color-box1').value;
|
||||||
|
var color2 = document.getElementById('color-box2').value;
|
||||||
|
|
||||||
if (!file1 || !file2) {
|
if (!file1 || !file2) {
|
||||||
console.error("Please select two PDF files to compare");
|
console.error("Please select two PDF files to compare");
|
||||||
|
@ -115,13 +158,15 @@
|
||||||
i--;
|
i--;
|
||||||
j--;
|
j--;
|
||||||
} else if (j > 0 && (i === 0 || matrix[i][j - 1] >= matrix[i - 1][j])) {
|
} else if (j > 0 && (i === 0 || matrix[i][j - 1] >= matrix[i - 1][j])) {
|
||||||
differences.unshift(['green', words2[j - 1]]);
|
differences.unshift([color2, words2[j - 1]]);
|
||||||
j--;
|
j--;
|
||||||
} else if (i > 0 && (j === 0 || matrix[i][j - 1] < matrix[i - 1][j])) {
|
} else if (i > 0 && (j === 0 || matrix[i][j - 1] < matrix[i - 1][j])) {
|
||||||
differences.unshift(['red', words1[i - 1]]);
|
differences.unshift([color1, words1[i - 1]]);
|
||||||
i--;
|
i--;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log(differences);
|
||||||
|
|
||||||
|
|
||||||
return differences;
|
return differences;
|
||||||
};
|
};
|
||||||
|
@ -138,14 +183,14 @@
|
||||||
const span1 = document.createElement("span");
|
const span1 = document.createElement("span");
|
||||||
const span2 = document.createElement("span");
|
const span2 = document.createElement("span");
|
||||||
|
|
||||||
// If it's an addition, show it in green in the second document and transparent in the first
|
// If it's an addition, show it in color2 in the second document and transparent in the first
|
||||||
if (color === "green") {
|
if (color === color2) {
|
||||||
span1.style.color = "transparent";
|
span1.style.color = "transparent";
|
||||||
span1.style.userSelect = "none";
|
span1.style.userSelect = "none";
|
||||||
span2.style.color = color;
|
span2.style.color = color;
|
||||||
}
|
}
|
||||||
// If it's a deletion, show it in red in the first document and transparent in the second
|
// If it's a deletion, show it in color1 in the first document and transparent in the second
|
||||||
else if (color === "red") {
|
else if (color === color1) {
|
||||||
span1.style.color = color;
|
span1.style.color = color;
|
||||||
span2.style.color = "transparent";
|
span2.style.color = "transparent";
|
||||||
span2.style.userSelect = "none";
|
span2.style.userSelect = "none";
|
||||||
|
|
Loading…
Reference in a new issue