From f153e0c3eca1bee7d49bdb1c95d3ebc05e61440e Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Sat, 6 Jul 2019 23:00:09 -0600
Subject: [PATCH] Add extra classes to word references and translated text

---
 src/js/render.js              |  4 ++--
 src/js/view/render.js         |  8 +++++---
 src/js/view/wordManagement.js | 14 ++++++++++++--
 src/js/wordManagement.js      |  2 +-
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/js/render.js b/src/js/render.js
index e3a0e20..cab0567 100644
--- a/src/js/render.js
+++ b/src/js/render.js
@@ -112,7 +112,7 @@ export function renderDetails() {
   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 `<span><span class="tag">${translation[0]}</span><span class="tag orthographic-translation">${translation[1]}</span></span>`;
     }
     return false;
   }).filter(html => html !== false).join(' ')}</p>`;
@@ -218,7 +218,7 @@ export function renderWords() {
 
       wordsHTML += `<article class="entry" id="${word.wordId}">
         <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="part-of-speech">${word.partOfSpeech}</span>
           ${isPublic ? `<a class="small button share-link" href="${shareLink}" target="_blank" title="Public Link to Word">&#10150;</a>` : ''}
diff --git a/src/js/view/render.js b/src/js/view/render.js
index 5aeb88a..da0fc5f 100644
--- a/src/js/view/render.js
+++ b/src/js/view/render.js
@@ -4,7 +4,7 @@ import { getWordsStats, getHomonymnNumber } from './utilities';
 import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search';
 import { showSection } from './displayToggles';
 import { setupSearchFilters, setupInfoModal } from './setupListeners';
-import { parseReferences } from './wordManagement';
+import { parseReferences, translateOrthography } from './wordManagement';
 import { renderAd } from '../ads';
 import { sortWords } from './wordManagement';
 
@@ -79,7 +79,7 @@ export function renderDetails() {
   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 `<span><span class="tag">${translation[0]}</span><span class="tag orthographic-translation">${translation[1]}</span></span>`;
     }
     return false;
   }).filter(html => html !== false).join(' ')}</p>`;
@@ -170,9 +170,11 @@ export function renderWords() {
 
       wordsHTML += renderAd(displayIndex);
 
+      let wordNameDisplay = translateOrthography(word.name);
+
       wordsHTML += `<article class="entry" id="${word.wordId}">
         <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="part-of-speech">${word.partOfSpeech}</span>
           <a href="${shareLink}" target="_blank" class="small button word-option-button" title="Link to Word">&#10150;</a>
diff --git a/src/js/view/wordManagement.js b/src/js/view/wordManagement.js
index 8dfb04f..6a61ff0 100644
--- a/src/js/view/wordManagement.js
+++ b/src/js/view/wordManagement.js
@@ -11,13 +11,23 @@ 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) {
   const references = detailsMarkdown.match(/\{\{.+?\}\}/g);
   if (references && Array.isArray(references)) {
     new Set(references).forEach(reference => {
       let wordToFind = reference.replace(/\{\{|\}\}/g, '');
       let homonymn = 0;
-      
+
       if (wordToFind.includes(':')) {
         const separator = wordToFind.indexOf(':');
         homonymn = wordToFind.substr(separator + 1);
@@ -46,7 +56,7 @@ export function parseReferences(detailsMarkdown) {
           homonymn = 1;
         }
         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);
       }
     });
diff --git a/src/js/wordManagement.js b/src/js/wordManagement.js
index a192346..e037beb 100644
--- a/src/js/wordManagement.js
+++ b/src/js/wordManagement.js
@@ -91,7 +91,7 @@ export function parseReferences(detailsMarkdown) {
           homonymn = 1;
         }
         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);
       }
     });