From 12604f59cf960c4bace20f6b986ad7e1e3dd9fa6 Mon Sep 17 00:00:00 2001 From: David Mears Date: Mon, 11 Nov 2024 11:20:07 +0000 Subject: [PATCH 1/3] Use page route to determine whether globe component is loaded --- components/Globe.vue | 2 ++ layouts/default.vue | 21 ++++++++++++++++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/components/Globe.vue b/components/Globe.vue index f4c00b70..213a8e55 100644 --- a/components/Globe.vue +++ b/components/Globe.vue @@ -132,6 +132,8 @@ const prevSelectablePolygon = ref(undefined); const findFeatureForCountry = (countryIso: string) => WHONationalBorders.features.find(f => f.id === countryIso); +// This determines the v-show value, as opposed to the v-if which is controlled in the layout and which manages the loading +// of the component per se, so that we can hide/show the component separately from loading it (which we want to do either 0 or 1 times max). const showGlobe = computed(() => appStore.globeParameter && appStore.largeScreen && route.path !== "/about"); const highlightedCountrySeries = computed(() => { diff --git a/layouts/default.vue b/layouts/default.vue index 6e3f2292..4ecebb7e 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -14,6 +14,7 @@ + @@ -23,21 +24,39 @@ const appStore = useAppStore(); const sidebarVisible = ref(false); const loadGlobeComponent = ref(false); +const route = useRoute(); function handleToggleSidebarVisibility() { sidebarVisible.value = !sidebarVisible.value; } +const pagesUsingGlobe = ["scenarios-runId", "scenarios-new"]; + +// Set whether to load the globe component based on the current route and screen size +const setGlobeComponent = () => { + // In order that we only load the globe component once, don't set loadGlobeComponent back to false if + // it's already true, since setting it to false will cause the component to be destroyed. + if (!loadGlobeComponent.value) { + // Set the loadGlobeComponent value here, rather than using a computed property, since the app store initializes + // with the assumption that largeScreen is true, and so it would always try to load the globe on the initial page load. + loadGlobeComponent.value = appStore.largeScreen && pagesUsingGlobe.includes(route.name as string); + } +}; + const setScreenSize = () => { const breakpoint = 992; // CoreUI's "lg" breakpoint if (window.innerWidth < breakpoint) { appStore.largeScreen = false; } else { appStore.largeScreen = true; - loadGlobeComponent.value = true; } + setGlobeComponent(); }; +watch(() => route.name, () => { + setGlobeComponent(); +}); + appStore.loadMetadata(); onMounted(() => { From fdeeb7c3b53d9fa62c194c24e7adf8082fdbaa3f Mon Sep 17 00:00:00 2001 From: David Mears Date: Mon, 11 Nov 2024 11:52:35 +0000 Subject: [PATCH 2/3] Move the showGlobe computed property to the layout component --- components/Globe.vue | 5 ----- layouts/default.vue | 11 +++++++---- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/components/Globe.vue b/components/Globe.vue index 213a8e55..fb00e27b 100644 --- a/components/Globe.vue +++ b/components/Globe.vue @@ -1,6 +1,5 @@ @@ -32,13 +32,16 @@ function handleToggleSidebarVisibility() { const pagesUsingGlobe = ["scenarios-runId", "scenarios-new"]; -// Set whether to load the globe component based on the current route and screen size +// Hide/show the component separately from loading it. We want to load either 0 or 1 times max, but show/hide it as needed. +const showGlobe = computed(() => appStore.globeParameter && appStore.largeScreen && pagesUsingGlobe.includes(route.name as string)); + +// Set whether to load the globe component based on the current route and screen size. const setGlobeComponent = () => { // In order that we only load the globe component once, don't set loadGlobeComponent back to false if // it's already true, since setting it to false will cause the component to be destroyed. if (!loadGlobeComponent.value) { - // Set the loadGlobeComponent value here, rather than using a computed property, since the app store initializes - // with the assumption that largeScreen is true, and so it would always try to load the globe on the initial page load. + // Set the loadGlobeComponent value here, rather than using a computed property, since the app store initializes with the assumption + // that largeScreen is true, and so using a computed would mean that we always try to load the globe on the initial page load. loadGlobeComponent.value = appStore.largeScreen && pagesUsingGlobe.includes(route.name as string); } }; From d98c08a6acad743b413238b17e55c12bcd40f797 Mon Sep 17 00:00:00 2001 From: David Mears Date: Wed, 13 Nov 2024 16:48:05 +0000 Subject: [PATCH 3/3] Small refactor --- layouts/default.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/default.vue b/layouts/default.vue index 30f2e897..0ae87aa8 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -33,7 +33,7 @@ function handleToggleSidebarVisibility() { const pagesUsingGlobe = ["scenarios-runId", "scenarios-new"]; // Hide/show the component separately from loading it. We want to load either 0 or 1 times max, but show/hide it as needed. -const showGlobe = computed(() => appStore.globeParameter && appStore.largeScreen && pagesUsingGlobe.includes(route.name as string)); +const showGlobe = computed(() => !!appStore.globeParameter && appStore.largeScreen && pagesUsingGlobe.includes(route.name as string)); // Set whether to load the globe component based on the current route and screen size. const setGlobeComponent = () => { @@ -42,7 +42,7 @@ const setGlobeComponent = () => { if (!loadGlobeComponent.value) { // Set the loadGlobeComponent value here, rather than using a computed property, since the app store initializes with the assumption // that largeScreen is true, and so using a computed would mean that we always try to load the globe on the initial page load. - loadGlobeComponent.value = appStore.largeScreen && pagesUsingGlobe.includes(route.name as string); + loadGlobeComponent.value = showGlobe.value; } };