From 7a307cf01118b63ac50bcdfdedb8ec1ae30fe77f Mon Sep 17 00:00:00 2001 From: Sergey Vasilev Date: Mon, 20 Mar 2017 22:56:35 +0300 Subject: [PATCH] 1.1.0 full --- README.md | 15 ++++++++++----- example.html | 10 +++++++--- fieldAutosize.js | 3 ++- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ba34777..7504799 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,23 @@ # fieldAutosize + Небольшой плагин без зависимостей для того, чтобы текстовые поля изменяли свой размер по содержимому. -Плагин уважает выбор [блочной модели](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) и реагирует на события `input` и `change` благодаря делегации. +Плагин уважает выбор [блочной модели](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing), учитывает значения атрибута `rows` и реагирует на события ввода благодаря делегации. Если поддерживается [Mutation Observer](http://caniuse.com/#feat=mutationobserver), реагирует и на элементы, добавляемые после его срабатывания. -Плагин не изменяет размеры элемента, если элемент в момент его первых запусков не видим. Тогда его можно активировать вручную: +Плагин старается следить и за невидимыми элементами. Если у него не получается, его можно активировать вручную: — метод `fieldAutosize.process(selector)` обрабатывает все текстовые поля по `selector` — метод `fieldAutosize.handle(elem)` обрабатывает элемент в документе, элемент должен быть в `DOM`. -Свойство `selector` — селектор, по которому выбираются элементы для обработки. -По селектору, указанному в свойство `exclude`, можно исключить элементы из обработки. +Свойство `selector [textarea]` — селектор, по которому выбираются элементы для обработки. +По селектору, указанному в свойство `exclude [false]`, можно исключить элементы из обработки. -При помощи `fieldAutosize.active = false` можно выключить плагин в любой момент. +При помощи `active = false` можно выключить плагин в любой момент. Атрибут `data-fieldAutosize-disable="true"` исключит элемент из обработки. + +`watchHidden [true]` заставит плагин следить за скрытыми полями. + +Если пользователь захочет, он сможет изменить размеры поля самостоятельно. Благодаря `watchResize [true]` плагин перестанет действовать для поля после изменения его размера пользователем. diff --git a/example.html b/example.html index 1b99d17..38f7570 100644 --- a/example.html +++ b/example.html @@ -164,10 +164,14 @@

Поля, добавляемые динамически

document.getElementById('addContainer').appendChild(t); }; - document.querySelector('.animated__field').addEventListener('fieldAutosize:resize', function (e) { - var container = e.target.closest('.animated'); + document.addEventListener('fieldAutosize:resize', function (e) { + var obj = e.target.closest('.animated__field'); - container.style.height = e.detail.height +'px'; + if (obj) { + var container = obj.closest('.animated'); + + container.style.height = e.detail.height +'px'; + }; }); diff --git a/fieldAutosize.js b/fieldAutosize.js index 8db1f7f..295ee11 100644 --- a/fieldAutosize.js +++ b/fieldAutosize.js @@ -2,7 +2,7 @@ * Автоматическое изменение размера текстового поля под содержимое * https://github.com/Ser-Gen/fieldAutosize * - * Версия 1.0.0 + * Версия 1.1.0 * * Лицензия MIT */ @@ -382,6 +382,7 @@ if (!'CustomEvent' in window) { // генерация событий function trigger (elem, name, data) { var event = new CustomEvent('fieldAutosize:'+ name, { + bubbles: true, detail: data || null });