[gitg/wip/techlivezh/diff-view-clean-up: 11/12] Move the wrapped html into template
- From: Techlive Zheng <techlivezh src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gitg/wip/techlivezh/diff-view-clean-up: 11/12] Move the wrapped html into template
- Date: Sat, 21 Dec 2013 16:21:35 +0000 (UTC)
commit e5be8477cfa2cb51e27432b903ccc25d54faf26b
Author: Techlive Zheng <techlivezheng gmail com>
Date: Thu Dec 19 20:41:12 2013 +0800
Move the wrapped html into template
libgitg/resources/diff-view-html-builder.js | 74 +++++++++++++--------------
libgitg/resources/diff-view.css | 8 ++--
libgitg/resources/diff-view.html | 35 +++++++++++--
libgitg/resources/diff-view.js | 8 ++-
4 files changed, 75 insertions(+), 50 deletions(-)
---
diff --git a/libgitg/resources/diff-view-html-builder.js b/libgitg/resources/diff-view-html-builder.js
index 2fa0a55..34e08a5 100644
--- a/libgitg/resources/diff-view-html-builder.js
+++ b/libgitg/resources/diff-view-html-builder.js
@@ -11,12 +11,17 @@ function html_escape(s)
function exec_template(template, replacements) {
for (var r in replacements)
{
+ // As the template requires to be a valid html snippet, some
+ // placeholders are being escaped, we need to un-escape them
+ // first.
+ var placeholder = new RegExp('<!-- \\$\\{' + r + '\\} -->', 'g');
+ template = template.replace(placeholder, '<!-- ${' + r + '} -->');
// As we are using the repl in the later 'template.replace()'
// as the replacement in which character '$' is special, we
// need to make sure each occurence of '$' character in the
// replacement is represented as '$$' (which stands for a
// literal '$'), so, we need to use '$$$$' here to get '$$'.
- var replacement = replacements[r].replace(/\$/g, '$$$$');
+ var replacement = String(replacements[r]).replace(/\$/g, '$$$$');
var placeholder = new RegExp('<!-- \\$\\{' + r + '\\} -->', 'g');
template = template.replace(placeholder, replacement);
}
@@ -60,14 +65,13 @@ function diff_file(file, lnstate, data)
var addedp = Math.floor(lnstate.added / total * 100);
var removedp = 100 - addedp;
- var file_stats = '<span class="file_stats"><span class="number">' + (lnstate.added + lnstate.removed)
+ '</span><span class="bar"><span class="added" style="width: ' + addedp + '%;"></span><span class="removed"
style="width: ' + removedp + '%;"></span></span></span>';
-
- file_stats = lnstate.stagebutton + file_stats;
+ var file_stats = '<span class="number">' + (lnstate.added + lnstate.removed) + '</span><span
class="bar"><span class="added" style="width: ' + addedp + '%;"></span><span class="removed" style="width: '
+ removedp + '%;"></span></span>';
/**
* run template
*/
return exec_template(data.file_template, {
+ 'STAGEBUTTON': lnstate.stagebutton,
'FILE_PATH': file_path,
'FILE_BODY': file_body,
'FILE_STATS': file_stats,
@@ -79,69 +83,47 @@ function diff_hunk(hunk, lnstate, data)
var cold = hunk.range.old.start;
var cnew = hunk.range.new.start;
- var hunk_stats = '<span class="hunk_stats">@@ -' + hunk.range.old.start + ',' + hunk.range.old.lines
+ ' +' + hunk.range.new.start + ',' + hunk.range.new.lines + ' @@</span>';
-
- hunk_stats = lnstate.stagebutton + hunk_stats;
+ var hunk_stats = '@@ -' + hunk.range.old.start + ',' + hunk.range.old.lines + ' +' +
hunk.range.new.start + ',' + hunk.range.new.lines + ' @@';
- var hunk_body = '<tr class="hunk_header">\
- <td class="gutter old">' + lnstate.gutterdots + '</td> \
- <td class="gutter new">' + lnstate.gutterdots + '</td> \
- <td class="hunk_header">' + hunk_stats + '</td> \
- </tr>';
+ var hunk_body = '';
for (var i = 0; i < hunk.lines.length; ++i)
{
var l = hunk.lines[i];
- var row = '<tr class="';
+ var gutter_old = '';
+ var gutter_new = '';
+ var line_class = 'context';
switch (String.fromCharCode(l.type))
{
case ' ':
- row += 'context"> \
- <td class="gutter old">' + cold + '</td> \
- <td class="gutter new">' + cnew + '</td>';
-
cold++;
cnew++;
+ gutter_old = cold;
+ gutter_new = cnew;
break;
case '+':
- row += 'added"> \
- <td class="gutter old"></td> \
- <td class="gutter new">' + cnew + '</td>';
-
+ line_class='added';
cnew++;
+ gutter_new = cnew;
lnstate.added++;
break;
case '-':
- row += 'removed"> \
- <td class="gutter old">' + cold + '</td> \
- <td class="gutter new"></td>';
-
+ line_class='removed';
cold++;
+ gutter_old = cold;
lnstate.removed++;
break;
case '=':
case '>':
case '<':
- row += 'context"> \
- <td class="gutter old"></td> \
- <td class="gutter new"></td>';
- l.content = l.content.substr(1, l.content.length);
- break;
- default:
- row += '">';
+ l.content = l.content.substr(1, l.content.length);
break;
}
l.content = html_escape(l.content).replace(/\t/g, '<span class="tab" style="width: ' +
data.settings.tab_width + 'ex">\t</span>');
- row += '<td class="code">' + l.content + '</td>';
-
- row += '</tr>';
-
- hunk_body += row;
-
lnstate.processed++;
proc = lnstate.processed / lnstate.lines;
@@ -155,9 +137,23 @@ function diff_hunk(hunk, lnstate, data)
lnstate.nexttick += lnstate.tickfreq;
}
}
+
+ hunk_body += exec_template(data.line_template, {
+ 'LINE_CLASS': line_class,
+ 'GUTTER_OLD': gutter_old,
+ 'GUTTER_NEW': gutter_new,
+ 'CODE': l.content,
+ });
+
}
- return hunk_body;
+ return exec_template(data.hunk_template, {
+ 'STAGEBUTTON': lnstate.stagebutton,
+ 'GUTTER_OLD': lnstate.gutterdots,
+ 'GUTTER_NEW': lnstate.gutterdots,
+ 'HUNK_STATS': hunk_stats,
+ 'HUNK_BODY': hunk_body,
+ });
}
function diff_files(files, lines, maxlines, data)
diff --git a/libgitg/resources/diff-view.css b/libgitg/resources/diff-view.css
index dad982f..120d343 100644
--- a/libgitg/resources/diff-view.css
+++ b/libgitg/resources/diff-view.css
@@ -65,7 +65,7 @@ div#diff div.file table td.gutter.new {
border-right: 3px solid #d3d7cf;
}
-div#diff div.file table tr.file_header td {
+div#diff div.file table tbody.file_header td {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
vertical-align: middle;
@@ -88,11 +88,11 @@ div#diff div.file table tr.hunk_header td.hunk_header {
border-bottom: 1px solid #d3d7cf;
}
-div#diff div.file table tr.file_header + tr.hunk_header td.hunk_header {
+div#diff div.file table tbody.file_header + tbody.hunk tr.hunk_header td.hunk_header {
border-top: 0px;
}
-tbody.collapsed > :not(.file_header) {
+table.collapsed > :not(.file_header) {
display:none;
}
@@ -195,7 +195,7 @@ span.stage, span.unstage {
border-radius: 5px;
}
-tr.file_header span.stage, tr.file_header span.unstage {
+tbody.file_header span.stage, tbody.file_header span.unstage {
box-shadow: 1px 1px #ccc inset;
}
diff --git a/libgitg/resources/diff-view.html b/libgitg/resources/diff-view.html
index a2a8258..cd32bd1 100644
--- a/libgitg/resources/diff-view.html
+++ b/libgitg/resources/diff-view.html
@@ -19,7 +19,7 @@
<div class="sha1"></div>
</div>
- <!-- Diff template -->
+ <!-- Diff File template -->
<div class="file">
<table>
<colgroup>
@@ -27,18 +27,43 @@
<col width="0">
<col width="100%">
</colgroup>
- <tbody>
- <tr class="file_header">
+ <tbody class="file_header">
+ <tr>
<td colspan="3">
<span class="expander">-</span>
- <!-- ${FILE_STATS} -->
+ <span class="stagebutton"><!-- ${STAGEBUTTON} --></span>
+ <span class="file_stats"><!-- ${FILE_STATS} --></span>
<span class="file_path"><!-- ${FILE_PATH} --></span>
</td>
</tr>
- <!-- ${FILE_BODY} -->
</tbody>
+ <!-- ${FILE_BODY} -->
</table>
</div>
+
+ <!-- Diff Hunk template -->
+ <table>
+ <tbody class="hunk">
+ <tr class="hunk_header">
+ <td class="gutter old"><!-- ${GUTTER_OLD} --></td>
+ <td class="gutter new"><!-- ${GUTTER_NEW} --></td>
+ <td class="hunk_header">
+ <span class="stagebutton"><!-- ${STAGEBUTTON} --></span>
+ <span class="hunk_stats"><!-- ${HUNK_STATS} --></span>
+ </td>
+ </tr>
+ <!-- ${HUNK_BODY} -->
+ </tbody>
+ </table>
+
+ <!-- Diff line template -->
+ <table>
+ <tr class="line <!-- ${LINE_CLASS} -->">
+ <td class="gutter old"><!-- ${GUTTER_OLD} --></td>
+ <td class="gutter new"><!-- ${GUTTER_NEW} --></td>
+ <td class="code"><!-- ${CODE} --></td>
+ </tr>
+ </table>
</div>
<div id="diff">
<div id="diff_header"></div>
diff --git a/libgitg/resources/diff-view.js b/libgitg/resources/diff-view.js
index 7e82ace..b7dabdd 100644
--- a/libgitg/resources/diff-view.js
+++ b/libgitg/resources/diff-view.js
@@ -200,20 +200,24 @@ function update_diff(id, lsettings)
expander.text("+");
}
- expander.closest('tbody').toggleClass("collapsed");
+ expander.closest('table').toggleClass("collapsed");
});
}
}
var t = (new Date()).getTime();
- var file_template = $('#templates div.file')[0].outerHTML;
+ var file_template = $('#templates .file')[0].outerHTML;
+ var hunk_template = $('#templates .hunk')[0].outerHTML;
+ var line_template = $('#templates .line')[0].outerHTML;
// Load the diff asynchronously
html_builder_worker.postMessage({
url: "gitg-diff:/diff/?t=" + t + "&viewid=" + params.viewid + "&diffid=" + id +
"&format=diff_only",
settings: settings,
file_template: file_template,
+ hunk_template: hunk_template,
+ line_template: line_template,
});
// Load the commit directly here
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
