Display a dynamic progress bar

Description

XWiki integration of jsProgressBarHandlerv.

Screenshot:

How to use it

The simple way

1. Call the javascript library

   #set($discard = $xwiki.jsx.use('Macros.ProgressBar'))

2. Create the progress bar

   <span class="progressBar" id="myElementId">15%</span>

   • It must be a span element.
   • progressBar is the className that will trigger jsProgressBarHandler to change it with a progress bar
   • the id (myElementId in the example) must be unique (as per HTML specification) and is required for jsProgressBarHandler to work properly
   • the innerHTML of the element must be the percentage (either with or without the &proc; character)
3. Change dynamicaly the percentage value (with javascript)

     var p = Math.round(Math.random() * 100);
     myJsProgressBarHandler.setPercentage('myElementId', p);

The customizable way

1. Call the javascript library

   #set($discard = $xwiki.jsx.use('Macros.ProgressBar'))

2. Create the progress bar container

   <div class="percentImage1" id="hereComesMyFirstProgressBar">[ Loading Progress Bar ]</div>

   • this time, it can't be a span element.
3. Create the progress bar with javascript

     firstManualPB = new JS_BRAMUS.jsProgressBar($('hereComesMyFirstProgressBar'), 50, {animate: false, width: 240, height: 24});
     secondManualPB = new JS_BRAMUS.jsProgressBar($('hereComesMySecondProgressBar'), 10, {animate: true, showText: false});

   • The first param is the element to create the progressbar in
   • The second param is the (intial) percentage the progressbar should hold
   • The third param is optional and holds a specific configuration for that instance. Parts of this object can be omitted (and parts of the default options will be used instead), or the param can even be dropped (the full default options will be used)

More options on jsProgressBarHandlerv. 

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

1. Log in the wiki with a user having Administration rights
2. Go to the Administration page and select the Import category
3. Follow the on-screen instructions to upload the downloaded XAR
4. Click on the uploaded XAR and follow the instructions
5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes

v1.2

Bug fix (sometime, the init function was not called when the script was loaded deferred).

v1.1

Bug fix.

v1.0

First release! I hope you enjoy it!