mirror of
https://github.com/gitbucket/gitbucket.git
synced 2025-11-02 19:45:57 +01:00
Links to files and lines in the diff view (#2685)
This commit is contained in:
Naoki Takezoe
GitHub
@@ -10,6 +10,7 @@ import gitbucket.core.plugin.{PluginRegistry, RenderRequest}
|
||||
import gitbucket.core.service.RepositoryService.RepositoryInfo
|
||||
import gitbucket.core.service.{RepositoryService, RequestCache}
|
||||
import gitbucket.core.util.{FileUtil, JGitUtil, StringUtil}
|
||||
import org.apache.commons.codec.digest.DigestUtils
|
||||
import play.twirl.api.{Html, HtmlFormat}
|
||||
|
||||
/**
|
||||
@@ -506,4 +507,6 @@ object helpers extends AvatarImageProvider with LinkConverter with RequestCache
|
||||
s"$baseUrl${if (baseUrl.contains("?")) "&" else "?"}$queryString"
|
||||
}
|
||||
|
||||
def md5(value: String): String = DigestUtils.md5Hex(value)
|
||||
|
||||
}
|
||||
|
||||
@@ -8,6 +8,11 @@
|
||||
showLineNotes: Boolean)(implicit context: gitbucket.core.controller.Context)
|
||||
@import gitbucket.core.view.helpers
|
||||
@import org.eclipse.jgit.diff.DiffEntry.ChangeType
|
||||
<style>
|
||||
th.line-num {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@if(showIndex){
|
||||
<div class="pull-right" style="margin-bottom: 10px;">
|
||||
@if(oldCommitId.isEmpty && newCommitId.isDefined) {
|
||||
@@ -59,7 +64,7 @@
|
||||
</div>
|
||||
}
|
||||
<span class="diffstat"><i class="octicon octicon-diff-renamed"></i></span>
|
||||
<span class="monospace">@diff.oldPath → @diff.newPath</span>
|
||||
<a href="#diff-@helpers.md5(diff.newPath)" id="diff-@helpers.md5(diff.newPath)" class="file-hash"><span class="strong">@diff.oldPath → @diff.newPath</span></a>
|
||||
}
|
||||
@if(diff.changeType == ChangeType.ADD || diff.changeType == ChangeType.MODIFY){
|
||||
@if(newCommitId.isDefined){
|
||||
@@ -76,7 +81,7 @@
|
||||
<i class="octicon octicon-diff-modified"></i>
|
||||
}
|
||||
</span>
|
||||
<span class="monospace">@diff.newPath</span>
|
||||
<a href="#diff-@helpers.md5(diff.newPath)" id="diff-@helpers.md5(diff.newPath)" class="file-hash"><span class="strong">@diff.newPath</span></a>
|
||||
}
|
||||
@if(diff.changeType == ChangeType.DELETE){
|
||||
@if(oldCommitId.isDefined){
|
||||
@@ -86,7 +91,7 @@
|
||||
</div>
|
||||
}
|
||||
<span class="diffstat"><i class="octicon octicon-diff-removed"></i></span>
|
||||
<span class="monospace">@diff.oldPath</span>
|
||||
<a href="#diff-@helpers.md5(diff.oldPath)" id="diff-@helpers.md5(diff.oldPath)" class="file-hash"><span class="strong">@diff.oldPath</span></a>
|
||||
}
|
||||
@if(diff.oldMode != diff.newMode){
|
||||
<span class="monospace">@diff.oldMode → @diff.newMode</span>
|
||||
@@ -180,6 +185,10 @@ $(function(){
|
||||
}
|
||||
renderDiffs();
|
||||
|
||||
window.onhashchange = function(){
|
||||
updateHighlighting();
|
||||
}
|
||||
|
||||
$('.toggle-notes').change(function() {
|
||||
if (!$(this).prop('checked')) {
|
||||
$(this).closest('table').find('.not-diff.inline-comment-form').remove();
|
||||
@@ -188,7 +197,7 @@ $(function(){
|
||||
});
|
||||
|
||||
$('.ignore-whitespace').change(function() {
|
||||
renderOneDiff($(this).closest("table").find(".diffText"), window.viewType);
|
||||
renderOneDiff($(this).closest("table").find(".diffText"), window.viewType, $(this).closest("table").find(".file-hash")[0].id);
|
||||
});
|
||||
|
||||
function getInlineContainer(where) {
|
||||
@@ -208,7 +217,7 @@ $(function(){
|
||||
|
||||
function showCommentForm(commitId, fileName, oldLineNumber, newLineNumber, $tr){
|
||||
// assemble Ajax url
|
||||
var url = '@helpers.url(repository)/commit/' + commitId + '/comment/_form?fileName=' + fileName@issueId.map { id => + '&issueId=@id' };
|
||||
let url = '@helpers.url(repository)/commit/' + commitId + '/comment/_form?fileName=' + fileName@issueId.map { id => + '&issueId=@id' };
|
||||
if (!isNaN(oldLineNumber) && oldLineNumber) {
|
||||
url += ('&oldLineNumber=' + oldLineNumber)
|
||||
}
|
||||
@@ -218,7 +227,7 @@ $(function(){
|
||||
// send Ajax request
|
||||
$.get(url, { dataType : 'html' }, function(responseContent) {
|
||||
// create container
|
||||
var tmp;
|
||||
let tmp;
|
||||
if (!isNaN(oldLineNumber) && oldLineNumber) {
|
||||
if (!isNaN(newLineNumber) && newLineNumber) {
|
||||
tmp = getInlineContainer();
|
||||
@@ -240,16 +249,16 @@ $(function(){
|
||||
|
||||
// Add comment button
|
||||
$('.diff-outside').on('click','table.diff .add-comment',function() {
|
||||
var $this = $(this);
|
||||
var $tr = $this.closest('tr');
|
||||
var $check = $this.closest('table:not(.diff)').find('.toggle-notes');
|
||||
const $this = $(this);
|
||||
const $tr = $this.closest('tr');
|
||||
const $check = $this.closest('table:not(.diff)').find('.toggle-notes');
|
||||
if (!$check.prop('checked')) {
|
||||
$check.prop('checked', true).trigger('change');
|
||||
}
|
||||
if (!$tr.nextAll(':not(.not-diff):first').prev().hasClass('inline-comment-form')) {
|
||||
var commitId = $this.closest('.table-bordered').attr('commitId'),
|
||||
fileName = $this.closest('.table-bordered').attr('fileName'),
|
||||
oldLineNumber, newLineNumber;
|
||||
const commitId = $this.closest('.table-bordered').attr('commitId'),
|
||||
fileName = $this.closest('.table-bordered').attr('fileName');
|
||||
let oldLineNumber, newLineNumber;
|
||||
if (window.viewType == 0) {
|
||||
oldLineNumber = $this.parent().prev('.oldline').attr('line-number');
|
||||
newLineNumber = $this.parent().prev('.newline').attr('line-number');
|
||||
@@ -268,21 +277,37 @@ $(function(){
|
||||
|
||||
// Reply comment
|
||||
$('.diff-outside').on('click', '.reply-comment',function(){
|
||||
var $this = $(this);
|
||||
var $tr = $this.closest('tr');
|
||||
var commitId = $this.closest('.table-bordered').attr('commitId');
|
||||
var fileName = $this.data('filename');
|
||||
var oldLineNumber = $this.data('oldline');
|
||||
var newLineNumber = $this.data('newline');
|
||||
const $this = $(this);
|
||||
const $tr = $this.closest('tr');
|
||||
const commitId = $this.closest('.table-bordered').attr('commitId');
|
||||
const fileName = $this.data('filename');
|
||||
const oldLineNumber = $this.data('oldline');
|
||||
const newLineNumber = $this.data('newline');
|
||||
|
||||
showCommentForm(commitId, fileName, oldLineNumber, newLineNumber, $tr);
|
||||
});
|
||||
|
||||
// Line selection
|
||||
$('.diff-outside').on('click','table.diff th.line-num',function(e) {
|
||||
const $this = $(this);
|
||||
const hash = location.hash;
|
||||
const baseUrl = location.toString().split("#")[0];
|
||||
|
||||
if (e.shiftKey == true && hash.match(/#diff-\w+-L\d+(-L\d+)?/)) {
|
||||
const fragments = hash.split('-');
|
||||
window.history.pushState('', '', baseUrl + '#diff-' + fragments[1] + '-' + fragments[2] + '-' + $this[0].id.split('-')[2]);
|
||||
} else {
|
||||
window.history.pushState('', '', baseUrl + '#' + $this[0].id);
|
||||
}
|
||||
getSelection().empty();
|
||||
updateHighlighting();
|
||||
});
|
||||
|
||||
function renderOneCommitCommentIntoDiff($v, diff){
|
||||
//var filename = $v.attr('filename');
|
||||
var oldline = $v.attr('oldline');
|
||||
var newline = $v.attr('newline');
|
||||
var tmp;
|
||||
const oldline = $v.attr('oldline');
|
||||
const newline = $v.attr('newline');
|
||||
let tmp;
|
||||
if (typeof oldline !== 'undefined') {
|
||||
if (typeof newline !== 'undefined') {
|
||||
tmp = getInlineContainer();
|
||||
@@ -312,8 +337,8 @@ $(function(){
|
||||
}
|
||||
del = 5 - add;
|
||||
}
|
||||
var ret = $('<div class="diffstat-bar">');
|
||||
for(var i = 0; i < 5; i++){
|
||||
const ret = $('<div class="diffstat-bar">');
|
||||
for(let i = 0; i < 5; i++){
|
||||
if(add){
|
||||
ret.append('<span class="text-diff-added">■</span>');
|
||||
add--;
|
||||
@@ -327,13 +352,13 @@ $(function(){
|
||||
return ret;
|
||||
}
|
||||
|
||||
function renderOneDiff(diffText, viewType){
|
||||
var table = diffText.closest("table[data-diff-id]");
|
||||
var i = table.data("diff-id");
|
||||
var ignoreWhiteSpace = table.find('.ignore-whitespace').prop('checked');
|
||||
diffUsingJS('oldText-' + i, 'newText-' + i, diffText.attr('id'), viewType, ignoreWhiteSpace);
|
||||
var add = diffText.find("table").attr("add") * 1;
|
||||
var del = diffText.find("table").attr("del") * 1;
|
||||
function renderOneDiff(diffText, viewType, fileHash){
|
||||
const table = diffText.closest("table[data-diff-id]");
|
||||
const i = table.data("diff-id");
|
||||
const ignoreWhiteSpace = table.find('.ignore-whitespace').prop('checked');
|
||||
diffUsingJS('oldText-' + i, 'newText-' + i, diffText.attr('id'), viewType, ignoreWhiteSpace, fileHash);
|
||||
const add = diffText.find("table").attr("add") * 1;
|
||||
const del = diffText.find("table").attr("del") * 1;
|
||||
table.find(".diffstat").text(add + del + " ").append(renderStatBar(add, del)).attr("title", add + " additions & " + del + " deletions").tooltip();
|
||||
$('span.diffstat[data-diff-id="' + i + '"]')
|
||||
.html('<span class="text-diff-added">+' + add + '</span><span class="text-diff-deleted">-' + del + '</span>')
|
||||
@@ -347,7 +372,7 @@ $(function(){
|
||||
});
|
||||
}
|
||||
@if(showLineNotes){
|
||||
var fileName = table.attr('filename');
|
||||
const fileName = table.attr('filename');
|
||||
$('.inline-comment').each(function(i, v) {
|
||||
if($(this).attr('filename') == fileName){
|
||||
renderOneCommitCommentIntoDiff($(this), table);
|
||||
@@ -358,13 +383,13 @@ $(function(){
|
||||
}
|
||||
|
||||
function renderReplyComment($table){
|
||||
var elements = {};
|
||||
var filename, newline, oldline;
|
||||
const elements = {};
|
||||
let filename, newline, oldline;
|
||||
$table.find('.comment-box-container .inline-comment').each(function(i, e){
|
||||
filename = $(e).attr('filename');
|
||||
newline = $(e).attr('newline');
|
||||
oldline = $(e).attr('oldline');
|
||||
var key = filename + '-' + newline + '-' + oldline;
|
||||
const key = filename + '-' + newline + '-' + oldline;
|
||||
elements[key] = {
|
||||
element: $(e),
|
||||
filename: filename,
|
||||
@@ -372,18 +397,18 @@ $(function(){
|
||||
oldline: oldline
|
||||
};
|
||||
});
|
||||
for(var key in elements){
|
||||
for(const key in elements){
|
||||
filename = elements[key]['filename'];
|
||||
oldline = elements[key]['oldline']; //? elements[key]['oldline'] : '';
|
||||
newline = elements[key]['newline']; //? elements[key]['newline'] : '';
|
||||
|
||||
var $v = $('<div class="commit-comment-box reply-comment-box">')
|
||||
const $v = $('<div class="commit-comment-box reply-comment-box">')
|
||||
.append($('<input type="text" class="form-control reply-comment" placeholder="Reply..." '
|
||||
+ 'data-filename="' + filename + '" '
|
||||
+ 'data-newline="' + newline + '" '
|
||||
+ 'data-oldline="' + oldline + '">'));
|
||||
|
||||
var tmp;
|
||||
let tmp;
|
||||
if (typeof oldline !== 'undefined') {
|
||||
if (typeof newline !== 'undefined') {
|
||||
tmp = getInlineContainer();
|
||||
@@ -399,16 +424,19 @@ $(function(){
|
||||
}
|
||||
}
|
||||
|
||||
function renderDiffs(){
|
||||
var i = 0, diffs = $('.diffText');
|
||||
function renderDiffs() {
|
||||
const diffs = $('.diffText');
|
||||
let i = 0;
|
||||
function render(){
|
||||
if(diffs[i]){
|
||||
var $table = renderOneDiff($(diffs[i]), window.viewType);
|
||||
if (diffs[i]) {
|
||||
const $table = renderOneDiff($(diffs[i]), window.viewType, $('.file-hash')[i].id);
|
||||
@if(hasWritePermission) {
|
||||
renderReplyComment($table);
|
||||
}
|
||||
i++;
|
||||
setTimeout(render);
|
||||
} else {
|
||||
updateHighlighting();
|
||||
}
|
||||
}
|
||||
render();
|
||||
@@ -416,7 +444,7 @@ $(function(){
|
||||
});
|
||||
|
||||
function changeDisplaySetting(key, value){
|
||||
var url = '';
|
||||
let url = '';
|
||||
window.params[key] = value;
|
||||
for(key in window.params){
|
||||
if(window.params[key] != ''){
|
||||
@@ -429,4 +457,47 @@ function changeDisplaySetting(key, value){
|
||||
}
|
||||
location.href = url;
|
||||
}
|
||||
|
||||
let scrolling = false;
|
||||
|
||||
/**
|
||||
* Highlight lines which are specified by URL hash.
|
||||
*/
|
||||
function updateHighlighting(){
|
||||
const hash = location.hash;
|
||||
$('tr.highlight').removeClass('highlight');
|
||||
if (hash.match(/#diff-(\w+)-[LR]\d+(-[LR]\d+)?/)) {
|
||||
const fragments = hash.substr(1).split('-');
|
||||
if (fragments.length == 3) {
|
||||
const tr = $('th#diff-' + fragments[1] + '-' + fragments[2]).closest('tr');
|
||||
tr.addClass('highlight');
|
||||
if(!scrolling){
|
||||
$(window).scrollTop($('th#diff-' + fragments[1] + '-' + fragments[2]).closest('tr').offset().top);
|
||||
}
|
||||
} else if (fragments.length > 3) {
|
||||
let highlight = false;
|
||||
$('th[id^=diff-' + fragments[1] + '-').each(function(i, th) {
|
||||
if (th.id.split('-')[2] == fragments[2]) { // start
|
||||
highlight = true;
|
||||
$(th.closest('tr')).addClass('highlight');
|
||||
} else if (highlight == true) {
|
||||
if (th.id.split('-')[2] == fragments[3]) { // end
|
||||
$(th.closest('tr')).addClass('highlight');
|
||||
return false;
|
||||
} else {
|
||||
$(th.closest('tr')).addClass('highlight');
|
||||
}
|
||||
}
|
||||
});
|
||||
if(!scrolling){
|
||||
$(window).scrollTop($('th#diff-' + fragments[1] + '-' + fragments[2]).closest('tr').offset().top);
|
||||
}
|
||||
}
|
||||
} else if (hash != ''){
|
||||
if (!scrolling) {
|
||||
$(window).scrollTop($(hash).offset().top);
|
||||
}
|
||||
}
|
||||
scrolling = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -106,17 +106,15 @@
|
||||
}
|
||||
<script>
|
||||
$(window).on('load', function(){
|
||||
updateHighlighting();
|
||||
|
||||
window.onhashchange = function(){
|
||||
updateHighlighting();
|
||||
}
|
||||
|
||||
var pre = $('pre.prettyprint');
|
||||
function updateSourceLineNum(){
|
||||
const pre = $('pre.prettyprint');
|
||||
function updateSourceLineNum() {
|
||||
$('.source-line-num').remove();
|
||||
var pos = pre.find('ol.linenums').position();
|
||||
if(pos){
|
||||
const pos = pre.find('ol.linenums').position();
|
||||
if (pos) {
|
||||
$('<div class="source-line-num">').css({
|
||||
height : pre.height(),
|
||||
width : '48px',
|
||||
@@ -125,34 +123,40 @@ $(window).on('load', function(){
|
||||
top : pos.top + 'px',
|
||||
left : pos.left + 'px'
|
||||
}).click(function(e){
|
||||
var pos = $(this).data("pos");
|
||||
if(!pos){
|
||||
let pos = $(this).data("pos");
|
||||
if (!pos) {
|
||||
pos = $('ol.linenums li').map(function(){ return { id: $(this).attr("id"), top: $(this).position().top} }).toArray();
|
||||
$(this).data("pos",pos);
|
||||
}
|
||||
for(var i = 0; i < pos.length-1; i++){
|
||||
let i = 0;
|
||||
for(i = 0; i < pos.length - 1; i++){
|
||||
if(pos[i + 1].top > e.pageY){
|
||||
break;
|
||||
}
|
||||
}
|
||||
var line = pos[i].id.replace(/^L/,'');
|
||||
var hash = location.hash;
|
||||
var commitUrl = '@helpers.url(repository)/blob/@helpers.encodeRefName((latestCommit.id :: pathList).mkString("/"))';
|
||||
if(e.shiftKey == true && hash.match(/#L\d+(-L\d+)?/)){
|
||||
var lines = hash.split('-');
|
||||
window.history.pushState('', '', commitUrl + lines[0] + '-L' + line);
|
||||
const line = pos[i].id.replace(/^L/,'');
|
||||
const hash = location.hash;
|
||||
const baseUrl = location.toString().split("#")[0];
|
||||
if (e.shiftKey == true && hash.match(/#L\d+(-L\d+)?/)) {
|
||||
const fragments = hash.split('-');
|
||||
window.history.pushState('', '', baseUrl + fragments[0] + '-L' + line);
|
||||
} else {
|
||||
var p = $("#L"+line).attr('id',"");
|
||||
window.history.pushState('', '', commitUrl + '#L' + line);
|
||||
p.attr('id','L'+line);
|
||||
const p = $("#L" + line).attr('id', '');
|
||||
window.history.pushState('', '', baseUrl + '#L' + line);
|
||||
p.attr('id','L' + line);
|
||||
}
|
||||
$("#branchCtrlWrapper .btn .muted").text("tree:");
|
||||
$("#branchCtrlWrapper .btn .strong").text("@latestCommit.id.substring(0, 10)");
|
||||
getSelection().empty();
|
||||
updateHighlighting();
|
||||
}).appendTo(pre);
|
||||
updateHighlighting();
|
||||
} else {
|
||||
// Maybe code view is not initialized yet. Retry until succeed.
|
||||
setTimeout(updateSourceLineNum, 300);
|
||||
}
|
||||
}
|
||||
var repository = $('.blame-action').data('repository');
|
||||
const repository = $('.blame-action').data('repository');
|
||||
$('.blame-action').click(function(e){
|
||||
if(history.pushState && $('pre.prettyprint.no-renderable').length){
|
||||
e.preventDefault();
|
||||
@@ -162,44 +166,45 @@ $(window).on('load', function(){
|
||||
});
|
||||
|
||||
function updateBlame(){
|
||||
var m = /\/(blame|blob)(\/.*)$/.exec(location.href);
|
||||
var mode = m[1];
|
||||
const m = /\/(blame|blob)(\/.*)$/.exec(location.href);
|
||||
const mode = m[1];
|
||||
$('.blame-action').toggleClass("active", mode=='blame').attr('href', repository + (m[1] == 'blame' ? '/blob' : '/blame') + m[2]);
|
||||
if(pre.parents("div.box-content-bottom").find(".blame").length){
|
||||
pre.parent().toggleClass("blame-container", mode == 'blame');
|
||||
updateSourceLineNum();
|
||||
return;
|
||||
}
|
||||
if(mode=='blob'){
|
||||
if(mode == 'blob'){
|
||||
updateSourceLineNum();
|
||||
return;
|
||||
}
|
||||
$(document.body).toggleClass('no-box-shadow', document.body.style.boxShadow === undefined);
|
||||
$('.blame-action').addClass("active");
|
||||
var base = $('<div class="blame">').css({height: pre.height()}).prependTo(pre.parents("div.box-content-bottom"));
|
||||
const base = $('<div class="blame">').css({height: pre.height()}).prependTo(pre.parents("div.box-content-bottom"));
|
||||
base.parent().addClass("blame-container");
|
||||
updateSourceLineNum();
|
||||
$.get($('.blame-action').data('url')).done(function(data){
|
||||
var blame = data.blame;
|
||||
var index = [];
|
||||
for(var i = 0; i < blame.length; i++){
|
||||
for(var j = 0; j < blame[i].lines.length; j++){
|
||||
let blame = data.blame;
|
||||
let lastDiv;
|
||||
const now = new Date().getTime();
|
||||
const index = [];
|
||||
for(let i = 0; i < blame.length; i++){
|
||||
for(let j = 0; j < blame[i].lines.length; j++){
|
||||
index[blame[i].lines[j]] = blame[i];
|
||||
}
|
||||
}
|
||||
var blame, lastDiv, now = new Date().getTime();
|
||||
|
||||
$('pre.prettyprint ol.linenums li').each(function(i, e){
|
||||
var p = $(e).position();
|
||||
var h = $(e).height();
|
||||
const p = $(e).position();
|
||||
const h = $(e).height();
|
||||
if(blame == index[i]){
|
||||
lastDiv.css("min-height",(p.top + h + 1) - lastDiv.position().top);
|
||||
} else {
|
||||
$(e).addClass('blame-sep')
|
||||
blame = index[i];
|
||||
var sha = $('<div class="blame-sha">')
|
||||
.append($('<a>').attr("href", data.root + '/commit/' + blame.id).text(blame.id.substr(0,7)));
|
||||
if(blame.prev){
|
||||
const sha = $('<div class="blame-sha">')
|
||||
.append($('<a>').attr("href", data.root + '/commit/' + blame.id).text(blame.id.substr(0, 7)));
|
||||
if (blame.prev) {
|
||||
sha.append($('<br />'))
|
||||
.append($('<a class="muted-link">').text('prev').attr("href", data.root + '/blame/' + blame.prev + '/' + (blame.prevPath || data.path)));
|
||||
}
|
||||
@@ -221,51 +226,53 @@ $(window).on('load', function(){
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
$(document).on('expanded.pushMenu collapsed.pushMenu', function(e){
|
||||
setTimeout(updateBlame, 300);
|
||||
});
|
||||
|
||||
updateBlame();
|
||||
});
|
||||
|
||||
var scrolling = false;
|
||||
let scrolling = false;
|
||||
|
||||
/**
|
||||
* Hightlight lines which are specified by URL hash.
|
||||
* Highlight lines which are specified by URL hash.
|
||||
*/
|
||||
function updateHighlighting(){
|
||||
var hash = location.hash;
|
||||
var isDark = @{highlighterTheme.contains("dark").toString};
|
||||
if(hash.match(/#L\d+(-L\d+)?/)){
|
||||
if(isDark){
|
||||
function updateHighlighting() {
|
||||
const hash = location.hash;
|
||||
const isDark = @{highlighterTheme.contains("dark").toString};
|
||||
if (hash.match(/#L\d+(-L\d+)?/)) {
|
||||
if (isDark) {
|
||||
$('li.highlight').removeClass('highlight-dark');
|
||||
}else{
|
||||
} else {
|
||||
$('li.highlight').removeClass('highlight');
|
||||
}
|
||||
var lines = hash.substr(1).split('-');
|
||||
if(lines.length == 1){
|
||||
if(isDark){
|
||||
$('#' + lines[0]).addClass('highlight-dark');
|
||||
}else{
|
||||
$('#' + lines[0]).addClass('highlight');
|
||||
const fragments = hash.substr(1).split('-');
|
||||
if (fragments.length == 1) {
|
||||
if (isDark) {
|
||||
$('#' + fragments[0]).addClass('highlight-dark');
|
||||
} else {
|
||||
$('#' + fragments[0]).addClass('highlight');
|
||||
}
|
||||
if(!scrolling){
|
||||
$(window).scrollTop($('#' + lines[0]).offset().top - 40);
|
||||
$(window).scrollTop($('#' + fragments[0]).offset().top);
|
||||
}
|
||||
} else if(lines.length > 1){
|
||||
var start = parseInt(lines[0].substr(1));
|
||||
var end = parseInt(lines[1].substr(1));
|
||||
for(var i = start; i <= end; i++){
|
||||
if(isDark){
|
||||
} else if(fragments.length > 1){
|
||||
const start = parseInt(fragments[0].substr(1));
|
||||
const end = parseInt(fragments[1].substr(1));
|
||||
for (let i = start; i <= end; i++) {
|
||||
if (isDark) {
|
||||
$('#L' + i).addClass('highlight-dark');
|
||||
}else{
|
||||
} else {
|
||||
$('#L' + i).addClass('highlight');
|
||||
}
|
||||
}
|
||||
if(!scrolling){
|
||||
$(window).scrollTop($('#L' + start).offset().top - 40);
|
||||
if (!scrolling) {
|
||||
$(window).scrollTop($('#' + fragments[0]).offset().top);
|
||||
}
|
||||
}
|
||||
scrolling = true;
|
||||
}
|
||||
scrolling = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -292,6 +292,7 @@ div.box-content-bottom img {
|
||||
|
||||
table.table th.box-header {
|
||||
background-color: #f5f5f5;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
th.box-header .octicon {
|
||||
@@ -604,8 +605,11 @@ div.markdown-body pre.plain {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
li.highlight {
|
||||
li.highlight,
|
||||
table.diff tr.highlight>th.delete, table.diff tr.highlight>th.insert, table.diff tr.highlight>th.equal,
|
||||
table.diff tr.highlight>td.delete, table.diff tr.highlight>td.insert, table.diff tr.highlight>td.equal {
|
||||
background-color: #ffb;
|
||||
!important
|
||||
}
|
||||
|
||||
li.highlight-dark {
|
||||
|
||||
@@ -74,21 +74,24 @@ function displayErrors(data, elem){
|
||||
* @param outputId {String} element id of output element
|
||||
* @param viewType {Number} 0: split, 1: unified
|
||||
* @param ignoreSpace {Number} 0: include, 1: ignore
|
||||
* @param fileHash {SString} hash used for links to line numbers
|
||||
*/
|
||||
function diffUsingJS(oldTextId, newTextId, outputId, viewType, ignoreSpace) {
|
||||
var old = $('#' + oldTextId), head = $('#' + newTextId);
|
||||
function diffUsingJS(oldTextId, newTextId, outputId, viewType, ignoreSpace, fileHash) {
|
||||
const old = $('#' + oldTextId), head = $('#' + newTextId);
|
||||
let oldTextValue, headTextValue;
|
||||
old.is("textarea") ? (oldTextValue = old.data('val')) : (oldTextValue = old.attr('data-val'));
|
||||
head.is("textarea") ? (headTextvalue = head.data('val')) : (headTextValue = head.attr('data-val'));
|
||||
var render = new JsDiffRender({
|
||||
head.is("textarea") ? (headTextValue = head.data('val')) : (headTextValue = head.attr('data-val'));
|
||||
const render = new JsDiffRender({
|
||||
oldText : oldTextValue,
|
||||
oldTextName: old.data('file-name'),
|
||||
newText : headTextValue,
|
||||
newTextName: head.data('file-name'),
|
||||
ignoreSpace: ignoreSpace,
|
||||
contextSize: 4
|
||||
contextSize: 4,
|
||||
fileHash : fileHash
|
||||
});
|
||||
var diff = render[viewType == 1 ? "unified" : "split"]();
|
||||
if(viewType == 1){
|
||||
const diff = render[viewType == 1 ? "unified" : "split"]();
|
||||
if (viewType == 1) {
|
||||
diff.find('tr:last').after($('<tr><td></td><td></td><td></td></tr>'));
|
||||
} else {
|
||||
diff.find('tr:last').after($('<tr><td></td><td></td><td></td><td></td></tr>'));
|
||||
@@ -102,222 +105,224 @@ function jqSelectorEscape(val) {
|
||||
return val.replace(/[!"#$%&'()*+,.\/:;<=>?@\[\\\]^`{|}~]/g, '\\$&');
|
||||
}
|
||||
|
||||
function JsDiffRender(params){
|
||||
var baseTextLines = (params.oldText==="")?[]:params.oldText.split(/\r\n|\r|\n/);
|
||||
var headTextLines = (params.newText==="")?[]:params.newText.split(/\r\n|\r|\n/);
|
||||
var sm, ctx;
|
||||
if(params.ignoreSpace){
|
||||
var ignoreSpace = function(a){ return a.replace(/\s+/g,''); };
|
||||
function JsDiffRender(params) {
|
||||
const baseTextLines = (params.oldText==="")?[]:params.oldText.split(/\r\n|\r|\n/);
|
||||
const headTextLines = (params.newText==="")?[]:params.newText.split(/\r\n|\r|\n/);
|
||||
let sm, ctx;
|
||||
if (params.ignoreSpace) {
|
||||
const ignoreSpace = function(a){ return a.replace(/\s+/g,''); };
|
||||
sm = new difflib.SequenceMatcher(
|
||||
$.map(baseTextLines, ignoreSpace),
|
||||
$.map(headTextLines, ignoreSpace));
|
||||
ctx = this.flatten(sm.get_opcodes(), headTextLines, baseTextLines, function(text){ return ignoreSpace(text) === ""; });
|
||||
}else{
|
||||
} else {
|
||||
sm = new difflib.SequenceMatcher(baseTextLines, headTextLines);
|
||||
ctx = this.flatten(sm.get_opcodes(), headTextLines, baseTextLines, function(){ return false; });
|
||||
}
|
||||
var oplines = this.fold(ctx, params.contextSize);
|
||||
const oplines = this.fold(ctx, params.contextSize);
|
||||
|
||||
function prettyDom(text, fileName){
|
||||
var dom = null;
|
||||
return function(ln){
|
||||
if(dom===null){
|
||||
var html = prettyPrintOne(
|
||||
let dom = null;
|
||||
return function(ln) {
|
||||
if(dom === null) {
|
||||
const html = prettyPrintOne(
|
||||
text.replace(/&/g,'&').replace(/</g,'<').replace(/"/g,'"').replace(/>/g,'>').replace(/^\n/, '\n\n'),
|
||||
(/\.([^.]*)$/.exec(fileName)||[])[1],
|
||||
true);
|
||||
var re = /<li[^>]*id="?L([0-9]+)"?[^>]*>(.*?)<\/li>/gi, h;
|
||||
dom=[];
|
||||
while(h=re.exec(html)){
|
||||
dom[h[1]]=h[2];
|
||||
const re = /<li[^>]*id="?L([0-9]+)"?[^>]*>(.*?)<\/li>/gi;
|
||||
let h;
|
||||
dom = [];
|
||||
while (h = re.exec(html)) {
|
||||
dom[h[1]] = h[2];
|
||||
}
|
||||
}
|
||||
return dom[ln];
|
||||
};
|
||||
}
|
||||
return this.renders(oplines, prettyDom(params.oldText, params.oldTextName), prettyDom(params.newText, params.newTextName));
|
||||
return this.renders(oplines, prettyDom(params.oldText, params.oldTextName), prettyDom(params.newText, params.newTextName), params.fileHash);
|
||||
}
|
||||
$.extend(JsDiffRender.prototype,{
|
||||
renders: function(oplines, baseTextDom, headTextDom){
|
||||
renders: function(oplines, baseTextDom, headTextDom, fileHash){
|
||||
return {
|
||||
split:function(){
|
||||
var table = $('<table class="diff">');
|
||||
table.attr({add:oplines.add, del:oplines.del});
|
||||
var tbody = $('<tbody>').appendTo(table);
|
||||
for(var i=0;i<oplines.length;i++){
|
||||
var o = oplines[i];
|
||||
switch(o.change){
|
||||
case 'skip':
|
||||
$('<tr>').html('<th class="skip"></th><td colspan="3" class="skip">...</td>').appendTo(tbody);
|
||||
break;
|
||||
case 'delete':
|
||||
case 'insert':
|
||||
case 'equal':
|
||||
$('<tr>').append(
|
||||
lineNum('old',o.base, o.change),
|
||||
$('<td class="body">').html(o.base ? baseTextDom(o.base): "").addClass(o.change),
|
||||
lineNum('new',o.head, o.change),
|
||||
$('<td class="body">').html(o.head ? headTextDom(o.head): "").addClass(o.change)
|
||||
split: function(){
|
||||
const table = $('<table class="diff">');
|
||||
table.attr({ add: oplines.add, del: oplines.del });
|
||||
const tbody = $('<tbody>').appendTo(table);
|
||||
for (let i = 0; i < oplines.length; i++) {
|
||||
const o = oplines[i];
|
||||
switch (o.change) {
|
||||
case 'skip':
|
||||
$('<tr>').html('<th class="skip"></th><td colspan="3" class="skip">...</td>').appendTo(tbody);
|
||||
break;
|
||||
case 'delete':
|
||||
case 'insert':
|
||||
case 'equal':
|
||||
$('<tr>').append(
|
||||
lineNum('old', o.base, o.change, fileHash),
|
||||
$('<td class="body">').html(o.base ? baseTextDom(o.base): "").addClass(o.change),
|
||||
lineNum('new', o.head, o.change, fileHash),
|
||||
$('<td class="body">').html(o.head ? headTextDom(o.head): "").addClass(o.change)
|
||||
).appendTo(tbody);
|
||||
break;
|
||||
case 'replace':
|
||||
var ld = lineDiff(baseTextDom(o.base), headTextDom(o.head));
|
||||
$('<tr>').append(
|
||||
lineNum('old',o.base, 'delete'),
|
||||
$('<td class="body">').append(ld.base).addClass('delete'),
|
||||
lineNum('new',o.head, 'insert'),
|
||||
$('<td class="body">').append(ld.head).addClass('insert')
|
||||
break;
|
||||
case 'replace':
|
||||
const ld = lineDiff(baseTextDom(o.base), headTextDom(o.head));
|
||||
$('<tr>').append(
|
||||
lineNum('old', o.base, 'delete', fileHash),
|
||||
$('<td class="body">').append(ld.base).addClass('delete'),
|
||||
lineNum('new', o.head, 'insert', fileHash),
|
||||
$('<td class="body">').append(ld.head).addClass('insert')
|
||||
).appendTo(tbody);
|
||||
break;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return table;
|
||||
},
|
||||
unified:function(){
|
||||
var table = $('<table class="diff inlinediff">');
|
||||
table.attr({add:oplines.add, del:oplines.del});
|
||||
var tbody = $('<tbody>').appendTo(table);
|
||||
for(var i=0;i<oplines.length;i++){
|
||||
var o = oplines[i];
|
||||
switch(o.change){
|
||||
case 'skip':
|
||||
tbody.append($('<tr>').html('<th colspan="2" class="skip"></th><td class="skip"></td>'));
|
||||
break;
|
||||
case 'delete':
|
||||
case 'insert':
|
||||
case 'equal':
|
||||
tbody.append($('<tr>').append(
|
||||
lineNum('old',o.base, o.change),
|
||||
lineNum('new',o.head, o.change),
|
||||
$('<td class="body">').addClass(o.change).html(o.head ? headTextDom(o.head) : baseTextDom(o.base))));
|
||||
break;
|
||||
case 'replace':
|
||||
var deletes = [];
|
||||
while(oplines[i] && oplines[i].change == 'replace'){
|
||||
if(oplines[i].base && oplines[i].head){
|
||||
var ld = lineDiff(baseTextDom(oplines[i].base), headTextDom(oplines[i].head));
|
||||
tbody.append($('<tr>').append(lineNum('old', oplines[i].base, 'delete'),'<th class="delete">',$('<td class="body delete">').append(ld.base)));
|
||||
deletes.push($('<tr>').append('<th class="insert">',lineNum('new',oplines[i].head, 'insert'),$('<td class="body insert">').append(ld.head)));
|
||||
}else if(oplines[i].base){
|
||||
tbody.append($('<tr>').append(lineNum('old', oplines[i].base, 'delete'),'<th class="delete">',$('<td class="body delete">').html(baseTextDom(oplines[i].base))));
|
||||
}else if(oplines[i].head){
|
||||
deletes.push($('<tr>').append('<th class="insert">',lineNum('new',oplines[i].head, 'insert'),$('<td class="body insert">').html(headTextDom(oplines[i].head))));
|
||||
unified: function(){
|
||||
const table = $('<table class="diff inlinediff">');
|
||||
table.attr({ add: oplines.add, del: oplines.del });
|
||||
const tbody = $('<tbody>').appendTo(table);
|
||||
for (let i = 0; i < oplines.length; i++) {
|
||||
const o = oplines[i];
|
||||
switch (o.change) {
|
||||
case 'skip':
|
||||
tbody.append($('<tr>').html('<th colspan="2" class="skip"></th><td class="skip"></td>'));
|
||||
break;
|
||||
case 'delete':
|
||||
case 'insert':
|
||||
case 'equal':
|
||||
tbody.append($('<tr>').append(
|
||||
lineNum('old', o.base, o.change, fileHash),
|
||||
lineNum('new', o.head, o.change, fileHash),
|
||||
$('<td class="body">').addClass(o.change).html(o.head ? headTextDom(o.head) : baseTextDom(o.base))));
|
||||
break;
|
||||
case 'replace':
|
||||
const deletes = [];
|
||||
while (oplines[i] && oplines[i].change == 'replace') {
|
||||
if (oplines[i].base && oplines[i].head) {
|
||||
const ld = lineDiff(baseTextDom(oplines[i].base), headTextDom(oplines[i].head));
|
||||
tbody.append($('<tr>').append(lineNum('old', oplines[i].base, 'delete', fileHash), '<th class="delete">', $('<td class="body delete">').append(ld.base)));
|
||||
deletes.push($('<tr>').append('<th class="insert">',lineNum('new', oplines[i].head, 'insert', fileHash),$('<td class="body insert">').append(ld.head)));
|
||||
} else if(oplines[i].base) {
|
||||
tbody.append($('<tr>').append(lineNum('old', oplines[i].base, 'delete', fileHash), '<th class="delete">', $('<td class="body delete">').html(baseTextDom(oplines[i].base))));
|
||||
} else if(oplines[i].head) {
|
||||
deletes.push($('<tr>').append('<th class="insert">',lineNum('new', oplines[i].head, 'insert', fileHash), $('<td class="body insert">').html(headTextDom(oplines[i].head))));
|
||||
}
|
||||
i++;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
tbody.append(deletes);
|
||||
i--;
|
||||
break;
|
||||
tbody.append(deletes);
|
||||
i--;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return table;
|
||||
}
|
||||
};
|
||||
function lineNum(type, num, klass){
|
||||
var cell = $('<th class="line-num">').addClass(type+'line').addClass(klass);
|
||||
if(num){
|
||||
cell.attr('line-number',num);
|
||||
function lineNum(type, num, klass, hash) {
|
||||
const cell = $('<th class="line-num">').addClass(type + 'line').addClass(klass);
|
||||
if (num) {
|
||||
cell.attr('line-number', num);
|
||||
cell.attr('id', hash + '-' + (type == 'old' ? 'L' : 'R') + num);
|
||||
}
|
||||
return cell;
|
||||
}
|
||||
function lineDiff(b,n){
|
||||
var bc = $('<diff>').html(b).children();
|
||||
var nc = $('<diff>').html(n).children();
|
||||
var textE = function(){ return $(this).text(); };
|
||||
var sm = new difflib.SequenceMatcher(bc.map(textE), nc.map(textE));
|
||||
var op = sm.get_opcodes();
|
||||
if(op.length==1 || sm.ratio()<0.5){
|
||||
return {base:bc,head:nc};
|
||||
function lineDiff(b, n) {
|
||||
const bc = $('<diff>').html(b).children();
|
||||
const nc = $('<diff>').html(n).children();
|
||||
const textE = function(){ return $(this).text(); };
|
||||
const sm = new difflib.SequenceMatcher(bc.map(textE), nc.map(textE));
|
||||
const op = sm.get_opcodes();
|
||||
if (op.length == 1 || sm.ratio() < 0.5) {
|
||||
return { base:bc, head:nc };
|
||||
}
|
||||
var ret = { base : [], head: []};
|
||||
for(var i=0;i<op.length;i++){
|
||||
var o = op[i];
|
||||
switch(o[0]){
|
||||
case 'equal':
|
||||
ret.base=ret.base.concat(bc.slice(o[1],o[2]));
|
||||
ret.head=ret.head.concat(nc.slice(o[3],o[4]));
|
||||
break;
|
||||
case 'delete':
|
||||
case 'insert':
|
||||
case 'replace':
|
||||
if(o[2]!=o[1]){
|
||||
ret.base.push($('<del>').append(bc.slice(o[1],o[2])));
|
||||
}
|
||||
if(o[4]!=o[3]){
|
||||
ret.head.push($('<ins>').append(nc.slice(o[3],o[4])));
|
||||
}
|
||||
break;
|
||||
const ret = { base : [], head: []};
|
||||
for (let i = 0; i < op.length; i++) {
|
||||
const o = op[i];
|
||||
switch (o[0]) {
|
||||
case 'equal':
|
||||
ret.base = ret.base.concat(bc.slice(o[1], o[2]));
|
||||
ret.head = ret.head.concat(nc.slice(o[3], o[4]));
|
||||
break;
|
||||
case 'delete':
|
||||
case 'insert':
|
||||
case 'replace':
|
||||
if(o[2] != o[1]){
|
||||
ret.base.push($('<del>').append(bc.slice(o[1], o[2])));
|
||||
}
|
||||
if(o[4] != o[3]){
|
||||
ret.head.push($('<ins>').append(nc.slice(o[3], o[4])));
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
},
|
||||
flatten: function(opcodes, headTextLines, baseTextLines, isIgnoreLine){
|
||||
var ret = [], add=0, del=0;
|
||||
for (var idx = 0; idx < opcodes.length; idx++) {
|
||||
var code = opcodes[idx];
|
||||
var change = code[0];
|
||||
var b = code[1];
|
||||
var n = code[3];
|
||||
var rowcnt = Math.max(code[2] - b, code[4] - n);
|
||||
for (var i = 0; i < rowcnt; i++) {
|
||||
let ret = [], add = 0, del = 0;
|
||||
for (let idx = 0; idx < opcodes.length; idx++) {
|
||||
const code = opcodes[idx];
|
||||
const change = code[0];
|
||||
let b = code[1];
|
||||
let n = code[3];
|
||||
const rowcnt = Math.max(code[2] - b, code[4] - n);
|
||||
for (let i = 0; i < rowcnt; i++) {
|
||||
switch(change){
|
||||
case 'insert':
|
||||
add++;
|
||||
ret.push({
|
||||
change:(isIgnoreLine(headTextLines[n]) ? 'equal' : change),
|
||||
head: ++n
|
||||
});
|
||||
break;
|
||||
case 'delete':
|
||||
del++;
|
||||
ret.push({
|
||||
change: (isIgnoreLine(baseTextLines[b]) ? 'equal' : change),
|
||||
base: ++b
|
||||
});
|
||||
break;
|
||||
case 'replace':
|
||||
add++;
|
||||
del++;
|
||||
var r = {change: change};
|
||||
if(n<code[4]){
|
||||
r.head = ++n;
|
||||
}
|
||||
if(b<code[2]){
|
||||
r.base = ++b;
|
||||
}
|
||||
ret.push(r);
|
||||
break;
|
||||
default:
|
||||
ret.push({
|
||||
change:change,
|
||||
head: ++n,
|
||||
base: ++b
|
||||
});
|
||||
case 'insert':
|
||||
add++;
|
||||
ret.push({
|
||||
change:(isIgnoreLine(headTextLines[n]) ? 'equal' : change),
|
||||
head: ++n
|
||||
});
|
||||
break;
|
||||
case 'delete':
|
||||
del++;
|
||||
ret.push({
|
||||
change: (isIgnoreLine(baseTextLines[b]) ? 'equal' : change),
|
||||
base: ++b
|
||||
});
|
||||
break;
|
||||
case 'replace':
|
||||
add++;
|
||||
del++;
|
||||
const r = { change: change };
|
||||
if (n<code[4]) {
|
||||
r.head = ++n;
|
||||
}
|
||||
if (b<code[2]) {
|
||||
r.base = ++b;
|
||||
}
|
||||
ret.push(r);
|
||||
break;
|
||||
default:
|
||||
ret.push({
|
||||
change:change,
|
||||
head: ++n,
|
||||
base: ++b
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
ret.add=add;
|
||||
ret.del=del;
|
||||
ret.add = add;
|
||||
ret.del = del;
|
||||
return ret;
|
||||
},
|
||||
fold: function(oplines, contextSize){
|
||||
var ret = [], skips=[], bskip = contextSize;
|
||||
for(var i=0;i<oplines.length;i++){
|
||||
var o = oplines[i];
|
||||
if(o.change=='equal'){
|
||||
if(bskip < contextSize){
|
||||
let ret = [], skips=[], bskip = contextSize;
|
||||
for (let i = 0; i < oplines.length; i++) {
|
||||
const o = oplines[i];
|
||||
if (o.change=='equal') {
|
||||
if (bskip < contextSize) {
|
||||
bskip ++;
|
||||
ret.push(o);
|
||||
}else{
|
||||
} else {
|
||||
skips.push(o);
|
||||
}
|
||||
}else{
|
||||
if(skips.length > contextSize){
|
||||
} else {
|
||||
if (skips.length > contextSize) {
|
||||
ret.push({
|
||||
change:'skip',
|
||||
start:skips[0],
|
||||
end:skips[skips.length-contextSize]
|
||||
change: 'skip',
|
||||
start: skips[0],
|
||||
end: skips[skips.length-contextSize]
|
||||
});
|
||||
}
|
||||
ret = ret.concat(skips.splice(- contextSize));
|
||||
@@ -326,7 +331,7 @@ $.extend(JsDiffRender.prototype,{
|
||||
bskip = 0;
|
||||
}
|
||||
}
|
||||
if(skips.length > contextSize){
|
||||
if (skips.length > contextSize) {
|
||||
ret.push({
|
||||
change:'skip',
|
||||
start:skips[0],
|
||||
@@ -344,12 +349,12 @@ $.extend(JsDiffRender.prototype,{
|
||||
*/
|
||||
function scrollIntoView(target){
|
||||
target = $(target);
|
||||
var $window = $(window);
|
||||
var docViewTop = $window.scrollTop();
|
||||
var docViewBottom = docViewTop + $window.height();
|
||||
const $window = $(window);
|
||||
const docViewTop = $window.scrollTop();
|
||||
const docViewBottom = docViewTop + $window.height();
|
||||
|
||||
var elemTop = target.offset().top;
|
||||
var elemBottom = elemTop + target.height();
|
||||
const elemTop = target.offset().top;
|
||||
const elemBottom = elemTop + target.height();
|
||||
|
||||
if(elemBottom > docViewBottom){
|
||||
$('html, body').scrollTop(elemBottom - $window.height());
|
||||
|
||||
Reference in New Issue
Block a user