Skip to content

Commit 50b908d

Browse files
tabatkinstabatkins
committed
Add secondary files.
1 parent 014d255 commit 50b908d

File tree

2 files changed

+248
-0
lines changed

2 files changed

+248
-0
lines changed

‎diff.js

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
/*
2+
* Javascript Diff Algorithm
3+
* By John Resig (http://ejohn.org/)
4+
* Modified by Chu Alan "sprite"
5+
*
6+
* Released under the MIT license.
7+
*
8+
* More Info:
9+
* http://ejohn.org/projects/javascript-diff-algorithm/
10+
*/
11+
12+
function escape(s) {
13+
var n = s;
14+
n = n.replace(/&/g, "&");
15+
n = n.replace(/</g, "&lt;");
16+
n = n.replace(/>/g, "&gt;");
17+
n = n.replace(/"/g, "&quot;");
18+
19+
return n;
20+
}
21+
22+
function diffString( o, n ) {
23+
o = o.replace(/\s+$/, '');
24+
n = n.replace(/\s+$/, '');
25+
26+
var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
27+
var str = "";
28+
29+
var oSpace = o.match(/\s+/g);
30+
if (oSpace == null) {
31+
oSpace = ["\n"];
32+
} else {
33+
oSpace.push("\n");
34+
}
35+
var nSpace = n.match(/\s+/g);
36+
if (nSpace == null) {
37+
nSpace = ["\n"];
38+
} else {
39+
nSpace.push("\n");
40+
}
41+
42+
if (out.n.length == 0) {
43+
for (var i = 0; i < out.o.length; i++) {
44+
str += '<del>' + escape(out.o[i]) + oSpace[i] + "</del>";
45+
}
46+
} else {
47+
if (out.n[0].text == null) {
48+
for (n = 0; n < out.o.length && out.o[n].text == null; n++) {
49+
str += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
50+
}
51+
}
52+
53+
for ( var i = 0; i < out.n.length; i++ ) {
54+
if (out.n[i].text == null) {
55+
str += '<ins>' + escape(out.n[i]) + nSpace[i] + "</ins>";
56+
} else {
57+
var pre = "";
58+
59+
for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++ ) {
60+
pre += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
61+
}
62+
str += " " + out.n[i].text + nSpace[i] + pre;
63+
}
64+
}
65+
}
66+
67+
return str;
68+
}
69+
70+
function randomColor() {
71+
return "rgb(" + (Math.random() * 100) + "%, " +
72+
(Math.random() * 100) + "%, " +
73+
(Math.random() * 100) + "%)";
74+
}
75+
function diffString2( o, n ) {
76+
o = o.replace(/\s+$/, '');
77+
n = n.replace(/\s+$/, '');
78+
79+
var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
80+
81+
var oSpace = o.match(/\s+/g);
82+
if (oSpace == null) {
83+
oSpace = ["\n"];
84+
} else {
85+
oSpace.push("\n");
86+
}
87+
var nSpace = n.match(/\s+/g);
88+
if (nSpace == null) {
89+
nSpace = ["\n"];
90+
} else {
91+
nSpace.push("\n");
92+
}
93+
94+
var os = "";
95+
var colors = new Array();
96+
for (var i = 0; i < out.o.length; i++) {
97+
colors[i] = randomColor();
98+
99+
if (out.o[i].text != null) {
100+
os += '<span style="background-color: ' +colors[i]+ '">' +
101+
escape(out.o[i].text) + oSpace[i] + "</span>";
102+
} else {
103+
os += "<del>" + escape(out.o[i]) + oSpace[i] + "</del>";
104+
}
105+
}
106+
107+
var ns = "";
108+
for (var i = 0; i < out.n.length; i++) {
109+
if (out.n[i].text != null) {
110+
ns += '<span style="background-color: ' +colors[out.n[i].row]+ '">' +
111+
escape(out.n[i].text) + nSpace[i] + "</span>";
112+
} else {
113+
ns += "<ins>" + escape(out.n[i]) + nSpace[i] + "</ins>";
114+
}
115+
}
116+
117+
return { o : os , n : ns };
118+
}
119+
120+
function diff( o, n ) {
121+
var ns = new Object();
122+
var os = new Object();
123+
124+
for ( var i = 0; i < n.length; i++ ) {
125+
if ( ns[ n[i] ] == null )
126+
ns[ n[i] ] = { rows: new Array(), o: null };
127+
ns[ n[i] ].rows.push( i );
128+
}
129+
130+
for ( var i = 0; i < o.length; i++ ) {
131+
if ( os[ o[i] ] == null )
132+
os[ o[i] ] = { rows: new Array(), n: null };
133+
os[ o[i] ].rows.push( i );
134+
}
135+
136+
for ( var i in ns ) {
137+
if ( ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1 ) {
138+
n[ ns[i].rows[0] ] = { text: n[ ns[i].rows[0] ], row: os[i].rows[0] };
139+
o[ os[i].rows[0] ] = { text: o[ os[i].rows[0] ], row: ns[i].rows[0] };
140+
}
141+
}
142+
143+
for ( var i = 0; i < n.length - 1; i++ ) {
144+
if ( n[i].text != null && n[i+1].text == null && n[i].row + 1 < o.length && o[ n[i].row + 1 ].text == null &&
145+
n[i+1] == o[ n[i].row + 1 ] ) {
146+
n[i+1] = { text: n[i+1], row: n[i].row + 1 };
147+
o[n[i].row+1] = { text: o[n[i].row+1], row: i + 1 };
148+
}
149+
}
150+
151+
for ( var i = n.length - 1; i > 0; i-- ) {
152+
if ( n[i].text != null && n[i-1].text == null && n[i].row > 0 && o[ n[i].row - 1 ].text == null &&
153+
n[i-1] == o[ n[i].row - 1 ] ) {
154+
n[i-1] = { text: n[i-1], row: n[i].row - 1 };
155+
o[n[i].row-1] = { text: o[n[i].row-1], row: i - 1 };
156+
}
157+
}
158+
159+
return { o: o, n: n };
160+
}

‎test.html

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!doctype html>
2+
<title>Tests</title>
3+
<script src="tokenizer.js"></script>
4+
<script src="parser.js"></script>
5+
<script src="diff.js"></script>
6+
<style>
7+
ins { background: hsl(120, 50%, 90%); color: greeen; }
8+
del { background: hsl(0, 50%, 90%); color: darkred; }
9+
ins, del { text-decoration: none; }
10+
</style>
11+
<script>
12+
function log(str) {
13+
document.querySelector('#log').innerHTML += str+'\n';
14+
}
15+
</script>
16+
<pre id='log'></pre>
17+
<script>
18+
var TESTS = [
19+
{
20+
css: 'foo { \
21+
bar: baz; \
22+
}',
23+
expected: {"type": "stylesheet", "value": [
24+
{
25+
"type": "selector",
26+
"selector": ["IDENT(foo)", "WS"],
27+
"value": [
28+
{
29+
"type": "declaration",
30+
"name": "bar",
31+
"value": ["WS", "IDENT(baz)"]}]}]
32+
}
33+
}, {
34+
css: 'foo { bar: rgb(255, 0, 127); }',
35+
expected: {"type": "stylesheet", "value": [
36+
{
37+
"type": "selector",
38+
"selector": ["IDENT(foo)", "WS"],
39+
"value": [
40+
{
41+
"type": "declaration",
42+
"name": "bar",
43+
"value": ["WS", {"type": "func", "name": "rgb", "value": [
44+
["INT(255)"], ["WS", "INT(0)"], ["WS", "INT(127)"]]}]}]}]
45+
}
46+
}, {
47+
css: '#foo {}',
48+
expected: {"type": "stylesheet", "value": [
49+
{
50+
"type": "selector",
51+
"selector": ["HASH(foo)", "WS"],
52+
"value": []}]
53+
}
54+
}, {
55+
css: '@media{ }',
56+
expected: {"type": "stylesheet", "value": [
57+
{
58+
"type": "at", "name": "media",
59+
"prelude": [],
60+
"value": []}]}
61+
}
62+
];
63+
64+
var total = TESTS.length, failures = 0,
65+
i, test, tokens, sheet, dump, expected_dump;
66+
67+
for (i = 0; i < total; i++) {
68+
test = TESTS[i];
69+
tokens = tokenize(test.css);
70+
sheet = parse(tokens);
71+
dump = sheet.toString(' ');
72+
expected_dump = JSON.stringify(test.expected, null, ' ');
73+
if (dump == expected_dump) {
74+
log('Test '+i+' of '+total+': PASS');
75+
} else {
76+
log('Test '+i+' of '+total+': FAIL\nCSS: '+test.css+'\nTokens: '+tokens.join(' '));
77+
log(diffString(expected_dump, dump));
78+
failures++;
79+
}
80+
}
81+
82+
// Abuse the differ to get colored output
83+
if (failures == 0) {
84+
log(diffString(total+' tests, ', total+' tests, all passed :)'));
85+
} else {
86+
log(diffString(total+' tests, '+failures+' failures :(', total+' tests, '));
87+
}
88+
</script>

0 commit comments

Comments
 (0)