Added soft wrap logic and button to editor

Added tests

Added awesomeeeeee icons

1 files changed, 43 insertions, 0 deletions

diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index b846bab0424..8f4a2c7ae84 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -22,6 +22,7 @@
       // submitted textarea
       })(this));
       this.initModePanesAndLinks();
+      this.initSoftWrap();
       new BlobLicenseSelectors({
         editor: this.editor
       });
@@ -50,6 +51,7 @@
       this.$editModePanes.hide();
       currentPane.fadeIn(200);
       if (paneId === "#preview") {
+        this.$toggleButton.hide();
         return $.post(currentLink.data("preview-url"), {
           content: this.editor.getValue()
         }, function(response) {
@@ -57,10 +59,51 @@
           return currentPane.syntaxHighlight();
         });
       } else {
+        this.$toggleButton.show();
         return this.editor.focus();
       }
     };
 
+    EditBlob.prototype.initSoftWrap = function() {
+      this.isExplicitySelected = false
+      this.$filePathInput = $('#file_path, #file_name');
+      this.$toggleButton = $('.soft-wrap-toggle');
+      this.$toggleText = $('span', this.$toggleButton);
+      this.$noWrapIcon = $('.no-wrap-icon', this.$toggleButton);
+      this.$softWrapIcon = $('.soft-wrap-icon', this.$toggleButton);
+      this.checkFilePathIsCode();
+      this.$filePathInput.on('keyup', _.debounce(this.checkFilePathIsCode.bind(this), 300));
+      this.$toggleButton.on('click', this.clickSoftWrapButton.bind(this));
+    };
+
+    EditBlob.prototype.toggleSoftWrap = function(forceToggle) {
+      if (_.isBoolean(forceToggle)) {
+        this.isSoftWrapped = forceToggle;
+      } else {
+        this.isSoftWrapped = !this.isSoftWrapped;
+      }
+      if(this.isSoftWrapped) {
+        this.$toggleText.text('No wrap');
+        this.$noWrapIcon.removeClass('hidden');
+        this.$softWrapIcon.addClass('hidden');
+      } else {
+        this.$toggleText.text('Soft wrap');
+        this.$softWrapIcon.removeClass('hidden');
+        this.$noWrapIcon.addClass('hidden');
+      }
+      this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
+    };
+
+    EditBlob.prototype.checkFilePathIsCode = function() {
+      var isNotCode = /^(.*?\.(txt|md)|[^.]*?)$/i.test(this.$filePathInput.val());
+      if (!this.isExplicitySelected) this.toggleSoftWrap(isNotCode);
+    };
+
+    EditBlob.prototype.clickSoftWrapButton = function() {
+      if (!this.isExplicitySelected) this.isExplicitySelected = true;
+      this.toggleSoftWrap();
+    };
+
     return EditBlob;
 
   })();