Introduction
Any reusable component is not only helpful to solve the individual developer's problem but saves time and cost for the whole project/ team. One of the requirements was to build a component which can track the changes made by an admin within the publicly displayed information.
Background
Considering the criticality of such information, it's always necessary for the other admin user/ reviewer to cross-verify the changes and review it properly before publishing it for the intended global audience. Especially, for such scenarios, the usability of any text comparator utility increases to many folds. Here is the working and very simple approach for developing such utility.
Using the Code
The pre-requisites are to download the below mentioned libraries:
- jQuery plug in, i.e.,
PrettyTextDiff and - Google's
diff_match_patch library
Add these library references to the intended HTML document as mentioned below:
<script src="Scripts/jquery.pretty-text-diff.min.js"></script>
<script src="Scripts/diff_match_patch.js"></script>
To track the text differences, which include both addition as well as deletion of any text or character, appropriate color coding approach has been implemented using the styles as mentioned below. It can be used within the same HTML document as well as can be kept in a separate CSS file. Here, in this example, light green color has been used for added text and red color for deleted text from the previous version.
#div1 and #div2 styles are used for different purposes, it helps in scrolling the three column values synchronously, explained in the later part of this article.
<style>
ins {
background-color: #c6ffc6;
text-decoration: none;
}
del {
background-color: #ffc6c6;
}
table, h3, input, label {
margin: 10px;
}
table th {
width: 30%;
}
#div1 {
height: 50px;
}
#div2 {
height: 50px;
}
</style>
I created a sample HTML document using the table element which has three columns, i.e., Previous Version, Modified Version and to track the difference between the previous two versions in the third column, i.e., Differences.
Here, textarea element has been used to display the text in the first two columns and label element to display the tracked changes as mentioned below:
<div id="container">
<h3>Text Comparator Utility
</h3>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Previous Version</th>
<th>Modified Version</th>
<th>Differences</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<textarea id="div1" class="original" style="width: 100%; height: 500px">
The blue fox climbing over the mountain followed by the armed villagers.
Village was full of brave soldiers capable to handle any dangerous
situation. They were not only helping the villagers but also the
wild animals freely roaming within the village and could pose a risk
to their lives as well. The blue fox climbing over the mountain
followed by the armed villagers. Village was full of brave soldiers
capable to handle any dangerous situation. They were not only helping
the villagers but also the wild animals freely roaming within the village
and could pose a risk to their lives as well. The blue fox climbing over
the mountain followed by the armed villagers. Village was full of
brave soldiers capable to handle any dangerous situation. They were
not only helping the villagers but also the wild animals freely roaming
within the village and could pose a risk to their lives as well.
The blue fox climbing over the mountain followed by the armed villagers.
Village was full of brave soldiers capable
to handle any dangerous situation.
They were not only helping the villagers but also the wild animals
freely roaming within the village and could pose a risk to
their lives as well.</textarea>
</td>
<td>
<textarea id="div2" class="changed"
style="width: 100%; height: 500px">
The yellow fox running across the dusty road followed by the
unarmed villagers. Village was full of brave people, capable enough
to handle this situation. They are trying to help not only the villagers
but also the wild animals freely roaming out of the woods and could pose
a risk to their lives as well.
The yellow fox running across the dusty road
followed by the unarmed villagers. Village was full of brave people,
capable enough to handle this situation. They are trying to help not only
the villagers but also the wild animals freely roaming out of the woods
and could pose a risk to their lives as well. The yellow fox running
across the dusty road followed by the unarmed villagers. Village was
full of brave people, capable enough to handle this situation. They are
trying to help not only the villagers but also the wild animals
freely roaming out of the woods and
could pose a risk to their lives as well.
The yellow fox running across the dusty road followed
by the unarmed villagers.
Village was full of brave people,
capable enough to handle this situation.
They are trying to help not only the villagers but also the wild animals
freely roaming out of the woods and
could pose a risk to their lives as well.
</textarea>
</td>
<td>
<div>
<label id="div3" style="width: 80%;
max-height: 500px; overflow-y: auto" class="diff"></label>
</div>
</td>
</tr>
</tbody>
</table>
<div>
<input type='button' class='btn btn-primary' value='Compare' />
</div>
</div>
input button element to trigger the jQuery/ JavaScript function as mentioned below:
<script>
$("input[type=button]").click(function () {
$("#container tr").prettyTextDiff();
});
</script>
Now, the last functionality to cover the sync scrolling for all the three columns using the below script. It can be combined with the above jQuery function or can be kept as a separate js file.
<script>
$(document).ready(function () {
$("#div1").scroll(function () {
$("#div2").scrollTop($("#div1").scrollTop());
$("#div3").scrollTop($("#div1").scrollTop());
});
$("#div2").scroll(function () {
$("#div1").scrollTop($("#div2").scrollTop());
$("#div3").scrollTop($("#div2").scrollTop());
});
$("#div3").scroll(function () {
$("#div1").scrollTop($("#div3").scrollTop());
$("#div2").scrollTop($("#div3").scrollTop());
});
});
</script>
Here, for each overflown column scrolling, the other two columns are bound to reflect the position changes, with the only limitation, if the first column value text length is smaller than the other columns, then other columns have to be scrolled further from their current position. It works perfectly if all the column values are nearly of the same size without much major variations in text length.
Isn't it simple to implement? Keep coding! :)
