From 47dbea947db96a91bfea3bc33fa5d55aaa089b01 Mon Sep 17 00:00:00 2001
From: Naoki Takezoe <takezoe@gmail.com>
Date: Sun, 14 Sep 2014 10:53:17 +0900
Subject: [PATCH] (refs #487) split diff is available

---
 src/main/twirl/helper/diff.scala.html         | 30 +++++++++++++++----
 src/main/twirl/repo/delete.scala.html         |  2 +-
 src/main/twirl/repo/editor.scala.html         |  2 +-
 .../webapp/assets/common/css/gitbucket.css    |  5 ++++
 src/main/webapp/assets/common/js/gitbucket.js | 12 ++++++--
 5 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/main/twirl/helper/diff.scala.html b/src/main/twirl/helper/diff.scala.html
index e1ab2d768..598841cd1 100644
--- a/src/main/twirl/helper/diff.scala.html
+++ b/src/main/twirl/helper/diff.scala.html
@@ -9,9 +9,12 @@
 @if(showIndex){
   <div>
     <div class="pull-right" style="margin-bottom: 10px;">
-      <input id="toggle-file-list" type="button" class="btn" value="Show file list"/>
+      <div class="btn-group" data-toggle="buttons-radio">
+        <input type="button" id="btn-unified" class="btn btn-default btn-small active" value="Unified">
+        <input type="button" id="btn-split" class="btn btn-default btn-small" value="Split">
+      </div>
     </div>
-    Showing @diffs.size changed @plural(diffs.size, "file")
+    Showing <a href="javascript:void(0);" id="toggle-file-list">@diffs.size changed @plural(diffs.size, "file")</a>
   </div>
   <ul id="commit-file-list" style="display: none;">
   @diffs.zipWithIndex.map { case (diff, i) =>
@@ -94,10 +97,25 @@ $(function(){
     });
   }
 
-  @diffs.zipWithIndex.map { case (diff, i) =>
-    @if(diff.newContent != None || diff.oldContent != None){
-      if($('#oldText-@i').length > 0){
-        diffUsingJS('oldText-@i', 'newText-@i', 'diffText-@i');
+  // Render diffs as unified mode initially
+  renderDiffs(1);
+
+  $('#btn-unified').click(function(){
+    $('.container-wide').removeClass('container-wide').addClass('container');
+    renderDiffs(1);
+  });
+
+  $('#btn-split').click(function(){
+    $('.container').removeClass('container').addClass('container-wide');
+    renderDiffs(0);
+  });
+
+  function renderDiffs(viewType){
+    @diffs.zipWithIndex.map { case (diff, i) =>
+      @if(diff.newContent != None || diff.oldContent != None){
+        if($('#oldText-@i').length > 0){
+          diffUsingJS('oldText-@i', 'newText-@i', 'diffText-@i', viewType);
+        }
       }
     }
   }
diff --git a/src/main/twirl/repo/delete.scala.html b/src/main/twirl/repo/delete.scala.html
index 2edb48110..7d589f333 100644
--- a/src/main/twirl/repo/delete.scala.html
+++ b/src/main/twirl/repo/delete.scala.html
@@ -56,6 +56,6 @@
 <link href="@assets/vendors/jsdifflib/diffview.css" type="text/css" rel="stylesheet" />
 <script>
 $(function(){
-  diffUsingJS('oldText', 'newText', 'diffText');
+  diffUsingJS('oldText', 'newText', 'diffText', 1);
 });
 </script>
\ No newline at end of file
diff --git a/src/main/twirl/repo/editor.scala.html b/src/main/twirl/repo/editor.scala.html
index 9d8ce9a0d..c23eb769b 100644
--- a/src/main/twirl/repo/editor.scala.html
+++ b/src/main/twirl/repo/editor.scala.html
@@ -139,7 +139,7 @@ $(function(){
         .append($('<div id="diffText">'))
         .append($('<textarea id="newText" style="display: none;">').html(editor.getValue()))
         .append($('<textarea id="oldText" style="display: none;">').html($('#initial').val()));
-      diffUsingJS('oldText', 'newText', 'diffText');
+      diffUsingJS('oldText', 'newText', 'diffText', 1);
     }
   });
 });
diff --git a/src/main/webapp/assets/common/css/gitbucket.css b/src/main/webapp/assets/common/css/gitbucket.css
index d284e57be..fd0031692 100644
--- a/src/main/webapp/assets/common/css/gitbucket.css
+++ b/src/main/webapp/assets/common/css/gitbucket.css
@@ -119,6 +119,11 @@ div.container {
   width: 920px;
 }
 
+div.container-wide {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
 div.pagination {
   margin-top: 0px;
   margin-bottom: 0px;
diff --git a/src/main/webapp/assets/common/js/gitbucket.js b/src/main/webapp/assets/common/js/gitbucket.js
index dc3f74d83..e40f700e5 100644
--- a/src/main/webapp/assets/common/js/gitbucket.js
+++ b/src/main/webapp/assets/common/js/gitbucket.js
@@ -68,7 +68,15 @@ function displayErrors(data){
   };
 })(jQuery);
 
-function diffUsingJS(oldTextId, newTextId, outputId) {
+/**
+ * Render diff using jsdifflib.
+ *
+ * @param oldTextId {String} element id of old text
+ * @param newTextId {String} element id of new text
+ * @param outputId {String} element id of output element
+ * @param viewType {Number} 0: split, 1: unified
+ */
+function diffUsingJS(oldTextId, newTextId, outputId, viewType) {
   // get the baseText and newText values from the two textboxes, and split them into lines
   var oldText = document.getElementById(oldTextId).value;
   var oldLines = [];
@@ -98,7 +106,7 @@ function diffUsingJS(oldTextId, newTextId, outputId) {
     newTextLines: newLines,
     opcodes: opcodes,
     contextSize: 4,
-    viewType: 1
+    viewType: viewType
   }));
 }