diff --git a/assets/js/levenshtein.js b/assets/js/levenshtein.js new file mode 100644 index 00000000..9c8e35b0 --- /dev/null +++ b/assets/js/levenshtein.js @@ -0,0 +1,101 @@ +// Levenshtein algorithm by Gustaf Andersson: https://github.com/gustf/js-levenshtein +function _min(d0, d1, d2, bx, ay) +{ + return d0 < d1 || d2 < d1 + ? d0 > d2 + ? d2 + 1 + : d0 + 1 + : bx === ay + ? d1 + : d1 + 1; +} + +export function levenshtein(a, b) +{ + if (a === b) { + return 0; + } + + if (a.length > b.length) { + var tmp = a; + a = b; + b = tmp; + } + + var la = a.length; + var lb = b.length; + + while (la > 0 && (a.charCodeAt(la - 1) === b.charCodeAt(lb - 1))) { + la--; + lb--; + } + + var offset = 0; + + while (offset < la && (a.charCodeAt(offset) === b.charCodeAt(offset))) { + offset++; + } + + la -= offset; + lb -= offset; + + if (la === 0 || lb < 3) { + return lb; + } + + var x = 0; + var y; + var d0; + var d1; + var d2; + var d3; + var dd; + var dy; + var ay; + var bx0; + var bx1; + var bx2; + var bx3; + + var vector = []; + + for (y = 0; y < la; y++) { + vector.push(y + 1); + vector.push(a.charCodeAt(offset + y)); + } + + var len = vector.length - 1; + + for (; x < lb - 3;) { + bx0 = b.charCodeAt(offset + (d0 = x)); + bx1 = b.charCodeAt(offset + (d1 = x + 1)); + bx2 = b.charCodeAt(offset + (d2 = x + 2)); + bx3 = b.charCodeAt(offset + (d3 = x + 3)); + dd = (x += 4); + for (y = 0; y < len; y += 2) { + dy = vector[y]; + ay = vector[y + 1]; + d0 = _min(dy, d0, d1, bx0, ay); + d1 = _min(d0, d1, d2, bx1, ay); + d2 = _min(d1, d2, d3, bx2, ay); + dd = _min(d2, d3, dd, bx3, ay); + vector[y] = dd; + d3 = d2; + d2 = d1; + d1 = d0; + d0 = dy; + } + } + + for (; x < lb;) { + bx0 = b.charCodeAt(offset + (d0 = x)); + dd = ++x; + for (y = 0; y < len; y += 2) { + dy = vector[y]; + vector[y] = dd = _min(dy, d0, dd, bx0, vector[y + 1]); + d0 = dy; + } + } + + return dd; +} diff --git a/assets/js/script.js b/assets/js/script.js index 5806a729..ee41d572 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,10 +1,17 @@ import "./dark_mode.js"; +import { levenshtein } from "./levenshtein.js"; + +const exactWordScore = 12; +const partialWordScore = 10; +const levenshteinScore = 10; +const levenshteinThreshold = 3; const searchInput = document.querySelector("#search-input"); const cardsSection = document.querySelector("#cards"); const filterSelect = document.querySelector("#tags-filter"); let listOfCardsFiltered = []; let favoriteCards = []; + const starIcon = "https://img.icons8.com/ios/50/star--v1.png"; const starIconFilled = "https://img.icons8.com/ios-glyphs/30/ffe100/star--v1.png"; @@ -52,30 +59,145 @@ function filterCards() { searchCards(); } +function sortCards(sortingArray) { + if (listOfCardsFiltered.length > 0) { + if (!Array.isArray(sortingArray) || !sortingArray.length) { + const cards = document.querySelector("#cards"); + // selects all cards that are not hidden and sorts them by title + // every child is re-appended to cards in the order of the now sorted array. When an element is re-appended it is actually moved from its previous location + [...cards.querySelectorAll(".card:not([style*='display: none;'])")] + .sort((a, b) => a.querySelector(".card__title").textContent.toLowerCase().localeCompare(b.querySelector(".card__title").textContent.toLowerCase())) + .forEach(node => cards.appendChild(node)); + } else { + const cards = document.querySelector("#cards"); + // selects all cards that are not hidden and sorts them by the order of the sortingArray + // every child is re-appended to cards in the order of the now sorted array. When an element is re-appended it is actually moved from its previous location + [...cards.querySelectorAll(".card:not([style*='display: none;'])")] + .sort((a, b) => sortingArray.indexOf(a) - sortingArray.indexOf(b)) + .forEach(node => cards.appendChild(node)); + } + } +} + function searchCards() { - const inputValue = searchInput.value.toLowerCase(); - let cardsFiltered = []; + const inputValue = searchInput.value.toLowerCase().trim(); + let cardsScores = []; - for (const card of listOfCardsFiltered) { - const cardContent = card.textContent.toLowerCase(); + if (inputValue.length > 0) { + const searchWords = inputValue.split(/\s+/); - if (cardContent.includes(inputValue)){ - card.style.display = ""; - cardsFiltered.push(card); + for (const card of listOfCardsFiltered) { + let cardScore = 0; + + // search for words inside the title that either contains the search words or have a low levenshtein distance + // only consider the best case for each search word + const cardTitle = card.querySelector(".card__title").textContent.toLowerCase(); + const titleWords = cardTitle.split(/\s+/); + let titleScore = 0; + + searchWords.forEach((searchWord) => { + let wordScore = 0; + + titleWords.some((word) => { + if (word == searchWord) { + // breaks the loop if the word is an exact match, since no other word can have a higher score + wordScore = exactWordScore; + return true; + + } else if (wordScore < partialWordScore) { + if (word.includes(searchWord)) { + wordScore = partialWordScore; + + } else if (word.length > 3) { + const levenshteinDistance = levenshtein(searchWord, word); + + // only the word with the lowest levenshtein distance will be considered + if ((levenshteinDistance <= levenshteinThreshold) && (levenshteinScore - levenshteinDistance > wordScore)) { + wordScore = levenshteinScore - levenshteinDistance; + } + } + } + }); + + titleScore += wordScore; + }); + + // give extra points for words in title + cardScore += titleScore * 10; + + // search for words inside the description that either contains the search words or have a low levenshtein distance + // only consider the best case for each search word + const cardDescription = card.querySelector(".card__description").textContent.toLowerCase(); + const descriptionWords = cardDescription.split(/\s+/); + let descriptionScore = 0; + + searchWords.forEach((searchWord) => { + let wordScore = 0; + + descriptionWords.some((word) => { + if (word == searchWord) { + // breaks the loop if the word is an exact match, since no other word can have a higher score + wordScore = exactWordScore; + return true; + + } else if (wordScore < partialWordScore) { + if (word.includes(searchWord)) { + wordScore = partialWordScore; + + } else if (word.length > 3) { + const levenshteinDistance = levenshtein(searchWord, word); + + // only the word with the lowest levenshtein distance will be considered + if ((levenshteinDistance <= levenshteinThreshold) && (levenshteinScore - levenshteinDistance > wordScore)) { + wordScore = levenshteinScore - levenshteinDistance; + } + } + } + }); + + descriptionScore += wordScore; + }); + + cardScore += descriptionScore; + + if (cardScore > 0) { + card.style.display = ""; + cardsScores.push([card, cardScore]); + } else { + card.style.display = "none"; + } + } + + const msgNotFound = document.querySelector("div.msg"); + + if (cardsScores.length > 0) { + msgNotFound.style.display = "none"; + // sort the array of cards by score + cardsScores.sort((a, b) => b[1] - a[1]); + // remove the scores from the array + cardsScores = cardsScores.map((card) => card[0]); + sortCards(cardsScores); } else { - card.style.display = "none"; + msgNotFound.style.display = ""; } - } - const msgNotFound = document.querySelector("div.msg"); - msgNotFound.style.display = cardsFiltered.length==0 ? "" : "none"; - + } else { + // display all cards if search input is empty + for (const card of listOfCardsFiltered) { + card.style.display = ""; + cardsScores.push(card); + } + + const msgNotFound = document.querySelector("div.msg"); + msgNotFound.style.display = "none"; + sortCards(); + } } function insertCardsIntoHtml(data) { let cards = `
- Mulher olhando para site sem dados + Mulher olhando para site sem dados Data illustrations by Storyset
@@ -220,12 +342,12 @@ function generateCardId(defaultCardId, title, description) { * @returns {string} The hashed representation of the content. */ function generateContentId(title = '', description = '', hash = 5381) { - const data = (title + description).slice(0, 32).split(' ').join('') + const data = (title + description).slice(0, 32).split(' ').join('') - for (let i = 0; i < data.length; i++) { - hash = ((hash << 5) + hash) + data.charCodeAt(i); - } + for (let i = 0; i < data.length; i++) { + hash = ((hash << 5) + hash) + data.charCodeAt(i); + } - const hashString = Math.abs(hash).toString(36); // Convert to base-36 string - return hashString; -} \ No newline at end of file + const hashString = Math.abs(hash).toString(36); // Convert to base-36 string + return hashString; +}