| |
| (function(){ |
| function initTicker(){ |
| const el = document.getElementById("zenTicker"); |
| if(!el) return; |
| let speed = parseFloat(el.dataset.speed || "38"); |
| let x = el.offsetWidth; |
| const step = () => { |
| const dt = 1/60; |
| x -= speed*dt; |
| if(x < -el.scrollWidth) x = el.offsetWidth; |
| el.style.transform = `translateX(${x}px)`; |
| requestAnimationFrame(step); |
| }; |
| step(); |
| } |
| setTimeout(initTicker, 100); |
| })(); |
|
|
| |
| (function(){ |
| let raf = null; |
| let y = 0; |
|
|
| function elScroll(){ return document.getElementById("prompterScroll"); } |
| function elSpeed(){ return document.getElementById("pSpeed"); } |
|
|
| function loop(){ |
| const el = elScroll(); |
| if(!el) return; |
| const playing = (el.dataset.playing === "true"); |
| const speed = parseFloat(el.dataset.speed || "40"); |
| const dt = 1/60; |
| if(playing){ |
| y -= speed*dt; |
| el.style.transform = `translateY(${y}px)`; |
| } |
| raf = requestAnimationFrame(loop); |
| } |
|
|
| function togglePlay(){ |
| const el = elScroll(); if(!el) return; |
| const playing = (el.dataset.playing === "true"); |
| el.dataset.playing = (!playing).toString(); |
| } |
| function speedDelta(d){ |
| const el = elScroll(); if(!el) return; |
| let s = parseFloat(el.dataset.speed || "40"); |
| s = Math.max(5, Math.min(200, s + d)); |
| el.dataset.speed = String(s); |
| const sp = elSpeed(); if(sp) sp.textContent = `${Math.round(s)}px/s`; |
| } |
| function fullScreen(){ |
| const vp = document.querySelector(".prompter__viewport"); |
| if(!vp) return; |
| if(!document.fullscreenElement){ |
| vp.requestFullscreen().catch(()=>{}); |
| }else{ |
| document.exitFullscreen().catch(()=>{}); |
| } |
| } |
| function keyHandler(e){ |
| if(e.key === " "){ e.preventDefault(); togglePlay(); } |
| if(e.key === "ArrowUp"){ e.preventDefault(); speedDelta(+5); } |
| if(e.key === "ArrowDown"){ e.preventDefault(); speedDelta(-5); } |
| } |
| function clickBind(){ |
| const play = document.getElementById("pPlayPause"); |
| const slow = document.getElementById("pSlower"); |
| const fast = document.getElementById("pFaster"); |
| const full = document.getElementById("pFullscreen"); |
| if(play) play.onclick = togglePlay; |
| if(slow) slow.onclick = ()=>speedDelta(-5); |
| if(fast) fast.onclick = ()=>speedDelta(+5); |
| if(full) full.onclick = fullScreen; |
| document.addEventListener("keydown", keyHandler); |
| } |
|
|
| setTimeout(()=>{ |
| clickBind(); |
| if(!raf) raf = requestAnimationFrame(loop); |
| }, 120); |
| })(); |
|
|