Finish converting the rest of the click listeners

src/js/render/modals.js

@@ -30,7 +30,7 @@ export function renderIPATable(ipaTableButton) {
 
   document.body.appendChild(modalElement);
 
-  setupIPAFields();
+  setupIPAFields(modalElement);
   setupIPATable(modalElement, textBox);
 }
 

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 ? `<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 class="word-option word-option-edit" id="edit_${word.wordId}">Edit</div>
+        <div class="word-option word-option-delete" id="delete_${word.wordId}">Delete</div>
       </div>
     </header>
     <dl>
@@ -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) {
     </form>`;
 
     document.getElementById(wordId.toString()).innerHTML = editForm;
-    setupWordEditFormButtons();
     renderPartsOfSpeech(true);
     renderTemplateSelectOptions();
   }

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));
 }

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';

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);
   });
 }
 

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() {

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();
       }
     }