From 1c24090c14d5ab27ab919a070d20f835709c1f4b Mon Sep 17 00:00:00 2001
From: Naoki Takezoe <takezoe@gmail.com>
Date: Mon, 28 Apr 2014 10:39:32 +0900
Subject: [PATCH] (refs #13)Fix real-time validation for filename and Add line
 wrap mode switcher

---
 src/main/twirl/repo/blob.scala.html           |  8 ++--
 src/main/twirl/repo/editor.scala.html         | 48 +++++++++----------
 src/main/webapp/assets/common/js/gitbucket.js | 24 +++++++++-
 3 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/main/twirl/repo/blob.scala.html b/src/main/twirl/repo/blob.scala.html
index b13846b49..06d8234b0 100644
--- a/src/main/twirl/repo/blob.scala.html
+++ b/src/main/twirl/repo/blob.scala.html
@@ -31,12 +31,12 @@
         </div>
         <div class="btn-group pull-right">
           @if(hasWritePermission){
-            <a class="btn btn-mini" href="@url(repository)/edit/@encodeRefName(branch)/@pathList.mkString("/")">Edit</a>
+            <a class="btn" href="@url(repository)/edit/@encodeRefName(branch)/@pathList.mkString("/")">Edit</a>
           }
-          <a class="btn btn-mini" href="?raw=true">Raw</a>
-          <a class="btn btn-mini" href="@url(repository)/commits/@encodeRefName(branch)/@pathList.mkString("/")">History</a>
+          <a class="btn" href="?raw=true">Raw</a>
+          <a class="btn" href="@url(repository)/commits/@encodeRefName(branch)/@pathList.mkString("/")">History</a>
           @if(hasWritePermission){
-            <a class="btn btn-mini btn-danger" href="@url(repository)/remove/@encodeRefName(branch)/@pathList.mkString("/")">Delete</a>
+            <a class="btn btn-danger" href="@url(repository)/remove/@encodeRefName(branch)/@pathList.mkString("/")">Delete</a>
           }
         </div>
       </th>
diff --git a/src/main/twirl/repo/editor.scala.html b/src/main/twirl/repo/editor.scala.html
index 77d10269e..f78b9beb6 100644
--- a/src/main/twirl/repo/editor.scala.html
+++ b/src/main/twirl/repo/editor.scala.html
@@ -20,31 +20,22 @@
       <input type="hidden" name="branch" id="branch" value="@branch"/>
       <input type="hidden" name="path" id="path" value="@pathList.mkString("/")"/>
     </div>
-    <style type="text/css" media="screen">
-    #editor {
-      width: 100%;
-      height: 600px;
-    }
-    </style>
     <table class="table table-bordered">
-      @*
       <tr>
         <th>
-          <select id="indent" class="input-small" style="margin-bottom: 0px;">
-            <option value="2">2</option>
-            <option value="4">4</option>
-            <option value="8">8</option>
-          </select>
-          <select id="wrap" class="input-medium" style="margin-bottom: 0px;">
-            <option value="false">No wrap</option>
-            <option value="true">Soft wrap</option>
-          </select>
+          <div class="pull-right">
+            <select id="wrap" class="input-medium" style="margin-bottom: 0px;">
+              <optgroup label="Line Wrap Mode">
+                <option value="false">No wrap</option>
+                <option value="true">Soft wrap</option>
+              </optgroup>
+            </select>
+          </div>
         </th>
       </tr>
-      *@
       <tr>
         <td>
-          <div id="editor"></div>
+          <div id="editor" style="width: 100%; height: 600px;"></div>
         </td>
       </tr>
     </table>
@@ -74,17 +65,24 @@ $(function(){
   $('#editor').text($('#initial').val());
   var editor = ace.edit("editor");
   editor.setTheme("ace/theme/monokai");
-  editor.getSession().setUseWrapMode(false);
+  //editor.getSession().setUseWrapMode(false);
 
   @if(fileName.isDefined){
     editor.getSession().setMode("ace/mode/@editorType(fileName.get)");
   }
 
   editor.on('change', function(){
-    $('#commit').attr('disabled', editor.getValue() == $('#initial').val());
+    updateCommitButtonStatus();
   });
 
-  @*
+  function updateCommitButtonStatus(){
+    if(editor.getValue() == $('#initial').val() && $('#newFileName').val() == $('#oldFileName').val()){
+      $('#commit').attr('disabled', true);
+    } else {
+      $('#commit').attr('disabled', false);
+    }
+  }
+
   $('#wrap').change(function(){
     console.log($('#wrap option:selected').val());
     if($('#wrap option:selected').val() == 'true'){
@@ -94,14 +92,12 @@ $(function(){
     }
   });
 
-  $('#indent').change(function(){
-    console.log($('#indent option:selected').val());
-    editor.getSession().setUseWrapMode(parseInt($('#indent option:selected').val()));
+  $('#newFileName').watch(function(){
+    updateCommitButtonStatus();
   });
-  *@
 
   $('#commit').click(function(){
     $('#content').val(editor.getValue());
   });
-})
+});
 </script>
diff --git a/src/main/webapp/assets/common/js/gitbucket.js b/src/main/webapp/assets/common/js/gitbucket.js
index 26df1492e..02529ad0f 100644
--- a/src/main/webapp/assets/common/js/gitbucket.js
+++ b/src/main/webapp/assets/common/js/gitbucket.js
@@ -44,4 +44,26 @@ function displayErrors(data){
     }
     i++;
   });
-}
\ No newline at end of file
+}
+
+(function($){
+  $.fn.watch = function(callback){
+    var timer = null;
+    var prevValue = this.val();
+
+    this.on('focus', function(e){
+      window.clearInterval(timer);
+      timer = window.setInterval(function(){
+        var newValue = $(e.target).val();
+        if(prevValue != newValue){
+          callback();
+        }
+        prevValue = newValue;
+      }, 10);
+    });
+
+    this.on('blur', function(){
+      window.clearInterval(timer);
+    });
+  };
+})(jQuery);
\ No newline at end of file