nicer automatic captions

2 files changed, 304 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/editor/captions/components/caption.form.js b/animism-align/frontend/app/views/editor/captions/components/caption.form.js
new file mode 100644
index 0000000..3e38ea8
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/captions/components/caption.form.js
@@ -0,0 +1,189 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { TextArea, Button } from 'app/common'
+import GalleryCaptionForm from './galleryCaption.form'
+import actions from 'app/actions'
+
+const ALPHABET = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
+
+export default class CaptionForm extends Component {
+  state = {
+    editing: false,
+    expanded: false,
+    media: { settings: {} },
+  }
+
+  constructor(props) {
+    super(props)
+    this.edit = this.edit.bind(this)
+    this.expand = this.expand.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleCancel = this.handleCancel.bind(this)
+    this.handleUpdateGalleryCaption = this.handleUpdateGalleryCaption.bind(this)
+  }
+
+  componentDidMount() {
+    this.setState({
+      media: {
+        ...this.props.media,
+        settings: {
+          ...this.props.media.settings,
+        }
+      }
+    })
+  }
+
+  edit() {
+    this.setState({ editing: true })
+  }
+  expand() {
+    this.setState({ expanded: !this.state.expanded })
+  }
+
+  handleChange(e){
+    e.preventDefault()
+    this.setState({
+      media: {
+        ...this.state.media,
+        settings: {
+          ...this.state.media,
+          bibliography: e.target.value,
+        }
+      }
+    })
+  }
+
+  handleSubmit(e) {
+    e.preventDefault()
+    actions.media.update(this.state.media)
+    this.setState({ editing: false })
+  }
+
+  handleUpdateGalleryCaption(caption_id, item) {
+    const media = {
+      ...this.state.media,
+      settings: {
+        ...this.state.media.settings,
+        caption_lookup: {
+          ...this.state.media.settings.caption_lookup,
+          [caption_id]: { ...item }
+        }
+      }
+    }
+    // console.log(media)
+    actions.media.update(media)
+    this.setState({ media })
+  }
+
+  handleCancel(e) {
+    e.preventDefault()
+    this.setState({
+      editing: false,
+      media: { ...this.props.media }
+    })
+  }
+
+  render() {
+    return this.state.editing
+      ? this.renderForm()
+      : this.renderEntry()
+  }
+
+  renderForm() {
+    const { episode, index } = this.props
+    const { media } = this.state
+    return (
+      <form className='caption-form' onSubmit={this.handleSubmit}>
+        <TextArea
+          title={`Edit caption ${media.id}`}
+          name="bibliography"
+          placeholder={(
+            media.settings.bibliography
+            ? "Enter caption"
+            : "This caption was automatically generated and is not explicitly set"
+          )}
+          data={media.settings}
+          onChange={this.handleChange}
+        />
+        <div className='buttons'>
+          <span>
+            <Link to={`/editor/${episode.id}/media/${media.id}/edit/`}>Edit media</Link>
+          </span>
+          <div>
+            <button onClick={this.handleSubmit}>Save caption</button>
+            <button onClick={this.handleCancel}>Cancel</button>
+          </div>
+        </div>
+      </form>
+    )
+  }
+
+  renderEntry() {
+    const { index } = this.props
+    const { media } = this.state
+    const { bibliography } = media.settings
+    return (
+      <div>
+        <div className={media.settings.bibliography ? 'caption-entry' : 'caption-entry generated'}onClick={this.edit}>
+          <div className='caption-index'>
+            {index}{'. '}
+          </div>
+          {media.settings.bibliography
+            ? <div className='caption-text' dangerouslySetInnerHTML={{ __html: media.settings.bibliography }} />
+            : this.renderAutomaticCaption()
+          }
+        </div>
+        {media.type === 'gallery' && this.renderGalleryEntries()}
+      </div>
+    )
+  }
+
+  renderAutomaticCaption() {
+    const { media } = this.state
+    return (
+      <div className='caption-text'>
+        {media.author}
+        {', '}
+        {media.pre_title && media.pre_title}
+        {media.title}
+        {media.post_title && media.post_title}
+        {'. '}
+        {media.date && (
+          ' ' + media.date + '.'
+        )}
+        {media.medium && (
+          ' ' + media.medium + '.'
+        )}
+        {media.source && (
+          ' ' + media.source.trim()
+        )}
+        {' (Generated)'}
+      </div>
+    )
+  }
+
+  renderGalleryEntries() {
+    const { index } = this.props
+    const { media, expanded } = this.state
+    const { image_order, caption_lookup } = media.settings
+    return (
+      <div className={expanded ? "gallery-captions expanded" : "gallery-captions"}>
+        <div className="row">
+          <div className='button-spacer'></div>
+          <button className="expander" onClick={this.expand}>{expanded ? "▼ Hide gallery entries" : "► Show gallery entries"}</button>
+        </div>
+        {expanded && image_order.map((caption_id, caption_index) => (
+          <GalleryCaptionForm
+            key={caption_index}
+            caption_id={caption_id}
+            item={caption_lookup[caption_id]}
+            index={index + ALPHABET[caption_index]}
+            onUpdate={this.handleUpdateGalleryCaption}
+          />
+        ))}
+      </div>
+    )
+  }
+}
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>
+    )
+  }
+}