function renderInputSwitcher (state) {
return (
div('.input-switcher', [
p('.switcher .up', [upArrow]),
p('.switcher .down', [downArrow])
])
);
}
function getBody(state, selectVDom, listVDom) {
return div('.container', [
h1('#title', ['Nantes Network']),
p('select'),
selectVDom ? selectVDom: loading(),
p('list'),
listVDom ? listVDom : loading()
])
}
function renderAboutPage() {
return (
section('.about', [
h1('Read more about us'),
p('This is the page where we describe ourselves.'),
p('Contact us'),
renderMenu(),
])
);
}
DOM: src.navi.map((navi) => {
console.log("render about")
return div([
h1("About"),
menu({navi}),
p(["[about content]"]),
p(a({href: "http://twitter.com"}, "External link (real)")),
p(a({href: "/foobar", rel: "external"}, "External link (other app)")),
])
})
.map(([msTimerValue, isTimerOn]) => div({
id: 'timer'
},[
p({className: 'title' + (isTimerOn ? ' title--on' : '')}, '⏱'),
div({'className': 'numbers', 'data-hook': 'timer'}, [
span({'className': 'numbers__minutes'}, formatMinutes(msTimerValue)),
span({className: 'numbers__separator'}, ':'),
span({'className': 'numbers__second'}, formatSeconds(msTimerValue)),
span({className: 'numbers__separator'}, ':'),
span({'className': 'numbers__miliseconds'}, formatMiliseconds(msTimerValue)),
]),
button({
type: 'button',
className: 'button--green',
attributes: {
'data-hook': 'toggle-timer'
}
}, toggleTimerText(isTimerOn)),
button({
type: 'button',
className: 'button--grey',
attributes: {
'data-hook': 'reset-timer'
}
}, 'Reset timer'),
]))
.map(checked => {
window.localStorage.setItem('cyclejs.todo.sample-checked', checked);
return div([
input({
attrs: {type: 'checkbox', checked: checked},
}), 'toggle me', p(checked ? 'ON': 'OFF')
]);
})
function renderHomePage() {
return (
section('.home', [
renderMenu(),
h1('The homepage'),
p('Welcome to our spectacular web page with nothing special here.'),
])
);
}
const connectionStatus$ = sources.Connection.startWith('online').map(function (c) {
return div([
p([
a({href: 'https://github.com/jmeas/cycle-connection-driver',
style: {'font-size': '10px'}}, 'https://github.com/jmeas/cycle-connection-driver')
]),
c
])
})
function renderTestPage() {
return (
section('.test', [
renderMenu(),
h1('Test page.'),
p('This is the test page.'),
])
);
}
.combineLatest(decrementButton.DOM, incrementButton.DOM, (model, decrementButton, incrementButton) =>
div([
p([
label({
className: 'label-number'
}, String(model))
]),
decrementButton,
incrementButton
]));
(calendarVTree, value) => {
return div([
p([
a({href: 'https://github.com/enten/cyclejs-calendar',
style: {'font-size': '10px'}}, 'https://github.com/enten/cyclejs-calendar')
]),
div(value ? value.toString() : 'Pick a date'),
calendarVTree
])
})
return state$.map(state =>
div([
div([
p('Misspellings'),
div('.misspellings', state.sentenceParts)
]),
div([
p('Change Word'),
input('.word', {type: 'text', value: `${state.value}`})
]),
div([
p('Suggestions'),
select('.suggestions', {size: 5}, state.suggestions)
]),
div([
button('.change-word', 'Change'),
button('.ignore-word', 'Ignore')
])
])
function renderTopButtons () {
return div('.topButtons', [
p([
a({href: 'https://github.com/cyclejs/examples/tree/master/many',
style: {'font-size': '10px'}}, 'https://github.com/cyclejs/examples/tree/master/many')
]),
button('.add-one-btn', 'Add New Item'),
button('.add-many-btn', 'Add Many Items')
])
}
function viewUserinput() {
return div([
p({ className: 'light white' }, 'Enter your Twitter name and start chatting!'),
div({ attributes: { style: 'margin-top: 20px' } }, [
form({ className: 'username-form', onsubmit: (e) => e.preventDefault() }, [
input({ id: 'input-name', attributes: { placeholder: 'Enter your Twitter name!', type: 'text' }, className: 'swish-input' }),
button({ attributes: { type: 'submit' }, className: 'bright-blue-hover btn-white', id: 'try-it-out' }, 'Start chat')
])
])
])
}
data.group_items.forEach((hint) => {
var ele = div('.instruction'+ hint.orientation, [
p(hint.text),
hint.img ? img('.photo', {
props: {
src: hint.img,
}
}) : null,
])
return hints.push(ele)
})
return world$.map(world =>
div('.labeled-slider', [
p('.label', `${world.label}: ${world.value}${world.unit}`),
input('.slider', {
attrs: {
type: 'range',
min: world.min,
max: world.max,
value: world.value
}
})
])
var vtree$ = state$.map(horse => {
var label = p(CLASS_NAME + '-label', horse.label);
var translate = ['translate(',
(horse.position * POS_MULTIPLIER) , 'px, ',
(horse.number * NUM_MULTIPLIER), 'px',
')'].join('');
return div(CLASS_NAME, {
style: {'transform': translate}
}, [label]
);
});
export default function NotFound() {
let vdom$ = xs.of(
section([
h1('404 Not Found'),
p('Sorry!')
])
);
return {
DOM: vdom$
};
}
return function view (children) {
return div({style: style(color)}, [
p([
a({href: 'https://github.com/cyclejs/examples/tree/master/nested-folders',
style: {'font-size': '10px'}}, 'https://github.com/cyclejs/examples/tree/master/nested-folders')
]),
button('.add', ['Add Folder']),
removable ? button('.remove', ['Remove me']) : '',
children ? div({}, Array.from(children.values()).map(child =>
div({key: child.id}, [child.DOM])
)) : ''
])
}
const uservdom$ = user$.map(user =>
div('.users', [
p([
a({href: 'https://github.com/cyclejs/examples/tree/master/http-random-user',
style: {'font-size': '10px'}}, 'https://github.com/cyclejs/examples/tree/master/http-random-user')
]),
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', {href: user.website}, user.website)
])
])
function main () {
return footer(`.${styles.root}`, [
div(`.${styles.aPropos}`, [
h4('Qui sommes-nous ?'),
p([
i('.fa.fa-twitter'),
'Le projet principalement maintenu par ',
a(
{attrs: {href: 'http://twitter.com/pierremartin'}},
'Pierre Martin'
)
]),
p([
i('.fa.fa-github'),
'Le code source est disponible sur ',
a(
{attrs: {href: 'http://github.com/real34/ma-cave'}},
'Github'
)
])
])
])
}
const vtree$ = history.map(location => {
if (location && location.pathname && location.pathname !== '/') {
const hash = location.pathname.substr(1).trim();
if (hash) {
return Rx.Observable.of(
div([
p(`Hash: ${hash}`)
])
);
}
}
return button.DOM;
});
].concat(pusherMessages.map(({ text, username, time }) => {
return div({ className: 'message' }, [
div({ className: 'avatar' }, [
img({ attributes: { src: `https://twitter.com/${username}/profile_image?size=original` } })
]),
div({ className: 'text-display' }, [
div({ className: 'message-data' }, [
span({ className: 'author' }, username),
span({ className: 'timestamp' }, strftime('%H:%M:%S %P', new Date(time))),
span({ className: 'seen' }),
]),
p({ className: 'message-body' }, text)
])
])
}))),
return scrollState$.map(state => {
console.log("view: state is ... ", state);
//---> DIV has to match in selection with makeDOMDriver in the run Cycle
return div({
id: opt.el,
className: "hero-top"
}, [
div({id: "screen"}, [
div({id:"hero"},[
img({uri:""}),
div({id:"canvas"}),
p("scroll: " + state)
])
])
]);
});
const fnVtree = state => {
const rotatedBox = curry(box)(state.animation.rotate);
const svgBox = letter => rotatedBox(letter, index(state.letters));
const svgCircle = svg.circle(attrCircle);
const svgBoxes = letters => letters.map(svgBox);
const buttonRow = letters => div(cssButtons, letters.map(fnButton));
const svgCircleBoxes = letters => svg(attrSvg, [ svg.g(attrCircleBoxes(state.animation.rotate), [ svgCircle ].concat(svgBoxes(letters))) ] );
return div(cssDiv, [
svgCircleBoxes(state.letters),
p(),
buttonRow(state.letters),
spy(state)
]);
};
return history$.map(history => {
const {pathname} = history;
let page = h1('404 not found');
if (pathname === '/home') {
page = homePageView();
} else if (pathname === '/about') {
page = aboutPageView();
} else if (pathname === '/contacts') {
page = contactsPageView();
}
return div([
navigation(pathname),
page,
br(),
h3('History object'),
p(JSON.stringify(history))
]);
});
const vdom$ = xs.combine(recetas$, nombre$).map(([receta, nombre]) =>
div('.page .receta', [
receta === null ? null : div('.cuerpo-receta', [
h1('.nombre', receta.nombre),
hr(),
p('.italic', [span(`Del recetario de ${receta.fuente},`), span('.grey-medium', ` agregada el ${StringUtils.formatDate(receta.fecha)}`)]),
h2([span('Ingredientes'), span('.italic .large .grey-medium', ` (${receta.porciones} porciones)`)]),
ul('.ingredientes', receta.ingredientes.map(ingrediente =>
li('.ingrediente', ingrediente)
)),
h2('Pasos'),
ol('.pasos', receta.pasos.map(paso =>
li('.paso', paso)
))
]),
div('.seleccionar', [
h3('Buscar otra receta:'),
input('.nombre-receta', {attrs: {type: 'text', value: nombre}})
]),
])
taskspending$.map((n) =>
h('main', [
p(`You have clicked the button ${n} times`),
button('Click Me!')
])
messages.map(msg => p('['+ msg.time.toLocaleTimeString() + '] ' + msg.sender + ': ' + msg.message)),
.map(toggled =>
div([
input({type: 'checkbox'}), 'Toggle me',
p(toggled ? 'ON' : 'off')
])