From b42922d32cba88e22967b71d977dcd873e662e70 Mon Sep 17 00:00:00 2001
From: Luka Murn <luka.murn@biosistemika.com>
Date: Tue, 8 Nov 2016 15:48:30 +0100
Subject: [PATCH] Add autosize functionality to all textareas

Closes SCI-637
---
 .../javascripts/sitewide/textarea_autosize.js | 19 +++++++++++++++++++
 app/assets/stylesheets/themes/scinote.scss    | 18 ++++++------------
 app/views/comments/_edit.html.erb             |  2 +-
 app/views/my_module_comments/_index.html.erb  |  2 +-
 app/views/project_comments/_index.html.erb    |  2 +-
 app/views/result_comments/_index.html.erb     |  2 +-
 app/views/step_comments/_index.html.erb       |  2 +-
 7 files changed, 30 insertions(+), 17 deletions(-)
 create mode 100644 app/assets/javascripts/sitewide/textarea_autosize.js

diff --git a/app/assets/javascripts/sitewide/textarea_autosize.js b/app/assets/javascripts/sitewide/textarea_autosize.js
new file mode 100644
index 000000000..ce71c31f6
--- /dev/null
+++ b/app/assets/javascripts/sitewide/textarea_autosize.js
@@ -0,0 +1,19 @@
+$(document).on('focus', 'textarea', function() {
+  var $this = $(this);
+  var height = $this.css('height');
+
+  // Set the nr. of rows to 1 if small textarea
+  if ($this.hasClass('textarea-sm')) {
+    $this.attr('rows', '1');
+  }
+
+  // Initialize autosize plugin if it's not initialized yet
+  if (_.isUndefined($this.data('autosize'))) {
+    $this.autosize({append: ''});
+
+    // Restore previous height!
+    $this.css('height', height);
+  }
+
+  $this.trigger('autosize.resize');
+});
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 3f3208551..dfd487492 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1497,9 +1497,10 @@ html.turbolinks-progress-bar::before {
   }
 }
 
-// Only allow vertical resizing of all text areas
+// Disable textarea resizing throughout application
+// (will be done via autosize JS plugin)
 textarea {
-  resize: vertical;
+  resize: none;
 }
 
 textarea.textarea-sm {
@@ -1511,14 +1512,7 @@ textarea.textarea-sm {
   }
 }
 
-.comment-form {
-  textarea {
-    height: 34px;
-    min-height: 34px;
-  }
-
-  .btn.btn-default {
-    height: calc(100% + 14px);
-    min-height: 34px;
-  }
+.comment-form .btn.btn-default {
+  height: calc(100% + 14px);
+  min-height: 34px;
 }
diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb
index d77b1e5fe..d18b68ae4 100644
--- a/app/views/comments/_edit.html.erb
+++ b/app/views/comments/_edit.html.erb
@@ -1,7 +1,7 @@
 <%= bootstrap_form_for(@comment, url: @update_url, remote: true, html: { method: :put, class: 'comment-form edit-comment-form' }, data: { role: 'edit-comment-message-form' }) do |f| %>
   <div class="form-group">
     <div class="input-group">
-      <%= f.text_area :message, autofocus: true, hide_label: true, data: { role: 'message-input' }, value: @comment.message %>
+      <%= f.text_area :message, class: 'textarea-sm', autofocus: true, hide_label: true, data: { role: 'message-input' }, value: @comment.message %>
       <span class="input-group-btn">
         <a class="btn btn-default" data-action="save">
           <span class="glyphicon glyphicon-ok"></span>
diff --git a/app/views/my_module_comments/_index.html.erb b/app/views/my_module_comments/_index.html.erb
index f627b474b..653f3fbd9 100644
--- a/app/views/my_module_comments/_index.html.erb
+++ b/app/views/my_module_comments/_index.html.erb
@@ -19,7 +19,7 @@
     <li>
       <hr>
       <%= bootstrap_form_for :comment, url: { format: :json }, method: :post, remote: true, html: { class: 'comment-form' } do |f| %>
-        <%= f.text_area :message, hide_label: true, placeholder: t("experiments.canvas.popups.comment_placeholder"), append: f.submit("+"), help: '.' %>
+        <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t("experiments.canvas.popups.comment_placeholder"), append: f.submit("+"), help: '.' %>
       <% end %>
     </li>
   </ul>
diff --git a/app/views/project_comments/_index.html.erb b/app/views/project_comments/_index.html.erb
index 7c822c1eb..68bb12cd4 100644
--- a/app/views/project_comments/_index.html.erb
+++ b/app/views/project_comments/_index.html.erb
@@ -18,7 +18,7 @@
     <li>
       <hr>
       <%= bootstrap_form_for :comment, url: {format: :json}, method: :post, remote: true, html: { class: 'comment-form' } do |f| %>
-        <%= f.text_area :message, hide_label: true, placeholder: t('projects.index.comment_placeholder'), append: f.submit('+'), help: '.' %>
+        <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t('projects.index.comment_placeholder'), append: f.submit('+'), help: '.' %>
       <% end %>
     </li>
   </ul>
diff --git a/app/views/result_comments/_index.html.erb b/app/views/result_comments/_index.html.erb
index e5b85e20a..023879156 100644
--- a/app/views/result_comments/_index.html.erb
+++ b/app/views/result_comments/_index.html.erb
@@ -22,7 +22,7 @@
     <li>
       <hr>
       <%= bootstrap_form_for :comment, url: { format: :json }, method: :post, remote: true, html: { class: 'comment-form' } do |f| %>
-        <%= f.text_area :message, hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+", onclick: "processResult(event, ResultTypeEnum.COMMENT, false);"), help: '.' %>
+        <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+", onclick: "processResult(event, ResultTypeEnum.COMMENT, false);"), help: '.' %>
       <% end %>
     </li>
   </ul>
diff --git a/app/views/step_comments/_index.html.erb b/app/views/step_comments/_index.html.erb
index f4546e78e..89ee41c76 100644
--- a/app/views/step_comments/_index.html.erb
+++ b/app/views/step_comments/_index.html.erb
@@ -22,7 +22,7 @@
     <li>
       <hr>
       <%= bootstrap_form_for :comment, url: { format: :json }, html: { class: 'comment-form', id: "step-comment-#{@step.id}" }, method: :post, remote: true do |f| %>
-        <%= f.text_area :message, hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+"), help: '.' %>
+        <%= f.text_area :message, class: 'textarea-sm', hide_label: true, placeholder: t("general.comment_placeholder"), append: f.submit("+"), help: '.' %>
       <% end %>
     </li>
   </ul>