Alamantus
/
Lexiconga
mirror of https://github.com/Alamantus/Lexiconga.git
1
0
Fork 0
Code Issues Releases Activity

Improve Details display of tags

This commit is contained in:
Robbie Antenesse 2019-07-06 22:40:58 -06:00 committed by Robbie Antenesse
parent 1491fd1196
commit 4c5dafd6f0
2 changed files with 49 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/js/render.js
View File

@ -76,16 +76,16 @@ export function renderDescription() {
export function renderDetails() {
const { partsOfSpeech, alphabeticalOrder } = window.currentDictionary;
const { phonology, phonotactics, orthography, grammar } = window.currentDictionary.details;
const partsOfSpeechHTML = `<p><strong>Parts of Speech:</strong> ${partsOfSpeech.map(partOfSpeech => '<span class="tag">' + partOfSpeech + '</span>').join(' ')}</p>`;
const alphabeticalOrderHTML = `<p><strong>Alphabetical Order:</strong> ${
const partsOfSpeechHTML = `<p><strong>Parts of Speech</strong><br>${partsOfSpeech.map(partOfSpeech => '<span class="tag">' + partOfSpeech + '</span>').join(' ')}</div>`;
const alphabeticalOrderHTML = `<p><strong>Alphabetical Order</strong><br>${
(alphabeticalOrder.length > 0 ? alphabeticalOrder : ['English Alphabet']).map(letter => `<span class="tag">${letter}</span>`).join(' ')
}</p>`;
}</div>`;
const generalHTML = `<h3>General</h3>${partsOfSpeechHTML}${alphabeticalOrderHTML}`;
const { consonants, vowels, blends } = phonology
const consonantHTML = `<p><strong>Consonants:</strong> ${consonants.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const vowelHTML = `<p><strong>Vowels:</strong> ${vowels.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const blendHTML = blends.length > 0 ? `<p><strong>Polyphthongs&nbsp;/&nbsp;Blends:</strong> ${blends.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>` : '';
const consonantHTML = `<p><strong>Consonants</strong><br>${consonants.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const vowelHTML = `<p><strong>Vowels</strong><br>${vowels.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const blendHTML = blends.length > 0 ? `<p><strong>Polyphthongs&nbsp;/&nbsp;Blends</strong><br>${blends.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>` : '';
const phonologyHTML = `<h3>Phonology</h3>
<div class="split two">
<div>${consonantHTML}</div>
@ -94,31 +94,35 @@ export function renderDetails() {
${blendHTML}`;
const { onset, nucleus, coda } = phonotactics;
const onsetHTML = `<p><strong>Onset:</strong> ${onset.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const nucleusHTML = `<p><strong>Nucleus:</strong> ${nucleus.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const codaHTML = `<p><strong>Coda:</strong> ${coda.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const phonotacticsNotesHTML = phonotactics.notes.trim().length > 0 ? '<p><strong>Notes:</strong></p><div>' + md(removeTags(phonotactics.notes)) + '</div>' : '';
const phonotacticsHTML = `<h3>Phonotactics</h3>
const onsetHTML = `<p><strong>Onset</strong><br>${onset.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const nucleusHTML = `<p><strong>Nucleus</strong><br>${nucleus.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const codaHTML = `<p><strong>Coda</strong><br>${coda.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const phonotacticsNotesHTML = phonotactics.notes.trim().length > 0 ? '<p><strong>Notes</strong></p><div>' + md(removeTags(phonotactics.notes)) + '</div>' : '';
const phonotacticsHTML = onset.length + nucleus.length + coda.length + phonotacticsNotesHTML.length > 0
? `<h3>Phonotactics</h3>
<div class="split three">
<div>${onsetHTML}</div>
<div>${nucleusHTML}</div>
<div>${codaHTML}</div>
<div>${onsetHTML}</div>
<div>${nucleusHTML}</div>
<div>${codaHTML}</div>
</div>
${phonotacticsNotesHTML}`;
${phonotacticsNotesHTML}`
: '';
const { translations } = orthography;
const translationsHTML = `<p><strong>Translations</strong></p><div>${translations.map(translation => {
const translationsHTML = `<p><strong>Translations</strong><br>${translations.map(translation => {
translation = translation.split('=').map(value => value.trim());
if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') {
return `<span><span class="tag">${translation[0]}</span><span class="tag">${translation[1]}</span></span>`;
}
return false;
}).filter(html => html !== false).join(' ')}</div>`;
const orthographyNotesHTML = '<p><strong>Notes</strong></p><div>' + md(removeTags(orthography.notes)) + '</div>';
const orthographyHTML = `<h3>Orthography</h3>
}).filter(html => html !== false).join(' ')}</p>`;
const orthographyNotesHTML = orthography.notes.trim().length > 0 ? '<p><strong>Notes</strong><br>' + md(removeTags(orthography.notes)) + '</div>' : '';
const orthographyHTML = translations.length > 0 && orthographyNotesHTML.length > 0
? `<h3>Orthography</h3>
${translations.length > 0 ? translationsHTML : ''}
${orthographyNotesHTML}`;
const grammarHTML = '<h3>Grammar</h3><p><strong>Notes:</strong></p><div>' + md(removeTags(grammar.notes)) + '</div>';
${orthographyNotesHTML}`
: '';
const grammarHTML = '<h3>Grammar</h3><div>' + md(removeTags(grammar.notes)) + '</div>';
detailsPanel.innerHTML = generalHTML + phonologyHTML + phonotacticsHTML + orthographyHTML + grammarHTML;
}

44
src/js/view/render.js
View File

@ -43,16 +43,16 @@ export function renderDescription() {
export function renderDetails() {
const { partsOfSpeech, alphabeticalOrder } = window.currentDictionary;
const { phonology, phonotactics, orthography, grammar } = window.currentDictionary.details;
const partsOfSpeechHTML = `<p><strong>Parts of Speech:</strong></p><div>${partsOfSpeech.map(partOfSpeech => '<span class="tag">' + partOfSpeech + '</span>').join(' ')}</div>`;
const alphabeticalOrderHTML = `<p><strong>Alphabetical Order:</strong></p><div>${
const partsOfSpeechHTML = `<p><strong>Parts of Speech</strong><br>${partsOfSpeech.map(partOfSpeech => '<span class="tag">' + partOfSpeech + '</span>').join(' ')}</div>`;
const alphabeticalOrderHTML = `<p><strong>Alphabetical Order</strong><br>${
(alphabeticalOrder.length > 0 ? alphabeticalOrder : ['English Alphabet']).map(letter => `<span class="tag">${letter}</span>`).join(' ')
}</div>`;
const generalHTML = `<h3>General</h3>${partsOfSpeechHTML}${alphabeticalOrderHTML}`;
const { consonants, vowels, blends } = phonology
const consonantHTML = `<p><strong>Consonants:</strong></p><div>${consonants.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</div>`;
const vowelHTML = `<p><strong>Vowels:</strong></p><div>${vowels.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</div>`;
const blendHTML = blends.length > 0 ? `<p><strong>Polyphthongs&nbsp;/&nbsp;Blends:</strong></p><div>${blends.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>` : '';
const consonantHTML = `<p><strong>Consonants</strong><br>${consonants.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const vowelHTML = `<p><strong>Vowels</strong><br>${vowels.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const blendHTML = blends.length > 0 ? `<p><strong>Polyphthongs&nbsp;/&nbsp;Blends</strong><br>${blends.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>` : '';
const phonologyHTML = `<h3>Phonology</h3>
<div class="split two">
<div>${consonantHTML}</div>
@ -61,30 +61,34 @@ export function renderDetails() {
${blendHTML}`;
const { onset, nucleus, coda } = phonotactics;
const onsetHTML = `<p><strong>Onset:</strong></p><div>${onset.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</div>`;
const nucleusHTML = `<p><strong>Nucleus:</strong></p><div>${nucleus.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</div>`;
const codaHTML = `<p><strong>Coda:</strong></p><div>${coda.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</div>`;
const phonotacticsNotesHTML = phonotactics.notes.trim().length > 0 ? '<p><strong>Notes:</strong></p><div>' + md(removeTags(phonotactics.notes)) + '</div>' : '';
const phonotacticsHTML = `<h3>Phonotactics</h3>
const onsetHTML = `<p><strong>Onset</strong><br>${onset.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const nucleusHTML = `<p><strong>Nucleus</strong><br>${nucleus.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const codaHTML = `<p><strong>Coda</strong><br>${coda.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
const phonotacticsNotesHTML = phonotactics.notes.trim().length > 0 ? '<p><strong>Notes</strong></p><div>' + md(removeTags(phonotactics.notes)) + '</div>' : '';
const phonotacticsHTML = onset.length + nucleus.length + coda.length + phonotacticsNotesHTML.length > 0
? `<h3>Phonotactics</h3>
<div class="split three">
<div>${onsetHTML}</div>
<div>${nucleusHTML}</div>
<div>${codaHTML}</div>
<div>${onsetHTML}</div>
<div>${nucleusHTML}</div>
<div>${codaHTML}</div>
</div>
${phonotacticsNotesHTML}`;
${phonotacticsNotesHTML}`
: '';
const { translations } = orthography;
const translationsHTML = `<p><strong>Translations</strong></p><div>${translations.map(translation => {
const translationsHTML = `<p><strong>Translations</strong><br>${translations.map(translation => {
translation = translation.split('=').map(value => value.trim());
if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') {
return `<span><span class="tag">${translation[0]}</span><span class="tag orthographic-translation">${translation[1]}</span></span>`;
return `<span><span class="tag">${translation[0]}</span><span class="tag">${translation[1]}</span></span>`;
}
return false;
}).filter(html => html !== false).join(' ')}</div>`;
const orthographyNotesHTML = '<p><strong>Notes</strong></p><div>' + md(removeTags(orthography.notes)) + '</div>';
const orthographyHTML = `<h3>Orthography</h3>
}).filter(html => html !== false).join(' ')}</p>`;
const orthographyNotesHTML = orthography.notes.trim().length > 0 ? '<p><strong>Notes</strong><br>' + md(removeTags(orthography.notes)) + '</div>' : '';
const orthographyHTML = translations.length > 0 && orthographyNotesHTML.length > 0
? `<h3>Orthography</h3>
${translations.length > 0 ? translationsHTML : ''}
${orthographyNotesHTML}`;
${orthographyNotesHTML}`
: '';
const grammarHTML = '<h3>Grammar</h3><div>' + md(removeTags(grammar.notes)) + '</div>';
detailsPanel.innerHTML = generalHTML + phonologyHTML + phonotacticsHTML + orthographyHTML + grammarHTML;