Как определить изменение состояния видимости элемента?

Question

[Дмитрий]

Допустим, есть у нас модельное окно которое естественно скрыто черед свойство display. В модельном окне, есть некая панель, в панели имеется выпадающий список который тоже скрыт через свойство display. В этом меню есть компонент который использует функции по типу getBoundingClientRect, getComputedStyle и т.д. и т.п. Вопрос, как можно подписаться на событие при котором модальное окно как и вып. список открыты? То есть, все родительские элементы как и сам конечный элемент видны. Есть ли способ запускать код всякий раз когда элемент становится видимым?

ПС: Структура только для примера!!! Вложенность может быть произвольной.

Comments

[imko]

Кинь обоих в MutatuionObserver на атрибут style, там проверку какую надо производи

[Дмитрий]

imko, Немного почитал на эту тему, похоже что в этом случае лучше использовать IntersectionObserver? Потому что io можно бросить только на конечный элемент. а в случае с MutatuionObserver всю цепочку нужно отслеживать. а у меня структура вложенности может быть произвольной.

[imko]

Дмитрий, интерсекшон другое делает, попадание в области видимости. В принципе если выпадашка из списка является не реальным списком опций а своими элементами эмулирующими селект то можно и через него замутить. В переменной хранить "открытость" модала и с ней сверяться на открытие (срабатывание ИО). Возмодно сработает даже с настоящим селектом если следить за option но мне кажется маловероятно

Answer 1

[Михаил Р.]

Расширю ответ imko кодом:

// return true, if element visible
function isVisible(element) {
  return window.getComputedStyle(element).display !== 'none';
}

// MutationObserver
const observer = new MutationObserver((mutations, obs) => {
  const modal = document.querySelector('#modalWindow'); // modal selector
  const dropdown = document.querySelector('#dropdownMenu'); // dropdown menu selector

  // check is visible?
  if (isVisible(modal) && isVisible(dropdown)) {
    console.log('Element is visible');
    obs.disconnect();
  }
});

// config
const config = {
  attributes: true,
  attributeFilter: ['style']
}

// run
observer.observe(document.querySelector('#modalWindow'), config);
observer.observe(document.querySelector('#dropdownMenu'), config);

Comments

[Дмитрий]

Спасибо! Уже разобрался. Я повесил все на ResizeObserver с проверкой что элемент в момент вызова виден. Так логичнее, ибо пересчёт нужно было делать после изменения размера родителя или конечного элемента.