Skip to content

Commit a48fac6

Browse files
rtfpessoartfpessoa
committed
refactor the printers
1 parent 2015436 commit a48fac6

File tree

6 files changed

+335
-300
lines changed

6 files changed

+335
-300
lines changed

‎diff2html.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ function Diff2Html() {
1818
*/
1919
Diff2Html.prototype.getPrettyHtmlFromDiff = function (diffInput) {
2020
var diffJson = diffParser.generateDiffJson(diffInput);
21-
return htmlPrinter.generateJsonHtml(diffJson);
21+
return htmlPrinter.generateLineByLineJsonHtml(diffJson);
2222
};
2323

2424
/*
@@ -32,7 +32,7 @@ Diff2Html.prototype.getJsonFromDiff = function (diffInput) {
3232
* Generates pretty html from a json object
3333
*/
3434
Diff2Html.prototype.getPrettyHtmlFromJson = function (diffJson) {
35-
return htmlPrinter.generateJsonHtml(diffJson);
35+
return htmlPrinter.generateLineByLineJsonHtml(diffJson);
3636
};
3737

3838
/*

‎index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121

2222
<script type="text/javascript" src="src/utils.js"></script>
2323
<script type="text/javascript" src="src/diff-parser.js"></script>
24+
<script type="text/javascript" src="src/printer-utils.js"></script>
25+
<script type="text/javascript" src="src/side-by-side-printer.js"></script>
26+
<script type="text/javascript" src="src/line-by-line-printer.js"></script>
2427
<script type="text/javascript" src="src/html-printer.js"></script>
2528
<script type="text/javascript" src="diff2html.js"></script>
2629
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>

‎src/html-printer.js‎

Lines changed: 4 additions & 298 deletions
Original file line numberDiff line numberDiff line change
@@ -5,306 +5,12 @@
55
*
66
*/
77

8-
var diffParser = new DiffParser();
9-
var utils = new Utils();
10-
var jsDiff = JsDiff;
8+
var lineByLinePrinter = new LineByLinePrinter();
9+
var sideBySidePrinter = new SideBySidePrinter();
1110

1211
function HtmlPrinter() {
1312
}
1413

15-
HtmlPrinter.prototype.generateJsonHtml = function (diffFiles) {
16-
return "<div class=\"d2h-wrapper\">\n" +
17-
diffFiles.map(function (file) {
18-
return "<div class=\"d2h-file-wrapper\" data-lang=\"" + file.language + "\">\n" +
19-
" <div class=\"d2h-file-header\">\n" +
20-
" <div class=\"d2h-file-stats\">\n" +
21-
" <span class=\"d2h-lines-added\">+" + file.addedLines + "</span>\n" +
22-
" <span class=\"d2h-lines-deleted\">-" + file.deletedLines + "</span>\n" +
23-
" </div>\n" +
24-
" <div class=\"d2h-file-name\">" + getDiffName(file.oldName, file.newName) + "</div>\n" +
25-
" </div>\n" +
26-
" <div class=\"d2h-file-diff\">\n" +
27-
" <div class=\"d2h-code-wrapper\">\n" +
28-
" <table class=\"d2h-diff-table\">\n" +
29-
" <tbody class=\"d2h-diff-tbody\">\n" +
30-
" " + generateFileHtml(file) +
31-
" </tbody>\n" +
32-
" </table>\n" +
33-
" </div>\n" +
34-
" </div>\n" +
35-
" </div>\n";
36-
}).join("\n") +
37-
"</div>\n";
38-
};
14+
HtmlPrinter.prototype.generateLineByLineJsonHtml = lineByLinePrinter.generateLineByLineJsonHtml;
3915

40-
var generateFileHtml = function (file) {
41-
return file.blocks.map(function (block) {
42-
43-
var lines = "<tr>\n" +
44-
" <td class=\"d2h-code-linenumber " + diffParser.LINE_TYPE.INFO + "\"></td>\n" +
45-
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
46-
" <div class=\"d2h-code-line " + diffParser.LINE_TYPE.INFO + "\">" + utils.escape(block.header) + "</div>" +
47-
" </td>\n" +
48-
"</tr>\n";
49-
50-
var oldLines = [], newLines = [];
51-
var processedOldLines = [], processedNewLines = [];
52-
53-
for (var i = 0; i < block.lines.length; i++) {
54-
var line = block.lines[i];
55-
var escapedLine = utils.escape(line.content);
56-
57-
if (line.type == diffParser.LINE_TYPE.CONTEXT && !oldLines.length && !newLines.length) {
58-
lines += generateLineHtml(line.type, line.oldNumber, line.newNumber, escapedLine);
59-
} else if (line.type == diffParser.LINE_TYPE.INSERTS && !oldLines.length && !newLines.length) {
60-
lines += generateLineHtml(line.type, line.oldNumber, line.newNumber, escapedLine);
61-
} else if (line.type == diffParser.LINE_TYPE.DELETES && !newLines.length) {
62-
oldLines.push(line);
63-
} else if (line.type == diffParser.LINE_TYPE.INSERTS && oldLines.length > newLines.length) {
64-
newLines.push(line);
65-
} else {
66-
var j = 0;
67-
var oldLine, newLine;
68-
var oldEscapedLine, newEscapedLine;
69-
70-
if (oldLines.length === newLines.length) {
71-
for (j = 0; j < oldLines.length; j++) {
72-
oldLine = oldLines[j];
73-
newLine = newLines[j];
74-
oldEscapedLine = utils.escape(oldLine.content);
75-
newEscapedLine = utils.escape(newLine.content);
76-
77-
var diff = diffHighlight(oldEscapedLine, newEscapedLine, file.isTripleDiff);
78-
79-
processedOldLines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, diff.o);
80-
processedNewLines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, diff.n);
81-
}
82-
83-
lines += processedOldLines + processedNewLines;
84-
} else {
85-
for (j = 0; j < oldLines.length; j++) {
86-
oldLine = oldLines[j];
87-
oldEscapedLine = utils.escape(oldLine.content);
88-
lines += generateLineHtml(oldLine.type, oldLine.oldNumber, oldLine.newNumber, oldEscapedLine);
89-
}
90-
91-
for (j = 0; j < newLines.length; j++) {
92-
newLine = newLines[j];
93-
newEscapedLine = utils.escape(newLine.content);
94-
lines += generateLineHtml(newLine.type, newLine.oldNumber, newLine.newNumber, newEscapedLine);
95-
}
96-
}
97-
98-
oldLines = [];
99-
newLines = [];
100-
processedOldLines = [];
101-
processedNewLines = [];
102-
i--;
103-
}
104-
}
105-
106-
return lines;
107-
}).join("\n");
108-
};
109-
110-
var generateLineHtml = function (type, oldNumber, newNumber, content) {
111-
return "<tr>\n" +
112-
" <td class=\"d2h-code-linenumber " + type + "\">" +
113-
" <div class=\"line-num1\">" + utils.valueOrEmpty(oldNumber) + "</div>" +
114-
" <div class=\"line-num2\">" + utils.valueOrEmpty(newNumber) + "</div>" +
115-
" </td>\n" +
116-
" <td class=\"" + type + "\">" +
117-
" <div class=\"d2h-code-line " + type + "\">" + content + "</div>" +
118-
" </td>\n" +
119-
"</tr>\n";
120-
};
121-
122-
/*
123-
* Side By Side HTML
124-
*/
125-
126-
HtmlPrinter.prototype.generateSideBySideJsonHtml = function (diffFiles) {
127-
return "<div class=\"d2h-wrapper\">\n" +
128-
diffFiles.map(function (file) {
129-
var diffs = generateSideBySideFileHtml(file);
130-
131-
return "<div class=\"d2h-file-wrapper\" data-lang=\"" + file.language + "\">\n" +
132-
" <div class=\"d2h-file-header\">\n" +
133-
" <div class=\"d2h-file-stats\">\n" +
134-
" <span class=\"d2h-lines-added\">+" + file.addedLines + "</span>\n" +
135-
" <span class=\"d2h-lines-deleted\">-" + file.deletedLines + "</span>\n" +
136-
" </div>\n" +
137-
" <div class=\"d2h-file-name\">" + getDiffName(file.oldName, file.newName) + "</div>\n" +
138-
" </div>\n" +
139-
" <div class=\"d2h-files-diff\">\n" +
140-
" <div class=\"d2h-file-side-diff\">\n" +
141-
" <div class=\"d2h-code-wrapper\">\n" +
142-
" <table class=\"d2h-diff-table\">\n" +
143-
" <tbody class=\"d2h-diff-tbody\">\n" +
144-
" " + diffs.left +
145-
" </tbody>\n" +
146-
" </table>\n" +
147-
" </div>\n" +
148-
" </div>\n" +
149-
" <div class=\"d2h-file-side-diff\">\n" +
150-
" <div class=\"d2h-code-wrapper\">\n" +
151-
" <table class=\"d2h-diff-table\">\n" +
152-
" <tbody class=\"d2h-diff-tbody\">\n" +
153-
" " + diffs.right +
154-
" </tbody>\n" +
155-
" </table>\n" +
156-
" </div>\n" +
157-
" </div>\n" +
158-
" </div>\n" +
159-
" </div>\n";
160-
}).join("\n") +
161-
"</div>\n";
162-
};
163-
164-
var generateSideBySideFileHtml = function (file) {
165-
var fileHtml = {};
166-
fileHtml.left = "";
167-
fileHtml.right = "";
168-
169-
file.blocks.forEach(function (block) {
170-
171-
fileHtml.left += "<tr>\n" +
172-
" <td class=\"d2h-code-side-linenumber " + diffParser.LINE_TYPE.INFO + "\"></td>\n" +
173-
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
174-
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\">" + utils.escape(block.header) + "</div>" +
175-
" </td>\n" +
176-
"</tr>\n";
177-
178-
fileHtml.right += "<tr>\n" +
179-
" <td class=\"d2h-code-side-linenumber " + diffParser.LINE_TYPE.INFO + "\"></td>\n" +
180-
" <td class=\"" + diffParser.LINE_TYPE.INFO + "\">" +
181-
" <div class=\"d2h-code-side-line " + diffParser.LINE_TYPE.INFO + "\"></div>" +
182-
" </td>\n" +
183-
"</tr>\n";
184-
185-
var oldLines = [], newLines = [];
186-
187-
for (var i = 0; i < block.lines.length; i++) {
188-
var line = block.lines[i];
189-
var escapedLine = utils.escape(line.content);
190-
191-
if (line.type == diffParser.LINE_TYPE.CONTEXT && !oldLines.length && !newLines.length) {
192-
fileHtml.left += generateSingleLineHtml(line.type, line.oldNumber, escapedLine);
193-
fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, escapedLine);
194-
} else if (line.type == diffParser.LINE_TYPE.INSERTS && !oldLines.length && !newLines.length) {
195-
fileHtml.left += generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, "", "", "");
196-
fileHtml.right += generateSingleLineHtml(line.type, line.newNumber, escapedLine);
197-
} else if (line.type == diffParser.LINE_TYPE.DELETES && !newLines.length) {
198-
oldLines.push(line);
199-
} else if (line.type == diffParser.LINE_TYPE.INSERTS && oldLines.length > newLines.length) {
200-
newLines.push(line);
201-
} else {
202-
var j = 0;
203-
var oldLine, newLine;
204-
var oldEscapedLine, newEscapedLine;
205-
206-
if (oldLines.length === newLines.length) {
207-
for (j = 0; j < oldLines.length; j++) {
208-
oldLine = oldLines[j];
209-
newLine = newLines[j];
210-
oldEscapedLine = utils.escape(oldLine.content);
211-
newEscapedLine = utils.escape(newLine.content);
212-
213-
var diff = diffHighlight(oldEscapedLine, newEscapedLine, file.isTripleDiff);
214-
215-
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, diff.o);
216-
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, diff.n);
217-
}
218-
} else {
219-
var maxLinesNumber = Math.max(oldLines.length, newLines.length);
220-
for (j = 0; j < maxLinesNumber; j++) {
221-
oldLine = oldLines[j];
222-
newLine = newLines[j];
223-
224-
if (oldLine && newLine) {
225-
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, utils.escape(oldLine.content));
226-
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, utils.escape(newLine.content));
227-
} else if (oldLine) {
228-
fileHtml.left += generateSingleLineHtml(oldLine.type, oldLine.oldNumber, utils.escape(oldLine.content));
229-
fileHtml.right += generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, "", "", "");
230-
} else if (newLine) {
231-
fileHtml.left += generateSingleLineHtml(diffParser.LINE_TYPE.CONTEXT, "", "", "");
232-
fileHtml.right += generateSingleLineHtml(newLine.type, newLine.newNumber, utils.escape(newLine.content));
233-
} else {
234-
console.error("How did it get here?");
235-
}
236-
}
237-
}
238-
239-
oldLines = [];
240-
newLines = [];
241-
i--;
242-
}
243-
}
244-
});
245-
246-
return fileHtml;
247-
};
248-
249-
var generateSingleLineHtml = function (type, number, content) {
250-
return "<tr>\n" +
251-
" <td class=\"d2h-code-side-linenumber " + type + "\">" + number + "</td>\n" +
252-
" <td class=\"" + type + "\">" +
253-
" <div class=\"d2h-code-side-line " + type + "\">" + content + "</div>" +
254-
" </td>\n" +
255-
" </tr>\n";
256-
};
257-
258-
/*
259-
* HTML Helpers
260-
*/
261-
262-
var getDiffName = function (oldFilename, newFilename) {
263-
if (oldFilename && newFilename && oldFilename !== newFilename) {
264-
return oldFilename + " -> " + newFilename;
265-
} else if (newFilename) {
266-
return newFilename;
267-
} else if (oldFilename) {
268-
return oldFilename;
269-
} else {
270-
return "Unknown filename";
271-
}
272-
};
273-
274-
var removeIns = function (line) {
275-
return line.replace(/(<ins>((.|\n)*?)<\/ins>)/g, "");
276-
};
277-
278-
var removeDel = function (line) {
279-
return line.replace(/(<del>((.|\n)*?)<\/del>)/g, "");
280-
};
281-
282-
function diffHighlight(diffLine1, diffLine2, isTripleDiff) {
283-
var lineStart1, lineStart2;
284-
285-
var prefixSize = 1;
286-
287-
if (isTripleDiff) prefixSize = 2;
288-
289-
lineStart1 = diffLine1.substr(0, prefixSize);
290-
lineStart2 = diffLine2.substr(0, prefixSize);
291-
292-
diffLine1 = diffLine1.substr(prefixSize);
293-
diffLine2 = diffLine2.substr(prefixSize);
294-
295-
var diff = jsDiff.diffChars(diffLine1, diffLine2);
296-
297-
var highlightedLine = "";
298-
299-
diff.forEach(function (part) {
300-
var elemType = part.added ? 'ins' : part.removed ? 'del' : null;
301-
302-
if (elemType !== null) highlightedLine += "<" + elemType + ">" + part.value + "</" + elemType + ">";
303-
else highlightedLine += part.value;
304-
});
305-
306-
return {
307-
o: lineStart1 + removeIns(highlightedLine),
308-
n: lineStart2 + removeDel(highlightedLine)
309-
}
310-
}
16+
HtmlPrinter.prototype.generateSideBySideJsonHtml = sideBySidePrinter.generateSideBySideJsonHtml;

0 commit comments

Comments
 (0)