ikiwiki/doc/todo/progressbar_plugin.mdwn

I would like to add next plugin to Ikiwiki. It's `progressbar` or simply `progress`.
I'm not sure what plugin name better is, probably that shorter ;) I know that
[DokuWiki](http://wiki.splitbrain.org/plugin:progressbar) has similar plugin,
so I think it can be useful also for Ikiwiki users.

Here is proposition of the plugin syntax:

    \[[!progress done=50]]

Of course, `done` argument is integer from 0 to 100. 

A here is its HTML result:

    <div class="progress">
      <div class="progress-done" style="width: 50%">50%</div>
    </div>

Note: I was trying with `<span>` tags too, but that tag is inline, so I can't
set `width` property for it.

Default CSS styles for the plugin can be like below:

    div.progress {
            border: 1px solid #ddd;
            /* border: 2px solid #ddd; */
            width: 200px;
            background: #fff;
            padding: 2px;
            /* padding: 0px; */
            border: 2px solid #aaa;
            background: #eee;
    }
    div.progress-done {
            height: 14px;
            background: #ff6600;
            font-size: 12px;
            text-align: center;
            vertical-align: middle;
    }

You can use alternative, commented CSS code for `div.progress` if you dislike
padding around done strip.

Any comments? --[[Paweł|ptecza]]

> This looks like a nice idea.  If I could add one further suggestion: Allow your
> ratio to be a pair of pagespecs.  Then you could have something like:

    \[[!progress totalpages="bugs/* and backlink(milestoneB)" donepages="bugs/* and backlink(milestoneB) and !link(bugs/done)"]]

> to have a progress bar marking how many bugs were compete for a
> particular milestone.  -- [[Will]]

>> Thanks a lot for your comment, Will! It seems very interesting for me.
>> I need to think more about improving that plugin. --[[Paweł|ptecza]]

>> Attached is a [[patch]] (well, source) for this.  You also need to add the proposed CSS above to `style.css`.
>> At the moment this plugin interacts poorly with the [[plugins/htmlscrubber]] plugin.
>> HTMLScrubber plugin removes the `style` attribute from the `progress-done` `div` tag, and so it defaults
>> to a width of 100%. -- [[Will]]

>>> Thank you for the code! I know how to fix that problem, because I had
>>> the same issue while writing [[todo/color_plugin]] :) --[[Paweł|ptecza]]

    #!/usr/bin/perl
    package IkiWiki::Plugin::progress;
    
    use warnings;
    use strict;
    use IkiWiki 2.00;
    
    my $percentage_pattern = qr/[0-9]+\%/; # pattern to validate percentages
    
    sub import { #{{{
    	hook(type => "getsetup", id => "progress", call => \&getsetup);
    	hook(type => "preprocess", id => "progress", call => \&preprocess);
    } # }}}
    
    sub getsetup () { #{{{
    	return 
    		plugin => {
    			safe => 1,
    			rebuild => undef,
    		},
    } #}}}
    
    sub preprocess (@) { #{{{
    	my %params=@_;
    	
    	my $fill;
    	
    	if (defined $params{percent}) {
    		$fill = $params{percent};
    		($fill) = $fill =~ m/($percentage_pattern)/; # fill is untainted now
    	}
    	elsif (defined $params{totalpages} and defined $params{donepages}) {
    		add_depends($params{page}, $params{totalpages});
    		add_depends($params{page}, $params{donepages});
    
    		my @pages=keys %pagesources;
    		my $totalcount=0;
    		my $donecount=0;
    		foreach my $page (@pages) {
    			$totalcount++ if pagespec_match($page, $params{totalpages}, location => $params{page});
    			$donecount++ if pagespec_match($page, $params{donepages}, location => $params{page});
    		}
    		
    		if ($totalcount == 0) {
    			$fill = "100%";
    		} else {
    			my $number = $donecount/$totalcount*100;
    			$fill = sprintf("%u%%", $number);
    		}
    	}
    	else {
    		error("Missing parameters to progress plugin.  Need either `percent` or `totalpages` and `donepages` parameters.");
    	}
    
    	return <<EODIV
    <div class="progress">
      <div class="progress-done" style="width: $fill">$fill</div>
    </div>
    EODIV
    
    } # }}}
    
    1