From 933834c4a60610710fc949daa2e15531c2c45780 Mon Sep 17 00:00:00 2001
From: Robert Speicher <rspeicher@gmail.com>
Date: Mon, 1 Feb 2016 16:55:00 -0500
Subject: Allow manual resize of js-autosize textareas

First, the autosize library was being too controlling and removed the
`resize` property from any elements to which it was attached, removing
the drag handle.

Second, we detect when the user manually resizes an autosize textarea,
and then remove the autosize behavior from it and increase its
max-height.

This should allow for the best of both worlds.

Closes #12832
---
 app/assets/javascripts/behaviors/autosize.js.coffee | 20 +++++++++++++++++++-
 app/assets/stylesheets/framework/markdown_area.scss |  2 +-
 app/assets/stylesheets/pages/note_form.scss         |  2 +-
 3 files changed, 21 insertions(+), 3 deletions(-)

(limited to 'app/assets')

diff --git a/app/assets/javascripts/behaviors/autosize.js.coffee b/app/assets/javascripts/behaviors/autosize.js.coffee
index b32072e61ee..a072fe48a98 100644
--- a/app/assets/javascripts/behaviors/autosize.js.coffee
+++ b/app/assets/javascripts/behaviors/autosize.js.coffee
@@ -1,4 +1,22 @@
+#= require jquery.ba-resize
 #= require autosize
 
 $ ->
-  autosize($('.js-autosize'))
+  $fields = $('.js-autosize')
+
+  $fields.on 'autosize:resized', ->
+    $field = $(@)
+    $field.data('height', $field.outerHeight())
+
+  $fields.on 'resize.autosize', ->
+    $field = $(@)
+
+    if $field.data('height') != $field.outerHeight()
+      $field.data('height', $field.outerHeight())
+      autosize.destroy($field)
+      $field.css('max-height', window.outerHeight)
+
+  autosize($fields)
+  autosize.update($fields)
+
+  $fields.css('resize', 'vertical')
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 6732343802a..1d8611b04dc 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -83,7 +83,7 @@
   background: #FFF;
   border: 1px solid #ddd;
   min-height: 140px;
-  max-height: 430px;
+  max-height: 500px;
   padding: 5px;
   box-shadow: none;
   width: 100%;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 32ba1676333..158c2a47862 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -147,7 +147,7 @@
 .edit_note {
   .markdown-area {
     min-height: 140px;
-    max-height: 430px;
+    max-height: 500px;
   }
   .note-form-actions {
     background: transparent;
-- 
cgit v1.2.1