diff --git a/src/js/render/words.js b/src/js/render/words.js index 65bc810..c15f36b 100644 --- a/src/js/render/words.js +++ b/src/js/render/words.js @@ -14,6 +14,57 @@ import { renderAd } from '../ads'; import { getPublicLink } from '../account/utilities'; import { renderPartsOfSpeech } from './details'; +export function renderWord(savedWord, isPublic) { + const word = highlightSearchTerm({ + name: removeTags(savedWord.name), + pronunciation: removeTags(savedWord.pronunciation), + partOfSpeech: removeTags(savedWord.partOfSpeech), + definition: removeTags(savedWord.definition), + details: parseReferences(removeTags(savedWord.details)), + etymology: typeof savedWord.etymology === 'undefined' || savedWord.etymology.length < 1 ? null + : savedWord.etymology.map(root => getWordReferenceMarkdown(removeTags(root))).join(', '), + related: typeof savedWord.related === 'undefined' || savedWord.related.length < 1 ? null + : savedWord.related.map(relatedWord => getWordReferenceMarkdown(removeTags(relatedWord))).join(', '), + principalParts: typeof savedWord.principalParts === 'undefined' || savedWord.principalParts.length < 1 ? null + : savedWord.principalParts.join(', '), + wordId: savedWord.wordId, + }); + const homonymnNumber = getHomonymnNumber(savedWord); + const shareLink = window.currentDictionary.hasOwnProperty('externalID') ? getPublicLink() + '/' + word.wordId : ''; + + let wordNameDisplay = translateOrthography(word.name); + + return `
+
+

${wordNameDisplay}${homonymnNumber > 0 ? ' ' + homonymnNumber.toString() + '' : ''}

+ ${word.principalParts === null ? '' : `(${word.principalParts})`} + ${word.pronunciation} + ${word.partOfSpeech} + ${isPublic ? `` : ''} + Options + +
+
+
${word.definition}
+
+ ${md(word.details)} +
+ ${word.etymology === null && word.related === null ? '' : `
`} + ${word.etymology === null ? '' : `
Etymology (Root Word${savedWord.etymology.length !== 1 ? 's' : ''})
+
+ ${md(word.etymology).replace(/<\/?p>/g, '')} +
`} + ${word.related === null ? '' : `
Related Word${savedWord.related.length !== 1 ? 's' : ''}
+ `} +
+
`; +} + export function renderWords() { let wordsHTML = ''; let openEditForms = getOpenEditForms(); @@ -52,58 +103,11 @@ export function renderWords() { // const { pageStart, pageEnd } = getPaginationData(words); - // words.slice(pageStart, pageEnd).forEach(originalWord => { - words.forEach((originalWord, displayIndex) => { - const word = highlightSearchTerm({ - name: removeTags(originalWord.name), - pronunciation: removeTags(originalWord.pronunciation), - partOfSpeech: removeTags(originalWord.partOfSpeech), - definition: removeTags(originalWord.definition), - details: parseReferences(removeTags(originalWord.details)), - etymology: typeof originalWord.etymology === 'undefined' || originalWord.etymology.length < 1 ? null - : originalWord.etymology.map(root => getWordReferenceMarkdown(removeTags(root))).join(', '), - related: typeof originalWord.related === 'undefined' || originalWord.related.length < 1 ? null - : originalWord.related.map(relatedWord => getWordReferenceMarkdown(removeTags(relatedWord))).join(', '), - principalParts: typeof originalWord.principalParts === 'undefined' || originalWord.principalParts.length < 1 ? null - : originalWord.principalParts.join(', '), - wordId: originalWord.wordId, - }); - const homonymnNumber = getHomonymnNumber(originalWord); - const shareLink = window.currentDictionary.hasOwnProperty('externalID') ? getPublicLink() + '/' + word.wordId : ''; - + // words.slice(pageStart, pageEnd).forEach(savedWord => { + words.forEach((savedWord, displayIndex) => { wordsHTML += renderAd(displayIndex); - let wordNameDisplay = translateOrthography(word.name); - - wordsHTML += `
-
-

${wordNameDisplay}${homonymnNumber > 0 ? ' ' + homonymnNumber.toString() + '' : ''}

- ${word.principalParts === null ? '' : `(${word.principalParts})`} - ${word.pronunciation} - ${word.partOfSpeech} - ${isPublic ? `` : ''} - Options - -
-
-
${word.definition}
-
- ${md(word.details)} -
- ${word.etymology === null && word.related === null ? '' : `
`} - ${word.etymology === null ? '' : `
Etymology (Root Word${originalWord.etymology.length !== 1 ? 's' : ''})
-
- ${md(word.etymology).replace(/<\/?p>/g, '')} -
`} - ${word.related === null ? '' : `
Related Word${originalWord.related.length !== 1 ? 's' : ''}
- `} -
-
`; + wordsHTML += renderWord(savedWord, isPublic); }); } diff --git a/src/js/wordManagement.js b/src/js/wordManagement.js index 003f0b6..e5d6a6f 100644 --- a/src/js/wordManagement.js +++ b/src/js/wordManagement.js @@ -1,8 +1,9 @@ -import { renderWords } from "./render/words"; +import { renderWords, renderWord } from "./render/words"; import { wordExists, addMessage, getNextId, hasToken, getHomonymnIndexes } from "./utilities"; import removeDiacritics from "./StackOverflow/removeDiacritics"; import { removeTags, getTimestampInSeconds } from "../helpers"; import { saveDictionary } from "./dictionaryManagement"; +import { setupWordOptionButtons, setupWordOptionSelections } from "./setupListeners/words"; export function validateWord(word, wordId = false) { const errorElementId = wordId === false ? 'wordErrorMessage' : 'wordErrorMessage_' + wordId, @@ -271,11 +272,23 @@ export function updateWord(word, wordId) { console.error('Could not find word to update'); addMessage('Could not find word to update. Please refresh your browser and try again.', 10000, 'error'); } else { + const isPublic = hasToken() && window.currentDictionary.settings.isPublic; + const { sortByDefinition } = window.currentDictionary.settings; + const existingWord = window.currentDictionary.words[wordIndex]; + const needsReRender = (sortByDefinition && word.definition !== existingWord.definition) + || (!sortByDefinition && word.name !== existingWord.name); word.lastUpdated = getTimestampInSeconds(); - word.createdOn = window.currentDictionary.words[wordIndex].createdOn; + word.createdOn = existingWord.createdOn; window.currentDictionary.words[wordIndex] = word; addMessage('Word Updated Successfully'); - sortWords(true); + + if (needsReRender) { + sortWords(true); + } else { + document.getElementById(wordId.toString()).outerHTML = renderWord(window.currentDictionary.words[wordIndex], isPublic); + setupWordOptionButtons(); + setupWordOptionSelections(); + } if (hasToken()) { import('./account/index.js').then(account => {