Useful utility - but encountered a few issues:
1) label (n of m) is improperly displayed. The CSS for .pblib_number
is missing a ; after text-align: right. This causes the formatting to
be ignored.
2) The label can be hard to read; consider 7 items, 1 /7 comes out
looking like 1 17. At least in IE8, windows 7. Add a space on either
side of the solidus.
3) Consider 7 items with the default width of 400. One would expect
the progress blocks to be 400/7 pixels wide - but they aren't. So at
the end of an operation, the progress bar is barely filled. Need to
compute the block width as bar width / number of blocks. (allowing for
border of each block.)
4) Progress bar doesn't end up filled; it's always one short.
pblib_at needs to increment before processing each update, not after.
Patch attached.
Also, the number of blocks ought to be enough to fill the bar, given
the length. I compute this as:
my $widthpx = 400;
my $minbarpx = 4;
print progress_bar( from => 0, to => $i,
width => $widthpx,
blocks => ($i > $widthpx/$minbarpx)?
int( ($i + (($widthpx +
($minbarpx-1)) / $minbarpx)) / ($widthpx/$minbarpx) ) : $i,
label => 1 );
But it seems that the library should default to this.
Finally, there is no way to reset the progress bar. e.g. consider a
form that does three long operations - say, add some files, delete some
other files, and update some servers. Since the operations are
independent, the CGI would like to run the progress bar for the first,
reset it, run it for the second, and so on. progress_bar_reset()
should unhide the bar, reset the variables (like pblib_at and the
widths) as progress_bar() does, but not re-emit the javascript.
Patch doesn't address these, as there are (ugly) workarounds in the
application.
| Subject: | pb.patch |
--- /usr/lib/perl5/site_perl/5.8.8/CGI/ProgressBar.pm~ 2010-06-05 20:16:47.000000000 -0400
+++ /usr/lib/perl5/site_perl/5.8.8/CGI/ProgressBar.pm 2010-06-05 21:10:29.000000000 -0400
@@ -215,10 +215,11 @@
$pb->{colors} = $pb->{colors}? {@{$pb->{colors}}} : {100=>'blue'};
$pb->{_length} = $pb->{to} - $pb->{from}; # Units in the bar
$pb->{_interval} = 1; # publicise?
# $pb->{_interval} = $pb->{_length}>0? ($pb->{_length}/$pb->{blocks}) : 0;
+ $pb->{block_wi} = int( $pb->{width} / $pb->{blocks} ) -2;
# IN A LATER VERSION....Store ourself in caller's progress_bar array
# push @{ $self->{progress_bar} },$pb;
$self->{progress_bar} = $pb;
@@ -320,11 +321,11 @@
}
$html .= "\n\t</div>\n";
$html .= "</td></tr>\n<tr><td align='center'>
<form name='$self->{progress_bar}->{layer_id}->{form}' action='noneEver'>
<input name='$self->{progress_bar}->{layer_id}->{number}' type='text' size='6' value='0' class='pblib_number'
- /><span class='pblib_number'>/$self->{progress_bar}->{to}</span>
+ /><span class='pblib_number'> / $self->{progress_bar}->{to}</span>
</form>
</td></tr></table>
</td></tr></table>" if $self->{progress_bar}->{label};
$html .= "</div>\n";
$html .="<!-- end progress bar $self->{progress_bar}->{layer_id}->{container} -->\n\n" if $^W;
@@ -337,19 +338,19 @@
for (var i = 1; i <= $self->{progress_bar}->{blocks}; i++)
document.getElementById('$self->{progress_bar}->{layer_id}->{block}'+i).className='pblib_block_off';
pblib_at = ".($self->{progress_bar}->{from}).";
}
function pblib_progress_update() {
+ pblib_at += $self->{progress_bar}->{_interval};
if (pblib_at > $self->{progress_bar}->{blocks}){
pblib_progress_clear();
} else {
for (var i = 1; i <= Math.ceil(pblib_at); i++){
document.getElementById('$self->{progress_bar}->{layer_id}->{block}'+i).className='pblib_block_on';
}\n";
$html .= "document.".$self->{progress_bar}->{layer_id}->{form}.".".$self->{progress_bar}->{layer_id}->{number}.".value++\n" if $self->{progress_bar}->{label};
- $html .= "pblib_at += $self->{progress_bar}->{_interval};
- }
+ $html .= "}
}\n//-->\n</script>\n";
return $html;
}
@@ -378,11 +379,11 @@
.pblib_block_off { border:1px solid white; background: white; }
.pblib_block_on { border:1px solid blue; background: navy; }
";
if ($self->{progress_bar}->{label}){
$CSS .=".pblib_number {
- text-align: right
+ text-align: right;
border: 1px solid transparent;
}";
}
$self->{progress_bar}->{css} = $CSS;
}