Thumbnail update code for features.

BrownBook · Nov 8, 2017 · 982bc1d · 982bc1d
1 parent d1da4e8
commit 982bc1d
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 3 deletions.
diff --git a/javascript/Feature/Feature.jsx b/javascript/Feature/Feature.jsx
@@ -7,6 +7,7 @@ import FeatureForm from './FeatureForm'
 import Message from '../AddOn/Message'
 import Waiting from '../AddOn/Waiting'
 import SampleEntry from './SampleEntry'
+import ThumbnailOverlay from '../EntryList/ThumbnailOverlay'
 import './style.css'
 
 /* global $ */
@@ -17,9 +18,12 @@ export default class Feature extends Component {
     this.state = {
       message: null,
       currentFeature: null,
+      currentEntry: null,
       currentKey: null,
+      currentEntryKey: null,
       featureList: [],
       loading: true,
+      thumbnailOverlay: false,
       stories: [],
     }
     this.addRow = this.addRow.bind(this)
@@ -30,6 +34,10 @@ export default class Feature extends Component {
     this.clearStory = this.clearStory.bind(this)
     this.updateTitle = this.updateTitle.bind(this)
     this.clearFeature = this.clearFeature.bind(this)
+    this.thumbnailForm = this.thumbnailForm.bind(this)
+    this.closeOverlay = this.closeOverlay.bind(this)
+    this.updateEntry = this.updateEntry.bind(this)
+    this.updateImage = this.updateImage.bind(this)
   }
 
   componentDidMount() {
@@ -69,6 +77,24 @@ export default class Feature extends Component {
     })
   }
 
+  updateImage(image) {
+    const story = this.state.currentEntry.story
+    story.thumbnail = image
+    this.updateEntry(story)
+  }
+
+  updateEntry(story) {
+    let currentEntry = this.state.currentEntry
+    currentEntry.story = story
+
+    const currentFeature = this.state.currentFeature
+    currentFeature.entries[this.state.currentEntryKey] = currentEntry
+
+    const featureList = this.state.featureList
+    featureList[this.state.currentKey] = currentFeature
+    this.setState({currentEntry, currentFeature, featureList})
+  }
+
   loadCurrentFeature(key) {
     const feature = this.state.featureList[key]
     if (feature.entries === null || feature.entries === 'null') {
@@ -81,6 +107,24 @@ export default class Feature extends Component {
     this.setState({currentFeature: feature, currentKey: key,})
   }
 
+  unlockBody() {
+    $('body').css('overflow', 'inherit')
+  }
+
+  closeOverlay() {
+    this.setState(
+      {thumbnailOverlay: false, currentEntry: null, currentEntryKey: null}
+    )
+    this.unlockBody()
+  }
+
+  thumbnailForm(key) {
+    const entry = this.state.currentFeature.entries[key]
+    this.setState(
+      {thumbnailOverlay: true, currentEntryKey: key, currentEntry: entry}
+    )
+  }
+
   fillEntries(feature) {
     this.stackEntries(feature)
     for (let i = 0; i < 4; i++) {
@@ -214,6 +258,7 @@ export default class Feature extends Component {
     } else if (this.state.currentKey !== null) {
       return <FeatureForm
         stories={this.state.stories}
+        thumbnailForm={this.thumbnailForm}
         feature={this.state.currentFeature}
         clearStory={this.clearStory}
         updateTitle={this.updateTitle}
@@ -235,14 +280,22 @@ export default class Feature extends Component {
       backToList = <button className="btn btn-default" onClick={this.clearFeature}>
         <i className="fa fa-list"></i>Back to list</button>
     }
+
+    let story
+    if (this.state.currentEntry !== null) {
+      story = this.state.currentEntry.story
+    }
     return (
       <div className="feature-admin">
-        {this.message()}
+        <ThumbnailOverlay
+          thumbnailOverlay={this.state.thumbnailOverlay}
+          updateEntry={this.updateEntry}
+          updateImage={this.updateImage}
+          entry={story}
+          close={this.closeOverlay}/> {this.message()}
         <div className="buttons">
           <button className="btn btn-primary mr-1" onClick={this.addRow}>
             <i className="fa fa-plus"></i>&nbsp;Add feature set</button>
-          <a href="./stories/Listing" className="btn btn-default mr-1">
-            <i className="fa fa-list"></i>&nbsp;Story list</a>
           {backToList}
         </div>
         {this.getListing()}

diff --git a/javascript/Feature/FeatureDisplay.js b/javascript/Feature/FeatureDisplay.js
@@ -44,6 +44,7 @@ const FeatureDisplay = (props) => {
         applyStory={applyStory.bind(null, i)}
         clearStory={clearStory.bind(null, i)}
         stopMove={stopMove}
+        thumbnailForm={props.thumbnailForm.bind(null, i)}
         moveThumb={moveThumb.bind(null, i)}
         holdThumb={holdThumb.bind(null, i)}/>
     )
@@ -64,6 +65,7 @@ FeatureDisplay.propTypes = {
   clearStory: PropTypes.func,
   holdThumb: PropTypes.func,
   moveThumb: PropTypes.func,
+  thumbnailForm: PropTypes.func,
   stopMove: PropTypes.func
 }
 

diff --git a/javascript/Feature/FeatureForm.js b/javascript/Feature/FeatureForm.js
@@ -163,6 +163,7 @@ class FeatureForm extends React.Component {
             applyStory={this.applyStory}
             clearStory={this.props.clearStory}
             moveThumb={this.moveThumb}
+            thumbnailForm={this.props.thumbnailForm}
             holdThumb={this.holdThumb}
             stopMove={this.stopMove}/>
         </div>
@@ -174,6 +175,7 @@ class FeatureForm extends React.Component {
 FeatureForm.propTypes = {
   feature: PropTypes.object,
   updateTitle: PropTypes.func,
+  thumbnailForm: PropTypes.func,
   update: PropTypes.func,
   clearStory: PropTypes.func,
   srcHttp: PropTypes.string

diff --git a/javascript/Feature/style.css b/javascript/Feature/style.css
@@ -40,3 +40,15 @@ ul.format-selection li img {
   position: relative;
   margin-bottom : 1em;
 }
+
+.upload-button {
+  opacity: .8;
+}
+
+.dropzone {
+  border: 3px dotted #e3e3e3;
+  width : 100%;
+  height : 190px;
+  padding : 20px;
+  margin-bottom: 10px;
+}