finalize singleImage component (#14)

client/jsx/editor/DynamicEditor.jsx

@@ -1,10 +1,12 @@
 import React from 'react'
-import { DefaultEditor, EventsCalendar } from './editor-types/EditorTypes.js'
-import ItemTypes from './editor-types/ItemTypes.js'
+import { DefaultEditor, EventsCalendar, SingleImage } from './editor-types/EditorTypes'
+import ItemTypes from './editor-types/ItemTypes'
 import { DragSource } from 'react-dnd'
 
 const dynamicEditorTypes = {
-	DefaultEditor, EventsCalendar
+	DefaultEditor,
+	EventsCalendar,
+	SingleImage
 }
 
 const dynamicEditorSource = {

client/jsx/editor/EditorContainer.jsx

@@ -19,7 +19,7 @@ class EditorContainer extends React.Component {
 	constructor() {
 		super()
 
-		autoBind(this, 
+		autoBind(this,
 			'createEmail',
 			'saveToDB',
 			'getEmailContents',
@@ -77,6 +77,7 @@ class EditorContainer extends React.Component {
 
 	componentWillUnmount () {
 		window.removeEventListener('toggleVisible', this.toggleVisible)
+		window.removeEventListener('clearImageIndexURL', this.clearImageIndexURL)
 	}
 
 	componentDidUpdate() {
@@ -86,7 +87,7 @@ class EditorContainer extends React.Component {
 	addEditorToContainer(editorNames) {
 		// set default values for different component types when adding to editorContainer
 		const insertHTMLString = ['DefaultEditor']
-		const insertArray = ['EventsCalendar']
+		const insertArray = ['EventsCalendar', 'SingleImage']
 		let content
 
 		editorNames.forEach(currentEditor => {
@@ -117,7 +118,6 @@ class EditorContainer extends React.Component {
 			}
 		})
 		.then((response) => {
-			console.log(response.data)
 			this.setState({categories: response.data.categories})
 		})
 		.catch(err => {
@@ -156,7 +156,6 @@ class EditorContainer extends React.Component {
 	}
 
 	updateContentValue(content, index) {
-		console.log(content)
 		this.setState((state) => {
 			state.contents[index].content = content
 		})
@@ -277,7 +276,7 @@ class EditorContainer extends React.Component {
 	}
 
 	clearImageIndexURL() {
-		this.setState({ imageIndex: null, imageURL: null})
+		this.setState({ imageIndex: null, imageURL: null })
 	}
 
 	filterComponentTitles() {

client/jsx/editor/editor-types/DefaultEditor.jsx

@@ -602,5 +602,4 @@ DefaultEditor.propTypes = {
 	updateContentValue: React.PropTypes.func
 }
 
-// export default DragSource(ItemTypes.DEFAULTEDITOR, defaultEditorSource, collect)(DefaultEditor)
 export default DefaultEditor

client/jsx/editor/editor-types/EditorTypes.js

@@ -1,7 +1,9 @@
 import DefaultEditor from './DefaultEditor'
 import EventsCalendar from './EventsCalendar'
+import SingleImage from './SingleImage'
 
 export {
 	DefaultEditor,
-	EventsCalendar
+	EventsCalendar,
+	SingleImage
 }

client/jsx/editor/editor-types/SingleImage.jsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import autoBind from 'react-autobind'
+
+class SingleImage extends React.Component {
+	constructor() {
+		super()
+
+		this.state = {}
+
+		autoBind(this,
+			'addCaption',
+			'removeCaption',
+			'getImageMeta',
+			'showGallery',
+			'onChangeCaption'
+		)
+	}
+
+	componentWillReceiveProps (nextProps) {
+		//sets the image url and state from gallery, for new images
+		if(nextProps.imageURL && this.props.imageIndex === this.props.index) {
+			this.getImageMeta(nextProps.imageURL)
+			this.props.updateContentValue({imageURL: nextProps.imageURL}, this.props.index)
+		}
+		// these checks make sure adding a caption doesnt blow out the image 
+		// by setting null values to top level state
+		// and vice versa
+		if(nextProps.content.imageURL) {
+			this.getImageMeta(nextProps.content.imageURL)
+			this.setState({imageURL: nextProps.content.imageURL})
+		}
+		if(nextProps.content.caption) {
+			this.setState({caption: nextProps.content.caption, captionVisible: true})
+		}
+	}
+
+	addCaption() {
+		if(!this.state.imageURL) {
+			window.alert('Please add an image first')
+		}
+		else if(this.state.caption && this.state.caption.length > 0) {
+			return false
+		}
+		else {
+			console.log('adding caption')
+			this.setState({captionVisible: true})
+			this.props.updateContentValue({ caption: 'Enter caption', imageURL: this.state.imageURL }, this.props.index)
+		}
+	}
+
+	removeCaption() {
+		this.props.updateContentValue({caption: null, imageURL: this.state.imageURL}, this.props.index)
+		this.setState({captionVisible: false, caption: null})
+	}
+
+	onChangeCaption(e) {
+		const caption = e.target.value
+		this.setState({ caption })
+		this.props.updateContentValue({ caption, imageURL: this.state.imageURL}, this.props.index)
+	}
+
+	showGallery(e) {
+		e.preventDefault()
+		this.props.setImageIndex(this.props.index)
+
+		const isImageGalleryModalVisible = new CustomEvent('toggleVisible', {
+			detail: 'isImageGalleryModalVisible'
+		})
+		window.dispatchEvent(isImageGalleryModalVisible)
+	}
+
+	getImageMeta(imageURL) {
+		const img = new Image()
+		let self = this
+		img.addEventListener('load', function() {
+			self.setState({height: this.height, width: this.width})
+		})
+		img.src = imageURL
+	}
+
+	render() {
+		const showCaption = this.state.captionVisible ? 
+		<div className="singleImage__caption">
+			<label htmlFor="">Image Caption:</label>
+			<input type="text" value={this.props.content.caption} onChange={this.onChangeCaption} className="input"/>
+		</div>
+		: null
+		const showMeta = this.props.content.imageURL ? 
+		<div className="singleImage__meta">
+			<p>Width: {this.state.width}</p>
+			<p>Height: {this.state.height}</p>
+		</div> : null
+		const showRemoveButton = this.state.captionVisible ? <button className="button" onClick={this.removeCaption}>Remove Caption</button> : null
+
+		return(
+			<div className="singleImage box">
+				<select name="componentTitle" className="select" value={this.props.componentTitle}>
+					{this.props.componentTitles.map((title, i) => {
+						return <option key={i} value={title.title}>{title.title}</option>
+					})}
+				</select>
+				<button className="button" onClick={this.showGallery}>Choose Image</button>
+				<button className="button" onClick={this.addCaption}>Add Caption</button>
+				{showRemoveButton}
+				<img src={this.props.content.imageURL} className="image singleImage__image" alt=""/>
+				{showMeta}
+				{showCaption}
+			</div>
+		)
+	}
+}
+
+SingleImage.propTypes = {
+	content: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]),
+	componentTitles: React.PropTypes.array,
+	componentTitle: React.PropTypes.string,
+	updateContentValue: React.PropTypes.func,
+	setImageIndex: React.PropTypes.func,
+	index: React.PropTypes.number,
+	imageIndex: React.PropTypes.number,
+	imageURL: React.PropTypes.string
+}
+
+export default SingleImage

client/jsx/modals/ImageGalleryModal.jsx

@@ -112,7 +112,9 @@ class ImageGalleryModal extends React.Component {
 		const isImageGalleryModalVisible = new CustomEvent('toggleVisible', {
 			detail: 'isImageGalleryModalVisible'
 		})
+		const clearImageIndexURL = new CustomEvent('clearImageIndexURL')
 
+		window.dispatchEvent(clearImageIndexURL)
 		window.dispatchEvent(isImageGalleryModalVisible)
 	}
 

client/sass/components/_components.sass

@@ -10,4 +10,5 @@
 @import 'loginForm'
 @import 'imageSizeModal'
 @import 'imageSizes'
-@import 'eventsCalendar'
+@import 'eventsCalendar'
+@import 'singleImage'

client/sass/components/_singleImage.sass

@@ -0,0 +1,6 @@
+.singleImage
+	// display: flex
+
+.singleImage__image
+	max-width: 150px
+	max-height: 150px