[gitg/wip/techlivezh/diff-view-clean-up: 6/7] Move the wrapped html into template



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('&lt;!-- \\$\\{' + r + '\\} --&gt;', '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]