@fc3/mmcadi 0.1.0

package/src/client/page/view-custom.ts

@@ -0,0 +1,665 @@
+import {InvariantViolation} from 'lib/errors';
+import {getFirstValue, getLastValue} from 'lib/array';
+import {TimeInterval} from 'lib/time';
+
+import Page from 'client/page';
+import BlockType from 'enum/block-type';
+import KeyCode from 'client/enum/key-code';
+import getMetaValue from 'client/utility/get-meta-value';
+import getParentPath from 'common/utility/get-parent-path';
+
+
+function getAttributeForElement(element: Element, attribute: string): string {
+	const value = element.getAttribute(attribute);
+
+	if (value === null) {
+		throw new InvariantViolation(`
+			Tried to read ${attribute} for element, but it was not set
+		`);
+	}
+
+	return value;
+}
+
+function getBlockActivationHref(block_element: Element): string {
+	const link_nodes = block_element.getElementsByTagName('a');
+	const links = Array.from(link_nodes);
+	const matching_link = links.find((link) => {
+		const role = link.getAttribute('data-role');
+
+		return role === 'block_activation';
+	});
+
+	if (matching_link === undefined) {
+		throw new InvariantViolation(`
+			Tried to activate link for folder block, but it was not set
+		`);
+	}
+
+	const href = matching_link.getAttribute('href');
+
+	if (href === null) {
+		throw new InvariantViolation(`
+			Tried to activate link for folder block, but its href was not set
+		`);
+	}
+
+	return href;
+}
+
+function getIndexPathForElement(element: Element): string {
+	return getAttributeForElement(element, 'data-index-path');
+}
+
+function getBlockTypeForElement(element: Element): string {
+	return getAttributeForElement(element, 'data-block-type');
+}
+
+class ViewCustomPage extends Page {
+	private logged_in = false;
+	private scroll_focusing_timer: NodeJS.Timeout | undefined;
+	private scroll_focusing_enabled = true;
+	private has_touch_event = false;
+
+	protected initEvents(): void {
+		super.initEvents();
+
+		window.addEventListener('touchstart', () => {
+			this.has_touch_event = true;
+		});
+
+		window.addEventListener('wheel', () => {
+			this.handleWheel();
+		});
+
+		window.addEventListener('scroll', () => {
+			this.handleScroll();
+		});
+	}
+
+	private handleWheel(): void {
+		this.enableScrollFocusing();
+		this.queueDisableScrollFocusing();
+	}
+
+	private handleScroll(): void {
+		if (!this.scrollFocusingEnabled()) {
+			return;
+		}
+
+		if (this.hasTouchEvent()) {
+			return;
+		}
+
+		const scroll_element = this.getBlockElementFromScrollPosition();
+
+		if (scroll_element === null) {
+			return;
+		}
+
+		const index_path = getIndexPathForElement(scroll_element);
+
+		this.navigateToIndex(index_path);
+	}
+
+	protected initView(): void {
+		this.focusCurrentBlockElement();
+
+		const meta_value = getMetaValue('logged_in');
+
+		this.logged_in = meta_value === 'true';
+	}
+
+	private getBlockElementFromScrollPosition(): Element | null {
+		const block_elements = this.getBlockElements();
+		const scroll_y = window.scrollY;
+		const view_height = window.innerHeight;
+		const page_height = document.documentElement.scrollHeight;
+		const total_scrollable_height = page_height - view_height;
+		const scroll_ratio = scroll_y / total_scrollable_height;
+
+		let total_area = 0;
+
+		block_elements.forEach((block_element) => {
+			const block_type = getBlockTypeForElement(block_element);
+
+			if (block_type === BlockType.MULTI_COLUMN) {
+				return;
+			}
+
+			const rect = block_element.getBoundingClientRect();
+			const block_area = rect.width * rect.height;
+
+			total_area += block_area;
+		});
+
+		let index = 0;
+		let cumulative_area = 0;
+
+		while (index < block_elements.length) {
+			const block_element = block_elements[index++];
+			const block_type = getBlockTypeForElement(block_element);
+
+			if (block_type === BlockType.MULTI_COLUMN) {
+				continue;
+			}
+
+			const rect = block_element.getBoundingClientRect();
+			const area = rect.width * rect.height;
+
+			cumulative_area += area;
+
+			const cumulative_ratio = cumulative_area / total_area;
+
+			if (cumulative_ratio >= scroll_ratio) {
+				return block_element;
+			}
+		}
+
+		return null;
+	}
+
+	private focusCurrentBlockElement(): void {
+		const element = this.getCurrentBlockElement();
+
+		if (element === null) {
+			return;
+		}
+
+		this.focusElement(element);
+	}
+
+	private enableScrollFocusing(): void {
+		if (this.scroll_focusing_timer !== undefined) {
+			clearTimeout(this.scroll_focusing_timer);
+		}
+
+		this.scroll_focusing_enabled = true;
+	}
+
+	private queueDisableScrollFocusing(): void {
+		if (this.scroll_focusing_timer !== undefined) {
+			clearTimeout(this.scroll_focusing_timer);
+		}
+
+		const delay = TimeInterval.ONE_SECOND / 2;
+
+		this.scroll_focusing_timer = setTimeout(() => {
+			this.disableScrollFocusing();
+		}, delay);
+	}
+
+	private disableScrollFocusing(): void {
+		if (this.scroll_focusing_timer !== undefined) {
+			clearTimeout(this.scroll_focusing_timer);
+		}
+
+		this.scroll_focusing_enabled = false;
+	}
+
+	protected handleKey(key_code: KeyCode): void {
+		switch (key_code) {
+			case KeyCode.ENTER:
+			case KeyCode.O:
+				return this.activateBlock();
+
+			case KeyCode.L:
+				return this.toggleEditMode();
+
+			case KeyCode.G:
+				return this.performPageJump();
+
+			case KeyCode.M:
+				return this.showModificationMenu();
+
+			case KeyCode.J:
+				return this.selectNextBlock();
+
+			case KeyCode.K:
+				return this.selectPreviousBlock();
+
+			case KeyCode.U:
+				return this.navigateToParentPage();
+
+			case KeyCode.D:
+				return this.deleteCurrentBlock();
+
+			case KeyCode.A:
+				return this.addBlock();
+
+			case KeyCode.E:
+				return this.beginEditingBlock();
+
+			default:
+				return super.handleKey(key_code);
+		}
+	}
+
+	private beginEditingBlock(): void {
+		if (!this.isLoggedIn()) {
+			return;
+		}
+
+		const block_element = this.getCurrentBlockElement();
+
+		if (block_element === null) {
+			return;
+		}
+
+		const block_id = block_element.id;
+		const link_id = `${block_id}-edit`;
+		const link_element = document.getElementById(link_id) as HTMLFormElement;
+
+		if (link_element === null) {
+			throw new InvariantViolation(`
+				Unable to find edit link element for block: ${block_id}
+			`);
+		}
+
+		const href = link_element.getAttribute('href');
+
+		if (href === null) {
+			throw new InvariantViolation(`
+				Unable to find edit link href for block: ${block_id}
+			`);
+		}
+
+		window.location.href = href;
+	}
+
+	private addBlock(): void {
+		if (!this.isLoggedIn()) {
+			return;
+		}
+
+		const current_path = this.getCurrentBlockIndex();
+		const top_level_index = parseInt(current_path, 10);
+
+		if (isNaN(top_level_index)) {
+			throw new InvariantViolation(`Invalid index path: ${current_path}`);
+		}
+
+		const add_block_links = document.querySelectorAll('[data-role="add_block_link"]');
+
+		const link_index = (() => {
+			if (this.shiftIsPressed()) {
+				return top_level_index;
+			} else {
+				return top_level_index + 1;
+			}
+		})();
+
+		const link = add_block_links[link_index];
+
+		if (link === undefined) {
+			throw new InvariantViolation(`
+				Tried to read link at index ${link_index},
+				but it was not found
+			`);
+		}
+
+		const href = link.getAttribute('href');
+
+		if (href === null) {
+			throw new InvariantViolation(`
+				Tried to read href for link at index ${link_index},
+				but it was not set
+			`);
+		}
+
+		window.location.href = href;
+	}
+
+	private deleteCurrentBlock(): void {
+		if (!this.isLoggedIn()) {
+			return;
+		}
+
+		const block_element = this.getCurrentBlockElement();
+
+		if (block_element === null) {
+			return;
+		}
+
+		const block_id = block_element.id;
+		const link_id = `${block_id}-delete`;
+		const link_element = document.getElementById(link_id) as HTMLFormElement;
+
+		if (link_element === null) {
+			throw new InvariantViolation(`
+				Unable to find deletion link element for block: ${block_id}
+			`);
+		}
+
+		const href = link_element.getAttribute('href');
+
+		if (href === null) {
+			throw new InvariantViolation(`
+				Unable to find deletion link href for block: ${block_id}
+			`);
+		}
+
+		window.location.href = href;
+	}
+
+	private promoteCurrentBlock(): void {
+		if (!this.isLoggedIn()) {
+			return;
+		}
+
+		const block_element = this.getCurrentBlockElement();
+
+		if (block_element === null) {
+			return;
+		}
+
+		const block_id = block_element.id;
+		const form_id = `${block_id}-promote`;
+		const form_element = document.getElementById(form_id) as HTMLFormElement;
+
+		if (form_element === null) {
+			throw new InvariantViolation(`
+				Unable to find promotion form element for block: ${block_id}
+			`);
+		}
+
+		form_element.submit();
+	}
+
+	private demoteCurrentBlock(): void {
+		if (!this.isLoggedIn()) {
+			return;
+		}
+
+		const block_element = this.getCurrentBlockElement();
+
+		if (block_element === null) {
+			return;
+		}
+
+		const block_id = block_element.id;
+		const form_id = `${block_id}-demote`;
+		const form_element = document.getElementById(form_id) as HTMLFormElement;
+
+		if (form_element === null) {
+			throw new InvariantViolation(`
+				Unable to find demotion form element for block: ${block_id}
+			`);
+		}
+
+		form_element.submit();
+	}
+
+	private performPageJump(): void {
+		if (!this.shiftIsPressed()) {
+			return;
+		}
+
+		const previous_key_code = this.getPreviousKeyCode();
+
+		if (previous_key_code === KeyCode.ONE) {
+			this.jumpToPageTop();
+		} else {
+			this.jumpToPageBottom();
+		}
+	}
+
+	private jumpToPageTop(): void {
+		this.navigateToIndex(this.getFirstBlockIndex());
+		this.focusCurrentBlockElement();
+	}
+
+	private jumpToPageBottom(): void {
+		this.navigateToIndex(this.getLastBlockIndex());
+		this.focusCurrentBlockElement();
+	}
+
+	private navigateToParentPage(): void {
+		const parent_path = getParentPath(window.location.pathname);
+
+		window.location.href = parent_path;
+	}
+
+	private navigateToIndex(index_path: string | null): void {
+		this.disableScrollFocusing();
+
+		if (index_path === null) {
+			return;
+		}
+
+		const block_elements = this.getBlockElements();
+
+		let found = false;
+
+		block_elements.forEach((block_element) => {
+			const sibling_path = getIndexPathForElement(block_element);
+			const is_match = sibling_path === index_path;
+
+			block_element.classList.toggle('selected', is_match);
+
+			if (is_match) {
+				found = true;
+			}
+		});
+
+		if (!found) {
+			throw new InvariantViolation(`
+				Tried to navigate to element at index path ${index_path},
+				but matching element was not found
+			`);
+		}
+
+		const url = new URL(window.location.href);
+
+		url.searchParams.set('index_path', index_path);
+		window.history.replaceState({}, '', url);
+	}
+
+	protected selectPreviousBlock(): void {
+		if (this.shiftIsPressed()) {
+			this.promoteCurrentBlock();
+		} else {
+			this.navigateToIndex(this.getPreviousBlockIndex());
+			this.focusCurrentBlockElement();
+		}
+	}
+
+	protected selectNextBlock(): void {
+		if (this.shiftIsPressed()) {
+			this.demoteCurrentBlock();
+		} else {
+			this.navigateToIndex(this.getNextBlockIndex());
+			this.focusCurrentBlockElement();
+		}
+	}
+
+	protected toggleEditMode(): void {
+		const editing_flag = this.getQueryParameter('editing');
+		const editing = editing_flag === 'true';
+		const new_value = editing ? 'false' : 'true';
+
+		this.setQueryParameter('editing', new_value);
+	}
+
+	protected getCurrentBlockIndex(): string {
+		const element = this.getCurrentBlockElement();
+
+		if (element === null) {
+			return '0';
+		}
+
+		return getIndexPathForElement(element);
+	}
+
+	protected getCurrentBlockNumericIndex(): number {
+		const index = this.getCurrentBlockIndex();
+
+		return parseInt(index);
+	}
+
+	private getBlockElements(): Element[] {
+		const elements = document.getElementsByClassName('block');
+
+		return Array.from(elements);
+	}
+
+	protected getCurrentBlockElement(): Element | null {
+		const block_elements = this.getBlockElements();
+
+		const selected_element = block_elements.find((element) => {
+			return element.classList.contains('selected');
+		});
+
+		if (selected_element !== undefined) {
+			return selected_element;
+		}
+
+		const index_path = (() => {
+			const query_path = this.getQueryParameter('index_path');
+
+			if (query_path !== undefined) {
+				return query_path;
+			}
+
+			return this.getFirstBlockIndex();
+		})();
+
+		if (index_path === null) {
+			return null;
+		}
+
+		const element = block_elements.find((element) => {
+			const attribute = getIndexPathForElement(element);
+
+			return attribute === index_path;
+		});
+
+		return element || null;
+	}
+
+	protected getFirstBlockIndex(): string | null {
+		const blocks = this.getBlockElements();
+		const first_block = getFirstValue(blocks);
+
+		if (first_block === undefined) {
+			return null;
+		}
+
+		return getIndexPathForElement(first_block);
+	}
+
+	protected getLastBlockIndex(): string | null {
+		const blocks = this.getBlockElements();
+		const last_block = getLastValue(blocks);
+
+		if (last_block === undefined) {
+			return null;
+		}
+
+		return getIndexPathForElement(last_block);
+	}
+
+	protected getNextBlockIndex(): string | null {
+		const current_block = this.getCurrentBlockElement();
+		const blocks = this.getBlockElements();
+		const current_index = current_block ? blocks.indexOf(current_block) : -1;
+		const next_block = blocks[current_index + 1];
+
+		if (next_block === undefined) {
+			return null;
+		}
+
+		return getIndexPathForElement(next_block);
+	}
+
+	protected getPreviousBlockIndex(): string | null {
+		const current_block = this.getCurrentBlockElement();
+		const blocks = this.getBlockElements();
+		const current_index = current_block ? blocks.indexOf(current_block) : -1;
+		const previous_block = blocks[current_index - 1];
+
+		if (previous_block === undefined) {
+			return null;
+		}
+
+		return previous_block.getAttribute('data-index-path');
+	}
+
+	private activateBlock(): void {
+		const block_element = this.getCurrentBlockElement();
+
+		if (block_element === null) {
+			return;
+		}
+
+		const attribute = block_element.getAttribute('data-block-type');
+
+		if (attribute === null) {
+			throw new InvariantViolation(`
+				Tried to activate current block, but it did not have a block type
+			`);
+		}
+
+		const block_type = attribute as BlockType;
+		const block_types = Object.values(BlockType);
+
+		if (!block_types.includes(block_type)) {
+			throw new InvariantViolation(`
+				Invalid block type: ${block_type}
+			`);
+		}
+
+		switch (block_type) {
+			case BlockType.FOLDER:
+				return this.activateFolderBlock(block_element);
+			case BlockType.TODO:
+				return this.activateTodoBlock(block_element);
+			case BlockType.IMAGE:
+				return this.activateImageBlock(block_element);
+			default:
+				return console.warn(`no-op activation for block of type ${block_type}`);
+		}
+	}
+
+	private activateTodoBlock(block_element: Element): void {
+		const forms = block_element.getElementsByTagName('form');
+		const form = forms[0];
+
+		if (form === undefined) {
+			throw new InvariantViolation(`
+				Tried to activate form for todo block, but it was not set
+			`);
+		}
+
+		form.submit();
+	}
+
+	private activateFolderBlock(block_element: Element): void {
+		const href = getBlockActivationHref(block_element);
+
+		window.location.href = href;
+	}
+
+	private activateImageBlock(block_element: Element): void {
+		const href = getBlockActivationHref(block_element);
+
+		window.location.href = href;
+	}
+
+	private showModificationMenu(): void {
+	}
+
+	private isLoggedIn(): boolean {
+		return this.logged_in;
+	}
+
+	private scrollFocusingEnabled(): boolean {
+		return this.scroll_focusing_enabled;
+	}
+
+	private hasTouchEvent(): boolean {
+		return this.has_touch_event;
+	}
+}
+
+export default ViewCustomPage;

package/src/client/page/week.ts

@@ -0,0 +1,8 @@
+import Page from 'client/page';
+
+class WeekPage extends Page {
+	protected initEvents(): void {
+	}
+}
+
+export default WeekPage;

package/src/client/page/year.ts

@@ -0,0 +1,8 @@
+import Page from 'client/page';
+
+class YearPage extends Page {
+	protected initEvents(): void {
+	}
+}
+
+export default YearPage;