Add extra classes to word references and translated text

This commit is contained in:
Robbie Antenesse 2019-07-06 23:00:09 -06:00 committed by Robbie Antenesse
parent 4c5dafd6f0
commit f153e0c3ec
4 changed files with 20 additions and 8 deletions

View File

@ -112,7 +112,7 @@ export function renderDetails() {
const translationsHTML = `<p><strong>Translations</strong><br>${translations.map(translation => { const translationsHTML = `<p><strong>Translations</strong><br>${translations.map(translation => {
translation = translation.split('=').map(value => value.trim()); translation = translation.split('=').map(value => value.trim());
if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') { if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') {
return `<span><span class="tag">${translation[0]}</span><span class="tag">${translation[1]}</span></span>`; return `<span><span class="tag">${translation[0]}</span><span class="tag orthographic-translation">${translation[1]}</span></span>`;
} }
return false; return false;
}).filter(html => html !== false).join(' ')}</p>`; }).filter(html => html !== false).join(' ')}</p>`;
@ -218,7 +218,7 @@ export function renderWords() {
wordsHTML += `<article class="entry" id="${word.wordId}"> wordsHTML += `<article class="entry" id="${word.wordId}">
<header> <header>
<h4 class="word">${wordNameDisplay}${homonymnNumber > 0 ? ' <sub>' + homonymnNumber.toString() + '</sub>' : ''}</h4> <h4 class="word"><span class="orthographic-translation">${wordNameDisplay}</span>${homonymnNumber > 0 ? ' <sub>' + homonymnNumber.toString() + '</sub>' : ''}</h4>
<span class="pronunciation">${word.pronunciation}</span> <span class="pronunciation">${word.pronunciation}</span>
<span class="part-of-speech">${word.partOfSpeech}</span> <span class="part-of-speech">${word.partOfSpeech}</span>
${isPublic ? `<a class="small button share-link" href="${shareLink}" target="_blank" title="Public Link to Word">&#10150;</a>` : ''} ${isPublic ? `<a class="small button share-link" href="${shareLink}" target="_blank" title="Public Link to Word">&#10150;</a>` : ''}

View File

@ -4,7 +4,7 @@ import { getWordsStats, getHomonymnNumber } from './utilities';
import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search'; import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search';
import { showSection } from './displayToggles'; import { showSection } from './displayToggles';
import { setupSearchFilters, setupInfoModal } from './setupListeners'; import { setupSearchFilters, setupInfoModal } from './setupListeners';
import { parseReferences } from './wordManagement'; import { parseReferences, translateOrthography } from './wordManagement';
import { renderAd } from '../ads'; import { renderAd } from '../ads';
import { sortWords } from './wordManagement'; import { sortWords } from './wordManagement';
@ -79,7 +79,7 @@ export function renderDetails() {
const translationsHTML = `<p><strong>Translations</strong><br>${translations.map(translation => { const translationsHTML = `<p><strong>Translations</strong><br>${translations.map(translation => {
translation = translation.split('=').map(value => value.trim()); translation = translation.split('=').map(value => value.trim());
if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') { if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') {
return `<span><span class="tag">${translation[0]}</span><span class="tag">${translation[1]}</span></span>`; return `<span><span class="tag">${translation[0]}</span><span class="tag orthographic-translation">${translation[1]}</span></span>`;
} }
return false; return false;
}).filter(html => html !== false).join(' ')}</p>`; }).filter(html => html !== false).join(' ')}</p>`;
@ -170,9 +170,11 @@ export function renderWords() {
wordsHTML += renderAd(displayIndex); wordsHTML += renderAd(displayIndex);
let wordNameDisplay = translateOrthography(word.name);
wordsHTML += `<article class="entry" id="${word.wordId}"> wordsHTML += `<article class="entry" id="${word.wordId}">
<header> <header>
<h4 class="word">${word.name}${homonymnNumber > 0 ? ' <sub>' + homonymnNumber.toString() + '</sub>' : ''}</h4> <h4 class="word"><span class="orthographic-translation">${wordNameDisplay}</span>${homonymnNumber > 0 ? ' <sub>' + homonymnNumber.toString() + '</sub>' : ''}</h4>
<span class="pronunciation">${word.pronunciation}</span> <span class="pronunciation">${word.pronunciation}</span>
<span class="part-of-speech">${word.partOfSpeech}</span> <span class="part-of-speech">${word.partOfSpeech}</span>
<a href="${shareLink}" target="_blank" class="small button word-option-button" title="Link to Word">&#10150;</a> <a href="${shareLink}" target="_blank" class="small button word-option-button" title="Link to Word">&#10150;</a>

View File

@ -11,6 +11,16 @@ export function sortWords() {
}); });
} }
export function translateOrthography(word) {
window.currentDictionary.details.orthography.translations.forEach(translation => {
translation = translation.split('=').map(value => value.trim());
if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') {
word = word.replace(new RegExp(translation[0], 'g'), translation[1]);
}
});
return word;
}
export function parseReferences(detailsMarkdown) { export function parseReferences(detailsMarkdown) {
const references = detailsMarkdown.match(/\{\{.+?\}\}/g); const references = detailsMarkdown.match(/\{\{.+?\}\}/g);
if (references && Array.isArray(references)) { if (references && Array.isArray(references)) {
@ -46,7 +56,7 @@ export function parseReferences(detailsMarkdown) {
homonymn = 1; homonymn = 1;
} }
const homonymnSubHTML = homonymn > 0 ? '<sub>' + homonymn.toString() + '</sub>' : ''; const homonymnSubHTML = homonymn > 0 ? '<sub>' + homonymn.toString() + '</sub>' : '';
const wordMarkdownLink = `[${wordToFind}${homonymnSubHTML}](#${existingWordId})`; const wordMarkdownLink = `<span class="word-reference">[<span class="orthographic-translation">${translateOrthography(wordToFind)}</span>${homonymnSubHTML}](#${existingWordId})</span>`;
detailsMarkdown = detailsMarkdown.replace(new RegExp(reference, 'g'), wordMarkdownLink); detailsMarkdown = detailsMarkdown.replace(new RegExp(reference, 'g'), wordMarkdownLink);
} }
}); });

View File

@ -91,7 +91,7 @@ export function parseReferences(detailsMarkdown) {
homonymn = 1; homonymn = 1;
} }
const homonymnSubHTML = homonymn > 0 ? '<sub>' + homonymn.toString() + '</sub>' : ''; const homonymnSubHTML = homonymn > 0 ? '<sub>' + homonymn.toString() + '</sub>' : '';
const wordMarkdownLink = `[${translateOrthography(wordToFind)}${homonymnSubHTML}](#${existingWordId})`; const wordMarkdownLink = `<span class="word-reference">[<span class="orthographic-translation">${translateOrthography(wordToFind)}</span>${homonymnSubHTML}](#${existingWordId})</span>`;
detailsMarkdown = detailsMarkdown.replace(new RegExp(reference, 'g'), wordMarkdownLink); detailsMarkdown = detailsMarkdown.replace(new RegExp(reference, 'g'), wordMarkdownLink);
} }
}); });