Add setting to set default advanced form display

src/constants.js

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

src/js/render/words.js

@@ -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>

src/js/settings.js

@@ -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';
+    }
+  });
+}

template-index.html

@@ -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>