parent
43c7ccb3fe
commit
81534d9367
@ -0,0 +1,61 @@
|
|||||||
|
table {
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
width: 33%;
|
||||||
|
padding: 3px 4px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
vertical-align: top;
|
||||||
|
font: 1em monospace;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
display: inline;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
del {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #b30000;
|
||||||
|
background: #fadad7;
|
||||||
|
}
|
||||||
|
|
||||||
|
ins {
|
||||||
|
background: #eaf2c2;
|
||||||
|
color: #406619;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#result {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings {
|
||||||
|
|
||||||
|
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
|
#settings label {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source {
|
||||||
|
position: absolute;
|
||||||
|
right: 1%;
|
||||||
|
top: .2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-document url-prefix() {
|
||||||
|
body {
|
||||||
|
height: 99%; /* Hide scroll bar in Firefox */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#diff-ui {
|
||||||
|
background: #fff;
|
||||||
|
padding: 2em;
|
||||||
|
margin: 1em;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,98 @@
|
|||||||
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
|
||||||
|
<div id="diff-ui">
|
||||||
|
<del>Removed text</del>
|
||||||
|
<ins>Inserted Text</ins>
|
||||||
|
|
||||||
|
<div id="settings">
|
||||||
|
<h3>Diff</h3>
|
||||||
|
<label><input type="radio" name="diff_type" value="diffChars"> Chars</label>
|
||||||
|
<label><input type="radio" name="diff_type" value="diffWords" > Words</label>
|
||||||
|
<label><input type="radio" name="diff_type" value="diffLines" checked=""> Lines</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<!-- just proof of concept copied straight from github.com/kpdecker/jsdiff -->
|
||||||
|
<td id="a" style="display: none;">{{left}}</td>
|
||||||
|
<td id="b" style="display: none;">{{right}}</td>
|
||||||
|
<td>
|
||||||
|
<pre id="result"></pre>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
Diff algorithm from the amazing <a href="https://github.com/kpdecker/jsdiff" >github.com/kpdecker/jsdiff</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/static/js/diff.js"></script>
|
||||||
|
<script defer="">
|
||||||
|
var a = document.getElementById('a');
|
||||||
|
var b = document.getElementById('b');
|
||||||
|
var result = document.getElementById('result');
|
||||||
|
|
||||||
|
function changed() {
|
||||||
|
var diff = JsDiff[window.diffType](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.appendChild(document.createTextNode(diff[i].value));
|
||||||
|
} else if (diff[i].added) {
|
||||||
|
node = document.createElement('ins');
|
||||||
|
node.appendChild(document.createTextNode(diff[i].value));
|
||||||
|
} else {
|
||||||
|
node = document.createTextNode(diff[i].value);
|
||||||
|
}
|
||||||
|
fragment.appendChild(node);
|
||||||
|
}
|
||||||
|
|
||||||
|
result.textContent = '';
|
||||||
|
result.appendChild(fragment);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
onDiffTypeChange(document.querySelector('#settings [name="diff_type"]:checked'));
|
||||||
|
changed();
|
||||||
|
};
|
||||||
|
|
||||||
|
a.onpaste = a.onchange =
|
||||||
|
b.onpaste = b.onchange = changed;
|
||||||
|
|
||||||
|
if ('oninput' in a) {
|
||||||
|
a.oninput = b.oninput = changed;
|
||||||
|
} else {
|
||||||
|
a.onkeyup = b.onkeyup = changed;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDiffTypeChange(radio) {
|
||||||
|
window.diffType = radio.value;
|
||||||
|
document.title = "Diff " + radio.value.slice(4);
|
||||||
|
}
|
||||||
|
|
||||||
|
var radio = document.getElementsByName('diff_type');
|
||||||
|
for (var i = 0; i < radio.length; i++) {
|
||||||
|
radio[i].onchange = function(e) {
|
||||||
|
onDiffTypeChange(e.target);
|
||||||
|
changed();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{% endblock %}
|
Loading…
Reference in new issue