DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:progressbar

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
plugin:progressbar [2009-08-11 14:32] 134.130.4.46plugin:progressbar [2024-01-09 02:47] (current) – downloadurl Aleksandr
Line 1: Line 1:
-====== Progress bar plugin ======+====== Progress Bar Plugin ======
  
 ---- plugin ---- ---- plugin ----
Line 10: Line 10:
 depends    : depends    :
 conflicts  : conflicts  :
-similar    : +similar    : progrecss 
-tags       : progressbarpercent+tags       : diagramchartprogressbar 
 + 
 +downloadurl : https://trello.com/1/cards/659c9dfecba2e595a5c4e9c0/attachments/659c9ef29b6dabf7c2c98910/download/progressbar-1.0.0_20090309.zip 
 +bugtracker  :  
 +sourcerepo  :  
 +donationurl :  
 +  
 +screenshot_img : 
 ---- ----
  
 ===== Introduction ===== ===== Introduction =====
-The original author of this plugin was [[mmiikkee13@gmail.com|Mike Smith]]. Looking at the comments upto today (2009-03-10) it seems that he has stopped maintaining this plugin.+ 
 +The original author of this plugin was [[mmiikkee13@gmail.com|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... I have taken-over maintaining this plugin to prevent it from being lost...
  
 ===== Syntax ===== ===== 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.+ 
 +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 ==== ==== Examples ====
 +
 <code><progress=0></code> <code><progress=0></code>
 will make an empty progress bar. will make an empty progress bar.
Line 27: Line 37:
 <code><progress=70></code> <code><progress=70></code>
 will make a 70% full one. will make a 70% full one.
- 
-==== Demo ==== 
-<progress=70> 
  
 ===== Installation ===== ===== Installation =====
 +
 Download and extract the following archive to ../lib/plugins/: Download and extract the following archive to ../lib/plugins/:
   * [[http://www.mediafire.com/file/o1nmllyrywi/progressbar-1.0.0_20090309.zip|.zip-archive]]   * [[http://www.mediafire.com/file/o1nmllyrywi/progressbar-1.0.0_20090309.zip|.zip-archive]]
  
 ===== Source ===== ===== Source =====
 +
 Here's the source code, but you'll still need the images from the above archive.\\ Here's the source code, but you'll still need the images from the above archive.\\
  
 ==== syntax.php ==== ==== syntax.php ====
-<code php>+ 
 +<code php syntax.php>
 <?php <?php
 /* DokuWiki Progressbar plugin /* DokuWiki Progressbar plugin
Line 130: Line 140:
  
 ===== Customization ===== ===== 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 :-) 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 ==== ==== 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 seperate imagepack.+ 
 +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: To install simply backup the directory ../lib/plugins/progressbar/images and then extract the following archive into it overwriting the available default images:
Line 139: Line 151:
  
 ===== History ===== ===== History =====
 +
 ==== 2009-03-09 (1.0.0) ==== ==== 2009-03-09 (1.0.0) ====
 +
   * Added - Link-elements to the progress-images for tooltips in **all** browsers   * Added - Link-elements to the progress-images for tooltips in **all** browsers
   * Changed - Rebrand the plugin after take-over   * Changed - Rebrand the plugin after take-over
Line 146: Line 160:
  
 ==== 2007-11-13 (0.0.0) ==== ==== 2007-11-13 (0.0.0) ====
 +
   * Fixed - 0%-state bug   * Fixed - 0%-state bug
   * Fixed - Added width- and height-elements to the img tag   * Fixed - Added width- and height-elements to the img tag
Line 151: Line 166:
  
 ==== 2006-12-03 ==== ==== 2006-12-03 ====
 +
   * Initial version by Mike Smith   * Initial version by Mike Smith
  
 ===== Modifications ===== ===== 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 ==== ==== Image Free Version ====
-Since the archive no longer exists you no longer can access the images in the zip files, however, that example site is still up and running so you can rip the images off of there. But if that links dies, you'll have to copy the source code above to syntax.php inside of the folder, progressbar. 
  
-Next, you'll need to create an images directory inside of the progressbar directory. You'll need 11 images--one for each possible percentage. +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 textWhy deal with images?
-Ex: progressbar/images/100.gif.+
  
-However, if you don't want to do the hassle of eleven images, and you don't need the images to be disgustingly different you could simply use the variable $data[0] to indicate an image width and use the same image for every percentageHowever, 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.
  
-The following code will replace the $renderer->doc .... line in syntax.php. It produces just about the same results as the images. 
 <code php> <code php>
     $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>';     $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>';
 </code> </code>
 +
 Want to throw some text in there? Use this ugly solution((zero width percentage is an issue. set to 1 in that instance)): Want to throw some text in there? Use this ugly solution((zero width percentage is an issue. set to 1 in that instance)):
 +
 <code php> <code php>
   $renderer->doc .= '<table cellspacing="0" style="width: 120px;border: 1px solid #000;">   $renderer->doc .= '<table cellspacing="0" style="width: 120px;border: 1px solid #000;">
Line 175: Line 195:
   <td>&nbsp;</td></tr></table>';   <td>&nbsp;</td></tr></table>';
 </code> </code>
 +
 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 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
 +
 <code php> <code php>
 /** /**
Line 189: Line 211:
  
 ==== Inline Version ==== ==== 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. 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.
  
Line 201: Line 224:
 ** How To Use:** ** How To Use:**
  
--Update the connectTo function inside syntax.php as per below to make it support any number from 0-100.+  * Update the ''connectTo'' function inside syntax.php as per below to make it support any number from 0-100.
  
 <code php> <code php>
Line 213: Line 236:
 </code> </code>
  
--Replace the render function in your syntax.php file for this plugin, with this:+  * Replace the render function in your syntax.php file for this plugin, with this:
  
 <code php> <code php>
Line 230: Line 253:
 Code supplied by Sherri W. (start.ofitall.com). Code supplied by Sherri W. (start.ofitall.com).
  
-==== div float Version no images ==== +==== Image Free Div Float Version ==== 
 <code php> <code php>
   // Replace connectTo for use 0-100% instead of 10%/20% .. // like inline Version & Image Free Version   // Replace connectTo for use 0-100% instead of 10%/20% .. // like inline Version & Image Free Version
Line 246: Line 270:
   //  text-align third div tag   //  text-align third div tag
   //  color of the text third div tag    //  color of the text third div tag 
 +  //  Edited by J. Monin for basic ODT export support, and localization (write only % symbol)
  
  
Line 251: Line 276:
   function render($mode, &$renderer, $data)   function render($mode, &$renderer, $data)
   {   {
-    $renderer->doc.=' +       if($mode == 'xhtml'){ 
-      <div style="float:right;position: relative; width: 155px; height: 15px; background: #bdbdbd top left no-repeat;" >  +        $renderer->doc.=' 
-        <div style="background-color:#DEE7EC; width:'. $data[0].'% ;height: 15px;"> +          <div style="float:right;position: relative; width: 100px; height: 15px; background: #bdbdbd top left no-repeat;" >  
-   <div style="position: absolute; left:0;width:100%; height:15px;margin-top:-3px;padding-top: 0px; text-align: center; font-size:10px; color:black;"> +            <div style="background-color:#DEE7EC; width:'. $data[0].'% ;height: 15px;">  
-      '.$data[0].'complete +              <div style="position: absolute; left:0;width:100%; height:15px;margin-top:-3px;padding-top: 0px; text-align: center; font-size:10px; color:black;"> 
-   </div> +                 '.$data[0].'
- </div>  +              </div>   
-      </div>';+            </div>   
 +        </div>'; 
 +    } elseif ($mode == 'odt'){  
 +        $renderer->doc .= '<text:span>'.$data[0].'%</text:span>'; 
 +    } 
 +   
    return true;    return true;
   }   }
 </code> </code>
 +
 +Code supplied by M. Wolff, enhanced by J. Monin
  
 ===== Discussion ===== ===== Discussion =====
 +
 ==== Completed ==== ==== 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//+ 
 +  * 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//     * 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. ---  +  * 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-??-??//
-  * The main differences between the Modifications are the display Elements, <span> is inline, <div> and <table> are diplay:block +
-  * I **strongly recommend** to you use one of the Modifications  +
-//Anonymous 2007-??-??//+
  
 >> All three above-mentioned bugs have been corrected in [[http://lukas.zapletalovi.com/blog:progressbar_pro_dokuwiki|this version]] (actually this is version ''2007-11-13''). Please include it in the mainstream and notify me. Thanks. --- //Lukas 2007-11-13// >> All three above-mentioned bugs have been corrected in [[http://lukas.zapletalovi.com/blog:progressbar_pro_dokuwiki|this version]] (actually this is version ''2007-11-13''). Please include it in the mainstream and notify me. Thanks. --- //Lukas 2007-11-13//
Line 282: Line 313:
  
 ==== Open ==== ==== Open ====
 +
   * ...   * ...
 +
  
plugin/progressbar.1249993944.txt.gz · Last modified: 2009-08-11 14:32 by 134.130.4.46

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki