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
|
import React, { Component } from 'react'
import { ROMAN_NUMERALS } from 'app/constants'
import { SpeakerIcon } from '../../nav/viewer.icons'
export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
if (paragraph.hidden) return null
if (paragraph.annotations.length === 0) return null
let className = paragraph.type
if (className !== 'paragraph') className += ' paragraph'
if (currentParagraph) className += ' current'
const firstAnnotation = paragraph.annotations[0]
return (
<div
className={className}
>
<div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}>{SpeakerIcon}</div>
{paragraph.annotations.map(annotation => {
if (annotation.type === 'footnote') {
return (
<span
key={annotation.id}
className='footnote'
onClick={e => onAnnotationClick(e, paragraph, annotation)}
dangerouslySetInnerHTML={{ __html: annotation.footnote_id }}
/>
)
}
return (
<span
key={annotation.id}
className={annotation.id === currentAnnotation ? 'current' : ''}
onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}
dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
/>
)
})}
</div>
)
}
export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
if (paragraph.hidden) return null
let className = paragraph.type
if (className !== 'paragraph') className += ' paragraph'
if (currentParagraph) className += ' current'
const firstAnnotation = paragraph.annotations[0]
return (
<div
className={className}
>
<div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}>{SpeakerIcon}</div>
{paragraph.annotations.map(annotation => {
if (annotation.type === 'footnote') {
return (
<span
key={annotation.id}
className='footnote'
onClick={e => onAnnotationClick(e, paragraph, annotation)}
dangerouslySetInnerHTML={{ __html: annotation.footnote_id }}
/>
)
}
return (
<span
key={annotation.id}
className={
annotation.type === 'pullquote_credit'
? 'pullquote_credit'
: annotation.id === currentAnnotation
? 'current'
: ''
}
onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}
dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
/>
)
})}
</div>
)
}
export const SectionHeading = ({ paragraph }) => {
if (paragraph.hidden) return null
return (
<div className='section_heading'>
<span>
{ROMAN_NUMERALS[paragraph.sectionIndex]}
{'. '}
{paragraph.annotations[0].text}
</span>
</div>
)
}
export const HeadingText = ({ paragraph }) => {
if (paragraph.hidden) return null
const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
return (
<div className='section_heading'>
<span>{text}</span>
</div>
)
}
|
