paragraph to make paragraphs blockquote, hidden, etc

1 files changed, 51 insertions, 12 deletions

diff --git a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
index deeb347..1361205 100644
--- a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
+++ b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 
 import actions from '../../../actions'
 import { ParagraphElementLookup } from '../components/paragraphTypes'
+import ParagraphForm from '../components/paragraph.form'
 
 const floatLT = (a,b) => ((a*10|0) < (b*10|0))
 const floatLTE = (a,b) => ((a*10|0) === (b*10|0) || floatLT(a,b))
@@ -16,19 +17,30 @@ class ParagraphList extends Component {
     paragraphs: [],
     currentParagraph: -1,
     currentAnnotation: -1,
+    selectedParagraph: null,
+    selectedParagraphOffset: 0,
   }
+  
   constructor(props) {
     super(props)
-    this.onAnnotationClick = this.onAnnotationClick.bind(this)
-    this.onParagraphDoubleClick = this.onParagraphDoubleClick.bind(this)
+    this.handleAnnotationClick = this.handleAnnotationClick.bind(this)
+    this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this)
+    this.handleCloseParagraphForm = this.handleCloseParagraphForm.bind(this)
+    this.updateSelectedParagraph = this.updateSelectedParagraph.bind(this)
   }
+  
   componentDidMount() {
     this.build()
   }
+
   componentDidUpdate(prevProps) {
+    if (this.props.paragraph !== prevProps.paragraph) {
+      this.build()
+    }
     if (this.props.audio.play_ts === prevProps.audio.play_ts) return
     this.setCurrentParagraph()
   }
+
   setCurrentParagraph() {
     const { play_ts } = this.props.audio
     const insideParagraph = this.state.paragraphs.some(paragraph => {
@@ -45,6 +57,7 @@ class ParagraphList extends Component {
       })
     }
   }
+
   setCurrentAnnotation(paragraph, play_ts) {
     const { id: currentParagraph, annotations } = paragraph
     let currentAnnotation
@@ -62,6 +75,7 @@ class ParagraphList extends Component {
     }
     this.setState({ currentParagraph, currentAnnotation })
   }
+
   build() {
     const { order: annotationOrder, lookup: annotationLookup } = this.props.annotation
     const { lookup: paragraphLookup } = this.props.paragraph
@@ -104,27 +118,44 @@ class ParagraphList extends Component {
       }
     })
     for (let i = 0; i < (paragraphs.length - 1); i++) {
-      // console.log(paragraphs[i].end_ts)
       if (!paragraphs[i].end_ts) {
         paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1
       }
     }
-    // console.log(paragraphs)
     this.setState({ paragraphs })
   }
-  onAnnotationClick(e, paragraph, annotation){
+
+  handleAnnotationClick(e, paragraph, annotation){
     actions.audio.seek(annotation.start_ts)
   }
-  onParagraphDoubleClick(e, paragraph) {
-    //
+  handleParagraphDoubleClick(e, paragraph) {
+    console.log(e.target.parentNode)
+    let paragraphNode = e.target
+    if (!paragraphNode.classList.contains('paragraph')) {
+      paragraphNode = paragraphNode.parentNode
+    }
+    this.setState({
+      selectedParagraph: { ...paragraph },
+      selectedParagraphOffset: paragraphNode.offsetTop
+    })
+  }
+  updateSelectedParagraph(selectedParagraph) {
+    this.setState({ selectedParagraph })
   }
+  handleCloseParagraphForm() {
+    this.setState({ selectedParagraph: null })
+  }
+
   render() {
     const { media } = this.props
-    const { paragraphs, currentParagraph, currentAnnotation } = this.state
+    const { paragraphs, selectedParagraph, selectedParagraphOffset, currentParagraph, currentAnnotation } = this.state
     return (
       <div className='paragraphs'>
         <div className='content'>
           {paragraphs.map(paragraph => {
+            if (selectedParagraph && selectedParagraph.id === paragraph.id) {
+              paragraph = selectedParagraph
+            }
             if (paragraph.type in ParagraphElementLookup) {
               const ParagraphElement = ParagraphElementLookup[paragraph.type]
               return (
@@ -132,16 +163,24 @@ class ParagraphList extends Component {
                   key={paragraph.id}
                   paragraph={paragraph}
                   media={media}
-                  selectedParagraph={paragraph.id === currentParagraph}
-                  selectedAnnotation={paragraph.id === currentParagraph && currentAnnotation}
-                  onAnnotationClick={this.onAnnotationClick}
-                  onDoubleClick={this.onParagraphDoubleClick}
+                  currentParagraph={paragraph.id === currentParagraph}
+                  currentAnnotation={paragraph.id === currentParagraph && currentAnnotation}
+                  onAnnotationClick={this.handleAnnotationClick}
+                  onDoubleClick={this.handleParagraphDoubleClick}
                 />
               )
             } else {
               return <div key={paragraph.id}>{'(waiting to implement' + paragraph.type + ')'}</div>
             }
           })}
+          {selectedParagraph &&
+            <ParagraphForm
+              paragraph={selectedParagraph}
+              onUpdate={this.updateSelectedParagraph}
+              onClose={this.handleCloseParagraphForm}
+              y={selectedParagraphOffset}
+            />
+          }
         </div>
       </div>
     )