From 92566ba17f5e921d5bff1f3fb4e4b0d92ca4fd39 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 17 Mar 2021 11:54:58 +0100
Subject: audio select

---
 frontend/app/views/page/components/tile.form.js | 85 +++++++++++++++----------
 1 file changed, 53 insertions(+), 32 deletions(-)

(limited to 'frontend/app/views/page/components/tile.form.js')

diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
index 3e31758..da72e27 100644
--- a/frontend/app/views/page/components/tile.form.js
+++ b/frontend/app/views/page/components/tile.form.js
@@ -10,6 +10,7 @@ import {
   TextInput, NumberInput, ColorInput, Slider,
   Select, LabelDescription, TextArea, Checkbox,
   SubmitButton, Loader } from 'app/common'
+import { AudioSelect } from 'app/views/audio/components/audio.select'
 import { preloadImage, preloadVideo } from 'app/utils'
 
 import * as tileActions from '../../tile/tile.actions'
@@ -169,6 +170,19 @@ class TileForm extends Component {
     pageList: [],
   }
 
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
+    this.handleAlignment = this.handleAlignment.bind(this)
+    this.handleImageChange = this.handleImageChange.bind(this)
+    this.handleVideoChange = this.handleVideoChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
+  }
+
   componentDidMount() {
     const { graph, page, isNew, initialData, sortOrder } = this.props
     const title = isNew ? 'new tile' : 'editing tile'
@@ -184,7 +198,6 @@ class TileForm extends Component {
       ...PAGE_LIST_TOP_OPTIONS,
       ...linkPages.map(page => ({ name: page.id, label: page.path }))
     ]
-    this.setState({ pageList })
     if (isNew) {
       const newTile = newImage({
         id: "new",
@@ -384,21 +397,21 @@ class TileForm extends Component {
     return (
       <div className='box'>
         <h1>{title}</h1>
-        <form onSubmit={this.handleSubmit.bind(this)}>
+        <form onSubmit={this.handleSubmit}>
           <div className="row selects">
             <Select
               name='type'
               selected={temporaryTile.type}
               options={SELECT_TYPES}
               title=''
-              onChange={this.handleSelect.bind(this)}
+              onChange={this.handleSelect}
             />
             <Select
               name='align'
               selected={temporaryTile.settings.align}
               options={ALIGNMENTS}
               title=''
-              onChange={this.handleAlignment.bind(this)}
+              onChange={this.handleAlignment}
             />
           </div>
 
@@ -417,18 +430,19 @@ class TileForm extends Component {
           : ""}
 
           {this.renderHyperlinkForm()}
+          {this.renderAudioForm()}
           {this.renderMiscForm()}
 
           <div className='row buttons'>
             <SubmitButton
               title={submitTitle}
-              onClick={this.handleSubmit.bind(this)}
+              onClick={this.handleSubmit}
             />
             {!isNew && 
               <SubmitButton
                 title={'Delete'}
                 className='destroy'
-                onClick={this.handleDelete.bind(this)}
+                onClick={this.handleDelete}
               />
             }
           </div>
@@ -473,7 +487,7 @@ class TileForm extends Component {
             required
             data={temporaryTile.settings}
             error={errorFields.has('url')}
-            onChange={this.handleImageChange.bind(this)}
+            onChange={this.handleImageChange}
             autoComplete="off"
           />
         </div>
@@ -482,7 +496,7 @@ class TileForm extends Component {
             label="Tiled"
             name="is_tiled"
             checked={temporaryTile.settings.is_tiled}
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
             autoComplete="off"
           />
           {temporaryTile.settings.is_tiled &&
@@ -491,7 +505,7 @@ class TileForm extends Component {
               selected={temporaryTile.settings.tile_style || 'tile'}
               options={IMAGE_TILE_STYLES}
               title=''
-              onChange={this.handleSettingsSelect.bind(this)}
+              onChange={this.handleSettingsSelect}
             />
           }
         </div>
@@ -514,7 +528,7 @@ class TileForm extends Component {
             required
             data={temporaryTile.settings}
             error={errorFields.has('url')}
-            onChange={this.handleVideoChange.bind(this)}
+            onChange={this.handleVideoChange}
             autoComplete="off"
           />
         </div>
@@ -524,13 +538,13 @@ class TileForm extends Component {
             selected={temporaryTile.settings.video_style || 'none'}
             options={VIDEO_STYLES}
             title=''
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
           />
           <Checkbox
             label="Loop"
             name="loop"
             checked={temporaryTile.settings.loop}
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
             autoComplete="off"
           />
         </div>
@@ -539,14 +553,14 @@ class TileForm extends Component {
             label="Muted"
             name="muted"
             checked={temporaryTile.settings.muted}
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
             autoComplete="off"
           />
           <Checkbox
             label="Autoadvance"
             name="autoadvance"
             checked={temporaryTile.settings.autoadvance}
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
             autoComplete="off"
           />
         </div>
@@ -565,7 +579,7 @@ class TileForm extends Component {
           required
           data={temporaryTile.settings}
           error={errorFields.has('content')}
-          onChange={this.handleSettingsChange.bind(this)}
+          onChange={this.handleSettingsChange}
           autoComplete="off"
         />
         <div className='row font'>
@@ -575,7 +589,7 @@ class TileForm extends Component {
             selected={temporaryTile.settings.font_family || 'sans-serif'}
             options={TEXT_FONT_FAMILIES}
             title=''
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
           />
           <NumberInput
             title=''
@@ -584,7 +598,7 @@ class TileForm extends Component {
             min={1}
             max={1200}
             error={errorFields.has('font_size')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
           <Select
@@ -592,7 +606,7 @@ class TileForm extends Component {
             selected={temporaryTile.settings.font_style || 'normal'}
             options={TEXT_FONT_STYLES}
             title=''
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
           />
         </div>
         <ColorInput
@@ -600,7 +614,7 @@ class TileForm extends Component {
           name='font_color'
           data={temporaryTile.settings}
           error={errorFields.has('font_color')}
-          onChange={this.handleSettingsChange.bind(this)}
+          onChange={this.handleSettingsChange}
           autoComplete="off"
         />
         <ColorInput
@@ -608,7 +622,7 @@ class TileForm extends Component {
           name='background_color'
           data={temporaryTile.settings}
           error={errorFields.has('background_color')}
-          onChange={this.handleSettingsChange.bind(this)}
+          onChange={this.handleSettingsChange}
           autoComplete="off"
         />
         <div className='row pair'>
@@ -619,7 +633,7 @@ class TileForm extends Component {
             min={0}
             max={1200}
             error={errorFields.has('width')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
           <NumberInput
@@ -629,7 +643,7 @@ class TileForm extends Component {
             min={0}
             max={1200}
             error={errorFields.has('height')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
         </div>
@@ -650,7 +664,7 @@ class TileForm extends Component {
             min={0}
             max={1200}
             error={errorFields.has('width')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
           <NumberInput
@@ -660,7 +674,7 @@ class TileForm extends Component {
             min={0}
             max={1200}
             error={errorFields.has('height')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
         </div>
@@ -670,7 +684,7 @@ class TileForm extends Component {
             name="units"
             data={temporaryTile.settings}
             error={errorFields.has('units')}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
         </div>
@@ -689,7 +703,7 @@ class TileForm extends Component {
           required
           data={temporaryTile.settings}
           error={errorFields.has('content')}
-          onChange={this.handleSettingsChange.bind(this)}
+          onChange={this.handleSettingsChange}
           autoComplete="off"
         />
         <div>
@@ -711,7 +725,7 @@ class TileForm extends Component {
             name='target_page_id'
             selected={temporaryTile.target_page_id || NO_LINK}
             options={pageList}
-            onChange={this.handleSelect.bind(this)}
+            onChange={this.handleSelect}
           />
           <Select
             title=''
@@ -719,7 +733,7 @@ class TileForm extends Component {
             selected={temporaryTile.settings.cursor}
             options={CURSORS}
             defaultOption="Cursor"
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
           />
         </div>
         <div>
@@ -729,7 +743,7 @@ class TileForm extends Component {
               placeholder='http://'
               name="external_link_url"
               data={temporaryTile.settings}
-              onChange={this.handleSettingsChange.bind(this)}
+              onChange={this.handleSettingsChange}
               autoComplete="off"
             />
           }
@@ -738,6 +752,13 @@ class TileForm extends Component {
     )
   }
 
+  renderAudioForm() {
+    return (
+      <div>
+      </div>
+    )
+  }
+
   renderMiscForm() {
     const { temporaryTile } = this.props
     return (
@@ -746,7 +767,7 @@ class TileForm extends Component {
           title='Opacity'
           name='opacity'
           value={temporaryTile.settings.opacity}
-          onChange={this.handleSettingsSelect.bind(this)}
+          onChange={this.handleSettingsSelect}
           min={0.0}
           max={1.0}
           step={0.01}
@@ -755,7 +776,7 @@ class TileForm extends Component {
           title='Scale'
           name='scale'
           value={temporaryTile.settings.scale}
-          onChange={this.handleSettingsSelect.bind(this)}
+          onChange={this.handleSettingsSelect}
           min={0.01}
           max={10.0}
           step={0.01}
@@ -764,7 +785,7 @@ class TileForm extends Component {
           title='Rotation'
           name='rotation'
           value={temporaryTile.settings.rotation}
-          onChange={this.handleSettingsSelect.bind(this)}
+          onChange={this.handleSettingsSelect}
           min={-180.0}
           max={180.0}
           step={1}
-- 
cgit v1.2.3-70-g09d2