| | |
| | (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); |
| | })(); |
| |
|