Behaviors

JavaScriptlink.js · element.js · animation.jsRequires _defaults.js

A grab-bag of tiny, attribute-driven behaviors. They navigate, mutate the URL, or trigger browser APIs, so there’s no live preview here — but each is a single attribute.

Clickable elements — data-href

Make any element behave like a link (useful for whole cards or table rows):

<div class="…" data-href="/accounts/42">…</div>

URL filters — data-filter

Toggle query parameters on the current URL (for server-rendered filtering). Values are param:value, comma-separated.

<button data-filter="status:active">Active</button>

<!-- append instead of replace, and reflect active state on load -->
<button data-filter="tag:vip" data-filter-append data-filter-set-active>VIP</button>

<!-- clear params -->
<button data-filter-reset="status,tag">Clear</button>

Attribute	Effect
data-filter="p:v[,p:v]"	Toggle these params in the URL and reload.
data-filter-append	Append (multi-value) instead of replacing.
data-filter-set-active	Add data-active when the param is present on load.
data-filter-reset="p[,p]"	Remove the given params.

Note

The filter attributes are validated against window._regexs from _defaults.js, so that dependency is required.

Share — data-share

Uses the native Web Share sheet. Elements are removed when the browser doesn’t support sharing, so they never appear broken.

<button data-share="https://example.com/x" data-share-title="Check this out">Share</button>

Download — data-download

Fetches a URL and saves it with a chosen filename.

<button data-download="/reports/june.pdf" data-download-name="june-report.pdf">Download</button>

Attribute	Effect
data-href="<url>"	Navigate on click.
data-share / data-share-title	Native share (element removed if unsupported).
data-download / data-download-name	Fetch + save as file.

Password toggle — data-password-toggle

Show/hide a password field. The button gets data-active while the password is visible.

<input id="pw" class="input" type="password" />
<button data-password-toggle="#pw">Show</button>

Video facade — data-video-player

Click a poster/button to start an embedded video (sets autoplay and removes the poster):

<button data-video-player="#promo">▶ Play</button>
<iframe id="promo" src="https://www.youtube.com/embed/…"></iframe>

Scroll animations — data-animation

animation.jsneeds anime.js

Animate an element into view on scroll. Great for hero text and count-up stats.

<h1 data-animation="word">Reveals word by word</h1>
<span data-animation="number">128400</span>  <!-- counts up -->

Value	Effect
word / char	Reveal text word- or character-by-character.
number	Count up to the element’s numeric text.
icon	Draw an SVG icon’s strokes.

Each behavior gets a …-created [auto-set] [internal] guard once wired. Re-run the matching create…() function for content added after load.