diff --git a/src/main/resources/messages_en_GB.properties b/src/main/resources/messages_en_GB.properties index d8d3e148..744cbbd7 100644 --- a/src/main/resources/messages_en_GB.properties +++ b/src/main/resources/messages_en_GB.properties @@ -689,6 +689,8 @@ removeAnnotations.submit=Remove #compare compare.title=Compare compare.header=Compare PDFs +compare.highlightColor.1=Highlight Color 1: +compare.highlightColor.2=Highlight Color 2: compare.document.1=Document 1 compare.document.2=Document 2 compare.submit=Compare diff --git a/src/main/resources/messages_en_US.properties b/src/main/resources/messages_en_US.properties index 45d6352a..6717272b 100644 --- a/src/main/resources/messages_en_US.properties +++ b/src/main/resources/messages_en_US.properties @@ -689,6 +689,8 @@ removeAnnotations.submit=Remove #compare compare.title=Compare compare.header=Compare PDFs +compare.highlightColor.1=Highlight Color 1: +compare.highlightColor.2=Highlight Color 2: compare.document.1=Document 1 compare.document.2=Document 2 compare.submit=Compare diff --git a/src/main/resources/templates/misc/compare.html b/src/main/resources/templates/misc/compare.html index aef854fe..48ab3942 100644 --- a/src/main/resources/templates/misc/compare.html +++ b/src/main/resources/templates/misc/compare.html @@ -6,10 +6,36 @@ .result-column { border: 1px solid #ccc; padding: 15px; + margin-bottom: 15px; overflow-y: auto; height: calc(100vh - 400px); 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); + } @@ -27,7 +53,22 @@
+ +
+
+
+ + +
+
+ + +
+
+
+ +

@@ -55,6 +96,8 @@ async function comparePDFs() { const file1 = document.getElementById("fileInput-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) { console.error("Please select two PDF files to compare"); @@ -115,13 +158,15 @@ i--; 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--; } 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--; } } + console.log(differences); + return differences; }; @@ -138,14 +183,14 @@ const span1 = 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 (color === "green") { + // If it's an addition, show it in color2 in the second document and transparent in the first + if (color === color2) { span1.style.color = "transparent"; span1.style.userSelect = "none"; span2.style.color = color; } - // If it's a deletion, show it in red in the first document and transparent in the second - else if (color === "red") { + // If it's a deletion, show it in color1 in the first document and transparent in the second + else if (color === color1) { span1.style.color = color; span2.style.color = "transparent"; span2.style.userSelect = "none";