-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathchapter.js
More file actions
130 lines (112 loc) · 4.23 KB
/
chapter.js
File metadata and controls
130 lines (112 loc) · 4.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/*global javascripture*/
// External
import React from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
// Internal
import Bookmarker from '../../containers/bookmarker';
import Verse from './verse';
import VerseNumber from './verse-number';
import styles from './styles.scss';
import { getLanguageFromVersion } from '../../lib/reference';
const getVerseWrapperStyle = function( language, version ) {
if ( language === 'hebrew' && version === 'original' ) {
return {
direction: 'rtl'
};
}
return {};
};
const getVerseStyle = function( language, version ) {
/*if ( language === 'hebrew' && version === 'original' ) {
return {
fontFamily: 'Times New Roman, Times, serif',
fontSize: '140%',
lineHeight: '1em',
verticalAlign: 'middle'
};
}
return {};*/
};
class Chapter extends React.Component{
componentDidMount() {
this.scrollToCurrentChapter();
}
componentDidUpdate( prevProps, prevState ) {
this.scrollToCurrentChapter();
}
scrollToCurrentChapter() {
const currrentChapter = ReactDOM.findDOMNode( this.currentRef.current );
if ( currrentChapter ) {
currrentChapter.scrollIntoView();
document.getElementById( 'referenceWindow' + this.props.index ).scrollBy( 0, -40 );
}
}
getClassName( language, version ) {
if ( language === 'hebrew' && version === 'original' ) {
return classnames( styles.verse, styles.hebrew );
}
return styles.verse
}
getSyncVerses() {
const { book, chapter, index } = this.props;
const currentReference = this.props.reference[ index ],
kjvData = javascripture.data[ 'kjv' ][ book ][ chapter - 1 ];
this.currentRef = React.createRef();
return kjvData.map( ( verse, verseNumber ) => {
let ref = null;
if ( currentReference && currentReference.book === book && currentReference.chapter === chapter && currentReference.verse === ( verseNumber + 1 ) ) {
ref = this.currentRef;
}
return (
<div className={ styles.singleReference } key={ verseNumber } ref={ ref }>
{ this.props.reference.map( ( reference, index ) => {
const language = getLanguageFromVersion( book, reference.version );
const verseData = javascripture.data[ language ][ book ][ chapter - 1 ][ verseNumber ];
return (
<div className={ styles.verseWrapper } key={ index + verseNumber } style={ getVerseWrapperStyle( language, reference.version ) }>
<VerseNumber book={ book } chapter={ chapter } verse={ verseNumber + 1 } /><span className={ this.getClassName( language, reference.version ) }>
<Verse verse={ verseData } index={ verseNumber } version={ reference.version } language={ language } />
</span>
</div>
);
} ) }
<Bookmarker book={ book } chapter={ chapter } verse={ verseNumber + 1 } />
</div>
);
} );
}
getDifferentVerses() {
const { book, chapter, index } = this.props;
const currentReference = this.props.reference[ index ],
language = getLanguageFromVersion( book, this.props.reference[ index ].version ),
chapterData = javascripture.data[ language ][ book ][ chapter - 1 ];
this.currentRef = React.createRef();
return chapterData.map( ( verse, verseNumber ) => {
let ref = null;
if ( currentReference && currentReference.book === book && currentReference.chapter === chapter && currentReference.verse === ( verseNumber + 1 ) ) {
ref = this.currentRef;
}
return (
<div className={ styles.singleReference } key={ verseNumber } ref={ ref }>
<div className={ styles.verseWrapper } style={ getVerseWrapperStyle( language, this.props.reference[ index ].version ) }>
<VerseNumber book={ book } chapter={ chapter } verse={ verseNumber + 1 } /><span className={ this.getClassName( language, this.props.reference[ index ].version ) }>
<Verse verse={ verse } index={ verseNumber } version={ this.props.reference[ index ].version } language={ language } />
</span>
</div>
<Bookmarker book={ book } chapter={ chapter } verse={ verseNumber + 1 } />
</div>
);
} );
}
render() {
return (
<div>
{ this.props.inSync && this.getSyncVerses() }
{ ! this.props.inSync && this.getDifferentVerses() }
</div>
);
}
}
export default withStyles( styles )( Chapter );