diff --git a/src/js/render.js b/src/js/render.js index 630a2a0..2234671 100644 --- a/src/js/render.js +++ b/src/js/render.js @@ -5,6 +5,7 @@ import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearc import { showSection } from './displayToggles'; import { setupSearchFilters, setupWordOptionButtons, setupPagination, setupWordOptionSelections, setupWordEditFormButtons } from './setupListeners'; import { getPaginationData } from './pagination'; +import { getOpenEditForms } from './wordManagement'; export function renderAll() { renderDictionaryDetails(); @@ -108,6 +109,15 @@ export function renderWords() { const words = getMatchingSearchWords(); let wordsHTML = ''; + const openEditForms = getOpenEditForms(); + + if (openEditForms.length > 0) { + // Clone the dom nodes + openEditForms.forEach((wordFormId, index) => { + openEditForms[index] = document.getElementById(wordFormId.toString()).cloneNode(true); + }); + } + // const { pageStart, pageEnd } = getPaginationData(words); // words.slice(pageStart, pageEnd).forEach(originalWord => { @@ -153,6 +163,16 @@ export function renderWords() { }); document.getElementById('entries').innerHTML = wordsHTML; + + if (openEditForms.length > 0) { + // Clone the dom nodes + openEditForms.forEach(editForm => { + const entryElement = document.getElementById(editForm.id); + entryElement.parentNode.replaceChild(editForm, entryElement); + }); + setupWordEditFormButtons(); + } + setupWordOptionButtons(); setupWordOptionSelections(); @@ -186,8 +206,8 @@ export function renderPagination(filteredWords) { } } -export function renderEditForm() { - const wordId = parseInt(this.id.replace('edit_', '')); +export function renderEditForm(wordId = false) { + wordId = typeof wordId.target === 'undefined' ? wordId : parseInt(this.id.replace('edit_', '')); const word = window.currentDictionary.words.find(w => w.wordId === wordId); if (word) { const editForm = `
@@ -216,4 +236,4 @@ export function renderEditForm() { document.getElementById(wordId.toString()).innerHTML = editForm; setupWordEditFormButtons(); } -} \ No newline at end of file +} diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js index e6aa495..2f5741a 100644 --- a/src/js/setupListeners.js +++ b/src/js/setupListeners.js @@ -1,6 +1,6 @@ import {showSection} from './displayToggles'; -import { renderWords, renderWordOptions, destroyWordOptions, renderEditForm } from './render'; -import { validateWord, addWord, confirmEditWord } from './wordManagement'; +import { renderWords, renderEditForm } from './render'; +import { validateWord, addWord, confirmEditWord, cancelEditWord } from './wordManagement'; import { removeTags } from '../helpers'; import { getNextId } from './utilities'; import { openEditModal, save, saveAndClose } from './dictionaryManagement'; @@ -194,8 +194,8 @@ export function setupWordEditFormButtons() { button.addEventListener('click', confirmEditWord); }); Array.from(cancelChangesButtons).forEach(button => { - button.removeEventListener('click', renderWords); - button.addEventListener('click', renderWords); + button.removeEventListener('click', cancelEditWord); + button.addEventListener('click', cancelEditWord); }); } diff --git a/src/js/wordManagement.js b/src/js/wordManagement.js index 6e7ba5c..2de6ef5 100644 --- a/src/js/wordManagement.js +++ b/src/js/wordManagement.js @@ -60,8 +60,7 @@ export function updateWord(word, wordId) { } export function confirmEditWord() { - const button = this; - const wordId = parseInt(button.id.replace('editWordButton_', '')); + const wordId = parseInt(this.id.replace('editWordButton_', '')); const name = document.getElementById('wordName_' + wordId).value, pronunciation = document.getElementById('wordPronunciation_' + wordId).value, partOfSpeech = document.getElementById('wordPartOfSpeech_' + wordId).value, @@ -78,8 +77,30 @@ export function confirmEditWord() { }; if (validateWord(word, wordId)) { - if (confirm(`Are you sure you want save changes to ${word.name}?`)) { + if (confirm(`Are you sure you want to save changes to "${word.name}"?`)) { + document.getElementById('editForm_' + wordId).classList.add('done'); updateWord(word, wordId); } } } + +export function cancelEditWord() { + const wordId = parseInt(this.parentElement.id.replace('editForm_', '')); + console.log('wordId', wordId); + if (confirm(`Are you sure you want to cancel?\n(Any changes will be lost!)`)) { + document.getElementById('editForm_' + wordId).classList.add('done'); + renderWords(); + } +} + +export function getOpenEditForms() { + const openEditForms = document.getElementsByClassName('edit-form'); + const formsToReopen = []; + Array.from(openEditForms).forEach(form => { + if (!form.classList.contains('done')) { + formsToReopen.push(parseInt(form.id.replace('editForm_', ''))); + } + }); + + return formsToReopen; +}