Add setting to set default advanced form display

This commit is contained in:
Robbie Antenesse 2020-04-30 01:20:10 -06:00
parent 98cdd763f8
commit 65cf421cbe
4 changed files with 41 additions and 4 deletions

View File

@ -55,6 +55,7 @@ export const DEFAULT_DICTIONARY = {
export const DEFAULT_SETTINGS = {
useIPAPronunciationField: true,
useHotkeys: true,
showAdvanced: false,
defaultTheme: 'default',
};

View File

@ -161,9 +161,9 @@ export function renderEditForm(wordId = false) {
<textarea id="wordDetails_${wordId}" placeholder="Markdown formatting allowed">${word.details}</textarea>
</label>
<label>
<a id="expandAdvancedForm_${wordId}" class="small button expand-advanced-form">Show Advanced Fields</a>
<a id="expandAdvancedForm_${wordId}" class="small button expand-advanced-form">${window.settings.showAdvanced ? 'Hide' : 'Show'} Advanced Fields</a>
</label>
<div id="advancedForm_${wordId}" class="advanced-word-form" style="display:none;">
<div id="advancedForm_${wordId}" class="advanced-word-form" style="display:${window.settings.showAdvanced ? 'block' : 'none'};">
<label>Etymology / Root Words<br>
<input id="wordEtymology_${wordId}" maxlength="2500" placeholder="comma,separated,root,words" value="${word.hasOwnProperty('etymology') ? word.etymology : ''}">
</label>

View File

@ -9,6 +9,7 @@ export function loadSettings() {
const storedSettings = window.localStorage.getItem(SETTINGS_KEY);
window.settings = storedSettings ? JSON.parse(storedSettings) : cloneObject(DEFAULT_SETTINGS);
toggleIPAPronunciationFields(false);
toggleShowAdvancedFields();
}
export function saveSettings() {
@ -17,10 +18,11 @@ export function saveSettings() {
}
export function openSettingsModal() {
const { useIPAPronunciationField, useHotkeys, defaultTheme } = window.settings;
const { useIPAPronunciationField, useHotkeys, showAdvanced, defaultTheme } = window.settings;
document.getElementById('settingsUseIPA').checked = useIPAPronunciationField;
document.getElementById('settingsUseHotkeys').checked = useHotkeys;
document.getElementById('settingsShowAdvanced').checked = showAdvanced;
document.getElementById('settingsDefaultTheme').value = defaultTheme;
document.getElementById('settingsModal').style.display = '';
@ -30,6 +32,7 @@ export function saveSettingsModal() {
const updatedSettings = cloneObject(window.settings);
updatedSettings.useIPAPronunciationField = document.getElementById('settingsUseIPA').checked;
updatedSettings.useHotkeys = document.getElementById('settingsUseHotkeys').checked;
updatedSettings.showAdvanced = document.getElementById('settingsShowAdvanced').checked;
updatedSettings.defaultTheme = document.getElementById('settingsDefaultTheme').value;
if (hasToken()) {
@ -62,6 +65,7 @@ export function saveSettingsModal() {
saveSettings();
toggleHotkeysEnabled();
toggleIPAPronunciationFields();
toggleShowAdvancedFields();
} else {
addMessage('No changes made to Settings.');
}
@ -101,3 +105,30 @@ export function toggleIPAPronunciationFields(render = true) {
renderWords();
}
}
export function toggleShowAdvancedFields() {
const buttons = document.getElementsByClassName('expand-advanced-form'),
forms = document.getElementsByClassName('advanced-word-form');
const formsWithFilledFields = [];
Array.from(forms).forEach(form => {
const fields = form.querySelectorAll('input, textarea');
const formHasFieldFilled = Array.from(fields).some(field => field.value.trim() !== '');
if (window.settings.showAdvanced || formHasFieldFilled) {
form.style.display = 'block';
} else {
form.style.display = 'none';
}
if (formHasFieldFilled) {
formsWithFilledFields.push(form.id.replace('advancedForm', ''));
}
});
Array.from(buttons).forEach(button => {
const formHasFilledField = formsWithFilledFields.includes(button.id.replace('expandAdvancedForm', ''));
if (window.settings.showAdvanced || formHasFilledField) {
button.innerText = 'Hide Advanced Fields';
} else {
button.innerText = 'Show Advanced Fields';
}
});
}

View File

@ -142,7 +142,7 @@
<label>
<a id="expandAdvancedForm" class="small button expand-advanced-form">Show Advanced Fields</a>
</label>
<div id="advancedForm" style="display:none;">
<div id="advancedForm" class="advanced-word-form" style="display:none;">
<label>Etymology / Root Words<br>
<input id="wordEtymology" maxlength="2500" placeholder="comma,separated,root,words">
</label>
@ -214,6 +214,11 @@
<small>Check this to enable keyboard combinations to perform different helpful actions.</small>
</label>
<label>Show Advanced Fields By Default
<input id="settingsShowAdvanced" type="checkbox"><br />
<small>Check this to make the advanced fields show on word forms without needing to click the "Show Advanced Fields" button.</small>
</label>
<label>Default Theme <small>(the theme new dictionaries will use)</small>
<select id="settingsDefaultTheme">
<option value="default">Default</option>