(refs #13)Fix real-time validation for filename and Add line wrap mode switcher

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" href="?raw=true">Raw</a>
-          <a class="btn btn-mini" href="@url(repository)/commits/@encodeRefName(branch)/@pathList.mkString("/")">History</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>

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;">
+          <div class="pull-right">
-            <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;">
+              <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(){
+  $('#newFileName').watch(function(){
-    console.log($('#indent option:selected').val());
+    updateCommitButtonStatus();
-    editor.getSession().setUseWrapMode(parseInt($('#indent option:selected').val()));
   });
-  *@
 
   $('#commit').click(function(){
     $('#content').val(editor.getValue());
   });
-})
+});
 </script>

src/main/webapp/assets/common/js/gitbucket.js

@@ -45,3 +45,25 @@ function displayErrors(data){
     i++;
   });
 }
+
+(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);