-
Notifications
You must be signed in to change notification settings - Fork 14
Expand file tree
/
Copy pathdiff.html
More file actions
104 lines (95 loc) · 1.9 KB
/
Copy pathdiff.html
File metadata and controls
104 lines (95 loc) · 1.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!doctype html>
<html>
<head>
<title>DOM Diff - Bob & Lucy</title>
<meta charset="utf-8">
</head>
<body><div id="demo"></div></body>
<script src="../index.js"></script>
<script>
var and = [document.createTextNode(' & ')];
var bye = [document.createTextNode('The End')];
var Bob = [
document.createTextNode('B'),
document.createTextNode('o'),
document.createTextNode('b')
];
var Lucy = [
document.createTextNode('L'),
document.createTextNode('u'),
document.createTextNode('c'),
document.createTextNode('y')
];
var content = domdiff(
demo,
[],
[Bob, and, Lucy],
getNode
);
// ... later on ...
setTimeout(function () {
content = domdiff(
demo,
content,
[Lucy, and, Bob],
getNode
);
// ... later on ...
setTimeout(function () {
content = domdiff(
demo,
content,
[bye],
getNode
);
// ... and last clean up ...
setTimeout(function () {
content = domdiff(
demo,
content,
[],
getNode
);
}, 1000);
}, 1000);
}, 1000);
// in this demo case, getNode is
// assumig every item is an Array
function getNode(item, i) {
// case removal or case after
if ((1 / i) < 0) {
// case removal
if (i) {
// if the item has more than a node
// remove all other nodes at once
if (item.length > 1) {
var range = document.createRange();
range.setStartBefore(item[1]);
range.setEndAfter(item[item.length - 1]);
range.deleteContents();
}
// return the first node to be removed
return item[0];
}
// case after
else {
return item[item.length - 1];
}
}
// case insert
else if (i) {
return item.reduce(
function (f, n) {
f.appendChild(n);
return f;
},
document.createDocumentFragment()
);
}
// case before
else {
return item[0];
}
}
</script>
</html>