starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-08-28 06:14:00 +02:00
Code Issues 454 Packages Projects Releases 10 Wiki Activity

Update WrappingMarquee to use textContent

Browse Source
This commit is contained in:
advplyr
2025-12-12 17:12:39 -06:00
parent aaef0a7e8d
commit bab95530c8
1 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/WrappingMarquee.js
+7 -5
View File
@@ -39,11 +39,11 @@ class WrappingMarquee {
this.setMask(true) this.setMask(true)
let textScrollAmount = this.el.scrollWidth let textScrollAmount = this.el.scrollWidth
this.pEl.innerHTML = this.innerText + ' '.repeat(15) this.pEl.textContent = this.innerText + '\u00A0'.repeat(15) // \u00A0 = non-breaking space
let totalScrollAmount = this.el.scrollWidth let totalScrollAmount = this.el.scrollWidth
let scrollDuration = totalScrollAmount * this.#scrollSpeed let scrollDuration = totalScrollAmount * this.#scrollSpeed
this.pEl.innerHTML = this.pEl.innerHTML + this.innerText this.pEl.textContent = this.pEl.textContent + this.innerText
let done = false let done = false
let start, previousTimeStamp let start, previousTimeStamp
@@ -55,13 +55,14 @@ class WrappingMarquee {
const elapsed = timeStamp - start const elapsed = timeStamp - start
if (this.isScrolling && previousTimeStamp !== timeStamp) { if (this.isScrolling && previousTimeStamp !== timeStamp) {
const amountToMove = Math.min(elapsed / scrollDuration * totalScrollAmount, totalScrollAmount) const amountToMove = Math.min((elapsed / scrollDuration) * totalScrollAmount, totalScrollAmount)
this.pEl.style.transform = `translateX(-${amountToMove}px)` this.pEl.style.transform = `translateX(-${amountToMove}px)`
if (amountToMove === totalScrollAmount) done = true if (amountToMove === totalScrollAmount) done = true
if (amountToMove > textScrollAmount) this.setMask(false) if (amountToMove > textScrollAmount) this.setMask(false)
} }
if (!this.isScrolling || done) { // canceled or done if (!this.isScrolling || done) {
// canceled or done
this.isScrolling = false this.isScrolling = false
this.pEl.style.transform = 'translateX(0px)' this.pEl.style.transform = 'translateX(0px)'
this.pEl.innerText = this.innerText this.pEl.innerText = this.innerText
@@ -69,7 +70,8 @@ class WrappingMarquee {
if (done) { if (done) {
this.startTimer() this.startTimer()
} }
} else if (elapsed < scrollDuration) { // step } else if (elapsed < scrollDuration) {
// step
previousTimeStamp = timeStamp previousTimeStamp = timeStamp
this.animationId = window.requestAnimationFrame(step) this.animationId = window.requestAnimationFrame(step)
} }