diff --git a/README.md b/README.md index d1718e7..aeb6289 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,52 @@ angular-diff ============ Diff filter for angular.js. Show inline text diff in your page + +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/) + +Install +------- + +To use angular-diff you have to: + +1. install angular-diff with bower: + + ```bower install angular-diff``` + +2. In your ```index.html```, include the angular-diff file + + + +In your module declaration you have to include the diff module + + var module = angular.module('yourModule', [ + ... + 'diff', + ]); + +USAGE +----- + +It's a filter, you use it in your html like this: + + ```{{text|diff:otherText}}``` + + This will show the diff between ```text``` and ```otherText``` + + +DEVELOPMENT +----------- + +Remember to install all dependencies: + + $ npm install -g gulp // It's like grunt but cooler + $ npm install + $ bower install + +To launch tests simply run + + gulp karma + +To build and minify simply run + + gulp build diff --git a/angular-diff.js b/angular-diff.js new file mode 100755 index 0000000..8b9799e --- /dev/null +++ b/angular-diff.js @@ -0,0 +1,339 @@ +'use strict'; + +angular.module('diff', []) + .filter('diff', function () { + + /* + * Javascript Diff Algorithm + * By John Resig (http://ejohn.org/) + * Modified by Chu Alan 'sprite' + * + * Released under the MIT license. + * + * More Info: + * http://ejohn.org/projects/javascript-diff-algorithm/ + */ + + function escape(s) { + var n = s; + n = n.replace(/&/g, '&'); + n = n.replace(//g, '>'); + n = n.replace(/'/g, '"'); + + return n; + } + + function diffString( o, n ) { + o = o.replace(/\s+$/, ''); + n = n.replace(/\s+$/, ''); + + var out = diff(o === '' ? [] : o.split(/\s+/), n === '' ? [] : n.split(/\s+/) ); + var str = ''; + var i; + + var oSpace = o.match(/\s+/g); + if (oSpace === null) { + oSpace = ['\n']; + } else { + oSpace.push('\n'); + } + var nSpace = n.match(/\s+/g); + if (nSpace === null) { + nSpace = ['\n']; + } else { + nSpace.push('\n'); + } + + if (out.n.length === 0) { + for (i = 0; i < out.o.length; i++) { + str += '' + escape(out.o[i]) + oSpace[i] + ''; + } + } else { + if (out.n[0].text === null) { + for (n = 0; n < out.o.length && out.o[n].text === null; n++) { + str += '' + escape(out.o[n]) + oSpace[n] + ''; + } + } + + for (i = 0; i < out.n.length; i++ ) { + if (!out.n[i].text) { + str += '' + escape(out.n[i]) + nSpace[i] + ''; + } else { + var pre = ''; + + for (n = out.n[i].row + 1; n < out.o.length && !out.o[n].text; n++ ) { + pre += '' + escape(out.o[n]) + oSpace[n] + ''; + } + str += ' ' + out.n[i].text + nSpace[i] + pre; + } + } + } + + return str; + } + + function randomColor() { + return 'rgb(' + (Math.random() * 100) + '%, ' + + (Math.random() * 100) + '%, ' + + (Math.random() * 100) + '%)'; + } + + function diffString2( o, n ) { + var i; + + o = o.replace(/\s+$/, ''); + n = n.replace(/\s+$/, ''); + + var out = diff(o === '' ? [] : o.split(/\s+/), n === '' ? [] : n.split(/\s+/) ); + + var oSpace = o.match(/\s+/g); + if (!oSpace) { + oSpace = ['\n']; + } else { + oSpace.push('\n'); + } + var nSpace = n.match(/\s+/g); + if (!nSpace) { + nSpace = ['\n']; + } else { + nSpace.push('\n'); + } + + var os = ''; + var colors = []; + for (i = 0; i < out.o.length; i++) { + colors[i] = randomColor(); + + if (out.o[i].text) { + os += '' + + escape(out.o[i].text) + oSpace[i] + ''; + } else { + os += '' + escape(out.o[i]) + oSpace[i] + ''; + } + } + + var ns = ''; + for (i = 0; i < out.n.length; i++) { + if (out.n[i].text) { + ns += '' + + escape(out.n[i].text) + nSpace[i] + ''; + } else { + ns += '' + escape(out.n[i]) + nSpace[i] + ''; + } + } + + return { o : os , n : ns }; + } + + function diff( o, n ) { + var ns = {}; + var os = {}; + var i; + + for (i = 0; i < n.length; i++ ) { + if ( !ns[ n[i] ] ) { + ns[ n[i] ] = { rows: [], o: null }; + } + ns[ n[i] ].rows.push( i ); + } + + for (i = 0; i < o.length; i++ ) { + if ( !os[ o[i] ] ){ + os[ o[i] ] = { rows: [], n: null }; + } + os[ o[i] ].rows.push( i ); + } + + for (i in ns ) { + if ( ns[i].rows.length === 1 && typeof(os[i]) !== 'undefined' && os[i].rows.length === 1 ) { + n[ ns[i].rows[0] ] = { text: n[ ns[i].rows[0] ], row: os[i].rows[0] }; + o[ os[i].rows[0] ] = { text: o[ os[i].rows[0] ], row: ns[i].rows[0] }; + } + } + + for (i = 0; i < n.length - 1; i++ ) { + if ( n[i].text !== null && n[i+1].text === null && n[i].row + 1 < o.length && !o[ n[i].row + 1 ].text && + n[i+1] === o[ n[i].row + 1 ] ) { + n[i+1] = { text: n[i+1], row: n[i].row + 1 }; + o[n[i].row+1] = { text: o[n[i].row+1], row: i + 1 }; + } + } + + for (i = n.length - 1; i > 0; i-- ) { + if ( n[i].text && !n[i-1].text && n[i].row > 0 && !o[ n[i].row - 1 ].text && + n[i-1] === o[ n[i].row - 1 ] ) { + n[i-1] = { text: n[i-1], row: n[i].row - 1 }; + o[n[i].row-1] = { text: o[n[i].row-1], row: i - 1 }; + } + } + + return { o: o, n: n }; + } + + // Actual filter + return function(input, match) { + return diffString(input, match); + }; +}); + +/* + * Javascript Diff Algorithm + * By John Resig (http://ejohn.org/) + * Modified by Chu Alan "sprite" + * + * Released under the MIT license. + * + * More Info: + * http://ejohn.org/projects/javascript-diff-algorithm/ + */ + +function escape(s) { + var n = s; + n = n.replace(/&/g, "&"); + n = n.replace(//g, ">"); + n = n.replace(/"/g, """); + + return n; +} + +function diffString( o, n ) { + o = o.replace(/\s+$/, ''); + n = n.replace(/\s+$/, ''); + + var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) ); + var str = ""; + + var oSpace = o.match(/\s+/g); + if (oSpace == null) { + oSpace = ["\n"]; + } else { + oSpace.push("\n"); + } + var nSpace = n.match(/\s+/g); + if (nSpace == null) { + nSpace = ["\n"]; + } else { + nSpace.push("\n"); + } + + if (out.n.length == 0) { + for (var i = 0; i < out.o.length; i++) { + str += '' + escape(out.o[i]) + oSpace[i] + ""; + } + } else { + if (out.n[0].text == null) { + for (n = 0; n < out.o.length && out.o[n].text == null; n++) { + str += '' + escape(out.o[n]) + oSpace[n] + ""; + } + } + + for ( var i = 0; i < out.n.length; i++ ) { + if (out.n[i].text == null) { + str += '' + escape(out.n[i]) + nSpace[i] + ""; + } else { + var pre = ""; + + for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++ ) { + pre += '' + escape(out.o[n]) + oSpace[n] + ""; + } + str += " " + out.n[i].text + nSpace[i] + pre; + } + } + } + + return str; +} + +function randomColor() { + return "rgb(" + (Math.random() * 100) + "%, " + + (Math.random() * 100) + "%, " + + (Math.random() * 100) + "%)"; +} +function diffString2( o, n ) { + o = o.replace(/\s+$/, ''); + n = n.replace(/\s+$/, ''); + + var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) ); + + var oSpace = o.match(/\s+/g); + if (oSpace == null) { + oSpace = ["\n"]; + } else { + oSpace.push("\n"); + } + var nSpace = n.match(/\s+/g); + if (nSpace == null) { + nSpace = ["\n"]; + } else { + nSpace.push("\n"); + } + + var os = ""; + var colors = new Array(); + for (var i = 0; i < out.o.length; i++) { + colors[i] = randomColor(); + + if (out.o[i].text != null) { + os += '' + + escape(out.o[i].text) + oSpace[i] + ""; + } else { + os += "" + escape(out.o[i]) + oSpace[i] + ""; + } + } + + var ns = ""; + for (var i = 0; i < out.n.length; i++) { + if (out.n[i].text != null) { + ns += '' + + escape(out.n[i].text) + nSpace[i] + ""; + } else { + ns += "" + escape(out.n[i]) + nSpace[i] + ""; + } + } + + return { o : os , n : ns }; +} + +function diff( o, n ) { + var ns = new Object(); + var os = new Object(); + + for ( var i = 0; i < n.length; i++ ) { + if ( ns[ n[i] ] == null ) + ns[ n[i] ] = { rows: new Array(), o: null }; + ns[ n[i] ].rows.push( i ); + } + + for ( var i = 0; i < o.length; i++ ) { + if ( os[ o[i] ] == null ) + os[ o[i] ] = { rows: new Array(), n: null }; + os[ o[i] ].rows.push( i ); + } + + for ( var i in ns ) { + if ( ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1 ) { + n[ ns[i].rows[0] ] = { text: n[ ns[i].rows[0] ], row: os[i].rows[0] }; + o[ os[i].rows[0] ] = { text: o[ os[i].rows[0] ], row: ns[i].rows[0] }; + } + } + + for ( var i = 0; i < n.length - 1; i++ ) { + if ( n[i].text != null && n[i+1].text == null && n[i].row + 1 < o.length && o[ n[i].row + 1 ].text == null && + n[i+1] == o[ n[i].row + 1 ] ) { + n[i+1] = { text: n[i+1], row: n[i].row + 1 }; + o[n[i].row+1] = { text: o[n[i].row+1], row: i + 1 }; + } + } + + for ( var i = n.length - 1; i > 0; i-- ) { + if ( n[i].text != null && n[i-1].text == null && n[i].row > 0 && o[ n[i].row - 1 ].text == null && + n[i-1] == o[ n[i].row - 1 ] ) { + n[i-1] = { text: n[i-1], row: n[i].row - 1 }; + o[n[i].row-1] = { text: o[n[i].row-1], row: i - 1 }; + } + } + + return { o: o, n: n }; +} diff --git a/angular-diff.min.js b/angular-diff.min.js new file mode 100755 index 0000000..d173a63 --- /dev/null +++ b/angular-diff.min.js @@ -0,0 +1,2 @@ +"use strict";angular.module("diff",[]).filter("diff",function(){function t(t){var r=t;return r=r.replace(/&/g,"&"),r=r.replace(//g,">"),r=r.replace(/'/g,""")}function r(r,o){r=r.replace(/\s+$/,""),o=o.replace(/\s+$/,"");var n,l=e(""===r?[]:r.split(/\s+/),""===o?[]:o.split(/\s+/)),w="",s=r.match(/\s+/g);null===s?s=["\n"]:s.push("\n");var u=o.match(/\s+/g);if(null===u?u=["\n"]:u.push("\n"),0===l.n.length)for(n=0;n"+t(l.o[n])+s[n]+"";else{if(null===l.n[0].text)for(o=0;o"+t(l.o[o])+s[o]+"";for(n=0;n"+t(l.o[o])+s[o]+"";w+=" "+l.n[n].text+u[n]+f}else w+=""+t(l.n[n])+u[n]+""}return w}function e(t,r){var e,o={},n={};for(e=0;e0;e--)r[e].text&&!r[e-1].text&&r[e].row>0&&!t[r[e].row-1].text&&r[e-1]===t[r[e].row-1]&&(r[e-1]={text:r[e-1],row:r[e].row-1},t[r[e].row-1]={text:t[r[e].row-1],row:e-1});return{o:t,n:r}}return function(t,e){return r(t,e)}}); +function escape(e){var n=e;return n=n.replace(/&/g,"&"),n=n.replace(//g,">"),n=n.replace(/"/g,""")}function diffString(e,n){e=e.replace(/\s+$/,""),n=n.replace(/\s+$/,"");var r=diff(""==e?[]:e.split(/\s+/),""==n?[]:n.split(/\s+/)),t="",l=e.match(/\s+/g);null==l?l=["\n"]:l.push("\n");var o=n.match(/\s+/g);if(null==o?o=["\n"]:o.push("\n"),0==r.n.length)for(var s=0;s"+escape(r.o[s])+l[s]+"";else{if(null==r.n[0].text)for(n=0;n"+escape(r.o[n])+l[n]+"";for(var s=0;s"+escape(r.n[s])+o[s]+"";else{var a="";for(n=r.n[s].row+1;n"+escape(r.o[n])+l[n]+"";t+=" "+r.n[s].text+o[s]+a}}return t}function randomColor(){return"rgb("+100*Math.random()+"%, "+100*Math.random()+"%, "+100*Math.random()+"%)"}function diffString2(e,n){e=e.replace(/\s+$/,""),n=n.replace(/\s+$/,"");var r=diff(""==e?[]:e.split(/\s+/),""==n?[]:n.split(/\s+/)),t=e.match(/\s+/g);null==t?t=["\n"]:t.push("\n");var l=n.match(/\s+/g);null==l?l=["\n"]:l.push("\n");for(var o="",s=new Array,a=0;a'+escape(r.o[a].text)+t[a]+"":""+escape(r.o[a])+t[a]+"";for(var u="",a=0;a'+escape(r.n[a].text)+l[a]+"":""+escape(r.n[a])+l[a]+"";return{o:o,n:u}}function diff(e,n){for(var r=new Object,t=new Object,l=0;l0;l--)null!=n[l].text&&null==n[l-1].text&&n[l].row>0&&null==e[n[l].row-1].text&&n[l-1]==e[n[l].row-1]&&(n[l-1]={text:n[l-1],row:n[l].row-1},e[n[l].row-1]={text:e[n[l].row-1],row:l-1});return{o:e,n:n}} \ No newline at end of file