saveStatusSync
Why JS.
import { saveStatusSync } from "@sdxc/ui/app";Usage
Applied to a save status ([data-slot="save-status"]): "Saving…" holds for holdMs
however fast the save, "Saved" shows for savedMs, then the edit time shows and keeps
its age current. It writes data-state and the texts of its save-status-* parts.
Signature
saveStatusSync(options: SaveStatusSync.Options): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
options | SaveStatusSync.Options | Yes |
Examples
<span data-slot="save-status" mix={[saveStatusSync({ state: "idle", labels, holdMs: 1000, savedMs: 3000, decayMs: 86_400_000 })]}>…</span>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/app too.
Event
SaveStatusEvent
Reports a save to a save status: dispatched on it by setSaveStatus.
new SaveStatusEvent(state: SaveStatusSync.State, at?: Date)| Property | Type | Required | Description |
|---|---|---|---|
state | readonly SaveStatusSync.State | Yes | |
at | readonly Date | undefined | Yes | When the content was saved; the moment the event arrives when omitted. |
Event
SaveStatusRetryEvent
Dispatched, bubbling, from a save status when its Retry is pressed, for an autosave to try again.
new SaveStatusRetryEvent()Function
setSaveStatus
Reports a save to a save status, which is how an autosave drives it.
setSaveStatus(target: Element | string, state: SaveStatusSync.State, at?: Date): void| Parameter | Type | Required | Description |
|---|---|---|---|
target | Element | string | Yes | The status element or its id. |
state | SaveStatusSync.State | Yes | Where the save stands. |
at | Date | No | When the content was saved. |
setSaveStatus("post-status", "saving");
let response = await fetch(url, { method: "POST", body });
setSaveStatus("post-status", response.ok ? "saved" : "failed");Interface
SaveStatusSync.Options
Configuration for saveStatusSync.
| Member | Type | Required | Description |
|---|---|---|---|
state | State | Yes | The state the server rendered. |
editedAt | string | No | When the content was last edited, as an ISO string. |
labels | { saving: string; saved: string; failed: string; edited: string } | Yes | |
locale | string | No | |
holdMs | number | Yes | |
savedMs | number | Yes | |
decayMs | number | Yes |
Type
SaveStatusSync.State
Where a save stands; "idle" shows the last edit time, or nothing without one.
type SaveStatusSync.State = "idle" | "saving" | "saved" | "failed"