• View
• Edit
• History
• Attach
• Print
• Backlinks

Flipbox

Description

A simple way to update checklists and todo lists.

This recipe adds a new wiki markup -- [x] and [_] -- to create simple checkboxes that can be flipped on-off or todo-done in your browser without editing the whole wiki page.

The status of the checkboxes will be saved asynchronously to the wiki page via a very small, micro-AJA(X) code.

A demonstration of the recipe can be seen and tested at the Flipbox homepage.

Installation

1. Get flipbox.zipΔ (alt. download: flipbox.zip).
2. Place the file flipbox.php in your /pmwiki/cookbook/ directory.
3. Place the directory flipbox in your /pmwiki/pub/ directory.
4. Add to config.php this line:
   include_once($FarmD.'/cookbook/flipbox.php');
5. Add to your /pub/css/local.css file:
   /** flipbox */
.fb_ { color: #800000; }
.fbx { color: #808080; text-decoration: line-through; }
.fbq { color: #ff8000; }
   (you can adapt it for your needs).

This recipe is a postcardware. If you like it or use it, please send me a postcard.

Usage

In a wiki page, use the following markup:

• [_] for an unchecked checkbox (todo, on)
• [x] for a checked checkbox (done, off)

This markup will enable you to update the page by clicking on the checkbox image. The new checkbox status will be saved. Such a todo/checklist could be finished ("done") in a long time.

If you wish to only flip the checkboxes in your browser, without actually saving them in the page, use double "x" or underscore: [__] and [xx]. When you reload the page, you will find the previous status of the checklist. I use such checklists, for example, for things not to forget when going to the swimming pool.

To just display checkboxes without allowing readers to flip them, use triple "x" or underscore: [___] and [xxx].

You can test the recipe at the Flipbox homepage.

Configuration

The following code can be added to config.php before including the recipe:

• $HandleAuth['flipbox'] = 'read'; User permissions to modify the wiki page via a flipbox. Default is 'edit' which allows only users with edit privileges can update the checkboxes. Set it to 'read' to allow it for anyone that can see the page (such a user can only change the flipboxes in the wiki page).
• $FlipboxIcon = array("NAME", ".gif"); If you wish to use different pictures for the checkboxes. The pictures are named NAME_.gif and NAMEx.gif, in the /pub/flipbox directory.
• $FlipboxPubDirUrl = '$FarmPubDirUrl/flipbox'; in case you install the flipbox.js script and the pictures in another directory.

More states, icons and styles

From version 20090616, it is possible to define more flipbox states and styles, for example [q] for a question mark. To do this,

• create a new icon like the ones in the pub/flipbox directory, named checkq.png,
• add to your local css file some styling for the new .fbq class:
  .fbq { color: #ff8000; }
• add to config.php, before including the recipe, such a line:
  $FlipboxChoices = '_xq';
  this way you can have in your page [_], [x], or [q] as flipboxes.

You can have other letters or numbers like [w], [o], [1] etc., but note that you cannot have other symbols like '?', '!', '.' etc.

The demo page uses the [q] flipbox for an orange question mark.

Notes

• "Editable" flipboxes on included pages or sections will not flip.
• JavaScript needs to be enabled in a recent browser, for the checkboxes to be flippable.
• The flipbox colors and styles work best in bulleted or numbered lists.

Release Notes

• 20100211 added $FlipboxHTML to allow custom HTML markup instead of the default images.
• 20090616 added $FlipboxChoices and a sample question icon (suggested by Johannes Schneider)
• 20090128 fixed history bug, reported by mzuther.
• 20081026 fixed change summaries in page history while flipping checkboxes.
• 20081020c "editable" flipboxes from other pages are now disabled and cannot be flipped.
• 20081020 fixed escaped or conditional markup
• 20081019 first release, ready to be tested.

See Also

Contributors

The recipe is written and maintained by Petko.

Comments

Your comments are welcome.

* (+) Optional positive comment. Name, date
* (-) Optional negative comment. Name, date