mirror of
https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git
synced 2024-11-15 15:31:51 +08:00
Highlight search results
This commit is contained in:
parent
70a047cd1c
commit
fbcb0e41eb
@ -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;
|
||||||
|
@ -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)
|
||||||
})
|
})
|
||||||
|
Loading…
Reference in New Issue
Block a user