You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.7 KiB
136 lines
3.7 KiB
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
|
|
<div id="settings">
|
|
<h1>Differences</h1>
|
|
<form class="pure-form " action="" method="GET">
|
|
<fieldset>
|
|
|
|
<label for="diffWords" class="pure-checkbox">
|
|
<input type="radio" name="diff_type" id="diffWords" value="diffWords" /> Words</label>
|
|
<label for="diffLines" class="pure-checkbox">
|
|
<input type="radio" name="diff_type" id="diffLines" value="diffLines" checked=""/> Lines</label>
|
|
|
|
<label for="diffChars" class="pure-checkbox">
|
|
<input type="radio" name="diff_type" id="diffChars" value="diffChars"/> Chars</label>
|
|
|
|
{% if versions|length >= 1 %}
|
|
<label for="diff-version">Compare newest with</label>
|
|
<select id="diff-version" name="previous_version">
|
|
{% for version in versions %}
|
|
<option value="{{version}}" {% if version== current_previous_version %} selected="" {% endif %}>
|
|
{{version}}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button type="submit" class="pure-button pure-button-primary">Go</button>
|
|
{% endif %}
|
|
</fieldset>
|
|
</form>
|
|
<del>Removed text</del>
|
|
<ins>Inserted Text</ins>
|
|
</div>
|
|
|
|
<div id="diff-ui">
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<!-- just proof of concept copied straight from github.com/kpdecker/jsdiff -->
|
|
<td id="a" style="display: none;">{{previous}}</td>
|
|
<td id="b" style="display: none;">{{newest}}</td>
|
|
<td>
|
|
<span id="result"></span>
|
|
</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() {
|
|
|
|
|
|
/* Convert what is options from UTC time.time() to local browser time */
|
|
var diffList=document.getElementById("diff-version");
|
|
if (typeof(diffList) != 'undefined' && diffList != null) {
|
|
for (var option of diffList.options) {
|
|
//alert(option.value);
|
|
var dateObject = new Date(option.value*1000);
|
|
option.label=dateObject.toLocaleString();
|
|
}
|
|
}
|
|
|
|
|
|
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 %} |