Как определить, что пользователь нажал за пределами mdl-layout__drawer и что ящик был закрыт?

Question

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

Как это можно сделать?

Answer 1

Прослушайте событие transitionend на элементе выдвижного ящика и затем определите, имеет ли выдвижной ящик класс is-visible, чтобы определить, открывался ли выдвижной ящик или нет. Например:

const drawer = document.querySelector('.mdl-layout__drawer');
drawer.addEventListener('transitionend', (event) => {
  if (!drawer.classList.contains('is-visible')) {
    alert('closed');
  }
});