Alamantus/Lexiconga
1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-06-08 18:26:36 +02:00
Code Issues Releases Activity

Add searching by case sensitive and exact

Browse source
This commit is contained in:
Robbie Antenesse 2019-05-07 10:41:26 -06:00
parent c5c17d022e
commit 4cad266d52
3 changed files with 48 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
index.html
View file

@ -26,6 +26,19 @@
</a> </a>
</section> </section>
<footer id="searchOptions" style="display:none;"> <footer id="searchOptions" style="display:none;">
<div class="split">
<div class="quarter category">
<h3>Search For</h3>
</div>
<div class="three-quarter options">
<label>Case-Sensitive
<input type="checkbox" id="searchCaseSensitive">
</label>
<label>Exact Words
<input type="checkbox" id="searchExactWords">
</label>
</div>
</div>
<div class="split"> <div class="split">
<div class="quarter category"> <div class="quarter category">
<h3>Include in Search</h3> <h3>Include in Search</h3>

29
src/js/search.js
View file

@ -6,6 +6,8 @@ export function getSearchTerm() {
export function getSearchFilters() { export function getSearchFilters() {
const filters = { const filters = {
caseSensitive: document.getElementById('searchCaseSensitive').checked,
exact: document.getElementById('searchExactWords').checked,
name: document.getElementById('searchIncludeName').checked, name: document.getElementById('searchIncludeName').checked,
definition: document.getElementById('searchIncludeDefinition').checked, definition: document.getElementById('searchIncludeDefinition').checked,
details: document.getElementById('searchIncludeDetails').checked, details: document.getElementById('searchIncludeDetails').checked,
@ -26,7 +28,7 @@ export function getSearchFilters() {
} }
export function getMatchingSearchWords() { export function getMatchingSearchWords() {
const searchTerm = getSearchTerm(); let searchTerm = getSearchTerm();
const filters = getSearchFilters(); const filters = getSearchFilters();
if (searchTerm !== '' || !filters.allPartsOfSpeechChecked) { if (searchTerm !== '' || !filters.allPartsOfSpeechChecked) {
const matchingWords = window.currentDictionary.words.slice().filter(word => { const matchingWords = window.currentDictionary.words.slice().filter(word => {
@ -37,9 +39,20 @@ export function getMatchingSearchWords() {
} }
return true; return true;
}).filter(word => { }).filter(word => {
const isInName = filters.name && new RegExp(searchTerm, 'g').test(word.name); searchTerm = filters.caseSensitive ? searchTerm : searchTerm.toLowerCase();
const isInDefinition = filters.definition && new RegExp(searchTerm, 'g').test(word.simpleDefinition); const name = filters.caseSensitive ? word.name : word.name.toLowerCase();
const isInDetails = filters.details && new RegExp(searchTerm, 'g').test(word.longDefinition); const simpleDefinition = filters.caseSensitive ? word.simpleDefinition : word.simpleDefinition.toLowerCase();
const longDefinition = filters.caseSensitive ? word.longDefinition : word.longDefinition.toLowerCase();
const isInName = filters.name
&& (filters.exact
? searchTerm == name
: new RegExp(searchTerm, 'g').test(name));
const isInDefinition = filters.definition
&& (filters.exact
? searchTerm == simpleDefinition
: new RegExp(searchTerm, 'g').test(simpleDefinition));
const isInDetails = filters.details && new RegExp(searchTerm, 'g').test(longDefinition);
return searchTerm === '' || isInName || isInDefinition || isInDetails; return searchTerm === '' || isInName || isInDefinition || isInDetails;
}); });
return matchingWords; return matchingWords;
@ -51,10 +64,12 @@ export function getMatchingSearchWords() {
export function highlightSearchTerm(word) { export function highlightSearchTerm(word) {
const searchTerm = getSearchTerm(); const searchTerm = getSearchTerm();
if (searchTerm) { if (searchTerm) {
const filters = getSearchFilters();
const regexMethod = 'g' + (filters.caseSensitive ? '' : 'i');
const markedUpWord = cloneObject(word); const markedUpWord = cloneObject(word);
markedUpWord.name = markedUpWord.name.replace(new RegExp(searchTerm, 'g'), `<mark>${searchTerm}</mark>`); markedUpWord.name = markedUpWord.name.replace(new RegExp(`(${searchTerm})`, regexMethod), `<mark>$1</mark>`);
markedUpWord.simpleDefinition = markedUpWord.simpleDefinition.replace(new RegExp(searchTerm, 'g'), `<mark>${searchTerm}</mark>`); markedUpWord.simpleDefinition = markedUpWord.simpleDefinition.replace(new RegExp(`(${searchTerm})`, regexMethod), `<mark>$1</mark>`);
markedUpWord.longDefinition = markedUpWord.longDefinition.replace(new RegExp(searchTerm, 'g'), `<mark>${searchTerm}</mark>`); markedUpWord.longDefinition = markedUpWord.longDefinition.replace(new RegExp(`(${searchTerm})`, regexMethod), `<mark>$1</mark>`);
return markedUpWord; return markedUpWord;
} }
return word; return word;

14
src/js/setupListeners.js
View file

@ -78,7 +78,9 @@ function setupEditFormButtons() {
function setupSearchBar() { function setupSearchBar() {
const searchBox = document.getElementById('searchBox'), const searchBox = document.getElementById('searchBox'),
clearSearchButton = document.getElementById('clearSearchButton'), clearSearchButton = document.getElementById('clearSearchButton'),
openSearchModal = document.getElementById('openSearchModal'); openSearchModal = document.getElementById('openSearchModal'),
searchExactWords = document.getElementById('searchExactWords'),
searchIncludeDetails = document.getElementById('searchIncludeDetails');
searchBox.addEventListener('change', () => { searchBox.addEventListener('change', () => {
renderWords(); renderWords();
}); });
@ -93,6 +95,16 @@ function setupSearchBar() {
openSearchModal.addEventListener('click', () => { openSearchModal.addEventListener('click', () => {
document.getElementById('searchModal').style.display = 'block'; document.getElementById('searchModal').style.display = 'block';
}); });
searchExactWords.addEventListener('change', () => {
if (searchExactWords.checked) {
searchIncludeDetails.checked = false;
searchIncludeDetails.disabled = true;
} else {
searchIncludeDetails.disabled = false;
searchIncludeDetails.checked = true;
}
});
} }
export function setupSearchFilters() { export function setupSearchFilters() {