summaryrefslogtreecommitdiff
path: root/doc/todo/progressbar_plugin.mdwn
blob: d8c0a5cec702e0b1af7a84a0418c58aa6e3dbbc7 (plain)

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 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