h('.blocks', model.blocks.map(block => (
h('.block', [
block.title ? h('h5.block-title.small-island', block.title) : null as any,
h('.element-groups', (
// TODO: Use discriminated union instead, remove any
block.elementGroups.map((elementGroup): any => {
if (elementGroup instanceof ImageSquarePairGroup) {
return h('.element-group', { className: 'image' },
elementGroup.elements
.map(renderImage)
);
} else if (elementGroup instanceof ImageGroup) {
return h('.element-group', { className: 'image' },
[elementGroup.element]
.map(renderImage)
);
} else if (elementGroup instanceof TextGroup) {
return h('.element-group', { className: 'text' }, [
h('.text-element.spaced-items', { innerHTML: elementGroup.element.body }, [])
]);
}
})
))
])
)))
private static renderForm(defaultText: string): VNode {
return h("div", { className: "js-post-form" }, [
h(
"form",
{
className: "form",
dataset: {
topicInlineReply: true,
},
},
[
h("div", { className: "container" }, [
h("div", { className: "form-item" }, [
PostForm.renderBodyFormItemLabel(),
PostForm.renderBodyFormItemInput(defaultText),
]),
h("div", { className: "form-item" }, [
PostForm.renderPostFormItemButton(),
" ",
PostForm.renderPostFormItemBump(),
]),
]),
],
),
]);
}
public render(
node: Node,
configuration: ISequenceConfiguration,
containerWidth: number,
component: SequenceComponent,
interaction: SequenceDOMInteraction,
navigator: Navigator): vd.VNode {
if (configuration.visible === false) {
return vd.h("div.SequenceContainer", {}, []);
}
let nextKey: string = null;
let prevKey: string = null;
for (let edge of node.edges) {
if (edge.data.direction === EdgeDirection.Next) {
nextKey = edge.to;
}
if (edge.data.direction === EdgeDirection.Prev) {
prevKey = edge.to;
}
}
let playingButton: vd.VNode = this._createPlayingButton(nextKey, prevKey, configuration, component);
let arrows: vd.VNode[] = this._createSequenceArrows(nextKey, prevKey, node, configuration, interaction, navigator);
let containerProperties: vd.createProperties = {
style: { height: (0.27 * containerWidth) + "px", width: containerWidth + "px" },
};
return vd.h("div.SequenceContainer", containerProperties, arrows.concat([playingButton]));
}
private _createPlayingButton(
nextKey: string,
prevKey: string,
configuration: ISequenceConfiguration,
component: SequenceComponent): vd.VNode {
let canPlay: boolean = configuration.direction === EdgeDirection.Next && nextKey != null ||
configuration.direction === EdgeDirection.Prev && prevKey != null;
let onclick: (e: Event) => void = configuration.playing ?
(e: Event): void => { component.stop(); } :
canPlay ? (e: Event): void => { component.play(); } : null;
let buttonProperties: vd.createProperties = {
onclick: onclick,
style: {
},
};
let iconClass: string = configuration.playing ?
"Stop" :
canPlay ? "Play" : "PlayDisabled";
let icon: vd.VNode = vd.h("div.SequenceComponentIcon", { className: iconClass }, []);
let buttonClass: string = canPlay ? "SequencePlay" : "SequencePlayDisabled";
return vd.h("div." + buttonClass, buttonProperties, [icon]);
}
const renderGroupDeployNodes = (groupDeploys: List<DeployRecord>, deployGroup: DeployGroupRecord) => {
const shouldShowProjectNames = !groupDeploys.equals(currentDeploys);
return h(
'li',
{ className: `deploy deploy--${deployGroup.status.split(' ').join('-').toLowerCase()}` },
[
h('h2', [
h('a', { href: createBuildLink(deployGroup.build) }, `${deployGroup.build}`)
]),
// Only show project names if we have multiple deployed groups
exp(shouldShowProjectNames) && ih('ul', {}, groupDeploys
.sortBy(build => build.projectName)
.map(deploy => {
const previousBuild = previousDeploysMap.get(deploy);
return h('li', [
h('a', {
href: createRiffRaffDeployLink(deploy.uuid),
title: previousBuild ? `Previous build: ${previousBuild.build}` : ''
}, deploy.projectName)
]);
})
.toList()
)
]
);
};
private static renderDate(topic: Topic): VNode {
let postedAt = new Date(topic.postedAt);
let formatter = formatDate(postedAt);
return h("p", { className: "topic-header-item" }, [
"Last posted ",
h("strong", {}, [formatter]),
]);
}
posts.map((post: Post): VNode => {
return h("div", { className: "post" }, [
h("div", { className: "container" }, [
PostCollectionView.renderHeader(post),
PostCollectionView.renderBody(post),
]),
]);
}),
.map(deploy => {
const previousBuild = previousDeploysMap.get(deploy);
return h('li', [
h('a', {
href: createRiffRaffDeployLink(deploy.uuid),
title: previousBuild ? `Previous build: ${previousBuild.build}` : ''
}, deploy.projectName)
]);
})
private static renderBoard(board: Board): VNode {
return h("div", { className: "js-board" }, [
h("div", { className: "cascade" }, [
h("div", { className: "container" }, [
BoardView.renderTitle(board),
BoardView.renderDescription(board),
]),
]),
]);
}
let myForm = (store: Store<MyFormState, MyFormAction>) => {
return h("div#myform", [
h("input", {
onkeyup: (event) => {
store.dispatch(event.target.value || "")
}
}, store.state),
h("span", store.state)
]);
}
