Added new file dialog

src/explorer.ts

@@ -116,3 +116,58 @@ $('#explorer').on('contextmenu', () => $('#explorer .menu').hide());
 $('#explorer .parent').on('click', () => {
 	openPath(dirname(cwd));
 });
+
+const create = $<HTMLDialogElement>('#explorer dialog.create'),
+	createName = create.find<HTMLInputElement>('.inputs .name');
+
+$('#explorer .new').on('click', () => {
+	create[0].showModal();
+});
+
+create.find('button.cancel').on('click', () => {
+	create.find('input,select').val('');
+	create.find('.error').text('').css({ height: 0 });
+	create[0].close();
+});
+
+createName.on('keydown change focus blur', e => {
+	if (e.target.value) {
+		create.find('button.create').removeAttr('disabled');
+	} else {
+		create.find('button.create').attr('disabled', 1);
+	}
+});
+
+create.find('button.create').on('click', () => {
+	const type = create.find<HTMLSelectElement>('.inputs .type').val()!;
+	if (!type) {
+		create.find('.error').text('You must select a file type').animate({ height: '1em' }, 250);
+		return;
+	}
+
+	const name = createName.val()!;
+	if (!name) {
+		create.find('.error').text('You must provide a file name').animate({ height: '1em' }, 250);
+		return;
+	}
+
+	if (fs.existsSync(name)) {
+		create.find('.error').text('A file with that name already exists').animate({ height: '1em' }, 250);
+		return;
+	}
+
+	switch (type) {
+		case 'file':
+			fs.writeFileSync(name, '');
+			break;
+		case 'directory':
+			fs.mkdirSync(name);
+			break;
+		default:
+			create.find('.error').text('Invalid file type').animate({ height: '1em' }, 250);
+			return;
+	}
+
+	createEntry(name);
+	create[0].close();
+});

src/index.html

@@ -45,6 +45,7 @@
 				<p><strong>Explorer</strong></p>
 				<div>
 					<button class="parent"><strong>↑</strong> Parent</button>
+					<button class="new"><strong>+</strong> New</button>
 				</div>
 			</div>
 
@@ -69,6 +70,24 @@
 					<p class="mtime"></p>
 				</li>
 			</template>
+
+			<dialog class="create">
+				<div class="inputs">
+					<label for="name">Name</label>
+					<input type="text" class="name" name="name" />
+					<label for="type">Type</label>
+					<select class="type" name="type">
+						<option value="" disabled selected>Select type</option>
+						<option value="file">File</option>
+						<option value="directory">Directory</option>
+						<!--<option value="symlink">Symlink</option>-->
+					</select>
+					<p><sub class="error"></sub></p>
+				</div>
+
+				<button class="create">Create</button>
+				<button class="cancel">Cancel</button>
+			</dialog>
 		</ul>
 
 		<div id="editor" class="tab" style="display: none">

src/styles.css

@@ -20,6 +20,15 @@ button {
 	cursor: pointer;
 }
 
+button:disabled {
+	background-color: #333;
+	border: 1px solid #666;
+	color: #999;
+	border-radius: 0.5em;
+	padding: 0.5em;
+	cursor: pointer;
+}
+
 input,
 textarea,
 select {
@@ -180,6 +189,41 @@ input:focus {
 			border-radius: 0.5em;
 		}
 	}
+
+	dialog.create {
+		border: 1px solid #999;
+		border-radius: 0.5em;
+		background-color: #333;
+		min-width: 25em;
+
+		.inputs {
+			display: flex;
+			flex-direction: column;
+			gap: 0.5em;
+			margin-bottom: 3em;
+		}
+
+		.error {
+			height: 0;
+		}
+
+		label {
+			font-size: 0.75em;
+			display: inline-block;
+		}
+
+		button.cancel {
+			position: absolute;
+			left: 0.5em;
+			bottom: 0.5em;
+		}
+
+		button.create {
+			position: absolute;
+			right: 0.5em;
+			bottom: 0.5em;
+		}
+	}
 }
 
 #editor textarea.content {