From 108d4835d0942faf2305e702d698ae88a45022a5 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 18 Sep 2020 18:48:23 +0200 Subject: pullquote paragraph type --- animism-align/frontend/app/constants.js | 2 +- .../components/annotations/annotation.form.js | 2 +- .../views/paragraph/components/paragraph.form.js | 2 +- .../paragraph/components/paragraphTypes/index.js | 1 + .../views/viewer/player/components.inline/index.js | 2 ++ .../viewer/player/components.inline/inline.text.js | 29 ++++++++++++++++++++++ .../transcript/components/elementTypes.text.js | 28 +++++++++++++++++++++ .../views/viewer/transcript/components/index.js | 3 ++- 8 files changed, 65 insertions(+), 4 deletions(-) (limited to 'animism-align/frontend') diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js index b3371ee..44c55cf 100644 --- a/animism-align/frontend/app/constants.js +++ b/animism-align/frontend/app/constants.js @@ -39,7 +39,7 @@ export const ROMAN_NUMERALS = [ ] export const TEXT_ANNOTATION_TYPES = new Set([ - 'section_heading', 'heading_text', 'sentence', 'paragraph_end', + 'section_heading', 'heading_text', 'sentence', 'paragraph_end', 'pullquote_credit', ]) export const MEDIA_ANNOTATION_TYPES = new Set([ diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js index 985e592..f327735 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js @@ -13,7 +13,7 @@ import { Select } from 'app/common' import { annotationFormLookup } from './annotationForms' const ANNOTATION_TYPES = [ - 'sentence', 'section_heading', 'heading_text', 'paragraph_end', + 'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'paragraph_end', 'video', 'image', 'gallery', 'carousel', 'grid', 'vitrine', diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.form.js b/animism-align/frontend/app/views/paragraph/components/paragraph.form.js index 3255f1f..6c57b6a 100644 --- a/animism-align/frontend/app/views/paragraph/components/paragraph.form.js +++ b/animism-align/frontend/app/views/paragraph/components/paragraph.form.js @@ -9,7 +9,7 @@ import { clamp, timestamp, capitalize } from 'app/utils' import { Select } from 'app/common' const PARAGRAPH_TYPES = [ - 'paragraph', 'intro_paragraph', 'blockquote', 'big_text', 'hidden', + 'paragraph', 'intro_paragraph', 'blockquote', 'pullquote', 'big_text', 'hidden', ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) })) class ParagraphForm extends Component { diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js index 42f0db0..dd53f0b 100644 --- a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js +++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js @@ -17,6 +17,7 @@ export const paragraphElementLookup = { intro_paragraph: React.memo(Paragraph), hidden: React.memo(Paragraph), blockquote: React.memo(Paragraph), + pullquote: React.memo(Paragraph), big_text: React.memo(Paragraph), section_heading: React.memo(ParagraphHeading), heading_text: React.memo(ParagraphHeading), diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js index 0e26df6..16e3044 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js @@ -4,6 +4,7 @@ import { Paragraph, SectionHeading, HeadingText, + Pullquote, } from './inline.text' import { @@ -31,6 +32,7 @@ export const inlineComponents = { intro_paragraph: React.memo(Paragraph), hidden: React.memo(Paragraph), blockquote: React.memo(Paragraph), + pullquote: React.memo(Pullquote), section_heading: React.memo(SectionHeading), heading_text: React.memo(HeadingText), big_text: React.memo(Paragraph), diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js index 91ea506..70cf91a 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js @@ -26,6 +26,35 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn ) } +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 ( +
+
onAnnotationClick(e, paragraph, firstAnnotation)}>{SpeakerIcon}
+ {paragraph.annotations.map(annotation => ( + onAnnotationClick(e, paragraph, firstAnnotation)} + dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }} + /> + ))} +
+ ) +} + export const SectionHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => { if (paragraph.hidden) return null let className = currentParagraph ? 'section_heading current' : 'section_heading' diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js index 5ea12da..49cbdd3 100644 --- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js +++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js @@ -24,6 +24,34 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn ) } +export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => { + let className = paragraph.type + if (className !== 'paragraph') className += ' paragraph' + if (currentParagraph) className += ' current' + return ( +
+ {paragraph.annotations.map(annotation => ( + onAnnotationClick(e, paragraph, annotation)} + dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }} + /> + ))} +
+ ) +} + export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => { let className = currentParagraph ? 'section_heading current' : 'section_heading' const text = paragraph.annotations.map(annotation => annotation.text).join(' ') diff --git a/animism-align/frontend/app/views/viewer/transcript/components/index.js b/animism-align/frontend/app/views/viewer/transcript/components/index.js index e71a98f..35084e7 100644 --- a/animism-align/frontend/app/views/viewer/transcript/components/index.js +++ b/animism-align/frontend/app/views/viewer/transcript/components/index.js @@ -1,7 +1,7 @@ import React from 'react' import { - Paragraph, ParagraphHeading, HiddenParagraph + Paragraph, ParagraphHeading, HiddenParagraph, Pullquote } from './elementTypes.text' import { @@ -21,6 +21,7 @@ export const transcriptElementLookup = { intro_paragraph: React.memo(Paragraph), big_text: React.memo(Paragraph), blockquote: React.memo(Paragraph), + pullquote: React.memo(Pullquote), hidden: React.memo(Paragraph), heading_text: React.memo(HiddenParagraph), -- cgit v1.2.3-70-g09d2