Add modal (#169)

Co-authored-by: Anton <[email protected]>

src/lib/components/modal/Modal.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	let dialog: HTMLDialogElement | undefined;
+
+	/**
+	 * Allows the user to close the modal by clicking outside it.
+	 */
+	export let closeOnBackdrop: boolean = false;
+
+	/**
+	 * Whether or not the modal is open or closed.
+	 */
+	export let show: boolean = false;
+
+	/**
+	 * Ensures that the real DOM element is opened or closed when the svelte value changes.
+	 */
+	$: if (dialog && show) {
+		dialog.showModal();
+	} else {
+		dialog?.close();
+	}
+
+	/**
+	 * Closes the modal if the user clicks outside it
+	 * Only works if closeOnBackdrop is true
+	 */
+	function closeOnBackdropClick(event: MouseEvent) {
+		if (!closeOnBackdrop) return;
+		if (!dialog) {
+			throw new TypeError("Dialog should always be defined on mount");
+		}
+		/**
+		 * TODO: Is there really no better way to check if the user clicked outside?
+		 */
+		const rect = dialog.getBoundingClientRect();
+		const clickIsOnDialog =
+			rect.top <= event.clientY &&
+			event.clientY <= rect.top + rect.height &&
+			rect.left <= event.clientX &&
+			event.clientX <= rect.left + rect.width;
+		if (!clickIsOnDialog) {
+			show = false;
+		}
+	}
+</script>
+
+<!--TODO: Remove this when supported by Svelte-->
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+	bind:this={dialog}
+	on:click|self={(event) => {
+		closeOnBackdropClick(event);
+	}}
+>
+	<slot />
+</dialog>
+
+<style>
+	dialog {
+		color: var(--text-color);
+		background-color: var(--background-color);
+	}
+	dialog::backdrop {
+		background-color: var(--modal-background-color);
+	}
+</style>

src/lib/components/settings/SettingsView.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import Tabs from "$lib/components/tabs/Tabs.svelte";
 	import type { Tab } from "$lib/components/tabs/Tab";
 	import ColorSettings from "$lib/components/settings/ColorSettings.svelte";
 	import FontSettings from "$lib/components/settings/FontSettings.svelte";
-
-	const dispatch = createEventDispatcher();
+	import Modal from "../modal/Modal.svelte";
+	import { showSettings } from "./showSettings";
 
 	const settingTabs: Tab[] = [
 		{
@@ -19,17 +18,19 @@
 	];
 </script>
 
-<div id="setting-tabs-container">
-	<Tabs tabs={settingTabs} />
-</div>
+<Modal show={$showSettings}>
+	<div id="setting-tabs-container">
+		<Tabs tabs={settingTabs} />
+	</div>
 
-<button
-	on:click={() => {
-		dispatch("toggleSettings");
-	}}
->
-	<p>Close Settings</p>
-</button>
+	<button
+		on:click={() => {
+			$showSettings = false;
+		}}
+	>
+		<p>Close Settings</p>
+	</button>
+</Modal>
 
 <style>
 	button {

src/lib/components/settings/showSettings.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const showSettings = writable(false);

src/lib/components/topBar/TopBar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
+	import { onMount } from "svelte";
 	import type { projectHandler as ProjectHandler } from "$lib/classes/projectHandler/ProjectHandler";
 	import TopBarButton from "$lib/components/topBar/TopBarButton.svelte";
 	import DropDownButton from "$lib/components/topBar/DropDownButton.svelte";
@@ -19,8 +19,9 @@
 		Help,
 		Error,
 	} from "svelte-google-materialdesign-icons";
+	import SettingsView from "$lib/components/settings/SettingsView.svelte";
+	import { showSettings } from "$lib/components/settings/showSettings";
 
-	const dispatch = createEventDispatcher();
 	let projectHandler: typeof ProjectHandler;
 
 	onMount(async () => {
@@ -220,7 +221,7 @@
 			icon={Settings}
 			name="Settings"
 			on:click={() => {
-				dispatch("toggleSettings");
+				$showSettings = true;
 			}}
 		/>
 	</TopBarButton>
@@ -246,6 +247,8 @@
 	</TopBarButton>
 </div>
 
+<SettingsView />
+
 <style>
 	div {
 		height: 100%;

src/routes/+page.svelte

@@ -11,17 +11,11 @@
 	import Queries from "$lib/components/query/Queries.svelte";
 	import QueryNav from "$lib/components/query/QueryNav.svelte";
 	import ProjectItems from "$lib/components/project/ProjectItems.svelte";
-	import Settings from "$lib/components/settings/SettingsView.svelte";
-
-	let showSettings: boolean = false;
-	function toggleSettings() {
-		showSettings = !showSettings;
-	}
 </script>
 
 <!-- Top navigation Panel -->
 <nav id="main-nav">
-	<TopBar on:toggleSettings={toggleSettings} />
+	<TopBar />
 </nav>
 <main>
 	{#if $project === undefined}
@@ -39,11 +33,7 @@
 		<div class="canvas">
 			<nav class="inner-nav2">Nav 2</nav>
 			<!-- Replace Settings with a modal or new window instead of replacing the SVG View -->
-			{#if showSettings}
-				<Settings on:toggleSettings={toggleSettings} />
-			{:else}
-				<SvgView />
-			{/if}
+			<SvgView />
 		</div>
 		<!-- Right side -->
 		<SidePanel panelSide={SidePanelEnum.Right}>

tests/lib/components/settings/settings.test.ts

@@ -81,48 +81,3 @@ test("change to color tab", async ({ page }) => {
 	await expect(buttons[0]).toHaveClass(/active/);
 	await expect(buttons[1]).not.toHaveClass(/active/);
 });
-
-test("returns to svg-view when closing through top navbar", async ({
-	page,
-}) => {
-	await expect(page.locator(".canvas svg")).not.toBeVisible();
-
-	// Click the setting button in the nav-bar again
-	await page
-		.getByRole("button", { name: "settings Settings", exact: true })
-		.click();
-
-	await expect(page.locator(".canvas svg")).toBeVisible();
-});
-
-test("returns to svg-view when closing through button", async ({ page }) => {
-	await expect(page.locator(".canvas svg")).not.toBeVisible();
-
-	// Click the close button in setting view
-	await page
-		.getByRole("button", { name: "Close Settings", exact: true })
-		.click();
-
-	await expect(page.locator(".canvas svg")).toBeVisible();
-});
-
-test("can reopen settings after closing", async ({ page }) => {
-	await expect(page.locator(".canvas svg")).not.toBeVisible();
-
-	// Click the close button in setting view
-	await page
-		.getByRole("button", { name: "Close Settings", exact: true })
-		.click();
-
-	await expect(page.locator(".canvas svg")).toBeVisible();
-
-	// Click the open settings button to reopen
-	await page.getByRole("button", { name: "Options", exact: true }).hover();
-	await page
-		.getByRole("button", { name: "settings Settings", exact: true })
-		.click();
-
-	// Check if the tab buttons are visible
-	const buttons = await getTabButtons(page);
-	expect(buttons).toHaveLength(2);
-});