Admin Interactivity

The admin is server-rendered HTML with htmx. Behaviour htmx cannot express is an island, registered by name.

Request feedback

Every htmx request shows a progress bar, dims the submitting form, and raises a toast on failure. A 422 re-renders the form with its errors. See Validation.

Raise a toast from script:

window.lat.flash('Import finished.', 'success');   // or 'error', which stays until dismissed

Keyboard

Opt out in a descriptor:

form:
  enter: off               # Enter never submits this form; Cmd/Ctrl+Enter still does
  fields:
    sku: { enter: next }   # Enter moves to the next field
    notes: { type: textarea }

A widget of your own that puts an input inside a form marks its root data-lat-enter-scope, with data-lat-enter-target="<selector>" naming the button Enter presses there; without a target, Enter does nothing.

Lists

Every control is a link or a GET form, so it works with scripting off.

Add a toolbar button:

use laterite_admin::list::ToolbarButton;

ToolbarButton::new("Reports", "/reports")
    .icon("history")
    .require("acme.view_reports");

A path starting with / resolves under the admin mount. A button the operator lacks the permission for is not rendered.

Confirm a destructive action

<button type="submit" data-lat-confirm="Delete the selected records? This cannot be undone.">
  Delete
</button>

Ask from script

lat.confirm('Archive 12 articles?', { go: 'Archive', cancel: 'Keep', focus: 'cancel' }, function (yes) {
  if (yes) archive();
});

Forms

A form of your own template joins in with one attribute:

<form method="post" action="/admin/acme/import" data-lat-widget="form" data-lat-focus="first">

Events

Every island announces what it does as a DOM event named lat:<component>:<event>, bubbling from its root. Server-side facts are on the event bus.

var stop = lat.on('repeater:added', function (detail, event) {
  console.log(detail.count, 'rows; the new one is', detail.row);
});

// A `before-` event is cancelable: this caps a repeater at five rows.
lat.on('repeater:before-add', function (detail, event) {
  if (detail.count >= 5) event.preventDefault();
});

// Drive an island through its controller.
lat.get(document.querySelector('[data-lat-widget="repeater"]')).add();

Write an island

window.lat.widget('char-count', function (el) {
  var input = el.querySelector('input');
  function count() { return input.value.length; }
  input.addEventListener('input', function () {
    el.querySelector('.count').textContent = count();
    lat.emit(el, 'acme.char-count:changed', { count: count() });
  });
  // Returned, so `lat.get(el).count()` reads it from outside.
  return { count: count };
});

An island that builds markup around its element returns that markup as root, so lat.get finds the controller from inside it too.

<div data-lat-widget="char-count">
  <input type="text" name="title">
  <span class="count">0</span>
</div>

Every matching element is initialised once, on load and after each htmx swap. Bind by structure, not by id. window.lat.assets.ensure(url) loads a stylesheet or script once.

Not built yet

Inline editing in a row; reordering columns.