Toggle word options list when clicking options

src/js/render.js

@@ -3,7 +3,7 @@ import { removeTags, slugify } from '../helpers';
 import { getWordsStats, wordExists } from './utilities';
 import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search';
 import { showSection } from './displayToggles';
-import { setupSearchFilters } from './setupListeners';
+import { setupSearchFilters, setupWordOptionButtons } from './setupListeners';
 
 export function renderAll() {
   renderDictionaryDetails();
@@ -132,6 +132,11 @@ export function renderWords() {
         <h4 class="word">${word.name}</h4>
         <span class="pronunciation">${word.pronunciation}</span>
         <span class="part-of-speech">${word.partOfSpeech}</span>
+        <span class="small button word-option-button">Options</span>
+        <div class="word-option-list" style="display:none;">
+          <div class="word-option" id="edit_${word.wordId}">Edit</div>
+          <div class="word-option" id="delete_${word.wordId}">Delete</div>
+        </div>
       </header>
       <dl>
         <dt class="definition">${word.simpleDefinition}</dt>
@@ -143,6 +148,7 @@ export function renderWords() {
   });
 
   document.getElementById('entries').innerHTML = wordsHTML;
+  setupWordOptionButtons();
   
   // Show Search Results
   const searchTerm = getSearchTerm();
@@ -151,3 +157,7 @@ export function renderWords() {
   resultsText += !filters.allPartsOfSpeechChecked ? ' (Filtered)' : '';
   document.getElementById('searchResults').innerHTML = resultsText;
 }
+
+export function renderEditForm() {
+
+}

src/js/setupListeners.js

@@ -1,5 +1,5 @@
 import {showSection} from './displayToggles';
-import { renderWords } from './render';
+import { renderWords, renderWordOptions, destroyWordOptions, renderEditForm } from './render';
 import { validateWord, addWord } from './wordManagement';
 import { removeTags } from '../helpers';
 import { getNextId } from './utilities';
@@ -114,3 +114,43 @@ function setupWordForm() {
     }
   });
 }
+
+export function setupWordOptionButtons() {
+  const wordOptionButtons = document.getElementsByClassName('word-option-button');
+  const showWordOptions = function() {
+    this.parentElement.querySelector('.word-option-list').style.display = '';
+  }
+  const hideWordOptions = function(e) {
+    if (!e.target.classList.contains('word-option-button')) {
+      const allWordOptions = document.querySelectorAll('.word-option-list');
+      Array.from(allWordOptions).forEach(wordOptionList => {
+        wordOptionList.style.display = 'none';
+      });
+    }
+  }
+
+  Array.from(wordOptionButtons).forEach(button => {
+    button.removeEventListener('click', showWordOptions);
+    button.addEventListener('click', showWordOptions);
+  });
+
+  document.removeEventListener('click', hideWordOptions);
+  document.addEventListener('click', hideWordOptions);
+
+}
+
+export function setupWordOptionSelections() {
+  const wordOptions = document.getElementsByClassName('word-option');
+  Array.from(wordOptions).forEach(option => {
+    switch (option.innerText) {
+      case 'Edit': {
+        option.removeEventListener('click', renderEditForm);
+        option.addEventListener('click', renderEditForm);
+        break;
+      }
+      case 'Delete': {
+        break;
+      }
+    }
+  });
+}

src/styles/_structure.scss

@@ -133,6 +133,36 @@
     font-style: italic;
     font-size: 70%;
   }
+
+  header {
+    position: relative;
+    
+    .word-option-button {
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      line-height: 16px !important;
+      padding: 1px 3px 3px;
+    }
+
+    .word-option-list {
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      background-color: $white;
+      border: $border;
+      border-radius: 5px;
+      
+      .word-option {
+        padding: 10px 25px;;
+
+        &:hover {
+          background-color: $light;
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }
 
 #editModal {