Skip to content

Commit 59914f1

Browse files
rtfpessoartfpessoa
committed
Merge pull request #58 from rtfpessoa/fix-file-summary-switch
Fix file summary switch
2 parents 4e9dfa7 + 43666f6 commit 59914f1

15 files changed

+558
-275
lines changed

‎README.md

Lines changed: 61 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,37 @@ The HTML output accepts a Javascript object with configuration. Possible options
6868
- `matching`: matching level: `'lines'` for matching lines, `'words'` for matching lines and words or `'none'`, default is `none`
6969
- `matchWordsThreshold`: similarity threshold for word matching, default is 0.25
7070

71+
## Diff2HtmlUI Helper
72+
73+
> Simple wrapper to ease simple tasks in the browser such as: code highlight and js effects
74+
75+
### How to use
76+
77+
> Init
78+
79+
```js
80+
var diff2htmlUi = new Diff2HtmlUI({diff: diffString});
81+
// or
82+
var diff2htmlUi = new Diff2HtmlUI({json: diffJson});
83+
```
84+
85+
> Draw
86+
87+
```js
88+
diff2htmlUi.draw('html-target-elem', {inputFormat: 'json', showFiles: true, matching: 'lines'});
89+
```
90+
91+
> Highlight Code
92+
93+
```js
94+
diff2htmlUi.highlightCode('html-target-elem');
95+
```
96+
97+
> Collapse File Summary List
98+
99+
```js
100+
diff2htmlUi.fileListCloseable('html-target-elem', false);
101+
```
71102

72103
## Syntax Highlight
73104

@@ -77,42 +108,42 @@ If your favourite language is not included in the default package also add its j
77108

78109
```html
79110
<!-- Stylesheet -->
80-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/github.min.css">
111+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
112+
113+
<!-- Javascripts -->
114+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
115+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
116+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/languages/scala.min.js"></script>
117+
<script type="text/javascript" src="dist/diff2html-ui.js"></script>
118+
```
81119

120+
> Invoke the Diff2HtmlUI helper
121+
122+
```js
123+
$(document).ready(function() {
124+
var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
125+
diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
126+
diff2htmlUi.highlightCode('#line-by-line');
127+
});
128+
```
129+
130+
## Collapsable File Summary List
131+
132+
> Add the dependencies.
133+
134+
```html
82135
<!-- Javascripts -->
83-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
84-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/languages/scala.min.js"></script>
136+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
137+
<script type="text/javascript" src="dist/diff2html-ui.js"></script>
85138
```
86139

87-
> Invoke the highlightjs plugin
140+
> Invoke the Diff2HtmlUI helper
88141
89142
```js
90-
document.addEventListener("DOMContentLoaded", function () {
91-
// parse the diff to json
92-
var diffJson = Diff2Html.getJsonFromDiff(lineDiffExample);
93-
94-
// collect all the file extensions in the json
95-
var allFileLanguages = diffJson.map(function (line) {
96-
return line.language;
97-
});
98-
99-
// remove duplicated languages
100-
var distinctLanguages = allFileLanguages.filter(function (v, i) {
101-
return allFileLanguages.indexOf(v) == i;
102-
});
103-
104-
// pass the languages to the highlightjs plugin
105-
hljs.configure({languages: distinctLanguages});
106-
107-
// generate and inject the diff HTML into the desired place
108-
document.getElementById("line-by-line").innerHTML = Diff2Html.getPrettyHtml(diffJson, { inputFormat: 'json' });
109-
document.getElementById("side-by-side").innerHTML = Diff2Html.getPrettyHtml(diffJson, { inputFormat: 'json', outputFormat: 'side-by-side' });
110-
111-
// collect all the code lines and execute the highlight on them
112-
var codeLines = document.getElementsByClassName("d2h-code-line-ctn");
113-
[].forEach.call(codeLines, function (line) {
114-
hljs.highlightBlock(line);
115-
});
143+
$(document).ready(function() {
144+
var diff2htmlUi = new Diff2HtmlUI({diff: lineDiffExample});
145+
diff2htmlUi.draw('#line-by-line', {inputFormat: 'json', showFiles: true, matching: 'lines'});
146+
diff2htmlUi.fileListCloseable('#line-by-line', false);
116147
});
117148
```
118149

‎bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "diff2html",
3-
"version": "1.2.1",
3+
"version": "1.3.0",
44
"homepage": "http://rtfpessoa.github.io/diff2html/",
55
"description": "Fast Diff to colorized HTML",
66
"keywords": [
@@ -29,6 +29,7 @@
2929
},
3030
"main": [
3131
"./dist/diff2html.js",
32+
"./dist/diff2html-ui.js",
3233
"./dist/diff2html.css"
3334
],
3435
"license": "MIT",

‎dist/diff2html-ui.js

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
/******/ (function(modules) { // webpackBootstrap
2+
/******/ // The module cache
3+
/******/ var installedModules = {};
4+
5+
/******/ // The require function
6+
/******/ function __webpack_require__(moduleId) {
7+
8+
/******/ // Check if module is in cache
9+
/******/ if(installedModules[moduleId])
10+
/******/ return installedModules[moduleId].exports;
11+
12+
/******/ // Create a new module (and put it into the cache)
13+
/******/ var module = installedModules[moduleId] = {
14+
/******/ exports: {},
15+
/******/ id: moduleId,
16+
/******/ loaded: false
17+
/******/ };
18+
19+
/******/ // Execute the module function
20+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21+
22+
/******/ // Flag the module as loaded
23+
/******/ module.loaded = true;
24+
25+
/******/ // Return the exports of the module
26+
/******/ return module.exports;
27+
/******/ }
28+
29+
30+
/******/ // expose the modules object (__webpack_modules__)
31+
/******/ __webpack_require__.m = modules;
32+
33+
/******/ // expose the module cache
34+
/******/ __webpack_require__.c = installedModules;
35+
36+
/******/ // __webpack_public_path__
37+
/******/ __webpack_require__.p = "";
38+
39+
/******/ // Load entry module and return exports
40+
/******/ return __webpack_require__(0);
41+
/******/ })
42+
/************************************************************************/
43+
/******/ ([
44+
/* 0 */
45+
/***/ function(module, exports) {
46+
47+
/* WEBPACK VAR INJECTION */(function(global) {/*
48+
*
49+
* Diff to HTML (diff2html-ui.js)
50+
* Author: rtfpessoa
51+
*
52+
* Depends on: [ jQuery ]
53+
* Optional dependencies on: [ highlight.js ]
54+
*
55+
*/
56+
57+
/*global $, hljs*/
58+
59+
(function() {
60+
61+
var diffJson = null;
62+
var defaultTarget = "body";
63+
64+
function Diff2HtmlUI(config) {
65+
var cfg = config || {};
66+
67+
if (cfg.diff) {
68+
diffJson = Diff2Html.getJsonFromDiff(cfg.diff);
69+
} else if (cfg.json) {
70+
diffJson = cfg.json;
71+
}
72+
}
73+
74+
Diff2HtmlUI.prototype.draw = function(targetId, config) {
75+
var cfg = config || {};
76+
var $target = this._getTarget(targetId);
77+
$target.html(Diff2Html.getPrettyHtml(diffJson, cfg));
78+
};
79+
80+
Diff2HtmlUI.prototype.fileListCloseable = function(targetId, startVisible) {
81+
var $target = this._getTarget(targetId);
82+
83+
var $showBtn = $target.find(".d2h-show");
84+
var $hideBtn = $target.find(".d2h-hide");
85+
var $fileList = $target.find(".d2h-file-list");
86+
87+
if (startVisible) show(); else hide();
88+
89+
$showBtn.click(show);
90+
$hideBtn.click(hide);
91+
92+
function show() {
93+
$showBtn.hide();
94+
$hideBtn.show();
95+
$fileList.show();
96+
}
97+
98+
function hide() {
99+
$hideBtn.hide();
100+
$showBtn.show();
101+
$fileList.hide();
102+
}
103+
};
104+
105+
Diff2HtmlUI.prototype.highlightCode = function(targetId) {
106+
var that = this;
107+
108+
// collect all the file extensions in the json
109+
var allFileLanguages = diffJson.map(function(line) {
110+
return line.language;
111+
});
112+
113+
// remove duplicated languages
114+
var distinctLanguages = allFileLanguages.filter(function(v, i) {
115+
return allFileLanguages.indexOf(v) === i;
116+
});
117+
118+
// pass the languages to the highlightjs plugin
119+
hljs.configure({languages: distinctLanguages});
120+
121+
// collect all the code lines and execute the highlight on them
122+
var $target = that._getTarget(targetId);
123+
var $codeLines = $target.find(".d2h-code-line-ctn");
124+
$codeLines.map(function(i, line) {
125+
hljs.highlightBlock(line);
126+
});
127+
};
128+
129+
Diff2HtmlUI.prototype._getTarget = function(targetId) {
130+
var $target;
131+
if (targetId) {
132+
$target = $(targetId);
133+
} else {
134+
$target = $(defaultTarget);
135+
}
136+
137+
return $target;
138+
};
139+
140+
module.exports.Diff2HtmlUI = Diff2HtmlUI;
141+
142+
// Expose diff2html in the browser
143+
global.Diff2HtmlUI = Diff2HtmlUI;
144+
145+
})();
146+
147+
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
148+
149+
/***/ }
150+
/******/ ]);

‎dist/diff2html-ui.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/diff2html.css

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@
245245
}
246246

247247
.d2h-file-list {
248-
display: none;
248+
display: block;
249249
}
250250

251251
.d2h-clear {
@@ -269,24 +269,10 @@ ins.d2h-change, del.d2h-change {
269269
background-color: #ded;
270270
}
271271

272-
/* CSS only show/hide */
273-
.d2h-show {
272+
.d2h-file-switch {
274273
display: none;
275274
float: left;
276-
}
277-
278-
.d2h-hide {
279-
float: left;
280-
}
281-
282-
.d2h-hide:target + .d2h-show {
283-
display: inline;
284-
}
285-
286-
.d2h-hide:target {
287-
display: none;
288-
}
289-
290-
.d2h-hide:target ~ .d2h-file-list {
291-
display: block;
275+
font-size: 10px;
276+
cursor: pointer;
277+
margin-top: 3px;
292278
}

0 commit comments

Comments
 (0)