Set up saving dictionary changes correctly

index.html

@@ -122,7 +122,7 @@
           <li class="active">Description</li><li>Details</li><li>Settings</li><li>Actions</li>
         </ul>
       </nav>
-      <section id="editDescriptionTab" style="display:none;">
+      <section id="editDescriptionTab">
         <label>Name<br>
           <input id="editName">
         </label>
@@ -134,7 +134,7 @@
         </label>
       </section>
 
-      <section id="editDetailsTab">
+      <section id="editDetailsTab" style="display:none;">
         <label>Parts of Speech <small>(Comma Separated List)</small><br>
           <input id="editPartsOfSpeech">
         </label>
@@ -177,6 +177,9 @@
             </label>
           </div>
         </div>
+        <label>Exceptions<br>
+          <textarea id="editExceptions"></textarea>
+        </label>
         <h3>Orthography</h3>
         <label>Notes<a class="label-button">Maximize</a><br>
           <textarea id="editOrthography"></textarea>
@@ -187,6 +190,55 @@
         </label>
       </section>
 
+      <section id="editSettingsTab" style="display:none;">
+        <label>Allow Duplicate Words
+          <input type="checkbox" id="editAllowDuplicates"><br>
+          <small>Checking this box will allow any number of the exact same spelling of a word to be added</small>
+        </label>
+        <label>Words are Case-Sensitive
+          <input type="checkbox" id="editCaseSensitive"><br>
+          <small>Checking this box will allow any words spelled the same but with different capitalization to be added.</small>
+        </label>
+        <label>Sort by Definition
+          <input type="checkbox" id="editSortByDefinition"><br>
+          <small>Checking this box will sort the words in alphabetical order based on the Definition instead of the Word.</small>
+        </label>
+        <label>Mark Complete
+          <input type="checkbox" id="editIsComplete"><br>
+          <small>Checking this box will mark this as "complete" and prevent any changes from being made.</small>
+        </label>
+        <label>Make Public
+          <input type="checkbox" id="editIsPublic"><br>
+          <small>Checking this box will make this public via a link you can share with others.</small>
+        </label>
+      </section>
+
+      <section id="editActionsTab" style="display:none;">
+        <h3>Import&nbsp;/ Export</h3>
+        <div class="split two">
+          <div>
+            <p>
+              <a class="button">Import JSON</a><br>
+              <small>Import a previously-exported <code>JSON</code> file.</small>
+            </p>
+            <p>
+              <a class="button">Import Words</a><br>
+              <small>Import a CSV file of words. (Download an <a>example file with the correct formatting</a>.)</small>
+            </p>
+          </div>
+          <div>
+            <p>
+              <a class="button">Export JSON</a><br>
+              <small>Export your work as a <code>JSON</code> file to re-import later.</small>
+            </p>
+            <p>
+              <a class="button">Export Words</a><br>
+              <small>Export a CSV file of your words.</small>
+            </p>
+          </div>
+        </div>
+      </section>
+
       <footer>
         <a class="button" id="editSave">Save</a>
         <a class="button" id="editSaveAndClose">Save &amp; Close</a>

src/js/dictionaryManagement.js

@@ -1,4 +1,5 @@
-import { renderDictionaryDetails } from "./render";
+import { renderDictionaryDetails, renderPartsOfSpeechSelect } from "./render";
+import { removeTags } from "../helpers";
 
 export function updateDictionary () {
 
@@ -6,7 +7,66 @@ export function updateDictionary () {
 }
 
 export function openEditModal() {
-  document.getElementById('editModal').style.display = 'block';
+  const { name, specification, description, partsOfSpeech } = window.currentDictionary;
+  const { consonants, vowels, blends, phonotactics } = window.currentDictionary.details.phonology;
+  const { orthography, grammar } = window.currentDictionary.details;
+  const { allowDuplicates, caseSensitive, sortByDefinition, isComplete, isPublic } = window.currentDictionary.settings;
+  
+  document.getElementById('editName').value = name;
+  document.getElementById('editSpecification').value = specification;
+  document.getElementById('editDescription').value = description;
+  document.getElementById('editPartsOfSpeech').value = partsOfSpeech.join(',');
+
+  document.getElementById('editConsonants').value = consonants.join(',');
+  document.getElementById('editVowels').value = vowels.join(',');
+  document.getElementById('editBlends').value = blends.join(',');
+  document.getElementById('editOnset').value = phonotactics.onset.join(',');
+  document.getElementById('editNucleus').value = phonotactics.nucleus.join(',');
+  document.getElementById('editCoda').value = phonotactics.coda.join(',');
+  document.getElementById('editExceptions').value = phonotactics.exceptions;
+
+  document.getElementById('editOrthography').value = orthography.notes;
+  document.getElementById('editGrammar').value = grammar.notes;
+
+  document.getElementById('editAllowDuplicates').checked = allowDuplicates;
+  document.getElementById('editCaseSensitive').checked = caseSensitive;
+  document.getElementById('editSortByDefinition').checked = sortByDefinition;
+  document.getElementById('editIsComplete').checked = isComplete;
+  document.getElementById('editIsPublic').checked = isPublic;
+
+  document.getElementById('editModal').style.display = '';
+}
+
+export function save() {
+  window.currentDictionary.name = removeTags(document.getElementById('editName').value.trim());
+  window.currentDictionary.specification = removeTags(document.getElementById('editSpecification').value.trim());
+  window.currentDictionary.description = removeTags(document.getElementById('editDescription').value.trim());
+  window.currentDictionary.partsOfSpeech = document.getElementById('editPartsOfSpeech').value.split(',').map(val => val.trim());
+
+  window.currentDictionary.details.phonology.consonants = document.getElementById('editConsonants').value.split(',').map(val => val.trim());
+  window.currentDictionary.details.phonology.vowels = document.getElementById('editVowels').value.split(',').map(val => val.trim());
+  window.currentDictionary.details.phonology.blends = document.getElementById('editBlends').value.split(',').map(val => val.trim());
+  window.currentDictionary.details.phonology.phonotactics.onset = document.getElementById('editOnset').value.split(',').map(val => val.trim());
+  window.currentDictionary.details.phonology.phonotactics.nucleus = document.getElementById('editNucleus').value.split(',').map(val => val.trim());
+  window.currentDictionary.details.phonology.phonotactics.coda = document.getElementById('editCoda').value.split(',').map(val => val.trim());
+  window.currentDictionary.details.phonology.phonotactics.exceptions = removeTags(document.getElementById('editExceptions').value.trim());
+
+  window.currentDictionary.details.orthography.notes = removeTags(document.getElementById('editOrthography').value.trim());
+  window.currentDictionary.details.grammar.notes = removeTags(document.getElementById('editGrammar').value.trim());
+
+  window.currentDictionary.settings.allowDuplicates = document.getElementById('editAllowDuplicates').checked;
+  window.currentDictionary.settings.caseSensitive = document.getElementById('editCaseSensitive').checked;
+  window.currentDictionary.settings.sortByDefinition = document.getElementById('editSortByDefinition').checked;
+  window.currentDictionary.settings.isComplete = document.getElementById('editIsComplete').checked;
+  window.currentDictionary.settings.isPublic = document.getElementById('editIsPublic').checked;
+
+  renderDictionaryDetails();
+  renderPartsOfSpeechSelect();
+}
+
+export function saveAndClose() {
+  save();
+  document.getElementById('editModal').style.display = 'none';
 }
 
 export function updateGeneralDetails() {

src/js/render.js

@@ -89,7 +89,11 @@ export function renderPartsOfSpeechSelect() {
     partOfSpeech = removeTags(partOfSpeech);
     optionsHTML += `<option value="${partOfSpeech}">${partOfSpeech}</option>`;
   });
-  Array.from(document.getElementsByClassName('part-of-speech-select')).forEach(select => select.innerHTML = optionsHTML);
+  Array.from(document.getElementsByClassName('part-of-speech-select')).forEach(select => {
+    const selectedValue = select.value;
+    select.innerHTML = optionsHTML;
+    select.value = selectedValue;
+  });
 }
 
 export function renderWords() {

src/js/setupListeners.js

@@ -3,7 +3,7 @@ import { renderWords } from './render';
 import { validateWord, addWord } from './wordManagement';
 import { removeTags } from '../helpers';
 import { getNextId } from './utilities';
-import { openEditModal } from './dictionaryManagement';
+import { openEditModal, save, saveAndClose } from './dictionaryManagement';
 
 export default function setupListeners() {
   setupDetailsTabs();
@@ -30,11 +30,27 @@ function setupDetailsTabs() {
       }
     });
   });
-  setupEditForm();
+  setupEditFormTabs();
+  setupEditFormButtons();
 }
 
-function setupEditForm() {
-  
+function setupEditFormTabs() {
+  const tabs = document.querySelectorAll('#editModal nav li');
+  tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      tabs.forEach(t => {
+        t.classList.remove('active');
+        document.getElementById('edit' + t.innerText + 'Tab').style.display = 'none';
+      });
+      tab.classList.add('active');
+      document.getElementById('edit' + tab.innerText + 'Tab').style.display = '';
+    });
+  });
+}
+
+function setupEditFormButtons() {
+  document.getElementById('editSave').addEventListener('click', () => save());
+  document.getElementById('editSaveAndClose').addEventListener('click', () => saveAndClose());
 }
 
 function setupSearchBar() {

src/styles/_containers.scss

@@ -1,6 +1,6 @@
 header {
   display: block;
-  padding: 5px 20px;
+  padding: 5px $general-padding;
   border-bottom: 1px solid $mid;
   margin: 0 0 5px;
 
@@ -37,14 +37,14 @@ main {
     border: $border;
 
     dl {
-      padding: 0 20px;
+      padding: 0 $general-padding;
     }
   }
 }
 
 footer {
   display: block;
-  padding: 20px;
+  padding: $general-padding;
   border-top: 1px solid $mid;
   margin: 5px 0 0;
 }

src/styles/_elements.scss

@@ -13,7 +13,7 @@ label {
   font-weight: bold;
 
   &:not(:last-child) {
-    margin-bottom: 20px;
+    margin-bottom: $general-padding;
   }
 
   small {
@@ -87,10 +87,17 @@ span .tag {
 
   .modal-content {
     position: absolute;
-    top: 10%;
-    left: 20%;
-    bottom: 10%;
-    right: 20%;
+    // top: 10%;
+    // left: 20%;
+    // bottom: 10%;
+    // right: 20%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 700px;
+    max-width: 100%;
+    height: 600px;
+    max-height: 100%;
     background-color: $white;
     border: $border;
     border-radius: 5px;
@@ -102,25 +109,6 @@ span .tag {
       font-size: 200%;
       cursor: pointer;
     }
-
-    nav ul {
-      margin-bottom: 0;
-    }
-
-    section {
-      padding: 20px;
-      margin-bottom: 80px;
-      overflow-y: auto;
-      height: 78%;
-    }
-
-    section~footer {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      background-color: $white;
-    }
   }
 }
 
@@ -132,7 +120,7 @@ span .tag {
     display: inline-block;
     list-style: none;
     margin: 0 2px -1px;
-    padding: 10px 20px;
+    padding: 10px $general-padding;
     border-top: $border;
     border-left: $border;
     border-right: $border;

src/styles/_structure.scss

@@ -19,6 +19,10 @@
       left: 0;
       right: 0;
       bottom: 0;
+      transform: unset;
+      max-width: unset;
+      height: unset;
+      max-height: unset;
       margin: 0 auto;
       width: 90%;
       padding: 20px;
@@ -132,6 +136,38 @@
 }
 
 #editModal {
+  $nav-font-height: 16px;
+  nav {
+    padding-top: $general-padding;
+
+    ul {
+      margin: 0;
+      padding: 0;
+
+      li {
+        font-size: $nav-font-height;
+        line-height: $nav-font-height;
+      }
+    }
+  }
+  section, footer {
+    position: absolute;
+    width: 100%;
+  }
+  section {
+    top: ($general-padding * 2) + $nav-font-height + 10px;;
+    bottom: ($general-padding * 2) + $nav-font-height + 16px;
+    padding: $general-padding;
+    overflow-y: auto;
+  }
+  footer {
+    bottom: 0;
+
+    .button {
+      font-size: $nav-font-height;
+      line-height: $nav-font-height;
+    }
+  }
   #editDescription {
     width: 100%;
     height: 350px;

src/styles/_variables.scss

@@ -9,4 +9,5 @@ $white: #ffffff;
 
 $red: #d42932;
 
-$border: 1px solid $dark;
+$border: 1px solid $dark;
+$general-padding: 20px;