selected paragraph actions

7 files changed, 62 insertions, 42 deletions

diff --git a/animism-align/frontend/common/form.css b/animism-align/frontend/common/form.css
index dbfa01f..b3b022e 100644
--- a/animism-align/frontend/common/form.css
+++ b/animism-align/frontend/common/form.css
@@ -91,6 +91,7 @@ textarea {
   background: #111;
   color: #fff;
   font-size: 0.875rem;
+  line-height: 1.3;
   border-radius: 0.125rem;
 }
 textarea:focus {
diff --git a/animism-align/frontend/views/align/align.actions.js b/animism-align/frontend/views/align/align.actions.js
index b819584..351b826 100644
--- a/animism-align/frontend/views/align/align.actions.js
+++ b/animism-align/frontend/views/align/align.actions.js
@@ -6,6 +6,7 @@ import { session } from '../../session'
 import throttle from 'lodash.throttle'
 
 import { ZOOM_STEPS } from './constants'
+import { getFirstPunctuationMarkIndex, cutFirstSentence } from './align.util'
 
 export const setScrollPosition = start_ts => dispatch => (
   dispatch({ type: types.align.set_display_setting, key: 'start_ts', value: start_ts })
@@ -16,22 +17,27 @@ export const setZoom = zoom => dispatch => {
     dispatch({ type: types.align.set_display_setting, key: 'zoom', value: zoom })
   }
 }
+export const throttledSetZoom = throttle(zoom => dispatch => {
+  setZoom(zoom)(dispatch)
+}, 250, { leading: true })
+
+export const setCursor = cursor_ts => dispatch => (
+  dispatch({ type: types.align.set_display_setting, key: 'cursor_ts', value: cursor_ts })
+)
 
 export const setSelectedAnnotation = annotation_id => dispatch => {
   dispatch({ type: types.align.set_display_setting, key: 'selected_annotation_id', value: annotation_id })
 }
-
 export const clearSelectedAnnotation = annotation_id => dispatch => {
   dispatch({ type: types.align.set_display_setting, key: 'selected_annotation_id', value: -1 })
 }
 
-export const throttledSetZoom = throttle(zoom => dispatch => {
-  setZoom(zoom)(dispatch)
-}, 250, { leading: true })
-
-export const setCursor = cursor_ts => dispatch => (
-  dispatch({ type: types.align.set_display_setting, key: 'cursor_ts', value: cursor_ts })
-)
+export const setSelectedParagraph = paragraph_id => dispatch => {
+  dispatch({ type: types.align.set_display_setting, key: 'selected_paragraph_id', value: paragraph_id })
+}
+export const clearSelectedParagraph = paragraph_id => dispatch => {
+  dispatch({ type: types.align.set_display_setting, key: 'selected_paragraph_id', value: -1 })
+}
 
 export const showNewAnnotationForm = (start_ts, text) => dispatch => {
   let croppedText;
@@ -67,28 +73,6 @@ export const updateAnnotationSettings = (key, value) => dispatch => {
   dispatch({ type: types.align.update_temporary_annotation_settings, key, value })
 }
 
-const getFirstPunctuationMarkIndex = text => {
-  return Math.min(
-      text.indexOf('. '),
-      text.indexOf('? '),
-      text.indexOf('! '),
-      text.indexOf('." '),
-      text.indexOf('?" '),
-      text.indexOf('!" '),
-      text.indexOf('.” '),
-      text.indexOf('?” '),
-      text.indexOf('!” '),
-    ) + 1
-}
-const cutFirstSentence = text => {
-  const textToCrop = text.trim().replace("\n", " ").split("\n")[0]
-  let cropIndex = getFirstPunctuationMarkIndex(textToCrop)
-  if (!cropIndex) cropIndex = textToCrop.length
-  const croppedText = textToCrop.substr(0, cropIndex).trim()
-  const updatedText = text.trim().replace(croppedText, '').trim()
-  actions.site.updateText(updatedText)
-  return croppedText
-}
 
 export const hideAnnotationForm = () => dispatch => {
   dispatch({
diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css
index 0b0ac60..d430e1f 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/views/align/align.css
@@ -105,12 +105,17 @@ canvas {
   width: 450px;
 }
 .annotationForm {
+  width: 401px;
   padding: 0.5rem;
   position: absolute;
   left: 0.25rem;
   background: #448;
+  box-shadow: 0 0 2px #000, 0 0 4px #000;
   z-index: 10;
 }
+.annotationForm textarea {
+  width: 100%;
+}
 .annotationForm .row {
   justify-content: space-between;
 }
diff --git a/animism-align/frontend/views/align/align.reducer.js b/animism-align/frontend/views/align/align.reducer.js
index 0bd6c56..679f63b 100644
--- a/animism-align/frontend/views/align/align.reducer.js
+++ b/animism-align/frontend/views/align/align.reducer.js
@@ -8,6 +8,7 @@ const initialState = {
     zoom: 1,
     duration: 0,
     selected_annotation_id: -1,
+    selected_paragraph_id: -1,
   },
   annotation: {},
   options: {
@@ -18,15 +19,8 @@ export default function alignReducer(state = initialState, action) {
   // console.log(action.type, action)
   switch (action.type) {
     case types.peaks.loaded:
-      console.log('peaks duration:', action.data.length / 20)
+      console.log('peaks duration:', action.data.length / 10)
       return state
-      // return {
-      //   ...state,
-      //   timeline: {
-      //     ...state.timeline,
-      //     duration: action.data.length / 20,
-      //   }
-      // }
     case types.align.set_display_setting:
       return {
         ...state,
diff --git a/animism-align/frontend/views/align/align.util.js b/animism-align/frontend/views/align/align.util.js
index 32cbc35..ce72aef 100644
--- a/animism-align/frontend/views/align/align.util.js
+++ b/animism-align/frontend/views/align/align.util.js
@@ -26,3 +26,27 @@ export const timeToPosition = (ts, { start_ts, zoom, duration }) => {
   }
   return (ts - timeMin) / timeWidth * height
 }
+
+export const getFirstPunctuationMarkIndex = text => {
+  return Math.min(
+      text.indexOf('. '),
+      text.indexOf('? '),
+      text.indexOf('! '),
+      text.indexOf('." '),
+      text.indexOf('?" '),
+      text.indexOf('!" '),
+      text.indexOf('.” '),
+      text.indexOf('?” '),
+      text.indexOf('!” '),
+    ) + 1
+}
+
+export const cutFirstSentence = text => {
+  const textToCrop = text.trim().replace("\n", " ").split("\n")[0]
+  let cropIndex = getFirstPunctuationMarkIndex(textToCrop)
+  if (!cropIndex) cropIndex = textToCrop.length
+  const croppedText = textToCrop.substr(0, cropIndex).trim()
+  const updatedText = text.trim().replace(croppedText, '').trim()
+  actions.site.updateText(updatedText)
+  return croppedText
+}
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.index.js b/animism-align/frontend/views/align/components/annotations/annotation.index.js
index 9117a80..8121d1d 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js
@@ -42,14 +42,16 @@ class AnnotationIndex extends Component {
     this.setState({ items })
   }
   handleClick(e, annotation) {
+    e.stopPropagation()
     actions.audio.seek(annotation.start_ts)
     actions.align.setSelectedAnnotation(annotation.id)
   }
   handleDoubleClick(e, annotation) {
+    e.stopPropagation()
     actions.align.showEditAnnotationForm(annotation)
   }
   render() {
-    const { timeline } = this.props
+    const { timeline, annotationInForm } = this.props
     const { start_ts, zoom, selected_annotation_id } = timeline
     const { items } = this.state
     const className = (zoom < 2)
@@ -60,6 +62,9 @@ class AnnotationIndex extends Component {
     return (
       <div className={className}>
         {items.map(annotation => {
+          if (annotationInForm && annotation.id === annotationInForm.id) {
+            return null
+          }
           const { id, type, start_ts } = annotation
           const AnnotationElement = AnnotationElementLookup[type]
           const y = timeToPosition(start_ts, timeline)
@@ -81,6 +86,7 @@ class AnnotationIndex extends Component {
 
 const mapStateToProps = state => ({
   timeline: state.align.timeline,
+  annotationInForm: state.align.annotation,
   index: state.annotation.index,
 })
 
diff --git a/animism-align/frontend/views/align/containers/timeline.container.js b/animism-align/frontend/views/align/containers/timeline.container.js
index 591af03..760da82 100644
--- a/animism-align/frontend/views/align/containers/timeline.container.js
+++ b/animism-align/frontend/views/align/containers/timeline.container.js
@@ -23,7 +23,8 @@ class Timeline extends Component {
     this.handleKeydown = this.handleKeydown.bind(this)
     this.handleMouseMove = this.handleMouseMove.bind(this)
     this.handleWheel = this.handleWheel.bind(this)
-    this.handleClick = this.handleClick.bind(this)
+    this.handleContainerClick = this.handleContainerClick.bind(this)
+    this.handleTimelineClick = this.handleTimelineClick.bind(this)
   }
   componentDidMount() {
     this.bind()
@@ -103,7 +104,11 @@ class Timeline extends Component {
     const cursor_ts = positionToTime(e.pageY, this.props.timeline)
     actions.align.setCursor(cursor_ts)
   }
-  handleClick(e) {
+  handleContainerClick(e) {
+    console.log('container click')
+    actions.align.clearSelectedAnnotation()
+  }
+  handleTimelineClick(e) {
     const play_ts = positionToTime(e.pageY, this.props.timeline)
     if (e.pageX < WAVEFORM_SIZE * 0.67) {
       actions.audio.seek(play_ts)      
@@ -115,11 +120,12 @@ class Timeline extends Component {
     return (
       <div
         className='timeline'
+        onClick={this.handleContainerClick}
         onWheel={this.handleWheel}
         onMouseMove={this.handleMouseMove}
       >
         <div className='timelineColumn'>
-          <Waveform onClick={this.handleClick} />
+          <Waveform onClick={this.handleTimelineClick} />
           <Ticks timeline={this.props.timeline} />
           <Cursor timeline={this.props.timeline} annotation={this.props.annotation} />
         </div>