From dd5d1b9cbaba1b4f9c88507accc96e0a3fb490f6 Mon Sep 17 00:00:00 2001 From: Elijah Mock <28277163+ekcom@users.noreply.github.com> Date: Sat, 6 Jan 2024 21:49:29 +0000 Subject: [PATCH 1/5] Add helpers to activate and deactivate warning --- frontend/composables/use-navigation-warning.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 frontend/composables/use-navigation-warning.ts diff --git a/frontend/composables/use-navigation-warning.ts b/frontend/composables/use-navigation-warning.ts new file mode 100644 index 000000000000..f07d842ae0d6 --- /dev/null +++ b/frontend/composables/use-navigation-warning.ts @@ -0,0 +1,7 @@ +export const activateNavigationWarning = () => { + window.onbeforeunload = () => true; +} + +export const deactivateNavigationWarning = () => { + window.onbeforeunload = null; +} From 265313919c0dddfb19dc6deda4293920a4163d3a Mon Sep 17 00:00:00 2001 From: Elijah Mock <28277163+ekcom@users.noreply.github.com> Date: Sat, 6 Jan 2024 21:51:35 +0000 Subject: [PATCH 2/5] Vue-ify and add documentation --- .../composables/use-navigation-warning.ts | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/frontend/composables/use-navigation-warning.ts b/frontend/composables/use-navigation-warning.ts index f07d842ae0d6..2dff77d39a8a 100644 --- a/frontend/composables/use-navigation-warning.ts +++ b/frontend/composables/use-navigation-warning.ts @@ -1,7 +1,22 @@ -export const activateNavigationWarning = () => { +export function useNavigationWarning() { + return { activateNavigationWarning, deactivateNavigationWarning }; +} + +/** + * Displays a warning before the user navigates to another page + * e.g., by clicking a link (which isn't internal and rendered without page load), + * reloading the page, + * or closing the tab. + */ +const activateNavigationWarning = () => { + console.log("ACTIVATE"); window.onbeforeunload = () => true; } -export const deactivateNavigationWarning = () => { +/** + * Disables the warning when navigating to a page + */ +const deactivateNavigationWarning = () => { + console.log("deACTIVATE"); window.onbeforeunload = null; } From 33870dc845d33c063d4e1102aedcb7f6fa7da159 Mon Sep 17 00:00:00 2001 From: Elijah Mock <28277163+ekcom@users.noreply.github.com> Date: Sat, 6 Jan 2024 21:52:56 +0000 Subject: [PATCH 3/5] Set up navigation warning while editing recipe --- frontend/composables/recipe-page/shared-state.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/composables/recipe-page/shared-state.ts b/frontend/composables/recipe-page/shared-state.ts index bbc040dfb368..5e981fcdb891 100644 --- a/frontend/composables/recipe-page/shared-state.ts +++ b/frontend/composables/recipe-page/shared-state.ts @@ -1,5 +1,6 @@ import { computed, ComputedRef, ref, Ref, useContext } from "@nuxtjs/composition-api"; import { UserOut } from "~/lib/api/types/user"; +import { useNavigationWarning } from "~/composables/use-navigation-warning"; export enum PageMode { EDIT = "EDIT", @@ -65,6 +66,8 @@ function pageRefs(slug: string) { } function pageState({ slugRef, pageModeRef, editModeRef, imageKey }: PageRefs): PageState { + const { activateNavigationWarning, deactivateNavigationWarning } = useNavigationWarning(); + const toggleEditMode = () => { if (editModeRef.value === EditorMode.FORM) { editModeRef.value = EditorMode.JSON; @@ -88,8 +91,13 @@ function pageState({ slugRef, pageModeRef, editModeRef, imageKey }: PageRefs): P const setMode = (toMode: PageMode) => { const fromMode = pageModeRef.value; - if (fromMode === PageMode.EDIT && toMode === PageMode.VIEW) { - setEditMode(EditorMode.FORM); + if (fromMode === PageMode.EDIT) { + if (toMode === PageMode.VIEW) { + setEditMode(EditorMode.FORM); + } + deactivateNavigationWarning(); + } else if (toMode === PageMode.EDIT) { + activateNavigationWarning(); } pageModeRef.value = toMode; From f77649abc8d0325ae83d5ef5036ce140723e89b6 Mon Sep 17 00:00:00 2001 From: Elijah Mock <28277163+ekcom@users.noreply.github.com> Date: Sat, 6 Jan 2024 22:18:55 +0000 Subject: [PATCH 4/5] Disarm on internal site navigation --- frontend/components/Domain/Recipe/RecipePage/RecipePage.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue index 13ced2946022..91d521723dbc 100644 --- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue +++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue @@ -112,6 +112,7 @@ import { useUserApi } from "~/composables/api"; import { uuid4, deepCopy } from "~/composables/use-utils"; import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue"; import RecipeNotes from "~/components/Domain/Recipe/RecipeNotes.vue"; +import { useNavigationWarning } from "~/composables/use-navigation-warning"; const EDITOR_OPTIONS = { mode: "code", @@ -151,6 +152,7 @@ export default defineComponent({ const api = useUserApi(); const { pageMode, editMode, setMode, isEditForm, isEditJSON, isCookMode, isEditMode, toggleCookMode } = usePageState(props.recipe.slug); + const { deactivateNavigationWarning } = useNavigationWarning(); /** ============================================================= * Recipe Snapshot on Mount @@ -175,6 +177,7 @@ export default defineComponent({ await api.recipes.updateOne(props.recipe.slug, props.recipe); } } + deactivateNavigationWarning(); }); /** ============================================================= From 70ce34d6c9b6c6588f0df5fd74c27e3607808334 Mon Sep 17 00:00:00 2001 From: Elijah Mock <28277163+ekcom@users.noreply.github.com> Date: Mon, 5 Feb 2024 20:22:10 +0000 Subject: [PATCH 5/5] Remove logging --- frontend/composables/use-navigation-warning.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/composables/use-navigation-warning.ts b/frontend/composables/use-navigation-warning.ts index 2dff77d39a8a..85cf0b85e69b 100644 --- a/frontend/composables/use-navigation-warning.ts +++ b/frontend/composables/use-navigation-warning.ts @@ -9,7 +9,6 @@ export function useNavigationWarning() { * or closing the tab. */ const activateNavigationWarning = () => { - console.log("ACTIVATE"); window.onbeforeunload = () => true; } @@ -17,6 +16,5 @@ const activateNavigationWarning = () => { * Disables the warning when navigating to a page */ const deactivateNavigationWarning = () => { - console.log("deACTIVATE"); window.onbeforeunload = null; }