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

Make editing words render in place instead of whole list

This commit is contained in:
Robbie Antenesse 2020-07-31 12:20:06 -06:00
parent abacf7a56a
commit ce06308c1d
2 changed files with 70 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/js/render/words.js
View File

@ -14,6 +14,57 @@ import { renderAd } from '../ads';
import { getPublicLink } from '../account/utilities'; import { getPublicLink } from '../account/utilities';
import { renderPartsOfSpeech } from './details'; 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 `<article class="entry" id="${word.wordId}">
<header>
<h4 class="word"><span class="orthographic-translation">${wordNameDisplay}</span>${homonymnNumber > 0 ? ' <sub>' + homonymnNumber.toString() + '</sub>' : ''}</h4>
${word.principalParts === null ? '' : `<span class="principalParts">(${word.principalParts})</span>`}
<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>` : ''}
<span class="small button word-option-button">Options</span>
<div class="word-option-list" style="display:none;">
<div class="word-option" id="edit_${word.wordId}">Edit</div>
<div class="word-option" id="delete_${word.wordId}">Delete</div>
</div>
</header>
<dl>
<dt class="definition">${word.definition}</dt>
<dd class="details">
${md(word.details)}
</dd>
${word.etymology === null && word.related === null ? '' : `<hr>`}
${word.etymology === null ? '' : `<dt>Etymology <small>(Root Word${savedWord.etymology.length !== 1 ? 's' : ''})</small></dt>
<dd class="etymology">
${md(word.etymology).replace(/<\/?p>/g, '')}
</dd>`}
${word.related === null ? '' : `<dt>Related Word${savedWord.related.length !== 1 ? 's' : ''}</dt>
<dd class="related">
${md(word.related).replace(/<\/?p>/g, '')}
</dd>`}
</dl>
</article>`;
}
export function renderWords() { export function renderWords() {
let wordsHTML = ''; let wordsHTML = '';
let openEditForms = getOpenEditForms(); let openEditForms = getOpenEditForms();
@ -52,58 +103,11 @@ export function renderWords() {
// const { pageStart, pageEnd } = getPaginationData(words); // const { pageStart, pageEnd } = getPaginationData(words);
// words.slice(pageStart, pageEnd).forEach(originalWord => { // words.slice(pageStart, pageEnd).forEach(savedWord => {
words.forEach((originalWord, displayIndex) => { words.forEach((savedWord, 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 : '';
wordsHTML += renderAd(displayIndex); wordsHTML += renderAd(displayIndex);
let wordNameDisplay = translateOrthography(word.name); wordsHTML += renderWord(savedWord, isPublic);
wordsHTML += `<article class="entry" id="${word.wordId}">
<header>
<h4 class="word"><span class="orthographic-translation">${wordNameDisplay}</span>${homonymnNumber > 0 ? ' <sub>' + homonymnNumber.toString() + '</sub>' : ''}</h4>
${word.principalParts === null ? '' : `<span class="principalParts">(${word.principalParts})</span>`}
<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>` : ''}
<span class="small button word-option-button">Options</span>
<div class="word-option-list" style="display:none;">
<div class="word-option" id="edit_${word.wordId}">Edit</div>
<div class="word-option" id="delete_${word.wordId}">Delete</div>
</div>
</header>
<dl>
<dt class="definition">${word.definition}</dt>
<dd class="details">
${md(word.details)}
</dd>
${word.etymology === null && word.related === null ? '' : `<hr>`}
${word.etymology === null ? '' : `<dt>Etymology <small>(Root Word${originalWord.etymology.length !== 1 ? 's' : ''})</small></dt>
<dd class="etymology">
${md(word.etymology).replace(/<\/?p>/g, '')}
</dd>`}
${word.related === null ? '' : `<dt>Related Word${originalWord.related.length !== 1 ? 's' : ''}</dt>
<dd class="related">
${md(word.related).replace(/<\/?p>/g, '')}
</dd>`}
</dl>
</article>`;
}); });
} }

17
src/js/wordManagement.js
View File

@ -1,8 +1,9 @@
import { renderWords } from "./render/words"; import { renderWords, renderWord } from "./render/words";
import { wordExists, addMessage, getNextId, hasToken, getHomonymnIndexes } from "./utilities"; import { wordExists, addMessage, getNextId, hasToken, getHomonymnIndexes } from "./utilities";
import removeDiacritics from "./StackOverflow/removeDiacritics"; import removeDiacritics from "./StackOverflow/removeDiacritics";
import { removeTags, getTimestampInSeconds } from "../helpers"; import { removeTags, getTimestampInSeconds } from "../helpers";
import { saveDictionary } from "./dictionaryManagement"; import { saveDictionary } from "./dictionaryManagement";
import { setupWordOptionButtons, setupWordOptionSelections } from "./setupListeners/words";
export function validateWord(word, wordId = false) { export function validateWord(word, wordId = false) {
const errorElementId = wordId === false ? 'wordErrorMessage' : 'wordErrorMessage_' + wordId, const errorElementId = wordId === false ? 'wordErrorMessage' : 'wordErrorMessage_' + wordId,
@ -271,11 +272,23 @@ export function updateWord(word, wordId) {
console.error('Could not find word to update'); console.error('Could not find word to update');
addMessage('Could not find word to update. Please refresh your browser and try again.', 10000, 'error'); addMessage('Could not find word to update. Please refresh your browser and try again.', 10000, 'error');
} else { } 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.lastUpdated = getTimestampInSeconds();
word.createdOn = window.currentDictionary.words[wordIndex].createdOn; word.createdOn = existingWord.createdOn;
window.currentDictionary.words[wordIndex] = word; window.currentDictionary.words[wordIndex] = word;
addMessage('Word Updated Successfully'); addMessage('Word Updated Successfully');
if (needsReRender) {
sortWords(true); sortWords(true);
} else {
document.getElementById(wordId.toString()).outerHTML = renderWord(window.currentDictionary.words[wordIndex], isPublic);
setupWordOptionButtons();
setupWordOptionSelections();
}
if (hasToken()) { if (hasToken()) {
import('./account/index.js').then(account => { import('./account/index.js').then(account => {