Add check/uncheck button to search filters

src/js/render.js

@@ -104,6 +104,7 @@ export function renderPartsOfSpeech(onlyOptions = false) {
     optionsHTML += `<option value="${partOfSpeech}">${partOfSpeech}</option>`;
     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 => {
     const selectedValue = select.value;

src/js/search.js

@@ -126,4 +126,20 @@ export function highlightSearchTerm(word) {
     return markedUpWord;
   }
   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();
 }

src/js/setupListeners.js

@@ -7,7 +7,7 @@ import { insertAtCursor, getInputSelection, setSelectionRange } from './StackOve
 import { usePhondueDigraphs } from './KeyboardFire/phondue/ipaField';
 import { openSettingsModal, saveSettingsModal, saveAndCloseSettingsModal } from './settings';
 import { enableHotKeys } from './hotkeys';
-import { showSearchModal, clearSearchText } from './search';
+import { showSearchModal, clearSearchText, checkAllPartsOfSpeechFilters, uncheckAllPartsOfSpeechFilters } from './search';
 
 export default function setupListeners() {
   setupDetailsTabs();
@@ -141,11 +141,16 @@ function setupSearchBar() {
 }
 
 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 => {
     filter.removeEventListener('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() {