juan/japanese-drum-game
1
0
Fork 0
mirror of https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git synced 2024-11-15 07:21:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Search optimization

Browse Source
This commit is contained in:
KatieFrogs 2022-02-26 06:06:32 +03:00
parent 0f142b5386
commit 39c2436de2
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/src/css/search.css
View File

@ -112,6 +112,7 @@
.song-search-result-title, .song-search-result-title,
.song-search-result-subtitle { .song-search-result-subtitle {
display: inline-block;
transform-origin: left; transform-origin: left;
} }

27
public/src/js/songselect.js
View File

@ -2694,7 +2694,7 @@ class SongSelect{
return addedSong return addedSong
} }
createSearchResult(song, resultsDiv){ createSearchResult(song, resultsDiv, resultWidth){
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)
@ -2716,6 +2716,7 @@ class SongSelect{
resultInfoDiv.appendChild(resultInfoTitle) resultInfoDiv.appendChild(resultInfoTitle)
if(subtitle){ if(subtitle){
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) this.setAltText(resultInfoSubtitle, subtitle)
@ -2752,23 +2753,27 @@ class SongSelect{
resultsDiv.appendChild(resultDiv) resultsDiv.appendChild(resultDiv)
var computedStyle = getComputedStyle(resultInfoDiv) if(typeof resultWidth === "undefined"){
var padding = parseFloat(computedStyle.paddingLeft.slice(0, -2)) + parseFloat(computedStyle.paddingRight.slice(0, -2)) var computedStyle = getComputedStyle(resultInfoDiv)
var padding = parseFloat(computedStyle.paddingLeft.slice(0, -2)) + parseFloat(computedStyle.paddingRight.slice(0, -2))
resultWidth = resultInfoDiv.offsetWidth - padding
}
var titleRatio = (resultInfoDiv.offsetWidth - padding) / resultInfoTitle.offsetWidth var titleRatio = resultWidth / resultInfoTitle.offsetWidth
if(titleRatio < 1){ if(titleRatio < 1){
resultInfoTitle.style.display = "block"
resultInfoTitle.style.transform = "scale(" + titleRatio + ", 1)" resultInfoTitle.style.transform = "scale(" + titleRatio + ", 1)"
} }
if(subtitle){ if(subtitle){
var subtitleRatio = (resultInfoDiv.offsetWidth - padding) / resultInfoSubtitle.offsetWidth var subtitleRatio = resultWidth / resultInfoSubtitle.offsetWidth
if(subtitleRatio < 1){ if(subtitleRatio < 1){
resultInfoSubtitle.style.transform = "scale(" + subtitleRatio + ", 1)" resultInfoSubtitle.style.transform = "scale(" + subtitleRatio + ", 1)"
} }
resultInfoSubtitle.style.display = "block"
} }
return resultDiv return {
div: resultDiv,
width: resultWidth
}
} }
searchSetActive(idx){ searchSetActive(idx){
@ -3049,9 +3054,11 @@ class SongSelect{
var resultsDiv = this.search.div.querySelector("#song-search-results") var resultsDiv = this.search.div.querySelector("#song-search-results")
resultsDiv.innerHTML = "" resultsDiv.innerHTML = ""
this.search.results = [] this.search.results = []
var resultWidth
new_results.forEach(song => { new_results.forEach(song => {
var result = this.createSearchResult(song, resultsDiv) var result = this.createSearchResult(song, resultsDiv, resultWidth)
this.search.results.push(result) resultWidth = result.width
this.search.results.push(result.div)
}) })
} }