mirror of
https://github.com/Alamantus/Lexiconga.git
synced 2025-07-04 14:44:16 +02:00
Improve wording & functionality in IPA components.
This commit is contained in:
parent
adb7275f13
commit
053ef54402
4 changed files with 1322 additions and 1318 deletions
|
|
@ -54,15 +54,10 @@ export class IPAField extends Component {
|
||||||
showTable () {
|
showTable () {
|
||||||
if (this.state.doShowTable) {
|
if (this.state.doShowTable) {
|
||||||
return (
|
return (
|
||||||
<div className='modal is-active'>
|
|
||||||
<div className='modal-background'
|
|
||||||
onClick={() => this.setState({ doShowTable: false })} />
|
|
||||||
|
|
||||||
<IPATable
|
<IPATable
|
||||||
value={this.state.value}
|
value={this.state.value}
|
||||||
|
close={() => this.setState({ doShowTable: false })}
|
||||||
update={newValue => this.setState({ value: newValue }, this.field.focus())} />
|
update={newValue => this.setState({ value: newValue }, this.field.focus())} />
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,24 +2,28 @@ import Inferno from 'inferno';
|
||||||
|
|
||||||
import {IPAField} from './IPAField';
|
import {IPAField} from './IPAField';
|
||||||
|
|
||||||
export const IPATable = ({value, update}) => {
|
export const IPATable = ({value, close, update}) => {
|
||||||
/*
|
/*
|
||||||
Modified from KeyboardFire's Phondue project (https://github.com/KeyboardFire/phondue)
|
Modified from KeyboardFire's Phondue project (https://github.com/KeyboardFire/phondue)
|
||||||
to fit React/Inferno and Lexiconga
|
to fit React/Inferno and Lexiconga
|
||||||
*/
|
*/
|
||||||
const updateInput = (newValue) => {
|
const updateInput = (newValue) => {
|
||||||
console.log(newValue);
|
|
||||||
this.field.setState({ value: value + newValue });
|
|
||||||
update(value + newValue);
|
update(value + newValue);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div className='modal is-active'>
|
||||||
|
<div className='modal-background'
|
||||||
|
onClick={() => close()} />
|
||||||
<div className='modal-card'>
|
<div className='modal-card'>
|
||||||
|
|
||||||
<header className='modal-card-head'>
|
<header className='modal-card-head'>
|
||||||
<IPAField isDisplayOnly={true}
|
<h2 className='modal-card-title'>
|
||||||
ref={field => this.field = field}
|
Pronunciation: {value}
|
||||||
value={value} />
|
</h2>
|
||||||
|
|
||||||
|
<button className='delete'
|
||||||
|
onClick={() => close()} />
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section className='modal-card-body'>
|
<section className='modal-card-body'>
|
||||||
|
|
@ -27,45 +31,46 @@ export const IPATable = ({value, update}) => {
|
||||||
<em>Hover over characters to see their Phondue shortcuts.</em>
|
<em>Hover over characters to see their Phondue shortcuts.</em>
|
||||||
</p>
|
</p>
|
||||||
<table className='table is-bordered'>
|
<table className='table is-bordered'>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th id='cell_0_0' class='td-lbl' colspan={1} />
|
||||||
|
<th id='cell_0_1' class='td-lbl' colspan={2}>
|
||||||
|
Bilabial
|
||||||
|
</th>
|
||||||
|
<th id='cell_0_2' class='td-lbl' colspan={2}>
|
||||||
|
Labiodental
|
||||||
|
</th>
|
||||||
|
<th id='cell_0_3' class='td-lbl' colspan={2}>
|
||||||
|
Dental
|
||||||
|
</th>
|
||||||
|
<th id='cell_0_4' class='td-lbl' colspan={2}>
|
||||||
|
Alveolar
|
||||||
|
</th>
|
||||||
|
<th id='cell_0_5' class='td-lbl' colspan={2}>
|
||||||
|
Postalveolar
|
||||||
|
</th>
|
||||||
|
<th id='cell_0_6' class='td-lbl' colspan={2}>
|
||||||
|
Palatal
|
||||||
|
</th>
|
||||||
|
<th id='cell_0_7' class='td-lbl' colspan={2}>
|
||||||
|
Velar
|
||||||
|
</th>
|
||||||
|
<th id='cell_0_8' class='td-lbl' colspan={2}>
|
||||||
|
Uvular
|
||||||
|
</th>
|
||||||
|
<th id='cell_0_9' class='td-lbl' colspan={2}>
|
||||||
|
Pharyngeal
|
||||||
|
</th>
|
||||||
|
<th id='cell_0_10' class='td-lbl' colspan={2}>
|
||||||
|
Glottal
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_0_0' class='td-lbl' colspan='1'>
|
<th id='cell_1_0' class='td-lbl' colspan={1}>
|
||||||
</td>
|
|
||||||
<td id='cell_0_1' class='td-lbl' colspan='2'>
|
|
||||||
Bilabial
|
|
||||||
</td>
|
|
||||||
<td id='cell_0_2' class='td-lbl' colspan='2'>
|
|
||||||
Labiodental
|
|
||||||
</td>
|
|
||||||
<td id='cell_0_3' class='td-lbl' colspan='2'>
|
|
||||||
Dental
|
|
||||||
</td>
|
|
||||||
<td id='cell_0_4' class='td-lbl' colspan='2'>
|
|
||||||
Alveolar
|
|
||||||
</td>
|
|
||||||
<td id='cell_0_5' class='td-lbl' colspan='2'>
|
|
||||||
Postalveolar
|
|
||||||
</td>
|
|
||||||
<td id='cell_0_6' class='td-lbl' colspan='2'>
|
|
||||||
Palatal
|
|
||||||
</td>
|
|
||||||
<td id='cell_0_7' class='td-lbl' colspan='2'>
|
|
||||||
Velar
|
|
||||||
</td>
|
|
||||||
<td id='cell_0_8' class='td-lbl' colspan='2'>
|
|
||||||
Uvular
|
|
||||||
</td>
|
|
||||||
<td id='cell_0_9' class='td-lbl' colspan='2'>
|
|
||||||
Pharyngeal
|
|
||||||
</td>
|
|
||||||
<td id='cell_0_10' class='td-lbl' colspan='2'>
|
|
||||||
Glottal
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td id='cell_1_0' class='td-lbl' colspan='1'>
|
|
||||||
Plosive
|
Plosive
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_1_1' class='td-btn'>
|
<td id='cell_1_1' class='td-btn'>
|
||||||
<button title=''
|
<button title=''
|
||||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||||
|
|
@ -152,9 +157,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_2_0' class='td-lbl' colspan='1'>
|
<th id='cell_2_0' class='td-lbl' colspan={1}>
|
||||||
Nasal
|
Nasal
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_2_1' class='td-lbl'>
|
<td id='cell_2_1' class='td-lbl'>
|
||||||
</td>
|
</td>
|
||||||
<td id='cell_2_2' class='td-btn'>
|
<td id='cell_2_2' class='td-btn'>
|
||||||
|
|
@ -221,9 +226,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_3_0' class='td-lbl' colspan='1'>
|
<th id='cell_3_0' class='td-lbl' colspan={1}>
|
||||||
Trill
|
Trill
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_3_1' class='td-lbl'>
|
<td id='cell_3_1' class='td-lbl'>
|
||||||
</td>
|
</td>
|
||||||
<td id='cell_3_2' class='td-btn'>
|
<td id='cell_3_2' class='td-btn'>
|
||||||
|
|
@ -278,9 +283,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_4_0' class='td-lbl' colspan='1'>
|
<th id='cell_4_0' class='td-lbl' colspan={1}>
|
||||||
Tap/Flap
|
Tap/Flap
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_4_1' class='td-lbl'>
|
<td id='cell_4_1' class='td-lbl'>
|
||||||
</td>
|
</td>
|
||||||
<td id='cell_4_2' class='td-lbl'>
|
<td id='cell_4_2' class='td-lbl'>
|
||||||
|
|
@ -331,9 +336,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_5_0' class='td-lbl' colspan='1'>
|
<th id='cell_5_0' class='td-lbl' colspan={1}>
|
||||||
Fricative
|
Fricative
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_5_1' class='td-btn'>
|
<td id='cell_5_1' class='td-btn'>
|
||||||
<button title='PH'
|
<button title='PH'
|
||||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||||
|
|
@ -456,9 +461,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_6_0' class='td-lbl' colspan='1'>
|
<th id='cell_6_0' class='td-lbl' colspan={1}>
|
||||||
Lateral fricative
|
Lateral fricative
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_6_1' class='td-lbl grey'>
|
<td id='cell_6_1' class='td-lbl grey'>
|
||||||
</td>
|
</td>
|
||||||
<td id='cell_6_2' class='td-lbl grey'>
|
<td id='cell_6_2' class='td-lbl grey'>
|
||||||
|
|
@ -509,9 +514,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_7_0' class='td-lbl' colspan='1'>
|
<th id='cell_7_0' class='td-lbl' colspan={1}>
|
||||||
Approximant
|
Approximant
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_7_1' class='td-lbl'>
|
<td id='cell_7_1' class='td-lbl'>
|
||||||
</td>
|
</td>
|
||||||
<td id='cell_7_2' class='td-lbl'>
|
<td id='cell_7_2' class='td-lbl'>
|
||||||
|
|
@ -570,9 +575,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_8_0' class='td-lbl' colspan='1'>
|
<th id='cell_8_0' class='td-lbl' colspan={1}>
|
||||||
Lateral approximant
|
Lateral approximant
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_8_1' class='td-lbl grey'>
|
<td id='cell_8_1' class='td-lbl grey'>
|
||||||
</td>
|
</td>
|
||||||
<td id='cell_8_2' class='td-lbl grey'>
|
<td id='cell_8_2' class='td-lbl grey'>
|
||||||
|
|
@ -626,38 +631,45 @@ export const IPATable = ({value, update}) => {
|
||||||
<td id='cell_8_20' class='td-lbl grey'>
|
<td id='cell_8_20' class='td-lbl grey'>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<table className='table is-bordered'>
|
||||||
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_9_0' class='td-lbl' colspan='1'>
|
<th id='cell_9_0' class='td-lbl' colspan={1}>
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_9_1' class='td-lbl' colspan='2'>
|
<th id='cell_9_1' class='td-lbl' colspan={2}>
|
||||||
Front
|
Front
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_9_2' class='td-lbl' colspan='2'>
|
<th id='cell_9_2' class='td-lbl' colspan={2}>
|
||||||
Central
|
Central
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_9_3' class='td-lbl' colspan='2'>
|
<th id='cell_9_3' class='td-lbl' colspan={2}>
|
||||||
Back
|
Back
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_9_4' class='td-lbl' colspan='1'>
|
<th id='cell_9_4' class='td-lbl' colspan={1}>
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_9_5' class='td-lbl' colspan='2'>
|
<th id='cell_9_5' class='td-lbl' colspan={2}>
|
||||||
Non-pulmonic
|
Non-pulmonic
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_9_6' class='td-lbl' colspan='1'>
|
<th id='cell_9_6' class='td-lbl' colspan={1}>
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_9_7' class='td-lbl' colspan='2'>
|
<th id='cell_9_7' class='td-lbl' colspan={2}>
|
||||||
Other
|
Other
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_9_8' class='td-lbl' colspan='1'>
|
<th id='cell_9_8' class='td-lbl' colspan={1}>
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_9_9' class='td-lbl' colspan='7'>
|
<th id='cell_9_9' class='td-lbl' colspan={7}>
|
||||||
Diacritics
|
Diacritics
|
||||||
</td>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_10_0' class='td-lbl' colspan='1'>
|
<th id='cell_10_0' class='td-lbl' colspan={1}>
|
||||||
Close
|
Close
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_10_1' class='td-btn'>
|
<td id='cell_10_1' class='td-btn'>
|
||||||
<button title=''
|
<button title=''
|
||||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||||
|
|
@ -762,9 +774,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_11_0' class='td-lbl' colspan='1'>
|
<th id='cell_11_0' class='td-lbl' colspan={1}>
|
||||||
Near-close
|
Near-close
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_11_1' class='td-btn'>
|
<td id='cell_11_1' class='td-btn'>
|
||||||
<button title='II'
|
<button title='II'
|
||||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||||
|
|
@ -857,9 +869,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_12_0' class='td-lbl' colspan='1'>
|
<th id='cell_12_0' class='td-lbl' colspan={1}>
|
||||||
Close-mid
|
Close-mid
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_12_1' class='td-btn'>
|
<td id='cell_12_1' class='td-btn'>
|
||||||
<button title=''
|
<button title=''
|
||||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||||
|
|
@ -964,9 +976,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_13_0' class='td-lbl' colspan='1'>
|
<th id='cell_13_0' class='td-lbl' colspan={1}>
|
||||||
Mid
|
Mid
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_13_1' class='td-lbl'>
|
<td id='cell_13_1' class='td-lbl'>
|
||||||
</td>
|
</td>
|
||||||
<td id='cell_13_2' class='td-lbl'>
|
<td id='cell_13_2' class='td-lbl'>
|
||||||
|
|
@ -1057,9 +1069,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_14_0' class='td-lbl' colspan='1'>
|
<th id='cell_14_0' class='td-lbl' colspan={1}>
|
||||||
Open-mid
|
Open-mid
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_14_1' class='td-btn'>
|
<td id='cell_14_1' class='td-btn'>
|
||||||
<button title='EE ɜ/'
|
<button title='EE ɜ/'
|
||||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||||
|
|
@ -1164,9 +1176,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_15_0' class='td-lbl' colspan='1'>
|
<th id='cell_15_0' class='td-lbl' colspan={1}>
|
||||||
Near-open
|
Near-open
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_15_1' class='td-btn'>
|
<td id='cell_15_1' class='td-btn'>
|
||||||
<button title='AE'
|
<button title='AE'
|
||||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||||
|
|
@ -1211,9 +1223,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td id='cell_16_0' class='td-lbl' colspan='1'>
|
<th id='cell_16_0' class='td-lbl' colspan={1}>
|
||||||
Open
|
Open
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_16_1' class='td-btn'>
|
<td id='cell_16_1' class='td-btn'>
|
||||||
<button title=''
|
<button title=''
|
||||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||||
|
|
@ -1258,9 +1270,9 @@ export const IPATable = ({value, update}) => {
|
||||||
</td>
|
</td>
|
||||||
<td id='cell_16_10' class='td-lbl'>
|
<td id='cell_16_10' class='td-lbl'>
|
||||||
</td>
|
</td>
|
||||||
<td id='cell_16_11' class='td-lbl' colspan='2'>
|
<th id='cell_16_11' class='td-lbl' colspan={2}>
|
||||||
Suprasegmental
|
Suprasegmental
|
||||||
</td>
|
</th>
|
||||||
<td id='cell_16_12' class='td-btn'>
|
<td id='cell_16_12' class='td-btn'>
|
||||||
<button title='""'
|
<button title='""'
|
||||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||||
|
|
@ -1316,5 +1328,6 @@ export const IPATable = ({value, update}) => {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -28,12 +28,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ipa-suggest {
|
.modal-card-title {
|
||||||
@extend .box;
|
word-wrap: break-word;
|
||||||
position: absolute;
|
max-width: 100%;
|
||||||
background-color: #FFFFFF;
|
|
||||||
border: 1px solid #CCCCFF;
|
|
||||||
font-size: 90%;
|
|
||||||
width: 200px;
|
|
||||||
z-index: 90;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
3
vendor/KeyboardFire/phondue/usage.html
vendored
3
vendor/KeyboardFire/phondue/usage.html
vendored
|
|
@ -1,5 +1,6 @@
|
||||||
<p>The Pronunciation field in Lexiconga utilizes <a href='https://github.com/KeyboardFire/phondue' target='_blank'>KeyboardFire's
|
<p>The Pronunciation field in Lexiconga utilizes <a href='https://github.com/KeyboardFire/phondue' target='_blank'>KeyboardFire's
|
||||||
Phondue</a> web script to make typing IPA pronunciations much more convenient.
|
Phondue</a> web script to make typing IPA pronunciations much more convenient. While you
|
||||||
|
can still point and click to select IPA characters using the IPA table,
|
||||||
Phondue provides many two-key keyboard shortcuts called <strong>digraphs</strong>
|
Phondue provides many two-key keyboard shortcuts called <strong>digraphs</strong>
|
||||||
that allow you to type any IPA symbol with only a standard keyboard.</p>
|
that allow you to type any IPA symbol with only a standard keyboard.</p>
|
||||||
<p>These symbols were decided to be intuitive as possible:</p>
|
<p>These symbols were decided to be intuitive as possible:</p>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue