diff options
Diffstat (limited to 'animism-align/frontend/views/paragraph/containers')
4 files changed, 51 insertions, 162 deletions
diff --git a/animism-align/frontend/views/paragraph/containers/paragraph.edit.js b/animism-align/frontend/views/paragraph/containers/paragraph.edit.js deleted file mode 100644 index ce1b404..0000000 --- a/animism-align/frontend/views/paragraph/containers/paragraph.edit.js +++ /dev/null @@ -1,53 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' -import { connect } from 'react-redux' - -import { history } from '../../../store' -import actions from '../../../actions' - -import { Loader } from '../../../common' - -import GraphForm from '../components/graph.form' - -class GraphEdit extends Component { - componentDidMount() { - console.log(this.props.match.params.id) - actions.graph.show(this.props.match.params.id) - } - - handleSubmit(data) { - actions.graph.update(data) - .then(response => { - // response - console.log(response) - history.push('/' + data.path) - }) - } - - render() { - const { show } = this.props.graph - if (show.loading || !show.res) { - return ( - <div className='form'> - <Loader /> - </div> - ) - } - return ( - <GraphForm - data={show.res} - onSubmit={this.handleSubmit.bind(this)} - /> - ) - } -} - -const mapStateToProps = state => ({ - graph: state.graph, -}) - -const mapDispatchToProps = dispatch => ({ - // searchActions: bindActionCreators({ ...searchActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(GraphEdit) diff --git a/animism-align/frontend/views/paragraph/containers/paragraph.index.js b/animism-align/frontend/views/paragraph/containers/paragraph.index.js deleted file mode 100644 index 35c2d82..0000000 --- a/animism-align/frontend/views/paragraph/containers/paragraph.index.js +++ /dev/null @@ -1,53 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import { Loader } from '../../../common' -import actions from '../../../actions' -// import * as uploadActions from './upload.actions' - -class GraphIndex extends Component { - componentDidMount() { - actions.graph.index() - } - render() { - const { index } = this.props - // console.log(this.props) - if (!index.order) { - return ( - <div className='graphIndex'> - <Loader /> - </div> - ) - } - // console.log(state) - return ( - <div className='graphIndex'> - <div> - <b>welcome, swimmer</b> - <Link to='/index/new'>+ new project</Link> - </div> - {index.order.map(id => { - const graph = index.lookup[id] - return ( - <div key={id}> - <Link to={'/' + graph.path}>{graph.title}</Link> - <Link to={'/index/' + id + '/edit'}>{'edit project'}</Link> - </div> - ) - })} - </div> - ) - } -} - -const mapStateToProps = state => ({ - index: state.graph.index, -}) - -const mapDispatchToProps = dispatch => ({ - // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(GraphIndex) diff --git a/animism-align/frontend/views/paragraph/containers/paragraph.new.js b/animism-align/frontend/views/paragraph/containers/paragraph.new.js deleted file mode 100644 index be96bf5..0000000 --- a/animism-align/frontend/views/paragraph/containers/paragraph.new.js +++ /dev/null @@ -1,44 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' -import { connect } from 'react-redux' - -import { history } from '../../../store' -import actions from '../../../actions' - -import GraphForm from '../components/graph.form' - -class GraphNew extends Component { - handleSubmit(data) { - console.log(data) - actions.graph.create(data) - .then(res => { - console.log(res) - if (res.res && res.res.id) { - history.push('/' + res.res.path) - } - }) - .catch(err => { - console.error('error') - }) - } - - render() { - return ( - <GraphForm - isNew - data={{}} - onSubmit={this.handleSubmit.bind(this)} - /> - ) - } -} - -const mapStateToProps = state => ({ - graph: state.graph, -}) - -const mapDispatchToProps = dispatch => ({ - // searchActions: bindActionCreators({ ...searchActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(GraphNew) diff --git a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js index deeb347..1361205 100644 --- a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js +++ b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js @@ -5,6 +5,7 @@ import { connect } from 'react-redux' import actions from '../../../actions' import { ParagraphElementLookup } from '../components/paragraphTypes' +import ParagraphForm from '../components/paragraph.form' const floatLT = (a,b) => ((a*10|0) < (b*10|0)) const floatLTE = (a,b) => ((a*10|0) === (b*10|0) || floatLT(a,b)) @@ -16,19 +17,30 @@ class ParagraphList extends Component { paragraphs: [], currentParagraph: -1, currentAnnotation: -1, + selectedParagraph: null, + selectedParagraphOffset: 0, } + constructor(props) { super(props) - this.onAnnotationClick = this.onAnnotationClick.bind(this) - this.onParagraphDoubleClick = this.onParagraphDoubleClick.bind(this) + this.handleAnnotationClick = this.handleAnnotationClick.bind(this) + this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this) + this.handleCloseParagraphForm = this.handleCloseParagraphForm.bind(this) + this.updateSelectedParagraph = this.updateSelectedParagraph.bind(this) } + componentDidMount() { this.build() } + componentDidUpdate(prevProps) { + if (this.props.paragraph !== prevProps.paragraph) { + this.build() + } if (this.props.audio.play_ts === prevProps.audio.play_ts) return this.setCurrentParagraph() } + setCurrentParagraph() { const { play_ts } = this.props.audio const insideParagraph = this.state.paragraphs.some(paragraph => { @@ -45,6 +57,7 @@ class ParagraphList extends Component { }) } } + setCurrentAnnotation(paragraph, play_ts) { const { id: currentParagraph, annotations } = paragraph let currentAnnotation @@ -62,6 +75,7 @@ class ParagraphList extends Component { } this.setState({ currentParagraph, currentAnnotation }) } + build() { const { order: annotationOrder, lookup: annotationLookup } = this.props.annotation const { lookup: paragraphLookup } = this.props.paragraph @@ -104,27 +118,44 @@ class ParagraphList extends Component { } }) for (let i = 0; i < (paragraphs.length - 1); i++) { - // console.log(paragraphs[i].end_ts) if (!paragraphs[i].end_ts) { paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1 } } - // console.log(paragraphs) this.setState({ paragraphs }) } - onAnnotationClick(e, paragraph, annotation){ + + handleAnnotationClick(e, paragraph, annotation){ actions.audio.seek(annotation.start_ts) } - onParagraphDoubleClick(e, paragraph) { - // + handleParagraphDoubleClick(e, paragraph) { + console.log(e.target.parentNode) + let paragraphNode = e.target + if (!paragraphNode.classList.contains('paragraph')) { + paragraphNode = paragraphNode.parentNode + } + this.setState({ + selectedParagraph: { ...paragraph }, + selectedParagraphOffset: paragraphNode.offsetTop + }) + } + updateSelectedParagraph(selectedParagraph) { + this.setState({ selectedParagraph }) } + handleCloseParagraphForm() { + this.setState({ selectedParagraph: null }) + } + render() { const { media } = this.props - const { paragraphs, currentParagraph, currentAnnotation } = this.state + const { paragraphs, selectedParagraph, selectedParagraphOffset, currentParagraph, currentAnnotation } = this.state return ( <div className='paragraphs'> <div className='content'> {paragraphs.map(paragraph => { + if (selectedParagraph && selectedParagraph.id === paragraph.id) { + paragraph = selectedParagraph + } if (paragraph.type in ParagraphElementLookup) { const ParagraphElement = ParagraphElementLookup[paragraph.type] return ( @@ -132,16 +163,24 @@ class ParagraphList extends Component { key={paragraph.id} paragraph={paragraph} media={media} - selectedParagraph={paragraph.id === currentParagraph} - selectedAnnotation={paragraph.id === currentParagraph && currentAnnotation} - onAnnotationClick={this.onAnnotationClick} - onDoubleClick={this.onParagraphDoubleClick} + currentParagraph={paragraph.id === currentParagraph} + currentAnnotation={paragraph.id === currentParagraph && currentAnnotation} + onAnnotationClick={this.handleAnnotationClick} + onDoubleClick={this.handleParagraphDoubleClick} /> ) } else { return <div key={paragraph.id}>{'(waiting to implement' + paragraph.type + ')'}</div> } })} + {selectedParagraph && + <ParagraphForm + paragraph={selectedParagraph} + onUpdate={this.updateSelectedParagraph} + onClose={this.handleCloseParagraphForm} + y={selectedParagraphOffset} + /> + } </div> </div> ) |