X-Git-Url: http://git.vanrenterghem.biz/git.ikiwiki.info.git/blobdiff_plain/6432d15cb42b7b5b885b766d67f35ff2356f883c..3fe434189b99daf3d8cc075186c4ed4ebdd43b8f:/doc/todo/progressbar_plugin.mdwn diff --git a/doc/todo/progressbar_plugin.mdwn b/doc/todo/progressbar_plugin.mdwn index 1df131ca3..12aef5ebb 100644 --- a/doc/todo/progressbar_plugin.mdwn +++ b/doc/todo/progressbar_plugin.mdwn @@ -18,7 +18,43 @@ A here is its HTML result: Note: I was trying with `` tags too, but that tag is inline, so I can't set `width` property for it. -> In the poll plugin, I ended up using +> In the poll plugin, I ended up using a `
` for the progress-like +> thing. One reason I did so is because it actually works in text-mode +> browsers (w3m, lynx), that do not support css or colorized +> divs. Since the hr is an element they display, just setting its width can +> make a basic progress-type display. The style then makes it display +> better in more capable browsers. +> +> The other advantage to that approach is that the htmlscrubber lets +> through the `class` and `width` fields, that are all that are needed for +> it to work. No need to work around htmlscrubber. +> +> So I suggest adapting this to use similar html. --[[Joey]] + +>> I just had a brief play with this. It seems there are some trade-offs involved. +>> The `width` attribute of an `
` tag is deprecated, but that's not the big one. +>> I can't see how to place text next to an `
` tag. I note that in the +>> [[plugins/poll]] plugin there is text above and below the 'graph line', but none +>> on the same line as the graph. I prefer the way the current code renders, +>> with the percentage complete appearing as text inside the graph. +>> +>> So, if we use `hr` we get: +>> +>> - Graph line on text / non-css browsers +>> - No percentage complete text on the same line as the graph line +>> - Deprecated HTML +>> +>> If we use `div` we get: +>> +>> - Need to clean up after HTMLScrubber (which is not hard - already implemented) +>> - Get the percentage written as text on text / non-css browsers +>> - Get the percentage on the same line as the graph in css browsers +>> +>> I'm strongly in favour of having the percentage text label on the graph, and on +>> text based browsers I think having the text label is enough -- the lack of the line +>> in that case doesn't bother me. +>> So, given the choice between the two suggested techniques, I'd take the second and +>> stay with div... unless you know how to get text next to (or within) an `
` tag. -- [[Will]] Default CSS styles for the plugin can be like below: @@ -45,6 +81,28 @@ padding around done strip. Any comments? --[[Paweł|ptecza]] +> Please make sure to always set a foreground color if a background color is +> set, and use '!important' so the foreground color can be overridden. (CSS +> best practices) --[[Joey]] + +>> Below is the CSS I've been using -- [[Will]] + + div.progress { + margin-top: 1ex; + margin-bottom: 1ex; + border: 1px solid #888; + width: 400px; + background: #eee; + color: black !important; + padding: 1px; + } + div.progress-done { + background: #ea6 !important; + color: black !important; + text-align: center; + padding: 1px; + } + > 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: @@ -69,101 +127,6 @@ Any comments? --[[Paweł|ptecza]] >>>>> I like it, but I think that Joey should take a look at that patch too :) >>>>> --[[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); - hook(type => "format", id => "progress", call => \&format); - } # }}} - - 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 < -
$fill
- - EODIV - - } # }}} - - sub format(@) { #{{{ - my %params = @_; - - # If HTMLScrubber has removed the style attribute, then bring it back - - $params{content} =~ s!
($percentage_pattern)
!
$1
!g; - - return $params{content}; - } #}}} - - 1 - -Here is a potential documentation page: - ------ - -[[!template id=plugin name=progress author="[[Will]]"]] -[[!tag type/meta]] - -Provides a \\[[!progress ]] [[ikiwiki/PreProcessorDirective]] that is -replaced with a progress bar. - -There are two possible parameter sets. The first is a single parameter -`percent` which holds a percentage figure for how complete the progress bar is. - -The second possible set of parameters is a pair of [[ikiwiki/PageSpec]]s, -`totalpages` and `donepages`. The progress plugin counts the number of -pages in each pagespec and shows the percentage of the total pages that are -done. - -This plugin is included in ikiwiki, but is not enabled by default. - -If it is turned on it can show what percentage of pages have discussion pages: +>>>>>> Reviewed, looks excellent, added. [[done]] --[[Joey]] -[[!progress totalpages="* and !*/Discussion" donepages="*/Discussion"]] +>>>>>>> Thanks a lot for you and Will! :) [[Paweł|ptecza]]