Click elsewhere with CycleJS

clickElsewhereExample.txt

import FooComponent from './components/foo'

function globalUID() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
}

function hasGuidInAncestor(guid, el) {
  return el.guid === guid ? true : el.parentElement ? hasGuidInAncestor(guid, el.parentElement) : false
}

function main(sources) {
  const body_click$ = sources.DOM.select('body').events('click')
    .publish().refCount()

  const ClickElsewhere = {
    filter: function (guid) {
      return body_click$.filter(ev => {
        return !hasGuidInAncestor(guid, ev.target)
      })
    },
    filterWith: function(select_func: (el: Element) => Boolean) {
      return body_click$.filter(ev => {
        return select_func(ev.target)
      })
    }
  }

  const enrichedSources = {...sources, ClickElsewhere}

  const someComponent = FooComponent(enrichedSources)
  
  ...
}

function FooComponent(sources) {
  const guid = globalUID()
  const click_elsewhere$ = sources.ClickElsewhere.filter(guid)

  // Below reducer could be fed into Onionify
  const elsewhere_r = click_elsewhere$.map(_ => state => {
    ...update state
  }) 
  const DOM = O.of(div({props: {guid},[
     button('.test', ['Test button'])
  ]))

  return {
    DOM
    ...
  }
}