From 68b97e2267725535f671adabc20957cbc9677a36 Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Sun, 23 Jun 2024 19:46:39 -0600 Subject: [PATCH] Finish converting the rest of the click listeners --- src/js/render/modals.js | 2 +- src/js/render/words.js | 14 ++-- src/js/setupListeners/buttons.js | 14 ++-- src/js/setupListeners/details.js | 6 +- src/js/setupListeners/index.js | 21 +++--- src/js/setupListeners/words.js | 117 +++++++++++-------------------- src/js/wordManagement.js | 3 - 7 files changed, 67 insertions(+), 110 deletions(-) diff --git a/src/js/render/modals.js b/src/js/render/modals.js index 5c5e472..5e8cc28 100644 --- a/src/js/render/modals.js +++ b/src/js/render/modals.js @@ -30,7 +30,7 @@ export function renderIPATable(ipaTableButton) { document.body.appendChild(modalElement); - setupIPAFields(); + setupIPAFields(modalElement); setupIPATable(modalElement, textBox); } diff --git a/src/js/render/words.js b/src/js/render/words.js index 0bf64be..9388dff 100644 --- a/src/js/render/words.js +++ b/src/js/render/words.js @@ -3,16 +3,14 @@ import { removeTags } from '../../helpers'; import { getHomonymnNumber, hasToken } from '../utilities'; import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from '../search'; import { - setupWordOptionButtons, // setupPagination, - setupWordOptionSelections, - setupWordEditFormButtons, } from '../setupListeners/words'; // import { getPaginationData } from '../pagination'; import { getOpenEditForms, translateOrthography, parseReferences, getWordReferenceMarkdown } from '../wordManagement'; import { getPublicLink } from '../account/utilities'; import { renderPartsOfSpeech } from './details'; import { renderTemplateSelectOptions } from './settings'; +import { setupIPAFields } from '../setupListeners'; export function renderWord(savedWord, isPublic) { const word = highlightSearchTerm({ @@ -43,8 +41,8 @@ export function renderWord(savedWord, isPublic) { ${isPublic ? `➦` : ''} Options
@@ -116,13 +114,10 @@ export function renderWords() { openEditForms.forEach(editForm => { const entryElement = document.getElementById(editForm.id); entryElement.parentNode.replaceChild(editForm, entryElement); + setupIPAFields(editForm); }); - setupWordEditFormButtons(); } - setupWordOptionButtons(); - setupWordOptionSelections(); - // Show Search Results const searchTerm = getSearchTerm(); const filters = getSearchFilters(); @@ -206,7 +201,6 @@ export function renderEditForm(wordId = false) { `; document.getElementById(wordId.toString()).innerHTML = editForm; - setupWordEditFormButtons(); renderPartsOfSpeech(true); renderTemplateSelectOptions(); } diff --git a/src/js/setupListeners/buttons.js b/src/js/setupListeners/buttons.js index 5796587..ebe53cd 100644 --- a/src/js/setupListeners/buttons.js +++ b/src/js/setupListeners/buttons.js @@ -47,14 +47,8 @@ export function handleMaximizeButtonClicks(when) { when('.maximize-button', renderMaximizedTextbox); } -export function setupInfoButtons() { - document.getElementById('helpInfoButton').addEventListener('click', () => { - renderInfoModal(helpFile); - }); - document.getElementById('termsInfoButton').addEventListener('click', () => { - renderInfoModal(termsFile); - }); - document.getElementById('privacyInfoButton').addEventListener('click', () => { - renderInfoModal(privacyFile); - }); +export function handleInfoButtonClicks(when) { + when('#helpInfoButton', () => renderInfoModal(helpFile)); + when('#termsInfoButton', () => renderInfoModal(termsFile)); + when('#privacyInfoButton', () => renderInfoModal(privacyFile)); } diff --git a/src/js/setupListeners/details.js b/src/js/setupListeners/details.js index fe2917c..01e9846 100644 --- a/src/js/setupListeners/details.js +++ b/src/js/setupListeners/details.js @@ -20,7 +20,8 @@ export function handleDetailClicks(when) { when('#deleteDictionaryButton', confirmDeleteDictionary); } -function handleClickTab(tabElement) { +function handleClickTab(event) { + const tabElement = event.target; const section = tabElement.innerText.toLowerCase(); if (section === 'edit') { openEditModal(); @@ -37,7 +38,8 @@ function handleClickTab(tabElement) { } } -function handleClickEditFormTab(tabElement) { +function handleClickEditFormTab(event) { + const tabElement = event.target; document.querySelectorAll('#editModal nav li').forEach(t => { t.classList.remove('active'); document.getElementById('edit' + t.innerText + 'Tab').style.display = 'none'; diff --git a/src/js/setupListeners/index.js b/src/js/setupListeners/index.js index c734641..4cf4347 100644 --- a/src/js/setupListeners/index.js +++ b/src/js/setupListeners/index.js @@ -2,9 +2,9 @@ import { usePhondueDigraphs } from '../KeyboardFire/phondue/ipaField'; import { enableHotKeys } from '../hotkeys'; import { dismiss } from '../announcements'; import { handleDetailClicks, setupEditFormInteractions } from './details'; -import { setupWordForm, setupMobileWordFormButton } from './words'; -import { setupInfoButtons, handleIPAButtonClicks, handleMaximizeButtonClicks } from './buttons'; -import { handleTemplateFormClicks, setupTemplateChangeEvents, setupTemplateSelectOptions } from './settings'; +import { setupWordForm, handleWordFormClicks, handleWordOptionClicks, handleWordEditFormButtonClicks } from './words'; +import { setupInfoButtons, handleIPAButtonClicks, handleMaximizeButtonClicks, handleInfoButtonClicks, handleHeaderButtonClicks } from './buttons'; +import { setupTemplateChangeEvents, setupTemplateSelectOptions } from './settings'; import { setupSearchBarEvents } from './search'; export default function setupListeners() { @@ -13,9 +13,8 @@ export default function setupListeners() { setupEditFormInteractions(); setupTemplateChangeEvents(); setupSearchBarEvents(); - setupWordForm(); - setupMobileWordFormButton(); + setupInfoButtons(); setupTemplateSelectOptions(); if (window.settings.useHotkeys) { @@ -26,15 +25,19 @@ export default function setupListeners() { function handleClickEvents(event) { const when = (selector, cb) => { if (event.target.matches(selector)) { - cb(event.target); + cb(event); } }; handleClickAccouncementClose(when); + handleHeaderButtonClicks(when); handleDetailClicks(when); - handleTemplateFormClicks(when); + handleWordFormClicks(when); + handleWordOptionClicks(when); + handleWordEditFormButtonClicks(when); handleIPAButtonClicks(when); handleMaximizeButtonClicks(when); + handleInfoButtonClicks(when); } /** @@ -42,8 +45,8 @@ function handleClickEvents(event) { * @param {Function} when Passed from setupListeners, which listens to clicks on document.body */ function handleClickAccouncementClose(when) { - when('.announcement .close-button', closeElement => { - dismiss(closeElement.parentElement); + when('.announcement .close-button', event => { + dismiss(event.target.parentElement); }); } diff --git a/src/js/setupListeners/words.js b/src/js/setupListeners/words.js index ace57ac..af4ecb7 100644 --- a/src/js/setupListeners/words.js +++ b/src/js/setupListeners/words.js @@ -3,96 +3,63 @@ import { confirmEditWord, cancelEditWord, confirmDeleteWord, expandAdvancedForm, // import { goToNextPage, goToPreviousPage, goToPage } from '../pagination'; import { setupIPAFields } from '.'; +const wordForm = document.getElementById('wordForm'); +const mobileButton = document.getElementById('mobileWordFormShow'); + +/** + * Identify selector strings and handlers + * @param {Function} when Passed from setupListeners, which listens to clicks on document.body + */ +export function handleWordFormClicks(when) { + when('#expandAdvancedForm', expandAdvancedForm); + when('#addWordButton', submitWordForm); + when('#mobileWordFormShow', mobileToggleWordForm); +} + export function setupWordForm() { - const wordForm = document.getElementById('wordForm'), - expandAdvancedFormButton = document.getElementById('expandAdvancedForm'), - addWordButton = document.getElementById('addWordButton'); wordForm.addEventListener('submit', event => { // Allow semantic form and prevent it from getting submitted event.preventDefault(); return false; }); - expandAdvancedFormButton.addEventListener('click', expandAdvancedForm); - addWordButton.addEventListener('click', submitWordForm); - setupIPAFields(); + setupIPAFields(wordForm); } -export function setupWordOptionButtons() { - const wordOptionButtons = document.getElementsByClassName('word-option-button'); - const showWordOptions = function() { - this.parentElement.querySelector('.word-option-list').style.display = ''; +function mobileToggleWordForm() { + if (mobileButton.innerText === '+') { + wordForm.style.display = 'block'; + mobileButton.innerHTML = '×︎'; + } else { + wordForm.style.display = ''; + mobileButton.innerHTML = '+'; } - const hideWordOptions = function(e) { - if (!e.target.classList.contains('word-option-button')) { - const allWordOptions = document.querySelectorAll('.word-option-list'); - Array.from(allWordOptions).forEach(wordOptionList => { - wordOptionList.style.display = 'none'; - }); - } +} + +function showWordOptions(event) { + event.target.parentElement.querySelector('.word-option-list').style.display = ''; +} + +function hideWordOptions(event) { + if (!event.target.classList.contains('word-option-button')) { + const allWordOptions = document.querySelectorAll('.word-option-list'); + Array.from(allWordOptions).forEach(wordOptionList => { + wordOptionList.style.display = 'none'; + }); } - - Array.from(wordOptionButtons).forEach(button => { - button.removeEventListener('click', showWordOptions); - button.addEventListener('click', showWordOptions); - }); - - document.removeEventListener('click', hideWordOptions); - document.addEventListener('click', hideWordOptions); - } -export function setupWordOptionSelections() { - const wordOptions = document.getElementsByClassName('word-option'); - Array.from(wordOptions).forEach(option => { - switch (option.innerText) { - case 'Edit': { - option.removeEventListener('click', renderEditForm); - option.addEventListener('click', renderEditForm); - break; - } - case 'Delete': { - option.removeEventListener('click', confirmDeleteWord); - option.addEventListener('click', confirmDeleteWord); - break; - } - } - }); +export function handleWordOptionClicks(when) { + when('.word-option-button', showWordOptions); + when('*', hideWordOptions); + when('.word-option-edit', renderEditForm); + when('.word-option-delete', confirmDeleteWord); } -export function setupWordEditFormButtons() { - const expandAdvancedFormButtons = document.getElementsByClassName('expand-advanced-form'), - saveChangesButtons = document.getElementsByClassName('edit-save-changes'), - cancelChangesButtons = document.getElementsByClassName('edit-cancel'); - Array.from(expandAdvancedFormButtons).forEach(button => { - button.removeEventListener('click', expandAdvancedForm); - button.addEventListener('click', expandAdvancedForm); - }); - Array.from(saveChangesButtons).forEach(button => { - button.removeEventListener('click', confirmEditWord); - button.addEventListener('click', confirmEditWord); - }); - Array.from(cancelChangesButtons).forEach(button => { - button.removeEventListener('click', cancelEditWord); - button.addEventListener('click', cancelEditWord); - }); - - setupIPAFields(); -} - -export function setupMobileWordFormButton() { - const mobileButton = document.getElementById('mobileWordFormShow'), - wordForm = document.getElementById('wordForm'); - - mobileButton.addEventListener('click', () => { - if (mobileButton.innerText === '+') { - wordForm.style.display = 'block'; - mobileButton.innerHTML = '×︎'; - } else { - wordForm.style.display = ''; - mobileButton.innerHTML = '+'; - } - }); +export function handleWordEditFormButtonClicks(when) { + when('.expand-advanced-form', expandAdvancedForm); + when('.edit-save-changes', confirmEditWord); + when('.edit-cancel', cancelEditWord); } // export function setupPagination() { diff --git a/src/js/wordManagement.js b/src/js/wordManagement.js index d5967c6..d722bc3 100644 --- a/src/js/wordManagement.js +++ b/src/js/wordManagement.js @@ -3,7 +3,6 @@ import { wordExists, addMessage, getNextId, hasToken, getHomonymnIndexes } from import removeDiacritics from "./StackOverflow/removeDiacritics"; import { removeTags, getTimestampInSeconds } from "../helpers"; import { saveDictionary } from "./dictionaryManagement"; -import { setupWordOptionButtons, setupWordOptionSelections } from "./setupListeners/words"; import { wordMatchesSearch } from "./search"; export function validateWord(word, wordId = false) { @@ -295,8 +294,6 @@ export function updateWord(word, wordId) { } else { console.log('matches search, updating in place'); document.getElementById(wordId.toString()).outerHTML = renderWord(window.currentDictionary.words[wordIndex], isPublic); - setupWordOptionButtons(); - setupWordOptionSelections(); } }