Began adding editor shortcuts

Added more dialogs

src/common.ts

@@ -1,7 +1,8 @@
 import $ from 'jquery';
-import { update } from './explorer.js';
+import { update as updateExplorer } from './explorer.js';
 import { cd, cwd, resolve } from '@zenfs/core/emulation/path.js';
 import { fs } from '@zenfs/core';
+import * as editor from './editor.js';
 
 export function switchTab(name: string): void {
 	$('.tab').hide();
@@ -13,15 +14,15 @@ export function switchTab(name: string): void {
 	$(`#nav button[name=${name}]`).addClass('active');
 
 	if (name == 'explorer') {
-		update();
+		updateExplorer();
 	}
 }
 
 export function openPath(path: string, fromShell: boolean = false): void {
 	if (fs.statSync(path).isDirectory()) {
 		cd(path);
 		$('#location').val(cwd);
-		update();
+		updateExplorer();
 		return;
 	}
 
@@ -30,25 +31,44 @@ export function openPath(path: string, fromShell: boolean = false): void {
 	}
 
 	switchTab('editor');
-	$('#editor .content').text(fs.readFileSync(path, 'utf-8'));
-	update();
+	void editor.open(path);
 }
 
 export function confirm(text: string): Promise<boolean> {
 	const { promise, resolve } = Promise.withResolvers<boolean>();
 
-	const confirm = $<HTMLDialogElement>('#confirm');
-
-	confirm.find('.message').text(text);
-
-	confirm[0].showModal();
+	const dialog = $<HTMLDialogElement>('#confirm');
+	dialog.find('.message').text(text);
+	dialog[0].showModal();
+	dialog.find('button.okay').on('click', () => resolve(true));
+	dialog.find('button.cancel').on('click', () => resolve(false));
+	void promise.then(() => dialog[0].close());
+	return promise;
+}
 
-	confirm.find('button.okay').on('click', () => resolve(true));
+export function prompt(text: string): Promise<string | void> {
+	const { promise, resolve } = Promise.withResolvers<string | void>();
 
-	confirm.find('button.cancel').on('click', () => resolve(false));
+	const dialog = $<HTMLDialogElement>('#prompt');
+	dialog.find('.message').text(text);
+	dialog.find('input').val('');
+	dialog[0].showModal();
+	dialog.find('button.okay').on('click', () => resolve(dialog.find('input').val()!));
+	dialog.find('button.cancel').on('click', () => resolve());
+	void promise.then(() => dialog[0].close());
+	return promise;
+}
 
-	void promise.then(() => confirm[0].close());
+export function alert(text: string): Promise<void> {
+	const { promise, resolve } = Promise.withResolvers<void>();
 
+	const dialog = $<HTMLDialogElement>('#alert');
+	dialog.find('.message').text(text);
+	dialog[0].showModal();
+	dialog.find('button.okay').on('click', () => {
+		resolve();
+		dialog[0].close();
+	});
 	return promise;
 }
 

src/editor.ts

@@ -1,16 +1,47 @@
+import { fs } from '@zenfs/core';
 import $ from 'jquery';
+import { prompt } from './common.js';
 
-$<HTMLTextAreaElement>('#editor .content').on('keydown', e => {
-	if (e.key != 'Tab') {
+export const content = $<HTMLTextAreaElement>('#editor .content');
+
+export let file: string | void;
+
+export async function open(path?: string | void) {
+	path ??= await prompt('Open file');
+	if (!path) {
 		return;
 	}
-	e.preventDefault();
+	file = path;
+	content.text(fs.readFileSync(file, 'utf-8'));
+	content[0].focus();
+}
 
-	const start = e.target.selectionStart;
+export async function save() {
+	file ||= await prompt('Save to path');
+	if (!file) return;
+	fs.writeFileSync(file, content.val()!);
+}
+
+content.on('keydown', e => {
+	if (e.key == 'Tab') {
+		e.preventDefault();
+		const start = e.target.selectionStart;
+		e.target.value = e.target.value.slice(0, start) + '\t' + e.target.value.slice(e.target.selectionEnd);
+		e.target.selectionStart = e.target.selectionEnd = start + 1;
+		return;
+	}
 
-	// set textarea value to: text before caret + tab + text after caret
-	e.target.value = e.target.value.slice(0, start) + '\t' + e.target.value.slice(e.target.selectionEnd);
+	if (!e.ctrlKey) {
+		return;
+	}
 
-	// put caret at right position again
-	e.target.selectionStart = e.target.selectionEnd = start + 1;
+	// Key combos
+	switch (e.key) {
+		case 'o':
+			void open();
+			break;
+		case 's':
+			void save();
+			break;
+	}
 });

src/explorer.ts

@@ -108,11 +108,12 @@ export function update() {
 
 $('#explorer .menu .open').on('click', () => openPath(contextMenuTarget!.name));
 $('#explorer .menu .rename').on('click', () => renameEntry(contextMenuTarget!));
-$('#explorer .menu .delete').on('click', (async e => {
+// eslint-disable-next-line @typescript-eslint/no-misused-promises
+$('#explorer .menu .delete').on('click', async e => {
 	if (e.shiftKey || (await confirm(`Are you sure you want to delete "${contextMenuTarget!.name}"?`))) {
 		removeEntry(contextMenuTarget!);
 	}
-}) as (e: JQuery.Event) => void);
+});
 
 $('#explorer').on('click', () => $('#explorer .menu').hide());
 $('#explorer').on('contextmenu', () => $('#explorer .menu').hide());

src/index.html

@@ -91,7 +91,11 @@
 		</ul>
 
 		<div id="editor" class="tab" style="display: none">
-			<strong class="top">Editor</strong>
+			<div class="top">
+				<p><strong>Editor</strong></p>
+				<button class="save">Save</button>
+				<button class="reset">Reset</button>
+			</div>
 
 			<textarea class="content"></textarea>
 		</div>
@@ -103,10 +107,22 @@
 			<div id="terminal-container"></div>
 		</div>
 
-		<dialog id="confirm">
+		<dialog id="confirm" class="page">
+			<button class="cancel">Cancel</button>
+			<button class="okay">Okay</button>
 			<p class="message"></p>
+		</dialog>
+
+		<dialog id="prompt" class="page">
 			<button class="cancel">Cancel</button>
 			<button class="okay">Okay</button>
+			<p class="message"></p>
+			<input type="text" />
+		</dialog>
+
+		<dialog id="alert" class="page">
+			<button class="okay">Okay</button>
+			<p class="message"></p>
 		</dialog>
 
 		<script type="module" src="index.js"></script>

src/styles.css

@@ -37,6 +37,7 @@ select {
 	border-radius: 0.25em;
 	padding: 0.25em;
 	accent-color: #bbb;
+	resize: none;
 }
 
 textarea:focus,
@@ -230,23 +231,17 @@ dialog {
 
 #editor textarea.content {
 	position: absolute;
-	inset: 3em 1em 1em 1em;
+	inset: 9em 1em 1em;
 	border-radius: 0.5em;
 	border: none;
 }
 
 #terminal-container {
 	position: absolute;
-	inset: 5em 1em 1em 1em;
+	inset: 5em 1em 1em;
 }
 
-#confirm {
-	text-align: center;
-
-	.message {
-		margin-bottom: 3em;
-	}
-
+dialog.page {
 	button.cancel {
 		position: absolute;
 		left: 0.5em;
@@ -258,4 +253,13 @@ dialog {
 		right: 0.5em;
 		bottom: 0.5em;
 	}
+
+	:last-child {
+		margin-bottom: 3em;
+	}
+}
+
+#confirm,
+#alert {
+	text-align: center;
 }