@fc3/mmcadi 0.1.0

package/src/server/result-serializer/block/multi-column.ts

@@ -0,0 +1,97 @@
+import BlockResultSerializer from 'server/result-serializer/block';
+import MultiColumnBlock from 'type/block/multi-column';
+import ActionType from 'enum/action-type';
+import BlockResultSerializerFactory from 'server/factory/block-result-serializer';
+import parseIndexPath from 'server/utility/parse-index-path';
+import createIndexPath from 'server/utility/create-index-path';
+import Block from 'type/block';
+
+class MultiColumnResultSerializer extends BlockResultSerializer<MultiColumnBlock> {
+	public serializeContent(): string {
+		const block = this.getResult();
+		const metadata = this.getMetadata();
+		const {editing, page_path} = metadata;
+		const {max_columns} = block;
+
+		const children = block.children.slice(0) as (Block | string)[];
+
+		if (editing) {
+			const parent_index_path = metadata.index_path;
+			const parts = parseIndexPath(parent_index_path);
+
+			parts.push(children.length);
+
+			const child_index_path = createIndexPath(parts);
+
+			children.push(`
+				<a class="biglink grey" href="/actions?path=${page_path}&editing=true&action_type=${ActionType.ADD_BLOCK}&index_path=${child_index_path}">+</a>
+			`);
+		}
+
+		const groups: (Block | string)[][] = [];
+
+		let current_group: (Block | string)[] = [];
+
+		children.forEach((child) => {
+			if (current_group.length === max_columns) {
+				groups.push(current_group);
+				current_group = [];
+			}
+
+			current_group.push(child);
+		});
+
+		if (current_group.length) {
+			groups.push(current_group);
+		}
+
+		const session = this.getSession();
+
+		let child_counter = 0;
+
+		const serialized_groups = groups.map((group, group_index) => {
+			const serialized_children = group.map((child) => {
+				if (typeof child === 'string') {
+					return `<td>${child}</td>`;
+				}
+
+				const parent_path = metadata.index_path;
+				const parts = parseIndexPath(parent_path);
+				const child_index = child_counter++;
+
+				parts.push(child_index);
+
+				const index_path = createIndexPath(parts);
+
+				const child_metadata = {
+					...metadata,
+					index_path
+				};
+
+				const factory = new BlockResultSerializerFactory(child, child_metadata, session);
+				const serializer = factory.create();
+				const serialized_child = serializer.serializeContent();
+
+				return `
+					<td>${serialized_child}</td>
+				`;
+			});
+
+			return `
+				<tr>
+					${serialized_children.join('\n')}
+				</tr>
+			`;
+		});
+
+		return this.wrapSection(`
+			<table class="fixed multi-column">
+				<tbody>
+					${serialized_groups.join('\n')}
+				</tbody>
+			</table>
+		`);
+	}
+}
+
+export default MultiColumnResultSerializer;

package/src/server/result-serializer/block/note.ts

@@ -0,0 +1,44 @@
+import Marked from 'marked';
+
+import BlockResultSerializer from 'server/result-serializer/block';
+import NoteBlock from 'type/block/note';
+import getElementIdForBlock from 'server/utility/get-element-id-for-block';
+
+class NoteBlockResultSerializer extends BlockResultSerializer<NoteBlock> {
+	public serializeContent(): string {
+		if (!this.canRead()) {
+			return this.serializePermissionDenied();
+		}
+
+		const block = this.getResult();
+		const metadata = this.getMetadata();
+		const {text} = block;
+
+		if (typeof text !== 'string') {
+			return this.printWarning(`
+				Got invalid config for text block (no text content):
+				${JSON.stringify(block)}
+			`);
+		}
+
+		const block_id = getElementIdForBlock(block, metadata);
+
+		if (text === '') {
+			return this.wrapSection(`
+				<span id="${block_id}-update-target">
+					<em>no text supplied</em>
+				</span>
+			`);
+		}
+
+		const markdown = Marked.parse(text);
+
+		return this.wrapSection(`
+			<span class="markdown-wrapper" id="${block_id}-update-target">
+				${markdown}
+			</span>
+		`);
+	}
+}
+
+export default NoteBlockResultSerializer;

package/src/server/result-serializer/block/todo.ts

@@ -0,0 +1,78 @@
+import BlockResultSerializer from 'server/result-serializer/block';
+import TodoBlock from 'type/block/todo';
+import ActionType from 'enum/action-type';
+import Emoji from 'enum/emoji';
+import getElementIdForBlock from 'server/utility/get-element-id-for-block';
+
+class TodoBlockResultSerializer extends BlockResultSerializer<TodoBlock> {
+	public serializeContent(): string {
+		if (!this.canRead()) {
+			return this.serializePermissionDenied();
+		}
+
+		const block = this.getResult();
+		const metadata = this.getMetadata();
+		const {title, completed_at, block_type} = block;
+		const {editing, page_path, index_path} = metadata;
+
+		if (typeof title !== 'string') {
+			return this.printWarning(`
+				Got invalid config for todo block (no title content):
+				<pre>${JSON.stringify(block, null, 2)}</pre>
+			`);
+		}
+
+		const block_id = getElementIdForBlock(block, metadata);
+		const complete = completed_at !== null;
+		const style_class = complete ? 'strikethrough' : '';
+		const emoji = complete ? Emoji.COMPLETED_CHECKMARK : Emoji.WHITE_SQUARE;
+		const content = title || '<em>no title supplied</em>';
+		const logged_in = this.isLoggedIn();
+
+		if (!logged_in) {
+			return this.wrapSection(`
+				<table>
+					<tbody>
+						<tr>
+							<td class="align-left" style="width:15%">
+								${emoji}
+							</td>
+							<td class="align-left">
+								${content}
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			`);
+		}
+
+		return this.wrapSection(`
+			<form method="POST" action="/actions?path=${page_path}&editing=${editing}&action_type=${ActionType.COMPLETE_BLOCK}&index_path=${index_path}">
+				<input type="hidden" name="path" value="${page_path}" />
+				<input type="hidden" name="action_type" value="${ActionType.COMPLETE_BLOCK}" />
+				<input type="hidden" name="index_path" value="${index_path}" />
+				<input type="hidden" name="block_type" value="${block_type}" />
+				<input type="hidden" name="title" value="${title}" />
+
+				<table>
+					<tbody>
+						<tr>
+							<td class="align-left" style="width:15%">
+								<button type="submit">
+									${emoji}
+								</button>
+							</td>
+							<td class="align-left">
+								<span class="${style_class}" id="${block_id}-update-target">
+									${content}
+								</span>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</form>
+		`);
+	}
+}
+
+export default TodoBlockResultSerializer;

package/src/server/result-serializer/block/whitespace.ts

@@ -0,0 +1,15 @@
+import BlockResultSerializer from 'server/result-serializer/block';
+import WhitespaceBlock from 'type/block/whitespace';
+
+class WhitespaceBlockResultSerializer extends BlockResultSerializer<WhitespaceBlock> {
+	public serializeContent(): string {
+		const {line_count} = this.getResult();
+		const lines = Array(line_count).fill('<br />');
+
+		return this.wrapSection(`
+			${lines.join('\n')}
+		`);
+	}
+}
+
+export default WhitespaceBlockResultSerializer;

package/src/server/result-serializer/block.ts

@@ -0,0 +1,248 @@
+import {HtmlResultSerializer} from 'lib/server';
+import {InvariantViolation} from 'lib/errors';
+import {Session} from 'lib/execution-context';
+
+import Block from 'type/block';
+import BlockMetadata from 'type/block-metadata';
+import Color from 'enum/color';
+import BlockType from 'enum/block-type';
+import PermissionType from 'enum/permission-type';
+import DefaultRole from 'enum/default-role';
+import getHexForColor from 'server/utility/get-hex-for-color';
+import ActionType from 'enum/action-type';
+import Emoji from 'enum/emoji';
+import getBlockPermissions from 'server/utility/get-block-permissions';
+import pathIsDate from 'server/utility/path-is-date';
+import getShortLabelForDate from 'server/utility/get-short-label-for-date';
+import getElementIdForBlock from 'server/utility/get-element-id-for-block';
+import pathToDate from 'server/utility/path-to-date';
+import createDate from 'server/utility/create-date';
+import datesAreOnTheSameDay from 'server/utility/dates-are-on-the-same-day';
+
+abstract class BlockResultSerializer<T extends Block> extends HtmlResultSerializer<T> {
+	private metadata: BlockMetadata;
+	private session: Session;
+
+	public constructor(result: T, metadata: BlockMetadata, session: Session) {
+		super(result);
+
+		this.metadata = metadata;
+		this.session = session;
+	}
+
+	protected getTitle(): string {
+		throw new InvariantViolation(`
+			Tried to call getTitle() on BlockResultSerializer,
+			but rendering page-level blocks is not supported
+		`);
+	}
+
+	protected printWarning(message: string): string {
+		return `
+			<section class="warning">
+				<h2 class="text-yellow">WARNING</h2>
+				${message}
+			</section>
+		`;
+	}
+
+	protected serializePermissionDenied(): string {
+		const message = this.getPermissionDeniedMessage();
+
+		return this.wrapSection(`
+			<span class="text-smaller three-quarter-opacity">
+				${Emoji.LOCKED}
+				${message}
+			</span>
+		`);
+	}
+
+	protected getPermissionDeniedMessage(): string {
+		const required_role = this.getRequiredReadRole();
+		const {creator_username} = this.getMetadata();
+		const {block_type} = this.getResult();
+
+		if (required_role === DefaultRole.CREATOR) {
+			return `[${creator_username}] has marked this ${block_type} as private`;
+		} else {
+			return `to view this ${block_type}, you must be at least: [${required_role}]`;
+		}
+	}
+
+	protected isLoggedIn(): boolean {
+		const {account_id} = this.getSession();
+
+		return account_id !== null;
+	}
+
+	protected getSession(): Session {
+		return this.session;
+	}
+
+	protected canRead(): boolean {
+		const role = this.getAccountRole();
+		const {roles} = this.getMetadata();
+		const required_role = this.getRequiredReadRole();
+		const required_index = roles.indexOf(required_role);
+		const actual_index = roles.indexOf(role);
+
+		return actual_index >= required_index;
+	}
+
+	protected getRequiredReadRole(): string {
+		const block = this.getResult();
+		const permissions = getBlockPermissions(block);
+
+		return permissions[PermissionType.READ];
+	}
+
+	protected wrapSection(section_contents: string): string {
+		const page_path = this.getPagePath();
+		const block = this.getResult();
+		const {created_at, block_type} = block;
+		const border_color = block.color || Color.GREY;
+		const created_date = createDate(created_at);
+		const hours = created_date.getHours();
+		const minutes = created_date.getMinutes();
+		const suffix = hours >= 12 ? 'pm' : 'am';
+		const truncated_hours = hours % 12 || 12;
+		const padded_minutes = minutes.toString().padStart(2, '0');
+		const time_string = `${truncated_hours}:${padded_minutes} ${suffix}`;
+		const datetime_attribute = created_date.toString();
+
+		let date_prefix = getShortLabelForDate(created_date);
+
+		if (pathIsDate(page_path)) {
+			const page_date = pathToDate(page_path);
+
+			if (datesAreOnTheSameDay(page_date, created_date)) {
+				date_prefix = '';
+			}
+		}
+
+		const today = createDate();
+
+		if (datesAreOnTheSameDay(created_date, today)) {
+			date_prefix = '';
+		}
+
+		const is_folder = block_type === BlockType.FOLDER;
+		const border_hex = getHexForColor(border_color);
+
+		const style_attribute = is_folder ? '' : `border-color:${border_hex}`;
+
+		const serialized_time = `
+			<time style="${style_attribute}" datetime="${datetime_attribute}">
+				${date_prefix}${time_string}
+			</time>
+		`;
+
+		const time_class = this.shouldHideTime() ? '' : 'with-time';
+		const editing = this.isEditing();
+		const reticule = '<div class="focus-reticule flashing"></div>';
+		const cursor = `<div class="focus-cursor">${Emoji.RIGHT_ARROW_UNICODE}</div>`;
+		const metadata = this.getMetadata();
+		const section_id = getElementIdForBlock(block, metadata);
+		const condensed_class = this.isCondensed() ? 'condensed' : '';
+		const selected_class = this.isFocusedBlock() ? 'selected' : '';
+		const editing_class = editing ? 'editing' : '';
+		const {index_path} = metadata;
+
+		return `
+			<section id="${section_id}" class="block ${block_type} ${selected_class} ${editing_class} ${time_class} ${condensed_class} focus-reticule-container" style="${style_attribute}" data-index-path="${index_path}" data-block-type="${block_type}">
+				${reticule}
+				${serialized_time}
+				${cursor}
+				${section_contents}
+
+				<nav class="left">
+					<form id="${section_id}-promote" method="post" action="/actions?editing=${editing}">
+						<input type="hidden" name="path" value="${page_path}" />
+						<input type="hidden" name="action_type" value="${ActionType.PROMOTE_BLOCK}" />
+						<input type="hidden" name="index_path" value="${index_path}" />
+
+						<button class="biglink" type="submit">⬆️</button>
+					</form>
+
+					<form id="${section_id}-demote" method="post" action="/actions?editing=${editing}">
+						<input type="hidden" name="path" value="${page_path}" />
+						<input type="hidden" name="action_type" value="${ActionType.DEMOTE_BLOCK}" />
+						<input type="hidden" name="index_path" value="${index_path}" />
+
+						<button class="biglink" type="submit">⬇️</button>
+					</form>
+				</nav>
+
+				<nav class="right">
+					<a id="${section_id}-delete" class="biglink" href="/actions?editing=${editing}&path=${page_path}&action_type=${ActionType.DELETE_BLOCK}&index_path=${index_path}">❌</a>
+					<a id="${section_id}-edit" class="biglink" href="/actions?editing=${editing}&path=${page_path}&action_type=${ActionType.EDIT_BLOCK}&index_path=${index_path}">⚙️</a>
+				</nav>
+			</section>
+		`;
+	}
+
+	private isEditing(): boolean {
+		const {editing} = this.getMetadata();
+
+		return editing;
+	}
+
+	private shouldHideTime(): boolean {
+		const {show_time} = this.getResult();
+
+		if (show_time !== undefined) {
+			return show_time === false;
+		}
+
+		const {block_type} = this.getResult();
+
+		switch (block_type) {
+			case BlockType.IMAGE:
+			case BlockType.AUDIO:
+			case BlockType.NOTE:
+				return false;
+			default:
+				return true;
+		}
+	}
+
+	protected getPagePath(): string {
+		const {page_path} = this.getMetadata();
+
+		return page_path;
+	}
+
+	protected isFocusedBlock(): boolean {
+		const {target_index_path, index_path} = this.getMetadata();
+
+		return target_index_path === index_path;
+	}
+
+	protected getMetadata(): BlockMetadata {
+		return this.metadata;
+	}
+
+	private isCondensed(): boolean {
+		const {block_type} = this.getResult();
+
+		switch (block_type) {
+			case BlockType.LINK:
+			case BlockType.MULTI_COLUMN:
+				return true;
+			default:
+				return false;
+		}
+	}
+
+	private getAccountRole(): string {
+		const {account} = this.getMetadata();
+
+		if (account === null) {
+			return DefaultRole.PUBLIC;
+		}
+
+		return account.role;
+	}
+}
+
+export default BlockResultSerializer;

package/src/server/result-serializer/common/time-place-options.ts

@@ -0,0 +1,33 @@
+import TimePlaceVisibility from 'enum/time-place-visibility';
+import getLabelForTimePlaceVisibility from 'server/utility/get-label-for-time-place-visibility';
+
+function serializeTimePlaceOptions(current_visibility: TimePlaceVisibility): string {
+	const visibilities = Object.values(TimePlaceVisibility);
+
+	const serialized_options = visibilities.map((visibility) => {
+		const label = getLabelForTimePlaceVisibility(visibility);
+		const checked = visibility === current_visibility ? 'checked="checked"' : '';
+
+		return `
+			<td>
+				<input type="radio" id="time-place-${visibility}" name="time_place_visibility" value="${visibility}" ${checked} />
+
+				<label for="time-place-${visibility}" class="biglink yellow">
+					${label}
+				</label>
+			</td>
+		`;
+	});
+
+	return `
+		<table class="button-row fixed mt-32">
+			<tbody>
+				<tr>
+					${serialized_options.join('\n')}
+				</tr>
+			</tbody>
+		</table>
+	`;
+}
+
+export default serializeTimePlaceOptions;

package/src/server/result-serializer/login.ts

@@ -0,0 +1,58 @@
+import Emoji from 'enum/emoji';
+import PageType from 'client/enum/page-type';
+import BaseResultSerializer from 'server/result-serializer/base';
+
+interface LoginData {
+	readonly source_path: string;
+}
+
+class LoginResultSerializer extends BaseResultSerializer<LoginData> {
+	protected getTitle(): string {
+		return 'log in';
+	}
+
+	protected serializeFooter(): string {
+		return `
+			<footer>
+				<div class="section-wrapper">
+					<section class="transparent">
+						<a class="float-right" href="#">forgot your password?</a>
+						<a href="/">${Emoji.LEFT_ARROW_UNICODE} home</a>
+					</section>
+				</div>
+			</footer>
+		`;
+	}
+
+	protected serializeSections(): string {
+		const {source_path} = this.getResult();
+
+		return `
+			<section class="grey">
+				<form action="/session" method="POST">
+					<input type="hidden" name="source" value="${source_path}" />
+
+					<fieldset>
+						<legend>username:</legend>
+						<input type="text" name="username" placeholder="username" autofocus />
+					</fieldset>
+
+					<fieldset>
+						<legend>password:</legend>
+						<input type="password" name="password" placeholder="password" />
+					</fieldset>
+
+					<button class="mt-32 biglink blue" type="submit">
+						log in ${Emoji.RIGHT_ARROW_UNICODE}
+					</button>
+				</form>
+			</section>
+		`;
+	}
+
+	protected getPageType(): PageType {
+		return PageType.LOGIN;
+	}
+}
+
+export default LoginResultSerializer;