Last week John Jardin pointed me to a very interested progress bar project, Pace JS.
It is a loading progress bar which runs out of the box only by adding the Javascript and CSS theme. There is a possibility to configure it, but it is not necessary.
Getting started
I added in bower.json file the Bower package name and run Bower to update my client side framework in my On Disk Project.
{
“name”: “bower4xpages”,
“version”: “0.0.1”,
“dependencies”: {
“bootstrap.growl”: “latest”,
“eonasdan-bootstrap-datetimepicker”: “latest”,
“moment”: “latest”,
“underscore”: “latest”,
“fontawesome”: “latest”,
“pace”:”latest”
},
“private”: true
}
Next step is to refresh my On Disk Project in the Navigator inside the Domino Designer and sync the Database with my On Disk Project.
Include it
In my theme I only have to add 2 new entries
1 2 3 4 5 6 7 8 9 | < resource > < content-type >application/x-javascript</ content-type > < href >libs/pace/pace.js</ href > </ resource > < resource > < content-type >text/css</ content-type > < href >libs/pace/themes/blue/pace-theme-minimal.css</ href > </ resource > |
Build my application an reload a page in my XPages app……… but there was an javascript.
There is a need to disable in the AMD loader in the javascript file, or use the working around at XSnippets.
To disable AMD in the Pace.js file, replace this
1 2 3 4 5 6 7 8 9 10 11 | if ( typeof define === 'function' && define.amd) { define([ 'pace' ], function () { return Pace; }); } else if ( typeof exports === 'object' ) { module.exports = Pace; } else { if (options.startOnPageLoad) { Pace.start(); } } |
By this
1 2 3 | if (options.startOnPageLoad) { Pace.start(); } |
Happy coding…
Nice one.
Side note: have you considered either a syntax highlighter for your code blocks (or using gist.github.com)?
Thanks, I have updated my blog with the highlighter
I tried it, looks good!
It tested it with a page with a data view on it, at page load the indicator was shown, when I navigated through the view via a pager control the indicator never appeared (too short interval). I guess it needs some kind of minimal load time? Can I specify this interval?
Please see the documentation. There you can find more configuration parameters.