uclouvain · jcougnaud · Nov 28, 2024
diff --git a/forms/__init__.py b/forms/__init__.py
@@ -356,3 +356,22 @@ def clean(self, value):
             return html.unescape(cleaned_value)
 
         return cleaned_value
+
+
+class AutoGrowTextareaWidget(forms.Textarea):
+    """A textarea widget whose minimum height is automatically adjusted to fit its content."""
+
+    template_name = "admission/widgets/autogrow_textarea.html"
+
+    def __init__(self, attrs=None):
+        if not attrs:
+            attrs = {}
+
+        attrs['onInput'] = 'this.parentNode.dataset.value = this.value'
+
+        super().__init__(attrs)
+
+    class Media:
+        css = {
+            'all': ('admission/autogrow_textarea.css',),
+        }
diff --git a/forms/admission/checklist.py b/forms/admission/checklist.py
@@ -47,12 +47,6 @@
 )
 
 from admission.constants import CONTEXT_GENERAL, CONTEXT_DOCTORATE
-from admission.models import GeneralEducationAdmission, DoctorateAdmission
-from admission.models.base import training_campus_subquery
-from admission.models.checklist import (
-    RefusalReason,
-    AdditionalApprovalCondition,
-)
 from admission.ddd import DUREE_MINIMALE_PROGRAMME, DUREE_MAXIMALE_PROGRAMME
 from admission.ddd.admission.domain.model.enums.authentification import EtatAuthentificationParcours
 from admission.ddd.admission.domain.model.enums.condition_acces import recuperer_conditions_acces_par_formation
@@ -79,9 +73,16 @@
     EMPTY_CHOICE_AS_LIST,
     get_initial_choices_for_additional_approval_conditions,
     AdmissionHTMLCharField,
+    AutoGrowTextareaWidget,
 )
 from admission.forms import get_academic_year_choices
 from admission.forms.admission.document import ChangeRequestDocumentForm
+from admission.models import GeneralEducationAdmission, DoctorateAdmission
+from admission.models.base import training_campus_subquery
+from admission.models.checklist import (
+    RefusalReason,
+    AdditionalApprovalCondition,
+)
 from admission.views.autocomplete.learning_unit_years import LearningUnitYearAutocomplete
 from admission.views.common.detail_tabs.comments import (
     COMMENT_TAG_SIC,
@@ -114,7 +115,7 @@
 
 class CommentForm(forms.Form):
     comment = forms.CharField(
-        widget=forms.Textarea(
+        widget=AutoGrowTextareaWidget(
             attrs={
                 'rows': 2,
                 'hx-trigger': 'keyup changed delay:2s',

diff --git a/static/admission/autogrow_textarea.css b/static/admission/autogrow_textarea.css
@@ -0,0 +1,42 @@
+/*
+ *
+ * OSIS stands for Open Student Information System. It's an application
+ * designed to manage the core business of higher education institutions,
+ * such as universities, faculties, institutes and professional schools.
+ * The core business involves the administration of students, teachers,
+ * courses, programs and so on.
+ *
+ * Copyright (C) 2015-2024 Université catholique de Louvain (http://www.uclouvain.be)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * A copy of this license - GNU General Public License - is available
+ * at the root of the source code of this program.  If not,
+ * see http://www.gnu.org/licenses/.
+ *
+ */
+
+.autogrow-textarea-wrapper {
+  display: grid;
+}
+
+.autogrow-textarea-wrapper:after {
+  content: attr(data-value) ' ';
+  visibility: hidden;
+  display: block;
+  white-space: pre-wrap;
+}
+
+.autogrow-textarea-wrapper textarea, .autogrow-textarea-wrapper:after {
+  min-height: 100% !important;
+  grid-area: 1 / 1 / 1 / 1;
+  padding: 0.5em;
+}
diff --git a/templates/admission/continuing_education/checklist.html b/templates/admission/continuing_education/checklist.html
@@ -268,16 +268,6 @@
               $(this).find('.next-option-button').prop('disabled', optionsNumber <=1);
           });
 
-          function autogrow () {
-              if (this.scrollHeight > this.clientHeight) {
-                  this.style.height = `${this.scrollHeight}px`;
-              }
-          }
-
-          $('#tabs-content').on('input', 'textarea[name$="-comment"]', function () {
-              autogrow.call(this);
-          });
-
           const menuItems = $('#checklist-menu *[data-toggle="tab"]');
 
           menuItems.on('show.bs.tab', function (e) {
@@ -300,9 +290,6 @@
               const tabPaneId = $(this).attr('href');
               window.location.hash = tabPaneId;
 
-              // refresh comment height
-              autogrow.call($(tabPaneId).find('textarea[name$="-comment"]')[0]);
-
               refreshDocuments(tabPaneId);
 
               // refresh info viewer
@@ -352,8 +339,6 @@
 
               // Activate tab from hash on first load
               $(`#checklist-menu *[data-toggle="tab"][href="${defaultTab}"]`).click();
-
-              $('textarea[name="comment"]:visible').each(autogrow);
           });
 
           let bound = false;
@@ -453,10 +438,6 @@
               }
           });
 
-          $('#tabs-content').on('htmx:afterSettle', function(event){
-              $('textarea[name$="-comment"]:visible').each(autogrow);
-          });
-
           $('#tabs-content').on('htmx:afterRequest', function(event) {
               // Do not remove spinner if we are going to refresh the page
               if (event.originalEvent.detail.xhr.getResponseHeader('hx-refresh') === 'true') {
@@ -543,6 +524,7 @@
   {{ block.super }}
   <link href="{% static 'osis_document/osis-document-editor.css' %}" rel="stylesheet" />
   <link href="{% static 'admission/AdmissionSelectFilter.css' %}" rel="stylesheet" >
+  <link href="{% static 'admission/autogrow_textarea.css' %}" rel="stylesheet" />
   <link href="{% static 'css/toggle-switch.css' %}" rel="stylesheet" />
   <style>
     #three-pane-checklist {

diff --git a/templates/admission/doctorate/checklist.html b/templates/admission/doctorate/checklist.html
@@ -594,16 +594,6 @@
               $(this).find('.next-option-button').prop('disabled', optionsNumber <=1);
           });
 
-          function autogrow () {
-              if (this.scrollHeight > this.clientHeight) {
-                  this.style.height = `${this.scrollHeight}px`;
-              }
-          }
-
-          $('#tabs-content').on('input', 'textarea[name$="-comment"]', function () {
-              autogrow.call(this);
-          });
-
           const menuItems = $('#checklist-menu *[data-toggle="tab"]');
 
           menuItems.on('show.bs.tab', function (e) {
@@ -626,9 +616,6 @@
               const tabPaneId = $(this).attr('href');
               window.location.hash = tabPaneId;
 
-              // refresh comment height
-              autogrow.call($(tabPaneId).find('textarea[name$="-comment"]')[0]);
-
               refreshDocuments(tabPaneId);
 
               // refresh info viewer
@@ -679,8 +666,6 @@
               // Activate tab from hash on first load
               $(`#checklist-menu *[data-toggle="tab"][href="${defaultTab}"]`).click();
 
-              $('textarea[name="comment"]:visible').each(autogrow);
-
               $('[data-toggle=popover]').popover();
           });
 
@@ -781,10 +766,6 @@
               }
           });
 
-          $('#tabs-content').on('htmx:afterSettle', function(event){
-              $('textarea[name$="-comment"]:visible').each(autogrow);
-          });
-
           $('#tabs-content').on('htmx:afterRequest', function(event) {
               // Do not remove spinner if we are going to refresh the page
               if (event.originalEvent.detail.xhr.getResponseHeader('hx-refresh') === 'true') {
@@ -986,6 +967,7 @@
   {{ sic_decision_approval_form.media.css }}
   <link href="{% static 'osis_document/osis-document-editor.css' %}" rel="stylesheet" />
   <link href="{% static 'admission/AdmissionSelectFilter.css' %}" rel="stylesheet" >
+  <link href="{% static 'admission/autogrow_textarea.css' %}" rel="stylesheet" />
   <link href="{% static 'css/toggle-switch.css' %}" rel="stylesheet" />
   <link href="{% static 'osis_profile/css/parcours.css' %}" rel="stylesheet" >
   <style>

diff --git a/templates/admission/general_education/checklist.html b/templates/admission/general_education/checklist.html
@@ -668,16 +668,6 @@
               $(this).find('.next-option-button').prop('disabled', optionsNumber <=1);
           });
 
-          function autogrow () {
-              if (this.scrollHeight > this.clientHeight) {
-                  this.style.height = `${this.scrollHeight}px`;
-              }
-          }
-
-          $('#tabs-content').on('input', 'textarea[name$="-comment"]', function () {
-              autogrow.call(this);
-          });
-
           const menuItems = $('#checklist-menu *[data-toggle="tab"]');
 
           menuItems.on('show.bs.tab', function (e) {
@@ -700,9 +690,6 @@
               const tabPaneId = $(this).attr('href');
               window.location.hash = tabPaneId;
 
-              // refresh comment height
-              autogrow.call($(tabPaneId).find('textarea[name$="-comment"]')[0]);
-
               refreshDocuments(tabPaneId);
 
               // refresh info viewer
@@ -753,8 +740,6 @@
               // Activate tab from hash on first load
               $(`#checklist-menu *[data-toggle="tab"][href="${defaultTab}"]`).click();
 
-              $('textarea[name="comment"]:visible').each(autogrow);
-
               $('[data-toggle=popover]').popover();
           });
 
@@ -855,10 +840,6 @@
               }
           });
 
-          $('#tabs-content').on('htmx:afterSettle', function(event){
-              $('textarea[name$="-comment"]:visible').each(autogrow);
-          });
-
           $('#tabs-content').on('htmx:afterRequest', function(event) {
               // Do not remove spinner if we are going to refresh the page
               if (event.originalEvent.detail.xhr.getResponseHeader('hx-refresh') === 'true') {
@@ -1099,6 +1080,7 @@
   {{ sic_decision_approval_form.media.css }}
   <link href="{% static 'osis_document/osis-document-editor.css' %}" rel="stylesheet" />
   <link href="{% static 'admission/AdmissionSelectFilter.css' %}" rel="stylesheet" >
+  <link href="{% static 'admission/autogrow_textarea.css' %}" rel="stylesheet" />
   <link href="{% static 'css/toggle-switch.css' %}" rel="stylesheet" />
   <link href="{% static 'osis_profile/css/parcours.css' %}" rel="stylesheet" >
   <style>

diff --git a/templates/admission/widgets/autogrow_textarea.html b/templates/admission/widgets/autogrow_textarea.html
@@ -0,0 +1,26 @@
+{% comment "License" %}
+  * OSIS stands for Open Student Information System. It's an application
+  * designed to manage the core business of higher education institutions,
+  * such as universities, faculties, institutes and professional schools.
+  * The core business involves the administration of students, teachers,
+  * courses, programs and so on.
+  *
+  * Copyright (C) 2015-2024 Université catholique de Louvain (http://www.uclouvain.be)
+  *
+  * This program is free software: you can redistribute it and/or modify
+  * it under the terms of the GNU General Public License as published by
+  * the Free Software Foundation, either version 3 of the License, or
+  * (at your option) any later version.
+  *
+  * This program is distributed in the hope that it will be useful,
+  * but WITHOUT ANY WARRANTY; without even the implied warranty of
+  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  * GNU General Public License for more details.
+  *
+  * A copy of this license - GNU General Public License - is available
+  * at the root of the source code of this program.  If not,
+  * see http://www.gnu.org/licenses/.
+{% endcomment %}
+<div class="autogrow-textarea-wrapper" data-value="{{ widget.value }}">
+{% include 'django/forms/widgets/textarea.html' %}
+</div>