displaying footnotes in the paragraph editor

4 files changed, 42 insertions, 16 deletions

diff --git a/animism-align/frontend/app/utils/transcript.utils.js b/animism-align/frontend/app/utils/transcript.utils.js
index dc351c0..2a089a0 100644
--- a/animism-align/frontend/app/utils/transcript.utils.js
+++ b/animism-align/frontend/app/utils/transcript.utils.js
@@ -87,9 +87,13 @@ export const buildParagraphs = (annotationOrder, sectionCount, footnoteCount) =>
       paragraphs.push(currentParagraph)
     }
 
+    // accumulate footnotes
     if (annotation.type === 'footnote') {
+      // bump footnote count and attach it to this annotation, so we can find it later
       footnoteCount += 1
       annotation.footnote_id = footnoteCount
+      // set annotation start point to the start of the previous sentence
+      annotation.start_ts = currentParagraph.annotations[currentParagraph.annotations.length - 1].start_ts
       footnotes.push(annotation)
     }
 
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index 94f4585..1a83569 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -38,14 +38,17 @@ class ParagraphList extends Component {
     const { id: currentParagraph, annotations } = paragraph
     let currentAnnotation
     let annotation
-    let i = 0
+    let i = 0, next_i
     let len = annotations.length
     for (let i = 0; i < len - 1; i++) {
-      if (floatLT(play_ts, annotations[i+1].start_ts)) {
+      next_i = i + 1
+      if (annotations[next_i].type === 'footnote') next_i += 1
+      if (next_i < len && floatLT(play_ts, annotations[next_i].start_ts)) {
         currentAnnotation = annotations[i].id
         break
       }
     }
+    console.log(currentAnnotation)
     if (!currentAnnotation) {
       currentAnnotation = annotations[len-1].id
     }
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
index 5eedaa0..f0529c8 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
@@ -11,20 +11,32 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
       className={className}
       onDoubleClick={e => onDoubleClick(e, paragraph)}
     >
-      {paragraph.annotations.map(annotation => (
-        <span
-          key={annotation.id}
-          className={
-            annotation.type === 'pullquote_credit'
-            ? 'pullquote_credit'
-            : annotation.id === currentAnnotation
-            ? 'current'
-            : ''
-          }
-          onClick={e => onAnnotationClick(e, paragraph, annotation)}
-          dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
-        />
-      ))}
+      {paragraph.annotations.map(annotation => {
+        if (annotation.type === 'footnote') {
+          return (
+            <span
+              key={annotation.id}
+              className='footnote'
+              onClick={e => onAnnotationClick(e, paragraph, annotation)}
+              dangerouslySetInnerHTML={{ __html: annotation.footnote_id }}
+            />
+          )
+        }
+        return (
+          <span
+            key={annotation.id}
+            className={
+              annotation.type === 'pullquote_credit'
+              ? 'pullquote_credit'
+              : annotation.id === currentAnnotation
+              ? 'current'
+              : ''
+            }
+            onClick={e => onAnnotationClick(e, paragraph, annotation)}
+            dangerouslySetInnerHTML={{ __html: annotation.text }}
+          />
+        )
+      })}
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.css b/animism-align/frontend/app/views/paragraph/paragraph.css
index dcc250c..5743dbb 100644
--- a/animism-align/frontend/app/views/paragraph/paragraph.css
+++ b/animism-align/frontend/app/views/paragraph/paragraph.css
@@ -40,6 +40,13 @@
   font-size: 16px;
   line-height: 1.5;
 }
+.paragraphs .footnote {
+  font-size: 13px;
+  position: relative;
+  top: -8px;
+  left: -4px;
+  cursor: pointer;
+}
 
 .paragraphs .blockquote {
   padding-left: 3rem;