Merge pull request #83 from mrfyda/sync-horizontal-scroll

Add synchronised horizontal scroll

README.md

@@ -70,6 +70,7 @@ The HTML output accepts a Javascript object with configuration. Possible options
   - `outputFormat`: the format of the output data: `'line-by-line'` or `'side-by-side'`, default is `'line-by-line'`
   - `showFiles`: show a file list before the diff: `true` or `false`, default is `false`
   - `matching`: matching level: `'lines'` for matching lines, `'words'` for matching lines and words or `'none'`, default is `none`
+  - `synchronisedScroll`: scroll both panes in side-by-side mode: `true` or `false`, default is `false`
   - `matchWordsThreshold`: similarity threshold for word matching, default is 0.25
   - `matchingMaxComparisons`: perform at most this much comparisons for line matching a block of changes, default is `2500`
 

bower.json

@@ -28,9 +28,7 @@
     "url": "git://github.com/rtfpessoa/diff2html.git"
   },
   "main": [
-    "./dist/diff2html-templates.js",
     "./dist/diff2html.js",
-    "./dist/diff2html-ui.js",
     "./dist/diff2html.css"
   ],
   "license": "MIT",

sample/index.html

@@ -267,7 +267,8 @@
         inputFormat: 'json',
         showFiles: true,
         matching: 'lines',
-        outputFormat: 'side-by-side'
+        outputFormat: 'side-by-side',
+        synchronisedScroll: true
       });
       diff2htmlUi.fileListCloseable('#side-by-side', false);
       diff2htmlUi.highlightCode('#side-by-side');

src/ui/js/diff2html-ui.js

@@ -34,8 +34,22 @@
     var cfg = config || {};
     var $target = this._getTarget(targetId);
     $target.html(Diff2Html.getPrettyHtml(diffJson, cfg));
+
+    synchronisedScroll($target, config);
   };
 
+  function synchronisedScroll($target, config) {
+    if (config.synchronisedScroll) {
+
+      $target.find(".d2h-file-side-diff").scroll(function() {
+        var $this = $(this);
+        $this.closest(".d2h-file-wrapper").find(".d2h-file-side-diff")
+          .scrollLeft($this.scrollLeft());
+      });
+
+    }
+  }
+
   Diff2HtmlUI.prototype.fileListCloseable = function(targetId, startVisible) {
     var $target = this._getTarget(targetId);