From 1ca032eb0e1a072f84e2ea04b4ff76c6d16f9a7f Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Thu, 12 Dec 2024 17:40:15 -0600
Subject: [PATCH] Add keypress events to photo icons
---
src/components/GlacierScanViz.vue | 24 ++++++++++++++++++++++++
1 file changed, 24 insertions(+)
diff --git a/src/components/GlacierScanViz.vue b/src/components/GlacierScanViz.vue
index 01c7d9a..98bd227 100644
--- a/src/components/GlacierScanViz.vue
+++ b/src/components/GlacierScanViz.vue
@@ -22,6 +22,11 @@
</div>
</div>
</template>
+ <template #belowExplanation>
+ <div class="text-container">
+ <button id="reset-button" @click="resetViz">Reset map</button>
+ </div>
+ </template>
</VizSection>
<VizSection
@@ -322,6 +327,17 @@
photoIDs.forEach(photo_id => {
crossSectionSVG.select(`#photo-sm-${photo_id}-${id}`).selectAll("path")
.attr("class", `xs photo-sm xs-${id}`)
+ crossSectionSVG.select(`#photo-lg-${photo_id}-${id}`).selectAll("path")
+ .attr("tabindex", 0)
+ .on("keypress", function(event) {
+ if(event.key == 'Enter'){
+ draw_image(photo_id)
+ d3.selectAll(".xs")
+ .style("fill-opacity", 0)
+ .style("stroke-opacity", 0);
+ draw_xs(id, photo_id);
+ }
+ })
})
})
@@ -390,6 +406,14 @@
.on("mouseleave", (event) => mouseleave(event));
}
}
+
+ function resetViz() {
+ defaultView.value = true;
+ d3.selectAll(".xs")
+ .style("fill-opacity", 0)
+ .style("stroke-opacity", 0);
+ draw_xs(default_xs, defaultPhotoID);
+ }
</script>
<style scoped lang="scss">
--
GitLab