aboutsummaryrefslogtreecommitdiff
path: root/doc/todo/progressbar_plugin.mdwn
blob: 9695f3ca1c94b342db60a4bb34ce31dfce501d59 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
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.

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

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

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

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

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