Updated word filtering to allow as many parts of speech as the user wants.

announcement.php

@@ -1,2 +1 @@
-You can now use Keyboard Shortcuts! Check About Lexiconga (Ctrl+H) to find out what they are!<br>
+The Filter system has been updated—you can now filter on as many parts of speech as you want!
-Check the <a href="https://github.com/Alamantus/DictionaryBuilder/releases" target="_blank">update log</a> for other changes.

css/styles.css

@@ -189,6 +189,12 @@ input[type=checkbox] {
     cursor: pointer;
 }
 
+.searchOption, .filterOption {
+    font-size:12px;
+    display: inline-block;
+    margin: 0 8px 0 0;
+}
+
 #wordFilter {
     margin: 10px 0;
 }

index.php

@@ -104,21 +104,22 @@ require_once(SITE_LOCATION . '/php/notificationconditiontree.php');
                         <input type="text" id="searchBox" onclick="this.select();" onchange="ShowDictionary()" style="display:inline;" />&nbsp;
                         <span style="display:inline;cursor:pointer;font-size:10px;font-weight:bold;" onclick="document.getElementById('searchBox').value='';ShowDictionary();">Clear Search</span>
                     </div>
-                    <div id="searchOptions" style="font-size:12px;">
+                    <div id="searchOptions">
-                        <label style="display:inline;margin:0;">Word <input type="checkbox" id="searchOptionWord" checked="checked" onchange="ShowDictionary()" /></label>&nbsp;&nbsp;
+                        <label class="searchOption">Word <input type="checkbox" id="searchOptionWord" checked="checked" onchange="ShowDictionary()" /></label>
-                        <label style="display:inline;margin:0;">Equivalent <input type="checkbox" id="searchOptionSimple" checked="checked" onchange="ShowDictionary()" /></label>&nbsp;&nbsp;
+                        <label class="searchOption">Equivalent <input type="checkbox" id="searchOptionSimple" checked="checked" onchange="ShowDictionary()" /></label>
-                        <label style="display:inline;margin:0;">Explanation <input type="checkbox" id="searchOptionLong" checked="checked" onchange="ShowDictionary()" /></label>
+                        <label class="searchOption">Explanation <input type="checkbox" id="searchOptionLong" checked="checked" onchange="ShowDictionary()" /></label>
                         <br />
-                        <label style="display:inline;margin:0;">Search Case-Sensitive <input type="checkbox" id="searchCaseSensitive" onchange="ShowDictionary()" /></label>
+                        <label class="searchOption">Search Case-Sensitive <input type="checkbox" id="searchCaseSensitive" onchange="ShowDictionary()" /></label>
-                        <label style="display:inline;margin:0;" title="Note: Matching diacritics will appear but may not highlight.">Ignore Diacritics/Accents <input type="checkbox" id="searchIgnoreDiacritics" onchange="ShowDictionary()" /></label>
+                        <label class="searchOption" title="Note: Matching diacritics will appear but may not highlight.">Ignore Diacritics/Accents <input type="checkbox" id="searchIgnoreDiacritics" onchange="ShowDictionary()" /></label>
                     </div>
                 </label>
             </div>
             
-            <label style="display:block;"><b>Filter Words </b><select id="wordFilter" onchange="ShowDictionary()">
+            <label style="display:block;margin-bottom:0;"><b>Filter Words</b></label>
-                <option value="">All</option>
+            <div id="filterOptions" style="display:block"></div>
-            </select>
+            <div style="display:block;">
-            </label>
+                <span style="display:inline;cursor:pointer;font-size:12px;font-weight:bold;" onclick="ToggleAllFilters(true)">Check All</span>&nbsp;/&nbsp;<span style="display:inline;cursor:pointer;font-size:12px;font-weight:bold;" onclick="ToggleAllFilters(false)">Uncheck All</span>
+            </div>
         </div>
         <div id="filterWordCount"></div>
             

js/dictionaryBuilder.js

@@ -152,7 +152,7 @@ function DeleteWord(index) {
 }
 
 function ShowDictionary() {
-    var filter = document.getElementById("wordFilter").value;
+    var filters = GetSelectedFilters();
     
     var searchResults = [];
     var search = htmlEntitiesParseForSearchEntry(document.getElementById("searchBox").value);
@@ -196,7 +196,7 @@ function ShowDictionary() {
 
     if (currentDictionary.words.length > 0) {
         for (var i = 0; i < currentDictionary.words.length; i++) {
-            if (filter == "" || (filter != "" && currentDictionary.words[i].partOfSpeech == filter)) {
+            if (filters.length == 0 || (filters.length > 0 && filters.indexOf(currentDictionary.words[i].partOfSpeech) > -1)) {
                 if (search == "" || (search != "" && (searchByWord || searchBySimple || searchByLong) && searchResults.indexOf(currentDictionary.words[i].wordId) >= 0)) {
                     if (!currentDictionary.words[i].hasOwnProperty("pronunciation")) {
                         currentDictionary.words[i].pronunciation = "";  //Account for new property

js/ui.js

@@ -581,43 +581,71 @@ function TogglePublicLink() {
 
 function SetPartsOfSpeech () {
     var partsOfSpeechSelect = document.getElementById("partOfSpeech");
-    var wordFilterSelect = document.getElementById("wordFilter");
+
-    var selectedWordFilter = wordFilterSelect.value;
+    var wordFilterOptions = document.getElementById("filterOptions");
-    var selectedWordStillExists = false;
+    var wordFiltersSelected = GetSelectedFilters();
+
+    // Clear parts of speech.
     if (partsOfSpeechSelect.options.length > 0) {
         for (var i = partsOfSpeechSelect.options.length - 1; i >= 0; i--) {
             partsOfSpeechSelect.removeChild(partsOfSpeechSelect.options[i]);
-            wordFilterSelect.removeChild(wordFilterSelect.options[i + 1]);
         }
+        wordFilterOptions.innerHTML = "";
     }
+
+    // Rebuild parts of speech
     var newPartsOfSpeech = htmlEntitiesParse(currentDictionary.settings.partsOfSpeech).trim().split(",");
     for (var j = 0; j < newPartsOfSpeech.length; j++) {
+        var thePartOfSpeech = newPartsOfSpeech[j].trim();
+
         var partOfSpeechOption = document.createElement('option');
-        partOfSpeechOption.appendChild(document.createTextNode(newPartsOfSpeech[j].trim()));
+        partOfSpeechOption.appendChild(document.createTextNode(thePartOfSpeech));
-        partOfSpeechOption.value = newPartsOfSpeech[j].trim();
+        partOfSpeechOption.value = thePartOfSpeech;
         partsOfSpeechSelect.appendChild(partOfSpeechOption);
 
-        var wordFilterOption = document.createElement('option');
+        var wordFilterLabel = document.createElement('label');
-        wordFilterOption.appendChild(document.createTextNode(newPartsOfSpeech[j].trim()));
+        wordFilterLabel.appendChild(document.createTextNode(thePartOfSpeech + " "));
-        wordFilterOption.value = newPartsOfSpeech[j].trim();
+        wordFilterLabel['part-of-speech'] = thePartOfSpeech;
-        wordFilterSelect.appendChild(wordFilterOption);
+        wordFilterLabel.className = 'filterOption';
-
+        var wordFilterCheckbox = document.createElement('input');
-        if (!selectedWordStillExists && newPartsOfSpeech[j].trim() == selectedWordFilter) {
+        wordFilterCheckbox.type = 'checkbox';
-            selectedWordStillExists = true;
+        wordFilterCheckbox.onchange = function(){ShowDictionary()};
+        if (wordFiltersSelected.indexOf(thePartOfSpeech) > -1) wordFilterCheckbox.checked = true;
+        wordFilterLabel.appendChild(wordFilterCheckbox);
+        wordFilterOptions.appendChild(wordFilterLabel);
     }
 }
 
-    if (selectedWordStillExists) {
+function GetSelectedFilters() {
-        wordFilterSelect.value = selectedWordFilter;
+    var wordFilterOptions = document.getElementById("filterOptions");
+    var wordFiltersSelected = [];
+
+    for (var i = 0; i < wordFilterOptions.children.length; i++) {
+        var filterOption = wordFilterOptions.children[i];
+        if (filterOption.children[0].checked) {
+            wordFiltersSelected.push(filterOption['part-of-speech']);
         }
     }
 
+    return wordFiltersSelected;
+}
+
+function ToggleAllFilters(doCheck) {
+    var wordFilterOptions = document.getElementById("filterOptions");
+
+    for (var i = 0; i < wordFilterOptions.children.length; i++) {
+        wordFilterOptions.children[i].children[0].checked = doCheck;
+    }
+    
+    ShowDictionary();
+}
+
 function ShowFilterWordCount(numberOfWords) {
-    var filter = document.getElementById("wordFilter").value;
+    var filters = GetSelectedFilters();
     var search = htmlEntitiesParseForSearchEntry(document.getElementById("searchBox").value);
     var wordCounter = document.getElementById("filterWordCount");
 
-    if (filter != "" || search != "") {
+    if (filters.length > 0 || search != "") {
         wordCounter.innerHTML = "Showing " + numberOfWords.toString() + " result" + ((numberOfWords != 1) ? "s" : "");
     } else {
         wordCounter.innerHTML = "";