Highlight search results

This commit is contained in:
KatieFrogs 2022-02-27 22:11:21 +03:00
parent 70a047cd1c
commit fbcb0e41eb
2 changed files with 50 additions and 7 deletions

View File

@ -113,6 +113,10 @@
width: calc(100% - (var(--course-width) + 0.4em) * 5 - 0.6em); width: calc(100% - (var(--course-width) + 0.4em) * 5 - 0.6em);
} }
.song-search-result-info .highlighted-text {
color: #faff00;
}
.song-search-result-title, .song-search-result-title,
.song-search-result-subtitle { .song-search-result-subtitle {
display: inline-block; display: inline-block;

View File

@ -2705,7 +2705,8 @@ class SongSelect{
return addedSong return addedSong
} }
createSearchResult(song, resultWidth, fontSize){ createSearchResult(result, resultWidth, fontSize){
var song = result.obj
var title = this.getLocalTitle(song.title, song.title_lang) var title = this.getLocalTitle(song.title, song.title_lang)
var subtitle = this.getLocalTitle(title === song.title ? song.subtitle : "", song.subtitle_lang) var subtitle = this.getLocalTitle(title === song.title ? song.subtitle : "", song.subtitle_lang)
@ -2723,14 +2724,20 @@ class SongSelect{
resultInfoDiv.classList.add("song-search-result-info") resultInfoDiv.classList.add("song-search-result-info")
var resultInfoTitle = document.createElement("span") var resultInfoTitle = document.createElement("span")
resultInfoTitle.classList.add("song-search-result-title") resultInfoTitle.classList.add("song-search-result-title")
this.setAltText(resultInfoTitle, title)
resultInfoTitle.appendChild(this.highlightResult(title, result[0]))
resultInfoTitle.setAttribute("alt", title)
resultInfoDiv.appendChild(resultInfoTitle) resultInfoDiv.appendChild(resultInfoTitle)
if(subtitle){ if(subtitle){
resultInfoDiv.appendChild(document.createElement("br")) resultInfoDiv.appendChild(document.createElement("br"))
var resultInfoSubtitle = document.createElement("span") var resultInfoSubtitle = document.createElement("span")
resultInfoSubtitle.classList.add("song-search-result-subtitle") resultInfoSubtitle.classList.add("song-search-result-subtitle")
this.setAltText(resultInfoSubtitle, subtitle)
resultInfoSubtitle.appendChild(this.highlightResult(subtitle, result[1]))
resultInfoSubtitle.setAttribute("alt", subtitle)
resultInfoDiv.appendChild(resultInfoSubtitle) resultInfoDiv.appendChild(resultInfoSubtitle)
} }
@ -2780,6 +2787,36 @@ class SongSelect{
return resultDiv return resultDiv
} }
highlightResult(text, result){
var fragment = document.createDocumentFragment()
var indexes = result ? result.indexes : []
var ranges = []
var range
indexes.forEach(idx => {
if(range && range[1] === idx - 1){
range[1] = idx
}else{
range = [idx, idx]
ranges.push(range)
}
})
var lastIdx = 0
ranges.forEach(range => {
if(lastIdx !== range[0]){
fragment.appendChild(document.createTextNode(text.slice(lastIdx, range[0])))
}
var span = document.createElement("span")
span.classList.add("highlighted-text")
span.innerText = text.slice(range[0], range[1] + 1)
fragment.appendChild(span)
lastIdx = range[1] + 1
})
if(text.length !== lastIdx){
fragment.appendChild(document.createTextNode(text.slice(lastIdx)))
}
return fragment
}
searchSetActive(idx){ searchSetActive(idx){
this.playSound("se_ka") this.playSound("se_ka")
var active = this.search.div.querySelector(":scope .song-search-result-active") var active = this.search.div.querySelector(":scope .song-search-result-active")
@ -3024,9 +3061,11 @@ class SongSelect{
keys: ["titlePrepared", "subtitlePrepared"], keys: ["titlePrepared", "subtitlePrepared"],
allowTypo: true, allowTypo: true,
limit: 100 limit: 100
}).map(result => result.obj) })
}else{ }else{
results = results.slice(0, 100) results = results.map(result => {
return {obj: result}
}).slice(0, 100)
} }
return results return results
@ -3064,8 +3103,8 @@ class SongSelect{
this.ctx.save() this.ctx.save()
var fragment = document.createDocumentFragment() var fragment = document.createDocumentFragment()
new_results.forEach(song => { new_results.forEach(result => {
var result = this.createSearchResult(song, resultWidth, fontSize) var result = this.createSearchResult(result, resultWidth, fontSize)
fragment.appendChild(result) fragment.appendChild(result)
this.search.results.push(result) this.search.results.push(result)
}) })