diff options
| -rw-r--r-- | animism-align/frontend/app/common/form.component.js | 30 | ||||
| -rw-r--r-- | animism-align/frontend/app/constants.js | 65 | ||||
| -rw-r--r-- | animism-align/frontend/app/utils/index.js | 8 |
3 files changed, 85 insertions, 18 deletions
diff --git a/animism-align/frontend/app/common/form.component.js b/animism-align/frontend/app/common/form.component.js index d427afe..4b6616e 100644 --- a/animism-align/frontend/app/common/form.component.js +++ b/animism-align/frontend/app/common/form.component.js @@ -111,11 +111,12 @@ export class Select extends Component { return <label className='select'><div>Loading...</div></label> } const { focused } = this.state + const selectedOption = findOptionInGroups(options, String(selected)) || { label: defaultOption } return ( <label className='selectLabel'> {title && <span>{title}</span>} <div className={(focused ? 'select focus' : 'select') + " " + (className || "")}> - <div>{(options.find(opt => String(opt.name) === String(selected)) || {label: defaultOption}).label}</div> + <div>{selectedOption.label}</div> <select onFocus={() => this.setState({ focused: true })} onBlur={() => this.setState({ focused: false })} @@ -127,11 +128,9 @@ export class Select extends Component { > {!selected && defaultOption && <option value="__default__">{defaultOption}</option>} {options.map((option, i) => ( - <option - key={option.name} - value={option.name} - disabled={option.disabled} - >{option.label}</option> + option.options + ? <OptionGroup key={'group_' + option.name} {...option} /> + : <OptionItem key={option.name} {...option} /> ))} </select> </div> @@ -139,6 +138,25 @@ export class Select extends Component { ) } } +const findOptionInGroups = (options, selected) => { + if (options.length && options[0].options) { + options = options.reduce((a,b) => a.concat(b.options), []) + } + return options.find(opt => String(opt.name) === String(selected)) +} + +export const OptionGroup = ({ name, options }) => ( + <optgroup label={name}> + {options.map(option => ( + <OptionItem key={option.name} {...option} /> + ))} + </optgroup> +) +export const OptionItem = ({ name, label, disabled }) => ( + <option value={name} disabled={disabled}> + {label} + </option> +) export class FileInputField extends Component { state = { diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js index 8655c3a..db3d666 100644 --- a/animism-align/frontend/app/constants.js +++ b/animism-align/frontend/app/constants.js @@ -1,4 +1,4 @@ -import { capitalize } from 'app/utils' +import { mapNameToSelectOption } from 'app/utils' export const { NODE_ENV } = process.env export const ENV_DEVELOPMENT = NODE_ENV !== 'production' @@ -55,19 +55,60 @@ export const ROMAN_NUMERALS = [ ] export const ANNOTATION_SELECT_LABELS = { - 'section_heading': 'Chapter Heading', + 'section_heading': 'Chapter Title', + 'heading_text': 'Heading', + 'video_set_volume': '(cue) Set Volume', + 'gallery_advance': '(cue) Advance Frame', } +const mapNameToAnnotationFunction = mapNameToSelectOption(ANNOTATION_SELECT_LABELS) + export const ANNOTATION_SELECT_OPTIONS = [ - 'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'paragraph_end', - 'footnote', - 'text_plate', - 'video', 'subtitle', - 'image', - 'gallery', 'carousel', 'grid', 'vitrine', - 'gallery_advance', - 'curtain', 'intro', 'schedule', -].map(name => ({ name, label: ANNOTATION_SELECT_LABELS[name] || capitalize(name.replace('_', ' ')) })) + { + name: "text", + options: [ + 'sentence', + 'section_heading', + 'heading_text', + 'pullquote_credit', + 'paragraph_end', + 'footnote', + 'text_plate', + ].map(mapNameToAnnotationFunction) + }, + { + name: "image", + options: [ + 'curtain', + 'image', + ].map(mapNameToAnnotationFunction) + }, + { + name: "video", + options: [ + 'video', + 'subtitle', + 'video_set_volume', + ].map(mapNameToAnnotationFunction) + }, + { + name: "gallery", + options: [ + 'carousel', + 'gallery_advance', + 'grid', + 'vitrine', + 'gallery', + ].map(mapNameToAnnotationFunction) + }, + { + name: "intro", + options: [ + 'intro', + 'subtitle', + ].map(mapNameToAnnotationFunction) + }, +] export const TEXT_ANNOTATION_TYPES = new Set([ 'section_heading', 'heading_text', 'sentence', 'paragraph_end', 'pullquote_credit', @@ -98,7 +139,7 @@ export const FULLSCREEN_UTILITY_ANNOTATION_TYPES = new Set([ ]) export const CUE_UTILITY_ANNOTATION_TYPES = new Set([ - 'gallery_advance', + 'gallery_advance', 'video_set_volume', ]) // elements which, if fullscreen, will not disappear if the episode is paused diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js index ddbfb7e..e48522e 100644 --- a/animism-align/frontend/app/utils/index.js +++ b/animism-align/frontend/app/utils/index.js @@ -103,6 +103,14 @@ export const floatGTE = (a,b) => (floatEQ(a,b) || floatGT(a,b)) export const floatInRange = (a,b,c) => floatLTE(a, b) && floatLT(b, c) export const simpleArraysEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b) +/* forms */ +export const mapNameToSelectOption = labels => ( + name => ({ + name, + label: labels[name] || capitalize(name.replace('_', ' ')) + }) +) + /* URLs */ export const sha256_tree = (sha256, branch_size=2, tree_depth=2) => { |