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

Мы все любим использовать CSS Flex и Grids, не так ли?

Однако в некоторых случаях изменение измерения Контейнер может потребовать перерисовки его элементов содержимого. Для решения таких задач была опубликована Спецификация наблюдателя изменения размера.

Я рад сообщить, что Resize Observer теперь широко поддерживается в современных браузерах. Его определения типов также объединены в Typescript Lib с PR this.

Однако в эпоху RxJs Observables я нахожу API для Resize Observer немного громоздким в использовании. И я начал думать ... Было бы неплохо построить вокруг этого API оболочку RxJs!

Эта мысль привела меня к созданию библиотеки From-Resize. Основные цели этой библиотеки перечислены ниже.

  • Возвращает наблюдаемый RxJs, который излучается при каждом изменении размера контейнера
  • Установите для часов направление Horizontal, Vertical или All
  • Установите начальное время устранения дребезга, чтобы контролировать частоту излучения.
  • Получайте уведомления о первой загрузке с помощью emitOnStart
  • Используйте возможности Операторов RxJs, чтобы творить чудеса!

Давайте посмотрим на это в действии!

Демо-предположения: я использовал ChartJs с параметром «отзывчивый», установленным на false, чтобы продемонстрировать этот пример *.

Увидеть проблему

  • Не устанавливайте флажок Enable From-Resize
  • Диаграмма отображается в правой нижней ячейке. Верхняя и левая ячейки представлены только в демонстрационных целях.

Теперь удалите левый элемент div, нажав кнопку «Удалить левый Div». Для этого действия событие изменения размера окна не будет генерироваться, поскольку размер окна остается неизменным.

  • Проблема: измерение элемента диаграммы теперь не синхронизировано с измерением родительского контейнера. Чтобы это исправить, нам нужно перерисовать график. Но как нам получить уведомление ??

Решение!

  • Включите From-Resize, установив флажок

  • Вы можете выбрать направление. По умолчанию установлено «Все»; то есть, он будет излучать изменения как по горизонтали, так и по вертикали.
  • Теперь удалите левый элемент div, нажав кнопку «Удалить левый Div».
  • График перерисовывается. Проблема решена !!

На этот раз это сработало, потому что мы подписываемся на наблюдаемый объект from-resize и при каждой передаче мы перерисовываем диаграмму.

Вы можете поиграть с этим интерактивным демонстрационным приложением здесь.

Пример использования

Как видите, код прост и понятен. Теперь вы можете комбинировать его с разными операторами RxJs, чтобы сделать что-то более продвинутое!

Вывод

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

Полезные ссылки