Toggle word options list when clicking options

This commit is contained in:
Robbie Antenesse 2019-05-05 13:09:38 -06:00
parent b6d728fe8d
commit 71ffab64ba
3 changed files with 83 additions and 3 deletions

View File

@ -3,7 +3,7 @@ import { removeTags, slugify } from '../helpers';
import { getWordsStats, wordExists } from './utilities'; import { getWordsStats, wordExists } from './utilities';
import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search'; import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search';
import { showSection } from './displayToggles'; import { showSection } from './displayToggles';
import { setupSearchFilters } from './setupListeners'; import { setupSearchFilters, setupWordOptionButtons } from './setupListeners';
export function renderAll() { export function renderAll() {
renderDictionaryDetails(); renderDictionaryDetails();
@ -132,6 +132,11 @@ export function renderWords() {
<h4 class="word">${word.name}</h4> <h4 class="word">${word.name}</h4>
<span class="pronunciation">${word.pronunciation}</span> <span class="pronunciation">${word.pronunciation}</span>
<span class="part-of-speech">${word.partOfSpeech}</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> </header>
<dl> <dl>
<dt class="definition">${word.simpleDefinition}</dt> <dt class="definition">${word.simpleDefinition}</dt>
@ -143,6 +148,7 @@ export function renderWords() {
}); });
document.getElementById('entries').innerHTML = wordsHTML; document.getElementById('entries').innerHTML = wordsHTML;
setupWordOptionButtons();
// Show Search Results // Show Search Results
const searchTerm = getSearchTerm(); const searchTerm = getSearchTerm();
@ -150,4 +156,8 @@ export function renderWords() {
let resultsText = searchTerm !== '' || !filters.allPartsOfSpeechChecked ? words.length.toString() + ' Results' : ''; let resultsText = searchTerm !== '' || !filters.allPartsOfSpeechChecked ? words.length.toString() + ' Results' : '';
resultsText += !filters.allPartsOfSpeechChecked ? ' (Filtered)' : ''; resultsText += !filters.allPartsOfSpeechChecked ? ' (Filtered)' : '';
document.getElementById('searchResults').innerHTML = resultsText; document.getElementById('searchResults').innerHTML = resultsText;
}
export function renderEditForm() {
} }

View File

@ -1,5 +1,5 @@
import {showSection} from './displayToggles'; import {showSection} from './displayToggles';
import { renderWords } from './render'; import { renderWords, renderWordOptions, destroyWordOptions, renderEditForm } from './render';
import { validateWord, addWord } from './wordManagement'; import { validateWord, addWord } from './wordManagement';
import { removeTags } from '../helpers'; import { removeTags } from '../helpers';
import { getNextId } from './utilities'; import { getNextId } from './utilities';
@ -113,4 +113,44 @@ function setupWordForm() {
addWord(word); addWord(word);
} }
}); });
} }
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;
}
}
});
}

View File

@ -133,6 +133,36 @@
font-style: italic; font-style: italic;
font-size: 70%; 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 { #editModal {