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