diff --git a/src/js/render.js b/src/js/render.js index fddddeb..c30136a 100644 --- a/src/js/render.js +++ b/src/js/render.js @@ -3,7 +3,7 @@ import { removeTags, slugify } from '../helpers'; import { getWordsStats, wordExists } from './utilities'; import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search'; import { showSection } from './displayToggles'; -import { setupSearchFilters, setupWordOptionButtons, setupPagination } from './setupListeners'; +import { setupSearchFilters, setupWordOptionButtons, setupPagination, setupWordOptionSelections, setupEditFormButtons } from './setupListeners'; import { DEFAULT_PAGE_SIZE } from '../constants'; export function renderAll() { @@ -156,6 +156,7 @@ export function renderWords() { document.getElementById('entries').innerHTML = wordsHTML; setupWordOptionButtons(); + setupWordOptionSelections(); // Show Search Results const searchTerm = getSearchTerm(); @@ -193,7 +194,7 @@ export function renderPagination() { export function renderEditForm() { const wordId = parseInt(this.id.replace('edit_', '')); const word = window.currentDictionary.words.find(w => w.wordId === wordId); - if (wordToEdit) { + if (word) { const editForm = `
- Save Changes - Cancel Edit + Save Changes + Cancel Edit
`; + + document.getElementById(wordId.toString()).innerHTML = editForm; + setupEditFormButtons(); } } \ No newline at end of file diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js index 7ae3be4..1dc1b5f 100644 --- a/src/js/setupListeners.js +++ b/src/js/setupListeners.js @@ -173,6 +173,19 @@ export function setupWordOptionSelections() { }); } +export function setupEditFormButtons() { + const saveChangesButtons = document.getElementsByClassName('edit-save-changes'); + const cancelChangesButtons = document.getElementsByClassName('edit-cancel'); + Array.from(saveChangesButtons).forEach(button => { + button.removeEventListener('click', renderEditForm); + button.addEventListener('click', renderEditForm); + }); + Array.from(cancelChangesButtons).forEach(button => { + button.removeEventListener('click', renderWords); + button.addEventListener('click', renderWords); + }); +} + export function setupPagination() { const nextButtons = document.getElementsByClassName('next-button'), prevButtons = document.getElementsByClassName('prev-button'), diff --git a/src/styles/_structure.scss b/src/styles/_structure.scss index fe6e00c..c2d9083 100644 --- a/src/styles/_structure.scss +++ b/src/styles/_structure.scss @@ -77,6 +77,11 @@ overflow-y: auto; } +.edit-form { + padding: $general-padding; + max-width: 500px; +} + #detailsSection { padding: 20px; background-color: $white;