nicer automatic captions

1 files changed, 115 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/editor/captions/components/galleryCaption.form.js b/animism-align/frontend/app/views/editor/captions/components/galleryCaption.form.js
new file mode 100644
index 0000000..ff07052
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/captions/components/galleryCaption.form.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { TextArea, Button } from 'app/common'
+import actions from 'app/actions'
+
+export default class GalleryCaptionForm extends Component {
+  state = {
+    editing: false,
+    item: {},
+  }
+
+  constructor(props) {
+    super(props)
+    this.edit = this.edit.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleCancel = this.handleCancel.bind(this)
+  }
+
+  componentDidMount() {
+    this.setState({
+      item: {
+        ...this.props.item,
+      }
+    })
+  }
+
+  edit() {
+    this.setState({ editing: true })
+  }
+
+  handleChange(e){
+    e.preventDefault()
+    this.setState({
+      item: {
+        ...this.state.item,
+        caption: e.target.value,
+      }
+    })
+  }
+
+  handleSubmit(e) {
+    e.preventDefault()
+    this.props.onUpdate(this.props.caption_id, this.state.item)
+    this.setState({ editing: false })
+  }
+
+  handleCancel(e) {
+    e.preventDefault()
+    this.setState({
+      editing: false,
+      item: { ...this.props.item }
+    })
+  }
+
+  render() {
+    return this.state.editing
+      ? this.renderForm()
+      : this.renderEntry()
+  }
+
+  renderForm() {
+    const { episode, index } = this.props
+    const { item } = this.state
+    return (
+      <form className='caption-form' onSubmit={this.handleSubmit}>
+        <TextArea
+          title={`Edit caption`}
+          name="caption"
+          placeholder="Enter caption"
+          data={item}
+          onChange={this.handleChange}
+        />
+        <div className='buttons'>
+          <span />
+          <div>
+            <button onClick={this.handleSubmit}>Save caption</button>
+            <button onClick={this.handleCancel}>Cancel</button>
+          </div>
+        </div>
+      </form>
+    )
+  }
+
+  renderEntry() {
+    const { index } = this.props
+    const { item } = this.state
+    return (
+      <div>
+        <div className={item.caption ? 'caption-entry' : 'caption-entry generated'} onClick={this.edit}>
+          <div className='caption-index'>
+            {index}{'. '}
+          </div>
+          {item.caption
+            ? <div className='caption-text' dangerouslySetInnerHTML={{ __html: item.caption }} />
+            : this.renderAutomaticCaption()
+          }
+        </div>
+      </div>
+    )
+  }
+
+  renderAutomaticCaption() {
+    const { item } = this.state
+    return (
+      <div className='caption-text'>
+        {item.author ? item.author + '. ' : ''}
+        {item.title ? item.title + '. ' : ''}
+        {item.date}
+        {' (Generated)'}
+      </div>
+    )
+  }
+}