Wall API
@diazoma/wall is the wall: a curved, searchable grid of a site’s items in a VR headset, and a magic window in the page on
desktop and phone. It uses three.js and no framework. Everything the wall knows about a site comes from a FeedAdapter.
import { Wall } from '@diazoma/wall';
const wall = new Wall({ mount: document.getElementById('diazoma'), adapter }).mount();mount() builds the scene in mount, so the magic window works at once. enterVr() must run inside a user gesture and
rejects when the headset refuses. destroy() removes the scene.
Builds
Section titled “Builds”| File | What |
|---|---|
dist/wall.esm.js | the module, with three as a peer dependency |
dist/wall.iife.js | window.Diazoma, with three bundled |
dist/loader.js | at most 3 KB gzipped: the Enter VR card. It loads the core only when it is needed |
Options
Section titled “Options”| Option | What it does |
|---|---|
mount | The element the wall is built in. |
adapter | Where items, actions, filters and the site’s view come from. |
account | The site’s own sign-in for the wall (phone link, user menu). Without it the wall has no account menu, and actions go straight to the site with the visitor’s session. |
view | How the wall looks. Same shape as the manifest’s view. It wins over adapter.view. See View customization. |
hooks | Code that returns data: actions(item, ids), actionLabel(id, item, active), panel(item, lines), cardLabel(item, lines), openItem(item). |
brand | Colours, logo, name and canvas font. view.theme sits on top of it. |
strings, locale | Texts. locale is en or bg. view.strings sits on top of the locale, and strings wins over both. |
telemetry | A function (name, data) => void, or { endpoint, sample, prefix }. |
features | capsCookie (off by default), captureErrors (on) and offerSession (on). |
inputProfile | meta-quest, pico, android-xr, visionos, desktop, phone or auto. |
storageKeys | Replaces the localStorage keys for settings, queue and resume. Default diazoma:<adapter id>:settings and so on. |
initialItem | The id of an item to open first. |
site | The site key for telemetry. Defaults to location.hostname. |
announce, onScopeChange, onFilterChange, onAuthChange | Callbacks. |
Events
Section titled “Events”wall.on('open', (item) => { /* the visitor opened an item (the wall passes the item) */ });wall.on('action', ({ id, item, result }) => { /* an action finished; result is { ok, state?, message? } or { ok: false, reason, message? } */ });on returns a function that removes the listener. When an open listener exists, the wall does not navigate to
item.link itself, and a listener replaces hooks.openItem.
window.__diazoma
Section titled “window.__diazoma”Once the wall is mounted, window.__diazoma is { version, route, scope, state() }. route is the path of the wall’s page
and scope is the current scope. Other programs check this object and defer to it. The scene is also on the object for the
headless test harness, and is not part of the public API.
Telemetry
Section titled “Telemetry”With { endpoint, sample, prefix }, events are batched and sent to endpoint. sample is the share of events sent
(0 to 1, default 1). prefix replaces the xr_ start of the event names. Every event carries site, adapter, profile and
wallVersion. With a function, you decide names and payload. Without it, nothing is sent.
Loader options
Section titled “Loader options”The loader reads data-core, data-mount, data-title, data-body, data-enter and data-browse from its script tag, and
the wall options from window.diazoma.options. This is how the embed script starts the wall.