OwnValues

An element's own values: what its style or its computed style says for a key, read once, the value an animation starts from, and returns to when nothing else sets it. valueLike reads a raw value in the shape of the key's target.

import * as OwnValues from "@wardic/dom/OwnValues"

const own = OwnValues.of(element)
own("opacity") // Some("1"), from its computed style
OwnValues.valueLike("10px", 0) // Some(10)

Type Aliases

OwnValue

type OwnValue = (key) => Option.Option<number | string>;

An element's own value for a key: the raw value read, a string, a transform key's identity, or None.

Parameters

key

string

Returns

Option.Option<number | string>

Functions

of()

function of(element): OwnValue;

A reader of element's own values, each read once, the first time it's needed, and kept, a miss too, so a later CSS change doesn't move it, as Motion's. For each key:

a transform key: its identity, with no read;
on an SVG element inside an <svg>, a key it takes as an attribute: that attribute, if it has one;
else its computed style, a custom property by its own name.

Making a reader reads nothing, and a read from an element not in the document isn't kept. Values read are raw strings: valueLike reads one in a target's shape.

Parameters

element

Element

Returns

OwnValue

styleValueOf()

function styleValueOf(style, key): Option<unknown>;

The app's style value for key: from an object style by the key, then by the key dash-cased; from a CSS-text style, parsed as Style.over parses it. undefined, null and an empty string are None. A transform key, x, scale, rotate, is Wardic's, as Motion's is: a binding draws it into transform. The value is as given, so a binding reads a live value, an Atom or an accessor, itself.

OwnValues.styleValueOf({ opacity: 0.5 }, "opacity") // Some(0.5)

valueLike()

function valueLike(raw, like): Option<string | number>;

raw in the shape of a key's target like, or None when it can't be:

A number target takes a finite number, or a plain number or a px string, parsed ("0.5" is 0.5, "120px" 120). Anything else misses, auto, 50%, 1em, a colour, so the key starts at its target. On a key that places or sizes the box, a miss of another type, auto or 50%, is a Measured pair instead: both ends are measured in px, as Motion's are.
A string target takes a string as it is, or a finite number as a string, but not a length in a unit other than the target's ("120px" for "0%"), which can't blend with it.