Merge pull request #41 from shiv15/master

added showContext option

Author: AXeL-dev

README.md

@@ -80,6 +80,7 @@ npm install --save ngx-diff2html
 | filename             | string            | Optional, default: '' (empty)        | Can be used to display a filename at the top of diff results
 | format               | `DiffFormat`      | Optional, default: `side-by-side`    | Possible values:<br> - `side-by-side`<br> - `line-by-line`
 | style                | `DiffStyle`       | Optional, default: `word`            | Possible values:<br> - `word`<br> - `char`
+| showContext          | boolean           | Optional, default: `false`            | Enable to show context lines   
 
 ### Outputs
 

projects/demo/src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-//import { DiffStyle, DiffFormat } from 'ngx-diff2html';
 import { DiffStyle, DiffFormat } from 'projects/ngx-diff2html/src/public-api';
 
 @Component({

projects/ngx-diff2html/src/lib/ngx-diff2html.component.ts

@@ -16,6 +16,7 @@ export class NgxDiff2htmlComponent implements OnInit, OnChanges {
   @Input() private filename: string = '';
   @Input() private format: DiffFormat = 'line-by-line';
   @Input() private style: DiffStyle = 'word';
+  @Input() private showContext: boolean = false;
   @Output() diffChange: EventEmitter<string> = new EventEmitter();
   private diff: string = null;
   diffHTML: string = null;
@@ -27,7 +28,6 @@ export class NgxDiff2htmlComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    //console.log(changes);
     if (this.propHasChanged(changes.left) || this.propHasChanged(changes.right)) {
       this.getDiff();
     } else if (this.propHasChanged(changes.style) || this.propHasChanged(changes.format)) {
@@ -40,7 +40,7 @@ export class NgxDiff2htmlComponent implements OnInit, OnChanges {
   }
 
   getDiff() {
-    this.diff = this.diffService.getDiff(this.left, this.right, this.filename);
+    this.diff = this.diffService.getDiff(this.left, this.right, this.filename, this.showContext);
     this.refreshDiffHTML();
     this.diffChange.emit(this.diff);
   }

projects/ngx-diff2html/src/lib/ngx-diff2html.service.ts

@@ -10,7 +10,7 @@ export class NgxDiff2htmlService {
 
   constructor() { }
 
-  getDiff(text1: string, text2: string, filename: string = '') {
+  getDiff(text1: string, text2: string, filename: string = '', showContext: boolean) {
     // Get diff
     const dmp = new diff_match_patch();
     const chars = dmp.diff_linesToChars_(text1, text2);
@@ -20,8 +20,12 @@ export class NgxDiff2htmlService {
     const diffs = dmp.diff_main(lineText1, lineText2, false);
     dmp.diff_charsToLines_(diffs, lineArray);
     const patchMake = dmp.patch_make(text1, diffs);
+
+    // Keep the context lines if showContext is set true.
+    if (showContext) {
+      patchMake[0].diffs = diffs;
+    }
     const patchToText = dmp.patch_toText(patchMake);
-    // console.info(patchToText);
 
     // Make it look more like a unified diff style
     // ToDo: find a non tricky way to do this
@@ -34,12 +38,9 @@ export class NgxDiff2htmlService {
       }
     });
     const unifiedDiff = lines.join("\n");
-    // console.info(unifiedDiff);
 
     const strInput = "--- " + filename + " \n+++ " + filename + " \n" + unifiedDiff;
     const diff = decodeURIComponent(strInput);
-    // console.info(diff);
-
     // Return diff
     return diff;
   }