Progress Bar Plugin

Compatible with DokuWiki

No compatibility info given!

Download

This plugin lets you put a progress bar on any wiki page.

Last updated on: 2009-03-09
Provides: Syntax

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to progrecss, skill

Tagged with chart, diagram, progressbar

By Mischa The Evil

Introduction

I'm Alessandro Celli and I release an unofficial package compliant with Kaos. You can find it here.

The original author of this plugin was Mike Smith. Looking at the comments up to today (2009-03-10) it seems that he has stopped maintaining this plugin. I have taken-over maintaining this plugin to prevent it from being lost…

Syntax

Simply put <progress=[size]> in any page, where [size] is a number from 0 to 100 without the % sign. Only multiples of 10 are supported, so you can only use 0%, 10%, 20%, etc.

Examples

<progress=0>

will make an empty progress bar.

<progress=70>

will make a 70% full one.

Installation

Download and extract the following archive to ../lib/plugins/:

.zip-archive

Source

Here's the source code, but you'll still need the images from the above archive.

syntax.php

syntax.php

<?php
/* DokuWiki Progressbar plugin
 * Internal version 1.0.0
 * 
 * Copyright (C) 2009 Mischa The Evil
 * Copyright (C) 2006 Mike Smith
 * 
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
 
if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
require_once(DOKU_PLUGIN.'syntax.php');
 
class syntax_plugin_progressbar extends DokuWiki_Syntax_Plugin
{
 
	/**
	 * return some info
	 */
	function getInfo()
	{
		return array
		(
			'author' => 'Mischa The Evil',
			'email'  => '[email protected]',
			'date'   => '2009-03-09',
			'name'   => 'Progressbar',
			'desc'   => 'Makes progress bars on wiki pages.',
			'url'    => 'http://www.dokuwiki.org/plugin:progressbar',
		);
	}
 
	/**
	 * What kind of syntax are we?
	 */
	function getType()
	{
		return 'substition';
	}
 
	/**
	 * Where to sort in?
	 */ 
	function getSort()
	{
		return 999;
	}
 
	/**
	 * Connect pattern to lexer
	 */
	function connectTo($mode)
	{
		$this->Lexer->addSpecialPattern('<progress=(?:10|[1-9]?)0>', $mode, 'plugin_progressbar');
	}
 
	/**
	 * Handle the match
	 */
	function handle($match, $state, $pos, &$handler)
	{
		substr($match, 10, -1);
		return array(substr($match, 10, -1));
	}
 
	/**
	 * Create output
	 */
	function render($mode, &$renderer, $data)
	{
		$renderer->doc .= '<img width="100" height="16" src="'. DOKU_URL .'lib/plugins/progressbar/images/' . $data[0] . '.gif" alt="' . $data[0] . '% completed" title="' . $data[0] . '% completed" />';
		return true;
	}
}

Customization

You can change the default images in ../lib/plugins/progressbar/images. Mike Smith tried to make them fit-in well with the default DokuWiki style (they are using a green/blue color-scheme), but they probably look horrible with any other style

Gray

I personally use images which are using a gray color-scheme and wanted to share them also. Therefore I'll make the set public as a separate imagepack.

To install simply backup the directory ../lib/plugins/progressbar/images and then extract the following archive into it overwriting the available default images:

Gray Imagepack

History

2009-03-09 (1.0.0)

Added - Link-elements to the progress-images for tooltips in all browsers
Changed - Rebrand the plugin after take-over
Fixed - Image-error when used inside a namespace since this wasn't fixed correctly in 2007-11-13
Fixed - Incorrect date

2007-11-13 (0.0.0)

Fixed - 0%-state bug
Fixed - Added width- and height-elements to the img tag
Fixed - Image-error when used inside a namespace

2006-12-03

Initial version by Mike Smith

Modifications

In the time this plugin exists several other users have modified the plugin to fit their own specific requirements. These changes are sometimes shared across the community. Below follows a listing of several of these shared modifications.

The main difference between the different modifications are the used display elements, <span> is inline, <div> and <table> are block-level elements (display: block;)
The other main difference is that the modifications are all using CSS-only to render the progress-bar instead of using fixed images for this purpose as the “official” source does.

Image Free Version

If you don't want the images to be extremely different you could simply use the variable $data[0] to indicate an image width and use the same image for every percentage. However, 0% wouldn't be very useful, nor would it indicate the progress percent/value without viewing the alt text. Why deal with images?

The following code will replace the $renderer→doc …. line in syntax.php. It produces just about the same results as the images.

    $renderer->doc .= '<table cellpadding="0" cellspacing="0" style="border: 2px solid #436976; width: 100px;"><tr style="height:12px;">'.($data[0]<=0 ? '' : '<td style="background-color:#74a6c9; width: '.$data[0].'%">&nbsp;</td>') . ($data[0]>=100 ? '' : '<td style="background-color: #dee7ec;">&nbsp;</td>') .'</tr></table>';

Want to throw some text in there? Use this ugly solution¹⁾:

  $renderer->doc .= '<table cellspacing="0" style="width: 120px;border: 1px solid #000;">
  <tr><td   style="padding-top: 2px; padding-left: 5px; padding-right: 5px;" colspan="2">
  '.$data[0].'% completed</td></tr>
  <tr><td style="width:'.($data[0]==0 ? '1' : $data[0]).'%; background-color:#f33;">&nbsp;</td>
  <td>&nbsp;</td></tr></table>';

Furthermore, if you opt to not use the images anymore then you shouldn't really limit yourself to only 11 different percentages. The following function replaces function connectTo($mode) inside of syntax.php. The regular expression means accept one or two characters from 0-9 or 100

/**
* Connect pattern to lexer
*/
function connectTo($mode)
{
  $this->Lexer->addSpecialPattern('<progress=(?:[0-9]{1,2}|100?)>', $mode, 'plugin_progressbar');
}

Code supplied by Anonymous.

Inline Version

This version creates a progress bar without the images. It will also be inserted inline into your text if you want one that does not wrap to a new line. It's also thinner.

Features:

No extra images needed. (uses one transparent image that already exists in the Wiki image directory).
100 pixels wide.
Renders inline with your text.
Thinner.
Supports any integer percent from 0-100.
Shows the percent value on mouse-over.

How To Use:

Update the connectTo function inside syntax.php as per below to make it support any number from 0-100.

/**
* Connect pattern to lexer
*/
function connectTo($mode)
{
  $this->Lexer->addSpecialPattern('<progress=(?:[0-9]{1,2}|100?)>', $mode, 'plugin_progressbar');
}

Replace the render function in your syntax.php file for this plugin, with this:

function render($mode, &$renderer, $data)
	{
		if($data[0]<0){$data[0]=0;}
		if($data[0]>100){$data[0]=100;}
		$sizeLeft = 100-$data[0];
 
		$renderer->doc .= '<span style="padding:0;height:8px;width: 100px;">'.($data[0]<=0 ? '' : '<span style="margin:0;padding:0;background-color:#74a6c9; height:8px; width:'.$data[0].'"><img src="'.dirname($_SERVER['PHP_SELF']).'lib/images/blank.gif" height="8" width="'.$data[0].'" border="0" title="'.$data[0].'%" alt="'.$data[0].'%" hspace="0" vspace="0" style="" /></span>') . ($data[0]>=100 ? '' : '<span style="margin:0;padding:0;background-color: #dee7ec;height:8px;width:'.$sizeLeft.'"><img src="'.dirname($_SERVER['PHP_SELF']).'lib/images/blank.gif" height="8" width="'.$sizeLeft.'" border="0" title="'.$data[0].'%" alt="'.$data[0].'%" hspace="0" vspace="0" style="" /></span>') .'</span>';
 
		return true;
	}

Code supplied by Sherri W. (start.ofitall.com).

Image Free Div Float Version

  // Replace connectTo for use 0-100% instead of 10%/20% .. // like inline Version & Image Free Version
  function connectTo($mode)
  {
    $this->Lexer->addSpecialPattern('<progress=(?:[0-9]{1,2}|100?)>', $mode, 'plugin_progressbar');
   }
 
  //  Code supplied by M. Wolff
  //  float first div Tag change the float behaviour "left" or "right"; without float div std display:block => newline
  //  width independed just change width:155px on all tags
  //  background-color of incomplete first div tag
  //  background-color of complete second div tag
  //  font-size third div tag depend on margin-top and height:15px(all tags) have to also change
  //  text-align third div tag
  //  color of the text third div tag 
  //  Edited by J. Monin for basic ODT export support, and localization (write only % symbol)
 
 
  //  Replace render
  function render($mode, &$renderer, $data)
  {
       if($mode == 'xhtml'){
        $renderer->doc.='
          <div style="float:right;position: relative; width: 100px; height: 15px; background: #bdbdbd top left no-repeat;" > 
            <div style="background-color:#DEE7EC; width:'. $data[0].'% ;height: 15px;"> 
              <div style="position: absolute; left:0;width:100%; height:15px;margin-top:-3px;padding-top: 0px; text-align: center; font-size:10px; color:black;">
                 '.$data[0].'%
              </div>  
            </div>  
        </div>';
    } elseif ($mode == 'odt'){ 
        $renderer->doc .= '<text:span>'.$data[0].'%</text:span>';
    }
 
   return true;
  }

Code supplied by M. Wolff, enhanced by J. Monin

Discussion

Completed

The 0 state (0%, empty progress bar) doesn't work in the plugin (even on your demo site). I changed the regexp in syntax.php (connectTo() function) from this “<progress=(?:10|[1-9])0>” to this “<progress=(?:10|[1-9]?)0>” (added the ? after [1-9] to make it optional) and now it works. — GJH 2007-01-15
Hi, just stumbled over your cute little plugin - STRONGLY Suggest to add the width and height tag to the img tag to allow the browser to display the wiki pages without the need to wait for loading the progress bar image — eth at gmx punkt at 2007-02-14
This plugin does not work in namespaces if you have DokuWiki configured to use / – syntax.php line 84 needs modified to provide an absolute web path to the images, because relative path wont work if your in /somenamespace/somepage. dirname($_SERVER['PHP_SELF']) seems to work for me. — Anonymous 2007-??-??

All three above-mentioned bugs have been corrected in this version (actually this is version 2007-11-13). Please include it in the mainstream and notify me. Thanks. — Lukas 2007-11-13

An updated zip-archive is available now (version 2009-03-09 [1.0.0]). — Mischa The Evil 2009/03/10 01:20

The .tar.gz link won't install in the plugin manager. — dinolinux [at] gmail [dot] com 2007-05-18
I've made a tar.bz2 version and stuck it on the server where the demo was running. Updated the link above. However I'm not developing this anymore, therefore the other enhancements here weren't added to it. — Mike Smith 2007-??-??

An updated zip-archive is available now (version 2009-03-09 [1.0.0]). Don't know if that works with the plugin manager though… — Mischa The Evil 2009/03/10 01:20

Open

¹⁾

zero width percentage is an issue. set to 1 in that instance

Table of Contents