Update WrappingMarquee to use textContent

assets/WrappingMarquee.js

@@ -3,7 +3,7 @@ class WrappingMarquee {
   #scrollSpeed = 30
 
   /**
-   * @param {HTMLElement} el 
+   * @param {HTMLElement} el
    */
   constructor(el) {
     this.el = el
@@ -21,8 +21,8 @@ class WrappingMarquee {
 
   /**
    * Transparent gradient mask shown when text is scrolling left and overflowing right
-   * 
-   * @param {boolean} showLeft 
+   *
+   * @param {boolean} showLeft
    */
   setMask(showLeft) {
     if (!this.el) return
@@ -39,11 +39,11 @@ class WrappingMarquee {
     this.setMask(true)
 
     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 scrollDuration = totalScrollAmount * this.#scrollSpeed
 
-    this.pEl.innerHTML = this.pEl.innerHTML + this.innerText
+    this.pEl.textContent = this.pEl.textContent + this.innerText
 
     let done = false
     let start, previousTimeStamp
@@ -55,13 +55,14 @@ class WrappingMarquee {
       const elapsed = timeStamp - start
 
       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)`
         if (amountToMove === totalScrollAmount) done = true
         if (amountToMove > textScrollAmount) this.setMask(false)
       }
 
-      if (!this.isScrolling || done) { // canceled or done
+      if (!this.isScrolling || done) {
+        // canceled or done
         this.isScrolling = false
         this.pEl.style.transform = 'translateX(0px)'
         this.pEl.innerText = this.innerText
@@ -69,7 +70,8 @@ class WrappingMarquee {
         if (done) {
           this.startTimer()
         }
-      } else if (elapsed < scrollDuration) { // step
+      } else if (elapsed < scrollDuration) {
+        // step
         previousTimeStamp = timeStamp
         this.animationId = window.requestAnimationFrame(step)
       }
@@ -94,8 +96,8 @@ class WrappingMarquee {
   /**
    * Initialize and start marquee if text overflows container
    * resets the marquee if already active
-   * 
-   * @param {string} innerText 
+   *
+   * @param {string} innerText
    */
   init(innerText) {
     if (!this.el || !this.pEl) return
@@ -114,4 +116,4 @@ class WrappingMarquee {
     }
   }
 }
-export default WrappingMarquee
+export default WrappingMarquee