Update compose.tpl

The change ensures that the input dialogue is expanded when the bottom line is reached.

diff --git a/view/templates/item/compose.tpl b/view/templates/item/compose.tpl
index 051cb3b088214f279657b15c127d25ff43eb1de6..12b64fea2752544e0e6c90737c9277ad4887458d 100644 (file)
--- a/view/templates/item/compose.tpl
+++ b/view/templates/item/compose.tpl
@@ -54,7 +54,7 @@
                        </p>
                        <div id="dropzone-{{$id}}" class="dropzone" style="overflow:scroll">
                                <p>
-                                       <textarea id="comment-edit-text-{{$id}}" class="comment-edit-text form-control text-autosize" name="body" placeholder="{{$l10n.default}}" rows="7" tabindex="3" dir="auto" dir="auto" onkeydown="sendOnCtrlEnter(event, 'comment-edit-submit-{{$id}}')">{{$body}}</textarea>
+                                       <textarea id="comment-edit-text-{{$id}}" class="comment-edit-text form-control text-autosize expandable-textarea" name="body" placeholder="{{$l10n.default}}" rows="7" tabindex="3" dir="auto" dir="auto" onkeydown="sendOnCtrlEnter(event, 'comment-edit-submit-{{$id}}')">{{$body}}</textarea>
                                </p>
                        </div>
                        <p class="comment-edit-submit-wrapper">
@@ -103,4 +103,15 @@
 </div>
 <script>
        dzFactory.setupDropzone('#dropzone-{{$id}}', 'comment-edit-text-{{$id}}');
+               document.addEventListener("DOMContentLoaded", function() {
+                       var textareas = document.querySelectorAll(".expandable-textarea");
+                       textareas.forEach(function(textarea) {
+                       textarea.addEventListener("input", function() {
+                               this.style.height = "auto";
+                               this.style.height = (this.scrollHeight) + "px";
+               });
+               textarea.style.height = "auto";
+               textarea.style.height = (textarea.scrollHeight) + "px";
+       });
+});
 </script>