skylernorgaard_obsidian-bible-journal-plugin/newNoteModal.ts

import { App, Modal, Notice, TFile } from 'obsidian';
import type StudyBiblePlugin from './main';
import { createStudyNote } from './createStudyNote';
import * as Utils from './utils';

export class NewNoteModal extends Modal {
	private plugin: StudyBiblePlugin;
	private chapterFile: TFile;
	private verseRef: string | null;
	private onCreated?: (file: TFile) => void;
	private refInput!: HTMLInputElement;
	private titleInput!: HTMLInputElement;

	constructor(
		app: App,
		plugin: StudyBiblePlugin,
		chapterFile: TFile,
		verseRef: string | null,
		onCreated?: (file: TFile) => void
	) {
		super(app);
		this.plugin = plugin;
		this.chapterFile = chapterFile;
		this.verseRef = verseRef;
		this.onCreated = onCreated;
	}

	onOpen(): void {
		this.modalEl.addClass('study-bible-new-note-modal-shell');

		const { contentEl } = this;
		contentEl.empty();
		contentEl.addClass('study-bible-modal', 'study-bible-new-note-modal');

		const parsed = Utils.parseBookChapter(this.chapterFile.basename);
		const refLabel = Utils.formatStudyNoteReference(parsed.book, parsed.chapter, this.verseRef);

		contentEl.createEl('h2', { text: 'New study note' });

		this.refInput = contentEl.createEl('input', {
			cls: 'study-bible-search-input study-bible-new-note-ref',
			attr: {
				type: 'text',
				value: refLabel,
				'aria-label': 'Verse reference',
			},
		});

		this.titleInput = contentEl.createEl('input', {
			cls: 'study-bible-search-input study-bible-new-note-title',
			attr: {
				type: 'text',
				placeholder: 'Note title',
				'aria-label': 'Note title',
			},
		});

		const actions = contentEl.createDiv({ cls: 'study-bible-modal-actions' });
		const cancelBtn = actions.createEl('button', { text: 'Cancel' });
		const createBtn = actions.createEl('button', { cls: 'mod-cta', text: 'Create' });

		cancelBtn.addEventListener('click', () => this.close());
		createBtn.addEventListener('click', () => void this.submit());

		this.titleInput.addEventListener('keydown', (event) => {
			if (event.key === 'Enter') {
				event.preventDefault();
				void this.submit();
			}
		});

		window.setTimeout(() => this.titleInput.focus(), 0);
	}

	private async submit(): Promise<void> {
		const referenceInput = this.refInput.value.trim();
		const title = this.titleInput.value.trim();

		if (!referenceInput) {
			new Notice('Enter a verse reference');
			this.refInput.focus();
			return;
		}

		if (!Utils.parseStudyNoteReferenceInput(referenceInput)) {
			new Notice('Could not read verse reference (e.g. Galatians 5.1)');
			this.refInput.focus();
			return;
		}

		if (!title) {
			new Notice('Enter a note title');
			this.titleInput.focus();
			return;
		}

		this.close();
		await createStudyNote(
			this.app,
			this.plugin,
			this.chapterFile,
			this.verseRef,
			this.onCreated,
			title,
			referenceInput
		);
	}

	onClose(): void {
		this.contentEl.empty();
	}
}

export function openNewNoteModal(
	app: App,
	plugin: StudyBiblePlugin,
	chapterFile: TFile,
	verseRef: string | null,
	onCreated?: (file: TFile) => void
): void {
	new NewNoteModal(app, plugin, chapterFile, verseRef, onCreated).open();
}