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



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('&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);
        }
@@ -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]