JavaScript

The tsunami object

Each script that has an API adds one module to window.tsunami. Call a method with the root element of the component, the one that has the class (.otp, .table, .stepper), not a child of it.

const otp = document.querySelector(".otp");

tsunami.otp.value(otp);        // "123456"
tsunami.otp.set(otp, "654321"); // fills the boxes
tsunami.otp.clear(otp);        // empties them and focuses the first

A few modules are a function, such as tsunami.toast({ title: "Saved" }) and tsunami.copy("text"); the rest of that module hangs off the function (tsunami.toast.clear()).

Components added later

Components start on their own when the page loads and when you add markup later. Where a component also has mount(el) and destroy(el), use them to start or stop one by hand, for example with options the markup cannot carry.

Components built on a library (Editor, Code editor, Chart, Date picker, Sortable) need that library's script on the page. Their API returns null until the library is ready; wait for the ready event, tsunami:editorready and its siblings.

document.addEventListener("tsunami:chartready", (e) => {
  const chart = tsunami.chart.get(e.target); // the Chart.js instance
});

Events

Events are named tsunami:<name>, bubble, and carry their data in event.detail. Listen on the component, an ancestor or document; event.target is the component that sent it. A few can be cancelled with preventDefault(); the component's page says which.

document.addEventListener("tsunami:otpcomplete", (e) => {
  verify(e.detail.value);
});

form.addEventListener("tsunami:tagschange", (e) => {
  console.log(e.detail.value); // ["design", "billing"]
});

Form controls keep sending the browser's own input and change too, so a form, the Save bar and your own listeners keep working.

Reading a component's API section

Each component page ends with the same few tables. Read them in this order:

• Attributes: what you set in the HTML, with the element it goes on. Start here; most pages need nothing more.
• Methods: what you call on tsunami.<module>. The first argument is the component's root element unless the table says otherwise.
• Events: the name, the element it is sent on and what event.detail holds.
• Keyboard: the keys the component handles, for testing and for accessibility.

All modules

The short version of every API. The component page has the arguments, return values and examples.

The Pressed script has no methods; it sends tsunami:pressedchange when a toggle button changes.