Skip to content

Commit

Permalink
1.1.0 full
Browse files Browse the repository at this point in the history
  • Loading branch information
Ser-Gen committed Mar 20, 2017
1 parent 6f43efc commit 7a307cf
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 9 deletions.
15 changes: 10 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -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]` плагин перестанет действовать для поля после изменения его размера пользователем.
10 changes: 7 additions & 3 deletions example.html
Original file line number Diff line number Diff line change
Expand Up @@ -164,10 +164,14 @@ <h4>Поля, добавляемые динамически</h4>
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';
};
});

</script>
Expand Down
3 changes: 2 additions & 1 deletion fieldAutosize.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Автоматическое изменение размера текстового поля под содержимое
* https://github.com/Ser-Gen/fieldAutosize
*
* Версия 1.0.0
* Версия 1.1.0
*
* Лицензия MIT
*/
Expand Down Expand Up @@ -382,6 +382,7 @@ if (!'CustomEvent' in window) {
// генерация событий
function trigger (elem, name, data) {
var event = new CustomEvent('fieldAutosize:'+ name, {
bubbles: true,
detail: data || null
});

Expand Down

0 comments on commit 7a307cf

Please sign in to comment.