ser-gen / fieldautosize Goto Github PK

Продолжение #5.

Если поле находится внизу страницы и высота его больше одной строки, то при пересчёте высоты страница прокручивается выше, будто поле однострочное.

Это пригодится: https://learn.javascript.ru/metrics-window

Плагин уже учитывает все поля, в том числе добавленные после своего первого запуска.

Проблема с текстовыми полями внутри скрытых контейнеров: невозможно узнать их достоверную высоту до их первого отображения. Пример таких контейнеров — вкладки.

Если отобразить контейнер, то поля в нём будут с высотой по умолчанию. Плагин выставит верную высоту только по вводу в эти поля данных пользователем. Таким образом, нужно высчитывать высоту полей в скрытых контейнерах только один раз, перед вводом.

Могу предложить два варианта работы с такими полями:

1. Простой — запускать вычисление высоты полей вручную по переключению режима отображения контейнеров. В обработчик вкладок нужно добавить вызов соответствующего метода:

...
// отображаем выбранную вкладку
currentTabContent
    .addClass('active')

    // ищем текстовые поля по отображению вкладки
    .find('textarea').each(function () {
        var field = $(this).get(0);

        // ждём, чтобы вкладка гарантированно переключилась
        setTimeout(function () {
            fieldAutosize.handle(field);
        }, 0);
    });
...

Этот вариант неудобен тем, что нужно такую правку внести в другие обработчики переключений отображения. В то же время, может быть, больше никаких правок и не понадобится, если такая особенность есть только у владок.

2. Непростой — получать высоту полей в скрытых контейнерах автоматически. Тут тоже два пути:

а) Манипуляция со стилями контейнеров.

По этому пути пошли, например, создатели jquery.actual. Здесь также можно прочесть об этом способе.

Нужно убрать стиль display: none у всех скрытых контейнеров, заменив его на аналогичный, но не мешающий получить высоту содержимого. При этом, значение display должно стать таким, которое будет у элемента при его отображении. Допустим:

element {
    display: block; // чтобы получить размер содержимого
    visibility: hidden; // чтобы сделать элемент невидимым
    height: 0; // чтобы элемент не сдвигал следующие элементы в потоке
    overflow: hidden; // чтобы скрыть содержимое
}

Когда все контейнеры отобразятся, подсчитать верную высоту, применить её и вернуть отображение скрытых контейнеров к первоначальному значению.

Особенность способа в том, что невозможно предугадать, какое значение display будет у контенеров при их отображении.

б) Слежение за изменением состояния контейнеров.

В современных браузерах есть возможность следить за изменением DOM. Благодаря этому, можно следить за изменением атрибутов скрытых полей и их контейнеров. Это можно делать, например, так.

Следить можно за атрибутами, которые могут менять отображение: style, class, hidden.

На практике поля могут скрываться и другими атрибутами, в том числе произвольными data-*. Также, отображение может зависеть от содержимого тегов style и подключаемых файлов стилей.

Если требуемый атрибут изменился, проверять видимость полей. Если видимы — выставлять нужную высоту.

http://ser-gen.github.io/fieldAutosize/example.html

В 1.1.3 переместилась проверка на обрабатываемость из process в handle.

А строка, число или кефир.

Для верного вычисления высоты поля ему выставляется нулевая высота.
Если вычисление будет происходить после прокрутки документа ниже поля, то, например, в момент нажатия на документ произойдёт сжатие текстового поля и — сразу же — выставление верной высоты. Сжатие и приводит к прокрутке.
Можно убрать обработку события change, пусть пересчёт будет срабатывать только при вводе содержимого в поле.

Если селектор исключений указывать после подключения скрипта и первых текстовых полей (например, когда подключение скрипта в шапке, а его настройки перед </body>), то скрипт один раз выставит размеры поля, которое должно было попасть под исключение.

Нужно не вызывать функцию обработки полей сразу по исполнению скрипта, а ждать подходящее событие — готовность документа.

Все задачи, открытые на сегодняшний день — #6, #7, #8 — возникли из-за выбранного способа вычисления высоты поля.

Проблема была уже частично описана в #5: для вычисления размера содержимого высота поля уменьшается до нуля и выставляется заново по каждому событию ввода.

Каждую из открытых проблем нужно решать отдельно.

• Переходы (#6) можно отключать перед определением высоты содержимого. Перед применением вычисленного — включать.
• Чтобы не прокручивалась страница (#7), нужно запоминать расстояние прокрутки перед измерением высоты содержимого поля и восстанавливать старое значение.
• Полю можно выставлять минимальную высоту, чтобы учитывать rows (#8), если в стилях это свойство не используется.

Плюс этого способа в том, что работа выполняется с самим полем.

Альтернативный вариант: использовать генерируемое скриптом скрытое поле. Оно может использоваться для определения высоты.

Пример работы: https://jsfiddle.net/r4ojxymg/2/

• Переходы (#6) будут работать, ведь выставляется сразу нужный размер.
• Страница не будет схлопываться в процессе вычисления нужной высоты (#7).
• Скрытому полю можно будет передавать любые атрибуты и состояния из обрабатываемого поля, что позволит учитывать и rows (#8).

Проблема в использовании дополнительного элемента и сложности синхронизации состояний между элементами.

В processNew обрабатываются лишь сами мутанты, но не то, что у них внутри.

Чтобы обрабатывать не все элементы подряд.

Он вообще неверно применяется.

А сейчас он игнорируется.

Если на странице есть скрытые поля, необрабатываемое поле обработается при изменении его атрибута.

<textarea name="" id="" cols="30" rows="3" hidden></textarea>
<textarea class="kek" name="" id="" cols="30" rows="3"></textarea>

<script>
var excluded = document.querySelector('.kek');

window.fieldAutosize = {};
window.fieldAutosize.exclude = '.kek';

excluded.value = `






`;

setTimeout(() => {
	document.querySelector('.kek').classList.add('lol');
}, 3000);
</script>
<script src="fieldAutosize.js"></script>

Когда плагин включён, возможность изменять высоту поля вручную не имеет смысла — при вводе оно снова подстроится под содержимое.

Варианты работы:

1. Отключать плагин на элементе при ручном изменении размера по вертикали атрибутом data-fieldAutosize-disable='true'.

В браузерах нет события, генерируемого изменением размеров поля, но можно следить за атрибутами. При изменении размеров они изменяются.

При двойном нажатии на уголок для изменения размеров поле примет изначальный размер.

2. Изменить поведение полей стилями:

a) Управлять поведением исходя из пользовательских стилей:

• Если плагин включён и у поля свойство resize не со значением vertical, то нужно добавить стиль resize: horizontal.
• Если поля со стилем resize: vertical, значит поле не должно увеличиваться в ширину и нужно добавлять стиль resize: none.
• Если плагин выключен, нужно восстанавливать исходное поведение.

б) добавлять всем полям стиль resize: none. При желании, пользователь сможет переопределить его с помощью !important.

• добавить про особенности с демостраницы
• английская версия устарела на несколько релизов

Если добавить полю стиль

textarea {
    transition: .2s;
}

• поле перестанет сжиматься при удалении содержимого
• будет появляться полоса прокрутки при увеличении размера поля.

• в process может быть передан объект, не являющийся массивом
• проверять на возможность обработки нужно в handle
• у элемента, передаваемого в isCanNotBeHandled могут не быть все запрашиваемые поля
• в нескольких местах throttle используется неадекватно