Skip to content

Commit

Permalink
Merge pull request #58 from rtfpessoa/fix-file-summary-switch
Browse files Browse the repository at this point in the history
Fix file summary switch
  • Loading branch information
rtfpessoa committed Feb 7, 2016
2 parents 4e9dfa7 + 43666f6 commit 59914f1
Show file tree
Hide file tree
Showing 15 changed files with 558 additions and 275 deletions.
91 changes: 61 additions & 30 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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);
});
```

Expand Down
3 changes: 2 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -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": [
Expand Down Expand Up @@ -29,6 +29,7 @@
},
"main": [
"./dist/diff2html.js",
"./dist/diff2html-ui.js",
"./dist/diff2html.css"
],
"license": "MIT",
Expand Down
150 changes: 150 additions & 0 deletions dist/diff2html-ui.js
Original file line number Diff line number Diff line change
@@ -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; }())))

/***/ }
/******/ ]);
1 change: 1 addition & 0 deletions dist/diff2html-ui.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 5 additions & 19 deletions dist/diff2html.css
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@
}

.d2h-file-list {
display: none;
display: block;
}

.d2h-clear {
Expand All @@ -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;
}
Loading

0 comments on commit 59914f1

Please sign in to comment.