function Scrubber(values, config = {}) { /** * Scrubber creates a slider with a play button and a label, the animation is startet by default and there different options for the animation * * @param {string[]|number[]} values an Array of values to be used in the slider as an array. The slider only makes sense for ordinal values. * @param {Object} config The config parameters for the scrubbers * @param {function(string|number)} [config.format = (x) => x] A function to format the text values provided (mainly used to format numbers) * @param {number} [config.initial = 0] The initial value to be selected. * @param {number} [config.delay = null] The delay before each step in miliseconds. * @param {Boolean} [config.autoplay = true] If true the animation starts without user interaction. * @param {Boolean} [config.loop = true] If false the animation stops as soon as the end of the slider is reached. * @param {number} [config.loopDelay = null] The delay before each rerun of the loop animation in miliseconds. * @param {Boolean} [config.alternate = false] If true the animation runs in both direction alternation. * @param {string} [config.label] The label to be displayed left of the slider, can also contain html is needed. */ let { format = (value) => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false, label = "" } = config; values = Array.from(values); initial = values.indexOf(initial); const form = html``; //console.log(scruberstyle); form.innerHTML += scruberstyle.outerHTML; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.innerHTML = ''; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.innerHTML = ''; if (frame !== null) cancelAnimationFrame(frame), (frame = null); if (timer !== null) clearTimeout(timer), (timer = null); if (interval !== null) clearInterval(interval), (interval = null); } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if ( form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN) ) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), (frame = null); if (interval !== null) clearInterval(interval), (interval = null); timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); } form.i.oninput = (event) => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); //adapt track to actual value let min = form.i.min; let max = form.i.max; let val = form.i.value; form.i.style.backgroundSize = ((val - min) * 100) / (max - min) + "% 100%"; //adapt track to the value if the value changes form.i.oninput = (e) => { let target = e.target; const min = target.min; const max = target.max; const val = target.value; target.style.backgroundSize = ((val - min) * 100) / (max - min) + "% 100%"; if (e && e.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; // if you run me without new if (!new.target) { return form; } // if initialized as an object with the new keyword else { this.getIndex = function (value) { return values.indexOf(value); }; this.getForm = function () { return form; }; } }