From d8c119efe0ae83cb4a70eee5ab061953ef3d7684 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 19 Feb 2025 15:27:43 -0600
Subject: [PATCH] set up placeholder for subthreat text
---
src/assets/text/text.js | 89 ++++++++++++++++++++++-
src/components/FindexGlobalThreatsViz.vue | 8 +-
2 files changed, 91 insertions(+), 6 deletions(-)
diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index 17d47f9..6c54e78 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -247,7 +247,36 @@ export default {
tabMapImageAlt: "Habitat alt.",
tabLegendImageAlt: "Legend",
subThreatPrefix: "H",
- subThreatData: ["Dams", "Wetland drainage", "Deforestation and associated runoff", "Riparian degradation", "Agricultural extraction", "Urban extraction", "Industrial Extraction"]
+ subThreatData: [
+ {
+ subThreat: "Dams",
+ subThreatText: "Dams text"
+ },
+ {
+ subThreat: "Wetland drainage",
+ subThreatText: "Wetland drainage text"
+ },
+ {
+ subThreat: "Deforestation and associated runoff",
+ subThreatText: "Deforestation and associated runoff text"
+ },
+ {
+ subThreat: "Riparian degradation",
+ subThreatText: "Riparian degradation text"
+ },
+ {
+ subThreat: "Agricultural extraction",
+ subThreatText: "Agricultural extraction text"
+ },
+ {
+ subThreat: "Urban extraction",
+ subThreatText: "Urban extraction text"
+ },
+ {
+ subThreat: "Industrial Extraction",
+ subThreatText: "Industrial Extraction text"
+ }
+ ]
},
{
tabTitle: "Pollution",
@@ -258,7 +287,40 @@ export default {
tabMapImageAlt: "Pollution alt.",
tabLegendImageAlt: "Legend",
subThreatPrefix: "P",
- subThreatData: ["Agricultural effluents", "Urban wastewater", "Industrial effluents", "Aquaculture effluents", "Pharmaceuticals", "Oil or gas exploration", "Plastics", "Mining"]
+ subThreatData: [
+ {
+ subThreat: "Agricultural effluents",
+ subThreatText: "Agricultural effluents text"
+ },
+ {
+ subThreat: "Urban wastewater",
+ subThreatText: "Urban wastewater text"
+ },
+ {
+ subThreat: "Industrial effluents",
+ subThreatText: "Industrial effluents text"
+ },
+ {
+ subThreat: "Aquaculture effluents",
+ subThreatText: "Aquaculture effluents text"
+ },
+ {
+ subThreat: "Pharmaceuticals",
+ subThreatText: "Pharmaceuticals text"
+ },
+ {
+ subThreat: "Oil or gas exploration",
+ subThreatText: "Oil or gas exploration text"
+ },
+ {
+ subThreat: "Plastics",
+ subThreatText: "Plastics text"
+ },
+ {
+ subThreat: "Mining",
+ subThreatText: "Mining text"
+ }
+ ]
},
{
tabTitle: "Climate and Weather",
@@ -269,7 +331,28 @@ export default {
tabMapImageAlt: "Climate and Weather alt.",
tabLegendImageAlt: "Legend",
subThreatPrefix: "CW",
- subThreatData: ["Change in water temperature", "Drought", "Change in flooding", "Change in wind patterns", "Change in ice cover"]
+ subThreatData: [
+ {
+ subThreat: "Change in water temperature",
+ subThreatText: "Change in water temperature text"
+ },
+ {
+ subThreat: "Drought",
+ subThreatText: "Drought text"
+ },
+ {
+ subThreat: "Change in flooding",
+ subThreatText: "Change in flooding text"
+ },
+ {
+ subThreat: "Change in wind patterns",
+ subThreatText: "Change in wind patterns text"
+ },
+ {
+ subThreat: "Change in ice cover",
+ subThreatText: "Change in ice cover text"
+ }
+ ]
},
{
tabTitle: "Invasive species",
diff --git a/src/components/FindexGlobalThreatsViz.vue b/src/components/FindexGlobalThreatsViz.vue
index 1e4d9c8..aad2863 100644
--- a/src/components/FindexGlobalThreatsViz.vue
+++ b/src/components/FindexGlobalThreatsViz.vue
@@ -22,13 +22,14 @@
</h3>
<div id="button-container">
<h4 v-if="tab.subThreatData.length > 1">Subthreat categories:
- <span v-for="subThreat, index in tab.subThreatData" :key="subThreat">
- <button @click="switchToSubCategory(subThreat, tab.subThreatPrefix)" :class="[tab.tabContentTitleID, { 'highlight': currentCategory == subThreat }]" v-html="subThreat" class="category-button sub"></button>
+ <span v-for="subThreatCategory, index in tab.subThreatData" :key="subThreatCategory.subThreat">
+ <button @click="switchToSubCategory(subThreatCategory.subThreat, tab.subThreatPrefix)" :class="[tab.tabContentTitleID, { 'highlight': currentCategory == subThreatCategory.subThreat }]" v-html="subThreatCategory.subThreat" class="category-button sub"></button>
<span v-if="index < tab.subThreatData.length-1" :class="tab.tabContentTitleID" class="separator"> • </span>
</span>
</h4>
</div>
- <p v-html="tab.tabText" />
+ <p v-html="tab.tabText" v-if="primaryCategorySelected"/>
+ <p v-html="subThreatText" v-if="!primaryCategorySelected"/>
<img class="tab-legend-image" :src="legendSource" :alt="tab.tabLegendImageAlt">
<img class="tab-map-image" :src="mapSource" :alt="tab.tabMapImageAlt">
</tabItem>
@@ -61,6 +62,7 @@
let currentCategorySubThreatPrefix = ref(null);
let legendSource = ref(null);
let mapSource = ref(null);
+ let subThreatText = ref("sub threat text")
// Declare behavior on mounted
// functions called here
--
GitLab