starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-08-27 22:04:08 +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
+13 -11
View File
@@ -3,7 +3,7 @@ class WrappingMarquee {
#scrollSpeed = 30 #scrollSpeed = 30
/** /**
* @param {HTMLElement} el * @param {HTMLElement} el
*/ */
constructor(el) { constructor(el) {
this.el = el this.el = el
@@ -21,8 +21,8 @@ class WrappingMarquee {
/** /**
* Transparent gradient mask shown when text is scrolling left and overflowing right * Transparent gradient mask shown when text is scrolling left and overflowing right
* *
* @param {boolean} showLeft * @param {boolean} showLeft
*/ */
setMask(showLeft) { setMask(showLeft) {
if (!this.el) return if (!this.el) return
@@ -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)
} }
@@ -94,8 +96,8 @@ class WrappingMarquee {
/** /**
* Initialize and start marquee if text overflows container * Initialize and start marquee if text overflows container
* resets the marquee if already active * resets the marquee if already active
* *
* @param {string} innerText * @param {string} innerText
*/ */
init(innerText) { init(innerText) {
if (!this.el || !this.pEl) return if (!this.el || !this.pEl) return
@@ -114,4 +116,4 @@ class WrappingMarquee {
} }
} }
} }
export default WrappingMarquee export default WrappingMarquee