caching scroll positions

1 files changed, 30 insertions, 1 deletions

diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
index 6c6ef31..f8c6cba 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
@@ -1,11 +1,39 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
+import { toArray } from 'app/utils'
 import actions from 'app/actions'
 import { Arrow } from '../nav/viewer.icons'
 import { EfluxClose } from '../nav/eflux.icons'
 
 class ViewerSectionsFootnotes extends Component {
+  state = {
+    scrollPositions: [],
+  }
+  constructor(props) {
+    super(props)
+    this.scrollRef = React.createRef()
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.footnoteList !== prevProps.footnoteList) {
+      this.cacheScrollPositions()
+    }
+    if (this.props.currentFootnote !== prevProps.currentFootnote) {
+      this.scrollToFootnote()
+    }
+  }
+  cacheScrollPositions() {
+    let scrollPositions = toArray(this.scrollRef.current.querySelectorAll('.note-element')).map(el => {
+      return el.offsetTop
+    })
+    this.setState({ scrollPositions })
+  }
+  scrollToFootnote() {
+    const { currentFootnote } = this.props
+    const id = currentFootnote.footnote_id - 1
+    const pos = this.state.scrollPositions[id]
+    this.scrollRef.current.scrollTo(0, pos - 5)
+  }
   render() {
     const { footnoteList } = this.props
     return (
@@ -13,7 +41,7 @@ class ViewerSectionsFootnotes extends Component {
         <div className='nav-footnotes-close' onClick={() => actions.viewer.hideNavComponent('footnotes')}>
           {EfluxClose}
         </div>
-        <div className='nav-footnotes-scroll'>
+        <div className='nav-footnotes-scroll' ref={this.scrollRef}>
           {footnoteList.map(note => (
             <div key={note.footnote_id} className="note-element">
               <div className="note-number">
@@ -44,6 +72,7 @@ const FootnotesLink = ({ type }) => (
 
 const mapStateToProps = state => ({
   footnoteList: state.viewer.footnoteList,
+  currentFootnote: state.viewer.currentFootnote,
 })
 
 export default connect(mapStateToProps)(ViewerSectionsFootnotes)