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
-
Edit
-
Delete
+
Edit
+
Delete
@@ -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();
}
}