diff --git a/diff2html.css b/diff2html.css index 38d59ad..f6a1c1d 100644 --- a/diff2html.css +++ b/diff2html.css @@ -3,18 +3,15 @@ * Diff to HTML (diff2html.css) * Author: rtfpessoa * Date: Friday 29 August 2014 - * Last Update: Friday 6 September 2014 + * Last Update: Saturday 6 September 2014 * */ -body { - text-align: center; -} - #d2h-wrapper { - display: inline-block; + display: block; + margin: 0 auto; text-align: left; - width: 920px; + width: 900px; } .d2h-file-wrapper { @@ -27,50 +24,47 @@ body { 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-block; - font-family: monospace, monospace; font-size: 12px; + text-align: center; + width: 70px; } .d2h-lines-added { + display: inline-block; background-color: #ceffce; border: 1px solid #b4e2b4; color: #399839; border-radius: 5px 0 0 5px; - padding: 5px; + padding: 2px; + width: 25px; } .d2h-lines-deleted { + display: inline-block; background-color: #f7c8c8; border: 1px solid #e9aeae; color: #c33; border-radius: 0 5px 5px 0; - padding: 5px; + padding: 2px; + width: 25px; } .d2h-file-name { display: inline-block; - font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; height: 33px; line-height: 33px; -} - -.d2h-file-diff { - overflow: auto; + width: 750px; } .d2h-file-diff > div { width: 100%; } -.d2h-code-wrapper { - overflow-x: auto; - overflow-y: hidden; -} - .d2h-diff-table { border-collapse: collapse; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; @@ -80,33 +74,41 @@ body { } .d2h-code-line { - overflow: scroll; white-space: pre; padding-left: 10px; padding-right: 10px; + height: 18px; + line-height: 18px; + + width: 776px; + overflow: hidden; } .d2h-code-line del { display: inline-block; margin-top: -1px; text-decoration: none; - background-color: #ffb6ba; + background-color: #f99; font-weight: 700; + border-radius: 0.2em; } .d2h-code-line ins { display: inline-block; margin-top: -1px; text-decoration: none; - background-color: #97f295; + background-color: #6f7; font-weight: 700; + border-radius: 0.2em; } .d2h-code-linenumber { width: 1%; - min-width: 25px; + min-width: 30px; padding-left: 10px; padding-right: 10px; + height: 18px; + line-height: 18px; color: rgba(0, 0, 0, 0.3); text-align: right; border: solid #eeeeee; @@ -114,22 +116,18 @@ body { cursor: pointer; } - -.d2h-delete { - vertical-align: middle; +.d2h-del { background-color: #f7c8c8; border-color: #e9aeae; } -.d2h-insert { - vertical-align: middle; +.d2h-ins { background-color: #ceffce; border-color: #b4e2b4; } .d2h-info { background-color: #f8fafd; - vertical-align: middle; color: rgba(0, 0, 0, 0.3); border-color: #d5e4f2; } diff --git a/diff2html.js b/diff2html.js index 338a4d9..385f7a1 100644 --- a/diff2html.js +++ b/diff2html.js @@ -3,7 +3,7 @@ * Diff to HTML (diff2html.js) * Author: rtfpessoa * Date: Friday 29 August 2014 - * Last Update: Friday 6 September 2014 + * Last Update: Saturday 6 September 2014 * * Diff command: * git diff --word-diff-regex=. HEAD~1 @@ -14,14 +14,18 @@ ClassVariable = (function () { - var CSS_STYLES = { - INFO: "d2h-info", - CONTEXT: "d2h-context", - NEW: "d2h-insert", - DELETED: "d2h-delete" - }; + var LINE_TYPE = { + INSERTS: "d2h-ins", + ALL_NEW: "d2h-all-ins", - var BLOCK_HEADER_LINE = "..."; + DELETES: "d2h-del", + ALL_DELETED: "d2h-all-del", + + INSERTS_AND_DELETES: "d2h-ins-and-del", + CONTEXT: "d2h-cntx", + + INFO: "d2h-info" + }; function Diff2Html() { } @@ -97,67 +101,77 @@ currentBlock.lines = []; currentBlock.oldStartLine = oldLine = values[2]; currentBlock.newStartLine = newLine = values[4]; - - /* create block header line */ - var currentLine = {}; - currentLine.type = CSS_STYLES.INFO; - currentLine.content = line; - currentLine.oldNumber = BLOCK_HEADER_LINE; - currentLine.newNumber = BLOCK_HEADER_LINE; - - /* add line to block */ - currentBlock.lines.push(currentLine); + currentBlock.header = line; }; var createLine = function (line) { + /* Line Types */ var isLineWithInserts = /{\+.*?\+}/.exec(line); - var isLineWithDeletes = /\[-.*?-\]/.exec(line); var isNewLine = /^{\+.*?\+}$/.exec(line); + + var isLineWithDeletes = /\[-.*?-\]/.exec(line); + var isRemovedLine = /^\[-.*?-\]$/.exec(line); + + var isLineWithBoth = isLineWithInserts && isLineWithDeletes; var isContextLine = !isLineWithInserts && !isLineWithDeletes; var currentLine = {}; + currentLine.content = line; - if (isContextLine) { - currentLine = {}; - currentLine.type = CSS_STYLES.CONTEXT; + /* fill the line data */ + if (isLineWithBoth) { + currentFile.deletedLines++; + currentFile.addedLines++; + + currentLine.type = LINE_TYPE.INSERTS_AND_DELETES; currentLine.oldNumber = oldLine++; currentLine.newNumber = newLine++; - currentLine.content = line; currentBlock.lines.push(currentLine); - } else { - if (isLineWithDeletes) { - currentFile.deletedLines++; + } else if (isContextLine) { - currentLine = {}; - currentLine.type = CSS_STYLES.DELETED; - currentLine.oldNumber = oldLine++; - currentLine.newNumber = null; - currentLine.content = line; + currentLine.type = LINE_TYPE.CONTEXT; + currentLine.oldNumber = oldLine++; + currentLine.newNumber = newLine++; - currentBlock.lines.push(currentLine); + currentBlock.lines.push(currentLine); - } + } else if (isNewLine) { + currentFile.addedLines++; - if (isLineWithInserts) { - currentFile.addedLines++; + currentLine.type = LINE_TYPE.ALL_NEW; + currentLine.oldNumber = null; + currentLine.newNumber = newLine++; - currentLine = {}; - currentLine.type = CSS_STYLES.NEW; - currentLine.oldNumber = null; - currentLine.newNumber = newLine++; - currentLine.content = line; + currentBlock.lines.push(currentLine); - /* fix line numbers when new chars but no deletes and no whole new line */ - if (isLineWithInserts && !isLineWithDeletes && !isNewLine) { - currentFile.deletedLines++; + } else if (isRemovedLine) { + currentFile.deletedLines++; - currentLine.oldNumber = oldLine++; - } + currentLine.type = LINE_TYPE.ALL_DELETED; + currentLine.oldNumber = oldLine++; + currentLine.newNumber = null; - currentBlock.lines.push(currentLine); - } + currentBlock.lines.push(currentLine); + + } else if (isLineWithInserts) { + currentFile.addedLines++; + + currentLine.type = LINE_TYPE.INSERTS; + currentLine.oldNumber = oldLine++; + currentLine.newNumber = newLine++; + + currentBlock.lines.push(currentLine); + + } else if (isLineWithDeletes) { + currentFile.deletedLines++; + + currentLine.type = LINE_TYPE.DELETES; + currentLine.oldNumber = oldLine++; + currentLine.newNumber = newLine++; + + currentBlock.lines.push(currentLine); } }; @@ -188,6 +202,10 @@ return files; }; + /* + * Line By Line HTML + */ + var generateJsonHtml = function (diffFiles) { return "
\n" + diffFiles.map(function (file) { @@ -213,50 +231,123 @@ "
\n"; }; + var generateFileHtml = function (file) { + return file.blocks.map(function (block) { + + return "\n" + + " \n" + + " " + + "
" + escape(block.header) + "
" + + " \n" + + "\n" + + + block.lines.map(function (line) { + + var newLine = function () { + var lineData = {}; + lineData.oldLine = valueOrEmpty(line.oldNumber); + lineData.newLine = valueOrEmpty(line.newNumber); + + return lineData; + }; + + var escapedLine = escape(line.content); + + var lines = []; + var lineData = {}; + + switch (line.type) { + case LINE_TYPE.INSERTS: + case LINE_TYPE.ALL_NEW: + lineData = newLine(); + lineData.content = generateLineInsertions(escapedLine); + lineData.type = LINE_TYPE.INSERTS; + lines.push(lineData); + break; + case LINE_TYPE.DELETES: + case LINE_TYPE.ALL_DELETED: + lineData = newLine(); + lineData.content = generateLineDeletions(escapedLine); + lineData.type = LINE_TYPE.DELETES; + lines.push(lineData); + break; + case LINE_TYPE.INSERTS_AND_DELETES: + lineData = newLine(); + lineData.content = generateLineDeletions(escapedLine); + lineData.type = LINE_TYPE.DELETES; + lines.push(lineData); + + lineData = newLine(); + lineData.content = generateLineInsertions(escapedLine); + lineData.type = LINE_TYPE.INSERTS; + lines.push(lineData); + break; + default: + lineData = newLine(); + lineData.content = escapedLine; + lineData.type = LINE_TYPE.CONTEXT; + lines.push(lineData); + break; + } + + return lines.map(generateLineHtml).join("\n"); + }).join("\n"); + }).join("\n"); + }; + + var generateLineHtml = function (line) { + return "\n" + + " " + line.oldLine + "\n" + + " " + line.newLine + "\n" + + " " + + "
" + line.content + "
" + + " \n" + + "\n"; + }; + + /* + * Side By Side HTML (work in progress) + */ + + /* + * HTML Helpers + */ + var getDiffName = function (oldFilename, newFilename) { return oldFilename === newFilename ? newFilename : oldFilename + " -> " + newFilename; }; - var generateFileHtml = function (file) { - return file.blocks.map(function (block) { - return block.lines.map(function (line) { - - var oldLine = valueOrEmpty(line.oldNumber); - var newLine = valueOrEmpty(line.newNumber); - - var escapedLine = escape(line.content); - - if (line.type === CSS_STYLES.NEW) { - escapedLine = generateLineInsertions(escapedLine); - } else if (line.type === CSS_STYLES.DELETED) { - escapedLine = generateLineDeletions(escapedLine); - } - - return "\n" + - " " + oldLine + "\n" + - " " + newLine + "\n" + - "
" + escapedLine + "\n" + - "\n"; - }).join("\n"); - }).join("\n"); - }; - var generateLineInsertions = function (line) { - return line.replace(/(\[-.*?-\])/g, ""). + return line.slice(0).replace(/(\[-.*?-\])/g, ""). replace(/({\+(.*?)\+})/g, "$2"); }; var generateLineDeletions = function (line) { - return line.replace(/({\+.*?\+})/g, ""). + return line.slice(0).replace(/({\+.*?\+})/g, ""). replace(/(\[-(.*?)-\])/g, "$2"); }; + var removeDeletes = function (line) { + return line.slice(0).replace(/({\+.*?\+})/g, ""). + replace(/(\[-.*?-\])/g, ""); + }; + + var removeInserts = function (line) { + return line.slice(0).replace(/({\+.*?\+})/g, ""). + replace(/(\[-.*?-\])/g, ""); + }; + + var cleanLine = function (line) { + return line.slice(0).replace(/({\+(.*?)\+})/g, "$2"). + replace(/(\[-(.*?)-\])/g, "$2"); + }; + /* * Utils */ function escape(str) { - return str + return str.slice(0) .replace(/&/g, "&") .replace(//g, ">") diff --git a/diff2html.min.js b/diff2html.min.js index 03aa001..ae7566a 100644 --- a/diff2html.min.js +++ b/diff2html.min.js @@ -1 +1 @@ -!function(window){var ClassVariable;return ClassVariable=function(){function Diff2Html(){}function escape(str){return str.replace(/&/g,"&").replace(//g,">").replace(/\t/g," ")}function startsWith(str,start){return 0===str.indexOf(start)}function valueOrEmpty(value){return value?value:""}var CSS_STYLES={INFO:"d2h-info",CONTEXT:"d2h-context",NEW:"d2h-insert",DELETED:"d2h-delete"},BLOCK_HEADER_LINE="...";Diff2Html.prototype.getPrettyHtmlFromDiff=function(diffInput){var diffJson=generateDiffJson(diffInput);return generateJsonHtml(diffJson)},Diff2Html.prototype.getJsonFromDiff=function(diffInput){return generateDiffJson(diffInput)},Diff2Html.prototype.getPrettyHtmlFromJson=function(diffJson){return generateJsonHtml(diffJson)};var instance,generateDiffJson=function(diffInput){var files=[],currentFile=null,currentBlock=null,oldLine=null,newLine=null,saveBlock=function(){currentBlock&&(currentFile.blocks.push(currentBlock),currentBlock=null)},saveFile=function(){currentFile&&(files.push(currentFile),currentFile=null)},startFile=function(line){saveBlock(),saveFile(),currentFile={},currentFile.blocks=[],currentFile.deletedLines=0,currentFile.addedLines=0;var values=/^diff --git a\/(\S+) b\/(\S+).*$/.exec(line);currentFile.oldName=values[1],currentFile.newName=values[2]},startBlock=function(line){saveBlock();var values=/^(@@ -(\d+),(\d+) \+(\d+),(\d+) @@).*/.exec(line);currentBlock={},currentBlock.lines=[],currentBlock.oldStartLine=oldLine=values[2],currentBlock.newStartLine=newLine=values[4];var currentLine={};currentLine.type=CSS_STYLES.INFO,currentLine.content=line,currentLine.oldNumber=BLOCK_HEADER_LINE,currentLine.newNumber=BLOCK_HEADER_LINE,currentBlock.lines.push(currentLine)},createLine=function(line){var isLineWithInserts=/{\+.*?\+}/.exec(line),isLineWithDeletes=/\[-.*?-\]/.exec(line),isNewLine=/^{\+.*?\+}$/.exec(line),isContextLine=!isLineWithInserts&&!isLineWithDeletes,currentLine={};isContextLine?(currentLine={},currentLine.type=CSS_STYLES.CONTEXT,currentLine.oldNumber=oldLine++,currentLine.newNumber=newLine++,currentLine.content=line,currentBlock.lines.push(currentLine)):(isLineWithDeletes&&(currentFile.deletedLines++,currentLine={},currentLine.type=CSS_STYLES.DELETED,currentLine.oldNumber=oldLine++,currentLine.newNumber=null,currentLine.content=line,currentBlock.lines.push(currentLine)),isLineWithInserts&&(currentFile.addedLines++,currentLine={},currentLine.type=CSS_STYLES.NEW,currentLine.oldNumber=null,currentLine.newNumber=newLine++,currentLine.content=line,!isLineWithInserts||isLineWithDeletes||isNewLine||(currentFile.deletedLines++,currentLine.oldNumber=oldLine++),currentBlock.lines.push(currentLine)))},diffLines=diffInput.split("\n");return diffLines.forEach(function(line){!line||startsWith(line,"*")||startsWith(line,"new")||startsWith(line,"index")||startsWith(line,"---")||startsWith(line,"+++")||(startsWith(line,"diff")?startFile(line):currentFile&&startsWith(line,"@@")?startBlock(line):currentBlock&&createLine(line))}),saveBlock(),saveFile(),files},generateJsonHtml=function(diffFiles){return'
\n'+diffFiles.map(function(file){return'
\n
\n
\n +'+file.addedLines+'\n -'+file.deletedLines+'\n
\n
'+getDiffName(file.oldName,file.newName)+'
\n
\n
\n
\n \n \n '+generateFileHtml(file)+" \n
\n
\n
\n
\n"}).join("\n")+"
\n"},getDiffName=function(oldFilename,newFilename){return oldFilename===newFilename?newFilename:oldFilename+" -> "+newFilename},generateFileHtml=function(file){return file.blocks.map(function(block){return block.lines.map(function(line){var oldLine=valueOrEmpty(line.oldNumber),newLine=valueOrEmpty(line.newNumber),escapedLine=escape(line.content);return line.type===CSS_STYLES.NEW?escapedLine=generateLineInsertions(escapedLine):line.type===CSS_STYLES.DELETED&&(escapedLine=generateLineDeletions(escapedLine)),'\n '+oldLine+'\n '+newLine+'\n
'+escapedLine+"\n\n"}).join("\n")}).join("\n")},generateLineInsertions=function(line){return line.replace(/(\[-.*?-\])/g,"").replace(/({\+(.*?)\+})/g,"$2")},generateLineDeletions=function(line){return line.replace(/({\+.*?\+})/g,"").replace(/(\[-(.*?)-\])/g,"$2")};return{getInstance:function(){return void 0===instance&&(instance=new Diff2Html,instance.constructor=null),instance}}}(),window.Diff2Html=ClassVariable.getInstance(),window.Diff2Html}(window); \ No newline at end of file +!function(window){var ClassVariable;return ClassVariable=function(){function Diff2Html(){}function escape(str){return str.slice(0).replace(/&/g,"&").replace(//g,">").replace(/\t/g," ")}function startsWith(str,start){return 0===str.indexOf(start)}function valueOrEmpty(value){return value?value:""}var LINE_TYPE={INSERTS:"d2h-ins",ALL_NEW:"d2h-all-ins",DELETES:"d2h-del",ALL_DELETED:"d2h-all-del",INSERTS_AND_DELETES:"d2h-ins-and-del",CONTEXT:"d2h-cntx",INFO:"d2h-info"};Diff2Html.prototype.getPrettyHtmlFromDiff=function(diffInput){var diffJson=generateDiffJson(diffInput);return generateJsonHtml(diffJson)},Diff2Html.prototype.getJsonFromDiff=function(diffInput){return generateDiffJson(diffInput)},Diff2Html.prototype.getPrettyHtmlFromJson=function(diffJson){return generateJsonHtml(diffJson)};var instance,generateDiffJson=function(diffInput){var files=[],currentFile=null,currentBlock=null,oldLine=null,newLine=null,saveBlock=function(){currentBlock&&(currentFile.blocks.push(currentBlock),currentBlock=null)},saveFile=function(){currentFile&&(files.push(currentFile),currentFile=null)},startFile=function(line){saveBlock(),saveFile(),currentFile={},currentFile.blocks=[],currentFile.deletedLines=0,currentFile.addedLines=0;var values=/^diff --git a\/(\S+) b\/(\S+).*$/.exec(line);currentFile.oldName=values[1],currentFile.newName=values[2]},startBlock=function(line){saveBlock();var values=/^(@@ -(\d+),(\d+) \+(\d+),(\d+) @@).*/.exec(line);currentBlock={},currentBlock.lines=[],currentBlock.oldStartLine=oldLine=values[2],currentBlock.newStartLine=newLine=values[4],currentBlock.header=line},createLine=function(line){var isLineWithInserts=/{\+.*?\+}/.exec(line),isNewLine=/^{\+.*?\+}$/.exec(line),isLineWithDeletes=/\[-.*?-\]/.exec(line),isRemovedLine=/^\[-.*?-\]$/.exec(line),isLineWithBoth=isLineWithInserts&&isLineWithDeletes,isContextLine=!isLineWithInserts&&!isLineWithDeletes,currentLine={};currentLine.content=line,isLineWithBoth?(currentFile.deletedLines++,currentFile.addedLines++,currentLine.type=LINE_TYPE.INSERTS_AND_DELETES,currentLine.oldNumber=oldLine++,currentLine.newNumber=newLine++,currentBlock.lines.push(currentLine)):isContextLine?(currentLine.type=LINE_TYPE.CONTEXT,currentLine.oldNumber=oldLine++,currentLine.newNumber=newLine++,currentBlock.lines.push(currentLine)):isNewLine?(currentFile.addedLines++,currentLine.type=LINE_TYPE.ALL_NEW,currentLine.oldNumber=null,currentLine.newNumber=newLine++,currentBlock.lines.push(currentLine)):isRemovedLine?(currentFile.deletedLines++,currentLine.type=LINE_TYPE.ALL_DELETED,currentLine.oldNumber=oldLine++,currentLine.newNumber=null,currentBlock.lines.push(currentLine)):isLineWithInserts?(currentFile.addedLines++,currentLine.type=LINE_TYPE.INSERTS,currentLine.oldNumber=oldLine++,currentLine.newNumber=newLine++,currentBlock.lines.push(currentLine)):isLineWithDeletes&&(currentFile.deletedLines++,currentLine.type=LINE_TYPE.DELETES,currentLine.oldNumber=oldLine++,currentLine.newNumber=newLine++,currentBlock.lines.push(currentLine))},diffLines=diffInput.split("\n");return diffLines.forEach(function(line){!line||startsWith(line,"*")||startsWith(line,"new")||startsWith(line,"index")||startsWith(line,"---")||startsWith(line,"+++")||(startsWith(line,"diff")?startFile(line):currentFile&&startsWith(line,"@@")?startBlock(line):currentBlock&&createLine(line))}),saveBlock(),saveFile(),files},generateJsonHtml=function(diffFiles){return'
\n'+diffFiles.map(function(file){return'
\n
\n
\n +'+file.addedLines+'\n -'+file.deletedLines+'\n
\n
'+getDiffName(file.oldName,file.newName)+'
\n
\n
\n
\n \n \n '+generateFileHtml(file)+" \n
\n
\n
\n
\n"}).join("\n")+"
\n"},generateFileHtml=function(file){return file.blocks.map(function(block){return'\n \n
'+escape(block.header)+"
\n\n"+block.lines.map(function(line){var newLine=function(){var lineData={};return lineData.oldLine=valueOrEmpty(line.oldNumber),lineData.newLine=valueOrEmpty(line.newNumber),lineData},escapedLine=escape(line.content),lines=[],lineData={};switch(line.type){case LINE_TYPE.INSERTS:case LINE_TYPE.ALL_NEW:lineData=newLine(),lineData.content=generateLineInsertions(escapedLine),lineData.type=LINE_TYPE.INSERTS,lines.push(lineData);break;case LINE_TYPE.DELETES:case LINE_TYPE.ALL_DELETED:lineData=newLine(),lineData.content=generateLineDeletions(escapedLine),lineData.type=LINE_TYPE.DELETES,lines.push(lineData);break;case LINE_TYPE.INSERTS_AND_DELETES:lineData=newLine(),lineData.content=generateLineDeletions(escapedLine),lineData.type=LINE_TYPE.DELETES,lines.push(lineData),lineData=newLine(),lineData.content=generateLineInsertions(escapedLine),lineData.type=LINE_TYPE.INSERTS,lines.push(lineData);break;default:lineData=newLine(),lineData.content=escapedLine,lineData.type=LINE_TYPE.CONTEXT,lines.push(lineData)}return lines.map(generateLineHtml).join("\n")}).join("\n")}).join("\n")},generateLineHtml=function(line){return'\n '+line.oldLine+'\n '+line.newLine+'\n
'+line.content+"
\n\n"},getDiffName=function(oldFilename,newFilename){return oldFilename===newFilename?newFilename:oldFilename+" -> "+newFilename},generateLineInsertions=function(line){return line.slice(0).replace(/(\[-.*?-\])/g,"").replace(/({\+(.*?)\+})/g,"$2")},generateLineDeletions=function(line){return line.slice(0).replace(/({\+.*?\+})/g,"").replace(/(\[-(.*?)-\])/g,"$2")};return{getInstance:function(){return void 0===instance&&(instance=new Diff2Html,instance.constructor=null),instance}}}(),window.Diff2Html=ClassVariable.getInstance(),window.Diff2Html}(window); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..2f20648 --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + + + Diff to HTML by rtfpessoa + + + + + + + + + + + + diff --git a/template.html b/template.html deleted file mode 100644 index 77b5f0f..0000000 --- a/template.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - Diff to HTML by rtfpessoa - - - - - - - - - - - -