Add check/uncheck button to search filters
This commit is contained in:
		
							parent
							
								
									6b46eaa148
								
							
						
					
					
						commit
						b69af6c4f6
					
				
					 3 changed files with 24 additions and 2 deletions
				
			
		| 
						 | 
					@ -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;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -127,3 +127,19 @@ export function highlightSearchTerm(word) {
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
  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();
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
| 
						 | 
					@ -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() {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue