From 17438f18e5943e5cdb12f2d4f9aed284c867e034 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 19 Nov 2020 15:43:14 +0100
Subject: optgroup support for select elements

---
 .../frontend/app/common/form.component.js          | 30 ++++++++--
 animism-align/frontend/app/constants.js            | 65 ++++++++++++++++++----
 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) => {
-- 
cgit v1.2.3-70-g09d2