From a6727bd0e46ccd5a69cec937754dbf4ead700a29 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Wed, 8 May 2019 13:01:39 -0600
Subject: [PATCH] Create settings modal structure

---
 index.html               | 38 ++++++++++++++++++++++++++++++++++++--
 src/index.js             |  4 ++--
 src/js/setupListeners.js |  7 +++++++
 src/scss/_structure.scss |  4 ++++
 4 files changed, 49 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 50c7d3b..c819519 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
 <body>
   <header id="top">
     <h1 id="title">Lexiconga</h1>
+
     <input id="openSearchModal" placeholder="🔍&#xFE0E; Search"> <span id="searchResults"></span>
     <section id="searchModal" class="modal" style="display:none;">
       <div class="modal-background" onclick="this.parentElement.style.display='none';"></div>
@@ -64,6 +65,8 @@
         </footer>
       </div>
     </section>
+
+    <a id="settingsButton" class="button">Settings</a>
   </header>
 
   <main>
@@ -109,8 +112,6 @@
         <article class="entry">
           <header>
             <h4 class="word">Loading Words</h4>
-            <span class="pronunciation"></span>
-            <span class="part-of-speech"></span>
           </header>
           <dl>
             <dt class="definition">Please Wait...</dt>
@@ -133,6 +134,39 @@
     <a class="button" id="privacyInfoButton">Privacy</a>
   </footer>
 
+  <section id="settingsModal" class="modal" style="display:none;">
+    <div class="modal-background" onclick="this.parentElement.style.display='none';"></div>
+    <div class="modal-content">
+      <a class="close-button" onclick="this.parentElement.parentElement.style.display='none';">&times;&#xFE0E;</a>
+      <section>
+        <form>
+          <label>Use IPA Auto-Fill
+            <input type="checkbox" checked><br />
+            <small>Check this to use character combinations to input International Phonetic Alphabet characters into
+              Pronunciation fields.</small>
+          </label>
+  
+          <label>Theme
+            <select disabled>
+              <option selected value="default">Default</option>
+              <option selected value="dark">Dark</option>
+              <option selected value="light">Light</option>
+              <option selected value="blue">Blue</option>
+              <option selected value="green">Green</option>
+              <option selected value="royal">Royal</option>
+            </select>
+          </label>
+        </form>
+      </section>
+      <footer>
+        <a class="button" id="settingsSave">Save</a>
+        <a class="button" id="settingsSaveAndClose">Save &amp; Close</a>
+        <a class="red button" onclick="this.parentElement.parentElement.parentElement.style.display='none';">Close Without
+          Saving</a>
+      </footer>
+    </div>
+  </section>
+
   <section id="editModal" class="modal" style="display:none;">
     <div class="modal-background" onclick="this.parentElement.style.display='none';"></div>
     <div class="modal-content">
diff --git a/src/index.js b/src/index.js
index 75e118f..2965f89 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,10 +9,10 @@ import { generateRandomWords } from './js/utilities';
 function initialize() {
   console.log('initializing');
   window.currentDictionary = cloneObject(DEFAULT_DICTIONARY);
-  generateRandomWords(100);
+  // generateRandomWords(100);
   setupListeners();
   renderAll();
-  console.log('Rendered!');
+  // console.log('Rendered!');
 }
 
 window.onload = (function (oldLoad) {
diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js
index 3db06ab..fcdf5c4 100644
--- a/src/js/setupListeners.js
+++ b/src/js/setupListeners.js
@@ -9,6 +9,7 @@ import { goToNextPage, goToPreviousPage, goToPage } from './pagination';
 export default function setupListeners() {
   setupDetailsTabs();
   setupSearchBar();
+  setupSettingsModal();
   setupWordForm();
   setupMobileWordFormButton();
   setupInfoButtons();
@@ -194,6 +195,12 @@ export function setupWordOptionSelections() {
   });
 }
 
+export function setupSettingsModal() {
+  document.getElementById('settingsButton').addEventListener('click', () => {
+    document.getElementById('settingsModal').style.display = '';
+  });
+}
+
 export function setupWordEditFormButtons() {
   const saveChangesButtons = document.getElementsByClassName('edit-save-changes');
   const cancelChangesButtons = document.getElementsByClassName('edit-cancel');
diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss
index ef68fc7..de4b63b 100644
--- a/src/scss/_structure.scss
+++ b/src/scss/_structure.scss
@@ -76,6 +76,10 @@
       }
     }
   }
+
+  #settingsButton {
+    float: right;
+  }
 }
 
 #mobileWordFormShow {
