Add check/uncheck button to search filters

This commit is contained in:
Robbie Antenesse 2019-05-24 16:11:19 -06:00
parent 6b46eaa148
commit b69af6c4f6
3 changed files with 24 additions and 2 deletions

View File

@ -104,6 +104,7 @@ export function renderPartsOfSpeech(onlyOptions = false) {
optionsHTML += `<option value="${partOfSpeech}">${partOfSpeech}</option>`; optionsHTML += `<option value="${partOfSpeech}">${partOfSpeech}</option>`;
searchHTML += `<label>${partOfSpeech} <input type="checkbox" checked id="searchPartOfSpeech_${slugify(partOfSpeech)}"></label>`; searchHTML += `<label>${partOfSpeech} <input type="checkbox" checked id="searchPartOfSpeech_${slugify(partOfSpeech)}"></label>`;
}); });
searchHTML += `<a class="small button" id="checkAllFilters">Check All</a> <a class="small button" id="uncheckAllFilters">Uncheck All</a>`;
Array.from(document.getElementsByClassName('part-of-speech-select')).forEach(select => { Array.from(document.getElementsByClassName('part-of-speech-select')).forEach(select => {
const selectedValue = select.value; const selectedValue = select.value;

View File

@ -126,4 +126,20 @@ export function highlightSearchTerm(word) {
return markedUpWord; return markedUpWord;
} }
return word; return word;
}
export function checkAllPartsOfSpeechFilters() {
const searchFilters = document.querySelectorAll('#searchPartsOfSpeech input[type="checkbox"]');
Array.from(searchFilters).forEach(filter => {
filter.checked = true;
});
renderWords();
}
export function uncheckAllPartsOfSpeechFilters() {
const searchFilters = document.querySelectorAll('#searchPartsOfSpeech input[type="checkbox"]');
Array.from(searchFilters).forEach(filter => {
filter.checked = false;
});
renderWords();
} }

View File

@ -7,7 +7,7 @@ import { insertAtCursor, getInputSelection, setSelectionRange } from './StackOve
import { usePhondueDigraphs } from './KeyboardFire/phondue/ipaField'; import { usePhondueDigraphs } from './KeyboardFire/phondue/ipaField';
import { openSettingsModal, saveSettingsModal, saveAndCloseSettingsModal } from './settings'; import { openSettingsModal, saveSettingsModal, saveAndCloseSettingsModal } from './settings';
import { enableHotKeys } from './hotkeys'; import { enableHotKeys } from './hotkeys';
import { showSearchModal, clearSearchText } from './search'; import { showSearchModal, clearSearchText, checkAllPartsOfSpeechFilters, uncheckAllPartsOfSpeechFilters } from './search';
export default function setupListeners() { export default function setupListeners() {
setupDetailsTabs(); setupDetailsTabs();
@ -141,11 +141,16 @@ function setupSearchBar() {
} }
export function setupSearchFilters() { export function setupSearchFilters() {
const searchFilters = document.querySelectorAll('#searchOptions input[type="checkbox"]'); const searchFilters = document.querySelectorAll('#searchOptions input[type="checkbox"]'),
searchBox = document.getElementById('searchBox');
Array.from(searchFilters).concat([searchBox]).forEach(filter => { Array.from(searchFilters).concat([searchBox]).forEach(filter => {
filter.removeEventListener('change', renderWords); filter.removeEventListener('change', renderWords);
filter.addEventListener('change', renderWords); filter.addEventListener('change', renderWords);
}); });
document.getElementById('checkAllFilters').removeEventListener('click', checkAllPartsOfSpeechFilters);
document.getElementById('checkAllFilters').addEventListener('click', checkAllPartsOfSpeechFilters);
document.getElementById('uncheckAllFilters').removeEventListener('click', uncheckAllPartsOfSpeechFilters);
document.getElementById('uncheckAllFilters').addEventListener('click', uncheckAllPartsOfSpeechFilters);
} }
function setupWordForm() { function setupWordForm() {