2e:null 2f:["$","title",null,{"children":"Scrubber with a label | Bildungsplanung Kanton Zürich | Observable"}] 34:T152c,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; }; } }35:T9bc,scruberstyle = html``36:[] 32:{"id":"30a8f5c3b5a8561d","slug":"scrubber","title":"Scrubber with a label","thumbnail":"7cda3dfee2976d51eb7d99a025c7799e72a4a9db85446a0adc9a0418a7cb916a","access_level":"public","create_time":"$D2023-02-03T10:36:52.094Z","update_time":"$D2026-02-11T07:34:06.727Z","view_time":null,"first_public_time":"$D2023-02-03T10:36:52.094Z","has_unpublished_edits":null,"fork":{"id":"450051d7f1174df8","slug":"scrubber","title":"Scrubber","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"480a316ccb4f6253","login":"bildungsplanungzh","name":"Bildungsplanung Kanton Zürich","avatar_url":"https://avatars-next.observableusercontent.com/2cb1f8851e077d6126eed5b60e134287f21a1bc0897970ba693f8aa5b3dc3bb3","tier":"pro_2024"},"version":710,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ae2fb568d64d2eb1","login":"resmartizh","name":"Res Marti","avatar_url":"https://avatars-next.observableusercontent.com/69661c8e64ee6b7b99aba46691979edfa94971eb1e410861d738d2401ebe034e","tier":null}],"members":[{"type":"team","id":"480a316ccb4f6253","login":"bildungsplanungzh","name":"Bildungsplanung Kanton Zürich","avatar_url":"https://avatars-next.observableusercontent.com/2cb1f8851e077d6126eed5b60e134287f21a1bc0897970ba693f8aa5b3dc3bb3","tier":"pro_2024","role":"editor"},{"type":"individual","id":"ae2fb568d64d2eb1","login":"resmartizh","name":"Res Marti","avatar_url":"https://avatars-next.observableusercontent.com/69661c8e64ee6b7b99aba46691979edfa94971eb1e410861d738d2401ebe034e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Scrubber with a label","cells":[{"id":0,"value":"md`# Scrubber with a label\n\nDEPRICATED: use [LeuRange](https://observablehq.com/@bildungsplanungzh/leurange) instead.\n\nThis reusable input is intended to drive animations while providing the reader interactive control on demand: the animation pauses when the user interacts with the slider, but can be resumed by clicking the play button. For examples, see [Bar Chart Race](/@mbostock/bar-chart-race-with-scrubber), [The Wealth & Health of Nations](/@mbostock/the-wealth-health-of-nations), [Solar Path](/@mbostock/solar-path), or [Animated Treemap](/@d3/animated-treemap).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`To use in your notebook:\n\n~~~js\nimport {Scrubber} from \"@resmartizh/scrubber\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viewof i = Scrubber(numbers)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"numbers = Array.from({length: 256}, (_, i) => i)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`The current value of *i* is ${i}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`Given an array of *values* representing the discrete frames of the animation, such as an array of numbers or dates, Scrubber returns a [view-compatible input](/@observablehq/introduction-to-views). (It uses the [disposal promise](/@mbostock/disposal) to stop the animation automatically on invalidation.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`## Options\n\nScrubber has several options which you can pass as the second argument.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"autoplay = md`The *autoplay* option, which defaults to true, specifies whether the animation plays automatically. Set it to false to require the reader to click on the play button.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"Scrubber(numbers, { autoplay: false })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"loop = md`The *loop* option, which defaults to true, specifies whether the animation should automatically restart from the beginning after the end is reached. Set it to false to require the reader to click the play button to restart the animation after it ends.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"Scrubber(numbers, { loop: false })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`The *alternate* option, which defaults to false, specifies whether the animation should reverse direction when it reaches the end, rather than repeat from the start.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"Scrubber(numbers, { loop: false, alternate: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"delay = md`The *delay* option, which defaults to null, specifies how long to wait between frames in milliseconds. A null value means to use [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame), which typically means sixty times per second (about 17ms). Non-null delays use [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"Scrubber([\"red\", \"green\", \"blue\"], { delay: 1000 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"loopDelay = md`The *loopDelay* option, which defaults to 0, specifies how long to wait before looping in milliseconds. This can be paired with the *initial* option to show the ending value before the animation starts anew from the beginning.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"Scrubber(numbers, { initial: numbers.length - 1, loopDelay: 1000 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"format = md`The *format* option, which defaults to the identity function, specifies how to display the currently-selected value. The *format* function is passed the current value, the current (zero-based) index, and the values array.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"dates = Array.from({length: 365}, (_, i) => {\n const date = new Date(2019, 0, 1);\n date.setDate(i + 1);\n return date;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof date = Scrubber(dates, {\n autoplay: false,\n format: (date) =>\n date.toLocaleString(\"de\", { month: \"long\", day: \"numeric\" }),\n label: \"TEST\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":636,"value":"objectinit = md`The Scrubber can also be initialized as a object using the *new* keyword. The object then provides two methods.\n\nThe getForm() method returns the html node with the scrubber.\n\nThe getIndex(value) method returns the index of a specifix value. This can be used to set the scrubber to a specific value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"scrubberobj = new Scrubber([2012, 2013, 2014, 2015, 2016], {\n autoplay: false,\n label: \"Jahr\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"viewof scrubber = scrubberobj.getForm()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"scrubberobj.getIndex(2016)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"//This is how a scrubber can be changed programatically\n{\n let value = scrubberobj.getIndex(2015);\n let element = document.querySelector(\"form#Jahr > input\");\n element.value = value;\n element.dispatchEvent(new CustomEvent(\"input\", { bubbles: true }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`If you have suggestions for other options you’d like to see, please let me know!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`---\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"import { svgicons } from \"@bildungsplanungzh/general\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"//Imports the icons from zhweb, to make thinks look okay in observable. This is not needed in zhweb.\nsvgicons1 = svgicons","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"