Checklists

Summary: Ephemeral to-do lists
Version: 20220611
Prerequisites: Recent browser with JavaScript
Status: Beta
Maintainer: Petko
License: GPLv3
Categories: GTD, PIM, Markup, ToDo, PHP81, PmSyntax
Users: (view? / edit)
Discussion: Checklists-Talk?

Description

Ephemeral to-do lists.

This recipe is an attempt to improve on the Flipbox functionality, styles and user experience, for ephemeral lists only (task states not saved in the page).

Usage

Make a bulleted list where the first item is [Checklist]. All other items in the list will become tasks ("todo", "done").

Reading the page, you can click to toggle individual tasks, or "Toggle all" to toggle and align all tasks.

Tasks that are "done" are highlighted and moved to the bottom of the list under a "Done" separator.

'''Daily tasks, morning'''
* [Checklist]
* review raw server logs
* review autosync report
* check no-reply mailboxes
* review backup diff report
* check all recent changes

Daily tasks, morning

  • [Checklist]
  • review raw server logs
  • review autosync report
  • check no-reply mailboxes
  • review backup diff report
  • check all recent changes

Use [Checklist3] to make a 3-state list where tasks can be "todo", "in-progress", and "done".

This can be useful for tasks that take longer time to complete, or that you launch or delegate, then come back later to review the results.

'''Daily tasks, afternoon'''
* [Checklist3]
* get, review and update library feeds
* document development changes
* review web security reports (email)

Daily tasks, afternoon

  • [Checklist3]
  • get, review and update library feeds
  • document development changes
  • review web security reports (email)

For international wikis, the keyword "Checklist" and the labels "Toggle all" and "Done" can be translated, see below.

More elaborate checklists

It is possible to use core PmWiki markup (markup expressions, conditionals, includes) to compose checklists depending on the day.

'''Tasks for %red%{(ftime "%A")}%%, {(ftime "%d %B")}''' ([[{*$FullName}|refresh]])
* [Checklist3]
* Brush teeth (every day)
(:if equal "{(ftime "%a")}" "Sat":)
* Do laundry
* Other tasks for a Saturday
(:elseif equal "{(ftime "%a")}" "Sun":)
* Sleep until noon
* Other tasks for a Sunday
(:else:)
* Go to work
* Other tasks for a weekday
(:ifend:)

Tasks for Saturday, 23 November (refresh)

  • [Checklist3]
  • Brush teeth (every day)
  • Do laundry
  • Other tasks for a Saturday

Installation

  1. Get checklists.zipΔ and place the directory "checklists" in the pmwiki/pub directory on your server.
  2. Add to config.php this snippet:
    $HTMLHeaderFmt['checklists'] = '
      <link rel="stylesheet" href="$FarmPubDirUrl/checklists/checklists.css">
      <script data-i18n="$[Checklist];$[Toggle all;Done]"
      src="$FarmPubDirUrl/checklists/checklists.js"></script>
    ';
    $CustomSyntax['Checklists'] = '<ws0  =directive>attr>punct  /(\[)($[Checklist]3?)(\])/gi  /$[Checklist]/i  /3$/i';
    

Configuration

To configure the colors, redefine some of the variables in your pub/css/local.css:

.pmchecklist {
  /* border of the checkbopxes */
  --check-border: 2px solid black;

  --theme-color:  #05b;   /* labels, separator line */
  --theme-bgcolor: white;  /* under "Done" */
  --highlight-color: #ff0; /* when moving items */


  /* finished tasks: text color and inner color of the checkbox */
  --done-color: #888; 
  --check-fill: #bbb;

  /* started tasks: text color and inner color of the checkbox */
  --started-color: orangered;
  --check-started: orangered;

/*  line after "Done-----" may need adjustment 
 *  depending on the font used  */
  --linepos: 55%;
}

You can only add variables that need to be changed, not all of them. For example, to make the highlighted item background light-green rather than the default yellow, you can use:

.pmchecklist {
  --highlight-color: #cfc;
}

Internationalization

The following strings can be translated in an XLPage, for example in French:

 'Checklist' => 'ListeTâches',
 'Toggle all;Done' => 'Basculer tout;Fait',

"Checklist" is the keyword that creates a checklist; "Toggle all" and "Done" are the labels that appear at the top of the list and on the separator line.

International characters are only supported on wikis with UTF-8 enabled.

Notes

The checklist cannot have nested numbered or bulleted sub-lists, although it itself may be nested in another numbered or bulleted list.

A browser with JavaScript disabled, or a very old browser, will only show the bulleted list, including the [Checklist] item.

Change log / Release notes

  • 20220611 Change in Internationalization section and install code for PmSyntax to recognize the translated [Checkist] directive.
  • 20220608 Function ported to become available in normal PmWiki pages after being initially written for a different project.

See also

Cookbook /
Flipbox  Flippable checkboxes and checklists (Beta)
FoxSimpleTodoList  An example of how to use Fox to setup a simple 'todo list'. (Functional)
GTD-TLM  An experimental JavaScript GTD task/todo list manager (experimental)
ToDo  A nice looking ToDo list ([unknown])
VerySimpleToDo  A very simple ToDo list

Contributors

  • Recipe written and maintained by Petko, idea for the diagonally half-checked box from Will Barker.

Comments

See discussion at Checklists-Talk?

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.