`; var speed_label = html`Paused`; var play_buttons; var presets = {}; function input_value(new_value) { value = new_value; div.dispatchEvent(new CustomEvent("input", {bubbles:true})); } function move_time(offset) { input_value(new Date(value.getTime() + offset)); } function set_preset(name) { var f = presets[name]; f && input_value(f()); } // speed setting var speed = [0, "paused"]; // frame delay to use (maximum of step / speed, and frameInterval) var frame_delay = 1; var speed_input; function set_speed() { var new_speed = read_speed_tab(speed_input.value); var steps_per_interval = Math.round(frameInterval / step * new_speed[0]); frame_delay = Math.max(steps_per_interval, 1) * step / new_speed[0]; if (speed[0] < 0) new_speed[0] = -new_speed[0]; speed = new_speed; speed_label.innerHTML = speed[1]; // if using timers, cancel and reschedule // animation frames can keep running if (timer) { clearTimeout(timer); schedule_tick(); } } // setTimeout instance var timer = 0; // requestAnimationFrame instance var animation = 0; // time stamp when the last tick happened, as returned by performance.now() var last_tick = undefined; /// schedule next tick. We may arrive here when this tick was already /// past due, in that case, skip ticks as necessary. function schedule_tick() { // delay to next tick. If we can’t keep up, advance more than one // frames at once. var elapsed = performance.now() - last_tick; var tick_count = Math.max(1, Math.ceil(elapsed / frame_delay)); var delay = tick_count * frame_delay - elapsed; if (delay < 50) { // 20 fps or more, use requestAnimationFrame timer = 0; animation = window.requestAnimationFrame(function(now) { // skip animation frames if we didn't reach the next tick yet var frame_duration = now - last_tick; if (frame_duration > frame_delay * .95) { tick(frame_delay * tick_count); } else { schedule_tick(); } }); } else { timer = window.setTimeout(tick, delay, frame_delay * tick_count); animation = 0 } } /// This function advances the animation. The tick count is used to update /// the last_tick time stamp. It will track the current time, but by using a calculated /// time stamp we can ensure ticks happen in a regular interval (eg. every 1000 ms). function tick(frame_duration) { // detect if we got removed (eg. the cell that called timeButtons() was refreshed): if (!div.parentElement) { stop(); return; } move_time(speed[0] * frame_duration); last_tick += frame_duration; schedule_tick(); } function play(direction) { speed[0] = direction; set_speed(); if (!(timer || animation)) { last_tick = performance.now(); tick(0); } fill_buttons(play_buttons, direction); } function stop() { window.clearTimeout(timer); timer = 0; window.cancelAnimationFrame(animation); animation = 0; last_tick = undefined; speed = [0, "Paused"]; speed_label.innerHTML = "Paused"; fill_buttons(play_buttons, 0); } // Extra check to avoid leaks if this cell gets refreshed invalidation.then(stop); var row1 = [ ["← day", () => move_time(-ms_per_day)], ["hour", () => move_time(-ms_per_hour)], ["min", () => move_time(-ms_per_min)], "sep", ["now", () => input_value(new Date()) ]]; presets.now = () => new Date(); for (var pr of extraPresets) { let f = pr[1]; row1.push([pr[0], () => input_value(f(value))]); presets[pr[0] = pr[1]]; } row1 = row1.concat([ "sep", ["min", () => move_time(ms_per_min)], ["hour", () => move_time(ms_per_hour)], ["day →", () => move_time(ms_per_day)] ]); var row2 = [ ["", () => play(-1)], ["", stop], ["", () => play(+1)], ]; var row1_div = html`

`; div.appendChild(row1_div); fill_row(row1_div, row1); var row2_div = document.createElement("div"); div.appendChild(row2_div); fill_row(row2_div, row2); var play1 = row2_div.firstChild.firstChild; play_buttons = [play1, play1.nextSibling.nextSibling]; play1.nextSibling.appendChild(stop_svg()); row2_div.appendChild(document.createTextNode(" ")); row2_div.appendChild(speed_label); speed_input = html`` row2_div.appendChild(speed_input); speed_input.addEventListener("input", function(e) { if (speed[0] != 0) set_speed(); e.preventDefault(); }) // set initial requested speed if (initial_speed != 0) { window.setTimeout(() => { speed_input.value = invert_speed_tab(initial_speed); play(initial_speed); }, 1); } else { fill_buttons(play_buttons, 0); } Object.defineProperty(div, "value", { get() { return value; }, set(v) { if (typeof v == 'string') { set_preset(v); } else { value = coerce_date(v); } } }); return div; }