Set up settings for useIPAPronunciationField

index.html

@@ -145,7 +145,7 @@
       <section>
         <form>
           <label>Use IPA Auto-Fill
-            <input type="checkbox" checked><br />
+            <input id="settingsUseIPA" type="checkbox" checked><br />
             <small>Check this to use character combinations to input International Phonetic Alphabet characters into
               Pronunciation fields.</small>
           </label>

src/constants.js

@@ -54,6 +54,11 @@ export const DEFAULT_DICTIONARY = {
   version: MIGRATE_VERSION,
 };
 
+export const DEFAULT_SETTINGS = {
+  useIPAPronunciationField: true,
+};
+
 export const DEFAULT_PAGE_SIZE = 50;
 
 export const LOCAL_STORAGE_KEY = 'dictionary';
+export const SETTINGS_KEY = 'settings';

src/index.js

@@ -4,10 +4,12 @@ import setupListeners from './js/setupListeners';
 import { renderAll } from './js/render';
 import { generateRandomWords, addMessage } from './js/utilities';
 import { loadDictionary } from './js/dictionaryManagement';
+import { loadSettings } from './js/settings';
 
 function initialize() {
   addMessage('Loading!');
   loadDictionary();
+  loadSettings();
   // generateRandomWords(100);
   setupListeners();
   renderAll();

src/js/render.js

@@ -231,14 +231,18 @@ 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 ipaPronunciationField = `<label>Pronunciation<a class="label-button ipa-table-button">IPA Chart</a><br>
+      <input id="wordPronunciation_${wordId}" class="ipa-field" value="${word.pronunciation}"><br>
+      <a class="label-help-button ipa-field-help-button">Field Help</a>
+    </label>`;
+    const plainPronunciationField = `<label>Pronunciation<br>
+      <input id="wordPronunciation_${wordId}" value="${word.pronunciation}">
+    </label>`;
     const editForm = `<form id="editForm_${wordId}" class="edit-form">
       <label>Word<span class="red">*</span><br>
         <input id="wordName_${wordId}" value="${word.name}">
       </label>
-      <label>Pronunciation<a class="label-button ipa-table-button">IPA Chart</a><br>
-        <input id="wordPronunciation_${wordId}" value="${word.pronunciation}"><br>
-        <a class="label-help-button ipa-field-help-button">Field Help</a>
-      </label>
+      ${window.settings.useIPAPronunciationField ? ipaPronunciationField : plainPronunciationField}
       <label>Part of Speech<br>
         <select id="wordPartOfSpeech_${wordId}" class="part-of-speech-select">
           <option value="${word.partOfSpeech}" selected>${word.partOfSpeech}</option>

src/js/settings.js

@@ -0,0 +1,55 @@
+import { SETTINGS_KEY, DEFAULT_SETTINGS } from "../constants";
+import { cloneObject } from "../helpers";
+import { usePhondueDigraphs } from "./KeyboardFire/phondue/ipaField";
+import { renderWords } from "./render";
+
+export function loadSettings() {
+  const storedSettings = window.localStorage.getItem(SETTINGS_KEY);
+  window.settings = storedSettings ? JSON.parse(storedSettings) : cloneObject(DEFAULT_SETTINGS);
+  toggleIPAPronunciationFields();
+}
+
+export function saveSettings() {
+  window.localStorage.setItem(SETTINGS_KEY, JSON.stringify(window.settings));
+}
+
+export function openSettingsModal() {
+  const { useIPAPronunciationField } = window.settings;
+
+  document.getElementById('settingsUseIPA').checked = useIPAPronunciationField;
+
+  document.getElementById('settingsModal').style.display = '';
+}
+
+export function saveSettingsModal() {
+  window.settings.useIPAPronunciationField = document.getElementById('settingsUseIPA').checked;
+
+  saveSettings();
+  toggleIPAPronunciationFields();
+}
+
+export function saveAndCloseSettingsModal() {
+  saveSettingsModal();
+  document.getElementById('settingsModal').style.display = 'none';
+}
+
+export function toggleIPAPronunciationFields() {
+  const ipaButtons = document.querySelectorAll('.ipa-table-button, .ipa-field-help-button'),
+    ipaFields = document.querySelectorAll('.ipa-field');
+  if (!window.settings.useIPAPronunciationField) {
+    Array.from(ipaButtons).forEach(button => {
+      button.style.display = 'none';
+    });
+    Array.from(ipaFields).forEach(field => {
+      field.removeEventListener('keypress', usePhondueDigraphs);
+    });
+  } else {
+    Array.from(ipaButtons).forEach(button => {
+      button.style.display = '';
+    });
+    Array.from(ipaFields).forEach(field => {
+      field.addEventListener('keypress', usePhondueDigraphs);
+    });
+  }
+  renderWords();
+}

src/js/setupListeners.js

@@ -7,6 +7,7 @@ import { openEditModal, saveEditModal, saveAndCloseEditModal } from './dictionar
 import { goToNextPage, goToPreviousPage, goToPage } from './pagination';
 import { insertAtCursor } from './StackOverflow/inputCursorManagement';
 import { usePhondueDigraphs } from './KeyboardFire/phondue/ipaField';
+import { openSettingsModal, saveSettingsModal, saveAndCloseSettingsModal } from './settings';
 
 export default function setupListeners() {
   setupDetailsTabs();
@@ -212,9 +213,9 @@ export function setupWordOptionSelections() {
 }
 
 export function setupSettingsModal() {
-  document.getElementById('settingsButton').addEventListener('click', () => {
-    document.getElementById('settingsModal').style.display = '';
-  });
+  document.getElementById('settingsButton').addEventListener('click', openSettingsModal);
+  document.getElementById('settingsSave').addEventListener('click', saveSettingsModal);
+  document.getElementById('settingsSaveAndClose').addEventListener('click', saveAndCloseSettingsModal);
 }
 
 export function setupWordEditFormButtons() {
@@ -269,11 +270,13 @@ export function setupPagination() {
 }
 
 export function setupIPAFields() {
+  if (window.settings.useIPAPronunciationField) {
     const ipaFields = document.getElementsByClassName('ipa-field');
     Array.from(ipaFields).forEach(field => {
       field.removeEventListener('keypress', usePhondueDigraphs);
       field.addEventListener('keypress', usePhondueDigraphs);
     });
+  }
 
   setupIPAButtons();
 }