Merge pull request #2513 from /issues/2506

Fixes #2506 - Extract autogrow feature from bugform and apply to comment

grunt-tasks/concat.js

@@ -22,6 +22,7 @@ module.exports = function(grunt) {
         "<%= jsPath %>/vendor/backbone.mousetrap.js",
         "<%= jsPath %>/lib/flash-message.js",
         "<%= jsPath %>/lib/homepage.js",
+        "<%= jsPath %>/lib/autogrow-textfield.js",
         "<%= jsPath %>/lib/bugform.js",
         "<%= jsDistPath %>/templates.js"
       ],
@@ -46,6 +47,7 @@ module.exports = function(grunt) {
         "<%= jsPath %>/lib/models/issue.js",
         "<%= jsPath %>/lib/models/comment.js",
         "<%= jsPath %>/lib/comments.js",
+        "<%= jsPath %>/lib/autogrow-textfield.js",
         "<%= jsPath %>/lib/issues.js"
       ],
       dest: "<%= jsDistPath %>/issues.js"

webcompat/static/css/src/issue.css

@@ -72,7 +72,6 @@
 .issue-new-comment .text-field {
   box-sizing: border-box;
   margin-bottom: calc(var(--unit-space) * 2);
-  min-height: 120px;
   padding: calc(var(--unit-space) * 2);
 }
 
@@ -101,23 +100,23 @@
 }
 
 /* As we can not add a class to the img in the comment right now (markup parsers are complicated), we need to use the img element */
+
 .comment-body img,
 .js-Issue-markdown img {
   max-width: 100%;
 }
 
 /* var(--page-size-m) = 665px - vars not usable in queries */
+
 @media (min-width: 665px) {
   #issue.grid-row {
     flex-wrap: nowrap;
   }
-
   #issue > .x2 {
     flex-basis: 66.66666%;
     max-width: 66.66666%;
     min-width: 0;
   }
-
   #issue > .x1 {
     flex-basis: 33.33333%;
     max-width: 33.33333%;

webcompat/static/js/lib/autogrow-textfield.js

@@ -0,0 +1,55 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+function Autogrow() {
+  this.autogrowField = $(".js-autogrow-field");
+
+  this.init = function() {
+    this.handleAutogrowField = this.handleAutogrowField.bind(this);
+
+    this.autogrowField.each(function(index, el) {
+      var minRows = parseInt(el.getAttribute("rows"), 10);
+      el.dataset.minRows = minRows;
+    });
+    this.autogrowField.on("focus keyup input", this.handleAutogrowField);
+  };
+
+  this.handleAutogrowField = function(event) {
+    var target = event.target;
+    var $target = $(target);
+    var MIN_ROWS = target.dataset.minRows;
+    var contentHeight =
+      target.scrollHeight -
+      parseInt($target.css("padding-top"), 10) -
+      parseInt($target.css("padding-bottom"), 10);
+
+    // store initially calculated row height if not already present
+    if (event.type === "focus" && !target.dataset.rowHeight) {
+      target.dataset.rowHeight = contentHeight / MIN_ROWS;
+    }
+
+    var rowHeight = target.dataset.rowHeight;
+    // don't let textarea grow more than half the screen size
+    var MAX_HEIGHT = window.innerHeight / 2;
+    var MAX_ROWS = Math.floor(MAX_HEIGHT / rowHeight);
+    // determine amount of used rows to shrink back if necessary
+    var usedRows = target.value.split("\n").length;
+    var rows = Math.max(Math.ceil(contentHeight / rowHeight), usedRows);
+    var newRowsValue =
+      rows < MIN_ROWS ? MIN_ROWS : rows > MAX_ROWS ? MAX_ROWS : rows;
+
+    // update rows attribute and respect minimum and maximum values
+    target.setAttribute("rows", newRowsValue);
+    if (newRowsValue * rowHeight > parseInt(target.style.height, 10)) {
+      // reset element style height
+      target.style.height = "";
+    }
+  };
+
+  return this.init();
+}
+
+$(function() {
+  new Autogrow();
+});

webcompat/static/js/lib/bugform.js

@@ -5,7 +5,6 @@
 /*eslint new-cap: ["error", { "capIsNewExceptions": ["Deferred"] }]*/
 
 function BugForm() {
-  this.autogrowField = $(".js-autogrow-field");
   this.clickedButton = null;
   this.detailsInput = $("#details:hidden");
   this.errorLabel = $(".js-error-upload");
@@ -83,7 +82,6 @@ function BugForm() {
     this.checkProblemTypeValidity = this.checkProblemTypeValidity.bind(this);
     this.checkImageTypeValidity = this.checkImageTypeValidity.bind(this);
     this.checkOptionalNonEmpty = this.checkOptionalNonEmpty.bind(this);
-    this.handleAutogrowField = this.handleAutogrowField.bind(this);
     this.storeClickedButton = this.storeClickedButton.bind(this);
     this.onFormSubmit = this.onFormSubmit.bind(this);
     this.onReceiveMessage = this.onReceiveMessage.bind(this);
@@ -96,7 +94,6 @@ function BugForm() {
     }
 
     this.disableSubmits();
-    this.initAutogrowFields();
     this.urlField.on("blur input", this.checkURLValidity);
     this.descField.on("blur input", this.checkDescriptionValidity);
     this.problemType.on("change", this.checkProblemTypeValidity);
@@ -123,48 +120,6 @@ function BugForm() {
     window.addEventListener("message", this.onReceiveMessage, false);
   };
 
-  this.initAutogrowFields = function() {
-    // store initial rows attribute value in dataset of each element
-    // because rows attribute will be overwritten later when autogrowing
-    this.autogrowField.each(function(index, el) {
-      var minRows = parseInt(el.getAttribute("rows"), 10);
-      el.dataset.minRows = minRows;
-    });
-    this.autogrowField.on("focus keyup input", this.handleAutogrowField);
-  };
-
-  this.handleAutogrowField = function(event) {
-    var target = event.target;
-    var $target = $(target);
-    var MIN_ROWS = target.dataset.minRows;
-    var contentHeight =
-      target.scrollHeight -
-      parseInt($target.css("padding-top"), 10) -
-      parseInt($target.css("padding-bottom"), 10);
-
-    // store initially calculated row height if not already present
-    if (event.type === "focus" && !target.dataset.rowHeight) {
-      target.dataset.rowHeight = contentHeight / MIN_ROWS;
-    }
-
-    var rowHeight = target.dataset.rowHeight;
-    // don't let textarea grow more than half the screen size
-    var MAX_HEIGHT = window.innerHeight / 2;
-    var MAX_ROWS = Math.floor(MAX_HEIGHT / rowHeight);
-    // determine amount of used rows to shrink back if necessary
-    var usedRows = target.value.split("\n").length;
-    var rows = Math.max(Math.ceil(contentHeight / rowHeight), usedRows);
-    var newRowsValue =
-      rows < MIN_ROWS ? MIN_ROWS : rows > MAX_ROWS ? MAX_ROWS : rows;
-
-    // update rows attribute and respect minimum and maximum values
-    target.setAttribute("rows", newRowsValue);
-    if (newRowsValue * rowHeight > parseInt(target.style.height, 10)) {
-      // reset element style height
-      target.style.height = "";
-    }
-  };
-
   this.onReceiveMessage = function(event) {
     // We're getting a report about our own site, so let's bail.
     if (this.isSelfReport()) {

webcompat/templates/issue/issue-comment-submit.html

@@ -10,7 +10,8 @@
   <div class="comment-body grid-cell x2">
     <div class="form-text form-element">
       <label for="newComment" class="form-label off-screen">Leave a comment</label>
-      <textarea id="newComment" class="form-field text-field light js-Comment-text mousetrap" rows="2" placeholder="Leave a comment" required></textarea>
+      <textarea id="newComment" class="form-field text-field light js-autogrow-field js-Comment-text mousetrap" rows="2" placeholder="Leave a comment"
+        required></textarea>
     </div>
     <div class="js-ImageUploadView">
       {% include "issue/upload-image.jst" %}

webcompat/templates/layout.html

@@ -56,6 +56,7 @@
 <script src="{{ url_for('static', filename='js/vendor/markdown-it-sanitizer-0.4.1.js') }}"></script>
 <script src="{{ url_for('static', filename='js/lib/flash-message.js') }}"></script>
 <script src="{{ url_for('static', filename='js/lib/homepage.js') }}"></script>
+<script src="{{ url_for('static', filename='js/lib/autogrow-textfield.js') }}"></script>
 <script src="{{ url_for('static', filename='js/lib/bugform.js') }}"></script>
 <script src="{{ url_for('static', filename='js/dist/templates.js') }}"></script>
 {%- if config['LOCALHOST'] -%}