2017-04-23 01:05:36 +02:00
|
|
|
|
import Inferno from 'inferno';
|
|
|
|
|
import Component from 'inferno-component';
|
|
|
|
|
|
2017-04-27 22:33:25 +02:00
|
|
|
|
const phondueUsage = require('../../../vendor/KeyboardFire/phondue/usage.html');
|
|
|
|
|
const digraphsHexes = require('../../../vendor/KeyboardFire/phondue/digraphs.txt');
|
|
|
|
|
|
2017-04-23 01:05:36 +02:00
|
|
|
|
import Helper from '../../Helper';
|
|
|
|
|
|
2017-04-27 22:33:25 +02:00
|
|
|
|
import {IPATable} from './IPATable';
|
|
|
|
|
|
2017-04-23 01:05:36 +02:00
|
|
|
|
export class IPAField extends Component {
|
2017-04-27 22:33:25 +02:00
|
|
|
|
/*
|
|
|
|
|
Modified from KeyboardFire's Phondue project (https://github.com/KeyboardFire/phondue)
|
|
|
|
|
to fit React/Inferno and Lexiconga
|
|
|
|
|
*/
|
2017-04-23 01:05:36 +02:00
|
|
|
|
constructor (props) {
|
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
|
|
this.state = {
|
2017-04-27 22:33:25 +02:00
|
|
|
|
value: props.value || ''
|
|
|
|
|
, doShowHelp: false
|
|
|
|
|
, doShowTable: false
|
2017-04-23 01:05:36 +02:00
|
|
|
|
}
|
|
|
|
|
|
2017-04-27 22:33:25 +02:00
|
|
|
|
this.field = null;
|
|
|
|
|
this.digraphs = {};
|
2017-04-26 07:13:59 +02:00
|
|
|
|
}
|
|
|
|
|
|
2017-04-27 22:33:25 +02:00
|
|
|
|
componentDidMount () {
|
|
|
|
|
// Decode digraph hexes.
|
|
|
|
|
digraphsHexes.split('\n').forEach(digraph => {
|
|
|
|
|
let chunks = digraph.match(/\S{8}/g);
|
|
|
|
|
if (!chunks || chunks.length != 3) return; // failsafe
|
|
|
|
|
chunks = chunks.map(hex => {
|
|
|
|
|
return String.fromCharCode(parseInt(hex, 16));
|
|
|
|
|
});
|
|
|
|
|
this.digraphs[chunks[0] + chunks[1]] = chunks[2];
|
|
|
|
|
});
|
2017-04-26 07:13:59 +02:00
|
|
|
|
}
|
|
|
|
|
|
2017-04-27 22:33:25 +02:00
|
|
|
|
showHelp () {
|
|
|
|
|
if (this.state.doShowHelp) {
|
|
|
|
|
return (
|
|
|
|
|
<div className='modal is-active'>
|
|
|
|
|
<div className='modal-background'
|
|
|
|
|
onClick={() => this.setState({ doShowHelp: false })} />
|
|
|
|
|
<div className='modal-card'>
|
|
|
|
|
<div className='modal-card-body'>
|
|
|
|
|
|
|
|
|
|
<div className='content'
|
|
|
|
|
dangerouslySetInnerHTML={{__html: phondueUsage}} />
|
2017-04-26 07:13:59 +02:00
|
|
|
|
|
2017-04-27 22:33:25 +02:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
2017-04-26 07:13:59 +02:00
|
|
|
|
}
|
2017-04-23 01:05:36 +02:00
|
|
|
|
|
2017-04-27 22:33:25 +02:00
|
|
|
|
showTable () {
|
|
|
|
|
if (this.state.doShowTable) {
|
|
|
|
|
return (
|
|
|
|
|
<div className='modal is-active'>
|
|
|
|
|
<div className='modal-background'
|
|
|
|
|
onClick={() => this.setState({ doShowTable: false })} />
|
|
|
|
|
<div className='modal-card'><div className='modal-card-body'>
|
|
|
|
|
<IPATable
|
|
|
|
|
value={this.state.value}
|
|
|
|
|
update={newValue => this.setState({ value: newValue }, this.field.focus())} />
|
|
|
|
|
</div></div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
2017-04-23 01:05:36 +02:00
|
|
|
|
}
|
|
|
|
|
|
2017-04-27 22:33:25 +02:00
|
|
|
|
showButtons () {
|
|
|
|
|
if (!this.props.isDisplayOnly) {
|
2017-04-23 01:05:36 +02:00
|
|
|
|
return (
|
2017-04-27 22:33:25 +02:00
|
|
|
|
<div>
|
|
|
|
|
<div className='help'>
|
|
|
|
|
<a className='button is-small'
|
|
|
|
|
onClick={() => this.setState({ doShowHelp: true })}>
|
|
|
|
|
Field Help
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<a className='button is-small'
|
|
|
|
|
onClick={() => this.setState({ doShowTable: true })}>
|
|
|
|
|
Show IPA Table
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
{this.showHelp()} {this.showTable()}
|
2017-04-23 01:05:36 +02:00
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-04-27 22:33:25 +02:00
|
|
|
|
onInput (event) {
|
|
|
|
|
let val = event.target.value
|
|
|
|
|
, pos = this.field.selectionStart || val.length;
|
2017-04-26 07:13:59 +02:00
|
|
|
|
|
2017-04-27 22:33:25 +02:00
|
|
|
|
if (event.key) {
|
|
|
|
|
const key = event.key
|
|
|
|
|
, digraph = this.digraphs[val.substr(pos - 1, 1) + key];
|
|
|
|
|
|
|
|
|
|
if (digraph) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
val = val.slice(0, pos - 1) + digraph + val.slice(pos);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (val !== this.state.value) {
|
|
|
|
|
this.setState({ value: val }, () => {
|
|
|
|
|
this.field.focus();
|
|
|
|
|
this.field.setSelectionRange(pos, pos);
|
|
|
|
|
});
|
|
|
|
|
}
|
2017-04-26 07:13:59 +02:00
|
|
|
|
}
|
|
|
|
|
|
2017-04-23 01:05:36 +02:00
|
|
|
|
render () {
|
|
|
|
|
return (
|
|
|
|
|
<div className='field'>
|
|
|
|
|
<label className='label'>Pronunciation</label>
|
|
|
|
|
<p className='control'>
|
2017-04-27 22:33:25 +02:00
|
|
|
|
<input className='input' type='text' disabled={!!this.props.isDisplayOnly} placeholder='[prə.ˌnʌn.si.ˈeɪ.ʃən]'
|
2017-04-26 07:13:59 +02:00
|
|
|
|
ref={input => this.field = input}
|
|
|
|
|
value={this.state.value}
|
2017-04-27 22:33:25 +02:00
|
|
|
|
onInput={event => this.onInput(event)}
|
|
|
|
|
onKeyDown={event => this.onInput(event)}
|
2017-04-23 01:05:36 +02:00
|
|
|
|
onChange={() => this.props.onChange(this.state.value)} />
|
|
|
|
|
</p>
|
2017-04-27 22:33:25 +02:00
|
|
|
|
{this.showButtons()}
|
2017-04-23 01:05:36 +02:00
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|