Extension:TODOListProgressBar

What can this extension do?
This extension is aimed at making the process of tracking the progress of a TODO list (or other list) easier. When creating your TODO list, you include the tag along with each item. As you complete an item, you update its status accordingly and the rest of the extension takes care of displaying the nice progress bar for a visual indicator as to the progress of completing the TODO list. In addition, it places a status string where the tag is located so that your TODO list will tell you which items are complete and which arent.

Usage
The tag has two modes of operation:
 * Item Mode   - 
 * Graphic Mode - Caption

All tags require the "type" attribute. It only has two values: This tells the code what to do with the tag. As such, it has no default value.
 * "item"
 * "graphic"

As well, all item tags require the "name" attribute, which must be unique for the group the item appears in. See below for more information.

For Item Mode, the parameters are as follows:
 * name
 * The name of the item. This parameter is a string value and must be unique for the group the item is in. This parameter is required.


 * status
 * Determines the staus of the item. The default value is "incomplete". This parameter is optional. Valid values are:
 * The item is complete.
 * "complete"
 * "completed"
 * "done"
 * "finished"
 * The item is being worked on but is not completed (counts as incomplete).
 * "ip"
 * "in progress"
 * "working"
 * The item is incomplete or has not been started on.
 * "incomplete"
 * "pending"
 * "held"


 * group
 * The group an item belongs to. This parameter is a string value. The default value for this parameter is "global". This parameter is optional.


 * value
 * The "point value" of this item. The default value for any item is 1. This parameter is an integer value. This changes the point value of the item, and changes the final point value of the entire group. This parameter is optional.


 * $text
 * The text for the item. This will be the text that is between the  tags. This parameter is optional.

When an item is complete, its point value is added to the total of completed items and rendered in the graphic.

For Graphics Mode, the parameters are as follows:
 * group
 * The group of items that are going to be rendered. This parameter is a string value. The default value for this parameter is "global". This parameter is optional.


 * color
 * The color that will be used to fill the progress bar. The default value is black. This parameter is any valid hex RGB value or HTML color. This parameter is optional.


 * height
 * The height (in pixles, aka "px") of the progress bar. The default value is 10px. This parameter is an integer value. This parameter is optional.


 * width
 * The width (in pixels, aka "px") of the progress bar. The default value is 400px. This parameter is an integer value. This parameter is optional.


 * $text
 * The text for the progress bar caption. This will be the text that is between the  tags. This parameter is optional.

Once a progress bar has been rendered, the data for the rendered group will be erased, thus allowing it to be re-used again further down in the code.

It is important to note, you do not have to group similar items together. The group parameter will allow you to mix items from different lists together and still keep them separate once the progress bar is rendered.

It is equally important to note that you cannot (at this point) place the progress bar tag before the item tags. This is due to the fact that HTML is parsed top down, as well as the fact that I have not added any AJAX that would bypass this restriction. Maybe for the next version...

Simple example
This example shows a list with 3 items that all belong to the default "global" group that uses all the default settings.  Item 1  Item 2  Item 3

Using different status values
This example shows the same list above but with one item set to complete and one item set to in progress.  Item 1  Item 2  Item 3 NOTE: Items are either complete or they aren't. See the above parameter list for "status" to find out which statuses will cause an item to be complete.

Using the group parameter
This example shows the same list above but using a different group.  Item 1  Item 2  Item 3 

Changing the progress bar look
This example shows the progress bar with different values for its parameters.  Item 1  Item 2 <todo type="item" name="item3" /> Item 3 <todo type="graphic" height="30" width="500" color="green" />

More Complex Example
This example shows a set of lists that are inter mixed. This is possible thanks to the group parameter. <todo type="item" name="mary1" group="mary" /> Mary 1 <todo type="item" name="tod1" group="tod" /> Tod 1 <todo type="item" name="tod2" group="tod" /> Tod 2 <todo type="item" name="mary2" group="mary" /> Mary 2 <todo type="item" name="tod3" group="tod" /> Tod 3 <todo type="item" name="mary3" group="mary" /> Mary 3 <todo type="graphic" group="mary" color="pink" /> <todo type="graphic" group="tod" color="blue" />

Reusing a group
Once you have output the progress bar for a given group, you can begin to reuse that group. This makes it simple to create multiple lists on the same page and have them each display their progress without having to give each of them a group. <todo type="item" name="item1" /> List 1, Item 1 <todo type="item" name="item2" /> List 1, Item 2 <todo type="item" name="item3" /> List 1, Item 3

...

<todo type="item" name="item1" /> List 2, Item 1 <todo type="item" name="item2" /> List 2, Item 2 <todo type="item" name="item3" /> List 2, Item 3 NOTE: You do not have to change the item names in this case. Once the progress bar is created, the group data is erased.

Invalid Tags
This is a test This tag has an invalid type. This tag has no name. <todo type="item" name="item" status="test" /> This tag has an invalid status.

These tags are invalid because you must have at least one item that has a value of at least one. Otherwise you get a division by zero error. <todo type="item" group="test3" name="test4" status="in progress" value="0" /> <todo type="item" group="test3" name="test5" status="incomplete" value="0" /> <todo type="graphic" group="test3" height="50" />

Download instructions
Please cut and paste the code found below and place it in. Note: $IP stands for the root directory of your MediaWiki installation, the same directory that holds LocalSettings.php.

Installation
To install this extension, add the following to LocalSettings.php:

Credits
A portion of this code is based directly on Progressbar, I have merely modified it to work with my needs. I take no credit for the portion that is based on Progressbar.

Change Log

 * 20100612.0
 * Inital release
 * 20100613.0
 * Changed all the div elements to use the inline display style rather than the block style.
 * 20100613.1
 * Realized I added an inline where I shouldn't have.
 * Fixed some nasty XSS bugs I had introduced. (Thanks to Max Semenik for noticing this.)
 * Changed the <todo type="item" ... /> tag to allow text to appear between the tags and be displayed along with the status indicator.

Code: