Cycle.js third-party lib

DOMContentLoaded.js

/** @jsx html */

import xs from 'xstream';
import {run} from '@cycle/xstream-run';
import {div, input, p, makeDOMDriver} from '@cycle/dom';
import {html} from 'snabbdom-jsx';

import dragula from 'dragula';

require('./styles.scss');

document.write('<div id="app"></div>');

function main(sources) {

    const clicked$ = sources.DOM.select('#left').events('click').map(e => console.log('Clicked'))
    const dropped$ = sources.DOM.select('#left').events('drop').map(e => console.log('Dropped from stream'))

    const state$ = xs.merge(xs.of(false), clicked$, dropped$)

    var drake = dragula();

    document.addEventListener('DOMContentLoaded', function() {
      drake.containers.push(document.querySelector('#left'));
      drake.containers.push(document.querySelector('#right'));
    });

    drake.on('drop', function(element, container) {
      console.log('Dropped');
      drake.cancel(true);
    });

    const vdom$ = state$.map(any =>
      <div>
        <div id="left"><div>Left</div></div>
        <div id="right"><div>Right</div></div>
      </div>
    );

    return {
      DOM: vdom$
    };

}

const drivers = {
  DOM: makeDOMDriver('#app')
};

run(main, drivers);