Add etymology field to advanced word form area

src/js/render/words.js

@@ -160,6 +160,12 @@ export function renderEditForm(wordId = false) {
       <label>Details<span class="red">*</span><a class="label-button maximize-button">Maximize</a><br>
         <textarea id="wordDetails_${wordId}" placeholder="Markdown formatting allowed">${word.details}</textarea>
       </label>
+      <a id="expandAdvancedForm_${wordId}" class="expand-advanced-form">Show Advanced</a>
+      <div id="advancedForm_${wordId}" class="advanced-word-form" style="display:none;">
+        <label>Etymology / Root Words<br>
+          <input id="wordEtymology_${wordId}" maxlength="2500" placeholder="comma,separated,root,words" value="${word.hasOwnProperty('etymology') ? word.etymology : ''}">
+        </label>
+      </div>
       <div id="wordErrorMessage_${wordId}"></div>
       <a class="button edit-save-changes" id="editWordButton_${wordId}">Save Changes</a>
       <a class="button edit-cancel">Cancel Edit</a>

src/js/setupListeners/words.js

@@ -1,17 +1,19 @@
 import { renderEditForm } from '../render/words';
-import { confirmEditWord, cancelEditWord, confirmDeleteWord, submitWordForm } from '../wordManagement';
+import { confirmEditWord, cancelEditWord, confirmDeleteWord, expandAdvancedForm, submitWordForm } from '../wordManagement';
 import { goToNextPage, goToPreviousPage, goToPage } from '../pagination';
 import { setupMaximizeButtons } from './buttons';
 import { setupIPAFields } from '.';
 
 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();
@@ -61,8 +63,13 @@ export function setupWordOptionSelections() {
 }
 
 export function setupWordEditFormButtons() {
-  const saveChangesButtons = document.getElementsByClassName('edit-save-changes'),
+  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);

src/js/wordManagement.js

@@ -155,12 +155,26 @@ export function parseReferences(detailsMarkdown) {
   return detailsMarkdown;
 }
 
+export function expandAdvancedForm(id = false) {
+  const wordId = typeof id.target !== 'undefined' ? this.id.replace('expandAdvancedForm', '') : id;
+  const button = typeof id.target !== 'undefined' ? this : document.getElementById('expandAdvancedForm' + (!wordId ? '' : wordId)),
+    form = document.getElementById('advancedForm' + (!wordId ? '' : wordId));
+  if (form.style.display !== 'block') {
+    button.innerText = 'Hide Advanced';
+    form.style.display = 'block';
+  } else {
+    button.innerText = 'Show Advanced';
+    form.style.display = 'none';
+  }
+}
+
 export function submitWordForm() {
   const name = document.getElementById('wordName').value,
     pronunciation = document.getElementById('wordPronunciation').value,
     partOfSpeech = document.getElementById('wordPartOfSpeech').value,
     definition = document.getElementById('wordDefinition').value,
-    details = document.getElementById('wordDetails').value;
+    details = document.getElementById('wordDetails').value,
+    etymology = document.getElementById('wordEtymology').value;
 
   const word = {
     name: removeTags(name).trim(),
@@ -171,6 +185,10 @@ export function submitWordForm() {
     wordId: getNextId(),
   };
 
+  if (removeTags(etymology).trim() !== '') {
+    word.etymology = removeTags(etymology).trim();
+  }
+
   if (validateWord(word)) {
     addWord(word);
     sortWords(true);
@@ -252,7 +270,8 @@ export function confirmEditWord(id) {
     pronunciation = document.getElementById('wordPronunciation_' + wordId).value,
     partOfSpeech = document.getElementById('wordPartOfSpeech_' + wordId).value,
     definition = document.getElementById('wordDefinition_' + wordId).value,
-    details = document.getElementById('wordDetails_' + wordId).value;
+    details = document.getElementById('wordDetails_' + wordId).value,
+    etymology = document.getElementById('wordEtymology_' + wordId).value;
 
   const word = {
     name: removeTags(name).trim(),
@@ -263,6 +282,10 @@ export function confirmEditWord(id) {
     wordId,
   };
 
+  if (removeTags(etymology).trim() !== '') {
+    word.etymology = removeTags(etymology).trim();
+  }
+
   if (validateWord(word, wordId)) {
     if (confirm(`Are you sure you want to save changes to "${word.name}"?`)) {
       document.getElementById('editForm_' + wordId).classList.add('done');

template-index.html

@@ -139,6 +139,12 @@
         <label>Details<span class="red">*</span><a class="label-button maximize-button">Maximize</a><br>
           <textarea id="wordDetails" placeholder="Markdown formatting allowed"></textarea>
         </label>
+        <a id="expandAdvancedForm" class="expand-advanced-form">+ Advanced</a>
+        <div id="advancedForm" style="display:none;">
+          <label>Etymology / Root Words<br>
+            <input id="wordEtymology" maxlength="2500" placeholder="comma,separated,root,words">
+          </label>
+        </div>
         <div id="wordErrorMessage"></div>
         <a class="button" id="addWordButton">Add Word</a>
       </form>