Auto-expanding textarea for frontpage text in event settings

app/eventyay/base/configurations/default_setting.py

@@ -21,6 +21,7 @@
     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
 
@@ -2230,7 +2231,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

@@ -165,42 +165,57 @@ def format_output(self, rendered_widgets, id_) -> str:
         )
         rendered_widgets.append(f'<div class="i18n-field-markdown-note">{markdown_note}</div>')
         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: 80px; max-height: 300px; overflow-y: auto; resize: vertical; transition: height 0.2s ease-in-out;'
+        }
+        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
     and ensures that all provided URLs are valid.
-
     Methods:
         clean(value: LazyI18nString) -> LazyI18nString:
             Validates the URL(s) in the provided internationalized input.
     """
-
     def clean(self, value) -> LazyI18nString:
         """
         Cleans and validates the internationalized URL input.
-
         Args:
             value (LazyI18nString): The input value to clean and validate.
-
         Returns:
             LazyI18nString: The cleaned and validated input value.
-
         Raises:
             ValidationError: If any of the URLs are invalid.
         """
         value = super().clean(value)
         if not value:
             return value
-
         url_validator = URLValidator()
-
         if isinstance(value.data, dict):
             for val in value.data.values():
                 if val:
                     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,60 @@
+(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';
+            var computedStyle = window.getComputedStyle(textarea);
+            var minHeight = parseInt(computedStyle.minHeight, 10) || 80;
+            var maxHeight = parseInt(computedStyle.maxHeight, 10) || 300;
+            var newHeight = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight));
+            textarea.style.height = newHeight + 'px';
+            textarea.style.overflowY = (textarea.scrollHeight > 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(function(textarea) {
+            if (!textarea.hasAttribute('data-auto-expand-init')) {
+                autoExpandTextarea(textarea);
+            }
+        });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initializeAutoExpandTextareas);
+    } else {
+        initializeAutoExpandTextareas();
+    }
+
+    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 });
+})();