Fix file summary switch

Introduce diff2html-ui to perform any ui anymations or dynamic changes
like hightlight or animations.

README.md

@@ -68,6 +68,37 @@ The HTML output accepts a Javascript object with configuration. Possible options
   - `matching`: matching level: `'lines'` for matching lines, `'words'` for matching lines and words or `'none'`, default is `none`
   - `matchWordsThreshold`: similarity threshold for word matching, default is 0.25
 
+## Diff2HtmlUI Helper
+
+> Simple wrapper to ease simple tasks in the browser such as: code highlight and js effects
+
+### How to use
+
+> Init
+
+```js
+var diff2htmlUi = new Diff2HtmlUI({diff: diffString});
+// or
+var diff2htmlUi = new Diff2HtmlUI({json: diffJson});
+```
+
+> Draw
+
+```js
+diff2htmlUi.draw('html-target-elem', {inputFormat: 'json', showFiles: true, matching: 'lines'});
+```
+
+> Highlight Code
+
+```js
+diff2htmlUi.highlightCode('html-target-elem');
+```
+
+> Collapse File Summary List
+
+```js
+diff2htmlUi.fileListCloseable('html-target-elem', false);
+```
 
 ## Syntax Highlight
 
@@ -77,42 +108,42 @@ If your favourite language is not included in the default package also add its j
 
 ```html
 <!-- Stylesheet -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/github.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
 
 <!-- Javascripts -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/languages/scala.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/languages/scala.min.js"></script>
+<script type="text/javascript" src="dist/diff2html-ui.js"></script>
 ```
 
-> Invoke the highlightjs plugin
+> Invoke the Diff2HtmlUI helper
 
 ```js
-document.addEventListener("DOMContentLoaded", function () {
+$(document).ready(function() {
-    // parse the diff to json
+    var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
-    var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample);
+    diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
+    diff2htmlUi.highlightCode('#line-by-line');
+});
+```
 
-    // collect all the file extensions in the json
+## Collapsable File Summary List
-    var allFileLanguages = diffJson.map(function (line) {
-        return line.language;
-    });
 
-    // remove duplicated languages
+> Add the dependencies.
-    var distinctLanguages = allFileLanguages.filter(function (v, i) {
-        return allFileLanguages.indexOf(v) == i;
-    });
 
-    // pass the languages to the highlightjs plugin
+```html
-    hljs.configure({languages: distinctLanguages});
+<!-- Javascripts -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+<script type="text/javascript" src="dist/diff2html-ui.js"></script>
+```
 
-    // generate and inject the diff HTML into the desired place
+> Invoke the Diff2HtmlUI helper
-    document.getElementById("line-by-line").innerHTML = Diff2Html.getPrettyHtml(diffJson, { inputFormat: 'json' });
-    document.getElementById("side-by-side").innerHTML = Diff2Html.getPrettyHtml(diffJson, { inputFormat: 'json', outputFormat: 'side-by-side' });
 
-    // collect all the code lines and execute the highlight on them
+```js
-    var codeLines = document.getElementsByClassName("d2h-code-line-ctn");
+$(document).ready(function() {
-    [].forEach.call(codeLines, function (line) {
+    var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
-        hljs.highlightBlock(line);
+    diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
-    });
+    diff2htmlUi.fileListCloseable('#line-by-line', false);
 });
 ```
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "diff2html",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "homepage": "http://rtfpessoa.github.io/diff2html/",
   "description": "Fast Diff to colorized HTML",
   "keywords": [
@@ -29,6 +29,7 @@
   },
   "main": [
     "./dist/diff2html.js",
+    "./dist/diff2html-ui.js",
     "./dist/diff2html.css"
   ],
   "license": "MIT",

dist/diff2html-ui.js

@@ -0,0 +1,150 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports) {
+
+	/* WEBPACK VAR INJECTION */(function(global) {/*
+	 *
+	 * Diff to HTML (diff2html-ui.js)
+	 * Author: rtfpessoa
+	 *
+	 * Depends on: [ jQuery ]
+	 * Optional dependencies on: [ highlight.js ]
+	 *
+	 */
+
+	/*global $, hljs*/
+
+	(function() {
+
+	  var diffJson = null;
+	  var defaultTarget = "body";
+
+	  function Diff2HtmlUI(config) {
+	    var cfg = config || {};
+
+	    if (cfg.diff) {
+	      diffJson = Diff2Html.getJsonFromDiff(cfg.diff);
+	    } else if (cfg.json) {
+	      diffJson = cfg.json;
+	    }
+	  }
+
+	  Diff2HtmlUI.prototype.draw = function(targetId, config) {
+	    var cfg = config || {};
+	    var $target = this._getTarget(targetId);
+	    $target.html(Diff2Html.getPrettyHtml(diffJson, cfg));
+	  };
+
+	  Diff2HtmlUI.prototype.fileListCloseable = function(targetId, startVisible) {
+	    var $target = this._getTarget(targetId);
+
+	    var $showBtn = $target.find(".d2h-show");
+	    var $hideBtn = $target.find(".d2h-hide");
+	    var $fileList = $target.find(".d2h-file-list");
+
+	    if (startVisible) show(); else hide();
+
+	    $showBtn.click(show);
+	    $hideBtn.click(hide);
+
+	    function show() {
+	      $showBtn.hide();
+	      $hideBtn.show();
+	      $fileList.show();
+	    }
+
+	    function hide() {
+	      $hideBtn.hide();
+	      $showBtn.show();
+	      $fileList.hide();
+	    }
+	  };
+
+	  Diff2HtmlUI.prototype.highlightCode = function(targetId) {
+	    var that = this;
+
+	    // collect all the file extensions in the json
+	    var allFileLanguages = diffJson.map(function(line) {
+	      return line.language;
+	    });
+
+	    // remove duplicated languages
+	    var distinctLanguages = allFileLanguages.filter(function(v, i) {
+	      return allFileLanguages.indexOf(v) === i;
+	    });
+
+	    // pass the languages to the highlightjs plugin
+	    hljs.configure({languages: distinctLanguages});
+
+	    // collect all the code lines and execute the highlight on them
+	    var $target = that._getTarget(targetId);
+	    var $codeLines = $target.find(".d2h-code-line-ctn");
+	    $codeLines.map(function(i, line) {
+	      hljs.highlightBlock(line);
+	    });
+	  };
+
+	  Diff2HtmlUI.prototype._getTarget = function(targetId) {
+	    var $target;
+	    if (targetId) {
+	      $target = $(targetId);
+	    } else {
+	      $target = $(defaultTarget);
+	    }
+
+	    return $target;
+	  };
+
+	  module.exports.Diff2HtmlUI = Diff2HtmlUI;
+
+	  // Expose diff2html in the browser
+	  global.Diff2HtmlUI = Diff2HtmlUI;
+
+	})();
+
+	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
+
+/***/ }
+/******/ ]);

dist/diff2html-ui.min.js

@@ -0,0 +1 @@
+!function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:!1};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.p="",__webpack_require__(0)}([function(module,exports){(function(global){!function(){function Diff2HtmlUI(config){var cfg=config||{};cfg.diff?diffJson=Diff2Html.getJsonFromDiff(cfg.diff):cfg.json&&(diffJson=cfg.json)}var diffJson=null,defaultTarget="body";Diff2HtmlUI.prototype.draw=function(targetId,config){var cfg=config||{},$target=this._getTarget(targetId);$target.html(Diff2Html.getPrettyHtml(diffJson,cfg))},Diff2HtmlUI.prototype.fileListCloseable=function(targetId,startVisible){function show(){$showBtn.hide(),$hideBtn.show(),$fileList.show()}function hide(){$hideBtn.hide(),$showBtn.show(),$fileList.hide()}var $target=this._getTarget(targetId),$showBtn=$target.find(".d2h-show"),$hideBtn=$target.find(".d2h-hide"),$fileList=$target.find(".d2h-file-list");startVisible?show():hide(),$showBtn.click(show),$hideBtn.click(hide)},Diff2HtmlUI.prototype.highlightCode=function(targetId){var that=this,allFileLanguages=diffJson.map(function(line){return line.language}),distinctLanguages=allFileLanguages.filter(function(v,i){return allFileLanguages.indexOf(v)===i});hljs.configure({languages:distinctLanguages});var $target=that._getTarget(targetId),$codeLines=$target.find(".d2h-code-line-ctn");$codeLines.map(function(i,line){hljs.highlightBlock(line)})},Diff2HtmlUI.prototype._getTarget=function(targetId){var $target;return $target=$(targetId?targetId:defaultTarget)},module.exports.Diff2HtmlUI=Diff2HtmlUI,global.Diff2HtmlUI=Diff2HtmlUI}()}).call(exports,function(){return this}())}]);

dist/diff2html.css

@@ -245,7 +245,7 @@
 }
 
 .d2h-file-list {
-    display: none;
+    display: block;
 }
 
 .d2h-clear {
@@ -269,24 +269,10 @@ ins.d2h-change, del.d2h-change {
     background-color: #ded;
 }
 
-/* CSS only show/hide */
+.d2h-file-switch {
-.d2h-show {
     display: none;
     float: left;
-}
+    font-size: 10px;
-
+    cursor: pointer;
-.d2h-hide {
+    margin-top: 3px;
-    float: left;
-}
-
-.d2h-hide:target + .d2h-show {
-    display: inline;
-}
-
-.d2h-hide:target {
-    display: none;
-}
-
-.d2h-hide:target ~ .d2h-file-list {
-    display: block;
 }

dist/diff2html.js

@@ -285,7 +285,9 @@
 	      }
 	    };
 
-	    var diffLines = diffInput.split('\n');
+	    var diffLines =
+	      diffInput.replace(/\\ No newline at end of file/g, '')
+	        .split('\n');
 
 	    /* Diff */
 	    var oldMode = /^old mode (\d{6})/;
@@ -415,10 +417,6 @@
 	      .replace(/\t/g, '    ');
 	  };
 
-	  Utils.prototype.getRandomId = function(prefix) {
-	    return prefix + '-' + Math.random().toString(36).slice(-3);
-	  };
-
 	  Utils.prototype.startsWith = function(str, start) {
 	    if (typeof start === 'object') {
 	      var result = false;
@@ -457,18 +455,15 @@
 	(function() {
 
 	  var printerUtils = __webpack_require__(4).PrinterUtils;
-	  var utils = __webpack_require__(2).Utils;
 
 	  function FileListPrinter() {
 	  }
 
 	  FileListPrinter.prototype.generateFileList = function(diffFiles) {
-	    var hideId = utils.getRandomId('d2h-hide'); //necessary if there are 2 elements like this in the same page
-	    var showId = utils.getRandomId('d2h-show');
 	    return '<div class="d2h-file-list-wrapper">\n' +
 	      '     <div class="d2h-file-list-header">Files changed (' + diffFiles.length + ')&nbsp&nbsp</div>\n' +
-	      '     <a id="' + hideId + '" class="d2h-hide" href="#' + hideId + '">+</a>\n' +
+	      '     <a class="d2h-file-switch d2h-hide">hide</a>\n' +
-	      '     <a id="' + showId + 'd2h-show" class="d2h-show" href="#' + showId + '">-</a>\n' +
+	      '     <a class="d2h-file-switch d2h-show">show</a>\n' +
 	      '     <div class="d2h-clear"></div>\n' +
 	      '     <table class="d2h-file-list">\n' +
 
@@ -481,7 +476,8 @@
 	          '       <td class="d2h-lines-deleted">\n' +
 	          '         <span>-' + file.deletedLines + '</span>\n' +
 	          '       </td>\n' +
-	          '       <td class="d2h-file-name"><a href="#' + printerUtils.getHtmlId(file) + '">&nbsp;' + printerUtils.getDiffName(file) + '</a></td>\n' +
+	          '       <td class="d2h-file-name"><a href="#' + printerUtils.getHtmlId(file) + '">' +
+	          '&nbsp;' + printerUtils.getDiffName(file) + '</a></td>\n' +
 	          '     </tr>\n';
 	      }).join('\n') +
 	      '</table></div>\n';
@@ -517,7 +513,9 @@
 	      var i, chr, len;
 	      var hash = 0;
 
-	      if (text.length === 0) return hash;
+	      if (text.length === 0) {
+	        return hash;
+	      }
 
 	      for (i = 0, len = text.length; i < len; i++) {
 	        chr = text.charCodeAt(i);
@@ -573,7 +571,7 @@
 	    if (!config.charByChar && config.matching === 'words') {
 	      var treshold = 0.25;
 
-	      if (typeof(config.matchWordsThreshold) !== 'undefined') {
+	      if (typeof (config.matchWordsThreshold) !== 'undefined') {
 	        treshold = config.matchWordsThreshold;
 	      }
 
@@ -1914,23 +1912,33 @@
 
 	  /*
 	   Copyright (c) 2011 Andrei Mackenzie
-	   Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+	   Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+	   documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+	   the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+	   and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 	   The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-	   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+	   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+	   THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+	   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+	   TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 	   */
 	  function levenshtein(a, b) {
-	    if (a.length == 0) return b.length;
+	    if (a.length == 0) {
-	    if (b.length == 0) return a.length;
+	      return b.length;
+	    }
+	    if (b.length == 0) {
+	      return a.length;
+	    }
 
 	    var matrix = [];
 
-	    // increment along the first column of each row
+	    // Increment along the first column of each row
 	    var i;
 	    for (i = 0; i <= b.length; i++) {
 	      matrix[i] = [i];
 	    }
 
-	    // increment each column in the first row
+	    // Increment each column in the first row
 	    var j;
 	    for (j = 0; j <= a.length; j++) {
 	      matrix[0][j] = j;
@@ -1942,9 +1950,9 @@
 	        if (b.charAt(i - 1) == a.charAt(j - 1)) {
 	          matrix[i][j] = matrix[i - 1][j - 1];
 	        } else {
-	          matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, // substitution
+	          matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, // Substitution
-	            Math.min(matrix[i][j - 1] + 1, // insertion
+	            Math.min(matrix[i][j - 1] + 1, // Insertion
-	              matrix[i - 1][j] + 1)); // deletion
+	              matrix[i - 1][j] + 1)); // Deletion
 	        }
 	      }
 	    }
@@ -1994,7 +2002,7 @@
 	    }
 
 	    function group(a, b, level, cache) {
-	      if (typeof(cache) === "undefined") {
+	      if (typeof (cache) === "undefined") {
 	        cache = {};
 	      }
 
@@ -2008,14 +2016,14 @@
 	        return [[a, b]];
 	      }
 
-	      var a1 = a.slice(0, bm.indexA),
+	      var a1 = a.slice(0, bm.indexA);
-	        b1 = b.slice(0, bm.indexB),
+	      var b1 = b.slice(0, bm.indexB);
-	        aMatch = [a[bm.indexA]],
+	      var aMatch = [a[bm.indexA]];
-	        bMatch = [b[bm.indexB]],
+	      var bMatch = [b[bm.indexB]];
-	        tailA = bm.indexA + 1,
+	      var tailA = bm.indexA + 1;
-	        tailB = bm.indexB + 1,
+	      var tailB = bm.indexB + 1;
-	        a2 = a.slice(tailA),
+	      var a2 = a.slice(tailA);
-	        b2 = b.slice(tailB);
+	      var b2 = b.slice(tailB);
 
 	      var group1 = group(a1, b1, level + 1, cache);
 	      var groupMatch = group(aMatch, bMatch, level + 1, cache);
@@ -2055,7 +2063,7 @@
 	(function() {
 
 	  var LineByLinePrinter = __webpack_require__(22).LineByLinePrinter;
-	  var sideBySidePrinter = __webpack_require__(23).SideBySidePrinter;
+	  var SideBySidePrinter = __webpack_require__(23).SideBySidePrinter;
 
 	  function HtmlPrinter() {
 	  }
@@ -2065,7 +2073,10 @@
 	    return lineByLinePrinter.generateLineByLineJsonHtml(diffFiles);
 	  };
 
-	  HtmlPrinter.prototype.generateSideBySideJsonHtml = sideBySidePrinter.generateSideBySideJsonHtml;
+	  HtmlPrinter.prototype.generateSideBySideJsonHtml = function(diffFiles, config) {
+	    var sideBySidePrinter = new SideBySidePrinter(config);
+	    return sideBySidePrinter.generateSideBySideJsonHtml(diffFiles);
+	  };
 
 	  module.exports.HtmlPrinter = new HtmlPrinter();
 
@@ -2094,18 +2105,7 @@
 	    this.config = config;
 	  }
 
-	  LineByLinePrinter.prototype.generateLineByLineJsonHtml = function(diffFiles) {
+	  LineByLinePrinter.prototype.makeFileDiffHtml = function(file, diffs) {
-	    var that = this;
-	    return '<div class="d2h-wrapper">\n' +
-	      diffFiles.map(function(file) {
-
-	        var diffs;
-	        if (file.blocks.length) {
-	          diffs = that._generateFileHtml(file);
-	        } else {
-	          diffs = that._generateEmptyDiff();
-	        }
-
 	    return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' +
 	      '     <div class="d2h-file-header">\n' +
 	      '       <div class="d2h-file-stats">\n' +
@@ -2128,8 +2128,21 @@
 	      '       </div>\n' +
 	      '     </div>\n' +
 	      '   </div>\n';
-	      }).join('\n') +
+	  };
-	      '</div>\n';
+
+	  LineByLinePrinter.prototype.generateLineByLineJsonHtml = function(diffFiles) {
+	    var that = this;
+	    var htmlDiffs = diffFiles.map(function(file) {
+	        var diffs;
+	        if (file.blocks.length) {
+	          diffs = that._generateFileHtml(file);
+	        } else {
+	          diffs = that._generateEmptyDiff();
+	        }
+	        return that.makeFileDiffHtml(file, diffs);
+	      });
+
+	    return '<div class="d2h-wrapper">\n' + htmlDiffs.join('\n') + '</div>\n';
 	  };
 
 	  var matcher = Rematch.rematch(function(a, b) {
@@ -2139,17 +2152,20 @@
 	    return Rematch.distance(amod, bmod);
 	  });
 
-	  LineByLinePrinter.prototype._generateFileHtml = function(file) {
+	  LineByLinePrinter.prototype.makeColumnLineNumberHtml = function(block) {
-	    var that = this;
+	      return '<tr>\n' +
-	    return file.blocks.map(function(block) {
-
-	      var lines = '<tr>\n' +
 	        '  <td class="d2h-code-linenumber ' + diffParser.LINE_TYPE.INFO + '"></td>\n' +
 	        '  <td class="' + diffParser.LINE_TYPE.INFO + '">' +
 	        '    <div class="d2h-code-line ' + diffParser.LINE_TYPE.INFO + '">' + utils.escape(block.header) + '</div>' +
 	        '  </td>\n' +
 	        '</tr>\n';
+	  };
 
+	  LineByLinePrinter.prototype._generateFileHtml = function(file) {
+	    var that = this;
+	    return file.blocks.map(function(block) {
+
+	      var lines = that.makeColumnLineNumberHtml(block);
 	      var oldLines = [];
 	      var newLines = [];
 
@@ -2250,6 +2266,18 @@
 	    return lines;
 	  };
 
+	  LineByLinePrinter.prototype.makeLineHtml = function(type, oldNumber, newNumber, htmlPrefix, htmlContent) {
+	    return '<tr>\n' +
+	      '  <td class="d2h-code-linenumber ' + type + '">' +
+	      '    <div class="line-num1">' + utils.valueOrEmpty(oldNumber) + '</div>' +
+	      '    <div class="line-num2">' + utils.valueOrEmpty(newNumber) + '</div>' +
+	      '  </td>\n' +
+	      '  <td class="' + type + '">' +
+	      '    <div class="d2h-code-line ' + type + '">' + htmlPrefix + htmlContent + '</div>' +
+	      '  </td>\n' +
+	      '</tr>\n';
+	  };
+
 	  LineByLinePrinter.prototype._generateLineHtml = function(type, oldNumber, newNumber, content, prefix) {
 	    var htmlPrefix = '';
 	    if (prefix) {
@@ -2261,15 +2289,7 @@
 	      htmlContent = '<span class="d2h-code-line-ctn">' + content + '</span>';
 	    }
 
-	    return '<tr>\n' +
+	    return this.makeLineHtml(type, oldNumber, newNumber, htmlPrefix, htmlContent);
-	      '  <td class="d2h-code-linenumber ' + type + '">' +
-	      '    <div class="line-num1">' + utils.valueOrEmpty(oldNumber) + '</div>' +
-	      '    <div class="line-num2">' + utils.valueOrEmpty(newNumber) + '</div>' +
-	      '  </td>\n' +
-	      '  <td class="' + type + '">' +
-	      '    <div class="d2h-code-line ' + type + '">' + htmlPrefix + htmlContent + '</div>' +
-	      '  </td>\n' +
-	      '</tr>\n';
 	  };
 
 	  LineByLinePrinter.prototype._generateEmptyDiff = function() {
@@ -2305,20 +2325,18 @@
 	  var utils = __webpack_require__(2).Utils;
 	  var Rematch = __webpack_require__(20).Rematch;
 
-	  function SideBySidePrinter() {
+	  var matcher = Rematch.rematch(function(a, b) {
-	  }
+	    var amod = a.content.substr(1);
-
+	    var bmod = b.content.substr(1);
-	  SideBySidePrinter.prototype.generateSideBySideJsonHtml = function(diffFiles, config) {
+
-	    return '<div class="d2h-wrapper">\n' +
+	    return Rematch.distance(amod, bmod);
-	      diffFiles.map(function(file) {
+	  });
-
+
-	        var diffs;
+	  function SideBySidePrinter(config) {
-	        if (file.blocks.length) {
+	    this.config = config;
-	          diffs = generateSideBySideFileHtml(file, config);
-	        } else {
-	          diffs = generateEmptyDiff();
 	  }
 
+	  SideBySidePrinter.prototype.makeDiffHtml = function(file, diffs) {
 	    return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' +
 	      '     <div class="d2h-file-header">\n' +
 	      '       <div class="d2h-file-stats">\n' +
@@ -2352,38 +2370,44 @@
 	      '       </div>\n' +
 	      '     </div>\n' +
 	      '   </div>\n';
+	  };
+
+	  SideBySidePrinter.prototype.generateSideBySideJsonHtml = function(diffFiles) {
+	    var that = this;
+	    return '<div class="d2h-wrapper">\n' +
+	      diffFiles.map(function(file) {
+
+	        var diffs;
+	        if (file.blocks.length) {
+	          diffs = that.generateSideBySideFileHtml(file);
+	        } else {
+	          diffs = that.generateEmptyDiff();
+	        }
+
+	        return that.makeDiffHtml(file, diffs);
 	      }).join('\n') +
 	      '</div>\n';
 	  };
 
-	  var matcher = Rematch.rematch(function(a, b) {
+	  SideBySidePrinter.prototype.makeSideHtml = function(blockHeader) {
-	    var amod = a.content.substr(1),
+	    return '<tr>\n' +
-	      bmod = b.content.substr(1);
+	      '  <td class="d2h-code-side-linenumber ' + diffParser.LINE_TYPE.INFO + '"></td>\n' +
-	    return Rematch.distance(amod, bmod);
+	      '  <td class="' + diffParser.LINE_TYPE.INFO + '">\n' +
-	  });
+	      '    <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '">' + blockHeader + '</div>\n' +
+	      '  </td>\n' +
+	      '</tr>\n';
+	  };
 
-	  function generateSideBySideFileHtml(file, config) {
+	  SideBySidePrinter.prototype.generateSideBySideFileHtml = function(file) {
+	    var that = this;
 	    var fileHtml = {};
 	    fileHtml.left = '';
 	    fileHtml.right = '';
 
 	    file.blocks.forEach(function(block) {
 
-	      fileHtml.left += '<tr>\n' +
+	      fileHtml.left += that.makeSideHtml(utils.escape(block.header));
-	        '  <td class="d2h-code-side-linenumber ' + diffParser.LINE_TYPE.INFO + '"></td>\n' +
+	      fileHtml.right += that.makeSideHtml('');
-	        '  <td class="' + diffParser.LINE_TYPE.INFO + '">' +
-	        '    <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '">' +
-	        '      ' + utils.escape(block.header) +
-	        '    </div>' +
-	        '  </td>\n' +
-	        '</tr>\n';
-
-	      fileHtml.right += '<tr>\n' +
-	        '  <td class="d2h-code-side-linenumber ' + diffParser.LINE_TYPE.INFO + '"></td>\n' +
-	        '  <td class="' + diffParser.LINE_TYPE.INFO + '">' +
-	        '    <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '"></div>' +
-	        '  </td>\n' +
-	        '</tr>\n';
 
 	      var oldLines = [];
 	      var newLines = [];
@@ -2392,7 +2416,7 @@
 	        var matches;
 	        var insertType;
 	        var deleteType;
-	        var doMatching = config.matching === 'lines' || config.matching === 'words';
+	        var doMatching = that.config.matching === 'lines' || that.config.matching === 'words';
 
 	        if (doMatching) {
 	          matches = matcher(oldLines, newLines);
@@ -2415,15 +2439,15 @@
 	            var oldLine = oldLines[j];
 	            var newLine = newLines[j];
 
-	            config.isCombined = file.isCombined;
+	            that.config.isCombined = file.isCombined;
 
-	            var diff = printerUtils.diffHighlight(oldLine.content, newLine.content, config);
+	            var diff = printerUtils.diffHighlight(oldLine.content, newLine.content, that.config);
 
 	            fileHtml.left +=
-	              generateSingleLineHtml(deleteType, oldLine.oldNumber,
+	              that.generateSingleLineHtml(deleteType, oldLine.oldNumber,
 	                diff.first.line, diff.first.prefix);
 	            fileHtml.right +=
-	              generateSingleLineHtml(insertType, newLine.newNumber,
+	              that.generateSingleLineHtml(insertType, newLine.newNumber,
 	                diff.second.line, diff.second.prefix);
 	          }
 
@@ -2431,7 +2455,7 @@
 	            var oldSlice = oldLines.slice(common);
 	            var newSlice = newLines.slice(common);
 
-	            var tmpHtml = processLines(oldSlice, newSlice);
+	            var tmpHtml = that.processLines(oldSlice, newSlice);
 	            fileHtml.left += tmpHtml.left;
 	            fileHtml.right += tmpHtml.right;
 	          }
@@ -2443,7 +2467,7 @@
 
 	      for (var i = 0; i < block.lines.length; i++) {
 	        var line = block.lines[i];
-	        var prefix = line[0];
+	        var prefix = line.content[0];
 	        var escapedLine = utils.escape(line.content.substr(1));
 
 	        if (line.type !== diffParser.LINE_TYPE.INSERTS &&
@@ -2452,11 +2476,11 @@
 	        }
 
 	        if (line.type === diffParser.LINE_TYPE.CONTEXT) {
-	          fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, escapedLine, prefix);
+	          fileHtml.left += that.generateSingleLineHtml(line.type, line.oldNumber, escapedLine, prefix);
-	          fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, escapedLine, prefix);
+	          fileHtml.right += that.generateSingleLineHtml(line.type, line.newNumber, escapedLine, prefix);
 	        } else if (line.type === diffParser.LINE_TYPE.INSERTS && !oldLines.length) {
-	          fileHtml.left += generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, '', '', '');
+	          fileHtml.left += that.generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, '', '', '');
-	          fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, escapedLine, prefix);
+	          fileHtml.right += that.generateSingleLineHtml(line.type, line.newNumber, escapedLine, prefix);
 	        } else if (line.type === diffParser.LINE_TYPE.DELETES) {
 	          oldLines.push(line);
 	        } else if (line.type === diffParser.LINE_TYPE.INSERTS && Boolean(oldLines.length)) {
@@ -2471,9 +2495,10 @@
 	    });
 
 	    return fileHtml;
-	  }
+	  };
 
-	  function processLines(oldLines, newLines) {
+	  SideBySidePrinter.prototype.processLines = function(oldLines, newLines) {
+	    var that = this;
 	    var fileHtml = {};
 	    fileHtml.left = '';
 	    fileHtml.right = '';
@@ -2498,23 +2523,32 @@
 	      }
 
 	      if (oldLine && newLine) {
-	        fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, oldContent, oldPrefix);
+	        fileHtml.left += that.generateSingleLineHtml(oldLine.type, oldLine.oldNumber, oldContent, oldPrefix);
-	        fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, newContent, newPrefix);
+	        fileHtml.right += that.generateSingleLineHtml(newLine.type, newLine.newNumber, newContent, newPrefix);
 	      } else if (oldLine) {
-	        fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, oldContent, oldPrefix);
+	        fileHtml.left += that.generateSingleLineHtml(oldLine.type, oldLine.oldNumber, oldContent, oldPrefix);
-	        fileHtml.right += generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, '', '', '');
+	        fileHtml.right += that.generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, '', '', '');
 	      } else if (newLine) {
-	        fileHtml.left += generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, '', '', '');
+	        fileHtml.left += that.generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, '', '', '');
-	        fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, newContent, newPrefix);
+	        fileHtml.right += that.generateSingleLineHtml(newLine.type, newLine.newNumber, newContent, newPrefix);
 	      } else {
 	        console.error('How did it get here?');
 	      }
 	    }
 
 	    return fileHtml;
-	  }
+	  };
 
-	  function generateSingleLineHtml(type, number, content, prefix) {
+	  SideBySidePrinter.prototype.makeSingleLineHtml = function(type, number, htmlContent, htmlPrefix) {
+	    return '<tr>\n' +
+	      '    <td class="d2h-code-side-linenumber ' + type + '">' + number + '</td>\n' +
+	      '    <td class="' + type + '">' +
+	      '      <div class="d2h-code-side-line ' + type + '">' + htmlPrefix + htmlContent + '</div>' +
+	      '    </td>\n' +
+	      '  </tr>\n';
+	  };
+
+	  SideBySidePrinter.prototype.generateSingleLineHtml = function(type, number, content, prefix) {
 	    var htmlPrefix = '';
 	    if (prefix) {
 	      htmlPrefix = '<span class="d2h-code-line-prefix">' + prefix + '</span>';
@@ -2525,15 +2559,10 @@
 	      htmlContent = '<span class="d2h-code-line-ctn">' + content + '</span>';
 	    }
 
-	    return '<tr>\n' +
+	    return this.makeSingleLineHtml(type, number, htmlContent, htmlPrefix);
-	      '    <td class="d2h-code-side-linenumber ' + type + '">' + number + '</td>\n' +
+	  };
-	      '    <td class="' + type + '">' +
-	      '      <div class="d2h-code-side-line ' + type + '">' + htmlPrefix + htmlContent + '</div>' +
-	      '    </td>\n' +
-	      '  </tr>\n';
-	  }
 
-	  function generateEmptyDiff() {
+	  SideBySidePrinter.prototype.generateEmptyDiff = function() {
 	    var fileHtml = {};
 	    fileHtml.right = '';
 
@@ -2546,9 +2575,9 @@
 	      '</tr>\n';
 
 	    return fileHtml;
-	  }
+	  };
 
-	  module.exports.SideBySidePrinter = new SideBySidePrinter();
+	  module.exports.SideBySidePrinter = SideBySidePrinter;
 
 	})();
 

dist/diff2html.min.css

@@ -1 +1 @@
-.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{text-align:right}.d2h-lines-added>*{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px}.d2h-lines-deleted{text-align:left}.d2h-lines-deleted>*{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px}.d2h-file-name{display:inline;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-files-diff{width:100%}.d2h-file-diff{overflow-x:scroll;overflow-y:hidden}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;overflow-y:hidden;width:50%;margin-right:-4px}.d2h-code-line{display:block;white-space:pre;padding:0 10px;height:18px;line-height:18px;margin-left:80px;color:inherit;overflow-x:inherit;background:none}.d2h-code-side-line{display:block;white-space:pre;padding:0 10px;height:18px;line-height:18px;margin-left:50px;color:inherit;overflow-x:inherit;background:none}.d2h-code-line del,.d2h-code-side-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#ffb6ba;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#97f295;border-radius:.2em}.d2h-code-line-prefix{float:left;background:none;padding:0}.d2h-code-line-ctn{background:none;padding:0}.line-num1{box-sizing:border-box;float:left;width:32px;overflow:hidden;text-overflow:ellipsis;padding-left:3px}.line-num2{box-sizing:border-box;float:right;width:32px;overflow:hidden;text-overflow:ellipsis;padding-left:3px}.d2h-code-linenumber{box-sizing:border-box;position:absolute;width:82px;height:18px;padding-left:2px;padding-right:2px;line-height:18px;background-color:#fff;color:rgba(0,0,0,0.3);text-align:right;border:solid #eeeeee;border-width:0 1px 0 1px;cursor:pointer}.d2h-code-side-linenumber{box-sizing:border-box;position:absolute;width:52px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,0.3);text-align:right;border:solid #eeeeee;border-width:0 1px 0 1px;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.d2h-del{background-color:#fee8e9;border-color:#e9aeae}.d2h-ins{background-color:#dfd;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,0.3);border-color:#d5e4f2}.d2h-file-list-wrapper{margin-bottom:10px;padding:0 10px}.d2h-file-list-wrapper a{text-decoration:none;color:#3572b0}.d2h-file-list-wrapper a:visited{color:#3572b0}.d2h-file-list-header{font-weight:bold;float:left}.d2h-file-list-line{text-align:left;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-list-line .d2h-file-name{line-height:21px}.d2h-file-list{display:none}.d2h-clear{display:block;clear:both}.d2h-del.d2h-change,.d2h-ins.d2h-change{background-color:#ffc}ins.d2h-change,del.d2h-change{background-color:#fad771}.d2h-file-diff .d2h-del.d2h-change{background-color:#fae1af}.d2h-file-diff .d2h-ins.d2h-change{background-color:#ded}.d2h-show{display:none;float:left}.d2h-hide{float:left}.d2h-hide:target+.d2h-show{display:inline}.d2h-hide:target{display:none}.d2h-hide:target~.d2h-file-list{display:block}
+.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{text-align:right}.d2h-lines-added>*{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px}.d2h-lines-deleted{text-align:left}.d2h-lines-deleted>*{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px}.d2h-file-name{display:inline;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-files-diff{width:100%}.d2h-file-diff{overflow-x:scroll;overflow-y:hidden}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;overflow-y:hidden;width:50%;margin-right:-4px}.d2h-code-line{display:block;white-space:pre;padding:0 10px;height:18px;line-height:18px;margin-left:80px;color:inherit;overflow-x:inherit;background:none}.d2h-code-side-line{display:block;white-space:pre;padding:0 10px;height:18px;line-height:18px;margin-left:50px;color:inherit;overflow-x:inherit;background:none}.d2h-code-line del,.d2h-code-side-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#ffb6ba;border-radius:.2em}.d2h-code-line ins,.d2h-code-side-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#97f295;border-radius:.2em}.d2h-code-line-prefix{float:left;background:none;padding:0}.d2h-code-line-ctn{background:none;padding:0}.line-num1{box-sizing:border-box;float:left;width:32px;overflow:hidden;text-overflow:ellipsis;padding-left:3px}.line-num2{box-sizing:border-box;float:right;width:32px;overflow:hidden;text-overflow:ellipsis;padding-left:3px}.d2h-code-linenumber{box-sizing:border-box;position:absolute;width:82px;height:18px;padding-left:2px;padding-right:2px;line-height:18px;background-color:#fff;color:rgba(0,0,0,0.3);text-align:right;border:solid #eeeeee;border-width:0 1px 0 1px;cursor:pointer}.d2h-code-side-linenumber{box-sizing:border-box;position:absolute;width:52px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,0.3);text-align:right;border:solid #eeeeee;border-width:0 1px 0 1px;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.d2h-del{background-color:#fee8e9;border-color:#e9aeae}.d2h-ins{background-color:#dfd;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,0.3);border-color:#d5e4f2}.d2h-file-list-wrapper{margin-bottom:10px;padding:0 10px}.d2h-file-list-wrapper a{text-decoration:none;color:#3572b0}.d2h-file-list-wrapper a:visited{color:#3572b0}.d2h-file-list-header{font-weight:bold;float:left}.d2h-file-list-line{text-align:left;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-list-line .d2h-file-name{line-height:21px}.d2h-file-list{display:block}.d2h-clear{display:block;clear:both}.d2h-del.d2h-change,.d2h-ins.d2h-change{background-color:#ffc}ins.d2h-change,del.d2h-change{background-color:#fad771}.d2h-file-diff .d2h-del.d2h-change{background-color:#fae1af}.d2h-file-diff .d2h-ins.d2h-change{background-color:#ded}.d2h-file-switch{display:none;float:left;font-size:10px;cursor:pointer;margin-top:3px}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "diff2html",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "homepage": "http://rtfpessoa.github.io/diff2html/",
   "description": "Fast Diff to colorized HTML",
   "keywords": [

release.sh

@@ -5,9 +5,17 @@
 # by rtfpessoa
 #
 
+INPUT_DIR=src
+INPUT_UI_DIR=${INPUT_DIR}/ui
+INPUT_JS_FILE=${INPUT_DIR}/diff2html.js
+INPUT_JS_UI_FILE=${INPUT_UI_DIR}/js/diff2html-ui.js
+INPUT_CSS_FILE=${INPUT_UI_DIR}/css/diff2html.css
+
 OUTPUT_DIR=dist
 OUTPUT_JS_FILE=${OUTPUT_DIR}/diff2html.js
 OUTPUT_MIN_JS_FILE=${OUTPUT_DIR}/diff2html.min.js
+OUTPUT_JS_UI_FILE=${OUTPUT_DIR}/diff2html-ui.js
+OUTPUT_MIN_JS_UI_FILE=${OUTPUT_DIR}/diff2html-ui.min.js
 OUTPUT_CSS_FILE=${OUTPUT_DIR}/diff2html.css
 OUTPUT_MIN_CSS_FILE=${OUTPUT_DIR}/diff2html.min.css
 
@@ -19,15 +27,23 @@ mkdir -p ${OUTPUT_DIR}
 
 echo "Generating js aggregation file in ${OUTPUT_JS_FILE}"
 
-webpack ./src/diff2html.js ${OUTPUT_JS_FILE}
+webpack ${INPUT_JS_FILE} ${OUTPUT_JS_FILE}
 
 echo "Minifying ${OUTPUT_JS_FILE} to ${OUTPUT_MIN_JS_FILE}"
 
 uglifyjs ${OUTPUT_JS_FILE} -c -o ${OUTPUT_MIN_JS_FILE}
 
+echo "Generating js ui aggregation file in ${OUTPUT_JS_UI_FILE}"
+
+webpack ${INPUT_JS_UI_FILE} ${OUTPUT_JS_UI_FILE}
+
+echo "Minifying ${OUTPUT_JS_UI_FILE} to ${OUTPUT_MIN_JS_UI_FILE}"
+
+uglifyjs ${OUTPUT_JS_UI_FILE} -c -o ${OUTPUT_MIN_JS_UI_FILE}
+
 echo "Copying css file to ${OUTPUT_CSS_FILE}"
 
-cp -f css/diff2html.css ${OUTPUT_CSS_FILE}
+cp -f ${INPUT_CSS_FILE} ${OUTPUT_CSS_FILE}
 
 echo "Minifying ${OUTPUT_CSS_FILE} to ${OUTPUT_MIN_CSS_FILE}"
 

sample/index.html

@@ -11,14 +11,17 @@
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
 
-    <!-- -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="../dist/diff2html.min.css">
-    <script type="text/javascript" src="../dist/diff2html.min.js"></script>
-    <!-- -->
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/languages/scala.min.js"></script>
 
+    <!-- diff2html -->
+    <link rel="stylesheet" type="text/css" href="../dist/diff2html.min.css">
+    <script type="text/javascript" src="../dist/diff2html.js"></script>
+    <script type="text/javascript" src="../dist/diff2html-ui.js"></script>
+    <!-- -->
+
     <script>
         var lineDiffExample =
                 'diff --git a/coverage.init b/coverage.init\n' +
@@ -227,32 +230,21 @@
                 "+\n" +
                 "+\n";
 
-        document.addEventListener("DOMContentLoaded", function() {
+        $(document).ready(function() {
-            // parse the diff to json
+            var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
-            var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample);
 
-            // collect all the file extensions in the json
+            diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
-            var allFileLanguages = diffJson.map(function(line) {
+            diff2htmlUi.fileListCloseable('#line-by-line', false);
-                return line.language;
+            diff2htmlUi.highlightCode('#line-by-line');
-            });
+
-
+            diff2htmlUi.draw('#side-by-side', {
-            // remove duplicated languages
+                inputFormat: 'json',
-            var distinctLanguages = allFileLanguages.filter(function(v, i) {
+                showFiles: true,
-                return allFileLanguages.indexOf(v) == i;
+                matching: 'lines',
-            });
+                outputFormat: 'side-by-side'
-
-            // pass the languages to the highlightjs plugin
-            hljs.configure({languages: distinctLanguages});
-
-            // generate and inject the diff HTML into the desired place
-            document.getElementById("line-by-line").innerHTML = Diff2Html.getPrettyHtml(diffJson, { inputFormat: 'json', showFiles: true, matching: 'lines' });
-            document.getElementById("side-by-side").innerHTML = Diff2Html.getPrettyHtml(diffJson, { inputFormat: 'json', showFiles: true, matching: 'lines', outputFormat: 'side-by-side' });
-
-            // collect all the code lines and execute the highlight on them
-            var codeLines = document.getElementsByClassName("d2h-code-line-ctn");
-            [].forEach.call(codeLines, function(line) {
-                hljs.highlightBlock(line);
             });
+            diff2htmlUi.fileListCloseable('#side-by-side', false);
+            diff2htmlUi.highlightCode('#side-by-side');
         });
     </script>
 

src/file-list-printer.js

@@ -8,18 +8,15 @@
 (function() {
 
   var printerUtils = require('./printer-utils.js').PrinterUtils;
-  var utils = require('./utils.js').Utils;
 
   function FileListPrinter() {
   }
 
   FileListPrinter.prototype.generateFileList = function(diffFiles) {
-    var hideId = utils.getRandomId('d2h-hide'); // Necessary if there are 2 elements like this in the same page
-    var showId = utils.getRandomId('d2h-show');
     return '<div class="d2h-file-list-wrapper">\n' +
       '     <div class="d2h-file-list-header">Files changed (' + diffFiles.length + ')&nbsp&nbsp</div>\n' +
-      '     <a id="' + hideId + '" class="d2h-hide" href="#' + hideId + '">+</a>\n' +
+      '     <a class="d2h-file-switch d2h-hide">hide</a>\n' +
-      '     <a id="' + showId + 'd2h-show" class="d2h-show" href="#' + showId + '">-</a>\n' +
+      '     <a class="d2h-file-switch d2h-show">show</a>\n' +
       '     <div class="d2h-clear"></div>\n' +
       '     <table class="d2h-file-list">\n' +
 

src/ui/css/diff2html.css

@@ -245,7 +245,7 @@
 }
 
 .d2h-file-list {
-    display: none;
+    display: block;
 }
 
 .d2h-clear {
@@ -269,24 +269,10 @@ ins.d2h-change, del.d2h-change {
     background-color: #ded;
 }
 
-/* CSS only show/hide */
+.d2h-file-switch {
-.d2h-show {
     display: none;
     float: left;
-}
+    font-size: 10px;
-
+    cursor: pointer;
-.d2h-hide {
+    margin-top: 3px;
-    float: left;
-}
-
-.d2h-hide:target + .d2h-show {
-    display: inline;
-}
-
-.d2h-hide:target {
-    display: none;
-}
-
-.d2h-hide:target ~ .d2h-file-list {
-    display: block;
 }

src/ui/js/diff2html-ui.js

@@ -0,0 +1,99 @@
+/*
+ *
+ * Diff to HTML (diff2html-ui.js)
+ * Author: rtfpessoa
+ *
+ * Depends on: [ jQuery ]
+ * Optional dependencies on: [ highlight.js ]
+ *
+ */
+
+/*global $, hljs*/
+
+(function() {
+
+  var diffJson = null;
+  var defaultTarget = "body";
+
+  function Diff2HtmlUI(config) {
+    var cfg = config || {};
+
+    if (cfg.diff) {
+      diffJson = Diff2Html.getJsonFromDiff(cfg.diff);
+    } else if (cfg.json) {
+      diffJson = cfg.json;
+    }
+  }
+
+  Diff2HtmlUI.prototype.draw = function(targetId, config) {
+    var cfg = config || {};
+    var $target = this._getTarget(targetId);
+    $target.html(Diff2Html.getPrettyHtml(diffJson, cfg));
+  };
+
+  Diff2HtmlUI.prototype.fileListCloseable = function(targetId, startVisible) {
+    var $target = this._getTarget(targetId);
+
+    var $showBtn = $target.find(".d2h-show");
+    var $hideBtn = $target.find(".d2h-hide");
+    var $fileList = $target.find(".d2h-file-list");
+
+    if (startVisible) show(); else hide();
+
+    $showBtn.click(show);
+    $hideBtn.click(hide);
+
+    function show() {
+      $showBtn.hide();
+      $hideBtn.show();
+      $fileList.show();
+    }
+
+    function hide() {
+      $hideBtn.hide();
+      $showBtn.show();
+      $fileList.hide();
+    }
+  };
+
+  Diff2HtmlUI.prototype.highlightCode = function(targetId) {
+    var that = this;
+
+    // collect all the file extensions in the json
+    var allFileLanguages = diffJson.map(function(line) {
+      return line.language;
+    });
+
+    // remove duplicated languages
+    var distinctLanguages = allFileLanguages.filter(function(v, i) {
+      return allFileLanguages.indexOf(v) === i;
+    });
+
+    // pass the languages to the highlightjs plugin
+    hljs.configure({languages: distinctLanguages});
+
+    // collect all the code lines and execute the highlight on them
+    var $target = that._getTarget(targetId);
+    var $codeLines = $target.find(".d2h-code-line-ctn");
+    $codeLines.map(function(i, line) {
+      hljs.highlightBlock(line);
+    });
+  };
+
+  Diff2HtmlUI.prototype._getTarget = function(targetId) {
+    var $target;
+    if (targetId) {
+      $target = $(targetId);
+    } else {
+      $target = $(defaultTarget);
+    }
+
+    return $target;
+  };
+
+  module.exports.Diff2HtmlUI = Diff2HtmlUI;
+
+  // Expose diff2html in the browser
+  global.Diff2HtmlUI = Diff2HtmlUI;
+
+})();

src/utils.js

@@ -18,10 +18,6 @@
       .replace(/\t/g, '    ');
   };
 
-  Utils.prototype.getRandomId = function(prefix) {
-    return prefix + '-' + Math.random().toString(36).slice(-3);
-  };
-
   Utils.prototype.startsWith = function(str, start) {
     if (typeof start === 'object') {
       var result = false;