diff --git a/assets/WrappingMarquee.js b/assets/WrappingMarquee.js index 6b8883d7..3bbef676 100644 --- a/assets/WrappingMarquee.js +++ b/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 \ No newline at end of file +export default WrappingMarquee