diff options
Diffstat (limited to 'frontend/app/views/tile/components/tile.form.js')
| -rw-r--r-- | frontend/app/views/tile/components/tile.form.js | 879 |
1 files changed, 879 insertions, 0 deletions
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js new file mode 100644 index 0000000..49b34b1 --- /dev/null +++ b/frontend/app/views/tile/components/tile.form.js @@ -0,0 +1,879 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' +import { Link } from 'react-router-dom' + +import actions from 'app/actions' +import { session } from 'app/session' + +import { + TextInput, NumberInput, ColorInput, Slider, + Select, LabelDescription, TextArea, Checkbox, + SubmitButton, Loader } from 'app/common' +import AudioSelect from 'app/views/audio/components/audio.select' +import { preloadImage, preloadVideo } from 'app/utils' + +import * as tileActions from '../../tile/tile.actions' + +const SELECT_TYPES = [ + "image", "text", "video", "link", "script", +].map(s => ({ name: s, label: s })) + +const ALIGNMENTS = [ + "top_left", "top_center", "top_right", + "center_left", "center_center", "center_right", + "bottom_left", "bottom_center", "bottom_right", +].map(align => ({ + name: align, + label: align === 'center_center' + ? 'center' + : align.replace('_', ' ') + })) + +const REQUIRED_KEYS = { + image: ['url'], + video: ['url'], + text: ['content'], + link: [], + script: [], +} + +const IMAGE_TILE_STYLES = [ + 'tile', 'cover', 'contain', 'contain no-repeat' +].map(style => ({ name: style, label: style })) + +const VIDEO_STYLES = [ + 'normal', 'cover', 'contain', +].map(style => ({ name: style, label: style })) + +const TEXT_FONT_FAMILIES = [ + 'sans-serif', 'serif', 'fantasy', 'monospace', 'cursive', +].map(style => ({ name: style, label: style })) + +const TEXT_FONT_STYLES = [ + 'normal', 'bold', 'italic', 'bold-italic', +].map(style => ({ name: style, label: style })) + +const CURSORS = [ + { name: 'none', label: 'None', }, + { name: 'hand_up', label: 'Up', }, + { name: 'hand_down', label: 'Down', }, + { name: 'hand_left', label: 'Left', }, + { name: 'hand_right', label: 'Right', }, + { name: 'unclickable', label: 'Unclickable', }, +] + +const NO_LINK = 0 +const EXTERNAL_LINK = -1 +const PAGE_LIST_TOP_OPTIONS = [ + { name: NO_LINK, label: 'No link' }, + { name: EXTERNAL_LINK, label: 'External link' }, + { name: -2, label: '──────────', disabled: true }, +] + +// target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True) +// https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg + +const newImage = (data) => ({ + settings: { + ...newPosition(), + is_tiled: false, + tile_style: 'tile', + url: "", + external_link_url: "", + cursor: 'hand_up', + }, + type: 'image', + target_page_id: null, + ...data, +}) + +const newVideo = (data) => ({ + settings: { + ...newPosition(), + video_style: 'cover', + url: "", + external_link_url: "", + cursor: 'none', + muted: false, + loop_style: false, + autoadvance: false, + loop_section: false, + loop_start: 0, + loop_end: 0, + }, + type: 'video', + target_page_id: null, + ...data, +}) + +const newText = (data) => ({ + settings: { + ...newPosition(), + content: "", + font_family: 'sans-serif', + font_size: 16, + font_style: 'normal', + font_color: '#dddddd', + background_color: 'transparent', + width: 0, + height: 0, + units: 'px', + external_link_url: "", + cursor: 'hand_up', + }, + type: 'text', + target_page_id: null, + ...data, +}) + +const newLink = (data) => ({ + settings: { + ...newPosition({ width: 100, height: 100, }), + external_link_url: "", + cursor: 'hand_up', + units: 'px', + }, + type: 'link', + target_page_id: null, + ...data, +}) + +const newScript = (data) => ({ + settings: { + ...newPosition({ width: 100, height: 100, }), + }, + type: 'script', + ...data, +}) + +const newPosition = (data) => ({ + x: 0, y: 0, + width: 0, height: 0, + rotation: 0, scale: 1, + opacity: 1, + units: false, + align: "center_center", + has_audio: false, + audio_on_click_id: 0, + audio_on_hover_id: 0, + navigate_when_audio_finishes: false, + ...data, +}) + +const TYPE_CONSTRUCTORS = { + image: newImage, + video: newVideo, + text: newText, + link: newLink, + script: newScript, +} + +class TileForm extends Component { + state = { + title: "", + submitTitle: "", + errorFields: new Set([]), + modified: false, + pageList: [], + } + + constructor(props){ + super(props) + this.handleChange = this.handleChange.bind(this) + this.handleSelect = this.handleSelect.bind(this) + this.handleSettingsChange = this.handleSettingsChange.bind(this) + this.handleSettingsSelect = this.handleSettingsSelect.bind(this) + this.handleAlignment = this.handleAlignment.bind(this) + this.handleImageChange = this.handleImageChange.bind(this) + this.handleVideoChange = this.handleVideoChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + this.handleDelete = this.handleDelete.bind(this) + } + + componentDidMount() { + const { graph, page, isNew, initialData, sortOrder } = this.props + const title = isNew ? 'new tile' : 'editing tile' + const submitTitle = isNew ? "Create Tile" : "Save Changes" + this.setState({ + title, + submitTitle, + errorFields: new Set([]), + }) + const { pages } = graph.show.res + const linkPages = initialData ? pages.filter(page => page.id !== initialData.id) : pages + let pageList = [ + ...PAGE_LIST_TOP_OPTIONS, + ...linkPages.map(page => ({ name: page.id, label: page.path })) + ] + this.setState({ pageList }) + if (isNew) { + const newTile = newImage({ + id: "new", + graph_id: graph.show.res.id, + page_id: page.show.res.id, + sort_order: sortOrder, + }) + this.props.tileActions.updateTemporaryTile(newTile) + } else { + this.props.tileActions.updateTemporaryTile({ ...initialData }) + } + } + + componentDidUpdate(prevProps) { + if (!this.props.isNew && this.props.initialData !== prevProps.initialData) { + this.handleSubmit() + this.props.tileActions.updateTemporaryTile({ ...this.props.initialData }) + this.setState({ + errorFields: new Set([]), + }) + } + } + + componentWillUnmount() { + // if the item has changed, save before we close the form! + if (!this.props.isNew && this.state.modified) { + this.handleSubmit() + } + } + + handleChange(e) { + const { name, value } = e.target + this.clearErrorField(name) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + [name]: value, + }) + } + + handleTypeChange(type) { + const { graph, page, temporaryTile } = this.props + let newTile = TYPE_CONSTRUCTORS[type]({ + id: temporaryTile.id, + graph_id: temporaryTile.graph_id, + page_id: temporaryTile.page_id, + }) + newTile.settings.align = temporaryTile.settings.align + this.clearErrorField('type') + this.props.tileActions.updateTemporaryTile(newTile) + } + + handleSettingsChange(e) { + const { name, value } = e.target + this.clearErrorField(name) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, + [name]: value, + } + }) + } + + handleSelect(name, value) { + this.clearErrorField(name) + if (name === 'type') { + return this.handleTypeChange(value) + } + if (name === 'target_page_id') { + value = parseInt(value) + } + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + [name]: value, + }) + } + + handleSettingsSelect(name, value) { + this.clearErrorField(name) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, + [name]: value, + } + }) + } + + handleAlignment(name, value) { + this.clearErrorField(name) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, + [name]: value, + x: 0, y: 0, + } + }) + } + + handleImageChange(e) { + const { name, value } = e.target + this.handleSettingsSelect(name, value) + preloadImage(value).then(img => { + // console.log(img) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, + [name]: value, + width: img.naturalWidth, + height: img.naturalHeight, + x: 0, y: 0, + } + }) + }) + } + + handleVideoChange(e) { + const { name, value } = e.target + this.handleSettingsSelect(name, value) + preloadVideo(value).then(video => { + // console.log(img) + this.props.tileActions.updateTemporaryTile({ + ...this.props.temporaryTile, + settings: { + ...this.props.temporaryTile.settings, + [name]: value, + width: video.videoWidth, + height: video.videoHeight, + x: 0, y: 0, + } + }) + }) + } + + clearErrorField(name) { + const { errorFields } = this.state + if (errorFields.has(name)) { + errorFields.delete(name) + this.setState({ + errorFields, + modified: true, + }) + } else if (!this.state.modified) { + this.setState({ + errorFields, + modified: true, + }) + } + } + + handleSubmit(e) { + if (e) e.preventDefault() + const { isNew, temporaryTile, onSubmit, onClose } = this.props + const requiredSettings = REQUIRED_KEYS[temporaryTile.type] + const validKeys = "id graph_id page_id target_page_id type settings".split(" ") + const validData = validKeys.reduce((a,b) => { a[b] = temporaryTile[b]; return a }, {}) + const errorFields = requiredSettings.filter(key => !validData.settings[key]) + if (errorFields.length) { + console.log('error', errorFields, validData) + if (e) { + this.setState({ errorFields: new Set(errorFields) }) + } + } else { + if (isNew) { + // side effect: set username if we're creating a new tile + // session.set('username', data.username) + delete validData.id + } else { + validData.id = temporaryTile.id + } + this.setState({ modified: false }) + console.log('submit', validData) + onSubmit(validData) + // if submitting after switching elements, don't close the form + if (e && onClose) { + onClose() + } + } + } + + handleDelete() { + const { temporaryTile, isNew, onClose } = this.props + if (confirm('Really delete this tile?')) { + actions.tile.destroy(temporaryTile) + .then(() => { + onClose() + }) + } + } + + render() { + const { temporaryTile, isNew } = this.props + const { title, submitTitle, errorFields } = this.state + if (!temporaryTile || !temporaryTile.settings) return <div className='box' /> + return ( + <div className='box'> + <h1>{title}</h1> + <form onSubmit={this.handleSubmit}> + <div className="row selects"> + <Select + name='type' + selected={temporaryTile.type} + options={SELECT_TYPES} + title='' + onChange={this.handleSelect} + /> + <Select + name='align' + selected={temporaryTile.settings.align} + options={ALIGNMENTS} + title='' + onChange={this.handleAlignment} + /> + </div> + + {this.renderPositionInfo()} + + {temporaryTile.type === 'image' + ? this.renderImageForm() + : temporaryTile.type === 'video' + ? this.renderVideoForm() + : temporaryTile.type === 'text' + ? this.renderTextForm() + : temporaryTile.type === 'link' + ? this.renderLinkForm() + : temporaryTile.type === 'script' + ? this.renderScriptForm() + : ""} + + {this.renderHyperlinkForm()} + {this.renderMiscForm()} + {this.renderAudioForm()} + + <div className='row buttons'> + <SubmitButton + title={submitTitle} + onClick={this.handleSubmit} + /> + {!isNew && + <SubmitButton + title={'Delete'} + className='destroy' + onClick={this.handleDelete} + /> + } + </div> + {!!errorFields.size && + <label> + <span></span> + <span>Please add the required fields =)</span> + </label> + } + </form> + </div> + ) + } + + renderPositionInfo() { + const { temporaryTile } = this.props + const { x, y, width, height, rotation, scale } = temporaryTile.settings + return ( + <div className='position'> + {parseInt(x)}{', '} + {parseInt(y)}{' '} + {parseInt(width)}{'x'}{parseInt(height)}{' '} + {rotation === 0 || <span>{parseInt(rotation)}{'\u00B0 '}</span>} + {scale === 1 || <span>{'x'}{scale.toFixed(2)}</span>} + </div> + ) + } + + renderImageForm() { + // const { isNew } = this.props + const { temporaryTile } = this.props + const { errorFields } = this.state + // console.log(temporaryTile.settings) + return ( + <div> + <div className='row imageUrl'> + {temporaryTile.settings.url && <div className='thumb'><img src={temporaryTile.settings.url} /></div>} + <TextInput + title="" + placeholder='http://' + name="url" + required + data={temporaryTile.settings} + error={errorFields.has('url')} + onChange={this.handleImageChange} + autoComplete="off" + /> + </div> + <div className='row pair'> + <Checkbox + label="Tiled" + name="is_tiled" + checked={temporaryTile.settings.is_tiled} + onChange={this.handleSettingsSelect} + autoComplete="off" + /> + {temporaryTile.settings.is_tiled && + <Select + name='tile_style' + selected={temporaryTile.settings.tile_style || 'tile'} + options={IMAGE_TILE_STYLES} + title='' + onChange={this.handleSettingsSelect} + /> + } + </div> + </div> + ) + } + + renderVideoForm() { + // const { isNew } = this.props + const { temporaryTile } = this.props + const { errorFields } = this.state + // console.log(temporaryTile.settings) + return ( + <div> + <div className='row imageUrl'> + <TextInput + title="" + placeholder='http://' + name="url" + required + data={temporaryTile.settings} + error={errorFields.has('url')} + onChange={this.handleVideoChange} + autoComplete="off" + /> + </div> + <div className='row pair'> + <Select + name='video_style' + selected={temporaryTile.settings.video_style || 'none'} + options={VIDEO_STYLES} + title='' + onChange={this.handleSettingsSelect} + /> + <Checkbox + label="Loop" + name="loop" + checked={temporaryTile.settings.loop} + onChange={this.handleSettingsSelect} + autoComplete="off" + /> + </div> + <div className='row pair'> + <Checkbox + label="Muted" + name="muted" + checked={temporaryTile.settings.muted} + onChange={this.handleSettingsSelect} + /> + <Checkbox + label="Autoadvance" + name="autoadvance" + checked={temporaryTile.settings.autoadvance} + onChange={this.handleSettingsSelect} + /> + </div> + {temporaryTile.settings.loop && ( + <div className='row'> + <Checkbox + label="Loop section?" + name="loop_section" + checked={temporaryTile.settings.loop_section} + onChange={this.handleSettingsSelect} + /> + </div> + )} + {temporaryTile.settings.loop && temporaryTile.settings.loop_section && ( + <div className='row pair'> + <TextInput + title="From" + placeholder='0:00' + name="loop_start" + data={temporaryTile.settings} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + <TextInput + title="To" + placeholder='0:00' + name="loop_end" + data={temporaryTile.settings} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + </div> + )} + </div> + ) + } + + renderTextForm() { + const { temporaryTile } = this.props + const { errorFields } = this.state + return ( + <div> + <TextArea + title="" + name="content" + required + data={temporaryTile.settings} + error={errorFields.has('content')} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + <div className='row font'> + <Select + title="Font" + name='font_family' + selected={temporaryTile.settings.font_family || 'sans-serif'} + options={TEXT_FONT_FAMILIES} + title='' + onChange={this.handleSettingsSelect} + /> + <NumberInput + title='' + name='font_size' + data={temporaryTile.settings} + min={1} + max={1200} + error={errorFields.has('font_size')} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + <Select + name='font_style' + selected={temporaryTile.settings.font_style || 'normal'} + options={TEXT_FONT_STYLES} + title='' + onChange={this.handleSettingsSelect} + /> + </div> + <ColorInput + title='Text' + name='font_color' + data={temporaryTile.settings} + error={errorFields.has('font_color')} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + <ColorInput + title='BG' + name='background_color' + data={temporaryTile.settings} + error={errorFields.has('background_color')} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + <div className='row pair'> + <NumberInput + title="Width" + name="width" + data={temporaryTile.settings} + min={0} + max={1200} + error={errorFields.has('width')} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + <NumberInput + title="Height" + name="height" + data={temporaryTile.settings} + min={0} + max={1200} + error={errorFields.has('height')} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + </div> + </div> + ) + } + + renderLinkForm() { + const { temporaryTile } = this.props + const { errorFields } = this.state + return ( + <div> + <div className='row pair'> + <NumberInput + title="Width" + name="width" + data={temporaryTile.settings} + min={0} + max={1200} + error={errorFields.has('width')} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + <NumberInput + title="Height" + name="height" + data={temporaryTile.settings} + min={0} + max={1200} + error={errorFields.has('height')} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + </div> + <div className='row pair'> + <TextInput + title="Units" + name="units" + data={temporaryTile.settings} + error={errorFields.has('units')} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + </div> + </div> + ) + } + + renderScriptForm() { + const { temporaryTile } = this.props + const { errorFields } = this.state + return ( + <div> + <TextArea + title="" + name="content" + required + data={temporaryTile.settings} + error={errorFields.has('content')} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + <div> + Scripts will be run on the live site when this page loads. + </div> + </div> + ) + } + + renderHyperlinkForm() { + const { temporaryTile } = this.props + const { pageList } = this.state + const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK + return ( + <div> + <div className={'row selects'}> + <Select + title='' + name='target_page_id' + selected={temporaryTile.target_page_id || NO_LINK} + options={pageList} + onChange={this.handleSelect} + /> + <Select + title='' + name='cursor' + selected={temporaryTile.settings.cursor} + options={CURSORS} + defaultOption="Cursor" + onChange={this.handleSettingsSelect} + /> + </div> + <div> + {isExternalLink && + <TextInput + title="" + placeholder='http://' + name="external_link_url" + data={temporaryTile.settings} + onChange={this.handleSettingsChange} + autoComplete="off" + /> + } + </div> + </div> + ) + } + + renderAudioForm() { + const { temporaryTile } = this.props + return ( + <div> + <Checkbox + label="Add audio events" + name="has_audio" + checked={temporaryTile.settings.has_audio} + onChange={this.handleSettingsSelect} + /> + {temporaryTile.settings.has_audio && ( + <div > + <AudioSelect + title="On click" + name="audio_on_click_id" + selected={temporaryTile.settings.audio_on_click_id} + onChange={this.handleSettingsSelect} + /> + + <Checkbox + label="Navigate when audio finishes" + name="navigate_when_audio_finishes" + checked={temporaryTile.settings.navigate_when_audio_finishes} + onChange={this.handleSettingsSelect} + autoComplete="off" + /> + + <AudioSelect + title="On hover" + name="audio_on_hover_id" + selected={temporaryTile.settings.audio_on_hover_id} + onChange={this.handleSettingsSelect} + /> + </div> + )} + </div> + ) + } + + renderMiscForm() { + const { temporaryTile } = this.props + return ( + <div> + <Slider + title='Opacity' + name='opacity' + value={temporaryTile.settings.opacity} + onChange={this.handleSettingsSelect} + min={0.0} + max={1.0} + step={0.01} + /> + <Slider + title='Scale' + name='scale' + value={temporaryTile.settings.scale} + onChange={this.handleSettingsSelect} + min={0.01} + max={10.0} + step={0.01} + /> + <Slider + title='Rotation' + name='rotation' + value={temporaryTile.settings.rotation} + onChange={this.handleSettingsSelect} + min={-180.0} + max={180.0} + step={1} + type='int' + /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, + page: state.page, + tile: state.tile, + temporaryTile: state.tile.temporaryTile, +}) + +const mapDispatchToProps = dispatch => ({ + tileActions: bindActionCreators({ ...tileActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(TileForm) |