opening the footnote if you click on it

10 files changed, 38 insertions, 5 deletions

diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index 75da7ed..3c0ec6f 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -32,6 +32,7 @@ export const viewer = with_type('viewer', [
   'set_nav_style', 'set_media_title',
   'open_vitrine_modal', 'close_vitrine_modal', 'set_vitrine_index',
   'open_growl', 'close_growl',
+  'open_footnote',
 ])
 
 export const site = with_type('site', [
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 4738493..c156fba 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -46,6 +46,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
+}
+.viewer-nav > .main-nav > div {
   width: 32%;
 }
 .viewer-nav > .nav-row > div:nth-child(1) {
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index d6702bb..a5e4d12 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -29,6 +29,9 @@ class PlayerTranscript extends Component {
 
   handleAnnotationClick(e, paragraph, annotation) {
     // console.log(annotation)
+    if (annotation.type === 'footnote') {
+      return actions.viewer.openFootnote(annotation)
+    }
     if (annotation.settings.override_start_ts) {
       const ts = timestampToSeconds(annotation.settings.override_start_ts)
       if (ts) {
diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css
index 0d72429..3c2d5b8 100644
--- a/animism-align/frontend/app/views/viewer/sections/footnotes.css
+++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css
@@ -59,6 +59,7 @@
   line-height: 1.3;
   font-family: "Freight Text", serif;
   padding: 0.25rem 0;
+  margin-bottom: 3rem;
 }
 .nav-footnotes-gradient {
   position: absolute;
@@ -67,6 +68,7 @@
   width: 100%;
   height: 2rem;
   background: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0));
+  pointer-events: none
 }
 .nav-footnotes .note-element {
   display: flex;
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index fd48f55..8843a09 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -32,7 +32,8 @@
   background: black;
   padding: 0;
 }
-.sections-nav.viewer-nav > .nav-row > div {
+.sections-nav.viewer-nav > .nav-row > div.link-element,
+.sections-nav.viewer-nav > .nav-row > div.link {
   width: auto;
 }
 .sections-nav .link {
@@ -164,4 +165,5 @@
   position: relative;
   left: -0.5rem;
   padding: 0.5rem 0 0.2rem 0;
+  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 f8c6cba..fa5142f 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
@@ -30,7 +30,7 @@ class ViewerSectionsFootnotes extends Component {
   }
   scrollToFootnote() {
     const { currentFootnote } = this.props
-    const id = currentFootnote.footnote_id - 1
+    const id = currentFootnote - 1
     const pos = this.state.scrollPositions[id]
     this.scrollRef.current.scrollTo(0, pos - 5)
   }
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
index 1c0f49d..d0f1dbd 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
@@ -15,7 +15,7 @@ class ViewerSectionsNav extends Component {
       <div className="viewer-nav sections-nav">
         <div className='nav-row'>
 
-          <div className="checklist-element" onClick={() => {
+          <div className="checklist-element link-element" onClick={() => {
               actions.viewer.hideNavComponent('credits')
               actions.viewer.toggleNavComponent('checklist')
             }}>
@@ -25,7 +25,7 @@ class ViewerSectionsNav extends Component {
             </div>
           </div>
 
-          <div className="credits-element" onClick={() => {
+          <div className="credits-element link-element" onClick={() => {
               actions.viewer.hideNavComponent('checklist')
               actions.viewer.toggleNavComponent('credits')
             }}>
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
index 4ef47b9..b12fc18 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -108,6 +108,9 @@ class Transcript extends Component {
   }
 
   handleAnnotationClick(e, paragraph, annotation) {
+    if (annotation.type === 'footnote') {
+      return actions.viewer.openFootnote(annotation)
+    }
     actions.viewer.seekToTimestamp(paragraph.start_ts)
     this.updateScrollPosition(paragraph.start_ts + 0.1, annotation.type === 'section_heading')
   }
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index f251e08..6645e44 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -251,6 +251,12 @@ export const toggleNavComponent = key => dispatch => {
 }
 
 export const toggleComponent = key => dispatch => {
+  hideNavElementsNotMatchedBy(key)(dispatch)
+  const state = store.getState().viewer
+  dispatch({ type: types.viewer.toggle_component, key, value: !state[key] })
+}
+
+export const hideNavElementsNotMatchedBy = key => dispatch => {
   const state = store.getState().viewer
   if (key !== "share" && state.share) {
     dispatch({ type: types.viewer.toggle_component, key: "share", value: false })
@@ -261,7 +267,6 @@ export const toggleComponent = key => dispatch => {
   if (key !== "subscribe" && state.subscribe) {
     dispatch({ type: types.viewer.toggle_component, key: "subscribe", value: false })
   }
-  dispatch({ type: types.viewer.toggle_component, key, value: !state[key] })
 }
 
 export const openTranscript = () => dispatch => {
@@ -342,6 +347,15 @@ export const setSectionFromTimestamp = play_ts => dispatch => {
   }
 }
 
+/* footnotes */
+
+export const openFootnote = (annotation) => dispatch => {
+  console.log(annotation)
+  dispatch({ type: types.viewer.open_footnote, footnote_id: annotation.footnote_id })
+  hideNavElementsNotMatchedBy('footnotes')(dispatch)
+  showComponent('footnotes')(dispatch)
+}
+
 /* vitrine modal */
 
 export const openVitrineModal = (media, color, id) => dispatch => {
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 20911d6..587ae0f 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -151,6 +151,12 @@ export default function viewerReducer(state = initialState, action) {
         }
       }
 
+    case types.viewer.open_footnote:
+      return {
+        ...state,
+        currentFootnote: action.footnote_id
+      }
+
     default:
       return state
   }