form to edit captions

4 files changed, 178 insertions, 14 deletions

diff --git a/animism-align/frontend/app/common/modal.css b/animism-align/frontend/app/common/modal.css
index 5e95a09..98e2d05 100644
--- a/animism-align/frontend/app/common/modal.css
+++ b/animism-align/frontend/app/common/modal.css
@@ -5,7 +5,7 @@
   width: 100%;
   height: 100%;
   z-index: 100;
-  background: rgba(0,0,0,0.2);
+  background: rgba(0,0,0,0.8);
   display: none;
 }
 .modal.visible {
@@ -14,7 +14,7 @@
   align-items: center;
 }
 .modal > div {
-  background: #fff;
+  background: #338;
   padding: 1rem;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.8);
 }
diff --git a/animism-align/frontend/app/views/media/components/media.formGallery.js b/animism-align/frontend/app/views/media/components/media.formGallery.js
index f785b40..fb4f73a 100644
--- a/animism-align/frontend/app/views/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { ReactSortable } from "react-sortablejs"
 
-import { session } from 'app/session'
 import actions from 'app/actions'
 import { capitalize, preloadImage, simpleArraysEqual } from 'app/utils'
 import { DISPLAY_SIZE, DISPLAY_QUALITY, THUMBNAIL_SIZE, THUMBNAIL_QUALITY } from 'app/constants'
@@ -10,9 +9,12 @@ import { DISPLAY_SIZE, DISPLAY_QUALITY, THUMBNAIL_SIZE, THUMBNAIL_QUALITY } from
 import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
 import { renderThumbnail } from 'app/common/upload.helpers'
 
+import GalleryImageForm from './media.formGalleryImage'
+
 export default class MediaGalleryForm extends Component {
   state = {
     loading: false,
+    edit_image_id: null,
   }
 
   constructor(props) {
@@ -22,6 +24,7 @@ export default class MediaGalleryForm extends Component {
     this.handleSettingsChange = this.handleSettingsChange.bind(this)
     this.handleUpload = this.handleUpload.bind(this)
     this.uploadSize = this.uploadSize.bind(this)
+    this.handleSaveItem = this.handleSaveItem.bind(this)
   }
 
   handleChange(e) {
@@ -158,9 +161,17 @@ export default class MediaGalleryForm extends Component {
     }
   }
 
+  handleSaveItem(id, item) {
+    const caption_lookup = data.settings.caption_lookup || {}
+    caption_lookup[id] = item
+    this.handleSettingsChange('caption_lookup', caption_lookup)
+    this.setState({ edit_image_id: null })
+  }
+
   render() {
     const { data } = this.props
-    const { image_order, image_lookup, thumbnail_lookup } = data.settings
+    const { image_order, image_lookup, thumbnail_lookup, caption_lookup } = data.settings
+    const { loading, edit_image_id } = this.state
     // console.log(data)
     return (
       <div className='galleryForm'>
@@ -170,38 +181,61 @@ export default class MediaGalleryForm extends Component {
           mime="*/*"
           onChange={this.handleUpload}
         />
-        {this.state.loading && <Loader />}
+        {loading && <Loader />}
         {image_order && image_order.length &&
           <ReactSortable
+            className='galleryList'
             list={image_order.map(id => ({ id }))}
             setList={new_order => this.handleOrderChanged(new_order)}
           >
             {image_order.map(image_id => (
-              <GalleryImageForm
+              <GalleryListItem
                 id={image_id}
                 key={image_id}
                 image={image_lookup[image_id]}
                 thumbnail={thumbnail_lookup[image_id]}
+                onClick={e => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  this.setState({ edit_image_id: image_id })
+                }}
               />
             ))}
           </ReactSortable>
         }
+        {edit_image_id &&
+          <GalleryImageForm
+            id={edit_image_id}
+            initalData={initialCaptionData(caption_lookup, edit_image_id)}
+            thumbnail={thumbnail_lookup[edit_image_id]}
+            onSave={this.handleSaveItem}
+          />
+        }
       </div>
     )
   }
 }
 
-const GalleryImageForm = ({ id, key, image, thumbnail }) => {
+const initialCaptionData = (caption_lookup, image_id) => {
+  caption_lookup = caption_lookup || {}
+  const initialData = caption_lookup[image_id] || {}
+  return {
+    ...initialData,
+  }
+}
+
+const GalleryListItem = ({ id, key, image, thumbnail, onClick }) => {
   // console.log(image, thumbnail)
   return (
-    <div>
+    <div className='galleryListItem'>
       {thumbnail
-        ? <img src={thumbnail.url} />
-        : <Loader />
+        ? (
+          <div>
+            <div><img src={thumbnail.url} /></div>
+            <button onClick={onClick}>Edit</button>
+          </div>
+        ) : <Loader />
       }
     </div>
   )
 }
-
-/*
-*/
diff --git a/animism-align/frontend/app/views/media/components/media.formGalleryImage.js b/animism-align/frontend/app/views/media/components/media.formGalleryImage.js
new file mode 100644
index 0000000..1dbf1f2
--- /dev/null
+++ b/animism-align/frontend/app/views/media/components/media.formGalleryImage.js
@@ -0,0 +1,96 @@
+import React, { Component } from 'react'
+
+import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+
+export default class GalleryImageForm extends Component {
+  state = {
+    loaded: false,
+    data: {},
+  }
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+  }
+  componentDidMount() {
+    console.log(this.props)
+    this.setState({
+      loaded: true,
+      data: { ...this.props.initialData },
+    })
+  }
+  handleChange(e) {
+    const { name, value } = e.target
+    this.handleSelect(name, value)
+  }
+  handleSelect(name, value) {
+    this.setState({
+      data: {
+        ...this.state.data,
+        [name]: value,
+      }
+    })
+  }
+  handleSave() {
+    this.props.onSave(this.props.id, this.state.data)
+  }
+  render() {
+    const { thumbnail } = this.props
+    const { loaded, data } = this.state
+    if (!loaded) return <div />
+    console.log(data)
+    return (
+      <div className='modal visible'>
+        <div className='row'>
+          <div>
+            <img src={thumbnail.url} />
+          </div>
+          <div>
+            <TextInput
+              title="Author"
+              name="author"
+              required
+              data={data}
+              onChange={this.handleChange}
+              autoComplete="off"
+            />
+            <TextInput
+              title="Title"
+              name="title"
+              required
+              data={data}
+              onChange={this.handleChange}
+              autoComplete="off"
+            />
+            <TextInput
+              title="Date"
+              name="date"
+              required
+              data={data}
+              onChange={this.handleChange}
+              autoComplete="off"
+            />
+            <TextArea
+              title="Short caption"
+              name="caption"
+              placeholder="Used on inline galleries"
+              data={data}
+              onChange={this.handleChange}
+            />
+            <TextArea
+              title="Long caption"
+              name="long_caption"
+              placeholder="Used on detail views of the item, suitable for longer texts"
+              data={data}
+              onChange={this.handleChange}
+            />
+            <SubmitButton
+              title={"Save"}
+              onClick={this.handleSubmit}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/animism-align/frontend/app/views/media/media.css b/animism-align/frontend/app/views/media/media.css
index 81eae26..1e20f6d 100644
--- a/animism-align/frontend/app/views/media/media.css
+++ b/animism-align/frontend/app/views/media/media.css
@@ -67,3 +67,37 @@
   background: rgba(255,32,64,0.05);
   border: 1px solid #f24;
 }
+
+/* image galleries */
+
+.galleryListItem > div {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+.galleryListItem:nth-child(odd) > div > div {
+  background: #333;
+}
+.galleryListItem:nth-child(even) > div > div {
+  background: #444;
+}
+.galleryListItem > div > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 5rem;
+  height: 5rem;
+  padding: 0.5rem;
+}
+.galleryListItem img {
+  max-height: 100%;
+  cursor: grab;
+  max-width: 100%;
+}
+.galleryListItem button {
+  margin-left: 1rem;
+  background: #000;
+  color: #88d;
+}
\ No newline at end of file