Task Lists

A small checklist/to-do widget: define a list of tasks, render it into a container, and let visitors check items off with progress tracked and persisted per-browser.

💡 Site-only module. onigiri-tasks.js ships with this documentation site (in static/js/), not the core framework repository.

Not the same as the roadmap checklist on this site. The development roadmap shown further down this page is server-rendered PHP with fixed, developer-set completion state (visitors can't check it off). Onigiri.tasks is the general-purpose, visitor-interactive version of that idea, for embedding your own checklists.

Quick Start

1. Include the Module

<script src="/static/js/onigiri-storage.js"></script>
<script src="/static/js/onigiri-tasks.js"></script>

onigiri-storage.js is optional but recommended - without it, completion state resets on every page load.

2. Add a Container

<div data-task-list="onboarding"></div>

3. Create and Mount the List

Onigiri.tasks.init();

Onigiri.tasks.createList('onboarding', {
    title: 'Getting Started',
    description: 'A few steps to set up your module.',
    tasks: [
        { id: 'install', name: 'Install the framework' },
        { id: 'configure', name: 'Configure security', description: 'Set up CSRF and CSP' },
        { id: 'deploy', name: 'Deploy to production' }
    ]
});

Onigiri.tasks.mount('onboarding');

✅ That's it! Checking a box toggles that task and updates the progress bar.

API Reference

Configuration Options

Option	Type	Default	Description
`storageKey`	String	'onigiri_task_status'	Storage key used to persist completion state
`showProgress`	Boolean	true	Show the progress bar and completed/total count
`sortCompleted`	Boolean	false	Move completed tasks to the bottom of the list

Methods

Onigiri.tasks.init(options)

Merges config, loads any previously stored completion state, and binds a delegated change handler for task checkboxes.

Onigiri.tasks.createList(id, options)

Registers a task list. options.tasks is an array of { id, name, description? } objects.

Onigiri.tasks.mount(id)

Renders the list into the matching [data-task-list="id"] container.

Onigiri.tasks.toggle(listId, taskId)

Flips a task's completion state, persists it, and re-renders. Normally triggered by clicking a rendered checkbox rather than called directly.

Onigiri.tasks.isCompleted(listId, taskId)

Returns whether a specific task is marked complete.

Onigiri.tasks.getProgress(listId)

Returns { total, completed, percentage } for a list.

Onigiri.tasks.clearCompleted(listId?)

Resets completion state for one list, or every list if listId is omitted.

Events

Event	Fired when
`onigiri:task:toggled`	A task is checked/unchecked (`detail: { listId, taskId, completed }`)

Security Notes

List titles/descriptions and task names/descriptions are HTML-escaped before rendering (via Onigiri.security.sanitizeHTML when loaded). If you build task lists from a CMS field or JSON file, this keeps an edited string from injecting markup.
Completion state is stored client-side and is per-browser, like Polls - it is not shared between visitors or tamper-proof.