caching scroll positions

3 files changed, 37 insertions, 5 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 4266abc..b1acc33 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -235,11 +235,11 @@
 
 /* footnotes */
 
-.player-transcript .intro_paragraph .footnote {
-  font-size: 2.5rem;
+.player-transcript .paragraph.intro_paragraph .footnote {
+  font-size: 2.0rem;
   position: relative;
   top: -1.4rem;
-  left: -1rem;
+  left: -0.8rem;
   margin-right: -0.5rem;
   cursor: pointer;
 }
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)
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 29868aa..20911d6 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -18,12 +18,15 @@ const initialState = {
 
   /* section look and navigation */
   sections: { loading: true },
-  footnoteList: [],
   currentSection: null,
   nextSection: null,
   autoAdvance: false,
   atEndOfSection: false,
 
+  /* footnotes */
+  footnoteList: [],
+  currentFootnote: -1,
+
   /* color of the bar / logo / icons */
   navStyle: 'white',