diff options
Diffstat (limited to 'animism-align/frontend/views/paragraph')
4 files changed, 207 insertions, 0 deletions
diff --git a/animism-align/frontend/views/paragraph/components/paragraph.types.js b/animism-align/frontend/views/paragraph/components/paragraph.types.js new file mode 100644 index 0000000..c200a19 --- /dev/null +++ b/animism-align/frontend/views/paragraph/components/paragraph.types.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react' + +import actions from '../../../actions' + +export const Paragraph = ({ paragraph, selectedParagraph, selectedAnnotation, onAnnotationClick, onDoubleClick }) => { + const className = paragraph.type + if (selectedParagraph) className += ' selected' + return ( + <div + className={className} + onDoubleClick={e => onDoubleClick(e, paragraph)} + > + {paragraph.annotations.map(annotation => ( + <span + key={annotation.id} + className={annotation.id === selectedAnnotation ? 'selected' : ''} + onClick={e => onAnnotationClick(e, paragraph, annotation)} + > + {annotation.text} + </span> + ))} + </div> + ) +} + +export const ParagraphHeader = ({ paragraph, selectedParagraph, selectedAnnotation, onAnnotationClick, onDoubleClick }) => { + const className = selectedParagraph ? 'header selected' : 'header' + const text = paragraph.annotations.map(annotation => annotation.text).join(' ') + console.log(text) + return ( + <div + className={className} + onDoubleClick={e => onDoubleClick(e, paragraph)} + > + {text} + </div> + ) +} + +export const ParagraphElementLookup = { + paragraph: Paragraph, + blockquote: Paragraph, + header: ParagraphHeader, +} diff --git a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js new file mode 100644 index 0000000..059baff --- /dev/null +++ b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js @@ -0,0 +1,92 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import actions from '../../../actions' +import { ParagraphElementLookup } from '../components/paragraph.types' + +class ParagraphList extends Component { + state = { + paragraphs: [], + } + constructor(props) { + super(props) + this.onAnnotationClick = this.onAnnotationClick.bind(this) + this.onParagraphDoubleClick = this.onParagraphDoubleClick.bind(this) + } + componentDidMount() { + this.build() + } + build() { + const { order: annotationOrder, lookup: annotationLookup } = this.props.annotation + const { lookup: paragraphLookup } = this.props.paragraph + let currentParagraph = {} + const paragraphs = [] + annotationOrder.forEach((annotation_id, i) => { + const annotation = annotationLookup[annotation_id] + const paragraph = paragraphLookup[annotation.paragraph_id] + if (annotation.paragraph_id !== currentParagraph.id) { + const paragraph_type = getParagraphType(annotation, paragraph) + currentParagraph = { + id: annotation.paragraph_id || ('index_' + i), + type: paragraph_type, + annotations: [], + } + paragraphs.push(currentParagraph) + } + currentParagraph.annotations.push(annotation) + }) + this.setState({ paragraphs }) + } + onAnnotationClick(e, paragraph, annotation){ + // + } + onParagraphDoubleClick(e, paragraph) { + // + } + render() { + const { paragraphs } = this.state + return ( + <div className='paragraphs'> + <div className='content'> + {paragraphs.map(paragraph => { + if (paragraph.type in ParagraphElementLookup) { + const ParagraphElement = ParagraphElementLookup[paragraph.type] + return ( + <ParagraphElement + key={paragraph.id} + paragraph={paragraph} + selectedParagraph={false} + selectedAnnotation={-1} + onAnnotationClick={this.onAnnotationClick} + onDoubleClick={this.onParagraphDoubleClick} + /> + ) + } else { + return <div key={paragraph.id}>{'(empty)'}</div> + } + })} + </div> + </div> + ) + } +} + +const getParagraphType = (annotation, paragraph) => { + if (!paragraph) { + return annotation.type + } + return paragraph.type +} + +const mapStateToProps = state => ({ + paragraph: state.paragraph.index, + annotation: state.annotation.index, + audio: state.audio, +}) + +const mapDispatchToProps = dispatch => ({ +}) + +export default connect(mapStateToProps, mapDispatchToProps)(ParagraphList) diff --git a/animism-align/frontend/views/paragraph/paragraph.container.js b/animism-align/frontend/views/paragraph/paragraph.container.js new file mode 100644 index 0000000..ecd5417 --- /dev/null +++ b/animism-align/frontend/views/paragraph/paragraph.container.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import './paragraph.css' + +import actions from '../../actions' +import { Loader } from '../../common' + +import ParagraphList from './containers/paragraphList.container' + +class ParagraphContainer extends Component { + render() { + if (!this.props.annotation.lookup || !this.props.paragraph.lookup) { + return <div className='body loading'><Loader /></div> + } + return ( + <div className='body'> + <ParagraphList /> + </div> + ) + } +} + +const mapStateToProps = state => ({ + paragraph: state.paragraph.index, + annotation: state.annotation.index, +}) + +const mapDispatchToProps = dispatch => ({ + // alignActions: bindActionCreators({ ...alignActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(ParagraphContainer) diff --git a/animism-align/frontend/views/paragraph/paragraph.css b/animism-align/frontend/views/paragraph/paragraph.css new file mode 100644 index 0000000..e96fd4f --- /dev/null +++ b/animism-align/frontend/views/paragraph/paragraph.css @@ -0,0 +1,36 @@ +.paragraphs { + width: 100%; + height: calc(100% - 3.125rem); + overflow: scroll; + padding-top: 1rem; + padding-left: 1rem; +} + +.paragraphs .content { + font-family: 'Georgia', serif; + width: 650px; + padding-bottom: 6rem; +} +.paragraphs .content > div { + margin-bottom: 16px; +} + +.paragraphs .header { + font-size: 32px; +} + +.paragraphs .paragraph { + font-size: 16px; + line-height: 1.5; +} +.paragraphs .paragraph span:after { + content: ' '; +} + +.paragraphs .blockquote { + line-height: 1.5; + padding-left: 3rem; +} +.paragraphs .blockquote span:after { + content: ' '; +}
\ No newline at end of file |