Use a modal to compare diff

Author: SeriaWei

src/Plugins/ZKEACMS.AuditTrail/Views/AuditTrail/History.cshtml

@@ -12,6 +12,10 @@
             background: #fff;
         }
 
+        body .pagination {
+            margin: 10px 0 0;
+        }
+
         .diff-added {
             background-color: #d4edda;
             color: #155724;
@@ -30,27 +34,73 @@
         .new-value-cell {
             overflow: hidden;
             text-overflow: ellipsis;
-            max-width: 400px;
+            max-width: 100%;
             white-space: nowrap;
         }
 
-        tr.open .old-value-cell,
-        tr.open .new-value-cell {
-            overflow: visible;
-            white-space: normal;
+        tr {
+            cursor: pointer;
+        }
+
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #fff;
+            display: none;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+            .modal-overlay.active {
+                opacity: 1;
+            }
+
+        .modal-head {
+            margin-bottom: 5px;
+        }
+
+        .modal-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 10px;
+        }
+
+        .two-columns {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+            gap: 10px;
+        }
+
+        .column {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+            background-color: #f5f5f5;
+            border-radius: 12px;
+            border: 1px solid #ccc;
         }
     </style>
 }
 <div style="background:#fff">
     <div class="table-responsive">
-        <table class="table table-striped table-bordered table-hover" style="margin:0">
+        <table class="table table-striped table-bordered table-hover" style="margin:0; table-layout: fixed;">
             <thead>
                 <tr>
-                    <th>@L("ContentType@Fields")</th>
+                    <th style="width: 120px;">@L("ContentType@Fields")</th>
                     <th>@L("Old Value")</th>
                     <th>@L("New Value")</th>
-                    <th>@L("LastUpdateByName")</th>
-                    <th>@L("Last-Modified")</th>
+                    <th style="width: 140px;">@L("LastUpdateByName")</th>
+                    <th style="width: 155px;">@L("Last-Modified")</th>
                 </tr>
             </thead>
             <tbody>
@@ -63,10 +113,7 @@
                         <tr>
                             <td>@change.Field</td>
                             <td>
-                                @if (change.OldValue != null)
-                                {
-                                    <div class="old-value-cell">@change.OldValue</div>
-                                }
+                                <div class="old-value-cell text-muted">@change.OldValue</div>
                             </td>
                             <td>
                                 @if (change.ChangeType == (int)Easy.AuditTrail.AuditChangeType.Added)
@@ -85,7 +132,7 @@
                                 }
                                 else
                                 {
-                                    <div class="new-value-cell">@change.NewValue</div>
+                                    <div class="new-value-cell text-success">@change.NewValue</div>
                                 }
                             </td>
                             @if (i == 0)
@@ -104,116 +151,181 @@
         await Html.Pagin((ZKEACMS.Pagin)ViewBag.Pagin);
     }
 </div>
+<div id="modalOverlay" class="modal-overlay">
+    <div class="modal-container">
+        <div class="modal-head">
+            <code class="small">ESC</code>
+            <button id="closeModalBtn" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        </div>
+        <div class="two-columns">
+            <div id="leftColumn" class="column"></div>
+            <div id="rightColumn" class="column"></div>
+        </div>
+    </div>
+</div>
 @using (Script.AtFoot())
 {
     <script type="text/javascript">
-        function diffText(oldText, newText) {
-            const oldTokens = tokenizeText(oldText);
-            const newTokens = tokenizeText(newText);
+        $(function () {
+            function diffText(oldText, newText) {
+                const oldTokens = tokenizeText(oldText);
+                const newTokens = tokenizeText(newText);
 
-            const m = oldTokens.length;
-            const n = newTokens.length;
+                const m = oldTokens.length;
+                const n = newTokens.length;
 
-            const dp = Array(m + 1).fill().map(() => Array(n + 1).fill(0));
+                const dp = Array(m + 1).fill().map(() => Array(n + 1).fill(0));
 
-            for (let i = 1; i <= m; i++) {
-                for (let j = 1; j <= n; j++) {
-                    if (oldTokens[i - 1] === newTokens[j - 1]) {
-                        dp[i][j] = dp[i - 1][j - 1] + 1;
-                    } else {
-                        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+                for (let i = 1; i <= m; i++) {
+                    for (let j = 1; j <= n; j++) {
+                        if (oldTokens[i - 1] === newTokens[j - 1]) {
+                            dp[i][j] = dp[i - 1][j - 1] + 1;
+                        } else {
+                            dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+                        }
                     }
                 }
-            }
 
-            let i = m, j = n;
-            const oldResult = [];
-            const newResult = [];
-
-            while (i > 0 || j > 0) {
-                if (i > 0 && j > 0 && oldTokens[i - 1] === newTokens[j - 1]) {
-                    oldResult.unshift({ text: oldTokens[i - 1], type: 'same' });
-                    newResult.unshift({ text: newTokens[j - 1], type: 'same' });
-                    i--;
-                    j--;
-                } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
-                    newResult.unshift({ text: newTokens[j - 1], type: 'added' });
-                    j--;
-                } else if (i > 0 && (j === 0 || dp[i][j - 1] < dp[i - 1][j])) {
-                    oldResult.unshift({ text: oldTokens[i - 1], type: 'removed' });
-                    i--;
+                let i = m, j = n;
+                const oldResult = [];
+                const newResult = [];
+
+                while (i > 0 || j > 0) {
+                    if (i > 0 && j > 0 && oldTokens[i - 1] === newTokens[j - 1]) {
+                        oldResult.unshift({ text: oldTokens[i - 1], type: 'same' });
+                        newResult.unshift({ text: newTokens[j - 1], type: 'same' });
+                        i--;
+                        j--;
+                    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+                        newResult.unshift({ text: newTokens[j - 1], type: 'added' });
+                        j--;
+                    } else if (i > 0 && (j === 0 || dp[i][j - 1] < dp[i - 1][j])) {
+                        oldResult.unshift({ text: oldTokens[i - 1], type: 'removed' });
+                        i--;
+                    }
                 }
+
+                return {
+                    oldResult: mergeAdjacentTokens(oldResult),
+                    newResult: mergeAdjacentTokens(newResult)
+                };
             }
 
-            return {
-                oldResult: mergeAdjacentTokens(oldResult),
-                newResult: mergeAdjacentTokens(newResult)
-            };
-        }
+            function tokenizeText(text) {
+                const tokenRegex = /(\s+|[^\w\s]|\w+)/g;
+                const tokens = [];
+                let match;
 
-        function tokenizeText(text) {
-            const tokenRegex = /(\s+|[^\w\s]|\w+)/g;
-            const tokens = [];
-            let match;
+                while ((match = tokenRegex.exec(text)) !== null) {
+                    tokens.push(match[0]);
+                }
 
-            while ((match = tokenRegex.exec(text)) !== null) {
-                tokens.push(match[0]);
+                return tokens;
             }
 
-            return tokens;
-        }
-
-        function mergeAdjacentTokens(tokens) {
-            if (tokens.length === 0) return [];
+            function mergeAdjacentTokens(tokens) {
+                if (tokens.length === 0) return [];
 
-            const result = [];
-            let currentToken = { ...tokens[0] };
+                const result = [];
+                let currentToken = { ...tokens[0] };
 
-            for (let i = 1; i < tokens.length; i++) {
-                if (tokens[i].type === currentToken.type) {
-                    currentToken.text += tokens[i].text;
-                } else {
-                    result.push(currentToken);
-                    currentToken = { ...tokens[i] };
+                for (let i = 1; i < tokens.length; i++) {
+                    if (tokens[i].type === currentToken.type) {
+                        currentToken.text += tokens[i].text;
+                    } else {
+                        result.push(currentToken);
+                        currentToken = { ...tokens[i] };
+                    }
                 }
+
+                result.push(currentToken);
+                return result;
             }
 
-            result.push(currentToken);
-            return result;
-        }
+            function tokensToHtml(tokens) {
+                return tokens.map(token => {
+                    let className = '';
+                    switch (token.type) {
+                        case 'added':
+                            return `<span class="diff-added">${token.text}</span>`;
+                        case 'removed':
+                            return `<del class="diff-removed">${token.text}</del>`;
+                        case 'same':
+                            return `<span>${token.text}</span>`;
+                        default:
+                            return `<span>${token.text}</span>`;
+                    }
+                }).join('');
+            }
+
+            const openModalBtn = document.getElementById('openModalBtn');
+            const closeModalBtn = document.getElementById('closeModalBtn');
+            const modalOverlay = document.getElementById('modalOverlay');
+            const leftColumn = document.getElementById('leftColumn');
+            const rightColumn = document.getElementById('rightColumn');
+            let isSyncingScroll = false;
+
+            const openModal = () => {
+                modalOverlay.style.display = 'block';
+
+                requestAnimationFrame(() => {
+                    modalOverlay.classList.add('active');
+                });
+                leftColumn.scrollTop = 0;
+                rightColumn.scrollTop = 0;
+            };
 
-        function tokensToHtml(tokens) {
-            return tokens.map(token => {
-                let className = '';
-                switch (token.type) {
-                    case 'added':
-                        return `<span class="diff-added">${token.text}</span>`;
-                    case 'removed':
-                        return `<span class="diff-removed">${token.text}</span>`;
-                    case 'same':
-                        return `<span>${token.text}</span>`;
-                    default:
-                        return `<span>${token.text}</span>`;
+            const closeModal = () => {
+                modalOverlay.classList.remove('active');
+                setTimeout(() => {
+                    modalOverlay.style.display = 'none';
+                }, 300);
+            };
+
+            closeModalBtn.addEventListener('click', closeModal);
+            modalOverlay.addEventListener('click', (e) => {
+                if (e.target === modalOverlay) {
+                    closeModal();
                 }
-            }).join('');
-        }
+            });
 
-        $(function () {
-            $("tr").click(function () {
-                $(this).toggleClass("open");
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && modalOverlay.style.display === 'block') {
+                    closeModal();
+                }
             });
-            $('tr').each(function () {
+            const syncScroll = (source, target) => {
+                if (isSyncingScroll) return;
+                isSyncingScroll = true;
+                const scrollRatio = source.scrollTop / (source.scrollHeight - source.clientHeight);
+                target.scrollTop = scrollRatio * (target.scrollHeight - target.clientHeight);
+                setTimeout(() => {
+                    isSyncingScroll = false;
+                }, 10);
+            };
+
+            leftColumn.addEventListener('scroll', () => {
+                syncScroll(leftColumn, rightColumn);
+            });
+
+            rightColumn.addEventListener('scroll', () => {
+                syncScroll(rightColumn, leftColumn);
+            });
+
+            $('tr').click(function () {
                 const oldValueCell = $(this).find('.old-value-cell');
                 const newValueCell = $(this).find('.new-value-cell');
 
                 const oldText = $.trim(oldValueCell.html());
                 const newText = $.trim(newValueCell.html());
-                if (oldText && newText) {
+                if (oldText || newText) {
+                    openModal();
                     const diffResult = diffText(oldText, newText);
-                    newValueCell.html(tokensToHtml(diffResult.newResult));
-                    oldValueCell.html(tokensToHtml(diffResult.oldResult));
+                    leftColumn.innerHTML = tokensToHtml(diffResult.oldResult);
+                    rightColumn.innerHTML = tokensToHtml(diffResult.newResult);
                 }
             });
+
         });
     </script>
 }