Cycle.js how to close a popup by clicking outside it

Question

I'm playing with the Cycle.js framework and have created a popup/overlay as a component.

I have isolated the popup-component. The sources.DOM which I would normally use as the source of events is limited to the popup dom only.

Is there a cycle.js-way for the component to detect clicks outside it? Or should I just resort to attaching listeners to the document?

score 3 · Accepted Answer · answered Jan 12 '16 at 22:17

There are two ways to achieve that:

Put a div element inside your isolated data flow component but position it via css position:fixed; left:0;right:0;top:0;bottom:0; so it spans the whole page. then add the listener for this div. It will get all the click events on the page and is still inside the isolation boundaries of your component.

Create a custom "global click driver" that adds a click listener to the the whole document and publishes the clicks as an observable:

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);

Cycle.js how to close a popup by clicking outside it

1 Answers1