Auto-expanding textarea for frontpage text in event settings (fossasia#1340)

* Add auto-expanding textarea

* guard to prevent duplication

* inline JS to separate static file and other modifications

* initial text area & resize

* viewport-size

* initial height & scrollbar appears only inside textarea not on page

---------

Co-authored-by: Mario Behling <mb@mariobehling.de>

Author: 2 people

app/eventyay/base/configurations/default_setting.py

@@ -15,6 +15,7 @@
 from django.utils.translation import gettext_lazy as _
 from django.utils.translation import gettext_noop, pgettext, pgettext_lazy
 from i18nfield.forms import I18nFormField, I18nTextarea, I18nTextInput
+from eventyay.base.forms import I18nAutoExpandingTextarea
 from i18nfield.strings import LazyI18nString
 from rest_framework import serializers
 
@@ -2229,7 +2230,7 @@ def primary_font_kwargs():
         'type': LazyI18nString,
         'serializer_class': I18nField,
         'form_class': I18nFormField,
-        'form_kwargs': dict(label=_('Frontpage text'), widget=I18nTextarea),
+        'form_kwargs': dict(label=_('Frontpage text'), widget=I18nAutoExpandingTextarea),
     },
     'event_info_text': {
         'default': '',

app/eventyay/base/forms/__init__.py

@@ -167,6 +167,29 @@ def format_output(self, rendered_widgets, id_) -> str:
         return super().format_output(rendered_widgets, id_)
 
 
+class I18nAutoExpandingTextarea(i18nfield.forms.I18nTextarea):
+
+    def __init__(self, attrs=None, **kwargs):
+        default_attrs = {
+            'class': 'form-control auto-expanding-textarea',
+            'data-auto-expand': 'true',
+            'style': 'min-height: 320px; max-height: 400px; overflow-y: auto; resize: vertical; transition: height 0.2s ease-in-out; box-sizing: border-box;'
+        }
+        if attrs:
+            if 'class' in attrs:
+                default_attrs['class'] = default_attrs['class'] + ' ' + attrs['class']
+            if 'style' in attrs:
+                default_attrs['style'] = default_attrs['style'] + '; ' + attrs['style']
+            attrs_copy = attrs.copy()
+            attrs_copy.pop('class', None)
+            attrs_copy.pop('style', None)
+            default_attrs.update(attrs_copy)
+        super().__init__(attrs=default_attrs, **kwargs)
+
+    class Media:
+        js = ('eventyay-common/js/auto-expanding-textarea.js',)
+
+
 class I18nURLFormField(i18nfield.forms.I18nFormField):
     """
     Custom form field to handle internationalized URL inputs. It extends the I18nFormField
@@ -202,5 +225,4 @@ def clean(self, value) -> LazyI18nString:
                     url_validator(val)
         else:
             url_validator(value.data)
-
-        return value
+        return value

app/eventyay/eventyay_common/static/eventyay-common/js/auto-expanding-textarea.js

@@ -0,0 +1,85 @@
+(function () {
+    'use strict';
+
+    if (window.autoExpandTextareaInitialized) {
+        return;
+    }
+    window.autoExpandTextareaInitialized = true;
+
+    function autoExpandTextarea(textarea) {
+        if (!textarea || textarea.hasAttribute('data-auto-expand-init')) return;
+        textarea.setAttribute('data-auto-expand-init', 'true');
+
+        function adjustHeight() {
+            textarea.style.height = 'auto';
+            requestAnimationFrame(function () {
+                var computedStyle = window.getComputedStyle(textarea);
+                var minHeight = parseInt(computedStyle.minHeight, 10) || 320;
+                var viewportHeight = window.innerHeight;
+                var computedMaxHeight = parseInt(computedStyle.maxHeight, 10);
+
+                // Calculate offset based on viewport to prevent page scrollbar
+                var offset = 500;
+                if (viewportHeight < 600) {
+                    offset = 300;
+                } else if (viewportHeight < 800) {
+                    offset = 400;
+                } else if (viewportHeight < 1000) {
+                    offset = 450;
+                } else {
+                    offset = 550;
+                }
+
+                var viewportBasedMax = Math.max(200, viewportHeight - offset);
+                var maxHeight = Math.min(computedMaxHeight || 400, viewportBasedMax);
+                var contentHeight = textarea.scrollHeight;
+                var newHeight = Math.max(minHeight, Math.min(contentHeight, maxHeight));
+
+                textarea.style.height = newHeight + 'px';
+                textarea.style.overflowY = (contentHeight > maxHeight) ? 'auto' : 'hidden';
+            });
+        }
+
+        textarea.addEventListener('input', adjustHeight);
+        textarea.addEventListener('paste', function () { setTimeout(adjustHeight, 10); });
+
+        adjustHeight();
+    }
+
+    function initializeAutoExpandTextareas() {
+        var textareas = document.querySelectorAll('textarea[data-auto-expand="true"]');
+        textareas.forEach(autoExpandTextarea);
+    }
+
+    // Single global resize listener to recalculate heights on viewport change
+    var globalResizeTimeout;
+    window.addEventListener('resize', function () {
+        clearTimeout(globalResizeTimeout);
+        globalResizeTimeout = setTimeout(initializeAutoExpandTextareas, 150);
+    });
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initializeAutoExpandTextareas);
+    } else {
+        initializeAutoExpandTextareas();
+    }
+
+    // Watch for dynamically added textareas (e.g., form fields added via AJAX)
+    var formContainer = document.querySelector('form') || document.body;
+    var observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+            mutation.addedNodes.forEach(function (node) {
+                if (node.nodeType === 1) {
+                    if (node.matches && node.matches('textarea[data-auto-expand="true"]')) {
+                        autoExpandTextarea(node);
+                    }
+                    if (node.querySelectorAll) {
+                        var textareas = node.querySelectorAll('textarea[data-auto-expand="true"]');
+                        textareas.forEach(autoExpandTextarea);
+                    }
+                }
+            });
+        });
+    });
+    observer.observe(formContainer, { childList: true, subtree: true });
+})();