Skip to content

Commit ef06742

Browse files
coditectcoditect
committed
Added demo
1 parent f44d363 commit ef06742

1 file changed

Lines changed: 130 additions & 0 deletions

File tree

‎demo.html‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ArrayDiff Demo</title>
5+
<meta charset="utf8"/>
6+
<style>
7+
8+
body {
9+
font-family: sans-serif;
10+
margin: 1em;
11+
}
12+
13+
p {
14+
line-height: 1.5;
15+
margin: 2em 0;
16+
}
17+
18+
table {
19+
border-collapse: collapse;
20+
line-height: 2;
21+
}
22+
23+
th {
24+
padding: 0 1em 0 0;
25+
text-align: left;
26+
}
27+
28+
input {
29+
display: block;
30+
font-family: inherit;
31+
font-size: inherit;
32+
height: 2em;
33+
margin: 0;
34+
padding: 0 0.5em;
35+
width: 16em;
36+
}
37+
38+
button {
39+
display: block;
40+
margin: 1em 0;
41+
width: 100%;
42+
}
43+
44+
td {
45+
border: 1px solid #000;
46+
min-width: 2em;
47+
padding: 0;
48+
text-align: center;
49+
}
50+
51+
.added {background-color: #cfc}
52+
.removed {background-color: #fcc}
53+
54+
.old .added {color: #9c9}
55+
.new .removed {color: #c99}
56+
57+
</style>
58+
<script src="ArrayDiffElement.js"></script>
59+
<script src="ArrayDiff.js"></script>
60+
<script>
61+
62+
window.onload = function() {
63+
64+
var table = document.getElementsByTagName('table')[0],
65+
newInput = document.getElementById('new'),
66+
oldInput = document.getElementById('old');
67+
68+
function clearTable() {
69+
var cells = document.getElementsByTagName('td');
70+
while (cells.length > 0) {
71+
cells[0].parentNode.removeChild(cells[0]);
72+
}
73+
}
74+
75+
function addCell(row, content, className) {
76+
var element = document.createElement('td');
77+
element.textContent = content;
78+
element.className = className;
79+
table.rows[row].appendChild(element);
80+
}
81+
82+
function getDiff() {
83+
clearTable();
84+
var arrayDiff = new ArrayDiff(newInput.value, oldInput.value);
85+
86+
for (var i = 0; i < arrayDiff.diff.length; i++) {
87+
88+
if (arrayDiff.diff[i].added()) {
89+
addCell(0, '∅', 'added');
90+
addCell(1, '+', 'added');
91+
addCell(2, arrayDiff.diff[i].item, 'added');
92+
}
93+
else if (arrayDiff.diff[i].removed()) {
94+
addCell(0, arrayDiff.diff[i].item, 'removed');
95+
addCell(1, '−', 'removed');
96+
addCell(2, '∅', 'removed');
97+
}
98+
else {
99+
addCell(0, arrayDiff.diff[i].item, '');
100+
addCell(1, '↓', '');
101+
addCell(2, arrayDiff.diff[i].item, '');
102+
}
103+
}
104+
}
105+
106+
newInput.onkeyup = getDiff;
107+
oldInput.onkeyup = getDiff;
108+
getDiff();
109+
};
110+
111+
</script>
112+
</head>
113+
<body>
114+
<h1>ArrayDiff Demo</h1>
115+
<p>ArrayDiff computes the difference between two JavaScript arrays (as well as any other object that uses numeric subscripts, such as a string or DOMNodeList) by finding the longest common subsequence between them. The result can be used to visualize the transformation of one array to another, as demonstrated below.</p>
116+
<table>
117+
<tr class="old">
118+
<th><label for="old">Old</label></th>
119+
<th><input type="text" id="old" value="nematode knowledge"/></th>
120+
</tr>
121+
<tr>
122+
<th colspan="2"></th>
123+
</tr>
124+
<tr class="new">
125+
<th><label for="new">New</label></th>
126+
<th><input type="text" id="new" value="empty bottle"/></th>
127+
</tr>
128+
</table>
129+
</body>
130+
</html>

0 commit comments

Comments
 (0)