diff --git a/src/js/render.js b/src/js/render.js
index 585f662..433bfa5 100644
--- a/src/js/render.js
+++ b/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() {
${word.name}
${word.pronunciation}
${word.partOfSpeech}
+ Options
+
- ${word.simpleDefinition}
@@ -143,6 +148,7 @@ export function renderWords() {
});
document.getElementById('entries').innerHTML = wordsHTML;
+ setupWordOptionButtons();
// Show Search Results
const searchTerm = getSearchTerm();
@@ -150,4 +156,8 @@ export function renderWords() {
let resultsText = searchTerm !== '' || !filters.allPartsOfSpeechChecked ? words.length.toString() + ' Results' : '';
resultsText += !filters.allPartsOfSpeechChecked ? ' (Filtered)' : '';
document.getElementById('searchResults').innerHTML = resultsText;
+}
+
+export function renderEditForm() {
+
}
\ No newline at end of file
diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js
index e02b605..4da5ccb 100644
--- a/src/js/setupListeners.js
+++ b/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';
@@ -113,4 +113,44 @@ function setupWordForm() {
addWord(word);
}
});
-}
\ No newline at end of file
+}
+
+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;
+ }
+ }
+ });
+}
diff --git a/src/styles/_structure.scss b/src/styles/_structure.scss
index 9f7b918..fe6e00c 100644
--- a/src/styles/_structure.scss
+++ b/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 {