Skip to content

Commit d398fa1

Browse files
matteosuppomatteosuppo
committed
New readme
1 parent 2d037b3 commit d398fa1

File tree

3 files changed

+390
-0
lines changed

3 files changed

+390
-0
lines changed

‎README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,52 @@ angular-diff
22
============
33

44
Diff filter for angular.js. Show inline text diff in your page
5+
6+
I took the idea and the algorithm (and the code) from [http://ejohn.org/projects/javascript-diff-algorithm/](http://ejohn.org/projects/javascript-diff-algorithm/)
7+
8+
Install
9+
-------
10+
11+
To use angular-diff you have to:
12+
13+
1. install angular-diff with bower:
14+
15+
```bower install angular-diff```
16+
17+
2. In your ```index.html```, include the angular-diff file
18+
19+
<script src="bower_components/angular-diff/angular-diff.min.js"></script>
20+
21+
In your module declaration you have to include the diff module
22+
23+
var module = angular.module('yourModule', [
24+
...
25+
'diff',
26+
]);
27+
28+
USAGE
29+
-----
30+
31+
It's a filter, you use it in your html like this:
32+
33+
```{{text|diff:otherText}}```
34+
35+
This will show the diff between ```text``` and ```otherText```
36+
37+
38+
DEVELOPMENT
39+
-----------
40+
41+
Remember to install all dependencies:
42+
43+
$ npm install -g gulp // It's like grunt but cooler
44+
$ npm install
45+
$ bower install
46+
47+
To launch tests simply run
48+
49+
gulp karma
50+
51+
To build and minify simply run
52+
53+
gulp build

‎angular-diff.js‎

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
'use strict';
2+
3+
angular.module('diff', [])
4+
.filter('diff', function () {
5+
6+
/*
7+
* Javascript Diff Algorithm
8+
* By John Resig (http://ejohn.org/)
9+
* Modified by Chu Alan 'sprite'
10+
*
11+
* Released under the MIT license.
12+
*
13+
* More Info:
14+
* http://ejohn.org/projects/javascript-diff-algorithm/
15+
*/
16+
17+
function escape(s) {
18+
var n = s;
19+
n = n.replace(/&/g, '&amp;');
20+
n = n.replace(/</g, '&lt;');
21+
n = n.replace(/>/g, '&gt;');
22+
n = n.replace(/'/g, '&quot;');
23+
24+
return n;
25+
}
26+
27+
function diffString( o, n ) {
28+
o = o.replace(/\s+$/, '');
29+
n = n.replace(/\s+$/, '');
30+
31+
var out = diff(o === '' ? [] : o.split(/\s+/), n === '' ? [] : n.split(/\s+/) );
32+
var str = '';
33+
var i;
34+
35+
var oSpace = o.match(/\s+/g);
36+
if (oSpace === null) {
37+
oSpace = ['\n'];
38+
} else {
39+
oSpace.push('\n');
40+
}
41+
var nSpace = n.match(/\s+/g);
42+
if (nSpace === null) {
43+
nSpace = ['\n'];
44+
} else {
45+
nSpace.push('\n');
46+
}
47+
48+
if (out.n.length === 0) {
49+
for (i = 0; i < out.o.length; i++) {
50+
str += '<del>' + escape(out.o[i]) + oSpace[i] + '</del>';
51+
}
52+
} else {
53+
if (out.n[0].text === null) {
54+
for (n = 0; n < out.o.length && out.o[n].text === null; n++) {
55+
str += '<del>' + escape(out.o[n]) + oSpace[n] + '</del>';
56+
}
57+
}
58+
59+
for (i = 0; i < out.n.length; i++ ) {
60+
if (!out.n[i].text) {
61+
str += '<ins>' + escape(out.n[i]) + nSpace[i] + '</ins>';
62+
} else {
63+
var pre = '';
64+
65+
for (n = out.n[i].row + 1; n < out.o.length && !out.o[n].text; n++ ) {
66+
pre += '<del>' + escape(out.o[n]) + oSpace[n] + '</del>';
67+
}
68+
str += ' ' + out.n[i].text + nSpace[i] + pre;
69+
}
70+
}
71+
}
72+
73+
return str;
74+
}
75+
76+
function randomColor() {
77+
return 'rgb(' + (Math.random() * 100) + '%, ' +
78+
(Math.random() * 100) + '%, ' +
79+
(Math.random() * 100) + '%)';
80+
}
81+
82+
function diffString2( o, n ) {
83+
var i;
84+
85+
o = o.replace(/\s+$/, '');
86+
n = n.replace(/\s+$/, '');
87+
88+
var out = diff(o === '' ? [] : o.split(/\s+/), n === '' ? [] : n.split(/\s+/) );
89+
90+
var oSpace = o.match(/\s+/g);
91+
if (!oSpace) {
92+
oSpace = ['\n'];
93+
} else {
94+
oSpace.push('\n');
95+
}
96+
var nSpace = n.match(/\s+/g);
97+
if (!nSpace) {
98+
nSpace = ['\n'];
99+
} else {
100+
nSpace.push('\n');
101+
}
102+
103+
var os = '';
104+
var colors = [];
105+
for (i = 0; i < out.o.length; i++) {
106+
colors[i] = randomColor();
107+
108+
if (out.o[i].text) {
109+
os += '<span style="background-color: ' +colors[i]+ '">' +
110+
escape(out.o[i].text) + oSpace[i] + '</span>';
111+
} else {
112+
os += '<del>' + escape(out.o[i]) + oSpace[i] + '</del>';
113+
}
114+
}
115+
116+
var ns = '';
117+
for (i = 0; i < out.n.length; i++) {
118+
if (out.n[i].text) {
119+
ns += '<span style="background-color: ' +colors[out.n[i].row]+ '">' +
120+
escape(out.n[i].text) + nSpace[i] + '</span>';
121+
} else {
122+
ns += '<ins>' + escape(out.n[i]) + nSpace[i] + '</ins>';
123+
}
124+
}
125+
126+
return { o : os , n : ns };
127+
}
128+
129+
function diff( o, n ) {
130+
var ns = {};
131+
var os = {};
132+
var i;
133+
134+
for (i = 0; i < n.length; i++ ) {
135+
if ( !ns[ n[i] ] ) {
136+
ns[ n[i] ] = { rows: [], o: null };
137+
}
138+
ns[ n[i] ].rows.push( i );
139+
}
140+
141+
for (i = 0; i < o.length; i++ ) {
142+
if ( !os[ o[i] ] ){
143+
os[ o[i] ] = { rows: [], n: null };
144+
}
145+
os[ o[i] ].rows.push( i );
146+
}
147+
148+
for (i in ns ) {
149+
if ( ns[i].rows.length === 1 && typeof(os[i]) !== 'undefined' && os[i].rows.length === 1 ) {
150+
n[ ns[i].rows[0] ] = { text: n[ ns[i].rows[0] ], row: os[i].rows[0] };
151+
o[ os[i].rows[0] ] = { text: o[ os[i].rows[0] ], row: ns[i].rows[0] };
152+
}
153+
}
154+
155+
for (i = 0; i < n.length - 1; i++ ) {
156+
if ( n[i].text !== null && n[i+1].text === null && n[i].row + 1 < o.length && !o[ n[i].row + 1 ].text &&
157+
n[i+1] === o[ n[i].row + 1 ] ) {
158+
n[i+1] = { text: n[i+1], row: n[i].row + 1 };
159+
o[n[i].row+1] = { text: o[n[i].row+1], row: i + 1 };
160+
}
161+
}
162+
163+
for (i = n.length - 1; i > 0; i-- ) {
164+
if ( n[i].text && !n[i-1].text && n[i].row > 0 && !o[ n[i].row - 1 ].text &&
165+
n[i-1] === o[ n[i].row - 1 ] ) {
166+
n[i-1] = { text: n[i-1], row: n[i].row - 1 };
167+
o[n[i].row-1] = { text: o[n[i].row-1], row: i - 1 };
168+
}
169+
}
170+
171+
return { o: o, n: n };
172+
}
173+
174+
// Actual filter
175+
return function(input, match) {
176+
return diffString(input, match);
177+
};
178+
});
179+
180+
/*
181+
* Javascript Diff Algorithm
182+
* By John Resig (http://ejohn.org/)
183+
* Modified by Chu Alan "sprite"
184+
*
185+
* Released under the MIT license.
186+
*
187+
* More Info:
188+
* http://ejohn.org/projects/javascript-diff-algorithm/
189+
*/
190+
191+
function escape(s) {
192+
var n = s;
193+
n = n.replace(/&/g, "&amp;");
194+
n = n.replace(/</g, "&lt;");
195+
n = n.replace(/>/g, "&gt;");
196+
n = n.replace(/"/g, "&quot;");
197+
198+
return n;
199+
}
200+
201+
function diffString( o, n ) {
202+
o = o.replace(/\s+$/, '');
203+
n = n.replace(/\s+$/, '');
204+
205+
var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
206+
var str = "";
207+
208+
var oSpace = o.match(/\s+/g);
209+
if (oSpace == null) {
210+
oSpace = ["\n"];
211+
} else {
212+
oSpace.push("\n");
213+
}
214+
var nSpace = n.match(/\s+/g);
215+
if (nSpace == null) {
216+
nSpace = ["\n"];
217+
} else {
218+
nSpace.push("\n");
219+
}
220+
221+
if (out.n.length == 0) {
222+
for (var i = 0; i < out.o.length; i++) {
223+
str += '<del>' + escape(out.o[i]) + oSpace[i] + "</del>";
224+
}
225+
} else {
226+
if (out.n[0].text == null) {
227+
for (n = 0; n < out.o.length && out.o[n].text == null; n++) {
228+
str += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
229+
}
230+
}
231+
232+
for ( var i = 0; i < out.n.length; i++ ) {
233+
if (out.n[i].text == null) {
234+
str += '<ins>' + escape(out.n[i]) + nSpace[i] + "</ins>";
235+
} else {
236+
var pre = "";
237+
238+
for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++ ) {
239+
pre += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
240+
}
241+
str += " " + out.n[i].text + nSpace[i] + pre;
242+
}
243+
}
244+
}
245+
246+
return str;
247+
}
248+
249+
function randomColor() {
250+
return "rgb(" + (Math.random() * 100) + "%, " +
251+
(Math.random() * 100) + "%, " +
252+
(Math.random() * 100) + "%)";
253+
}
254+
function diffString2( o, n ) {
255+
o = o.replace(/\s+$/, '');
256+
n = n.replace(/\s+$/, '');
257+
258+
var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
259+
260+
var oSpace = o.match(/\s+/g);
261+
if (oSpace == null) {
262+
oSpace = ["\n"];
263+
} else {
264+
oSpace.push("\n");
265+
}
266+
var nSpace = n.match(/\s+/g);
267+
if (nSpace == null) {
268+
nSpace = ["\n"];
269+
} else {
270+
nSpace.push("\n");
271+
}
272+
273+
var os = "";
274+
var colors = new Array();
275+
for (var i = 0; i < out.o.length; i++) {
276+
colors[i] = randomColor();
277+
278+
if (out.o[i].text != null) {
279+
os += '<span style="background-color: ' +colors[i]+ '">' +
280+
escape(out.o[i].text) + oSpace[i] + "</span>";
281+
} else {
282+
os += "<del>" + escape(out.o[i]) + oSpace[i] + "</del>";
283+
}
284+
}
285+
286+
var ns = "";
287+
for (var i = 0; i < out.n.length; i++) {
288+
if (out.n[i].text != null) {
289+
ns += '<span style="background-color: ' +colors[out.n[i].row]+ '">' +
290+
escape(out.n[i].text) + nSpace[i] + "</span>";
291+
} else {
292+
ns += "<ins>" + escape(out.n[i]) + nSpace[i] + "</ins>";
293+
}
294+
}
295+
296+
return { o : os , n : ns };
297+
}
298+
299+
function diff( o, n ) {
300+
var ns = new Object();
301+
var os = new Object();
302+
303+
for ( var i = 0; i < n.length; i++ ) {
304+
if ( ns[ n[i] ] == null )
305+
ns[ n[i] ] = { rows: new Array(), o: null };
306+
ns[ n[i] ].rows.push( i );
307+
}
308+
309+
for ( var i = 0; i < o.length; i++ ) {
310+
if ( os[ o[i] ] == null )
311+
os[ o[i] ] = { rows: new Array(), n: null };
312+
os[ o[i] ].rows.push( i );
313+
}
314+
315+
for ( var i in ns ) {
316+
if ( ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1 ) {
317+
n[ ns[i].rows[0] ] = { text: n[ ns[i].rows[0] ], row: os[i].rows[0] };
318+
o[ os[i].rows[0] ] = { text: o[ os[i].rows[0] ], row: ns[i].rows[0] };
319+
}
320+
}
321+
322+
for ( var i = 0; i < n.length - 1; i++ ) {
323+
if ( n[i].text != null && n[i+1].text == null && n[i].row + 1 < o.length && o[ n[i].row + 1 ].text == null &&
324+
n[i+1] == o[ n[i].row + 1 ] ) {
325+
n[i+1] = { text: n[i+1], row: n[i].row + 1 };
326+
o[n[i].row+1] = { text: o[n[i].row+1], row: i + 1 };
327+
}
328+
}
329+
330+
for ( var i = n.length - 1; i > 0; i-- ) {
331+
if ( n[i].text != null && n[i-1].text == null && n[i].row > 0 && o[ n[i].row - 1 ].text == null &&
332+
n[i-1] == o[ n[i].row - 1 ] ) {
333+
n[i-1] = { text: n[i-1], row: n[i].row - 1 };
334+
o[n[i].row-1] = { text: o[n[i].row-1], row: i - 1 };
335+
}
336+
}
337+
338+
return { o: o, n: n };
339+
}

‎angular-diff.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)