Fixes webcompat#1211: Added auto-expanding for bug reporting/comments…

… area
nj4710 · Mar 28, 2017 · fea0e03 · fea0e03
1 parent 144ccc1
commit fea0e03
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git a/webcompat/static/js/lib/bugform.js b/webcompat/static/js/lib/bugform.js
@@ -73,6 +73,9 @@ function BugForm() {
     // (after a page refresh, back button, etc.)
     this.checkForm();
 
+    // Auto Expanding feature for form
+    this.autoExpand();
+
     // Set up listener for message events from screenshot-enabled add-ons
     window.addEventListener("message", _.bind(function(event) {
       // Make sure the data is coming from ~*inside the house*~!
@@ -467,6 +470,17 @@ function BugForm() {
     }, this));
   };
 
+  // See function autoExpand in issues.js
+  this.autoExpand = function() {
+    $(document).one("focus.js-autoExpand", "textarea.js-autoExpand",function(){})
+    .on("input.js-autoExpand", "textarea.js-autoExpand", function() {
+      this.style.overflow = 'hidden';
+        this.style.height = 0;
+        this.style.height = this.scrollHeight + 'px';
+
+    });
+  };
+
   return this.init();
 }
 

diff --git a/webcompat/static/js/lib/issues.js b/webcompat/static/js/lib/issues.js
@@ -348,6 +348,7 @@ issues.MainView = Backbone.View.extend({
     this.initSubViews();
     this.fetchModels();
     this.handleKeyShortcuts();
+    this.autoExpand();
   },
   closeLabelEditor: function(e) {
     var target = $(e.target);
@@ -489,6 +490,19 @@ issues.MainView = Backbone.View.extend({
 
   handleKeyShortcuts: function() {
     Mousetrap.bind("mod+enter", _.bind(this.addNewComment, this));
+  },
+
+  // Auto expanding feature for comments
+  // See function autoExpand in bugform.js 
+  autoExpand: function() {
+    $(document).one("focus.js-autoExpand", "textarea.js-autoExpand",function() {})
+    .on("input.js-autoExpand", "textarea.js-autoExpand", function() {
+      this.style.overflow = 'hidden';
+        this.style.height = 0;
+        this.style.height = this.scrollHeight + 'px';
+
+    });
+
   }
 });
 

diff --git a/webcompat/templates/home-page/form.html b/webcompat/templates/home-page/form.html
@@ -63,7 +63,7 @@ <h3 class="wc-Title--s">Report Site Issue</h3>
       <div class="r-Grid r-Grid--withGutter ">
         <div class="r-Grid-cell r-Grid-cell--alignBottom r-minS--1of2">
             <div class="wc-Form-group js-Form-group">
-              {{ form.description.label(class_='wc-Form-label') }} {{ form.description(class_='wc-Form-item wc-Form-item--textarea', rows=7) }}
+              {{ form.description.label(class_='wc-Form-label') }} {{ form.description(class_='wc-Form-item wc-Form-item--textarea js-autoExpand', rows=7) }}
             </div>
         </div>
         <div class="r-Grid-cell r-Grid-cell--alignBottom r-minS--1of2">

diff --git a/webcompat/templates/issue/issue-comment-submit.html b/webcompat/templates/issue/issue-comment-submit.html
@@ -11,7 +11,7 @@
   </div>
   <div class="wc-Comment-body">
   <label for="wc-Comment-text" class="wc-Accessibility">Comment Text</label>
-    <textarea class="wc-Comment-submit js-Comment-text mousetrap" placeholder="Leave a comment"></textarea>
+    <textarea class="wc-Comment-submit js-Comment-text mousetrap js-autoExpand" data-min-rows='3' placeholder="Leave a comment"></textarea>
     <div class="wc-Form-group js-ImageUploadView">
       <script type="text/template" id="upload-input-tmpl">
         <form>