Alamantus/Lexiconga
1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-04-11 06:00:31 +02:00
Code Issues Releases Activity

Enable switching details from DictionaryDetails menu.

Browse source 
Add Phonology section to DictionaryDetails.
Update DictionaryDetails and MainDisplay to have more data to work with and display.
This commit is contained in:
Robbie Antenesse 2017-08-17 13:51:08 -06:00
parent e8919af5ca
commit 6bb8a6306a
4 changed files with 287 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/MainDisplay.jsx
View file

@ -27,12 +27,28 @@ export const MainDisplay = ({ dictionaryInfo, wordsToDisplay, updateDisplay, upd
specification={ dictionaryInfo.specification }
description={ dictionaryInfo.description }
partsOfSpeech={ dictionaryInfo.partsOfSpeech }
alphabeticalOrder={['b', 'p', 't', 'd', 'a', 'o', 'j', 'e']}
details={{
phonology: {
consonants: ['b', 'p', 'd', 't', 'j'],
vowels: ['a', 'o', 'e'],
blends: ['ae', 'oe', 'tj', 'dy'],
phonotactics: {
onset: ['b', 'p', 'j'],
nucleus: ['a', 'o', 'e'],
coda: ['any'],
exceptions: 'There are no exceptions',
},
},
grammar: {
content: 'The rules of the language are simple: just follow them!'
},
custom: [
{
name: 'Test Tab',
content: 'This is a test tab to test how custom tabs work!',
}
]
],
}}
/>

143
src/components/display/DictionaryDetails/DetailsSection/PhonologyDisplay.jsx Normal file
View file

@ -0,0 +1,143 @@
import Inferno from 'inferno';
import Component from 'inferno-component';
import marked from 'marked';
export const PhonologyDisplay = ({ phonologyContent }) => {
return (
<div>
<h4 className='title is-4'>
Phonemes
</h4>
<div className='columns'>
<div className='column is-half'>
<strong>Consonants:</strong>
<div className='tags'>
{phonologyContent.consonants.map(consonant => {
return (
<span key={`consonant_${ consonant }_${ Date.now().toString() }`}
className='tag'>
{ consonant }
</span>
);
})}
</div>
</div>
<div className='column is-half'>
<strong>Vowels:</strong>
<div className='tags'>
{phonologyContent.vowels.map(vowel => {
return (
<span key={`vowel_${ vowel }_${ Date.now().toString() }`}
className='tag'>
{ vowel }
</span>
);
})}
</div>
</div>
</div>
{
phonologyContent.blends.length > 0
&& (
<div className='columns'>
<div className='column'>
<strong>Polyphthongs{'\u200B'}/{'\u200B'}Blends:</strong>
<div className='tags'>
{phonologyContent.blends.map(blend => {
return (
<span key={`blend_${ blend }_${ Date.now().toString() }`}
className='tag'>
{ blend }
</span>
);
})}
</div>
</div>
</div>
)
}
{
(phonologyContent.phonotactics.onset.length > 0
|| phonologyContent.phonotactics.nucleus.length > 0
|| phonologyContent.phonotactics.coda.length > 0)
&& (
<div>
<h4 className='title is-4'>
Phonotactics
</h4>
<div className='columns'>
<div className='column is-one-third'>
<strong>Onset:</strong>
<div className='tags'>
{phonologyContent.phonotactics.onset.map(onset => {
return (
<span key={`onset_${ onset }_${ Date.now().toString() }`}
className='tag'>
{ onset }
</span>
);
})}
</div>
</div>
<div className='column is-one-third'>
<strong>Nucleus:</strong>
<div className='tags'>
{phonologyContent.phonotactics.nucleus.map(nucleus => {
return (
<span key={`onset_${ nucleus }_${ Date.now().toString() }`}
className='tag'>
{ nucleus }
</span>
);
})}
</div>
</div>
<div className='column is-one-third'>
<strong>Coda:</strong>
<div className='tags'>
{phonologyContent.phonotactics.coda.map(coda => {
return (
<span key={`onset_${ coda }_${ Date.now().toString() }`}
className='tag'>
{ coda }
</span>
);
})}
</div>
</div>
</div>
{
phonologyContent.phonotactics.exceptions.trim() !== ''
&& (
<div className='columns'>
<div className='column'>
<strong>Exceptions:</strong>
<div className="content"
dangerouslySetInnerHTML={{
__html: marked(phonologyContent.phonotactics.exceptions),
}} />
</div>
</div>
)
}
</div>
)
}
</div>
);
}

123
src/components/display/DictionaryDetails/DetailsSection/index.jsx Normal file
View file

@ -0,0 +1,123 @@
import Inferno from 'inferno';
import Component from 'inferno-component';
import marked from 'marked';
import { PhonologyDisplay } from './PhonologyDisplay';
const DISPLAY = {
NONE: false,
DESCRIPTION: 1,
DETAILS: 2,
STATS: 3,
}
export class DetailsSection extends Component {
constructor (props) {
super(props);
this.defaultMenuItems = [
'Phonology',
'Grammar',
];
this.state = {
currentDisplay: 0,
}
}
mapCustomMenuItems (customTabs) {
return customTabs.map(tab => {
return tab.name;
});
}
displayDetails () {
const { currentDisplay } = this.state;
const { details } = this.props;
const defaultMenuLength = this.defaultMenuItems.length;
if (currentDisplay < defaultMenuLength) {
switch (this.defaultMenuItems[currentDisplay]) {
case 'Phonology': {
return <PhonologyDisplay phonologyContent={details.phonology} />
break;
}
case 'Grammar': {
return 'Grammar content!';
break;
}
}
} else {
return (
<div className='content'>
<div dangerouslySetInnerHTML={{
__html: marked(details.custom[currentDisplay - defaultMenuLength].content),
}} />
</div>
);
}
}
render () {
const { details } = this.props;
let additionalMenu = (
<div>
<p className='menu-label'>
Additional
</p>
<ul className='menu-list'>
{
details.custom.map((tab, index) => {
const tabId = index + this.defaultMenuItems.length;
return (
<li key={ `customTab_${ tabId }_${ Date.now().toString() }` }>
<a className={(this.state.currentDisplay === tabId) ? 'is-active' : null}
onClick={ () => this.setState({ currentDisplay: tabId }) }
>
{ tab.name }
</a>
</li>
);
})
}
</ul>
</div>
);
const menu = (
<div className='menu'>
<p className='menu-label'>
Linguistics
</p>
<ul className='menu-list'>
{this.defaultMenuItems.map((tab, index) => {
return (
<li key={ `${ tab }_${ index }_${ Date.now().toString() }` }>
<a className={(this.state.currentDisplay === index) ? 'is-active' : null}
onClick={ () => this.setState({ currentDisplay: index }) }
>
{ tab.capitalize() }
</a>
</li>
);
})}
</ul>
{ additionalMenu }
</div>
);
return (
<div className='columns'>
<aside className='column is-one-quarter'>
{ menu }
</aside>
<div className='column'>
{ this.displayDetails() }
</div>
</div>
);
}
}

59
src/components/display/DictionaryDetails/index.jsx
View file

@ -2,7 +2,8 @@ import Inferno from 'inferno';
import Component from 'inferno-component';
import marked from 'marked';
import { EditDictionaryModal } from './EditDictionaryModal';
import { EditDictionaryModal } from '../../management/EditDictionaryModal';
import { DetailsSection } from './DetailsSection';
const DISPLAY = {
NONE: false,
@ -51,7 +52,7 @@ export class DictionaryDetails extends Component {
<div>
<div className="content"
dangerouslySetInnerHTML={{
__html: this._descriptionHTML
__html: this._descriptionHTML,
}} />
</div>
);
@ -59,59 +60,7 @@ export class DictionaryDetails extends Component {
}
case DISPLAY.DETAILS : {
let additionalMenu;
if (this.props.details.hasOwnProperty('custom')) {
let customTabsJSX = this.props.details.custom.map((tab) => {
return (
<li key={ 'customTab' + Date.now().toString() }>
<a>
{ tab.name }
</a>
</li>
);
});
additionalMenu = (
<div>
<p className="menu-label">
Additional
</p>
<ul className="menu-list">
{ customTabsJSX }
</ul>
</div>
);
}
const menu = (
<aside className="column is-one-quarter menu">
<p className="menu-label">
Linguistics
</p>
<ul className="menu-list">
<li><a className="is-active">Phonology</a></li>
<li><a>Grammar</a></li>
</ul>
{ additionalMenu }
</aside>
);
let content = (
<div className='column'>
<p>
Details Content!
</p>
</div>
);
displayJSX = (
<div className='columns'>
{ menu }
{ content }
</div>
);
displayJSX = <DetailsSection details={ this.props.details } />;
break;
}