Skip to content

<notatio-toggler>

<notatio-toggler name="size" values="a few|several|many"> -- a word in the prose that cycles when you click it, Wolfram's Toggler and Tangle's toggle in one.

With no values it is Wolfram's Toggler[x]: a switch between False and True. Otherwise the entries are separated by |, since commas belong to the sentence, and an entry may be written value -> label to show one thing and bind another. An entry that looks like a value is typeset; a word is set as prose. Inside a <notatio-tangle> the binding _name is the entry's value when it is a number or a named value, and otherwise its index, so a toggle over words still drives the rest of the document (<notatio-when test="_size > 1">).

A toggler is a <notatio-knob> without an axis, and that is the whole difference: there is no direction to drag a word in, so a click steps it once, and a long press (or right-click) opens a menu of every entry -- the way to reach the fifth of twelve without passing four. Left/right step it from the keyboard and accelerate when held, Shift or PageUp/PageDown jump ten, and Space cycles it until pressed again; play adds a button for that, autoplay cycles while the toggler is on screen, interval and rate set the pace. loop says what reaching an end does -- to a click as much as to playback: cycle (the default) wraps, reflect turns round, none stops. A long press on the play button opens a panel for the speed and the loop.

A quantity that *does* have a direction -- including a list you would rather brush through than pick from -- wants a knob with choices instead.

Stories in the playground·packages/notatio-lit/src/notatio-toggler.ts· in Vue: <Toggler>

Attributes

AttributeTypeDefaultNotes
namestring""The binding this toggler drives: name="a" fills the wildcard _a.reflects
valuesstring""The entries to cycle through, |-separated, each optionally value -> label. None: a True/False switch.
valuestring""The entry to start on: one of values (by value or label), or its index.
playbooleanfalseShow a play/pause button beside the word. Space toggles playback regardless.reflects
autoplaybooleanfalseCycle while scrolled into view; pause when scrolled out.
intervalnumberNumber.NaNMilliseconds per entry while playing.
ratenumberrate), interval: () => Number.isFinite(this.interval) && this.interval > 0 ? this.interval : sweepInterval(this.#choices.length), onState: () => (this._playing = this.#sweep.playing), }, openPlaybackMenu, LONG_PRESS_MS, )Playback speed as a multiplier on interval.reflects
loopLoop | ""loop), rate: () => (Number.isFinite(this.rate) && this.rate > 0 ? this.rate : 1), setRate: (rate) => (this.rate = rate), interval: () => Number.isFinite(this.interval) && this.interval > 0 ? this.interval : sweepInterval(this.#choices.length), onState: () => (this._playing = this.#sweep.playing), }, openPlaybackMenu, LONG_PRESS_MS, )What reaching an end does: cycle (default), reflect or none.reflects