add footnote type and text plate type. keep track of footnotes when accumulating paragraphs.

6 files changed, 81 insertions, 5 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
index 8ca3c3f..92b5a5f 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -14,6 +14,8 @@ import { annotationFormLookup } from './annotationForms'
 
 const ANNOTATION_TYPES = [
   'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'paragraph_end',
+  'footnote',
+  'text_plate',
   'video',
   'image',
   'gallery', 'carousel', 'grid', 'vitrine',
@@ -21,6 +23,10 @@ const ANNOTATION_TYPES = [
   'curtain', 'intro', 'schedule',
 ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
 
+const annotationTextTypes = new Set([
+  'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'footnote', 'text_plate',
+])
+
 class AnnotationForm extends Component {
   constructor(props){
     super(props)
@@ -129,10 +135,7 @@ class AnnotationForm extends Component {
         }}
       >
         {this.renderButtons()}
-        {annotation.type === 'sentence' && this.renderTextarea()}
-        {annotation.type === 'section_heading' && this.renderTextarea()}
-        {annotation.type === 'heading_text' && this.renderTextarea()}
-        {annotation.type === 'pullquote_credit' && this.renderTextarea()}
+        {annotationTextTypes.has(annotation.type) && this.renderTextarea()}
         {(annotation.type in annotationFormLookup) && this.renderElementForm()}
       </div>
     )
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.index.css b/animism-align/frontend/app/views/align/components/annotations/annotation.index.css
index 7c28b43..5547408 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.index.css
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.css
@@ -47,6 +47,13 @@
 .annotationIndex .annotation.utility {
   left: calc(405px + 0.5rem);
 }
+.annotationIndex .annotation.footnote {
+  left: calc(405px + 0.5rem);
+  width: 200px;
+}
+.annotationIndex .annotation.text_plate {
+  left: calc(405px + 0.5rem);
+}
 .annotation.curtain {
   background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0));
   width: 8rem;
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
index 07a79a3..aeebc55 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react'
 
 import { CURTAIN_COLOR_SELECT_OPTIONS, BLACK_WHITE_SELECT_OPTIONS } from 'app/constants'
-import { Select, Checkbox, LabelDescription } from 'app/common'
+import { Select, Checkbox, TextInput, LabelDescription } from 'app/common'
+import { AnnotationFormFullscreen } from './annotationForm.utility'
 
 export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
   return (
@@ -61,3 +62,24 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect,
     </div>
   )
 }
+
+export const AnnotationFormTextPlate = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
+  return (
+    <div className='options'>
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
+      <AnnotationFormFullscreen
+        annotation={annotation}
+        handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
+      />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
index 5cbe773..4f91354 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
@@ -1,5 +1,6 @@
 import {
   AnnotationFormSectionHeading,
+  AnnotationFormTextPlate,
 } from './annotationForm.text'
 
 import {
@@ -22,6 +23,7 @@ import {
 
 export const annotationFormLookup = {
   section_heading: AnnotationFormSectionHeading,
+  text_plate: AnnotationFormTextPlate,
 
   image: AnnotationFormImage,
   video: AnnotationFormVideo,
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js
index 19e0eaa..75667fa 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js
@@ -62,3 +62,41 @@ export const AnnotationParagraphEnd = ({ y, annotation, selected, onClick, onDou
     </div>
   )
 }
+
+export const AnnotationFootnote = ({ y, annotation, selected, onClick, onDoubleClick }) => {
+  const { start_ts, text, paragraph_id } = annotation
+  let className = !paragraph_id
+    ? 'annotation sentence footnote'
+    : (paragraph_id % 2)
+      ? 'annotation sentence footnote odd'
+      : 'annotation sentence footnote even'
+  if (selected) className += ' selected'
+  return (
+    <div
+      className={className}
+      style={{ top: y }}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+      dangerouslySetInnerHTML={{ __html: text }}
+    />
+  )
+}
+
+export const AnnotationTextPlate = ({ y, annotation, selected, onClick, onDoubleClick }) => {
+  const { start_ts, text, paragraph_id } = annotation
+  let className = !paragraph_id
+    ? 'annotation text_plate'
+    : (paragraph_id % 2)
+      ? 'annotation text_plate odd'
+      : 'annotation text_plate even'
+  if (selected) className += ' selected'
+  return (
+    <div
+      className={className}
+      style={{ top: y }}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+      dangerouslySetInnerHTML={{ __html: text }}
+    />
+  )
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
index bd0bec1..4bcb3ce 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
@@ -5,6 +5,8 @@ import {
   AnnotationHeadingText,
   AnnotationSectionHeading,
   AnnotationParagraphEnd,
+  AnnotationFootnote,
+  AnnotationTextPlate,
 } from './annotationTypes.text'
 
 import {
@@ -32,6 +34,8 @@ export const AnnotationElementLookup = {
   heading_text: React.memo(AnnotationHeadingText),
   section_heading: React.memo(AnnotationSectionHeading),
   paragraph_end: React.memo(AnnotationParagraphEnd),
+  footnote: React.memo(AnnotationFootnote),
+  text_plate: React.memo(AnnotationTextPlate),
 
   video: React.memo(AnnotationVideo),