function view([actor, nameVtree]: [Actor, VNode]): VNode { return div(".actor-panel.flex-column", [ div(".attributes.flex-column", [ nameVtree, "Width", input(".width", { props: { value: actor.width } }), "Height", input(".height", { props: { value: actor.height } }), "Color", input(".color", { props: { value: actor.color } }), button(".add-to-scenario", "Add to scenario") ]), div(".sidebar-preview.flex-column", [ "Preview", h( "svg", { attrs: { height: 300, viewBox: `-150 -150 300 300` }, style: { background: "#222" } }, [renderActor(actor, [], 0, 0, 0)] ) ]) ]); }
DOM: stuff$.map(([products, selected]) => products ? div('.container', [ hr(), button('.btn.btn-sm', 'Reload eWinery JSON Feed'), h1('Digivino Marketing Shortcodes'), `You have selected ${selected.length || 0} of the ${products.length || 0} products provided by eWinery`, hr(), div('.form-group', [ label('Search'), input('#search.form-control', {props: {type: 'search'}}), ]), br(), ul('.list-unstyled.list-group', [ li('list-group-item', div(['what the f**k'])), ...selected.map(each => li([ b(each.PRODUCTNAME), span(` SKU ${each.PRODUCTSKU} (${each.TYPE})`), br(), ul('.list-unstyled.list-group', [ ...each.TYPE === 'Kit' ? [ li('.list-group-item', `[Buy1Kit id="${each.PRODUCTID}" price="${each.PRICE1}]"`), li('.list-group-item', `[ReturnToSpecials]`) ] : [ li('.list-group-item', `[Buy1Bottle id="${each.PRODUCTID}" price="${each.PRICE1}"]`), li('.list-group-item', `[Buy1Case id="${each.PRODUCTID}" price="${each.PRICE2}"]`), li('.list-group-item', `[ReturnToShop]`) ] ]) ])) ]) ]) : div('.container.jumbotron', [ h1('Loading eWinery JSON stream...') ])
return model.state$.map(s => { return div([ // div([input(RandomButtonName, {attrs: {type:'button', value: 'Generate random data'}})]), div('#d3div', [ h('svg#d3svg') ]), control(s) ]) });
const vdom$ = user$.map(user => div('.users', [ button('.get-random', 'Get random user'), user === null ? null : div('.user-details', [ h1('.user-name', user.name), h4('.user-email', user.email), a('.user-website', {attrs: {href: user.website}}, user.website), ]), ]),
function main() { return {DOM: Observable.of( div('.container', [ div('.jumbotron', [ h1('Cycle.js Starter Pack') ]) ]) )}; }
test('view is function from model$ to observable of renderings', function() { [div('first'), div('second')].forEach(expected => { const model = (actions$, ...rest) => O.of(expected); Component({}, model, view, nullIntent); function view(model$, ...rest) { expect(model$).toBeStreamOf(expected); } }); });
function app() { return { html: xs.of( h('.test-element', [ div([h2('.a', 'a'), h('h4.b', 'b'), h('h1.fooclass')]), div([h3('.c', 'c'), h('div', [h('p.d', 'd'), h('h2.barclass')])]), ]), ), }; }
function view([name, editing]: [string, boolean]): VNode { if (editing) { return div(".project-name-container", [ div([ input(".project-name-input", { props: { value: name } }), a(".save-project-name", " ✓ "), a(".cancel-editing-project-name", " ✖ ") ]) ]); } return div(".project-name-container", [ div([span(".project-name", `${name}`), a(".edit-project-name", " ✎ ")]) ]); }
([timestamp, speed, height, nodeCount]: [ number, number, number, number ]) => div('.time', [ nodes(timestamp, speed, height, nodeCount), 'Speed', input('.speed', { props: {type: 'range', min: 1, max: maxSpeed, value: speed}, }), 'Height', input('.height', { props: {type: 'range', min: 1, max: maxHeight, value: height}, }), 'Nodes', input('.node-count', { props: { type: 'range', min: 1, max: maxNodeCount, value: nodeCount, }, }), ])
.map(([backButton, contents]) => div([ backButton, h2(`.${className}`, ['Details']), hr(), ...contents ])