From 92b9609f60dbc5a3ac82ad6bd59a1fb68aded4ed Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Thu, 20 Feb 2025 10:24:29 -0600
Subject: [PATCH] add dynamically updating icon
---
src/assets/text/text.js | 60 +++++++++++++++--------
src/components/FindexGlobalThreatsViz.vue | 27 +++++++---
2 files changed, 60 insertions(+), 27 deletions(-)
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index 1e603b1..6a8f588 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -250,31 +250,38 @@ export default {
subThreatData: [
{
subThreat: "Dams",
- subThreatText: "Dams text"
+ subThreatText: "Dams text",
+ subThreatIcon: "noun-canal-29572-7A562B"
},
{
subThreat: "Wetland drainage",
- subThreatText: "Wetland drainage text"
+ subThreatText: "Wetland drainage text",
+ subThreatIcon: "noun-canal-29572-7A562B"
},
{
subThreat: "Deforestation and associated runoff",
- subThreatText: "Deforestation and associated runoff text"
+ subThreatText: "Deforestation and associated runoff text",
+ subThreatIcon: "noun-canal-29572-7A562B"
},
{
subThreat: "Riparian degradation",
- subThreatText: "Riparian degradation text"
+ subThreatText: "Riparian degradation text",
+ subThreatIcon: "noun-canal-29572-7A562B"
},
{
subThreat: "Agricultural extraction",
- subThreatText: "Agricultural extraction text"
+ subThreatText: "Agricultural extraction text",
+ subThreatIcon: "noun-canal-29572-7A562B"
},
{
subThreat: "Urban extraction",
- subThreatText: "Urban extraction text"
+ subThreatText: "Urban extraction text",
+ subThreatIcon: "noun-canal-29572-7A562B"
},
{
subThreat: "Industrial Extraction",
- subThreatText: "Industrial Extraction text"
+ subThreatText: "Industrial Extraction text",
+ subThreatIcon: "noun-canal-29572-7A562B"
}
]
},
@@ -290,35 +297,43 @@ export default {
subThreatData: [
{
subThreat: "Agricultural effluents",
- subThreatText: "Agricultural effluents text"
+ subThreatText: "Agricultural effluents text",
+ subThreatIcon: "noun-drain-7131918-002D5E"
},
{
subThreat: "Urban wastewater",
- subThreatText: "Urban wastewater text"
+ subThreatText: "Urban wastewater text",
+ subThreatIcon: "noun-drain-7131918-002D5E"
},
{
subThreat: "Industrial effluents",
- subThreatText: "Industrial effluents text"
+ subThreatText: "Industrial effluents text",
+ subThreatIcon: "noun-drain-7131918-002D5E"
},
{
subThreat: "Aquaculture effluents",
- subThreatText: "Aquaculture effluents text"
+ subThreatText: "Aquaculture effluents text",
+ subThreatIcon: "noun-drain-7131918-002D5E"
},
{
subThreat: "Pharmaceuticals",
- subThreatText: "Pharmaceuticals text"
+ subThreatText: "Pharmaceuticals text",
+ subThreatIcon: "noun-drain-7131918-002D5E"
},
{
subThreat: "Oil or gas exploration",
- subThreatText: "Oil or gas exploration text"
+ subThreatText: "Oil or gas exploration text",
+ subThreatIcon: "noun-drain-7131918-002D5E"
},
{
subThreat: "Plastics",
- subThreatText: "Plastics text"
+ subThreatText: "Plastics text",
+ subThreatIcon: "noun-drain-7131918-002D5E"
},
{
subThreat: "Mining",
- subThreatText: "Mining text"
+ subThreatText: "Mining text",
+ subThreatIcon: "noun-drain-7131918-002D5E"
}
]
},
@@ -334,23 +349,28 @@ export default {
subThreatData: [
{
subThreat: "Change in water temperature",
- subThreatText: "Change in water temperature text"
+ subThreatText: "Change in water temperature text",
+ subThreatIcon: "noun-rain-1760091-835192"
},
{
subThreat: "Drought",
- subThreatText: "Drought text"
+ subThreatText: "Drought text",
+ subThreatIcon: "noun-rain-1760091-835192"
},
{
subThreat: "Change in flooding",
- subThreatText: "Change in flooding text"
+ subThreatText: "Change in flooding text",
+ subThreatIcon: "noun-rain-1760091-835192"
},
{
subThreat: "Change in wind patterns",
- subThreatText: "Change in wind patterns text"
+ subThreatText: "Change in wind patterns text",
+ subThreatIcon: "noun-rain-1760091-835192"
},
{
subThreat: "Change in ice cover",
- subThreatText: "Change in ice cover text"
+ subThreatText: "Change in ice cover text",
+ subThreatIcon: "noun-rain-1760091-835192"
}
]
},
diff --git a/src/components/FindexGlobalThreatsViz.vue b/src/components/FindexGlobalThreatsViz.vue
index 70c7b1e..00cf036 100644
--- a/src/components/FindexGlobalThreatsViz.vue
+++ b/src/components/FindexGlobalThreatsViz.vue
@@ -30,6 +30,7 @@
</div>
<p v-html="tab.tabText" v-if="primaryCategorySelected"/>
<p v-html="subThreatText" v-if="!primaryCategorySelected"/>
+ <img class="tab-icon-image tab-image" :src="iconSource" alt="">
<img class="tab-legend-image" :src="legendSource" :alt="tab.tabLegendImageAlt">
<img class="tab-map-image" :src="mapSource" :alt="tab.tabMapImageAlt">
</tabItem>
@@ -46,7 +47,6 @@
<script setup>
import { computed, nextTick, onMounted, ref } from "vue";
- // import { isMobile } from 'mobile-device-detect';
import VizSection from '@/components/VizSection.vue';
// define props
@@ -55,19 +55,23 @@
})
// Global variables
- // const publicPath = import.meta.env.BASE_URL;
- // const mobileView = isMobile;
let primaryCategorySelected = ref(true);
let currentCategory = ref(null);
let currentCategorySubThreatPrefix = ref(null);
let legendSource = ref(null);
let mapSource = ref(null);
+ let iconSource = ref(null);
// Set up computed variables that depend on ref values
+ const primaryCategoryData = computed(() => {
+ return props.text.tabData.filter(d => d.subThreatPrefix == currentCategorySubThreatPrefix.value)[0]
+ })
+ // undefined if primaryCategorySelected
+ const subCategoryData = computed(() => {
+ return primaryCategoryData.value.subThreatData.filter(d => d.subThreat == currentCategory.value)[0]
+ })
const subThreatText = computed(() => {
- const primaryCategoryText = props.text.tabData.filter(d => d.subThreatPrefix == currentCategorySubThreatPrefix.value)[0]
- const subCategoryText = primaryCategoryText.subThreatData.filter(d => d.subThreat == currentCategory.value)[0]
- return subCategoryText.subThreatText;
+ return subCategoryData.value.subThreatText;
});
// Declare behavior on mounted
@@ -96,7 +100,7 @@
// pull category information
currentCategory.value = activeTab[0].text
- const currentData = props.text.tabData.filter(d => d.tabContentTitle == currentCategory.value)
+ const currentData = props.text.tabData.filter(d => d.tabContentTitle == currentCategory.value)[0]
currentCategorySubThreatPrefix.value = currentData.subThreatPrefix
// update map - always show primary category on page load
@@ -122,13 +126,22 @@
mapSource.value = getContentImageUrl(currentCategory.value, currentCategorySubThreatPrefix.value, "map")
legendSource.value = getContentImageUrl(currentCategory.value, currentCategorySubThreatPrefix.value, "legend")
}
+ function updateIcon() {
+ if (primaryCategorySelected.value) {
+ iconSource.value = getPrefixImageURL(primaryCategoryData.value.tabIcon)
+ } else {
+ iconSource.value = getPrefixImageURL(subCategoryData.value.subThreatIcon)
+ }
+ }
function switchToSubCategory(category, prefix) {
primaryCategorySelected.value = false;
updateTabContent(category, prefix);
+ updateIcon();
}
function switchToPrimaryCategory(category, prefix) {
primaryCategorySelected.value = true;
updateTabContent(category, prefix);
+ updateIcon();
}
</script>
--
GitLab