Add extra classes to word references and translated text
This commit is contained in:
parent
4c5dafd6f0
commit
f153e0c3ec
|
@ -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">➦</a>` : ''}
|
${isPublic ? `<a class="small button share-link" href="${shareLink}" target="_blank" title="Public Link to Word">➦</a>` : ''}
|
||||||
|
|
|
@ -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">➦</a>
|
<a href="${shareLink}" target="_blank" class="small button word-option-button" title="Link to Word">➦</a>
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue