yoja-web

yw-controler attribute

Attach a JavaScript controller to the element (making it a section). The value is the path to an ES6 module whose default export is a class; its constructor receives the Section handle. (Note the single-l spelling controler.)

<section yw-controler="./sections/header/HeaderControler.js">
  <!-- header markup -->
</section>

// HeaderControler.js
export default class HeaderControler {
    constructor(section) {
        section.controlerReady(() => { /* controller instantiated */ });
        section.pageReady(() => { /* whole page loaded */ });
    }
}

yw-language attribute

Declare the XML translation file for the section's i18n (making it a section). Translations are applied to descendants via the yw-i18n* attributes and re-applied on language change. Combinable with the other directives.

<div yw-controler="./AppControler.js" yw-language="./i18n/en.xml"></div>

yw-css attribute

Attach a CSS file scoped to the section via adopted stylesheets (making it a section). An empty value (yw-css with no path) makes the section inherit its parent section's stylesheet instead of loading its own.

<!-- own scoped stylesheet -->
<div yw-css="./card.css"></div>

<!-- inherit the parent section's stylesheet -->
<div yw-controler="./CardControler.js" yw-css></div>

yw-slot attribute

Point at an HTML template file used as the section's slot for content projected from a parent section (making it a section).

<div yw-slot="./slot.html"></div>

yw-include attribute

Graft an external HTML fragment onto the element. This does not create a section; the included file's own yw-* directives are wired up after grafting, relative to its own location.

<!-- outer (default): the host <div> is replaced by the loaded HTML -->
<div yw-include="./sections/taskdetail/taskdetail.html"></div>

<!-- inner: the host <div> is kept, loaded HTML becomes its children -->
<div yw-include="./sidebar.html" yw-include-mode="inner"></div>

yw-include-mode takes outer or inner; any other value — or omitting it — falls back to outer.

window.yojaWeb global object

Runtime entry point injected before any controller runs.

window.yojaWebApi global object

Aggregator exposing every service as a single namespace.

Section class (injected, not exported)

Handle injected into every controller constructor. One Section per DOM element carrying a yw-* directive.

httpClient service

Promise-based HTTP client. Content-Type is auto-detected from the body's runtime type. Exposes interceptors and an online/offline fallback.

storageService service

Wrappers for localStorage and sessionStorage with typed accessors and change events. Item keys are namespaced (yojaWebItemKey__) and a per-scope key index is maintained.

Values are JSON-serialized with a type tag so the type is restored on read:

Values must be JSON-serializable — function / Map / Set / Symbol are dropped, and a Date nested inside an object is restored as its ISO string.

eventService service

App-wide publish/subscribe bus. Events are identified by an eventId string; queries can target one or several events.

webSocketService service

WebSocket client. webSocket(request) opens a new connection or returns the existing one for the same URL.

navigationService service

Browser navigation and location helpers.

urlParameterService service

Read and write URL query parameters with history management.

UrlParameter type

Ordered, multi-valued query-string model returned by currentUrlParameter() and navigationService.urlParameter(). An Entry is { key: string, value: string }; empty values are normalised to null.

HistoryState type

Immutable snapshot stored in the History API by push() / replace() and returned by state(). Holds the user data payload, a cloned UrlParameter, the hash fragment, and the resolved URL.

languageService service

Internationalisation. Loads XML translation files and retranslates the page on language change.

responsiveService service

Viewport breakpoint detection. Breakpoints are declared in YojaWeb.conf.js via initialize().