mirror of
https://github.com/Alamantus/Lexiconga.git
synced 2025-07-05 15:14:17 +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 () {
|
||||
if (this.state.doShowTable) {
|
||||
return (
|
||||
<div className='modal is-active'>
|
||||
<div className='modal-background'
|
||||
onClick={() => this.setState({ doShowTable: false })} />
|
||||
|
||||
<IPATable
|
||||
value={this.state.value}
|
||||
close={() => this.setState({ doShowTable: false })}
|
||||
update={newValue => this.setState({ value: newValue }, this.field.focus())} />
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,24 +2,28 @@ import Inferno from 'inferno';
|
|||
|
||||
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)
|
||||
to fit React/Inferno and Lexiconga
|
||||
*/
|
||||
const updateInput = (newValue) => {
|
||||
console.log(newValue);
|
||||
this.field.setState({ value: value + newValue });
|
||||
update(value + newValue);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='modal is-active'>
|
||||
<div className='modal-background'
|
||||
onClick={() => close()} />
|
||||
<div className='modal-card'>
|
||||
|
||||
<header className='modal-card-head'>
|
||||
<IPAField isDisplayOnly={true}
|
||||
ref={field => this.field = field}
|
||||
value={value} />
|
||||
<h2 className='modal-card-title'>
|
||||
Pronunciation: {value}
|
||||
</h2>
|
||||
|
||||
<button className='delete'
|
||||
onClick={() => close()} />
|
||||
</header>
|
||||
|
||||
<section className='modal-card-body'>
|
||||
|
|
@ -27,45 +31,46 @@ export const IPATable = ({value, update}) => {
|
|||
<em>Hover over characters to see their Phondue shortcuts.</em>
|
||||
</p>
|
||||
<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>
|
||||
<tr>
|
||||
<td id='cell_0_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'>
|
||||
<th id='cell_1_0' class='td-lbl' colspan={1}>
|
||||
Plosive
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_1_1' class='td-btn'>
|
||||
<button title=''
|
||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||
|
|
@ -152,9 +157,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_2_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_2_0' class='td-lbl' colspan={1}>
|
||||
Nasal
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_2_1' class='td-lbl'>
|
||||
</td>
|
||||
<td id='cell_2_2' class='td-btn'>
|
||||
|
|
@ -221,9 +226,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_3_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_3_0' class='td-lbl' colspan={1}>
|
||||
Trill
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_3_1' class='td-lbl'>
|
||||
</td>
|
||||
<td id='cell_3_2' class='td-btn'>
|
||||
|
|
@ -278,9 +283,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_4_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_4_0' class='td-lbl' colspan={1}>
|
||||
Tap/Flap
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_4_1' class='td-lbl'>
|
||||
</td>
|
||||
<td id='cell_4_2' class='td-lbl'>
|
||||
|
|
@ -331,9 +336,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_5_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_5_0' class='td-lbl' colspan={1}>
|
||||
Fricative
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_5_1' class='td-btn'>
|
||||
<button title='PH'
|
||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||
|
|
@ -456,9 +461,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_6_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_6_0' class='td-lbl' colspan={1}>
|
||||
Lateral fricative
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_6_1' class='td-lbl grey'>
|
||||
</td>
|
||||
<td id='cell_6_2' class='td-lbl grey'>
|
||||
|
|
@ -509,9 +514,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_7_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_7_0' class='td-lbl' colspan={1}>
|
||||
Approximant
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_7_1' class='td-lbl'>
|
||||
</td>
|
||||
<td id='cell_7_2' class='td-lbl'>
|
||||
|
|
@ -570,9 +575,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_8_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_8_0' class='td-lbl' colspan={1}>
|
||||
Lateral approximant
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_8_1' class='td-lbl grey'>
|
||||
</td>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table className='table is-bordered'>
|
||||
<thead>
|
||||
<tr>
|
||||
<td id='cell_9_0' class='td-lbl' colspan='1'>
|
||||
</td>
|
||||
<td id='cell_9_1' class='td-lbl' colspan='2'>
|
||||
<th id='cell_9_0' class='td-lbl' colspan={1}>
|
||||
</th>
|
||||
<th id='cell_9_1' class='td-lbl' colspan={2}>
|
||||
Front
|
||||
</td>
|
||||
<td id='cell_9_2' class='td-lbl' colspan='2'>
|
||||
</th>
|
||||
<th id='cell_9_2' class='td-lbl' colspan={2}>
|
||||
Central
|
||||
</td>
|
||||
<td id='cell_9_3' class='td-lbl' colspan='2'>
|
||||
</th>
|
||||
<th id='cell_9_3' class='td-lbl' colspan={2}>
|
||||
Back
|
||||
</td>
|
||||
<td id='cell_9_4' class='td-lbl' colspan='1'>
|
||||
</td>
|
||||
<td id='cell_9_5' class='td-lbl' colspan='2'>
|
||||
</th>
|
||||
<th id='cell_9_4' class='td-lbl' colspan={1}>
|
||||
</th>
|
||||
<th id='cell_9_5' class='td-lbl' colspan={2}>
|
||||
Non-pulmonic
|
||||
</td>
|
||||
<td id='cell_9_6' class='td-lbl' colspan='1'>
|
||||
</td>
|
||||
<td id='cell_9_7' class='td-lbl' colspan='2'>
|
||||
</th>
|
||||
<th id='cell_9_6' class='td-lbl' colspan={1}>
|
||||
</th>
|
||||
<th id='cell_9_7' class='td-lbl' colspan={2}>
|
||||
Other
|
||||
</td>
|
||||
<td id='cell_9_8' class='td-lbl' colspan='1'>
|
||||
</td>
|
||||
<td id='cell_9_9' class='td-lbl' colspan='7'>
|
||||
</th>
|
||||
<th id='cell_9_8' class='td-lbl' colspan={1}>
|
||||
</th>
|
||||
<th id='cell_9_9' class='td-lbl' colspan={7}>
|
||||
Diacritics
|
||||
</td>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td id='cell_10_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_10_0' class='td-lbl' colspan={1}>
|
||||
Close
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_10_1' class='td-btn'>
|
||||
<button title=''
|
||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||
|
|
@ -762,9 +774,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_11_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_11_0' class='td-lbl' colspan={1}>
|
||||
Near-close
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_11_1' class='td-btn'>
|
||||
<button title='II'
|
||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||
|
|
@ -857,9 +869,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_12_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_12_0' class='td-lbl' colspan={1}>
|
||||
Close-mid
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_12_1' class='td-btn'>
|
||||
<button title=''
|
||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||
|
|
@ -964,9 +976,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_13_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_13_0' class='td-lbl' colspan={1}>
|
||||
Mid
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_13_1' class='td-lbl'>
|
||||
</td>
|
||||
<td id='cell_13_2' class='td-lbl'>
|
||||
|
|
@ -1057,9 +1069,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_14_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_14_0' class='td-lbl' colspan={1}>
|
||||
Open-mid
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_14_1' class='td-btn'>
|
||||
<button title='EE ɜ/'
|
||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||
|
|
@ -1164,9 +1176,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_15_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_15_0' class='td-lbl' colspan={1}>
|
||||
Near-open
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_15_1' class='td-btn'>
|
||||
<button title='AE'
|
||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||
|
|
@ -1211,9 +1223,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='cell_16_0' class='td-lbl' colspan='1'>
|
||||
<th id='cell_16_0' class='td-lbl' colspan={1}>
|
||||
Open
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_16_1' class='td-btn'>
|
||||
<button title=''
|
||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||
|
|
@ -1258,9 +1270,9 @@ export const IPATable = ({value, update}) => {
|
|||
</td>
|
||||
<td id='cell_16_10' class='td-lbl'>
|
||||
</td>
|
||||
<td id='cell_16_11' class='td-lbl' colspan='2'>
|
||||
<th id='cell_16_11' class='td-lbl' colspan={2}>
|
||||
Suprasegmental
|
||||
</td>
|
||||
</th>
|
||||
<td id='cell_16_12' class='td-btn'>
|
||||
<button title='""'
|
||||
onClick={event => updateInput(event.currentTarget.innerHTML)}>
|
||||
|
|
@ -1316,5 +1328,6 @@ export const IPATable = ({value, update}) => {
|
|||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -28,12 +28,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.ipa-suggest {
|
||||
@extend .box;
|
||||
position: absolute;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #CCCCFF;
|
||||
font-size: 90%;
|
||||
width: 200px;
|
||||
z-index: 90;
|
||||
.modal-card-title {
|
||||
word-wrap: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
|||
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
|
||||
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>
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue