Cycle.js, как закрыть всплывающее окно, нажав за его пределами

Question

Я играю с фреймворком Cycle.js и создал всплывающее окно / оверлей в качестве компонента.

Я выделил popup-компонент. Source.DOM, который я обычно использовал бы в качестве источника событий, ограничен только popup dom.

Есть ли способ cycle.js для обнаружения кликов снаружи? Или я должен просто прибегнуть к прикреплению слушателей к документу?

Answer 1

Есть два способа добиться этого:

1. Положить div элемент внутри вашего изолированного компонента потока данных, но поместите его через CSS position:fixed; left:0;right:0;top:0;bottom:0; поэтому он охватывает всю страницу. затем добавьте слушателя для этого div. Он получит все события щелчка на странице и все еще находится внутри границ изоляции вашего компонента.

2. Создайте собственный "драйвер глобальных кликов", который добавляет прослушиватель кликов ко всему документу и публикует щелчки как наблюдаемые:

   const globalClickDriver = () => {
     return O.fromEventPattern(
       (h) => {
         document.addEventListener('click', h, true);
       },
       (h) => {
         document.removeEventListener('click', h, true);
       }
     );
   };
   
   const drivers = {
     DOM: makeDOMDriver('#app-main'),
     globalClick: globalClickDriver,
   };
   
   Cycle.run(main, drivers);