diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/app/views/index/components/graph.form.js | 46 | ||||
| -rw-r--r-- | frontend/site/index.js | 2 | ||||
| -rw-r--r-- | frontend/site/viewer/viewer.container.js | 25 |
3 files changed, 58 insertions, 15 deletions
diff --git a/frontend/app/views/index/components/graph.form.js b/frontend/app/views/index/components/graph.form.js index 4b3a7af..5710beb 100644 --- a/frontend/app/views/index/components/graph.form.js +++ b/frontend/app/views/index/components/graph.form.js @@ -10,6 +10,9 @@ const newGraph = () => ({ title: '', username: session('username'), description: '', + settings: { + custom_header: "", + } }) export default class GraphForm extends Component { @@ -20,6 +23,14 @@ export default class GraphForm extends Component { errorFields: new Set([]), } + constructor(props){ + super(props) + this.handleChange = this.handleChange.bind(this) + this.handleSettingsChange = this.handleSettingsChange.bind(this) + this.handleSettingsSelect = this.handleSettingsSelect.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + componentDidMount() { const { data, isNew } = this.props const title = isNew ? 'new project' : 'editing ' + data.title @@ -54,6 +65,23 @@ export default class GraphForm extends Component { }) } + handleSettingsChange(e) { + const { name, value } = e.target + this.handleSettingsSelect(name, value) + } + + handleSettingsSelect(name, value) { + this.setState({ + data: { + ...this.state.data, + settings: { + ...this.state.data.settings, + [name]: value, + } + } + }) + } + handleSelect(name, value) { const { errorFields } = this.state if (errorFields.has(name)) { @@ -73,7 +101,7 @@ export default class GraphForm extends Component { const { isNew, onSubmit } = this.props const { data } = this.state const requiredKeys = "title username path description".split(" ") - const validKeys = "title username path description".split(" ") + const validKeys = "title username path description settings".split(" ") const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {}) const errorFields = requiredKeys.filter(key => !validData[key]) if (errorFields.length) { @@ -104,7 +132,7 @@ export default class GraphForm extends Component { required data={data} error={errorFields.has('path')} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> <LabelDescription> @@ -118,7 +146,7 @@ export default class GraphForm extends Component { required data={data} error={errorFields.has('title')} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> <TextInput @@ -127,18 +155,24 @@ export default class GraphForm extends Component { required data={data} error={errorFields.has('username')} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} autoComplete="off" /> <TextArea title="Description" name="description" data={data} - onChange={this.handleChange.bind(this)} + onChange={this.handleChange} + /> + <TextArea + title="Header tags" + name="custom_header" + data={data.settings} + onChange={this.handleSettingsChange} /> <SubmitButton title={submitTitle} - onClick={this.handleSubmit.bind(this)} + onClick={this.handleSubmit} /> {!!errorFields.size && <label> diff --git a/frontend/site/index.js b/frontend/site/index.js index 337d362..6d80528 100644 --- a/frontend/site/index.js +++ b/frontend/site/index.js @@ -4,7 +4,7 @@ import { Provider } from 'react-redux' import './site.css' -import App from 'site/app' +import App from './APP_TARGET' import { store, history } from 'site/store' diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js index 52eb114..7d8a71b 100644 --- a/frontend/site/viewer/viewer.container.js +++ b/frontend/site/viewer/viewer.container.js @@ -15,6 +15,7 @@ class ViewerContainer extends Component { page: {}, bounds: { width: window.innerWidth, height: window.innerHeight }, roadblock: false, + unloaded: false, popups: {}, hidden: {}, time: 0, @@ -36,6 +37,11 @@ class ViewerContainer extends Component { if (this.props.graph !== prevProps.graph || this.props.location.pathname !== prevProps.location.pathname) { this.load() } + if (this.props.interactive && (this.props.interactive !== prevProps.interactive)) { + this.setState({ roadblock: false }) + this.props.audio.player.playPage(this.state.page) + this.resetTimer(this.state.page) + } } componentWillUnmount() { @@ -44,14 +50,18 @@ class ViewerContainer extends Component { } load() { - const { graph_name, page_name } = this.props.match.params + const { page_name } = this.props.match.params + const { pages, home_page, path: graph_name } = this.props.graph const page_path = ["", graph_name, page_name].join('/') - const { pages, home_page } = this.props.graph + // if ((!page_path in pages) || page_name === 'index.html') { + // this.setState({ unloaded: true }) + // return + // } const page = pages[page_path] || pages[home_page] if (!this.props.interactive && hasAutoplay(page)) { - this.setState({ page, popups: {}, hidden: {}, roadblock: true }) + this.setState({ page, popups: {}, hidden: {}, roadblock: true, unloaded: false }) } else { - this.setState({ page, popups: {}, hidden: {}, roadblock: false }) + this.setState({ page, popups: {}, hidden: {}, roadblock: false, unloaded: false }) actions.site.interact() this.props.audio.player.playPage(page) this.resetTimer(page) @@ -144,6 +154,9 @@ class ViewerContainer extends Component { render() { const { page, audio, popups, hidden, time } = this.state + if (this.state.unloaded) { + return null + } if (this.state.roadblock) { return this.renderRoadblock() } @@ -193,11 +206,7 @@ class ViewerContainer extends Component { } removeRoadblock() { - console.log("remove roadblock") actions.site.interact() - this.setState({ roadblock: false }) - this.props.audio.player.playPage(this.state.page) - this.resetTimer(this.state.page) } renderRoadblock() { |