From af6457f6e5d461de7c3e468fd368aa639b2682ac Mon Sep 17 00:00:00 2001
From: Hamid Reza Mohammadi <mohammadi.hr@gmail.com>
Date: Thu, 5 Aug 2021 18:44:48 +0430
Subject: [PATCH] #186 using diff.js for clarification of suggested edits in
 admin panel

---
 .../Areas/Admin/Pages/ReviewEdits.cshtml      | 14 +++++-
 GanjooRazor/Pages/Shared/_AdminLayout.cshtml  | 43 +++++++++++++++++--
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/GanjooRazor/Areas/Admin/Pages/ReviewEdits.cshtml b/GanjooRazor/Areas/Admin/Pages/ReviewEdits.cshtml
index 3676c3d5..e2da2f7e 100644
--- a/GanjooRazor/Areas/Admin/Pages/ReviewEdits.cshtml
+++ b/GanjooRazor/Areas/Admin/Pages/ReviewEdits.cshtml
@@ -109,10 +109,20 @@ else
                 </tr>
                 <tr>
                     <td>
-                        <p style="color:red">@verse.OriginalText</p>
+                        <p style="color:red" id="verse-original-@verse.VORder">@verse.OriginalText</p>
                     </td>
                     <td>
-                        <p style="color:green">@verse.Text</p>
+                        <p style="color:green" id="verse-edited-@verse.VORder">@verse.Text</p>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <p id="verse-compare-@verse.VORder">@verse.OriginalText</p>
+                        <script>
+                            $(document).ready(function () {
+                                compareCorrectionBlocks('verse-original-@verse.VORder', 'verse-edited-@verse.VORder', 'verse-compare-@verse.VORder');
+                            });
+                        </script>
                     </td>
                 </tr>
                 <tr>
diff --git a/GanjooRazor/Pages/Shared/_AdminLayout.cshtml b/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
index 34675bb7..c78a43f0 100644
--- a/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
+++ b/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
@@ -13,6 +13,8 @@
     <link href="/css/fab.css" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
+    <script src="~/lib/jquery/dist/jquery.min.js"></script>
+    <script src="/lib/diff.js"></script>
     <script src="/lib/tinymce/tinymce.min.js"></script>
     <script>tinymce.init({ selector: 'textarea.editor', language: 'fa_IR' });</script>
     <script>
@@ -147,7 +149,7 @@
 
         function deleteItem(itemId, itemName) {
 
-            if (!confirm('آیا از حذف این ' + itemName+' اطمینان دارید؟'))
+            if (!confirm('آیا از حذف این ' + itemName + ' اطمینان دارید؟'))
                 return;
 
 
@@ -225,7 +227,7 @@
 
 
 
-        
+
 
         function exportAll() {
             if (!confirm('آیا از تولید مجدد همهٔ فایلهای گنجور رومیزی اطمینان دارید؟'))
@@ -287,6 +289,39 @@
             });
         }
 
+        function compareCorrectionBlocks(originalElemenyId, editedElementId, resultElementId) {
+            var a = document.getElementById(originalElemenyId);
+            var b = document.getElementById(editedElementId);
+            var result = document.getElementById(resultElementId);
+            var diff = JsDiff.diffChars(a.textContent, b.textContent);
+            var fragment = document.createDocumentFragment();
+            for (var i = 0; i < diff.length; i++) {
+
+                if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
+                    var swap = diff[i];
+                    diff[i] = diff[i + 1];
+                    diff[i + 1] = swap;
+                }
+
+                var node;
+                if (diff[i].removed) {
+                    node = document.createElement('del');
+                    node.style.color = 'red';
+                    node.appendChild(document.createTextNode(diff[i].value));
+                } else if (diff[i].added) {
+                    node = document.createElement('span');
+                    node.style.color = 'green';
+                    node.appendChild(document.createTextNode(diff[i].value));
+                } else {
+                    node = document.createTextNode(diff[i].value);
+                }
+                fragment.appendChild(node);
+            }
+
+            result.textContent = '';
+            result.appendChild(fragment);
+        }
+
 
     </script>
 </head>
@@ -356,8 +391,8 @@
         </main>
     </div>
 
-   
-    <script src="~/lib/jquery/dist/jquery.min.js"></script>
+
+    
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="~/js/site.js" asp-append-version="true"></script>