diff --git a/index.html b/index.html index 134fc26..a9adf8e 100644 --- a/index.html +++ b/index.html @@ -145,7 +145,7 @@ Use IPA Auto-Fill - + Check this to use character combinations to input International Phonetic Alphabet characters into Pronunciation fields. diff --git a/src/constants.js b/src/constants.js index 1c29ef3..11abc87 100644 --- a/src/constants.js +++ b/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'; diff --git a/src/index.js b/src/index.js index 836e5eb..e47eed6 100644 --- a/src/index.js +++ b/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(); diff --git a/src/js/render.js b/src/js/render.js index 6319340..e85693e 100644 --- a/src/js/render.js +++ b/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 = `PronunciationIPA Chart + + Field Help + `; + const plainPronunciationField = `Pronunciation + + `; const editForm = ` Word* - PronunciationIPA Chart - - Field Help - + ${window.settings.useIPAPronunciationField ? ipaPronunciationField : plainPronunciationField} Part of Speech ${word.partOfSpeech} diff --git a/src/js/settings.js b/src/js/settings.js new file mode 100644 index 0000000..e637846 --- /dev/null +++ b/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(); +} diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js index de9c62f..cb4aff8 100644 --- a/src/js/setupListeners.js +++ b/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() { - const ipaFields = document.getElementsByClassName('ipa-field'); - Array.from(ipaFields).forEach(field => { - field.removeEventListener('keypress', usePhondueDigraphs); - field.addEventListener('keypress', usePhondueDigraphs); - }); + if (window.settings.useIPAPronunciationField) { + const ipaFields = document.getElementsByClassName('ipa-field'); + Array.from(ipaFields).forEach(field => { + field.removeEventListener('keypress', usePhondueDigraphs); + field.addEventListener('keypress', usePhondueDigraphs); + }); + } setupIPAButtons(); }