TylorS/example.html

## example.html
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://www.jaybirdsport.com/static/js/greensock/plugins/ThrowPropsPlugin.min.js"></script>
  </head>
  <body>
    <div id="test-container"></div>
    <!-- Generated by `npm run test-browser` -->
    <script src="tests-bundle.js"></script>
  </body>
</html>

## example.js
import {run} from '@motorcycle/core'
import {makeDomDriver, h} from '../../../src'
import most from 'most'
import {combineArray} from 'most/lib/combinator/combine'
import map from 'fast.js/array/map'
import TweenMax from '../../../node_modules/gsap/src/uncompressed/TweenMax.js'
import Draggable from '../../../node_modules/gsap/src/uncompressed/utils/Draggable.js'

function InputCount(dom, initialValue) {
  const id = `.component-count`
  const value$ = dom.select(id)
      .events(`input`)
      .map(ev => ev.target.value)
      .startWith(initialValue)
      .multicast()

  return {
    dom: value$.map(value => h(`input${id}`, {
      key: 1000,
      props: {
        type: 'range',
        max: 250,
        min: 1,
        value,
      },
      style: {
        margin: '0.25em',
        width: '100%'
      }
    })),
    value$
  }
}

function CycleJSLogo(id) {
  return {
    dom: most.just(h(`div#logo-${id}`, {
      key: id,
      style: {
        alignItems: 'center',
        background: 'url(./cyclejs_logo.svg)',
        boxSizing: 'border-box',
        display: 'inline-flex',
        fontFamily: 'sans-serif',
        fontWeight: '700',
        fontSize: '8px',
        height: '32px',
        justifyContent: 'center',
        margin: '8px',
        width: '32px',
      },
      hook: {
        insert: vNode => {
          Draggable.create(vNode.elm, {
            bounds: document.getElementById('component-container'),
            type: "x,y",
            throwProps: true,
          })
          TweenMax.fromTo(vNode.elm, 0.6, {
            css: {
              opacity: 0,
              transform: "translate3d(-15em, 5em, 0) rotateZ(0)"
            },
          }, {
            css: {
              opacity: 1,
              transform: "translate3d(0, 0, 0) rotateZ(360deg)"
            },
          })
        },
        update: vNode => {
          TweenMax.to(vNode.elm, 0.3, {
            rotation: 360,
          })
        },
        remove: (vNode, callback) => {
          TweenMax.to(vNode.elm, 0.3, {
            rotation: -360,
          })
          TweenMax.to(vNode.elm, 0.6, {
            css: {
              transform: "translate3d(15em, 2em, 0)",
              opacity: 0
            },
          })
          .eventCallback('onComplete', callback)
        }
      }
    }, `${id}`))
  }
}

function view(value, inputCountVTree, componentDOMs) {
  return h('div#component-container', {style: {
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      margin: '2em',
      overflow: 'hidden'
    }}, [
    h('h2', [`# of Components: ${value}`]),
    inputCountVTree,
    h('div', componentDOMs)
  ])
}

function main(sources) {
  const initialValue = 100
  const inputCount = InputCount(sources.dom, initialValue)

  const components$ = inputCount.value$
    .map(value => map(Array(parseInt(value)), (v, i) => CycleJSLogo(i + 1).dom))
    .map(array => combineArray((...components) => components, array))
    .switch()

  return {
    dom: most.zip(view, inputCount.value$, inputCount.dom, components$)
  }
}

run(main, {dom: makeDomDriver(`#test-container`)});
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://www.jaybirdsport.com/static/js/greensock/plugins/ThrowPropsPlugin.min.js"></script>
	</head>
	<body>
	<div id="test-container"></div>
	<!-- Generated by `npm run test-browser` -->
	<script src="tests-bundle.js"></script>
	</body>
	</html>
	import {run} from '@motorcycle/core'
	import {makeDomDriver, h} from '../../../src'
	import most from 'most'
	import {combineArray} from 'most/lib/combinator/combine'
	import map from 'fast.js/array/map'
	import TweenMax from '../../../node_modules/gsap/src/uncompressed/TweenMax.js'
	import Draggable from '../../../node_modules/gsap/src/uncompressed/utils/Draggable.js'

	function InputCount(dom, initialValue) {
	const id = `.component-count`
	const value$ = dom.select(id)
	.events(`input`)
	.map(ev => ev.target.value)
	.startWith(initialValue)
	.multicast()

	return {
	dom: value$.map(value => h(`input${id}`, {
	key: 1000,
	props: {
	type: 'range',
	max: 250,
	min: 1,
	value,
	},
	style: {
	margin: '0.25em',
	width: '100%'
	}
	})),
	value$
	}
	}

	function CycleJSLogo(id) {
	return {
	dom: most.just(h(`div#logo-${id}`, {
	key: id,
	style: {
	alignItems: 'center',
	background: 'url(./cyclejs_logo.svg)',
	boxSizing: 'border-box',
	display: 'inline-flex',
	fontFamily: 'sans-serif',
	fontWeight: '700',
	fontSize: '8px',
	height: '32px',
	justifyContent: 'center',
	margin: '8px',
	width: '32px',
	},
	hook: {
	insert: vNode => {
	Draggable.create(vNode.elm, {
	bounds: document.getElementById('component-container'),
	type: "x,y",
	throwProps: true,
	})
	TweenMax.fromTo(vNode.elm, 0.6, {
	css: {
	opacity: 0,
	transform: "translate3d(-15em, 5em, 0) rotateZ(0)"
	},
	}, {
	css: {
	opacity: 1,
	transform: "translate3d(0, 0, 0) rotateZ(360deg)"
	},
	})
	},
	update: vNode => {
	TweenMax.to(vNode.elm, 0.3, {
	rotation: 360,
	})
	},
	remove: (vNode, callback) => {
	TweenMax.to(vNode.elm, 0.3, {
	rotation: -360,
	})
	TweenMax.to(vNode.elm, 0.6, {
	css: {
	transform: "translate3d(15em, 2em, 0)",
	opacity: 0
	},
	})
	.eventCallback('onComplete', callback)
	}
	}
	}, `${id}`))
	}
	}

	function view(value, inputCountVTree, componentDOMs) {
	return h('div#component-container', {style: {
	position: 'absolute',
	top: 0,
	bottom: 0,
	left: 0,
	right: 0,
	margin: '2em',
	overflow: 'hidden'
	}}, [
	h('h2', [`# of Components: ${value}`]),
	inputCountVTree,
	h('div', componentDOMs)
	])
	}

	function main(sources) {
	const initialValue = 100
	const inputCount = InputCount(sources.dom, initialValue)

	const components$ = inputCount.value$
	.map(value => map(Array(parseInt(value)), (v, i) => CycleJSLogo(i + 1).dom))
	.map(array => combineArray((...components) => components, array))
	.switch()

	return {
	dom: most.zip(view, inputCount.value$, inputCount.dom, components$)
	}
	}

	run(main, {dom: makeDomDriver(`#test-container`)});