Skip to content
Snippets Groups Projects
Commit 237034c2 authored by David Mendez's avatar David Mendez
Browse files

implement scroll scpy in report card navigator

parent 087bf8fe
No related branches found
No related tags found
1 merge request!5Add compounds and target browser mockups
......@@ -3,6 +3,7 @@
</template>
<script>
import { mapState } from 'vuex'
import EntityReportCard from '~/components/report_cards/shared/EntityReportCard.vue'
import CompoundReportCardGenerator from '~/report_cards_structure/CompoundReportCardGenerator.js'
......@@ -10,10 +11,15 @@ export default {
components: {
EntityReportCard,
},
computed: {
reportCardStructure() {
return CompoundReportCardGenerator.generateReportCardStructure()
},
computed: mapState({
reportCardStructure: (state) => state.reportCard.reportCardStructure,
}),
mounted() {
const reportCardStructure = CompoundReportCardGenerator.generateReportCardStructure()
this.$store.dispatch(
'reportCard/setReportCardStructure',
reportCardStructure
)
},
}
</script>
......
<template>
<div :id="sectionDescription.id" class="report-card-section">
<div
:id="sectionDescription.id"
ref="sectionContainer"
class="report-card-section"
>
<v-row>
<v-col cols="12">
<a
......@@ -23,6 +27,8 @@
</template>
<script>
import { mapState } from 'vuex'
export default {
props: {
sectionDescription: {
......@@ -33,7 +39,26 @@ export default {
data() {
return {
showLinkIcon: false,
ignoreFirstIntersection: true,
}
},
computed: mapState({
activeSection: (state) => state.reportCard.activeSection,
}),
mounted() {
const callback = (entries, observer) => {
const sectionIndex = this.sectionDescription.index
if (entries[0].isIntersecting) {
this.$store.dispatch('reportCard/setActiveSection', sectionIndex)
}
}
const options = {
threshold: 0.5,
}
const observer = new IntersectionObserver(callback, options)
observer.observe(this.$refs.sectionContainer)
},
}
</script>
......
......@@ -12,21 +12,25 @@ const methods = {
id: 'Summary',
title: 'Summary',
component: Summary,
index: 0,
},
{
id: 'ControlStructuresAndUse',
title: 'Control Structures And Use',
component: ControlStructuresAndUse,
index: 1,
},
{
id: 'ProbeProfile',
title: 'Probe Profile',
component: ProbeProfile,
index: 2,
},
{
id: 'CrystalStructures',
title: 'Crystal Structures',
component: CrystalStructures,
index: 3,
},
],
}
......
import reportCard from '~/web-components-submodule/store/reportCard.js'
export default reportCard
Subproject commit 4a1c5882ae02999a91bf698fb9ee6625e5262528
Subproject commit 9234c346d68eca62090852c93978aae0e9a4b817
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment