]> git.vanrenterghem.biz Git - git.ikiwiki.info.git/blobdiff - doc/todo/progressbar_plugin.mdwn
response
[git.ikiwiki.info.git] / doc / todo / progressbar_plugin.mdwn
index 3101010b2d065535ae0e8ac350ccb4b5aae86e51..4f3cf148bfda406fa7d81bce160ec1326004768f 100644 (file)
@@ -1,5 +1,5 @@
-I would like to add next plugin to Ikiwiki. It's `progressbar`
-(or simply `progress`, I'm not sure what plugin name better is). I know that
+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.
 
@@ -18,6 +18,44 @@ A here is its HTML result:
 Note: I was trying with `<span>` tags too, but that tag is inline, so I can't
 set `width` property for it.
 
+> In the poll plugin, I ended up using a `<hr>` 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 `<hr>` tag is deprecated, but that's not the big one.
+>> I can't see how to place text next to an `<hr>` 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 `<hr>` tag. -- [[Will]]
+
 Default CSS styles for the plugin can be like below:
 
     div.progress {
@@ -42,3 +80,148 @@ You can use alternative, commented CSS code for `div.progress` if you dislike
 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:
+
+    \[[!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]]
+
+>>>> Ahh - good idea.  Patch updated to work with HTMLScrubber. --[[Will]]
+
+>>>>> 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 <<EODIV
+    <div class="progress">
+      <div class="progress-done" style="width: $fill">$fill</div>
+    </div>
+    EODIV
+    
+    } # }}}
+    
+    sub format(@) { #{{{
+       my %params = @_;
+    
+       # If HTMLScrubber has removed the style attribute, then bring it back
+    
+       $params{content} =~ s!<div class="progress-done">($percentage_pattern)</div>!<div class="progress-done" style="width: $1">$1</div>!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:
+
+       \[[!progress totalpages="* and !*/Discussion" donepages="*/Discussion"]]