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 {