summaryrefslogtreecommitdiff
path: root/frontend/app/views/page/components/tile.form.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/views/page/components/tile.form.js')
-rw-r--r--frontend/app/views/page/components/tile.form.js85
1 files changed, 53 insertions, 32 deletions
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}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 00:28:38 +0000