[gitg/wip/techlivezh/diff-view-clean-up: 6/7] 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: 6/7] Move the wrapped html into template
- Date: Wed, 25 Dec 2013 03:12:42 +0000 (UTC)
commit 5a13a4cb03615b2bf0083cb0588068a9a9147d36
Author: Techlive Zheng <techlivezheng gmail com>
Date: Thu Dec 19 20:41:12 2013 +0800
Move the wrapped html into template
https://bugzilla.gnome.org/show_bug.cgi?id=720886
libgitg/resources/diff-view-html-builder.js | 77 +++++++++++++--------------
libgitg/resources/diff-view.css | 10 ++--
libgitg/resources/diff-view.html | 38 ++++++++++++--
libgitg/resources/diff-view.js | 10 +++-
4 files changed, 84 insertions(+), 51 deletions(-)
---
diff --git a/libgitg/resources/diff-view-html-builder.js b/libgitg/resources/diff-view-html-builder.js
index 2f8447d..4934292 100644
--- a/libgitg/resources/diff-view-html-builder.js
+++ b/libgitg/resources/diff-view-html-builder.js
@@ -6,12 +6,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);
}
@@ -23,19 +28,14 @@ function diff_hunk(hunk, lnstate, data)
{
var hunk_body = '';
- var hunk_header = '<span class="hunk_stats">@@ -' + hunk.range.old.start + ',' + hunk.range.old.lines
+ ' +' + hunk.range.new.start + ',' + hunk.range.new.lines + ' @@</span>';
-
- hunk_header = lnstate.stagebutton + hunk_header;
-
- 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_header + '</td> \
- </tr>';
+ var hunk_stats = '@@ -' + hunk.range.old.start + ',' + hunk.range.old.lines + ' +' +
hunk.range.new.start + ',' + hunk.range.new.lines + ' @@';
var row, line, proc;
var cold = hunk.range.old.start;
var cnew = hunk.range.new.start;
+ var gutter_old = '';
+ var gutter_new = '';
+ var line_class = 'context';
for (var i = 0; i < hunk.lines.length; ++i)
{
row = '<tr class="';
@@ -45,50 +45,32 @@ function diff_hunk(hunk, lnstate, data)
switch (String.fromCharCode(line.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>';
-
cnew++;
+ gutter_new = cnew;
+ line_class = 'added';
lnstate.added++;
break;
case '-':
- row += 'removed"> \
- <td class="gutter old">' + cold + '</td> \
- <td class="gutter new"></td>';
-
cold++;
+ gutter_old = cold;
+ line_class = 'removed';
lnstate.removed++;
break;
case '=':
case '>':
case '<':
- row += 'context"> \
- <td class="gutter old"></td> \
- <td class="gutter new"></td>';
- line.content = line.content.substr(1, line.content.length);
- break;
- default:
- row += '">';
+ line.content = line.content.substr(1, line.content.length);
break;
}
line.content = html_escape(line.content).replace(/\t/g, '<span class="tab" style="width: ' +
data.settings.tab_width + 'ex">\t</span>');
- row += '<td class="code">' + line.content + '</td>';
-
- row += '</tr>';
-
- hunk_body += row;
-
lnstate.processed++;
proc = lnstate.processed / lnstate.lines;
@@ -102,9 +84,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': line.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_file(file, lnstate, data)
@@ -134,11 +130,10 @@ 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>';
return exec_template(data.file_template, {
+ 'STAGEBUTTON': lnstate.stagebutton,
'FILE_PATH': file_path,
'FILE_BODY': file_body,
'FILE_STATS': file_stats,
@@ -183,7 +178,9 @@ function diff_files(files, lines, maxlines, data)
f += diff_file(files[i], lnstate, data);
}
- return f;
+ return exec_template(data.diff_template, {
+ 'DIFF_BODY': f,
+ });
}
function log(e)
diff --git a/libgitg/resources/diff-view.css b/libgitg/resources/diff-view.css
index 2fbedb0..ec7a424 100644
--- a/libgitg/resources/diff-view.css
+++ b/libgitg/resources/diff-view.css
@@ -79,7 +79,7 @@ div#diff div.file table tr.hunk_header td {
padding-bottom: 6px;
}
-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;
background: #d3d7cf;
@@ -98,7 +98,7 @@ span.expander {
cursor: pointer;
}
-tbody.collapsed > :not(.file_header) {
+table.collapsed > :not(.file_header) {
display:none;
}
@@ -137,11 +137,11 @@ span.file_stats .removed {
background-color: #cc3333;
}
-div#diff div.file table tr.file_header td {
+div#diff div.file table tbody.file_header td {
vertical-align: middle;
}
-div#diff div.file table tr.file_header + tr.hunk_header td.hunk_header {
+div#diff div.file table tbody.file_header + tr.hunk_header td.hunk_header {
border-top: 0px;
}
@@ -214,7 +214,7 @@ span.stage, span.unstage {
box-shadow: 1px 1px #d3d7cf inset;
}
-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 7087cc8..2ce655d 100644
--- a/libgitg/resources/diff-view.html
+++ b/libgitg/resources/diff-view.html
@@ -20,6 +20,11 @@
</div>
<!-- Diff template -->
+ <div class="diff">
+ <!-- ${DIFF_BODY} -->
+ </div>
+
+ <!-- Diff File template -->
<div class="file">
<table>
<colgroup>
@@ -27,18 +32,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 d77b75a..9a385ad 100644
--- a/libgitg/resources/diff-view.js
+++ b/libgitg/resources/diff-view.js
@@ -210,20 +210,26 @@ 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 diff_template = $('#templates .diff')[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,
+ diff_template: diff_template,
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]
