Close search with escape

svelte/src/filesystem/Filesystem.svelte

@@ -43,7 +43,9 @@ let state = {
 	shuffle: false,
 }
 
-onMount(() => fs_navigator.open_node(window.initial_node, false))
+onMount(() => {
+	fs_navigator.open_node(window.initial_node, false)
+})
 
 const keydown = e => {
 	if (e.ctrlKey || e.altKey || e.metaKey) {
@@ -115,10 +117,6 @@ const loading_evt = e => {
 	bind:this={fs_navigator}
 	bind:state
 	on:loading={loading_evt}
-	on:navigation_complete={() => {
-		// Reset the view to the file view if we were in search view
-		view = "file"
-	}}
 />
 
 <div class="file_viewer">
@@ -155,6 +153,7 @@ const loading_evt = e => {
 					state={state}
 					fs_navigator={fs_navigator}
 					on:loading={loading_evt}
+					on:done={() => {view = "file"}}
 				/>
 			{/if}
 		</div>

svelte/src/filesystem/Navigator.svelte

@@ -67,16 +67,11 @@ export const open_node = (node, push_history) => {
 	// still replace the URL with replaceState. This way the user is not greeted
 	// to a 404 page when refreshing after renaming a file
 	window.document.title = node.path[node.base_index].name+" ~ pixeldrain"
+	let url = "/d/"+node.path[0].id+node.path[node.base_index].path
 	if (push_history) {
-		window.history.pushState(
+		window.history.pushState({}, window.document.title, url)
-			{}, window.document.title,
-			"/d/"+node.path[0].id+node.path[node.base_index].path,
-		)
 	} else {
-		window.history.replaceState(
+		window.history.replaceState({}, window.document.title, url)
-			{}, window.document.title,
-			"/d/"+node.path[0].id+node.path[node.base_index].path,
-		)
 	}
 
 	// If the new node is a child of the previous node we save the parent's

svelte/src/filesystem/SearchView.svelte

@@ -59,15 +59,24 @@ const search = async (limit = 10) => {
 	}
 }
 
-// Submitting opens the first result
+const keyup = e => {
-const submit_search = () => {
+	if (e.key === "Escape") {
-	if (search_results.length !== 0) {
+		dispatch("done")
-		fs_navigator.navigate(search_results[0], true)
+	} else {
+		search()
 	}
 }
 
-const node_click = index => {
+// Submitting opens the first result
+const submit_search = () => {
+	if (search_results.length !== 0) {
+		open_result(0)
+	}
+}
+
+const open_result = index => {
 	fs_navigator.navigate(search_results[index], true)
+	dispatch("done")
 }
 </script>
 
@@ -84,12 +93,19 @@ const node_click = index => {
 	</div>
 {/if}
 
-<form class="search_bar highlight_shaded center" on:submit|preventDefault={submit_search}>
+
-	<i class="icon">search</i>
+<div class="search_bar highlight_shaded center">
-	<!-- svelte-ignore a11y-autofocus -->
+	<div>
-	<input class="term" type="text" style="width: 100%;" bind:value={search_term} on:keyup={() => search()} autofocus />
+		Currently searching in <b>{state.base.path}</b>. Use the navigation buttons
-	<input class="submit" type="submit" value="Search"/>
+		above to search in a different location.
-</form>
+	</div>
+	<form class="search_form" on:submit|preventDefault={submit_search}>
+		<i class="icon">search</i>
+		<!-- svelte-ignore a11y-autofocus -->
+		<input class="term" type="text" style="width: 100%;" bind:value={search_term} on:keyup={keyup} autofocus />
+		<input class="submit" type="submit" value="Search"/>
+	</form>
+</div>
 
 <div class="directory center">
 	<tr>
@@ -99,7 +115,7 @@ const node_click = index => {
 	{#each search_results as result, index}
 		<a
 			href={state.path_root+result}
-			on:click|preventDefault={() => node_click(index)}
+			on:click|preventDefault={() => open_result(index)}
 			class="node"
 		>
 			<td>
@@ -132,10 +148,14 @@ const node_click = index => {
 }
 
 .search_bar {
+	display: flex;
+	flex-direction: column;
+	margin-top: 10px;
+}
+.search_form {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	margin-top: 10px;
 }
 .term {
 	flex: 1 1 auto;