made with esnextbin
Last active
April 5, 2016 02:31
-
-
Save davidchase/7c7351df65b10112055b57d4944b90e2 to your computer and use it in GitHub Desktop.
esnextbin sketch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Observable, Subject} from 'rx' | |
| import {fromEvent} from 'most'; | |
| const {merge} = Observable | |
| import isolate from '@cycle/isolate' | |
| import {div, button} from 'cycle-snabbdom' | |
| import {run} from '@cycle/core' | |
| import {makeDOMDriver} from 'cycle-snabbdom' | |
| function intent(DOMSource, selfId) { | |
| return DOMSource.select('.add').events('click').map(() => ({selfId, type: 'addChild'})) | |
| } | |
| function model(action$, createIsolatedFolder) { | |
| const addFolderUpdate$ = action$.filter(({type}) => type === 'addChild') | |
| .map(action => function addFolderUpdate(childrenMap) { | |
| const childId = String(Math.floor(Math.random() * 1000)) | |
| const folder = createIsolatedFolder(childId) | |
| childrenMap[childId] = folder; | |
| return childrenMap; | |
| }) | |
| const children$ = Observable.merge(addFolderUpdate$) | |
| .startWith({}) | |
| .scan((children, update) => update(children)) | |
| return children$; | |
| } | |
| function style(backgroundColor) { | |
| return { | |
| backgroundColor, | |
| padding: '2em', | |
| width: 'auto', | |
| border: '2px solid black' | |
| } | |
| } | |
| function makeRandomColor() { | |
| let hexColor = Math.floor(Math.random() * 16777215).toString(16) | |
| while (hexColor.length < 6) { | |
| hexColor = '0' + hexColor | |
| } | |
| return '#' + hexColor | |
| } | |
| function makeView(removable, color) { | |
| return function view(children) { | |
| return div('.scope-', {style: style(color)}, [ | |
| button('.add', ['Add Folder']), | |
| children && div({}, Object.keys(children).map(key => { | |
| return children[key].DOM | |
| })) | |
| ]) | |
| } | |
| } | |
| function createFolderComponent({id, removable = true}) { | |
| function Folder(sources) { | |
| function createFolder(childId) { | |
| return createFolderComponent(({id: childId}))(sources) | |
| } | |
| const action$ = intent(sources.DOM, id) | |
| const children$ = model(action$, createFolder) | |
| const color = makeRandomColor() | |
| const vdom$ = children$.map(makeView(removable, color)) | |
| console.log(vdom$); | |
| return { | |
| DOM: vdom$, | |
| action$, | |
| id | |
| } | |
| } | |
| return isolate(Folder); | |
| } | |
| function main(sources) { | |
| const Folder = createFolderComponent({id: 0, removable: false}) | |
| return Folder(sources) | |
| } | |
| run(main, {DOM: makeDOMDriver('#app')}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "esnextbin-sketch", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "rx": "4.1.0", | |
| "most": "0.18.8", | |
| "@cycle/isolate": "1.2.0", | |
| "cycle-snabbdom": "1.2.1", | |
| "@cycle/core": "6.0.3", | |
| "babel-runtime": "6.6.1" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| var _keys = require('babel-runtime/core-js/object/keys'); | |
| var _keys2 = _interopRequireDefault(_keys); | |
| var _rx = require('rx'); | |
| var _most = require('most'); | |
| var _isolate = require('@cycle/isolate'); | |
| var _isolate2 = _interopRequireDefault(_isolate); | |
| var _cycleSnabbdom = require('cycle-snabbdom'); | |
| var _core = require('@cycle/core'); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| var merge = _rx.Observable.merge; | |
| function intent(DOMSource, selfId) { | |
| return DOMSource.select('.add').events('click').map(function () { | |
| return { selfId: selfId, type: 'addChild' }; | |
| }); | |
| } | |
| function model(action$, createIsolatedFolder) { | |
| var addFolderUpdate$ = action$.filter(function (_ref) { | |
| var type = _ref.type; | |
| return type === 'addChild'; | |
| }).map(function (action) { | |
| return function addFolderUpdate(childrenMap) { | |
| var childId = String(Math.floor(Math.random() * 1000)); | |
| var folder = createIsolatedFolder(childId); | |
| childrenMap[childId] = folder; | |
| return childrenMap; | |
| }; | |
| }); | |
| var children$ = _rx.Observable.merge(addFolderUpdate$).startWith({}).scan(function (children, update) { | |
| return update(children); | |
| }); | |
| return children$; | |
| } | |
| function style(backgroundColor) { | |
| return { | |
| backgroundColor: backgroundColor, | |
| padding: '2em', | |
| width: 'auto', | |
| border: '2px solid black' | |
| }; | |
| } | |
| function makeRandomColor() { | |
| var hexColor = Math.floor(Math.random() * 16777215).toString(16); | |
| while (hexColor.length < 6) { | |
| hexColor = '0' + hexColor; | |
| } | |
| return '#' + hexColor; | |
| } | |
| function makeView(removable, color) { | |
| return function view(children) { | |
| return (0, _cycleSnabbdom.div)('.scope-', { style: style(color) }, [(0, _cycleSnabbdom.button)('.add', ['Add Folder']), children && (0, _cycleSnabbdom.div)({}, (0, _keys2.default)(children).map(function (key) { | |
| return children[key].DOM; | |
| }))]); | |
| }; | |
| } | |
| function createFolderComponent(_ref2) { | |
| var id = _ref2.id; | |
| var _ref2$removable = _ref2.removable; | |
| var removable = _ref2$removable === undefined ? true : _ref2$removable; | |
| function Folder(sources) { | |
| function createFolder(childId) { | |
| return createFolderComponent({ id: childId })(sources); | |
| } | |
| var action$ = intent(sources.DOM, id); | |
| var children$ = model(action$, createFolder); | |
| var color = makeRandomColor(); | |
| var vdom$ = children$.map(makeView(removable, color)); | |
| console.log(vdom$); | |
| return { | |
| DOM: vdom$, | |
| action$: action$, | |
| id: id | |
| }; | |
| } | |
| return (0, _isolate2.default)(Folder); | |
| } | |
| function main(sources) { | |
| var Folder = createFolderComponent({ id: 0, removable: false }); | |
| return Folder(sources); | |
| } | |
| (0, _core.run)(main, { DOM: (0, _cycleSnabbdom.makeDOMDriver)('#app') }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment