TheThomaas/cookbook
1
0
Fork 0
mirror of https://github.com/TheThomaas/my-online-cookbook.git synced 2026-01-10 20:01:47 +00:00
Code Issues Activity

Remove unused JS

Browse source
This commit is contained in:
Maël Brunet 2021-05-22 18:08:56 +02:00
parent 7f24eeae9e
commit 4513881b55
2 changed files with 0 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/js/main.js
View file

@ -1,2 +0,0 @@
import 'alpinejs';
import './search';

70
src/js/search.js
View file

@ -1,70 +0,0 @@
const searchHomeInput = document.querySelector('.js-search-home-input');
const searchHomeResultsWrapper = document.querySelector('.js-search-home-results');
let searchResults;
const clearChildNodes = (parent) => {
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}
const highlightText = (text, match) => {
const index = text.toLowerCase().indexOf(match.toLowerCase());
if (index === -1) return text;
return text.substring(0, index) + '<span class="u-highlight">' + text.substring(index, index + match.length) + '</span>' + text.substring(index + match.length);
}
if (searchHomeInput) {
// Fetch all recipes data when the user is about to search
searchHomeInput.addEventListener('focus', () => {
if (!searchResults) {
fetch('/search.json').then(res => res.json()).then(res => {
searchResults = res;
});
};
});
searchHomeInput.addEventListener('input', (e) => {
const searchInput = e.target.value.toLowerCase();
const results = [];
clearChildNodes(searchHomeResultsWrapper);
// For lower letter counts, results are unlikely to be relevant. So we don't show anything yet
if (searchInput.length < 3) { return };
searchResults.forEach(recipe => {
// We search on both recipe titles and ingredients. This could easily be extended to include the recipe tags, body, etc
const matchTitle = recipe.title.toLowerCase().includes(searchInput);
const matchIngredients = recipe.ingredients.filter(ingredient => ingredient.toLowerCase().includes(searchInput));
if (!matchTitle && !matchIngredients.length) { return };
const match = {...recipe};
if (matchTitle) { match.matchTitle = matchTitle };
if (matchIngredients.length) { match.matchIngredients = matchIngredients };
results.push(match)
});
// Now we have the search results, we just need to display them on the page
results.forEach(result => {
const listItem = document.createElement('li');
listItem.classList.add('c-search-block__search-result-title');
const link = document.createElement('a');
link.innerHTML = highlightText(result.title, searchInput);
link.setAttribute('href', result.url);
listItem.appendChild(link);
if (result.matchIngredients) {
const paragraph = document.createElement('p');
paragraph.classList.add('c-search-block__search-result-ingredients');
paragraph.innerHTML = 'Contains : ' + highlightText(result.matchIngredients.join(', '), searchInput);
listItem.appendChild(paragraph);
}
searchHomeResultsWrapper.appendChild(listItem);
});
});
}