Corp/backend/docs/TEXTAREA_AUTO_EXPAND.md

Унификация автоматического расширения textarea

Описание изменений

Создан универсальный модуль textareaAutoExpand.js, который автоматически обрабатывает расширение всех textarea с rows="1" в формах комментариев и сообщений по всему приложению.

Реализация

Новый модуль: textareaAutoExpand.js

Путь: backend/static/js/components/textareaAutoExpand.js

Функциональность:

• Автоматически находит все textarea с атрибутом rows="1" или классом composer-textarea
• Расширяет textarea при вводе текста до максимум 6 строк (144px)
• Использует MutationObserver для отслеживания динамически добавляемых textarea
• Работает со всеми формами комментариев: лента, заявки, модальные окна, чат

Принцип работы:

// Сбрасываем высоту для корректного вычисления scrollHeight
textarea.style.height = 'auto';

// Устанавливаем новую высоту, но не больше максимальной (6 строк)
const newHeight = Math.min(textarea.scrollHeight, MAX_HEIGHT);
textarea.style.height = newHeight + 'px';

Поддерживаемые селекторы

Модуль автоматически работает с:

• .comment-form-quick textarea - быстрые комментарии в ленте
• .comment-form-modal textarea - комментарии в модальном окне
• .request-comment-form textarea - комментарии к заявкам
• .comment-new textarea - новые комментарии в списке заявок
• .composer-textarea - поле ввода в чате
• .message-input - общий класс для всех полей ввода

Условия применения

Авторасширение применяется только к textarea, которые удовлетворяют условию:

• Имеют атрибут rows="1" ИЛИ
• Имеют класс composer-textarea

Это означает, что textarea в модальных окнах редактирования (с rows="3" или rows="4") не будут автоматически расширяться.

Удалённые файлы

1. textareaAutogrowHandler.js

• Причина удаления: Использовался только в post_form.html, функциональность заменена универсальным модулем
• Зависимости: Удалён импорт из backend/templates/feed/post_form.html

2. textareaAutogrow.js

• Причина удаления: Требовал явного атрибута data-autogrow, менее универсален
• Зависимости: Удалён импорт из backend/templates/base.html

Изменённые файлы

1. backend/templates/base.html

- import { initTextareaAutogrow } from '{% static "js/components/textareaAutogrow.js" %}';
+ {# Универсальный модуль для автоматического расширения textarea #}
+ <script src="{% static 'js/components/textareaAutoExpand.js' %}" defer></script>

Удалена инициализация:

- const textareaAutogrow = initTextareaAutogrow();
- if (textareaAutogrow) window.textareaAutogrow = textareaAutogrow;

2. backend/templates/feed/post_form.html

- import { initTextareaAutogrow } from "{% static 'js/components/textareaAutogrowHandler.js' %}";
- 
- // Автоматическое изменение размера textarea
- initTextareaAutogrow({ selector: 'form.card textarea' });

3. backend/static/js/components/chatMarkRead.js

  function autosize() {
    if (!ta) return;
-   ta.style.height = 'auto';
-   ta.style.height = Math.min(ta.scrollHeight, 6 * 24) + 'px';
+   // Авторасширение теперь обрабатывается textareaAutoExpand.js
+   // Оставляем только autoscroll логику
    if (atBottom()) autoscroll();
  }

4. backend/static/js/components/requestCommentsHandler.js

Удалена функция initTextareaAutosize() и её вызов:

- function initTextareaAutosize() {
-   // ... закомментированный код
- }
- 
- document.addEventListener('DOMContentLoaded', () => {
-   autoloadAllCounts();
-   initTextareaAutosize();
- });
+ document.addEventListener('DOMContentLoaded', autoloadAllCounts);

5. backend/static/scss/components/_message-inputs.scss

Удалены конфликтующие min-height и max-height, которые мешали автоматическому расширению:

  .message-input,
  .composer-textarea {
    flex: 1 1 auto;
-   min-height: 44px;
-   max-height: 260px;
    border: none !important;
    ...
  }

  .message-field--compact .message-input {
-   min-height: 32px;
    font-size: 0.95rem;
+   // min-height удален - управляется textareaAutoExpand.js
  }

6. backend/static/css/components/request-list.css

Удалены специфичные стили для .comment-new textarea, которые перебивали универсальное поведение:

- /* ─────────────────────────────────────────────────────────────
-    COMMENT TEXTAREA
- ────────────────────────────────────────────────────────────── */
- .comment-new textarea {
-   resize: vertical;
-   max-height: 220px;
-   min-height: 44px;
-   overflow-y: auto;
- }

Преимущества новой реализации

1. Единообразие: Все textarea с rows="1" работают одинаково по всему приложению
2. Автоматичность: Не требует явной инициализации в каждом модуле
3. Динамичность: Автоматически обрабатывает textarea, добавленные через AJAX/модальные окна
4. Простота поддержки: Один файл вместо трёх разных реализаций
5. Производительность: Единая инициализация вместо множественных обработчиков

Тестирование

Необходимо протестировать автоматическое расширение в:

• ✅ Быстрые комментарии в ленте (feed)
• ✅ Комментарии в модальном окне поста
• ✅ Комментарии к заявкам (request_detail.html)
• ✅ Комментарии в обработке заявок (request_process.html)
• ✅ Комментарии в списке заявок (request_list_full.html)
• ✅ Поле ввода в чате (composer-textarea)

Ожидаемое поведение:

• Начальная высота: 1 строка (~38px)
• Максимальная высота: 6 строк (144px)
• После 6 строк появляется скроллбар
• При удалении текста высота уменьшается

Обратная совместимость

Модуль экспортирует API в window.textareaAutoExpand:

window.textareaAutoExpand = {
  init: initAllTextareas,      // Пересканировать все textarea
  initTextarea: initAutoExpand, // Инициализировать конкретный textarea
  autoExpand: autoExpand        // Применить расширение к textarea
};

Это позволяет вручную инициализировать textarea, если требуется:

// Пример использования
const textarea = document.querySelector('#myTextarea');
window.textareaAutoExpand.initTextarea(textarea);

Дата изменения

2025-01-XX