Fix file summary switch

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://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.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 Diff2HtmlUI helper
+
+```js
+$(document).ready(function() {
+    var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
+    diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
+    diff2htmlUi.highlightCode('#line-by-line');
+});
+```
+
+## Collapsable File Summary List
+
+> Add the dependencies.
+
+```html
 <!-- Javascripts -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/languages/scala.min.js"></script>
+<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>
 ```
 
-> Invoke the highlightjs plugin
+> Invoke the Diff2HtmlUI helper
 
 ```js
-document.addEventListener("DOMContentLoaded", function () {
-    // parse the diff to json
-    var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample);
-
-    // 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});
-
-    // generate and inject the diff HTML into the desired place
-    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
-    var codeLines = document.getElementsByClassName("d2h-code-line-ctn");
-    [].forEach.call(codeLines, function (line) {
-        hljs.highlightBlock(line);
-    });
+$(document).ready(function() {
+    var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
+    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.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-show {
+.d2h-file-switch {
     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;
+    font-size: 10px;
+    cursor: pointer;
+    margin-top: 3px;
 }